/* ==========================================================================
   Melisa Sebeca — Atelier de Novias
   Home — estilo editorial de referencia: silviafernandez.com
   Tipografía de cuerpo/menú: PENDIENTE — usando Poppins como reemplazo
   provisorio hasta recibir la tipografía oficial de la marca.
   ========================================================================== */

:root{
  --color-black: #1a1a1a;
  --color-cream: #faf8f5;
  --color-white: #ffffff;
  --color-text: #333333;
  --color-text-soft: #666666;
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', Helvetica, Arial, sans-serif;
  --header-height: 96px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

h1, h2, h3{
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
}

p{ margin: 0; }

.section-intro{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
  padding: 0 24px;
}
.section-intro h2{
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: 12px;
}
.section-intro p{
  color: var(--color-text-soft);
  font-size: 16px;
}

.btn{
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 15px;
  border: 2px solid currentColor;
  transition: all .25s ease;
}
.btn-outline{
  color: var(--color-black);
  background: transparent;
}
.btn-outline:hover{
  background: rgba(0,0,0,.05);
}
.btn-solid{
  color: var(--color-black);
  background: var(--color-white);
  border-color: var(--color-white);
}
.btn-solid:hover{
  background: transparent;
  color: var(--color-white);
}
.btn-dark{
  color: var(--color-white);
  background: var(--color-black);
  border-color: var(--color-black);
}
.btn-dark:hover{
  background: transparent;
  color: var(--color-black);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.header-inner{
  max-width: 1280px;
  margin: 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  gap: 24px;
}

.logo-img{ height: 42px; width: auto; }

.main-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav > ul{
  display: flex;
  gap: 32px;
}

.main-nav > ul > li{ position: relative; }

.main-nav > ul > li > a{
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-black);
  padding: 8px 0;
}

.main-nav > ul > li > a.current,
.main-nav > ul > li > a:hover{
  border-bottom: 1px solid var(--color-black);
}

.submenu{
  position: absolute;
  top: 100%; left: 0;
  display: block;
  min-width: 260px;
  background: var(--color-white);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  border-radius: 4px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .2s ease;
}
.has-submenu:hover .submenu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu li a{
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.submenu li a:hover{ background: var(--color-cream); }

.nav-cta{ flex-shrink: 0; }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span{
  display: block;
  height: 2px;
  background: var(--color-black);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 4%;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.55) 100%);
}

.hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: 0 24px;
  max-width: 680px;
}

.hero-content .eyebrow{
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
  margin-bottom: 18px;
  opacity: .9;
}

.hero-content h1{
  font-size: clamp(44px, 7vw, 84px);
  margin-bottom: 20px;
}

.hero-tagline{
  font-size: 17px;
  margin-bottom: 32px;
  opacity: .95;
}

/* ==========================================================================
   Banner de colección
   ========================================================================== */
.collection-banner{
  background: var(--color-white);
  color: var(--color-black);
  text-align: center;
  padding: 20px 24px;
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.collection-banner p{
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.collection-banner a:hover{ text-decoration: underline; }

/* ==========================================================================
   Experiencias — layout existente, no modificar distribución/colores
   ========================================================================== */
.experiencias{
  padding: 96px 24px;
  background: var(--color-white);
}

.experiencias-grid{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.experiencia-card{
  text-align: center;
}

.experiencia-img{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 24px;
}
.experiencia-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.experiencia-img img.img-signature{
  object-position: 72% 25%;
}

.experiencia-card h3{
  font-size: 22px;
  margin-bottom: 8px;
}

.experiencia-card p{
  color: var(--color-text-soft);
  font-size: 15px;
  margin-bottom: 20px;
}

/* ==========================================================================
   Nuestra historia — teaser breve hacia quien-soy.html (no duplica esa página)
   Mismo patrón que "Le Matin" en silviafernandez.com: una foto a banda
   completa con texto superpuesto y un único botón hacia la página interna.
   ========================================================================== */
.historia-teaser{
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-white);
}

.historia-teaser .historia-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.historia-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.5) 100%);
}

.historia-content{
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: 64px 24px;
  max-width: 600px;
}

.historia-content .eyebrow{
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  margin-bottom: 14px;
  opacity: .9;
}

.historia-content h2{
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: 12px;
}

.historia-lead{
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 17px;
  margin-bottom: 14px;
  opacity: .95;
}

.historia-content p{
  font-size: 15px;
  margin-bottom: 28px;
  opacity: .9;
}

