/* ============================================
   WINIFRED — Estación de Flores
   Tokens derivados de su propio portfolio:
   blush + olive + cream + terracota
   ============================================ */

:root{
  --cream:      #F2EAE2;
  --cream-deep: #E7DED9;
  --blush:      #E9CCD3;
  --blush-deep: #D9AEB7;
  --olive:      #6F6A40;
  --olive-deep: #524E30;
  --terracotta: #C97D3B;
  --terracotta-deep: #834D21;  /* contraste AA sobre crema, cream-deep, blush y paper */
  --terracotta-darkest: #6B3F1B; /* para el rosa intenso de Contacto */
  --tan:        #D9B487;
  --ink:        #2B2820;
  --paper:      #FBF8F4;

  --display: 'Fraunces', ui-serif, Georgia, serif;
  --body: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --eriko: 'ERIKO', 'Fraunces', ui-serif, Georgia, serif;

  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --radius: 2px;
}

/* Tipografía propia — se usa en el título de Cosmonía */
@font-face{
  font-family:'ERIKO';
  src:url('fonts/ERIKO.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

*,*::before,*::after{ box-sizing:border-box; }
/* scrollbar-gutter:stable reserva el ancho de la barra desde el inicio, para que
   al cerrarse la intro (que quita overflow:hidden) NO aparezca la barra de golpe
   y la foto del hero no “salte” 15px. Safari usa barras overlay: no lo necesita. */
html{ scroll-behavior:smooth; scrollbar-gutter:stable; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; margin:0 0 .5em; letter-spacing:-0.01em; line-height:1.12; }
h2{ text-wrap:balance; }
p{ margin:0 0 1em; }
section{ position:relative; }

.eyebrow{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.85rem;
  font-weight:700;
  color:var(--terracotta-deep);
  margin-bottom:1rem;
}
/* Sobre oliva o tinta: crema — el tan no llegaba al contraste mínimo */
.eyebrow--light{ color:var(--cream); }
/* Sobre el rosa intenso de Contacto hace falta un paso más de profundidad */
.contact .eyebrow{ color:var(--terracotta-darkest); }

/* Foco de teclado — visible en todo elemento interactivo */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--terracotta);
  border-radius:3px;
}
.philosophy :focus-visible, .svc--dark :focus-visible, .footer :focus-visible, .intro :focus-visible{
  box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--tan);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============ reveal-on-scroll ============ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(0.23,1,0.32,1), transform .8s cubic-bezier(0.23,1,0.32,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ================= NAV ================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem clamp(1.25rem,4vw,3rem);
  background:transparent;
  /* backdrop-filter declarado en 0 desde el arranque (no solo en .is-scrolled):
     así el navegador promueve el nav a su propia capa de composición ANTES de
     que empiece el scroll. Si esa promoción de capa pasa recién al cruzar el
     umbral —a mitad de un scroll activo—, mobile Safari la renderiza mal por
     un frame y se ve como un salto/zoom. Mismo motivo por el que el padding
     ya no cambia acá: cualquier cambio de tamaño del nav coincidiendo con el
     blur se leía como "zoom" (ver nota en .nav__logo img más abajo). */
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  transition:background .3s ease, box-shadow .3s ease,
             backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
}
.nav.is-scrolled{
  background:rgba(242,234,226,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(43,40,32,.08);
}
/* El logo del nav no existe al abrir: aparece al scrollear, como si el
   wordmark grande del hero hubiera subido hasta acá. Escala e intensidad
   reducidas a propósito: un salto grande (antes 1.5x) se sentía como un
   "zoom" al cruzar el umbral de scroll, sobre todo en mobile con el blur
   del fondo animando a otra velocidad — ahora todo corre en .35s parejo. */
.nav__logo{ display:block; line-height:0; text-decoration:none; }
/* Se probó con scale(1.5) y luego scale(1.08): en un teléfono real, cualquier
   cambio de tamaño acá —por chico que sea— combinado con el blur del fondo
   prendiéndose al mismo tiempo se leía como un "zoom" al cruzar el umbral de
   scroll. Sin scale, solo aparece deslizándose: cero ambigüedad. */
.nav__logo img{
  height:clamp(23px,2.9vw,29px); width:auto;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
.nav.is-scrolled .nav__logo img{ opacity:1; transform:translateY(0); }
.nav__logo:hover img{ opacity:.72; }
.nav__links{
  display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.2rem);
  font-size:.88rem; font-weight:500;
}
.nav__links a{ text-decoration:none; opacity:.85; transition:opacity .2s; white-space:nowrap; position:relative; }
/* Subrayado ondulado, trazado a mano — se dibuja de izquierda a derecha */
.nav__links a:not(.nav__cta)::after{
  content:''; position:absolute; left:0; right:0; bottom:-7px; height:5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 6' preserveAspectRatio='none'%3E%3Cpath d='M0 4.2 C 10 1.2, 18 5.2, 28 3.4 S 46 .9, 56 3.2 S 72 4.6, 80 2.4' fill='none' stroke='%236F6A40' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:0% 100%; background-position:left center;
  /* trazo verde oliva y más pausado: se dibuja como a mano */
  transition:background-size 1.05s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .nav__links a:hover{ opacity:1; }
  .nav__links a:not(.nav__cta):hover::after{ background-size:100% 100%; }
}
.nav__links a.is-active{ opacity:1; color:var(--terracotta-deep); }
.nav__links a.is-active::after{ background-size:100% 100%; }
.nav__cta{
  background:var(--olive); color:var(--paper) !important;
  padding:.55rem 1.15rem; border-radius:999px; opacity:1 !important;
}
@media (hover:hover) and (pointer:fine){
  .nav__cta:hover{ background:var(--olive-deep); }
}
.nav__toggle{
  display:none; position:relative; width:44px; height:44px;
  background:none; border:0; cursor:pointer; padding:0; flex:0 0 auto;
}
.nav__toggle span{
  position:absolute; left:11px; width:22px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform .45s cubic-bezier(.34,1.3,.4,1);
}
.nav__toggle span:nth-child(1){ top:15px; }
.nav__toggle span:nth-child(2){ top:21px; }
.nav__toggle span:nth-child(3){ top:27px; }
/* el asterisco floral: las 3 líneas rotan a un pinwheel de 3 puntas y
   queda así fijo (no vuelve a X) mientras el menú permanece abierto */
.nav__toggle-dot{
  position:absolute; left:20px; top:20px; width:4px; height:4px;
  border-radius:50%; background:var(--terracotta);
  opacity:0; transform:scale(0);
  transition:transform .4s cubic-bezier(.34,1.5,.4,1) .1s, opacity .3s ease .1s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(0deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ transform:rotate(60deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(120deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-dot{ opacity:1; transform:scale(1); }

.nav__scrim{
  position:fixed; inset:0; z-index:105;
  background:rgba(43,40,32,.32);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.nav__scrim.is-open{ opacity:1; pointer-events:auto; }

@media (max-width:1080px){
  .nav__toggle{ display:flex; z-index:110; }
  .nav__links{
    position:fixed; inset:0 0 0 auto; top:0; right:0; left:auto;
    width:min(320px,82vw); height:100vh; height:100dvh;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:6rem 2rem 2.5rem;
    background:var(--cream-deep);
    border-left:1px solid rgba(43,40,32,.1);
    transform:translateX(100%); transition:transform .38s cubic-bezier(.32,.72,0,1);
    font-size:1.3rem;
    z-index:106;
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__links a{
    font-family:var(--display); font-weight:400; white-space:normal; line-height:1.25;
    padding:.85rem 0; border-top:1px solid rgba(43,40,32,.1);
    opacity:0; transform:translateX(14px);
    transition:opacity .3s ease, transform .3s cubic-bezier(.23,1,.32,1);
  }
  .nav__links a:first-child{ border-top:0; }
  .nav__links.is-open a{ opacity:1; transform:translateX(0); }
  .nav__links.is-open a:nth-child(1){ transition-delay:.08s }
  .nav__links.is-open a:nth-child(2){ transition-delay:.13s }
  .nav__links.is-open a:nth-child(3){ transition-delay:.18s }
  .nav__links.is-open a:nth-child(4){ transition-delay:.23s }
  .nav__links.is-open a:nth-child(5){ transition-delay:.28s }
  .nav__links.is-open a:nth-child(6){ transition-delay:.33s }
  .nav__links.is-open a:nth-child(7){ transition-delay:.38s }
  /* el CTA pasa a ocupar todo el ancho y sigue el mismo ritmo de entrada
     que el resto de la lista, en vez de quedar como una píldora suelta */
  .nav__cta{
    margin-top:1.2rem; text-align:center; border-top:0 !important;
    font-family:var(--body); font-size:.85rem; padding:.9rem 1.5rem;
    letter-spacing:.03em;
  }
}

/* ================= HERO ================= */
.hero{
  position:relative; height:100svh; min-height:520px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; background:var(--ink);
}
.hero__media{ position:absolute; inset:0; background:#b9a48c; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:60% 30%;
  opacity:0; transition:opacity .6s ease;
}
.hero__media img.is-loaded{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(242,234,226,.55) 0%, rgba(242,234,226,0) 14%, rgba(20,18,12,.15) 55%, rgba(231,222,217,.98) 92%);
}
.hero__wordmark{
  position:relative; z-index:2; margin:0 0 clamp(1rem,2.5vw,2rem);
  padding:0 clamp(1rem,4vw,3rem); line-height:0;
}
/* La foto está espejada (la figura quedó a la derecha), así que el wordmark
   cae sobre la ventana en contraluz. Blanco, con una sombra oscura muy sutil
   para que no se pierda en el tramo más claro de la ventana. */
.hero__wordmark img{
  width:min(60%,600px); height:auto;
  filter:brightness(0) invert(1)
         drop-shadow(0 1px 2px rgba(0,0,0,.35))
         drop-shadow(0 2px 10px rgba(0,0,0,.22));
}
.hero__foot{
  position:relative; z-index:2; background:var(--cream-deep);
  padding:1.8rem clamp(1rem,4vw,3rem) 2.2rem;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap;
}
/* Carta de presentación — las tres líneas son el mensaje principal */
.hero__tagline{
  margin:0; display:flex; flex-direction:column;
  position:relative; padding-left:clamp(.9rem,1.8vw,1.4rem);
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,2.35vw,1.7rem); line-height:1.32;
}
.hero__tagline::before{
  content:''; position:absolute; left:0; top:.28em; bottom:.3em;
  width:1.5px; background:linear-gradient(180deg,var(--terracotta),rgba(201,125,59,.15));
}
.hero__tagline em{ font-style:italic; color:var(--terracotta-deep); }
.hero__place{ margin:1.1rem 0 0 clamp(.9rem,1.8vw,1.4rem); }
.hero__scroll{
  display:flex; align-items:center; gap:.6rem; text-decoration:none; font-size:.8rem;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
}
.hero__scroll-line{ width:34px; height:1px; background:var(--ink); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:''; position:absolute; inset:0; background:var(--terracotta);
  animation:scrollline 1.8s ease-in-out infinite;
}
@keyframes scrollline{
  0%{ transform:translateX(-100%); } 50%{ transform:translateX(0); } 100%{ transform:translateX(100%); }
}
/* En móvil la foto es más angosta: se reencuadra hacia la chica para que se vea su rostro */
@media (max-width:760px){
  .hero__media img{ object-position:33% 30%; }
}

/* ================= ABOUT ================= */
.about{
  background:var(--blush);
  display:grid; grid-template-columns:.85fr 1.15fr;
  align-items:stretch;
}
.about__media{ overflow:hidden; min-height:420px; }
.about__media img{ width:100%; height:100%; object-fit:cover; }
.about__copy{
  padding:clamp(2.5rem,6vw,5.5rem) clamp(1.5rem,6vw,5rem);
  display:flex; flex-direction:column; justify-content:center;
}
.about__copy h2{ font-size:clamp(2.3rem,4.7vw,3.5rem); }
.about__copy h2 em{ font-style:italic; color:var(--terracotta-deep); }
.about__lede{ font-size:1.15rem; font-weight:500; }
/* Rasgos: versatilidad · espontaneidad · entusiasmo · creatividad */
.traits{
  list-style:none; margin:1.8rem 0 0; padding:1.4rem 0 0;
  border-top:1px solid rgba(43,40,32,.18);
  display:flex; flex-wrap:wrap; gap:.5rem .7rem;
}
.traits li{
  font-family:var(--display); font-style:italic; font-size:1.12rem;
  color:var(--olive-deep);
}
.traits li:not(:last-child)::after{
  content:'·'; color:var(--terracotta); margin-left:.7rem; font-style:normal;
}
@media (max-width:900px){
  .about{ grid-template-columns:1fr; }
  .about__media{ min-height:340px; }
}

/* ================= PHILOSOPHY ================= */
.philosophy{
  background:var(--olive); color:var(--paper);
  padding:clamp(3rem,8vw,6rem) clamp(1.25rem,4vw,3rem) clamp(4rem,8vw,6rem);
  text-align:center;
}
.philosophy__title{
  margin:0 0 clamp(2.5rem,6vw,4rem); line-height:0;
}
.philosophy__title img{
  display:block; width:min(360px,58vw); height:auto; margin:0 auto;
  filter:brightness(0) invert(1);
}
.philosophy__timeline{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3rem);
  max-width:1100px; margin:0 auto; position:relative;
}
.philosophy__timeline::before{
  content:''; position:absolute; top:22px; left:8%; right:8%; height:1px; background:rgba(251,248,244,.3);
}
.philosophy__col{ position:relative; padding-top:2.5rem; }
.philosophy__col::before{
  content:''; position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%; background:var(--paper);
}
.philosophy__icon{ display:inline-flex; width:40px; height:40px; margin-bottom:1rem; color:var(--tan); }
.philosophy__icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; }
.philosophy__col h3{
  font-size:1.3rem; text-transform:uppercase; letter-spacing:.14em; font-weight:500; color:var(--cream);
  min-height:1.4em;               /* los 3 títulos arrancan a la misma altura */
}
/* Las tres columnas se leen como una sola familia: misma medida de línea,
   mismo comienzo y sin líneas huérfanas — antes la más larga formaba un
   bloque macizo y las otras quedaban desparejas. */
.philosophy__col{ display:flex; flex-direction:column; align-items:center; }
.philosophy__col p{
  font-size:.94rem; opacity:.88;
  max-width:34ch; margin-inline:auto;
  text-align:left; text-wrap:pretty;
}
.philosophy__col p:last-child{ margin-bottom:0; }
@media (max-width:760px){
  .philosophy__timeline{ grid-template-columns:1fr; text-align:left; gap:2.2rem; }
  /* Pista vertical tenue que conecta los puntos */
  .philosophy__timeline::before{
    display:block; top:8px; bottom:8px; left:4px; right:auto;
    width:2px; height:auto;
    background:rgba(251,248,244,.28);
  }
  /* Línea blanca que se "dibuja" al deslizar (altura vía JS: --phi-progress) */
  .philosophy__timeline::after{
    content:''; position:absolute; top:8px; left:4px;
    width:2px; height:var(--phi-progress,0px);
    background:var(--paper); border-radius:2px;
    box-shadow:0 0 8px rgba(251,248,244,.5);
  }
  .philosophy__col{ padding-left:1.6rem; padding-top:0; position:relative; }
  .philosophy__col::before{ left:0; top:6px; transform:none; z-index:1; }
}

/* ================= PORTFOLIO ================= */
.portfolio{ background:var(--cream); padding:clamp(3rem,7vw,6rem) clamp(1.25rem,4vw,3rem); }
.portfolio > .eyebrow, .portfolio > h2{ text-align:center; }
.portfolio > h2{ font-size:clamp(2.3rem,5vw,3.5rem); margin-bottom:clamp(1.4rem,3vw,2rem); }

/* --- Marquee de tópicos --- */
.marquee{
  overflow:hidden; margin:0 auto clamp(2.5rem,5vw,3.8rem); padding:.4rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee__track{
  display:inline-flex; align-items:center; white-space:nowrap; will-change:transform;
  animation:marquee 80s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem,2.2vw,1.55rem); color:var(--olive-deep); opacity:.8; padding:0 .3rem;
}
.marquee__track i{
  font-style:normal; color:var(--terracotta); font-size:.75em; opacity:.7; padding:0 1rem;
}
@keyframes marquee{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.portfolio__grid{
  display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:340px; gap:1.4rem;
  max-width:1300px; margin:0 auto;
}
.proj{
  position:relative; overflow:hidden; border-radius:var(--radius); background:var(--ink);
}
.proj--tall{ grid-row:span 2; }
.proj img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
/* Solo en dispositivos con hover real: en touch, un tap puede dejar el
   zoom "pegado" hasta tocar otra parte de la pantalla — se siente como
   otro mini-fallo de zoom, así que se limita a mouse/trackpad. */
@media (hover:hover) and (pointer:fine){ .proj:hover img{ transform:scale(1.06); } }
.proj::before{
  content:''; position:absolute; left:0; top:0; width:6px; height:100%; background:var(--tag,var(--terracotta));
  z-index:2;
}
.proj__info{
  position:absolute; left:0; right:0; bottom:0; z-index:2; color:var(--paper);
  padding:1.4rem 1.3rem 1.2rem 1.6rem;
  background:linear-gradient(0deg, rgba(20,18,12,.88) 0%, rgba(20,18,12,.55) 55%, rgba(20,18,12,0) 100%);
  transform:translateY(calc(100% - 2.4rem)); transition:transform .4s ease;
}
.proj:hover .proj__info, .proj:focus-within .proj__info{ transform:translateY(0); }
.proj__year{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--tan);
}
.proj__info h3{ font-size:1.05rem; margin:.25rem 0 .4rem; font-family:var(--display); font-weight:500; }
.proj__info p{ font-size:.85rem; opacity:.9; margin:0; }

@media (max-width:980px){
  .portfolio__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:300px; }
}
@media (max-width:640px){
  .portfolio__grid{ grid-template-columns:1fr; grid-auto-rows:320px; }
  .proj--tall{ grid-row:span 1; }
  .proj__info{ transform:translateY(0); background:linear-gradient(0deg, rgba(20,18,12,.85) 0%, rgba(20,18,12,.15) 70%, rgba(20,18,12,0) 100%); }
}

/* ================= QUOTE ================= */
.quote{
  background:var(--tan); color:var(--olive-deep);
  padding:clamp(3.5rem,8vw,6rem) 1.5rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
}
.quote__vine{ width:min(220px,40vw); height:32px; overflow:visible; }
.quote__vine path{
  fill:none; stroke:var(--olive-deep); stroke-width:1.4;
  stroke-dasharray:260; stroke-dashoffset:260; transition:stroke-dashoffset 1.6s ease;
}
.quote.is-visible .quote__vine path{ stroke-dashoffset:0; }
blockquote{
  font-family:var(--display); font-weight:400; font-size:clamp(1.4rem,3.4vw,2.3rem);
  max-width:18ch; margin:0; line-height:1.35;
}
blockquote strong{ font-weight:600; }
blockquote em{ font-style:italic; color:var(--terracotta-deep); }
.quote__sign{ font-family:var(--display); font-style:italic; font-size:1.1rem; margin:0; }

/* ================= CONTACT ================= */
/* Cierre más fino: en vez de un bloque de rosa saturado, un degradé suave
   desde el papel — deja respirar la foto y el texto, y sube el contraste. */
.contact{
  background:linear-gradient(160deg, var(--paper) 0%, var(--blush) 58%, var(--blush-deep) 100%);
  display:grid; grid-template-columns:.9fr 1.1fr;
}
/* En mobile esta foto va primera (order:-1) y cae justo donde el degradé del
   fondo arranca casi blanco. Sin fondo propio, mientras la imagen —lazy—
   todavía no cargó, se veía ese hueco claro arriba hasta que "acomodaba".
   Con --blush de base y un fade-in al cargar, el hueco queda en tono y la
   entrada es suave en vez de un pop. */
.contact__media{ min-height:360px; overflow:hidden; background:var(--blush); }
.contact__media img{
  width:100%; height:100%; object-fit:cover; object-position:62% 38%;
  opacity:0; transition:opacity .6s ease;
}
.contact__media img.is-loaded{ opacity:1; }
.contact__box{
  padding:clamp(2.8rem,6.5vw,6rem) clamp(1.5rem,6vw,4.5rem);
  display:flex; flex-direction:column; justify-content:center;
}
.contact__box h2{
  font-size:clamp(2.3rem,5vw,3.3rem); font-weight:400; letter-spacing:-.015em;
}
.contact__intro{
  max-width:40ch;
  font-size:clamp(1.06rem,1.9vw,1.22rem);
  line-height:1.6; color:var(--olive-deep);
}

.btn{
  display:inline-block; background:var(--olive); color:var(--paper); border:0; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:.92rem; letter-spacing:.03em;
  padding:.9rem 1.8rem; border-radius:999px; text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:var(--olive-deep); transform:translateY(-1px); }
}

.contact__direct{ display:flex; flex-direction:column; margin-top:2.4rem; max-width:520px; }
.contact__channel{
  display:flex; flex-direction:column; gap:.25rem; text-decoration:none;
  padding:1.2rem 0; border-top:1px solid rgba(43,40,32,.14);
  transform:translateX(0);
  transition:transform .25s ease;
}
.contact__channel:last-child{ border-bottom:1px solid rgba(43,40,32,.14); }
.contact__channel-label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.16em;
  font-weight:700; color:var(--olive-deep);
}
.contact__channel-value{
  font-family:var(--display); font-size:clamp(1.15rem,2.3vw,1.55rem); line-height:1.25;
  transition:color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .contact__channel:hover{ transform:translateX(.65rem); }
  .contact__channel:hover .contact__channel-value{ color:var(--olive-deep); }
}

