/* =======================================================================
   ARRAIGO — Estilo fiel al DESIGN.md ("Augen Pro")
   Blanco clínico + tinta casi negra + UN azul señal (solo bordes/enlaces).
   Inter peso 350, tracking ajustado. Sin sombras. Líneas finas 0.5px.
   Bordes muy redondeados. Mucho aire (secciones 90–100px). Máx 1200px.
   ======================================================================= */
:root{
  /* Colores del DESIGN.md */
  --off-black:  #0f1012;   /* texto principal, bandas oscuras */
  --pure-black: #020201;   /* énfasis */
  --off-white:  #f2f2f4;   /* lienzo de página */
  --pure-white: #fdfdfd;   /* superficies elevadas (tarjetas, nav) */
  --steel:      #5e5e5e;   /* texto secundario */
  --ash:        #8f8f8f;   /* texto terciario / etiquetas */
  --blue:       #0071e3;   /* ÚNICO acento: enlaces, etiquetas, bordes. NUNCA relleno */

  --line:      rgba(0,0,0,.06);   /* borde estructural (hairline) */
  --line-1px:  rgba(0,0,0,.10);

  /* Tipografía */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tracking: -0.02em;

  /* Layout */
  --max: 1200px;
  --gap: 100px;

  /* Radios (firma del DESIGN.md) */
  --r-card: 54px;
  --r-img: 40px;
  --r-btn: 26px;
  --r-nav: 12px;
  --r-pill: 9999px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font);
  font-weight:350;
  letter-spacing:var(--tracking);
  color:var(--off-black);
  background:var(--off-white);
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }

/* Jerarquía por tamaño, no por grosor: todo peso 350 (400 solo en detalles) */
h1,h2,h3,h4{ font-weight:350; letter-spacing:var(--tracking); line-height:1.12; }
p{ line-height:1.35; }

.page{ max-width:var(--max); margin:0 auto; padding:0 40px; }

/* Etiqueta / preámbulo (par de títulos: label pequeño + título grande) */
.label{
  display:block;
  font-size:.75rem; font-weight:400;
  letter-spacing:.02em;
  color:var(--ash);
  margin-bottom:16px;
}
.label--light{ color:rgba(255,255,255,.65); }

/* Tag píldora con borde azul (nunca relleno) */
.tag{
  display:inline-block;
  font-size:.75rem;
  color:var(--blue);
  border:1px solid var(--blue);
  border-radius:var(--r-pill);
  padding:4px 14px;
}

/* Enlace azul (único elemento cromático interactivo) */
.link-accent{ color:var(--blue); font-size:.9rem; border-bottom:1px solid transparent; transition:border-color .2s; }
.link-accent:hover{ border-color:var(--blue); }

/* ===================== BOTONES ===================== */
.btn{
  display:inline-block;
  font-size:.85rem; font-weight:400;
  letter-spacing:var(--tracking);
  padding:13px 26px;
  border-radius:var(--r-btn);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
/* CTA flotante: lavado carbón casi transparente, con glifo azul */
.btn--solid{ background:rgba(12,13,15,.05); color:var(--pure-black); }
.btn--solid::before{ content:"↗ "; color:var(--blue); }
.btn--solid:hover{ background:rgba(12,13,15,.09); transform:translateY(-1px); }
/* Botón fantasma: solo línea fina */
.btn--ghost{ border:1px solid var(--line-1px); color:var(--off-black); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }

/* ===================== NAV FLOTANTE (PÍLDORA) ===================== */
.nav-wrap{
  position:sticky; top:0; z-index:60;
  padding:34px 40px 0;
  display:flex; justify-content:center;
  pointer-events:none;
}
.nav{
  pointer-events:auto;
  width:100%; max-width:var(--max);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(253,253,253,.8);
  backdrop-filter:blur(14px);
  border:1px solid var(--line);
  border-radius:var(--r-nav);
  padding:11px 22px;
}
.nav__brand{ font-size:.95rem; letter-spacing:.26em; color:var(--off-black); }
.nav__brand::before{ content:"✦ "; color:var(--blue); }
.nav__links{ display:flex; gap:28px; }
.nav__links a{ font-size:.9rem; color:var(--off-black); transition:color .2s; }
.nav__links a:hover{ color:var(--blue); }
.nav__toggle{ display:none; background:none; border:none; font-size:1.3rem; color:var(--off-black); cursor:pointer; }

/* ===================== HERO ===================== */
.hero{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:48px; align-items:center;
  padding:48px 0 var(--gap);
}
.hero__left{ display:flex; flex-direction:column; align-items:flex-start; }

.hero__mini{
  position:relative; overflow:hidden;
  width:168px; aspect-ratio:3/4;
  border-radius:var(--r-img); border:1px solid var(--line);
  margin-bottom:24px;
}
.hero__lead{ margin-bottom:38px; }
.hero__lead-title{ font-size:1.15rem; line-height:1.35; margin-bottom:6px; max-width:26ch; color:var(--off-black); }
.hero__lead-sub{ font-size:1rem; color:var(--steel); margin-bottom:16px; }
.hero__lead-link{ font-size:.9rem; color:var(--blue); border-bottom:1px solid var(--blue); padding-bottom:2px; }
.hero__lead-link::before{ content:"● "; font-size:.7em; vertical-align:middle; }

.hero__word{ display:block; font-size:clamp(3rem,9vw,6.2rem); line-height:.9; letter-spacing:.14em; font-weight:300; color:var(--off-black); }
.hero__word-sub{ margin-top:14px; font-size:clamp(.95rem,2.2vw,1.2rem); letter-spacing:.02em; color:var(--steel); }

.hero__media{
  position:relative; overflow:hidden;
  aspect-ratio:4/5;
  border-radius:var(--r-img); border:1px solid var(--line); background:var(--pure-white);
}

/* Marcos de imagen: superficies elevadas, línea fina, sin sombra */
.frame{ position:relative; border-radius:var(--r-img); overflow:hidden; border:1px solid var(--line); background:var(--pure-white); }
.swap{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease-in-out; }
.swap.is-active{ opacity:1; }

/* ===================== HERO NUEVO: "Se lleva puesto." + iconos de Ecuador ===================== */
.hero2{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  min-height:calc(100svh - 90px); padding:32px 0 var(--gap);
}
.hero2__copy, .hero2__visual{ position:relative; z-index:2; }

/* Capa de iconos de línea fina */
.h2-art{ position:absolute; inset:0; z-index:1; pointer-events:none; color:rgba(15,16,18,.28); }
.h2-art svg{ position:absolute; overflow:visible; }
.h2-art__chakana{ width:64px; left:0; top:14px; }
.h2-art__equator{ position:absolute; left:-40px; right:-40px; top:56%; border-top:1px dashed rgba(15,16,18,.16); }
.h2-art__equator span{ position:absolute; right:40px; top:8px; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash); }
/* Cordillera de borde a borde (3 capas) */
.h2-art__range{ left:calc(50% - 50vw); width:100vw; height:clamp(80px, 10vw, 190px); bottom:0; overflow:hidden !important; }
.h2-art__range.r3{ color:rgba(15,16,18,.08); }
.h2-art__range.r2{ color:rgba(15,16,18,.14); }
.h2-art__range.r1{ color:rgba(15,16,18,.2); }
.h2-art__range .lbl{ fill:var(--ash); stroke:none; font-size:9px; letter-spacing:.16em; font-family:'Inter',sans-serif; opacity:0; transition:opacity 1.2s ease 2.2s; }
.hero2.is-drawn .lbl{ opacity:1; }
.h2-art__range.r3 .draw{ transition-duration:3.2s; } .h2-art__range.r2 .draw{ transition-duration:2.8s; transition-delay:.3s; } .h2-art__range.r1 .draw{ transition-duration:2.4s; transition-delay:.6s; }

