/* ============================================
   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 ease, transform .8s ease; }
.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:1.1rem clamp(1.25rem,4vw,3rem);
  background:transparent;
  transition:background .35s ease, box-shadow .35s ease, padding .35s 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);
  padding-top:.75rem; padding-bottom:.75rem;
}
/* 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; }
.nav__logo img{
  height:clamp(23px,2.9vw,29px); width:auto;
  opacity:0; transform:translateY(8px) scale(1.08); transform-origin:left center;
  transition:opacity .35s ease, transform .35s ease;
}
.nav.is-scrolled .nav__logo img{ opacity:1; transform:translateY(0) scale(1); }
.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);
}
.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;
}
.nav__cta:hover{ background:var(--olive-deep); }
.nav__toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem;
}
.nav__toggle span{ width:22px; height:2px; background:var(--ink); display:block; }

@media (max-width:1080px){
  .nav__toggle{ display:flex; z-index:110; }
  .nav__links{
    position:fixed; inset:0 0 auto 0; top:0;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.6rem; padding:6rem 2rem 3rem; height:100vh; height:100dvh;
    background:var(--cream-deep);
    transform:translateY(-100%); transition:transform .4s ease;
    font-size:1.3rem;
  }
  .nav__links.is-open{ transform:translateY(0); }
  /* El CTA es una píldora con padding propio, así que su texto arrancaba
     corrido respecto del resto del menú: se compensa el padding para que
     todas las etiquetas queden sobre el mismo eje vertical. */
  .nav__cta{ margin-top:1.4rem; margin-left:-1.15rem; }
}

/* ================= 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;
}
.contact__media{ min-height:360px; overflow:hidden; }
.contact__media img{ width:100%; height:100%; object-fit:cover; object-position:62% 38%; }
.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;
}
.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);
  transition:padding-left .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;
}
.contact__channel:hover{ padding-left:.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;
}
.doc-btn:hover{ color:var(--terracotta-deep); }
.doc-btn:hover .doc-btn__txt::after{ transform:scaleX(1); opacity:.75; }
@media (hover:hover) and (pointer:fine){
  .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); }
.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); }
.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:0; background:var(--tan); transition:width .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; }
.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; }
}