@media (max-width:900px){
  .contact{ grid-template-columns:1fr; }
  .contact__media{ min-height:260px; order:-1; }
}

/* ================= FOOTER ================= */
.footer{
  background:var(--ink); color:var(--cream-deep); text-align:center;
  padding:3rem 1.5rem 2rem; font-size:.85rem;
}
.footer__logo{
  display:block; width:min(200px,52vw); height:auto; margin:0 auto 1.2rem;
  filter:brightness(0) invert(1);
}
.footer__credit{ opacity:.6; margin-top:1.2rem; margin-bottom:0; }

/* ============================================
   SECCIONES DE SERVICIO
   Estación de Flores · Estilismo · Cosmonía ·
   Universos Naturales
   ============================================ */

/* --- Botón de documento (PDF) — orgánico, en la voz de la marca --- */
.doc-btn{
  display:inline-flex; align-items:center; gap:.75rem; align-self:flex-start;
  margin-top:1.4rem; text-decoration:none; color:var(--olive-deep);
  padding:.5rem .3rem .5rem .5rem;
  transition:color .3s ease;
}
.doc-btn__ico{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:50%;
  background:rgba(201,125,59,.14); color:var(--terracotta-deep);
  transition:background .35s ease, color .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.doc-btn__ico svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.doc-btn__txt{
  position:relative; font-family:var(--display); font-style:italic;
  font-size:clamp(1.02rem,1.9vw,1.16rem); line-height:1.2; padding-bottom:.14em;
}
.doc-btn__txt::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.45;
  transform:scaleX(.34); transform-origin:left center;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .doc-btn:hover{ color:var(--terracotta-deep); }
  .doc-btn:hover .doc-btn__txt::after{ transform:scaleX(1); opacity:.75; }
  .doc-btn:hover .doc-btn__ico{
    background:var(--terracotta); color:var(--paper); transform:rotate(-6deg) scale(1.06);
  }
}
/* Variante sobre fondo oscuro (Cosmonía) */
.svc--dark .doc-btn{ color:var(--tan); }
.svc--dark .doc-btn__ico{ background:rgba(217,180,135,.18); color:var(--tan); }
@media (hover:hover) and (pointer:fine){
  .svc--dark .doc-btn:hover{ color:var(--paper); }
  .svc--dark .doc-btn:hover .doc-btn__ico{ background:var(--tan); color:var(--ink); }
}