/* Sol andino */
.h2-art__sun{ width:190px; left:41%; top:7%; color:rgba(15,16,18,.2); opacity:0; transition:opacity 1.6s ease 1s; }
.hero2.is-drawn .h2-art__sun{ opacity:1; }
.sun-spin{ transform-origin:0 0; animation:spin 120s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Cóndores */
.hero2.is-drawn .h2-art__bird{ opacity:1; }

/* Los trazos se dibujan solos al cargar */
.h2-art .draw{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.6s cubic-bezier(.5,0,.2,1); }
.hero2.is-drawn .draw{ stroke-dashoffset:0; }
.h2-art .draw:nth-child(2){ transition-delay:.3s; } .h2-art .draw:nth-child(3){ transition-delay:.6s; }
.h2-art .draw:nth-child(n+4){ transition-delay:1.2s; }
.h2-art__equator{ transform-origin:left; transform:scaleX(0); transition:transform 2.2s cubic-bezier(.5,0,.2,1) .4s; }
.hero2.is-drawn .h2-art__equator{ transform:none; }

/* Texto */
.hero2__kicker{
  font-family:'Cormorant Garamond', Georgia, serif; font-weight:400;
  font-size:clamp(1.35rem, 2.4vw, 2rem); letter-spacing:0; color:var(--off-black); margin-bottom:6px;
}
.hero2__title{
  font-family:'Cormorant Garamond', Georgia, serif; font-weight:400;
  font-size:clamp(3.6rem, 8.6vw, 8rem); line-height:.9; letter-spacing:-.02em; color:var(--off-black);
  margin-bottom:44px;
}
.hero2__title .ln{ display:inline-block; }
.hero2__sub{ font-size:1.05rem; color:var(--steel); margin-bottom:34px; max-width:30ch; line-height:1.4; }
.hero2__cta{ font-size:.95rem; color:var(--off-black); border-bottom:1px solid var(--off-black); padding-bottom:3px; transition:color .2s, border-color .2s; }
.hero2__cta i{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--blue); margin-right:10px; vertical-align:middle; }
.hero2__cta:hover{ color:var(--blue); border-color:var(--blue); }
.hero2__meta{ margin-top:64px; font-size:.78rem; letter-spacing:.06em; color:var(--ash); }

/* Entrada escalonada del texto */
.hero2__kicker, .hero2__title .ln, .hero2__sub, .hero2__cta, .hero2__meta{
  opacity:0; transform:translateY(26px);
  transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.hero2.is-drawn .hero2__kicker{ opacity:1; transform:none; transition-delay:.2s; }
.hero2.is-drawn .hero2__title .ln:nth-child(1){ opacity:1; transform:none; transition-delay:.45s; }
.hero2.is-drawn .hero2__title .ln:nth-child(2){ opacity:1; transform:none; transition-delay:.65s; }
.hero2.is-drawn .hero2__sub{ opacity:1; transform:none; transition-delay:.95s; }
.hero2.is-drawn .hero2__cta{ opacity:1; transform:none; transition-delay:1.15s; }
.hero2.is-drawn .hero2__meta{ opacity:1; transform:none; transition-delay:1.35s; }

/* Fotos */
.hero2__visual{ justify-self:end; width:min(100%, 520px); }
.hero2__arch{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  border-radius:999px 999px var(--r-img) var(--r-img);   /* arco */
  border:1px solid var(--line); background:var(--pure-white);
}
.hero2__mini{
  position:absolute; left:-16%; bottom:-5%; width:34%; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--r-img); border:6px solid var(--off-white);
}
.hero2__arch, .hero2__mini{ opacity:0; transition:opacity 1.4s ease .5s; }
.hero2.is-drawn .hero2__arch, .hero2.is-drawn .hero2__mini{ opacity:1; }

@media (max-width:860px){
  .hero2{ grid-template-columns:1fr; gap:36px; min-height:0; padding:20px 0 70px; }
  .hero2__title{ font-size:clamp(3.4rem, 17vw, 5.4rem); }
  .hero2__meta{ margin-top:32px; }
  .hero2__visual{ justify-self:center; width:min(86%, 400px); }
  .hero2__mini{ left:-12%; }
  .h2-art__equator, .h2-art__sun, .h2-art__bird, .h2-art__range .lbl{ display:none; }
  .h2-art__chakana{ width:44px; left:auto; right:10px; top:150px; }
}
@media (prefers-reduced-motion:reduce){
  .h2-art .draw{ stroke-dashoffset:0; transition:none; }
  .h2-art__equator{ transform:none; transition:none; }
  .hero2__kicker, .hero2__title .ln, .hero2__sub, .hero2__cta, .hero2__meta, .hero2__arch, .hero2__mini{ opacity:1; transform:none; transition:none; }
}

/* ===================== FRANJA EN MOVIMIENTO (SOBRIA, MONOCROMA) ===================== */
.marquee{
  background:var(--off-white);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap; padding:14px 0;
}
.marquee__track{
  display:inline-flex; align-items:center; gap:34px;
  padding-left:100%;
  animation:marchar 18s linear infinite;
}
.marquee__track span{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); }
.marquee__track .dot{ color:var(--blue); font-size:.6rem; }
@keyframes marchar{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ===================== MISIÓN (TARJETA ELEVADA CLARA) ===================== */
.mission{
  background:var(--pure-white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:80px 69px;
  margin:var(--gap) 0;
}
.mission__inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.mission__imgs{ display:flex; gap:18px; }
.mission__imgs .frame{ flex:1; aspect-ratio:3/4; background:var(--off-white); }
.mission__imgs .frame:first-child{ margin-top:40px; }
.mission__imgs img{ width:100%; height:100%; object-fit:cover; }
.mission__text h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:18px; }
.mission__text p{ color:var(--steel); margin-bottom:28px; max-width:440px; }


/* ===================== ESTO ES ECUADOR COLLECTION (a todo el ancho) ===================== */
.collection{
  margin:var(--gap) 0;
  /* Rompe el ancho máximo de .page para ir de borde a borde */
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.ec{ position:relative; overflow:hidden; height:clamp(460px, 82vh, 820px); }
.ec__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
/* Frase y CTA directamente sobre la foto */
.ec::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,16,18,.55) 0%, rgba(15,16,18,.18) 38%, rgba(15,16,18,0) 62%); pointer-events:none; }
.ec__copy{ position:absolute; z-index:2; left:48px; bottom:48px; right:48px; color:#fff; }
.ec__title{
  max-width:min(44%, 540px); color:#fff; font-size:clamp(1.8rem, 3vw, 2.8rem); line-height:1.1; letter-spacing:-.03em;
  text-shadow:0 2px 22px rgba(0,0,0,.4); text-align:left; margin-bottom:22px;
}
/* mismo CTA del hero: punto azul + texto subrayado */
.ec__cta{ display:inline-block; font-size:.95rem; color:#fff; border-bottom:1px solid #fff; padding-bottom:3px; transition:color .2s, border-color .2s; }
.ec__cta i{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--blue); margin-right:10px; vertical-align:middle; }
.ec__cta:hover{ border-color:var(--blue); }

/* ===================== PRIMERA COLECCIÓN (títulos desde los costados) ===================== */
.pc{
  position:relative; height:220vh;               /* 1 pantalla fija + un tramo corto de scroll */
  width:100vw; margin-left:calc(50% - 50vw);
}
.pc__stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 55% 45% at 0% 100%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(ellipse 55% 45% at 100% 0%, rgba(0,0,0,.45), transparent 70%),
    radial-gradient(ellipse 70% 30% at 50% 115%, rgba(0,0,0,.35), transparent 70%),
    var(--off-white);
}
.pc__title{ display:flex; flex-direction:column; align-items:center; gap:.02em; width:100%; line-height:.95; }
.pc__word{
  display:block; white-space:nowrap;
  font-size:clamp(2.6rem, 11.5vw, 10rem); font-weight:350; letter-spacing:-.03em;
  color:var(--off-black); will-change:transform, opacity;
}
@media (prefers-reduced-motion:reduce){ .pc{ height:auto; } .pc__stage{ position:static; height:70vh; } }

