/* =============================================
   Taranta Estudio — Estilos del tema
   (fiel a styles.css del diseño original)
   ============================================= */

/* ---- @font-face — Apple Garamond ---- */
@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}


/* ---- DESIGN TOKENS ---- */
:root {
  --color-taupe:      #BCAAA1;
  --color-taupe-70:   rgba(188, 170, 161, 0.7);
  --color-blush:      #F2DBD0;
  --color-blush-70:   rgba(242, 219, 208, 0.7);
  --color-terracotta: #D68E7C;
  --color-terracotta-70: rgba(214, 142, 124, 0.7);

  --color-white:      #FFFFFF;
  --color-off-white:  #FAF7F5;
  --color-cream:      #F5F0EC;
  --color-dark:       #2C2420;
  --color-muted:      #6B5E57;

  --font-heading:     'Apple Garamond', 'Garamond', serif;
  --font-body:        'Poppins', 'Helvetica Neue', sans-serif;
  --font-display:     'Apple Garamond', 'Garamond', serif;

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ---- RESET & BASE ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-dark);
  background: #1a1816;
  line-height: 1.7;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.page-open { overflow-y: auto; background: var(--color-blush); }

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; border: none; outline: none; background: none; cursor: pointer; }
input, textarea { font-family: inherit; font-size: inherit; border: none; outline: none; background: none; }

/* Oculta la barra de administración de WP en la portada de pantalla completa */
body.taranta-home { margin-top: 0 !important; }
body.taranta-home #wpadminbar { position: fixed; }


/* ---- INTRO OVERLAY ---- */
.intro {
  position: fixed; inset: 0; z-index: 1000; background: #1a1816;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease;
}
.intro__logo {
  width: 120px; height: auto; opacity: 0; transform: scale(0.92);
  animation: introLogoIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s;
}
.intro--fade { opacity: 0; pointer-events: none; }
@keyframes introLogoIn { to { opacity: 1; transform: scale(1); } }


/* ---- HERO — Split screen ---- */
.hero { position: fixed; inset: 0; display: flex; overflow: hidden; transition: opacity 0.6s ease; }
.hero--hidden { opacity: 0; pointer-events: none; }

.hero__divider {
  position: absolute; top: 0; left: 50%; width: 1px; height: 100%;
  background: rgba(255, 255, 255, 0.06); z-index: 10;
  transform: scaleY(0); transform-origin: top center;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.hero--active .hero__divider { transform: scaleY(1); }

.hero__panel {
  position: relative; width: 50%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
}
.hero__panel--left { transform: translateX(50%); transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1); }
.hero__panel--right { transform: translateX(-50%); transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1); }
.hero--active .hero__panel--left { transform: translateX(0); }
.hero--active .hero__panel--right { transform: translateX(0); }

.hero__panel-bg { position: absolute; inset: 0; z-index: 1; }
.hero__panel-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.8s ease; background-size: cover; background-position: center;
}
.hero__panel-slide.active { opacity: 1; }