/* ================= 3 · ESTACIÓN DE FLORES ================= */
.ef{ background:var(--cream); padding:clamp(3.5rem,8vw,6.5rem) clamp(1.25rem,4vw,3rem); }
.ef__inner{ max-width:1200px; margin:0 auto; }
.ef__head{ text-align:center; max-width:1060px; margin:0 auto clamp(2rem,4vw,3rem); }
/* text-wrap:normal para que mande el <br> y queden exactamente dos líneas */
.ef__head h2{ font-size:clamp(2rem,4vw,3.1rem); text-wrap:normal; }
.ef__sub{
  font-size:clamp(1.55rem,3.1vw,2.15rem); font-style:italic;
  margin:clamp(2.6rem,5vw,3.8rem) 0 1.5rem;
  padding-top:1.2rem; border-top:1px solid rgba(43,40,32,.16);
}
.ef__note{
  margin:1.4rem 0 0; font-size:.88rem; font-style:italic;
  color:var(--olive-deep); opacity:.85;
}
.ef__duo{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3.5rem); }
.ef__block{ display:flex; flex-direction:column; }
.ef__block .ef__sub{ margin-top:clamp(2.6rem,5vw,3.8rem); }
.ef__block p{ font-size:.95rem; max-width:40ch; }
/* Los dos botones de PDF quedan alineados a la misma altura */
.ef__block .doc-btn{ margin-top:auto; padding-top:1.4rem; }