/* ===================== PRODUCTOS ===================== */
.products{ margin:var(--gap) 0; }
.products__head{ text-align:center; margin-bottom:56px; }
.products__head h2{ font-size:clamp(1.8rem,3.2vw,2.4rem); }
.products__sub{ color:var(--steel); font-size:1.05rem; margin-top:6px; }

.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.card{
  background:var(--pure-white);
  border:1px solid var(--line);
  border-radius:var(--r-img);
  overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.card:hover{ transform:translateY(-5px); border-color:var(--blue); }
.card__img{ aspect-ratio:1/1; overflow:hidden; background:var(--off-white); }
.card__img img{ width:100%; height:100%; object-fit:cover; }
.card__body{ padding:24px; }
.card__body h3{ font-size:1.1rem; margin-bottom:8px; }
.card p{ font-size:.86rem; color:var(--steel); margin-bottom:16px; min-height:40px; }
.card__price{ font-size:.95rem; color:var(--blue); border:1px solid var(--blue); border-radius:var(--r-pill); padding:3px 12px; }

/* ===================== ARTESANOS ===================== */

/* ===================== CTA FINAL ===================== */
.cta{ margin:var(--gap) 0; }
.frame--cta{ aspect-ratio:21/9; display:flex; align-items:center; justify-content:center; text-align:center; border-radius:var(--r-card); }
.frame--cta > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.frame--cta::after{ content:""; position:absolute; inset:0; background:rgba(15,16,18,.5); }
.cta__text{ position:relative; z-index:2; color:#fff; padding:24px; }
.cta__text h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:8px; }
.cta__text p{ color:rgba(255,255,255,.8); margin-bottom:26px; }
.cta__text .btn--solid{ background:rgba(255,255,255,.12); color:#fff; }
.cta__text .btn--solid:hover{ background:rgba(255,255,255,.2); }

/* ===================== FOOTER (BANDA OSCURA) ===================== */
.footer{ background:var(--off-black); color:var(--off-white); padding:69px 40px; }
.footer__inner{ max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.4fr 2fr; gap:50px; }
.footer__logo{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.footer__logo img{ width:40px; height:40px; object-fit:contain; filter:brightness(0) invert(1); opacity:.85; }
.footer__logo span{ font-size:1.05rem; letter-spacing:.28em; }
.footer__logo span::before{ content:"✦ "; color:var(--blue); }
.footer__brand p{ font-size:.9rem; color:rgba(242,242,244,.55); max-width:300px; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.footer__col h4{ font-size:.9rem; margin-bottom:16px; font-weight:400; }
.footer__col ul{ list-style:none; }
.footer__col li{ margin-bottom:10px; }
.footer__col a{ font-size:.85rem; color:rgba(242,242,244,.55); transition:color .2s; }
.footer__col a:hover{ color:var(--blue); }

/* ===================== RESPONSIVE (CELULAR) ===================== */
@media (max-width:900px){
  .page{ padding:0 20px; }
  :root{ --gap:64px; --r-card:34px; }

  .nav-wrap{ padding:16px 20px 0; }
  .nav{ position:relative; flex-wrap:wrap; }
  .nav__toggle{ display:block; }
  .nav__links{ display:none; width:100%; flex-direction:column; gap:0; margin-top:10px; border-top:1px solid var(--line); padding-top:6px; }
  .nav__links.open{ display:flex; }
  .nav__links a{ padding:12px 4px; }

  .hero{ grid-template-columns:1fr; gap:40px; padding:30px 0 var(--gap); }
  .hero__media{ order:-1; }
  .frame--mini{ width:120px; left:16px; bottom:-22px; }

  .mission{ padding:44px 24px; }
  .mission__inner{ grid-template-columns:1fr; gap:34px; }

  .frame--collection{ aspect-ratio:4/5; }
  .collection__card{ width:180px; top:18px; left:18px; padding:16px; }

  .grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .card p{ min-height:auto; }

  .frame--cta{ aspect-ratio:4/5; }

  .footer__inner{ grid-template-columns:1fr; gap:34px; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
}

@media (max-width:480px){
  .grid{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr; }
}

/* ===================== COLECCIÓN: CAPÍTULOS CON HISTORIA ===================== */
.coleccion{ margin:var(--gap) 0; position:relative; }
.coleccion__head{ text-align:center; margin-bottom:56px; }
.coleccion__head h2{ font-size:clamp(1.8rem,3.2vw,2.4rem); }
.coleccion__sub{ color:var(--steel); font-size:1.05rem; margin-top:6px; }

/* Barra de progreso lateral */
.progress{
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px; z-index:40;
  opacity:0; transition:opacity .4s ease;
}
.progress.is-visible{ opacity:1; }
.progress-dot{
  width:9px; height:9px; border-radius:var(--r-pill);
  background:transparent; border:1px solid var(--line-1px);
  transition:background .3s, border-color .3s, transform .3s;
}
.progress-dot.is-active{ background:var(--blue); border-color:var(--blue); transform:scale(1.35); }

/* Cada capítulo */
.capitulo{
  display:grid; grid-template-columns:1fr; align-items:flex-start; gap:32px;
  min-height:auto; padding:60px 0;
}

.capitulo-header{ display:flex; align-items:baseline; gap:14px; margin-bottom:8px; }
.capitulo-name{ font-size:1.7rem; }
.capitulo-price{ font-size:.95rem; color:var(--blue); border:1px solid var(--blue); border-radius:var(--r-pill); padding:3px 12px; }
.capitulo-seal{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--blue); border:1px solid var(--blue); border-radius:var(--r-pill); padding:4px 12px; }

.capitulo-media{ display:flex; justify-content:flex-start; }
.capitulo-media .frame{ width:100%; max-width:500px; aspect-ratio:1/1; }
.capitulo-media img{ width:100%; height:100%; object-fit:cover; }

.capitulo-text{ max-width:46ch; }
.capitulo-index{ display:block; font-size:.9rem; color:var(--blue); letter-spacing:.05em; margin-bottom:14px; }
.capitulo-story{ font-size:1.05rem; line-height:1.6; color:var(--steel); margin:0 0 1rem; }
.capitulo-story:first-of-type{ color:var(--off-black); }
.capitulo-add{ margin-top:12px; }

/* Aparición al hacer scroll */
.capitulo-text > *{ opacity:0; transform:translateY(22px); }
.capitulo.is-in .capitulo-text > *{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }
.capitulo.is-in .capitulo-text > *:nth-child(2){ transition-delay:.08s; }
.capitulo.is-in .capitulo-text > *:nth-child(3){ transition-delay:.16s; }
.capitulo.is-in .capitulo-text > *:nth-child(4){ transition-delay:.24s; }
.capitulo.is-in .capitulo-text > *:nth-child(5){ transition-delay:.32s; }

/* Capítulo +593 (regalo): disco con halo azul */
.gift-disc{
  width:260px; height:260px; max-width:70vw; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--blue);
  background:radial-gradient(circle at center, rgba(0,113,227,.12), rgba(0,113,227,0) 70%);
}
.gift-code{ font-size:3rem; color:var(--blue); letter-spacing:.02em; }

@media (max-width:900px){
  .capitulo{ gap:24px; padding:48px 0; }
  .capitulo-media .frame{ max-width:100%; }
  .capitulo-text{ max-width:100%; }
  .progress{ right:12px; gap:10px; }
}

/* ===== Responsive hero (letrero) + Ecuador Collection ===== */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; gap:30px; padding:24px 0 var(--gap); }
  .hero__media{ order:-1; }              /* foto grande arriba en móvil */
  .hero__mini{ width:132px; }
  .hero__word{ font-size:clamp(2.8rem,15vw,4.6rem); }
  .ec{ height:auto; min-height:78vh; }
  .ec__copy{ left:22px; right:22px; bottom:30px; }
  .ec__title{ max-width:none; font-size:clamp(1.4rem, 6.2vw, 2rem); }
}

/* ===================== CUATRO RAÍCES (split 2 columnas, a todo el ancho) ===================== */
.raices{
  width:100vw; margin-left:calc(50% - 50vw);
  margin-top:var(--gap); margin-bottom:var(--gap);
  display:grid; grid-template-columns:1fr 1fr;
  min-height:80vh; background:var(--pure-white);
}
.raices__media{ position:relative; overflow:hidden; }
.raices__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.raices__text{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(32px,6vw,96px);
}
.raices__text .label{ margin-bottom:18px; }
.raices__text h2{ font-size:clamp(2rem,4vw,3.4rem); line-height:1.1; }
.raices__sub{ color:var(--steel); font-size:1.25rem; margin:10px 0 34px; }
.raices__cta{ align-self:flex-start; }

/* Cabecera de la página de charms */
.charms-hero{ text-align:center; padding:60px 0 8px; }
.charms-hero h1{ font-size:clamp(2rem,4vw,3rem); }
.charms-hero p{ color:var(--steel); font-size:1.1rem; margin-top:8px; }

/* ===================== SECCIÓN CHARMS GRID ===================== */
.charms-section{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:0; margin-bottom:0;
  background:var(--off-white);
  padding:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.charms-header{
  width:100%;
  max-width:var(--max);
  text-align:center;
  margin-bottom:32px;
  padding:0 40px;
}

.charms-header h2{
  font-size:clamp(1.8rem,3.2vw,2.4rem);
  margin-bottom:8px;
  font-weight:350;
}

.charms-header h3{
  font-size:1.05rem;
  color:var(--steel);
  font-weight:350;
}

.charms-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}

.charm-card{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:0;
  border:none;
  transition:transform 0.2s ease;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  text-decoration:none;
  color:inherit;
}

.charm-card:hover{
  transform:scale(1.02);
}

.charm-card__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

.charm-card__overlay{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  flex:1;
  padding:220px 24px 24px 24px;
  background:linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3) 50%, rgba(0,0,0,0));
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.charm-card__name{
  font-size:16px;
  font-weight:400;
  color:#fff;
  margin-top:auto;
  margin-bottom:8px;
  line-height:1.3;
  letter-spacing:var(--tracking);
}