.btn-on-photo{
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn-on-photo:hover{
  background: var(--color-white);
  color: var(--color-black);
}

/* ==========================================================================
   Atelier / Valores de marca — texto/foto en zigzag, igual patrón que
   silviafernandez.com. Fotos en blanco y negro a pedido de la clienta.
   ========================================================================== */
.valores{
  padding: 96px 24px;
  background: var(--color-white);
}

.valores-mosaic{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.valor-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.valor-text h3{
  font-size: 22px;
  margin-bottom: 16px;
}

.valor-text p{
  color: var(--color-text-soft);
  font-size: 15px;
}

.valor-img{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 5px;
}

.valor-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}


.valores-cta{
  text-align: center;
  margin-top: 56px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--color-black);
  color: var(--color-white);
  padding: 72px 24px 32px;
}

.footer-inner{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.footer-logo{ height: 56px; width: auto; margin-bottom: 20px; }

.footer-location{
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}

.footer-col h4{
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: .9;
}

.footer-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a{
  font-size: 14px;
  opacity: .85;
}
.footer-col a:hover{ opacity: 1; text-decoration: underline; }

.footer-copy{
  text-align: center;
  font-size: 12px;
  opacity: .6;
  margin-top: 32px;
}

/* ==========================================================================
   Páginas interiores — hero corto
   Mismo lenguaje visual que el hero de Inicio: foto a pantalla completa,
   overlay suave, contenido centrado. Usado en historia, atelier, servicios,
   prensa, agenda, contacto y tienda.
   ========================================================================== */
.page-hero{
  position: relative;
  min-height: 56vh;
  max-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-black);
}
.page-hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 5%;
}
.page-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.55) 100%);
}
.page-hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: 120px 24px 48px;
  max-width: 700px;
}
.page-hero-content .eyebrow{
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
  margin-bottom: 16px;
  opacity: .9;
}
.page-hero-content h1{
  font-size: clamp(36px, 5.5vw, 60px);
  margin-bottom: 16px;
}
.page-hero-lead{
  font-size: 16px;
  opacity: .95;
  max-width: 520px;
  margin: 0 auto;
}
.page-hero-tall{ min-height: 88vh; max-height: none; }
.page-hero-img.is-centered{ object-position: center 50%; }
.page-hero-compact{ min-height: 40vh; }
.page-hero-compact .page-hero-content{ padding-top: 148px; padding-bottom: 40px; }
.page-hero-dark{ background: var(--color-black); }

/* ==========================================================================
   Hero de historia.html — texto junto a foto (la foto de Melisa es vertical
   y de baja resolución; a pantalla completa se pixela).
   ========================================================================== */