/* --- Tarjetas informativas --- */
.info-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.5vw,1.6rem);
}
.info-card{
  background:var(--paper); border-radius:var(--radius);
  padding:1.6rem 1.4rem 1.7rem; display:flex; flex-direction:column;
}
.info-card__icon{ display:inline-flex; width:34px; height:34px; margin-bottom:.9rem; color:var(--terracotta-deep); }
.info-card__icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.info-card h4{
  font-family:var(--body); font-size:.76rem; text-transform:uppercase;
  letter-spacing:.14em; font-weight:700; color:var(--olive-deep); margin-bottom:.6rem;
}
.info-card p{ font-size:.92rem; margin:0 0 .6rem; opacity:.92; }
.info-card p:last-of-type{ margin-bottom:0; }
.info-card__price{
  display:flex; align-items:baseline; gap:.5rem; margin:.9rem 0 0;
  font-family:var(--display); font-weight:500; font-size:1.2rem; color:var(--ink);
}
.info-card__price span{
  font-family:var(--body); font-size:.62rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--terracotta-deep);
}
.info-card .doc-btn{ margin-top:auto; padding-top:.68rem; }

/* --- Catálogo de ramos --- */
.catalog__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.3rem,3vw,2.2rem);
}
.product{
  background:var(--paper); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 1px 0 rgba(43,40,32,.06);
}
.product__media{ aspect-ratio:4/5; overflow:hidden; position:relative; }
.product__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
@media (hover:hover) and (pointer:fine){ .product:hover .product__media img{ transform:scale(1.05); } }
.product__tag{
  position:absolute; left:0; bottom:0; z-index:2;
  background:var(--olive); color:var(--paper);
  font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
  padding:.4rem .8rem;
}
.product__body{ padding:1.5rem 1.4rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.product__body h4{ font-family:var(--display); font-weight:500; font-size:1.62rem; margin-bottom:.35rem; }
.product__quote{
  font-family:var(--display); font-style:italic; color:var(--terracotta-deep);
  font-size:1rem; line-height:1.4; margin-bottom:.7rem;
}
.product__desc{ font-size:.9rem; opacity:.85; margin-bottom:1.2rem; }
.product__prices{
  list-style:none; margin:auto 0 0; padding:1rem 0 0;
  border-top:1px solid rgba(43,40,32,.14);
}
.product__prices li{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.32rem 0; gap:1rem;
}
.product__size{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.13em;
  font-weight:700; color:var(--olive-deep);
}
.product__price{ font-family:var(--display); font-weight:600; font-size:1.08rem; }

/* --- Cómo encargar --- */
.order{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4.5vw,4rem);
  background:linear-gradient(160deg, var(--paper) 0%, rgba(233,204,211,.28) 100%);
  border-radius:20px;
  padding:clamp(2rem,4vw,3.4rem);
  margin-top:clamp(2.6rem,5vw,3.8rem);
}
.order__head{ display:flex; flex-direction:column; align-items:flex-start; }
.order__head h3{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:.7rem; }
.order__head h3 em{ font-style:italic; color:var(--terracotta-deep); }
.order__how{ font-size:1rem; margin-bottom:1.3rem; max-width:32ch; }
/* Alias — ficha propia: el dato que hay que copiar, no una línea al paso.
   Etiqueta arriba y el alias abajo, grande, sobre un papel con filete oliva. */