.charm-card__phrase{
  font-size:14px;
  font-weight:350;
  color:rgba(255,255,255,0.85);
  line-height:1.4;
  margin-bottom:12px;
  letter-spacing:var(--tracking);
}

.charm-card__cta{ /* mismo CTA del hero: punto + texto subrayado */
  font-size:13px;
  color:#fff;
  display:block;
  letter-spacing:var(--tracking);
}

/* ===================== RESPONSIVE CHARMS ===================== */
@media (max-width:1024px){
  .charms-section{
    padding:30px;
  }

  .charms-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
  }

  .charm-card__overlay{
    padding:70px 20px 20px 20px;
    height:100%;
    flex:1;
  }

  .charm-card__name{
    font-size:15px;
  }

  .charm-card__phrase{
    font-size:14px;
  }

  .charm-card__cta{
    font-size:12px;
  }
}

@media (max-width:768px){
  .charms-section{
    padding:20px;
    margin-top:48px;
  }

  .charms-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }

  .charm-card__overlay{
    padding:220px 18px 26px 18px;
    height:100%;
    flex:1;
  }

  .charm-card__name{
    font-size:14px;
    margin-bottom:16px;
    line-height:1.6;
  }

  .charm-card__phrase{
    font-size:13px;
    margin-bottom:18px;
    line-height:1.8;
  }

  .charm-card__cta{
    font-size:11px;
    line-height:1.6;
  }
}

@media (max-width:480px){
  .charms-section{
    margin-top:48px;
  }

  .charms-grid{
    grid-template-columns:1fr;
  }

  .charm-card__overlay{
    padding:220px 18px 26px 18px;
    height:100%;
    flex:1;
  }
}

@media (max-width:900px){
  .raices{ grid-template-columns:1fr; min-height:0; }
  .raices__media{ height:56vh; order:-1; }
  .raices__text{ padding:40px 20px 8px; }
}

/* ===== Ajustes hero (v3): cabe en una pantalla y las montañas no se salen ===== */
.hero2{ clip-path:inset(-300px -100vw 0 -100vw); padding-bottom:40px; }
@media (min-width:861px){
  .hero2{ min-height:calc(100svh - 96px); }
  .hero2__visual{ width:min(100%, 520px, calc((100svh - 230px) * 0.8)); }
}

/* ===== Hero v4: cordillera más visible en celular ===== */
@media (max-width:860px){
  .hero2{ padding-bottom:130px; }
  .h2-art__range{ height:150px; }
  .h2-art__range.r3{ color:rgba(15,16,18,.16); }
  .h2-art__range.r2{ color:rgba(15,16,18,.28); }
  .h2-art__range.r1{ color:rgba(15,16,18,.4); }
}