.hero__panel--left .hero__panel-slide:nth-child(1) { background-color: #3a3632; }
.hero__panel--left .hero__panel-slide:nth-child(2) { background-color: #44403a; }
.hero__panel--left .hero__panel-slide:nth-child(3) { background-color: #352f2b; }
.hero__panel--right .hero__panel-slide:nth-child(1) { background-color: #4a4440; }
.hero__panel--right .hero__panel-slide:nth-child(2) { background-color: #3e3834; }
.hero__panel--right .hero__panel-slide:nth-child(3) { background-color: #504844; }

.hero__panel-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(0, 0, 0, 0.15); transition: background 0.5s ease;
}
.hero__panel:hover .hero__panel-overlay { background: rgba(0, 0, 0, 0.05); }

.hero__panel-label {
  position: relative; z-index: 3;
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400; font-style: italic; color: var(--color-white);
  letter-spacing: 0.04em; opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease, letter-spacing 0.4s ease;
}
.hero--active .hero__panel-label { opacity: 1; transform: translateY(0); }
.hero--active .hero__panel--left .hero__panel-label { transition-delay: 0.6s; }
.hero--active .hero__panel--right .hero__panel-label { transition-delay: 0.75s; }
.hero__panel:hover .hero__panel-label { letter-spacing: 0.12em; }


/* ---- FULLSCREEN MENU OVERLAY ---- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s 0.5s;
}
.menu-overlay--open { opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s 0s; }
.menu-overlay::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px);
}
.menu-overlay__close {
  position: absolute; top: 28px; right: 36px; z-index: 10;
  font-size: 2rem; font-weight: 300; color: rgba(255, 255, 255, 0.6);
  line-height: 1; transition: var(--transition);
}
.menu-overlay__close:hover { color: var(--color-white); transform: scale(1.1); }

.menu-overlay__nav {
  position: relative; z-index: 5; display: flex; flex-direction: column;
  align-items: center; gap: 0.6rem;
}
.menu-overlay__link {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 400; font-style: italic; color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.03em; padding: 0.3rem 1rem; position: relative;
  transition: color 0.3s ease, letter-spacing 0.4s ease;
  opacity: 0; transform: translateY(15px);
}
.menu-overlay--open .menu-overlay__link { opacity: 1; transform: translateY(0); }
.menu-overlay--open .menu-overlay__link:nth-child(1) { transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s, color 0.3s ease, letter-spacing 0.4s ease; }
.menu-overlay--open .menu-overlay__link:nth-child(2) { transition: opacity 0.5s ease 0.18s, transform 0.5s ease 0.18s, color 0.3s ease, letter-spacing 0.4s ease; }
.menu-overlay--open .menu-overlay__link:nth-child(3) { transition: opacity 0.5s ease 0.26s, transform 0.5s ease 0.26s, color 0.3s ease, letter-spacing 0.4s ease; }
.menu-overlay--open .menu-overlay__link:nth-child(4) { transition: opacity 0.5s ease 0.34s, transform 0.5s ease 0.34s, color 0.3s ease, letter-spacing 0.4s ease; }
.menu-overlay__link:hover { color: var(--color-white); letter-spacing: 0.1em; }
.menu-overlay__link::after {
  content: ''; position: absolute; bottom: 0; left: 50%;
  width: 0; height: 1px; background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%); transition: width 0.4s ease;
}
.menu-overlay__link:hover::after { width: 80%; }


/* ---- PAGE (estudio scrollable) ---- */
.page { display: none; opacity: 0; transition: opacity 0.6s ease; }
.page--visible { display: block; }
.page--active { opacity: 1; }


/* ---- PAGE HEADER ---- */
.page-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 200;
  display: flex; align-items: center; padding: 1.6rem 2.2rem;
  transition: background 0.3s ease;
}
.page-header--scrolled { background: rgba(242, 219, 208, 0.92); backdrop-filter: blur(10px); }
.page-header__logo { flex-shrink: 0; z-index: 2; }
.page-header__logo-img { height: 46px; width: auto; }
.page-header__nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; }
.page-header__link {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 400;
  color: rgba(255, 255, 255, 0.5); transition: var(--transition);
}
.page-header__link:hover { color: var(--color-dark); }
.page-header__link.active { color: rgba(107, 94, 87, 0.75); }


/* ---- MANIFIESTO ---- */
.s-manifiesto { background: var(--color-blush); }
.s-manifiesto__hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 6rem 2rem 4rem;
}
.s-manifiesto__title {
  font-family: var(--font-display); font-size: clamp(4rem, 7vw, 8rem);
  font-weight: 400; line-height: 1.1; color: var(--color-muted); margin-bottom: 2.5rem;
}
.s-manifiesto__title span { font-weight: 700; color: var(--color-dark); font-style: normal; }
.s-manifiesto__logo-wrap {
  width: 110px; height: 110px; border: 1.5px solid var(--color-terracotta-70);
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
.s-manifiesto__logo { width: 100%; height: auto; }
.s-manifiesto__body { max-width: 470px; margin: 0 auto; padding: 2.8rem 2rem 2.4rem; text-align: center; }
.s-manifiesto__body p {
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 400;
  color: var(--color-muted); line-height: 1.45; margin-bottom: 1.05rem;
}
.s-manifiesto__body strong { font-weight: 500; color: var(--color-dark); }
.s-manifiesto__quote {
  font-family: var(--font-display); font-size: 2rem; font-style: normal;
  font-weight: 700; color: var(--color-dark); margin-top: 1.2rem;
}


/* ---- SERVICIOS ---- */
.s-servicios { background: var(--color-taupe-70); padding: 2.4rem 2.5rem 4.8rem; }
.s-servicios__title {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400; font-style: normal; color: rgba(255, 255, 255, 0.75);
  text-align: center; margin-bottom: 2.6rem;
}
.s-servicios__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.1rem;
  max-width: 1100px; margin: 0 auto;
}
.s-servicios__item h3 {
  font-family: var(--font-display); font-size: 3rem; font-weight: 400;
  color: var(--color-dark); margin-bottom: 0.55rem; text-align: center; line-height: 0.95;
}
.s-servicios__item p {
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 400;
  color: var(--color-dark); opacity: 0.8; line-height: 1.35;
  text-align: center; max-width: 240px; margin: 0 auto;
}


/* ---- EQUIPO ---- */
.s-equipo { background: var(--color-blush); padding: 2.6rem 2.5rem 0; }
.s-equipo__title {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400; font-style: normal; color: var(--color-terracotta);
  text-align: center; margin-bottom: 2.5rem;
}
.s-equipo__content {
  display: grid; grid-template-columns: 1.05fr 0.95fr; max-width: 1100px;
  margin: 0 auto; background: transparent; align-items: start; gap: 3.2rem;
}
.s-equipo__image { width: 100%; min-height: 620px; background: #8f8d86; background-size: cover; background-position: center; transition: opacity 0.35s ease; }
.s-equipo__list { padding: 2.8rem 0 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 1.55rem; }
.s-equipo__member { display: flex; flex-direction: column; }
.s-equipo__member[data-photo] { cursor: pointer; }
.s-equipo__name { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.68); transition: color 0.3s ease; }
.s-equipo__role { font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; color: rgba(255, 255, 255, 0.52); line-height: 1.1; transition: color 0.3s ease; }
.s-equipo__member[data-photo]:hover .s-equipo__name,
.s-equipo__member[data-photo]:hover .s-equipo__role { color: #c98a7a; }
.s-equipo__member--lead .s-equipo__name,
.s-equipo__member--active .s-equipo__name { font-weight: 600; color: #b37667; }
.s-equipo__member--lead .s-equipo__role,
.s-equipo__member--active .s-equipo__role { color: #b37667; }


/* ---- CONTACTO ---- */
.s-contacto { background: var(--color-taupe-70); padding: 5rem 2.5rem 3rem; }
.s-contacto__title {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 400; font-style: italic; color: var(--color-dark);
  text-align: center; margin-bottom: 3rem;
}
.s-contacto__form { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.s-contacto__row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.s-contacto__form input, .s-contacto__form textarea {
  width: 100%; padding: 0.8rem 0; border-bottom: 1px solid var(--color-muted);
  font-family: var(--font-display); font-size: 1rem; font-style: italic;
  color: var(--color-dark); transition: var(--transition); resize: none;
}
.s-contacto__form input::placeholder, .s-contacto__form textarea::placeholder {
  color: var(--color-muted); font-family: var(--font-display); font-style: italic;
}
.s-contacto__form input:focus, .s-contacto__form textarea:focus { border-bottom-color: var(--color-terracotta); }
.s-contacto__btn {
  align-self: center; font-family: var(--font-body); font-size: 0.85rem;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-white); background: var(--color-terracotta);
  padding: 0.9rem 2.8rem; border-radius: 50px; margin-top: 1rem; transition: var(--transition);
}
.s-contacto__btn:hover { background: var(--color-dark); }
.s-contacto__feedback { text-align: center; font-family: var(--font-display); font-style: italic; color: var(--color-dark); min-height: 1.2em; }


/* ---- FOOTER ---- */
.s-footer { background: var(--color-taupe-70); padding: 0 2.5rem 3rem; }
.s-footer__line { width: 100%; max-width: 700px; height: 1px; background: var(--color-muted); margin: 3rem auto; opacity: 0.3; }
.s-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 900px; margin: 0 auto 3rem; text-align: center; }
.s-footer__col h4 { font-family: var(--font-display); font-size: 1rem; font-style: italic; font-weight: 400; color: var(--color-dark); margin-bottom: 0.6rem; }
.s-footer__col p { font-family: var(--font-body); font-size: 0.75rem; font-weight: 300; color: var(--color-muted); line-height: 1.8; }
.s-footer__col a { transition: var(--transition); }
.s-footer__col a:hover { color: var(--color-dark); }
.s-footer__social { display: flex; justify-content: center; gap: 1.8rem; padding-bottom: 1rem; }
.s-footer__social a { color: var(--color-dark); opacity: 0.6; transition: var(--transition); }
.s-footer__social a:hover { opacity: 1; }


/* ---- PORTFOLIO PAGE ---- */
.portfolio-page { display: none; opacity: 0; background: #e9d8d2; min-height: 100vh; transition: opacity 0.6s ease; }
.portfolio-page--visible { display: block; }
.portfolio-page--active { opacity: 1; }

.portfolio-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 220; display: flex; align-items: center; padding: 1.6rem 2.2rem; }
.portfolio-header__logo { flex-shrink: 0; z-index: 2; }
.portfolio-header__logo-img { height: 46px; width: auto; }
.portfolio-header__nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; }
.portfolio-header__link { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; color: rgba(107, 74, 54, 0.45); transition: var(--transition); }
.portfolio-header__link:hover { color: #4a3222; }
.portfolio-header__link.active { color: rgba(107, 74, 54, 0.85); }
.portfolio-header__link--over { color: rgba(255, 255, 255, 0.82) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
.portfolio-header__link--over:hover, .portfolio-header__link--over.active { color: #fff !important; }

.portfolio-main { padding: 7rem 0 0; }
.portfolio-intro { max-width: 1040px; margin: 0 auto 0.4rem; text-align: center; }
.portfolio-intro__eyebrow { display: none; }
.portfolio-list { max-width: none; margin: 0; }

.portfolio-project { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; margin-bottom: 5rem; cursor: pointer; }
.portfolio-project--reverse .portfolio-project__text { order: 2; }
.portfolio-project--reverse .portfolio-project__media { order: 1; }
.portfolio-project__text { max-width: 420px; justify-self: center; text-align: center; padding: 0 2.5rem; }
.portfolio-project__title { font-family: var(--font-display); font-size: 2.1rem; font-weight: 400; color: #b47667; margin-bottom: 0.7rem; line-height: 1.1; }
.portfolio-project__desc { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; color: rgba(88, 78, 74, 0.84); }
.portfolio-project__media { width: 100%; aspect-ratio: 4 / 5; background: #85898f; overflow: hidden; }
.portfolio-project__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.portfolio-project:hover .portfolio-project__media img { transform: scale(1.05); }

.portfolio-empty { display: none; text-align: center; font-family: var(--font-display); font-size: 1.4rem; color: rgba(107, 74, 54, 0.55); padding: 6rem 1rem 5rem; }
.portfolio-list--empty .portfolio-empty { display: block; }

.portfolio-detail { display: none; max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
.portfolio-detail--visible { display: block; }
.portfolio-detail__back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.05rem; color: rgba(107, 74, 54, 0.7); margin-bottom: 2rem; transition: color 0.25s ease; }
.portfolio-detail__back:hover { color: #4a3222; }
.portfolio-detail__title { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 400; color: #b47667; text-align: center; margin-bottom: 0.8rem; }
.portfolio-detail__desc { max-width: 640px; margin: 0 auto 3rem; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; color: rgba(88, 78, 74, 0.84); text-align: center; }
.portfolio-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.portfolio-detail__grid img { width: 100%; height: 100%; object-fit: cover; display: block; background: #85898f; }
.portfolio-detail__grid figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #85898f; }
.portfolio-detail__grid figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }


/* ---- SCROLL REVEAL ---- */
.reveal { opacity: 0; transform: translateY(25px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal--visible { opacity: 1; transform: translateY(0); }
.s-manifiesto__body.reveal.reveal--visible { max-width: 618px; }
.s-manifiesto__body.reveal.reveal--visible p { font-size: 15px !important; }


/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .intro__logo { width: 90px; }
  .hero { flex-direction: column; }
  .hero__panel { width: 100%; height: 50%; }
  .hero__panel--left { transform: translateY(50%); }
  .hero__panel--right { transform: translateY(-50%); }
  .hero--active .hero__panel--left, .hero--active .hero__panel--right { transform: translateY(0); }
  .hero__divider { top: 50%; left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: center; }
  .hero--active .hero__divider { transform: scaleX(1); }
  .menu-overlay__close { top: 20px; right: 24px; }
  .menu-overlay__link { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .page-header { padding: 1rem 1.2rem; }
  .page-header__logo-img { height: 34px; }
  .page-header__nav { gap: 0.6rem; }
  .page-header__link { font-size: 1.2rem; }
  .s-servicios__grid { grid-template-columns: 1fr 1fr; }
  .s-equipo__content { grid-template-columns: 1fr; }
  .s-equipo__image { min-height: 300px; }
  .s-contacto__row { grid-template-columns: 1fr; gap: 1rem; }
  .s-footer__cols { grid-template-columns: 1fr; gap: 1.5rem; }
  .portfolio-header { padding: 1rem 1.2rem; }
  .portfolio-header__logo-img { height: 34px; }
  .portfolio-header__nav { gap: 0.6rem; }
  .portfolio-header__link { font-size: 1.2rem; }
  .portfolio-main { padding: 5.6rem 0 0; }
  .portfolio-project { grid-template-columns: 1fr; min-height: auto; row-gap: 1.2rem; margin-bottom: 3rem; }
  .portfolio-project__text { order: 2; text-align: center; justify-self: stretch; max-width: none; padding: 0 1.5rem; }
  .portfolio-project--reverse .portfolio-project__text { order: 2; }
  .portfolio-project__media, .portfolio-project--reverse .portfolio-project__media { order: 1; justify-self: stretch; width: 100%; max-width: none; aspect-ratio: 4 / 3; }
  .portfolio-project__title { font-size: 1.6rem; }
  .portfolio-project__desc { font-size: 1.05rem; }
}

@media (max-width: 480px) {
  .s-servicios__grid { grid-template-columns: 1fr; }
  .page-header__nav { display: none; }
  .portfolio-header__nav { display: none; }
}