.order__alias{
  display:flex; flex-direction:column; gap:.4rem;
  margin:0 0 1.8rem; padding:.95rem 1.2rem;
  background:var(--paper);
  border:1px solid rgba(111,106,64,.22);
  border-left:3px solid var(--olive);
  border-radius:10px;
}
.order__alias-k{
  font-family:var(--body); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta-deep);
}
.order__alias-v{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.3rem,2.6vw,1.62rem);
  letter-spacing:.03em; color:var(--ink); line-height:1.15;
}
.order__head .btn{ margin-top:auto; }
.order__label{
  font-family:var(--body); font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta-deep);
  padding-bottom:.9rem; margin-bottom:1.1rem;
  border-bottom:1px solid rgba(43,40,32,.14);
}
.order__data ul{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; }
.order__data li{ position:relative; padding-left:1.5rem; font-size:.93rem; }
.order__data li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--tan);
}

/* --- Experiencias (talleres) — lista cálida, no píldoras frías --- */
.experiences{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:clamp(1.2rem,3vw,2.4rem);
}
.experiences li{
  break-inside:avoid; position:relative;
  padding:.5rem 0 .55rem 1.6rem;
  border-bottom:1px solid rgba(43,40,32,.12);
  font-family:var(--display); font-style:italic;
  font-size:clamp(.98rem,1.9vw,1.1rem); line-height:1.3;
  color:var(--olive-deep);
}
/* Punto redondo, igual que en el resto de las listas del sitio */
.experiences li::before{
  content:''; position:absolute; left:0; top:.85em;
  width:6px; height:6px; border-radius:50%; background:var(--tan);
  transition:background .3s ease, transform .3s ease;
}
@media (hover:hover) and (pointer:fine){ .experiences li:hover::before{ background:var(--terracotta); transform:scale(1.25); } }
@media (max-width:620px){ .experiences{ columns:1; } }