/* ===================== BANDA VERDE (misión) ===================== */
.verde{
  position:relative; isolation:isolate; overflow:hidden; overflow:clip;
  width:100vw; margin-left:calc(50% - 50vw);
  padding:96px 40px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 35%, #146a52 0%, rgba(20,106,82,0) 70%),
    radial-gradient(ellipse 120% 90% at 50% 120%, #0a4636 0%, rgba(10,70,54,0) 60%),
    #0f5a45;
  color:rgba(244,236,214,.55);               /* color de las líneas decorativas */
}
.verde .mission{
  position:relative; z-index:2; margin:0 auto; max-width:1120px;
  color:var(--off-black);
}
.verde__art{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.verde__art svg{ position:absolute; overflow:visible; }

/* Se dibujan solas al llegar a la sección */
.verde__art .draw{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.6s cubic-bezier(.5,0,.2,1); }
.verde.is-drawn .draw{ stroke-dashoffset:0; }
.verde__art .draw:nth-child(n+3){ transition-delay:.3s; } .verde__art .draw:nth-child(n+6){ transition-delay:.7s; }

@media (max-width:860px){
  .verde{ padding:64px 14px; }
  .verde .mission{ padding:44px 22px; border-radius:34px; }
}
@media (prefers-reduced-motion:reduce){
  .verde__art .draw{ stroke-dashoffset:0; transition:none; }
}

/* ===== Banda verde v2: motivos andinos / ecuatorianos ===== */
.va-band{ left:0; width:100%; height:30px; clip-path:inset(0 100% 0 0); transition:clip-path 2.6s cubic-bezier(.5,0,.2,1) .2s; }
.va-band--top{ top:30px; }
.va-band--bottom{ bottom:30px; transform:scaleY(-1); }
.verde.is-drawn .va-band{ clip-path:inset(0 0 0 0); }

.va-toq{ width:clamp(170px, 24vw, 340px); height:clamp(170px, 24vw, 340px); opacity:0; transition:opacity 2.4s ease .8s; }
.va-toq--tl{ left:0; top:0; -webkit-mask-image:radial-gradient(circle at 0 0, #000 0%, transparent 72%); mask-image:radial-gradient(circle at 0 0, #000 0%, transparent 72%); }
.va-toq--br{ right:0; bottom:0; -webkit-mask-image:radial-gradient(circle at 100% 100%, #000 0%, transparent 72%); mask-image:radial-gradient(circle at 100% 100%, #000 0%, transparent 72%); }
.verde.is-drawn .va-toq{ opacity:.7; }

.va-chakana{ width:clamp(56px, 6vw, 130px); left:1.4%; top:260px; }
.va-sol{ width:clamp(60px, 6.4vw, 140px); right:1.2%; top:255px; animation:giro 180s linear infinite; }
@keyframes giro{ to{ transform:rotate(360deg); } }
.verde__art .draw:nth-child(n+3){ transition-delay:.5s; } .verde__art .draw:nth-child(n+5){ transition-delay:1s; }

@media (max-width:860px){
  .va-band{ height:22px; } .va-band--top{ top:22px; } .va-band--bottom{ bottom:22px; }
  .va-toq{ width:120px; height:120px; }
  .va-chakana, .va-sol{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .va-band{ clip-path:none; transition:none; } .va-toq{ opacity:.7; transition:none; } .va-sol{ animation:none; }
}

/* La banda verde llega pegada a la foto de la pulsera (sin hueco blanco) */
.verde + .collection{ margin-top:0; }

/* ===== Fichas de pasos (dentro de la banda verde): papel crema, doble filo y greca ===== */
.pasos{ position:relative; z-index:2; height:600vh; margin:44px auto 0; max-width:1120px; }
.pasos__sticky{
  position:sticky; top:calc(50vh - 190px); top:calc(50svh - 190px);
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.pasos__stage{ position:relative; width:100%; height:350px; }
.paso{
  position:absolute; inset:0; overflow:hidden;
  display:flex; align-items:center;
  background:#f6f1e4; border-radius:20px;
  padding:0 64px 14px; color:#16352b;
  will-change:transform, opacity, filter;
}
/* doble filo, como una etiqueta de taller */
.paso::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(15,90,69,.32); border-radius:12px; pointer-events:none; }
.paso__greca{ position:absolute; left:10px; bottom:14px; width:calc(100% - 20px); height:14px; color:rgba(15,90,69,.4); }

/* Portada */
.paso--titulo{ flex-direction:column; justify-content:center; align-items:flex-start; }
.paso__kicker{ font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:#0f5a45; margin-bottom:14px; }
.paso__big{
  font-weight:350; font-size:clamp(2.6rem, 6.6vw, 5.2rem); line-height:.98; letter-spacing:-.04em; color:#16352b;
}
.paso__chakana{ position:absolute; right:72px; top:50%; width:clamp(90px,12vw,150px); transform:translateY(-55%); color:rgba(15,90,69,.55); }
.paso__hint{ position:absolute; left:64px; bottom:36px; font-size:.78rem; letter-spacing:.08em; color:rgba(22,53,43,.6); display:flex; align-items:center; gap:10px; }
.paso__hint i{ display:inline-block; width:34px; height:1px; background:currentColor; transform-origin:left; animation:hint 2s ease-in-out infinite; }
@keyframes hint{ 0%{ transform:scaleX(.2); } 60%,100%{ transform:scaleX(1); } }

/* Pasos */
.paso__side{
  flex:0 0 220px; align-self:stretch; margin:30px 0 40px; padding-right:40px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  border-right:1px solid rgba(15,90,69,.28); position:relative;
}
.paso__label{ font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:#0f5a45; }
.paso__num{ font-weight:300; font-size:clamp(4.6rem, 8.4vw, 7rem); line-height:.85; letter-spacing:-.05em; color:#16352b; }
.paso__icon{ position:absolute; right:34px; bottom:2px; width:46px; color:#0f5a45; }
.paso__body{ padding-left:48px; flex:1; }
.paso__body h3{ font-weight:350; font-size:clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.08; margin-bottom:12px; color:#16352b; letter-spacing:-.03em; }
.paso__body ul{ list-style:none; max-width:520px; }
.paso__body li{ position:relative; padding:6px 0 6px 22px; font-size:.98rem; line-height:1.3; color:#3d5248; border-bottom:1px solid rgba(15,90,69,.16); }
.paso__body li:last-child{ border-bottom:0; }
.paso__body li::before{ content:""; position:absolute; left:2px; top:50%; width:6px; height:6px; margin-top:-3px; background:#0f5a45; transform:rotate(45deg); }
.paso__btn{
  display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:11px 22px; border-radius:4px;
  border:1px solid #0f5a45; color:#0f5a45; font-size:.88rem; letter-spacing:.02em; font-family:inherit; font-weight:350; background:transparent; cursor:default;
  transition:background .25s, color .25s;
}
.paso__btn:hover{ background:#0f5a45; color:#f6f1e4; }
.paso__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.paso__btns .paso__btn{ margin-top:0; }
.paso__btn--solid{ background:#0f5a45; color:#f6f1e4; }
.paso__btn--solid:hover{ background:#0b4636; border-color:#0b4636; }

.pasos__dots{ display:flex; gap:10px; }
.pasos__dots span{ width:7px; height:7px; border-radius:50%; background:rgba(244,236,214,.35); transition:background .3s, transform .3s; }
.pasos__dots span.on{ background:#f4ecd6; transform:scale(1.35); }

@media (max-width:860px){
  .pasos{ height:560vh; margin-top:28px; }
  .pasos__sticky{ top:calc(50svh - 190px); }
  .pasos__stage{ height:430px; }
  .paso{ padding:0 28px 14px; flex-direction:column; justify-content:center; align-items:flex-start; }
  .paso__side{ flex:0 0 auto; align-self:flex-start; margin:0 0 8px; padding:0; border-right:0; flex-direction:row; align-items:center; gap:10px; }
  .paso__num{ font-size:2.6rem; line-height:1; letter-spacing:-.03em; } .paso__icon{ display:none; }
  .paso__body{ padding-left:0; flex:0 0 auto; }
  .paso__body li{ font-size:.92rem; padding:6px 0 6px 20px; }
  .paso__kicker{ font-size:.66rem; letter-spacing:.2em; } .paso__chakana{ right:30px; top:34px; width:54px; transform:none; }
  .paso__hint{ left:28px; bottom:34px; }
  .paso__btn{ padding:10px 16px; font-size:.8rem; }
}
@media (prefers-reduced-motion:reduce){
  .pasos{ height:auto; } .pasos__sticky{ position:static; } .pasos__stage{ height:auto; display:flex; flex-direction:column; gap:16px; }
  .paso{ position:relative; min-height:260px; padding:40px 28px 36px; } .pasos__dots{ display:none; }
}

/* Texto previo a los botones del paso 1 */
.paso__lead{ margin-top:12px; font-size:.82rem; letter-spacing:.02em; color:#0f5a45; }
.paso__lead + .paso__btns{ margin-top:8px; }

/* La foto de la pulsera llega pegada a "PRIMERA COLECCIÓN" (sin hueco) */
.collection{ margin-bottom:0; }

/* ===== Banda verde: todo en cuadros de esquinas rectas ===== */
.verde .mission, .verde .mission__imgs .frame{ border-radius:0; }
.verde .mission .btn{ border-radius:0; }
.paso, .paso::before{ border-radius:0; }
@media (max-width:860px){
  .verde .mission{ border-radius:0; }
  .paso{ border-radius:0; }
}

/* ===== Charms (5ª sección): entrada escalonada + efecto al pasar el mouse ===== */
.charm-card{ transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.charm-card:hover{ transform:none; }
.charms-grid .charm-card{ opacity:0; transform:translateY(46px); }
.charms-grid.is-in .charm-card{ opacity:1; transform:none; }
.charm-card__bg{ transition:transform 1.2s cubic-bezier(.2,.7,.3,1); }
.charm-card:hover .charm-card__bg, .charm-card:focus-visible .charm-card__bg{ transform:scale(1.09); }
.charm-card__overlay{ transition:background .6s ease; }
.charm-card:hover .charm-card__overlay{ background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.42) 55%, rgba(0,0,0,.05)); }
@media (prefers-reduced-motion:reduce){
  .charms-grid .charm-card{ opacity:1; transform:none; transition:none; }
}

/* ===== Charms: texto y CTA siempre visibles; CTA como el del hero; trazos de línea ===== */
.charm-card__phrase, .charm-card__cta{ max-height:none; opacity:1; transform:none; }
.charm-card__cta{
  display:inline-block; align-self:flex-start; width:auto;
  border-bottom:1px solid #fff; padding-bottom:3px; font-size:13px; line-height:1.3;
}
.charm-card__cta::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--blue); margin-right:9px; vertical-align:middle; }
.charm-card__name{ margin-bottom:6px; }

/* ===== Artesanos: foto a la izquierda (alto completo de pantalla), texto a la derecha ===== */
.artisans{
  width:100vw; margin:0 0 0 calc(50% - 50vw);
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100vh; min-height:100svh;
  background:var(--pure-white);
}
.artisans__photo{ position:relative; overflow:hidden; min-height:100svh; }
.artisans__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:32% center; filter:grayscale(100%); }
.artisans__panel{ display:flex; align-items:center; justify-content:center; padding:48px clamp(28px, 6vw, 96px); }
.artisans__text{ max-width:440px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.artisans__text .label{ margin-bottom:18px; }
.artisans__text h2{ font-size:clamp(1.7rem, 2.8vw, 2.6rem); line-height:1.12; letter-spacing:-.03em; margin-bottom:18px; color:var(--off-black); }
.artisans__text p{ color:var(--steel); font-size:1.02rem; line-height:1.4; max-width:34ch; margin-bottom:34px; }
.artisans__cta{ display:inline-block; font-size:.95rem; color:var(--off-black); border-bottom:1px solid var(--off-black); padding-bottom:3px; transition:color .2s, border-color .2s; }
.artisans__cta i{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--blue); margin-right:10px; vertical-align:middle; }
.artisans__cta:hover{ color:var(--blue); border-color:var(--blue); }
/* el texto aparece suavemente al llegar */
.artisans__text > *{ opacity:0; transform:translateY(22px); transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.3,1); }
.artisans.is-in .artisans__text > *{ opacity:1; transform:none; }
.artisans.is-in .artisans__text > :nth-child(2){ transition-delay:.15s; }
.artisans.is-in .artisans__text > :nth-child(3){ transition-delay:.3s; }
.artisans.is-in .artisans__text > :nth-child(4){ transition-delay:.45s; }
@media (max-width:860px){
  .artisans{ grid-template-columns:1fr; min-height:0; }
  .artisans__photo{ min-height:100svh; }
  .artisans__panel{ padding:64px 28px 72px; }
}
@media (prefers-reduced-motion:reduce){ .artisans__text > *{ opacity:1; transform:none; transition:none; } }

/* ===== ¿Por qué alguien se pone esto? (sección oscura) ===== */
.porque{
  position:relative; isolation:isolate; overflow:hidden; overflow:clip;
  width:100vw; margin:0 0 0 calc(50% - 50vw);
  min-height:min(100svh, 900px); padding:150px 28px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(38,64,54,.55), transparent 70%),
    radial-gradient(ellipse 100% 60% at 50% 110%, rgba(120,84,40,.18), transparent 70%),
    #0c0d0f;
  color:#f2f2f4;
}
.porque__art{ position:absolute; inset:0; z-index:0; pointer-events:none; color:rgba(244,236,214,.24); }
.porque__art svg{ position:absolute; overflow:visible; }
.pq-band{ left:0; width:100%; height:30px; clip-path:inset(0 100% 0 0); transition:clip-path 2.6s cubic-bezier(.5,0,.2,1) .2s; }
.pq-band--top{ top:34px; } .pq-band--bottom{ bottom:34px; transform:scaleY(-1); }
.porque.is-in .pq-band{ clip-path:inset(0 0 0 0); }
.pq-rombo{ width:clamp(260px, 40vw, 600px); height:clamp(260px, 40vw, 600px); top:50%; margin-top:calc(clamp(260px, 40vw, 600px) / -2); }
.pq-rombo--l{ left:calc(clamp(260px, 40vw, 600px) / -2.4); }
.pq-rombo--r{ right:calc(clamp(260px, 40vw, 600px) / -2.4); }
.porque .draw{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 3s cubic-bezier(.5,0,.2,1); }
.porque .draw:nth-child(2){ transition-delay:.25s; } .porque .draw:nth-child(3){ transition-delay:.5s; } .porque .draw:nth-child(4){ transition-delay:.75s; }
.porque.is-in .draw{ stroke-dashoffset:0; }

.porque__inner{ position:relative; z-index:2; max-width:980px; }
.porque__h2{ font-size:clamp(2.3rem, 7.2vw, 6.4rem); font-weight:350; letter-spacing:-.045em; line-height:.98; margin-bottom:28px; }
.porque__h2 .ln{ display:block; overflow:hidden; padding-bottom:.08em; }
.porque__h2 .ln > span{ display:block; transform:translateY(112%); transition:transform 1.3s cubic-bezier(.2,.7,.2,1); }
.porque.is-in .porque__h2 .ln > span{ transform:none; }
.porque.is-in .porque__h2 .ln:nth-child(2) > span{ transition-delay:.18s; }
.porque__h3{ font-size:clamp(1rem, 1.8vw, 1.4rem); font-weight:350; color:#a6a6a9; margin-bottom:40px; opacity:0; transform:translateY(16px); transition:opacity 1s ease .7s, transform 1s ease .7s; }
.porque__cta{ display:inline-block; font-size:.98rem; color:#f2f2f4; border-bottom:1px solid #f2f2f4; padding-bottom:3px; opacity:0; transform:translateY(16px); transition:opacity 1s ease 1s, transform 1s ease 1s, border-color .2s, color .2s; }
.porque__cta i{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--blue); margin-right:10px; vertical-align:middle; }
.porque__cta:hover{ border-color:var(--blue); color:#fff; }
.porque.is-in .porque__h3, .porque.is-in .porque__cta{ opacity:1; transform:none; }

@media (max-width:860px){
  .porque{ padding:120px 20px; min-height:min(92svh, 760px); }
  .pq-band{ height:22px; } .pq-band--top{ top:24px; } .pq-band--bottom{ bottom:24px; }
  .pq-rombo{ width:300px; height:300px; margin-top:-150px; } .pq-rombo--l{ left:-150px; } .pq-rombo--r{ right:-150px; }
}
@media (prefers-reduced-motion:reduce){
  .pq-band{ clip-path:none; transition:none; } .porque .draw{ stroke-dashoffset:0; transition:none; }
  .porque__h2 .ln > span{ transform:none; transition:none; } .porque__h3, .porque__cta{ opacity:1; transform:none; transition:none; }
}

/* ===== CTA final: de borde a borde, como la sección de la pulsera ===== */
.cta{ width:100vw; margin:0 0 0 calc(50% - 50vw); }
.frame--cta{ aspect-ratio:auto; height:clamp(460px, 82vh, 820px); border-radius:0; border:0; }
@media (max-width:860px){ .frame--cta{ height:auto; min-height:78vh; aspect-ratio:auto; } }

/* Foto nueva del hero (header 1): encuadre para que se vean la mano y el charm +593 */
.hero2__arch img[src*="header%201"]{ object-position:30% center; }
.hero2__arch img[src*="header%202"]{ object-position:62% center; }

/* Misión: una sola foto, centrada, con marco fino desplazado */
.verde .mission__inner{ align-items:center; }
.verde .mission__imgs{ display:flex; align-items:center; justify-content:center; }
.verde .mission__imgs .frame{
  flex:0 1 380px; width:100%; max-width:380px; aspect-ratio:3/4; margin:0;
  border:0; background:#e9e3d6;
  outline:1px solid rgba(15,90,69,.45); outline-offset:14px;
}
.verde .mission__imgs .frame:first-child{ margin-top:0; }
.verde .mission__imgs img{ object-position:center 25%; }
@media (max-width:860px){
  .verde .mission__imgs .frame{ flex-basis:300px; max-width:300px; outline-offset:10px; }
}

/* ===== Hero v5 (2026-10-25): nuevo bloque de texto con oferta ===== */
.hero2__pill{
  display:inline-block; margin-bottom:18px; padding:6px 14px; border-radius:9999px;
  border:1px solid #0f5a45; color:#0f5a45; background:transparent;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; line-height:1.3;
}
.hero2__kicker{ font-size:clamp(1.2rem, 2vw, 1.7rem); margin-bottom:14px; }
.hero2__title{ font-size:clamp(2.3rem, 4.4vw, 4.2rem); line-height:1.02; margin-bottom:22px; max-width:15em; text-wrap:balance; }
.hero2__title .ln{ display:inline; }
.hero2__sub{ font-size:1.1rem; line-height:1.5; color:#3d3d40; max-width:34em; margin-bottom:30px; }
.hero2__sub strong{ font-weight:600; color:var(--off-black); }
.hero2__actions{ display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap; margin-bottom:34px; }
.hero2__btn{
  display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 36px;
  background:var(--off-black); color:var(--pure-white); border-radius:26px; font-size:1rem; transition:background .2s;
}
.hero2__btn:hover{ background:var(--pure-black); }
.hero2__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.hero2__tags span{ padding:6px 13px; border:1px solid rgba(0,0,0,.16); border-radius:9999px; font-size:.78rem; color:var(--steel); line-height:1.3; }

/* Entrada escalonada de los elementos nuevos (igual que el resto del hero) */
.hero2__pill, .hero2__actions, .hero2__tags{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.3,1); }
.hero2.is-drawn .hero2__pill{ opacity:1; transform:none; transition-delay:.1s; }
.hero2.is-drawn .hero2__actions{ opacity:1; transform:none; transition-delay:1.15s; }
.hero2.is-drawn .hero2__tags{ opacity:1; transform:none; transition-delay:1.35s; }
@media (prefers-reduced-motion:reduce){ .hero2__pill, .hero2__actions, .hero2__tags{ opacity:1; transform:none; transition:none; } }
#tienda{ scroll-margin-top:80px; }

@media (max-width:860px){
  .hero2__title{ font-size:clamp(2rem, 9vw, 2.9rem); max-width:none; }
  .hero2__sub{ font-size:1.05rem; } .h2-art__chakana{ top:26px; }
}
@media (max-width:560px){
  .hero2__actions{ flex-direction:column; align-items:stretch; gap:18px; }
  .hero2__btn{ width:100%; }
  .hero2__cta{ align-self:center; }
}

/* ===== Hero v6 (2026-10-25): más aire, precio con su propio espacio. Mobile primero ===== */
.hero2__pill{ font-family:'Inter', var(--font); font-weight:500; font-size:11px; letter-spacing:.18em; padding:6px 14px; margin-bottom:20px; }
.hero2__title{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:500; color:#111; font-size:38px; line-height:1.08; letter-spacing:-.01em; margin-bottom:16px; max-width:none; text-wrap:balance; }
.hero2__sub{ font-family:'Inter', var(--font); font-weight:300; font-size:16px; line-height:1.5; color:#555; max-width:none; margin:0 0 32px; }
.hero2__price{ position:relative; padding-top:20px; margin-bottom:32px; }
.hero2__price::before{ content:""; position:absolute; left:0; top:0; width:48px; height:1px; background:#E2E2E2; }
.hero2__price-from{ display:block; font-family:'Inter', var(--font); font-weight:500; font-size:11px; line-height:1; letter-spacing:.2em; text-transform:uppercase; color:#888; margin-bottom:8px; }
.hero2__price-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; }
.hero2__price-num{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:400; font-size:44px; line-height:1; letter-spacing:-.01em; color:#111; }
.hero2__price-note{ font-family:'Inter', var(--font); font-weight:400; font-size:13px; line-height:1.4; color:#777; }
.hero2__actions{ margin-bottom:0; gap:16px 28px; }
.hero2__btn{ height:54px; font-family:'Inter', var(--font); font-weight:500; font-size:15px; border-radius:9999px; background:#111; }
.hero2__cta{ font-family:'Inter', var(--font); font-weight:400; font-size:15px; border-bottom:1px solid currentColor; padding-bottom:2px; }
.hero2__price{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.3,1); }
.hero2.is-drawn .hero2__price{ opacity:1; transform:none; transition-delay:1s; }
@media (prefers-reduced-motion:reduce){ .hero2__price{ opacity:1; transform:none; transition:none; } }

/* Celular / tablet angosta */
@media (max-width:860px){
  .hero2{ padding-left:4px; padding-right:4px; }
  .hero2__title{ font-size:38px; max-width:none; }
  .hero2__sub{ font-size:16px; }
  .hero2__actions{ flex-direction:column; align-items:stretch; gap:16px; }
  .hero2__btn{ width:100%; }
  .hero2__cta{ align-self:center; }
  .hero2__mini, .h2-art__chakana, .h2-art__sun{ display:none; }
  .hero2__visual{ width:100%; justify-self:stretch; }
  .hero2__arch{ width:100%; max-height:420px; }
}

/* Escritorio */
@media (min-width:861px){
  .hero2{ grid-template-columns:45% 1fr; }
  .hero2__pill{ font-size:12px; margin-bottom:25px; }
  .hero2__title{ font-size:60px; line-height:1.05; max-width:560px; margin-bottom:20px; }
  .hero2__sub{ font-size:18px; margin-bottom:40px; }
  .hero2__price{ padding-top:25px; margin-bottom:40px; }
  .hero2__price-from{ margin-bottom:10px; }
  .hero2__price-num{ font-size:52px; }
  .hero2__actions{ flex-direction:row; align-items:center; gap:16px 32px; }
  .hero2__btn{ width:auto; padding:0 36px; }
}

/* ===== Hero v7: más natural, menos "plantilla" (sin píldoras ni etiquetas en mayúsculas) ===== */
.hero2__pill{
  display:block; border:0; padding:0; border-radius:0; background:none;
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:400;
  font-size:20px; letter-spacing:0; text-transform:none; line-height:1.2; color:#0f5a45;
  margin-bottom:18px;
}
.hero2__title em{ font-style:italic; font-weight:400; }
.hero2__sub{ font-weight:300; letter-spacing:.01em; }
.hero2__price{ padding-top:0; }
.hero2__price::before{ display:none; }
.hero2__price-row{ display:flex; align-items:baseline; gap:12px; }
.hero2__price-from{
  display:inline; margin:0; font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:400;
  font-size:22px; line-height:1; letter-spacing:0; text-transform:none; color:#777;
}
.hero2__price-note{ display:block; margin-top:10px; font-weight:300; font-size:14px; color:#777; letter-spacing:.01em; }
.hero2__btn{ font-weight:400; letter-spacing:.03em; }
@media (min-width:861px){
  .hero2__pill{ font-size:23px; margin-bottom:22px; }
  .hero2__price-from{ font-size:26px; }
  .hero2__price-note{ margin-top:12px; font-size:15px; }
}

/* ===== Hero v8: precio solo, cifras alineadas y espacios ajustados ===== */
.hero2__price-num{ font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.hero2__price-note{ margin-top:8px; }
.hero2__sub{ margin-bottom:32px; }
.hero2__price{ margin-bottom:28px; }
@media (min-width:861px){
  .hero2__sub{ margin-bottom:40px; }
  .hero2__price{ margin-bottom:32px; }
  .hero2__price-note{ margin-top:8px; }
}

/* ===== Foto final (CTA): encuadre para que se vea la pulsera con el charm +593 ===== */
.frame--cta > img{ object-position:50% 34%; }

/* ===== Cómo pedir (2026-10-26): título fijo + 3 fichas ===== */
.verde .pasos{ margin-top:0; height:auto; }               /* en escritorio el alto lo calcula el script */
.pasos__sticky{ top:max(100px, calc((100svh - 580px) / 2)); gap:22px; }
.pasos__head{ text-align:center; max-width:760px; margin:0 auto; }
.pasos__eyebrow{ font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(244,236,214,.82); margin-bottom:10px; }
.pasos__title{ font-weight:350; font-size:clamp(1.7rem, 3.2vw, 2.7rem); line-height:1.1; letter-spacing:-.03em; color:#f6f1e4; margin-bottom:10px; }
.pasos__sub{ font-size:1rem; line-height:1.4; color:rgba(244,236,214,.8); }
.paso__text{ font-size:1.02rem; line-height:1.5; color:#3d5248; max-width:540px; }
.paso__pays{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.paso__pays span{ padding:6px 14px; border:1px solid rgba(15,90,69,.4); border-radius:9999px; font-size:.8rem; line-height:1.35; color:#16352b; }
.paso__cta{ display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 34px; margin-top:16px; background:#0f5a45; color:#f6f1e4; border-radius:26px; font-size:1rem; transition:background .2s; }
.paso__cta:hover{ background:#0b4636; }

@media (max-width:860px){
  .pasos__sticky{ top:max(96px, calc((100svh - 660px) / 2)); }
}
/* Celular: sin efecto de scroll; título y 3 fichas una debajo de otra */
@media (max-width:768px){
  .verde{ padding:56px 20px 64px; }
  .verde .pasos{ height:auto !important; margin-top:0; }
  .pasos__sticky{ position:static; gap:24px; }
  .pasos__stage{ height:auto; width:100%; display:flex; flex-direction:column; gap:16px; }
  .paso{ position:relative !important; inset:auto; transform:none !important; opacity:1 !important; filter:none !important; z-index:auto !important; pointer-events:auto !important; min-height:0; padding:30px 22px 46px; }
  .pasos__dots{ display:none; }
  .paso__cta{ width:100%; }
  .paso__text{ font-size:1rem; }
}

/* ===== Sección final: el texto baja para no tapar la pulsera ni el charm +593 ===== */
.frame--cta{ align-items:flex-end; }
.cta__text{ padding:24px 24px clamp(44px, 10vh, 100px); }

/* ===== Foto final con dos versiones: celular (vertical) y escritorio (horizontal) ===== */
.frame--cta picture{ display:contents; }
.frame--cta picture img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 34%; }
@media (min-width:861px){ .frame--cta picture img{ object-position:50% 12%; } }

/* ===== Cómo pedir · CELULAR (2026-10-26): editorial sobre crema, se revela al bajar ===== */


@media all{
  /* la versión de escritorio (fichas) no se usa en celular */
  .verde .pasos{ display:none !important; }
  .verde{ padding:72px 24px; }

  .pm{ display:block; position:relative; z-index:2; color:#fff; }

  .pm__eyebrow{ font-family:'Inter', var(--font); font-weight:500; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:14px; }
  .pm__title{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:500; font-size:34px; line-height:1.1; letter-spacing:0; color:#fff; margin-bottom:14px; }
  .pm__sub{ font-family:'Inter', var(--font); font-weight:300; font-size:15px; line-height:1.5; color:rgba(255,255,255,.78); }

  .pm__step{ margin-top:64px; }
  .pm__head + .pm__step{ margin-top:56px; }
  .pm__big{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:500; font-size:52px; line-height:1; letter-spacing:-.01em; color:#fff; margin-bottom:10px; }
  .pm__text{ font-family:'Inter', var(--font); font-weight:300; font-size:15px; line-height:1.6; color:rgba(255,255,255,.78); }
  .pm__text + *{ margin-top:20px; }
  .pm__block + *{ margin-top:20px; }

  /* Elige: 4 miniaturas cuadradas */
  .pm__thumbs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
  .pm__thumbs img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; }

  /* Confirma: simulación de chat de WhatsApp */
  .pm__chat{ position:relative; display:flex; flex-direction:column; gap:10px; background:#EFE7D6; border-radius:16px; padding:16px; }
  .pm__msg{ max-width:80%; padding:8px 10px 6px; font-family:'Inter', var(--font); font-weight:400; font-size:14px; line-height:1.4; color:#1c1c1c; border-radius:12px; }
  .pm__msg p{ margin:0; }
  .pm__msg--me{ align-self:flex-end; background:#DCF2D0; border-bottom-right-radius:2px; }
  .pm__msg--adv{ background:#fff; border-bottom-left-radius:2px; }
  .pm__time{ display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:3px; font-size:11px; line-height:1; color:rgba(0,0,0,.45); }
  .pm__advwrap{ position:relative; align-self:flex-start; max-width:80%; }
  .pm__advwrap .pm__msg{ max-width:none; }
  .pm__typing{ position:absolute; top:0; left:0; display:none; align-items:center; gap:4px; padding:12px 14px; background:#fff; border-radius:12px; border-bottom-left-radius:2px; }
  .pm__typing i{ width:6px; height:6px; border-radius:50%; background:#9a9a9a; animation:pmdot 1s infinite ease-in-out; }
  .pm__typing i:nth-child(2){ animation-delay:.15s; } .pm__typing i:nth-child(3){ animation-delay:.3s; }
  @keyframes pmdot{ 0%, 60%, 100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

  /* Recibe: foto de la canasta */
  .pm__foto{ aspect-ratio:16 / 9; max-height:300px; border-radius:16px; overflow:hidden; background:#EFE7D6; }
  .pm__foto img{ width:100%; height:100%; max-height:300px; object-fit:cover; display:block; }

  .pm__cta{ display:flex; align-items:center; justify-content:center; width:100%; height:54px; margin-top:48px; background:#F5EFE3; color:#0f5a45; font-family:'Inter', var(--font); font-weight:500; font-size:15px; border-radius:9999px; }

  /* Animaciones de entrada (sin scroll fijo: el scroll es normal) */
  .pm__block{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
  .pm__block.is-in{ opacity:1; transform:none; }
  .pm__thumbs img{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
  .pm__thumbs.is-in img{ opacity:1; transform:none; }
  .pm__thumbs.is-in img:nth-child(2){ transition-delay:.1s; } .pm__thumbs.is-in img:nth-child(3){ transition-delay:.2s; } .pm__thumbs.is-in img:nth-child(4){ transition-delay:.3s; }
  .pm__foto img{ opacity:0; transform:scale(1.04); transition:opacity .8s ease, transform 1.1s ease; }
  .pm__foto.is-in img{ opacity:1; transform:none; }
  /* chat: primero el cliente, luego "escribiendo…", luego el asesor */
  .pm__msg--me, .pm__advwrap .pm__msg{ opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; }
  .pm__chat.show-me .pm__msg--me{ opacity:1; transform:none; }
  .pm__chat.is-typing .pm__typing{ display:flex; }
  .pm__chat.show-adv .pm__advwrap .pm__msg{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .pm__block, .pm__thumbs img, .pm__foto img, .pm__msg--me, .pm__advwrap .pm__msg{ opacity:1 !important; transform:none !important; transition:none !important; }
  .pm__typing{ display:none !important; }
}

/* ===== Cómo pedir · celular: línea que separa cada paso + etiqueta "Paso X de 3" ===== */
@media all{
  .pm__step{ margin-top:36px; padding-top:28px; border-top:1px solid rgba(255,255,255,.28); }
  .pm__head + .pm__step{ margin-top:48px; }
  .pm__head{ text-align:center; margin-left:auto; margin-right:auto; }
  .pm__label{ font-family:'Inter', var(--font); font-weight:500; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.78); margin-bottom:14px; }
}

/* ===== Cómo pedir · ESCRITORIO: el mismo diseño, cada paso en dos columnas (texto a la izquierda, visual a la derecha) ===== */
@media (min-width:769px){
  .verde{ padding:112px 48px; }
  .pm{ max-width:1120px; margin:0 auto; }
  .pm__head{ max-width:680px; margin-left:auto; margin-right:auto; }
  .pm__eyebrow{ font-size:12px; margin-bottom:18px; }
  .pm__title{ font-size:clamp(2.6rem, 4.2vw, 3.6rem); line-height:1.08; margin-bottom:18px; }
  .pm__sub{ font-size:17px; }

  .pm__step{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:64px; align-items:center; margin-top:56px; padding-top:56px; }
  .pm__head + .pm__step{ margin-top:72px; }
  .pm__block + *{ margin-top:0; }
  .pm__label{ font-size:12px; margin-bottom:18px; }
  .pm__big{ font-size:clamp(4rem, 7vw, 6.5rem); margin-bottom:16px; }
  .pm__text{ font-size:17px; max-width:26em; }

  .pm__thumbs{ gap:12px; }
  .pm__thumbs img{ border-radius:12px; }
  .pm__chat{ padding:24px; gap:12px; border-radius:20px; }
  .pm__msg{ font-size:15px; padding:10px 12px 8px; }
  .pm__time{ font-size:11px; }
  .pm__foto{ border-radius:20px; aspect-ratio:16 / 9; max-height:360px; }
  .pm__foto img{ max-height:none; }
  .pm__cta{ display:inline-flex; width:auto; padding:0 48px; margin-top:72px; }
  .pm__cta:hover{ background:#fff; }
}