.split-hero{
  max-width: 1280px;
  margin: 0 auto;
  padding: 148px 24px 96px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.split-hero-copy .eyebrow{
  display: block;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
  color: var(--color-text-soft);
  margin-bottom: 16px;
}
.split-hero-copy h1{ font-size: clamp(34px, 4.4vw, 54px); margin-bottom: 20px; }
.split-hero-lead{ color: var(--color-text-soft); font-size: 16px; max-width: 460px; }
.split-hero-img{
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 5px;
}
.split-hero-img img{ width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* ==========================================================================
   Editorial — historia.html
   Bloques de texto respirados, galería infinita como respiro visual.
   ========================================================================== */
.editorial{
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 24px;
}
.editorial-text-only{ padding-top: 72px; padding-bottom: 72px; }
.editorial-copy{ max-width: 720px; margin: 0 auto; }
.editorial-copy p{
  color: var(--color-text-soft);
  font-size: 16px;
  margin-bottom: 24px;
}
.editorial-copy p:last-child{ margin-bottom: 0; }

/* Galería infinita — tomada tal cual del sitio en vivo (página Nuestra historia) */
.acad-infinite-gallery{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
  padding: 0;
}
.acad-gallery-track{
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  animation: acadInfiniteScroll 65s linear infinite;
  will-change: transform;
}
.acad-gallery-item{
  flex: 0 0 auto;
  overflow: hidden;
}
.acad-gallery-item img{
  display: block;
  height: 320px;
  width: auto;
  max-width: none;
  object-fit: contain;
  transition: transform .35s ease;
  transform: scale(1);
  backface-visibility: hidden;
}
.acad-gallery-item:hover img{ transform: scale(1.03); }
@keyframes acadInfiniteScroll{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(calc(-50% - 10px), 0, 0); }
}
@media (max-width: 980px){
  .acad-gallery-track{ gap: 16px; animation-duration: 55s; }
  .acad-gallery-item img{ height: 240px; }
}
@media (max-width: 767px){
  .acad-gallery-track{ gap: 12px; animation-duration: 45s; }
  .acad-gallery-item img{ height: 180px; }
}

.editorial-pull{
  max-width: 760px;
  margin: 0 auto 96px;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.4;
  color: var(--color-black);
}

/* ==========================================================================
   Pilares del atelier — atelier.html
   Zigzag editorial, una composición distinta por pilar.
   ========================================================================== */
.pillars{
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 24px;
}
.pillar-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 72px 0;
  border-top: 1px solid rgba(0,0,0,.12);
}
.pillar-row:last-of-type{ border-bottom: 1px solid rgba(0,0,0,.12); }
.pillar-row.reverse .pillar-img{ order: 2; }
.pillar-row.reverse .pillar-text{ order: 1; }
.pillar-num{
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--color-text-soft);
  margin-bottom: 14px;
  display: block;
}
.pillar-text h3{ font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 8px; }
.pillar-tag{
  display: block;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 17px;
  color: var(--color-text-soft);
  margin-bottom: 20px;
}
.pillar-text p{ color: var(--color-text-soft); font-size: 15px; }
.pillar-img{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 5px;
}
.pillar-img img{ width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Servicios overview — servicios.html
   Reutiliza el patrón visual de Experiencias del Inicio.
   ========================================================================== */
.servicios-page .experiencias{ padding-top: 96px; }

/* ==========================================================================
   Detalle de experiencia — experiencia-*.html
   ========================================================================== */
.experience-detail{
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.experience-media{
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 5px;
  position: sticky;
  top: 128px;
}
.experience-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.experience-body .eyebrow{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 13px;
  color: var(--color-text-soft);
  margin-bottom: 14px;
  display: block;
}
.experience-body h1{ font-size: clamp(32px, 4vw, 46px); margin-bottom: 20px; }
.experience-quote{
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 19px;
  color: var(--color-black);
  margin-bottom: 24px;
}
.experience-body p{ color: var(--color-text-soft); font-size: 15px; margin-bottom: 24px; }
.experience-includes{
  list-style: none;
  margin: 0 0 32px;
  padding: 24px 0;
  border-top: 1px solid rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.experience-includes li{
  font-size: 14px;
  padding: 6px 0;
  color: var(--color-text);
}
.experience-price{
  font-family: var(--font-heading);
  font-size: 15px;
  margin-bottom: 28px;
}
.experience-price strong{ font-size: 22px; display: block; margin-top: 4px; }

/* ==========================================================================
   Prensa — prensa.html
   Recorrido editorial: cada pieza a todo el ancho, mostrando la página de
   revista completa (object-fit:contain) para no recortar texto ni fotos.
   ========================================================================== */
.prensa-feature{
  max-width: 900px;
  margin: 0 auto;
  padding: 96px 24px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.prensa-feature .prensa-cover{
  width: 100%;
  background: var(--color-cream);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.prensa-feature .prensa-cover img{ width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.prensa-meta{
  display: block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 10px;
}
.prensa-feature h1{ font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 16px; }
.prensa-feature p{ color: var(--color-text-soft); font-size: 15px; margin-bottom: 28px; max-width: 380px; }

.prensa-list{
  max-width: 1120px;
  margin: 0 auto;
  padding: 96px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 88px;
  text-align: center;
}
.prensa-piece{ width: 100%; display: flex; flex-direction: column; align-items: center; }
.prensa-piece h3{ font-size: 22px; margin-bottom: 6px; }
.prensa-piece p{ color: var(--color-text-soft); font-size: 14px; max-width: 560px; }
.prensa-spread{
  margin-top: 24px;
  width: 100%;
  background: var(--color-cream);
  border-radius: 6px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prensa-spread img{
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
}

/* ==========================================================================
   Agenda — agenda-tu-cita.html
   ========================================================================== */
.agenda-page{
  max-width: 900px;
  margin: 0 auto;
  padding: 96px 24px;
}
.agenda-step{ margin-bottom: 72px; }
.agenda-step:last-child{ margin-bottom: 0; }
.agenda-step-label{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--color-text-soft);
  margin-bottom: 10px;
  display: block;
}
.agenda-step h2{ font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 8px; }
.agenda-step > p{ color: var(--color-text-soft); font-size: 15px; margin-bottom: 28px; max-width: 560px; }
.agenda-embed{
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 5px;
  overflow: hidden;
}
.agenda-embed iframe{ display: block; width: 100%; border: 0; }

/* ==========================================================================
   Contacto — contacto.html
   ========================================================================== */
.contact-page{
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}
.contact-info h2{ font-size: clamp(26px, 3vw, 36px); margin-bottom: 24px; }
.contact-info > p{ color: var(--color-text-soft); font-size: 15px; margin-bottom: 32px; max-width: 420px; }
.contact-list{ list-style: none; margin: 0; padding: 0; }
.contact-list li{
  padding: 20px 0;
  border-top: 1px solid rgba(0,0,0,.12);
}
.contact-list li:last-child{ border-bottom: 1px solid rgba(0,0,0,.12); }
.contact-list h4{
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
  color: var(--color-text-soft);
  margin-bottom: 6px;
}
.contact-list a, .contact-list p{ font-size: 15px; }
.contact-form{ display: flex; flex-direction: column; gap: 18px; }
.contact-form label{
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
  color: var(--color-text-soft);
}
.contact-form input, .contact-form textarea{
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 4px;
  background: var(--color-white);
}
.contact-form input:focus, .contact-form textarea:focus{
  outline: 2px solid var(--color-black);
  outline-offset: 1px;
}
.contact-form textarea{ min-height: 140px; resize: vertical; }
.contact-form button{
  align-self: flex-start;
  cursor: pointer;
}
.contact-map{
  max-width: 1280px;
  margin: 0 auto 96px;
  padding: 0 24px;
}
.contact-map iframe{
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 5px;
  display: block;
}

/* ==========================================================================
   Tienda — tienda.html
   ========================================================================== */
.tienda-page{
  max-width: 640px;
  margin: 0 auto;
  padding: 96px 24px;
  text-align: center;
}
.tienda-page .eyebrow{
  display: block;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
  color: var(--color-text-soft);
  margin-bottom: 16px;
}
.tienda-page h2{ font-size: clamp(26px, 3vw, 36px); margin-bottom: 20px; }
.tienda-page p{ color: var(--color-text-soft); font-size: 16px; margin-bottom: 32px; }

/* ==========================================================================
   Legales — términos, privacidad
   ========================================================================== */
.legal-page{
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 24px;
}
.legal-page h1{ font-size: clamp(30px, 3.5vw, 40px); margin-bottom: 40px; }
.legal-page h2{ font-size: 20px; margin: 40px 0 14px; }
.legal-page p, .legal-page li{ color: var(--color-text-soft); font-size: 15px; margin-bottom: 14px; }
.legal-page ul{ padding-left: 20px; }
.legal-page strong{ color: var(--color-text); }

/* ==========================================================================
   404
   ========================================================================== */
.error-page{
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 160px 24px 96px;
}
.error-page .eyebrow{
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
  color: var(--color-text-soft);
  margin-bottom: 16px;
}
.error-page h1{ font-size: clamp(64px, 10vw, 120px); margin-bottom: 16px; }
.error-page p{ color: var(--color-text-soft); font-size: 16px; margin-bottom: 36px; max-width: 420px; }

/* ==========================================================================
   Aviso de cookies
   ========================================================================== */
.cookie-banner{
  position: fixed;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 200;
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-black);
  color: var(--color-white);
  padding: 22px 24px;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner p{ font-size: 13px; line-height: 1.6; flex: 1 1 320px; opacity: .92; }
.cookie-banner a{ text-decoration: underline; }
.cookie-actions{ display: flex; gap: 10px; flex-shrink: 0; }
.cookie-actions button{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 4px;
  border: 1px solid var(--color-white);
  cursor: pointer;
  background: transparent;
  color: var(--color-white);
}
.cookie-actions button.cookie-accept{ background: var(--color-white); color: var(--color-black); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .split-hero{
    grid-template-columns: 1fr;
    padding-top: 120px;
    gap: 32px;
  }
  .split-hero-img{ aspect-ratio: 4 / 3; }
  .experiencias-grid{
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .historia-teaser{ min-height: 60vh; }
  .valores-mosaic{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-inner{
    grid-template-columns: 1fr 1fr;
  }
  .pillar-row{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pillar-row.reverse .pillar-img{ order: 1; }
  .pillar-row.reverse .pillar-text{ order: 2; }
  .experience-detail{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .experience-media{ position: static; aspect-ratio: 3 / 4; }
  .contact-page{
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 780px){
  .main-nav{
    position: fixed;
    top: var(--header-height); left: 0; right: 0; bottom: 0;
    background: var(--color-white);
    padding: 32px;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction: column; gap: 8px; }
  .main-nav > ul > li > a{ display: block; padding: 14px 0; font-size: 15px; }
  .submenu{
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none;
    display: none;
    padding-left: 16px;
  }
  .has-submenu.is-open .submenu{ display: block; }

  .nav-cta{ display: none; }
  .nav-toggle{ display: flex; }

  .footer-inner{ grid-template-columns: 1fr; }

  .prensa-list{ gap: 64px; }
  .prensa-spread{ padding: 14px; }
  .prensa-spread img{ max-height: 340px; }
}