/* ================= 4 · 5 — SECCIONES CON IMAGEN ================= */
.svc{
  background:var(--blush);
  display:grid; grid-template-columns:.95fr 1.05fr; align-items:stretch;
}
.svc__media{ overflow:hidden; min-height:440px; }
.svc__media img{ width:100%; height:100%; object-fit:cover; }
.svc__copy{
  padding:clamp(2.5rem,6vw,5.5rem) clamp(1.5rem,6vw,4.5rem);
  display:flex; flex-direction:column; justify-content:center;
}
.svc__copy h2{ font-size:clamp(2.3rem,4.7vw,3.4rem); }
.svc__copy h2 em{ font-style:italic; color:var(--terracotta-deep); }
.svc__lede{ font-size:1.15rem; font-weight:500; line-height:1.5; margin-bottom:1.8rem; }
/* El párrafo y su lista se leen como un solo bloque */
.svc__block{ padding-left:1.1rem; border-left:1px solid rgba(43,40,32,.18); }
.svc__intro{ font-size:.97rem; margin-bottom:.9rem; }
.svc__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.svc__list li{ position:relative; padding-left:1.3rem; font-size:.95rem; }
.svc__list li::before{ content:'—'; position:absolute; left:0; color:var(--olive); }
.svc__cta-line{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(1.15rem,2.2vw,1.35rem);
  margin:2rem 0 0; color:var(--olive-deep);
}
.svc__copy .btn{ align-self:flex-start; margin-top:.9rem; }
.svc__copy .doc-btn{ margin-top:.7rem; }
.svc--rev .svc__media{ order:2; }

/* Escribime + PDF conviven en una fila; en pantallas chicas se apilan */
.svc__acciones{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.4rem clamp(1rem,2.5vw,1.8rem); margin-top:1.5rem;
}
.svc__acciones .btn{ margin-top:0; align-self:auto; }
.svc__acciones .doc-btn{ margin-top:0; align-self:auto; }

/* Bloque "Avancemos con tu idea" — datos para la propuesta */
.svc__brief{
  margin-top:1.8rem; padding:1.4rem 1.5rem 1.5rem;
  background:var(--paper); border-radius:14px;
  border:1px solid rgba(43,40,32,.10);
}
.svc__brief-label{
  font-family:var(--body); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta-deep);
  margin:0 0 1rem;
}
.svc__brief-list{
  list-style:none; margin:0 0 1rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
}
.svc__brief-list li{
  font-family:var(--body); font-size:.82rem; color:var(--olive-deep);
  padding:.4rem .85rem; border:1px dashed rgba(111,106,64,.42);
  border-radius:999px; background:rgba(233,204,211,.18);
}
.svc__brief-note{
  margin:0; font-family:var(--display); font-style:italic;
  font-size:1.05rem; color:var(--olive-deep);
}

/* Cosmonía — variante oscura */
.svc--dark{ background:var(--ink); color:var(--cream-deep); }
.svc--dark h2{ color:var(--paper); }
.svc--dark h2 em{ color:var(--tan); }
.svc--dark .svc__block{ border-left-color:rgba(251,248,244,.22); }
.svc--dark .svc__list li::before{ color:var(--tan); }
.svc--dark .svc__cta-line{ color:var(--tan); }
/* Título en ERIKO — la tipografía propia de Cosmonía */
.cosmonia__title{
  font-family:var(--eriko);
  font-size:clamp(2.7rem,5.8vw,4.2rem);
  line-height:1; letter-spacing:.06em;
  margin-bottom:.45em;
}
/* La M y la O se juntan: sin tracking + ligaduras de ERIKO activas.
   (letter-spacing distinto de 0 desactiva las ligaduras, por eso se aísla el par) */
.cosmonia__title .cosmonia__mo{
  letter-spacing:-.02em;
  font-feature-settings:"dlig" 1,"liga" 1,"calt" 1;
  font-variant-ligatures:common-ligatures discretionary-ligatures contextual;
}
/* Cosmonía — la imagen del techo se acerca para no mostrar personas */
.svc__media--zoom img{
  object-position:50% 4%;
  transform:scale(1.18);
  transform-origin:50% 4%;
}
.btn--light{ background:var(--paper); color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .btn--light:hover{ background:var(--cream); }
}

/* ================= 6 · UNIVERSOS NATURALES ================= */
.uni{
  background:var(--cream-deep); text-align:center;
  padding:clamp(3.5rem,8vw,6.5rem) clamp(1.25rem,4vw,3rem);
}
.uni__inner{ max-width:1080px; margin:0 auto; }
.uni__head h2{ font-size:clamp(2.2rem,4.7vw,3.4rem); margin-bottom:clamp(2rem,4vw,3rem); }
.uni__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.2rem); }
.uni__card{
  background:var(--paper); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; text-align:left;
  box-shadow:0 1px 0 rgba(43,40,32,.06);
}
.uni__media{ aspect-ratio:16/10; overflow:hidden; }
.uni__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
@media (hover:hover) and (pointer:fine){ .uni__card:hover .uni__media img{ transform:scale(1.04); } }
.uni__body{ padding:clamp(1.5rem,3vw,2rem); }
.uni__body h3{ font-size:clamp(1.55rem,3vw,2.1rem); margin-bottom:.5rem; }
/* "Dirección de arte" arriba y "Florista freelance" abajo, separadas por un
   filete en vez de una barra: se leen como dos oficios, no como una cadena. */
.uni__h3--dual span{
  display:block; margin-top:.28rem; padding-top:.28rem;
  font-style:italic; color:var(--olive-deep);
  font-size:.82em; line-height:1.15;
}
.uni__h3--dual span::before{
  content:''; display:block; width:34px; height:1px; margin-bottom:.42rem;
  background:var(--terracotta); opacity:.55;
}
.uni__body p{ font-size:.94rem; margin:0; opacity:.88; }
.uni__foot{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.35rem,3vw,1.95rem); line-height:1.3; color:var(--olive-deep);
  margin:clamp(2.2rem,4.5vw,3.2rem) auto 0; max-width:26ch;
}

/* ================= VALORACIONES ================= */
.reviews{
  background:var(--paper);
  padding:clamp(3.5rem,8vw,6rem) clamp(1.25rem,4vw,3rem);
}
.reviews__inner{ max-width:1120px; margin:0 auto; }
.reviews__head{ text-align:center; margin-bottom:clamp(2.2rem,4.5vw,3.2rem); }
.reviews__head h2{ font-size:clamp(2.1rem,4.4vw,3.1rem); }
.reviews__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.6vw,1.9rem);
}
.review{
  display:flex; flex-direction:column;
  background:var(--cream); border-radius:14px;
  border:1px solid rgba(43,40,32,.08);
  padding:clamp(1.5rem,2.6vw,2rem);
}
/* La comilla es decorativa: no debe leerse como texto */
.review__mark{
  font-family:var(--display); font-size:2.6rem; line-height:.7;
  color:var(--terracotta); opacity:.4; margin-bottom:.5rem;
}
.review__text{
  font-family:var(--display); font-size:clamp(1rem,1.9vw,1.1rem);
  line-height:1.5; color:var(--ink); margin:0 0 1.2rem; text-wrap:pretty;
}
.review__meta{
  margin-top:auto; padding-top:1rem;
  border-top:1px solid rgba(43,40,32,.12);
}
.review__name{
  display:block; font-family:var(--body); font-weight:700;
  font-size:.82rem; letter-spacing:.04em; color:var(--ink);
}
.review__ctx{
  display:block; font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--olive-deep); opacity:.85; margin-top:.2rem;
}
.reviews__foot{
  margin:clamp(2rem,4vw,2.8rem) auto 0; text-align:center;
  font-family:var(--display); font-style:italic; color:var(--olive-deep);
}
@media (max-width:900px){ .reviews__grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }

/* ================= RESPONSIVE DE SERVICIOS ================= */
@media (max-width:1000px){
  .info-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .svc{ grid-template-columns:1fr; }
  .svc__media{ min-height:320px; order:-1; }
  .svc--rev .svc__media{ order:-1; }
  .catalog__grid{ grid-template-columns:1fr; max-width:460px; margin:0 auto; }
  .product__media{ aspect-ratio:5/4; }
  .ef__duo{ grid-template-columns:1fr; gap:0; }
  .order{ grid-template-columns:1fr; gap:1.6rem; }
  .uni__grid{ grid-template-columns:1fr; max-width:460px; margin:0 auto; }
}
@media (max-width:680px){
  .info-grid{ grid-template-columns:1fr; }
}

/* ============================================
   INTRO CINEMÁTICA — solo home, una vez por sesión
   ============================================ */
html.is-intro{ overflow:hidden; }

.intro{
  position:fixed; inset:0; z-index:300; background:var(--ink); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.intro__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.14);
  transition:opacity 1.6s ease, transform 9s cubic-bezier(.22,1,.36,1);
}
.intro.is-on .intro__video{ opacity:1; transform:scale(1.03); }
.intro__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(43,40,32,0) 42%, rgba(43,40,32,.45) 100%),
    linear-gradient(180deg, rgba(43,40,32,.25) 0%, rgba(43,40,32,.05) 45%, rgba(43,40,32,.32) 100%);
}
.intro__content{
  position:relative; z-index:2; text-align:center; color:var(--paper); padding:0 1.5rem;
  transition:transform 1.05s cubic-bezier(.76,0,.24,1), opacity .6s ease;
}
/* La firma se "escribe" de izquierda a derecha */
.intro__logo{
  display:block; width:min(72vw,700px); height:auto; margin:0 auto;
  filter:brightness(0) invert(1) drop-shadow(0 2px 30px rgba(43,40,32,.35));
  clip-path:inset(0 100% -20% 0);
  opacity:0;
  transition:clip-path 1.9s cubic-bezier(.55,.06,.24,1) .45s, opacity .5s ease .45s;
}
.intro.is-on .intro__logo{ clip-path:inset(0 -2% -20% 0); opacity:1; }
.intro__sub{
  font-family:var(--display); font-style:italic; color:var(--cream);
  font-size:clamp(1.15rem,2.7vw,1.7rem); margin:1.5rem 0 0;
  opacity:0; transform:translateY(14px);
  transition:opacity .9s ease 2.1s, transform .9s cubic-bezier(.22,1,.36,1) 2.1s;
}
.intro.is-on .intro__sub{ opacity:.92; transform:none; }
.intro__progress{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3;
  background:rgba(251,248,244,.14);
}
.intro__progress i{ display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(0); background:var(--tan); transition:transform .5s ease; }
.intro__skip{
  position:absolute; right:clamp(1.25rem,4vw,3rem); bottom:1.5rem; z-index:3;
  background:none; border:0; border-bottom:1px solid rgba(251,248,244,.35); cursor:pointer;
  color:rgba(251,248,244,.7); font-family:var(--body); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; padding:.35rem 0;
  opacity:0; transition:opacity .6s ease 1.4s, color .2s ease, border-color .2s ease;
}
.intro.is-on .intro__skip{ opacity:1; }
@media (hover:hover) and (pointer:fine){
  .intro__skip:hover{ color:var(--paper); border-color:var(--paper); }
}

/* salida: fundido suave — la intro se disuelve sobre el hero */
.intro.is-done{
  opacity:0; filter:blur(10px); pointer-events:none;
  transition:opacity 1.7s ease, filter 1.7s ease;
}
.intro.is-done .intro__content{
  opacity:0; transform:translateY(-14px);
  transition:opacity 1s ease, transform 1.5s ease;
}

@media (prefers-reduced-motion: reduce){
  .intro{ display:none; }
}