/* Fuentes self-hosteadas (woff2 subseteado latín+español): en 4G ahorra ~0.8s de
   LCP vs Google Fonts (sin la cadena googleapis→gstatic). Mismas familias de la app. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/playfair_display_semibold.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/playfair_display_bold.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:800 900;font-display:swap;src:url("/assets/fonts/playfair_display_extrabold.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/nunito_sans_regular.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/nunito_sans_semibold.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/nunito_sans_bold.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/nunito_sans_extrabold.woff2") format("woff2")}

/* Paleta "Pergamino + Oro + Obsidiana": espejo de ui/theme/Color.kt de la app */
:root{
  --primary:#48463F;        /* Obsidiana (Primary app) */
  --primary-dark:#302E29;   /* Obsidiana oscura */
  --gold:#FFD700;           /* Dorado Andino */
  --gold-dark:#E5A030;      /* Dorado Andino oscuro */
  --ochre:#8a5f00;          /* Sombra del dorado, legible sobre arena (AA) */
  --sand:#FFF9EF;           /* Arena Cálida (Background app) */
  --parchment:#FFEDB3;      /* SurfaceContainer app */
  --parchment-low:#FFF3D1;  /* SurfaceContainerLow app */
  --ink:#221B00;            /* OnBackground app */
  --muted:#6b6257;
  --surface:#FFFBF5;        /* SuperficieClara app */
  --line:#f0e3c2;
  --radius:16px;
  --shadow:0 8px 30px rgba(34,27,0,.08);
  /* Curvas fuertes (ease-out-quint / in-out): las built-in son débiles */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:"Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  /* Textura andina sutil: trama geométrica tejida sobre la arena cálida */
  background-color:var(--sand);
  background-image:
    radial-gradient(rgba(72,70,63,.05) 1px, transparent 1px),
    linear-gradient(135deg, rgba(229,160,48,.06) 25%, transparent 25%, transparent 50%, rgba(229,160,48,.06) 50%, rgba(229,160,48,.06) 75%, transparent 75%);
  background-size:22px 22px, 36px 36px;
}

h1,h2,h3{font-family:"Playfair Display",Georgia,serif;line-height:1.15;margin:0 0 .4em;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--ochre);text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin-inline:auto}
.muted{color:var(--muted)}

/* Accesibilidad: foco visible y skip-link */
:is(a,button,summary):focus-visible{outline:2.5px solid var(--gold-dark);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 12px 0;font-weight:700}
.skip:focus{left:0}

/* Iconos inline (trazo consistente, decorativos: aria-hidden en el HTML) */
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Header */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,249,239,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:"Playfair Display",serif;font-weight:700;font-size:1.25rem;color:var(--ink)}
.brand img{height:42px;width:auto}
.nav-links{display:flex;align-items:center;gap:1.4rem}
.nav-links a{color:var(--ink);font-weight:600;font-size:.95rem}
.nav-links a:hover{color:var(--ochre)}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:0;cursor:pointer;
  background:var(--primary);color:#fff;font-weight:800;font-family:inherit;
  padding:.8rem 1.4rem;border-radius:50px;font-size:1rem;
  transition:transform 160ms var(--ease-out),filter 160ms var(--ease-out)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08);color:#fff}
.btn:active{transform:scale(.97)}
/* El CTA dorado irradia (sombra teñida del propio color, nunca negra pura) */
.x-hero .hero-cta .btn:first-child,.sticky-cta .btn{box-shadow:0 6px 26px rgba(255,200,60,.35)}
.btn.secondary{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn.secondary:hover{background:rgba(72,70,63,.07)}
.nav .btn{padding:.55rem 1.1rem;font-size:.92rem}
@media(max-width:720px){.nav-links a:not(.btn){display:none}}

/* Grano de película sutil sobre toda la página: la textura que separa "render"
   de "diseñado". SVG inline (cero red), fijo y sin eventos: no cuesta FPS. */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Hero drenched (obsidiana) con atmósfera en capas: glow dorado tras el sello,
   rescoldo cálido abajo a la izquierda y viñeta perimetral (profundidad real). */
.x-hero{position:relative;min-height:92vh;display:flex;align-items:center;
  background:
    radial-gradient(56% 64% at 76% 42%, rgba(255,200,60,.16) 0%, transparent 60%),
    radial-gradient(40% 44% at 8% 96%, rgba(180,90,30,.18) 0%, transparent 65%),
    radial-gradient(120% 90% at 80% 10%, #605d56 0%, var(--primary) 45%, #232119 100%);
  color:#fff;overflow:hidden}
.x-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%, transparent 58%, rgba(10,9,5,.5) 100%)}
.x-hero::after{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;
  background-image:repeating-linear-gradient(135deg, rgba(255,215,0,.5) 0 2px, transparent 2px 26px)}
.x-hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;padding:4.5rem 0}
.x-hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.04}
.x-hero h1 .hi{color:var(--gold)}
.x-hero .lead{font-size:clamp(1.05rem,2vw,1.3rem);color:rgba(255,255,255,.88);max-width:36ch;margin:.8rem 0 1.7rem;font-weight:400}
.x-hero .kicker{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.76rem;color:var(--gold);margin-bottom:.9rem}
.x-hero .kicker::before{content:"";width:26px;height:2px;background:var(--gold);opacity:.7}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}

/* Entrada del hero en CSS puro: no depende del CDN de GSAP (en 3G ese script tarda
   segundos y el contenido crítico jamás debe esperar a un JS externo). */
[data-load]{animation:rise .8s var(--ease-out) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){[data-load]{animation:none}}

/* Emblema: el sello de la marca, vivo (flota, brilla) con piezas reales orbitando */
.emblem{position:relative;display:grid;place-items:center;min-height:440px}
.seal{position:relative;width:min(340px,72vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 30%, #FFFDF8 0%, var(--sand) 55%, #F6E9CB 100%);
  box-shadow:0 0 0 5px rgba(255,215,0,.55), 0 0 0 12px rgba(255,215,0,.12), 0 34px 70px rgba(0,0,0,.45);
  overflow:hidden}
.seal img{width:78%;height:auto}
/* Destello que barre el sello cada tanto: la marca respira */
.seal::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.65) 50%, transparent 62%);
  transform:translateX(-120%);animation:seal-shine 5.5s var(--ease-in-out) infinite}
@keyframes seal-shine{0%,55%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
/* Aura dorada detrás del sello: doble capa, respiración lenta */
.emblem::before{content:"";position:absolute;width:135%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,215,0,.30) 0%, transparent 46%),
    radial-gradient(circle, rgba(255,160,40,.14) 0%, transparent 68%);
  pointer-events:none;animation:aura 6s ease-in-out infinite}
@keyframes aura{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.emblem::before{animation:none}}
/* Piezas reales orbitando el sello */
.orbit{position:absolute;margin:0;width:108px;background:var(--surface);border-radius:16px;overflow:hidden;
  box-shadow:0 16px 38px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.5)}
.orbit img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.orbit figcaption{font-weight:800;font-size:.8rem;color:var(--ochre);padding:.3rem .55rem;background:var(--surface)}
.orbit-a{top:6%;left:-2%}
.orbit-b{top:38%;right:-4%}
.orbit-c{bottom:4%;left:12%}
@media(max-width:840px){
  .x-hero .container{grid-template-columns:1fr;text-align:center}
  .x-hero .lead{margin-inline:auto}
  .hero-cta{justify-content:center}
  .emblem{min-height:340px;margin-top:1.2rem}
  .orbit{width:84px}
  .orbit figcaption{font-size:.72rem}
  .orbit-a{top:0;left:2%}
  .orbit-b{top:42%;right:0}
  .orbit-c{bottom:0;left:10%}
}

/* Franja de confianza (los badges viven acá, no en el hero) */
.trust-strip{background:var(--surface);border-bottom:1px solid var(--line)}
.trust-strip .container{display:flex;justify-content:center;align-items:center;gap:clamp(1.2rem,5vw,3.2rem);padding:1.05rem 0;flex-wrap:wrap}
.t-item{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:.95rem;color:var(--ink)}
.t-item .ic{color:var(--ochre)}

/* Sections */
section.block{padding:3.2rem 0;border-top:1px solid var(--line)}
section.block h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.015em;margin-top:.2rem}
.eyebrow{color:var(--ochre);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.8rem}

/* Por qué Artesanal: split asimétrico, lista dividida (sin cards) */
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.5rem);margin-top:1.4rem;align-items:start}
.why-claim{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.35;max-width:24ch}
.why-claim strong{color:var(--ochre);font-weight:700}
.why-item{padding:1.15rem 0;border-top:1px solid var(--line)}
.why-item:last-child{border-bottom:1px solid var(--line)}
.why-item h3{font-size:1.12rem;margin:0 0 .25rem}
.why-item p{margin:0;color:var(--muted);font-size:.98rem}
@media(max-width:820px){.why-grid{grid-template-columns:1fr}.why-claim{max-width:none}}

/* Marco de imagen reutilizable (la leyenda vive DEBAJO, nunca encima) */
.g-frame{display:block;overflow:hidden;border-radius:18px;box-shadow:var(--shadow);background:#F5EDD8}
.g-frame img{width:100%;height:100%;object-fit:cover;display:block}

/* Quiénes somos: manifiesto + una sola foto de oficio */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.8rem,5vw,4rem);align-items:center}
.about-claim{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.3rem,2.5vw,1.8rem);line-height:1.4;margin:.4rem 0 1rem}
.about-claim strong{color:var(--ochre);font-weight:700}
.about-text > p:last-child{color:var(--muted);max-width:56ch}
.about-photo{margin:0;display:flex;flex-direction:column;gap:.5rem}
.about-photo .g-frame{aspect-ratio:4/5}
.about-photo figcaption{font-weight:700;font-size:.9rem;color:var(--muted)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}.about-photo{max-width:380px}}

/* Piezas recientes: productos reales, fila con scroll-snap en móvil y grilla en desktop */
.pieces-head p{margin:.2rem 0 0;max-width:46ch}
.pieces{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:1.8rem}
.piece{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow)}
.piece-img{aspect-ratio:4/5;overflow:hidden;background:#F5EDD8}
.piece-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 320ms var(--ease-out)}
.piece h3{font-size:1.02rem;margin:.75rem .9rem .15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piece-meta{margin:0 .9rem .85rem;font-size:.9rem;color:var(--muted)}
.piece-price{font-weight:800;color:var(--ochre);font-size:1rem}
.pieces-foot{margin-top:1.6rem;text-align:center}
@media(hover:hover) and (pointer:fine){.piece:hover .piece-img img{transform:scale(1.05)}}
@media(max-width:900px){
  .pieces{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.6rem;margin-inline:-4%;padding-inline:4%}
  .piece{flex:0 0 min(62vw,250px);scroll-snap-align:start}
}

/* Cinta de marca: el logo en movimiento (única marquee de la página) */
.brand-marquee{background:linear-gradient(135deg,var(--primary-dark),var(--primary));overflow:hidden;padding:1.1rem 0;border-block:1px solid rgba(255,215,0,.25)}
.bm-track{display:flex;width:max-content;will-change:transform;animation:bm-slide 26s linear infinite}
.bm-seq{display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;flex:none}
.bm-seq em{font-family:"Playfair Display",serif;font-style:italic;font-weight:700;font-size:1.5rem;color:var(--gold);white-space:nowrap}
.bm-seq span{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:rgba(255,255,255,.85);white-space:nowrap}
.bm-seq img{height:30px;width:30px;filter:invert(1);opacity:.9}
.brand-marquee:hover .bm-track{animation-play-state:paused}
@keyframes bm-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Qué nos diferencia: comparación en dos paneles (antes / con Artesanal) */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:1.8rem}
.cmp-col{border-radius:20px;padding:1.6rem 1.7rem}
.cmp-col h3{font-size:1.15rem;margin:0 0 .9rem}
.cmp-col ul{list-style:none;margin:0;padding:0}
.cmp-col li{position:relative;padding:.55rem 0 .55rem 1.7rem;font-size:.97rem}
.cmp-col li+li{border-top:1px dashed rgba(34,27,0,.12)}
.cmp-before{background:var(--parchment-low);border:1px solid var(--line);color:#5d564b}
.cmp-before li::before{content:"";position:absolute;left:.1rem;top:.95rem;width:10px;height:10px;
  border:2px solid #b3a98f;border-radius:50%;opacity:.8}
.cmp-after{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;box-shadow:0 18px 44px rgba(34,27,0,.22)}
.cmp-after h3{color:var(--gold)}
.cmp-after li{color:rgba(255,255,255,.92)}
.cmp-after li+li{border-top:1px dashed rgba(255,255,255,.18)}
.cmp-after li::before{content:"";position:absolute;left:0;top:.85rem;width:13px;height:13px;
  border:solid var(--gold);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) scaleY(.6)}
@media(max-width:760px){.compare{grid-template-columns:1fr}}

/* Cómo funciona: timeline numerada (secuencia real, los números se ganan el lugar) */
.steps{list-style:none;margin:2rem 0 0;padding:0;max-width:640px}
.step{display:grid;grid-template-columns:48px 1fr;gap:1.15rem;position:relative;padding-bottom:1.9rem}
.step::before{content:"";position:absolute;left:23px;top:54px;bottom:8px;width:2px;background:var(--line)}
.step:last-child{padding-bottom:0}
.step:last-child::before{display:none}
.step-num{width:48px;height:48px;border-radius:50%;background:var(--parchment);color:var(--ochre);display:grid;place-items:center;font-family:"Playfair Display",serif;font-weight:700;font-size:1.3rem}
.step h3{margin:.5rem 0 .2rem;font-size:1.15rem}
.step p{margin:0;color:var(--muted);max-width:52ch}

/* Para artesanos: banda obsidiana, split con filas divididas */
.band{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff}
.band h2{color:#fff}.band p{color:rgba(255,255,255,.85)}
.band .btn{background:var(--gold);color:var(--ink)}.band .btn:hover{color:var(--ink)}
.band-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.band-row{padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.16)}
.band-row:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.band-row h3{margin:0 0 .2rem;font-size:1.12rem;color:#fff}
.band-row p{margin:0;color:rgba(255,255,255,.82);font-size:.97rem}
@media(max-width:820px){.band-grid{grid-template-columns:1fr}}

/* Preguntas frecuentes: acordeón nativo */
.faq{max-width:680px;margin-top:1.6rem}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.05rem 0;font-weight:800;font-size:1.05rem;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:"Playfair Display",serif;font-size:1.5rem;line-height:1;
  color:var(--ochre);flex:none;transition:transform 220ms var(--ease-out)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0 0 1.1rem;color:var(--muted);max-width:60ch}
.faq-item summary:hover{color:var(--ochre)}

/* Descargar: info + QR, con Quirqui */
.download{text-align:center}
.download .box{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:2.2rem;box-shadow:var(--shadow);max-width:680px;margin:1.4rem auto 0}
.dl-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:1.8rem;align-items:center;text-align:left}
.dl-info .hero-cta{justify-content:flex-start}
.dl-mascota{height:84px;width:auto;margin-bottom:.6rem}
.dl-qr{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.dl-qr img{border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--sand)}
.dl-qr small{color:var(--muted);font-weight:600;line-height:1.4}
@media(max-width:640px){
  .dl-grid{grid-template-columns:1fr;text-align:center}
  .dl-info .hero-cta{justify-content:center}
  .dl-mascota{margin-inline:auto}
  .dl-qr{display:none} /* en el celular ya estás: el botón descarga directo */
}
.note{font-size:.85rem;color:var(--muted);margin-top:.7rem}
.soon{display:inline-flex;align-items:center;gap:.5rem;border:1.5px dashed var(--line);border-radius:50px;
  padding:.8rem 1.4rem;font-weight:700;font-size:1rem;color:var(--muted);background:var(--parchment-low)}

/* Footer: InverseSurface/InverseOnSurface de la app */
footer{background:#3A3000;color:#FFF0C2;padding:2.4rem 0;margin-top:1rem}
footer a{color:var(--gold)}
footer a:hover{text-decoration:underline}
footer .cols{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
footer .brand{color:#fff}
footer small{color:#d9cb96}
/* El logo también vive en el footer: invertido para el fondo oscuro */
.f-logo{height:42px;width:auto;filter:invert(1) brightness(1.6);opacity:.95;margin-bottom:.6rem}

/* ====== Subpáginas ====== */
.nav-links a.active{color:var(--ochre)}

/* Hero compacto de subpágina (banda obsidiana) */
.page-hero{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;padding:3.6rem 0 3rem;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;
  background-image:repeating-linear-gradient(135deg, rgba(255,215,0,.5) 0 2px, transparent 2px 26px)}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem);max-width:22ch}
.page-hero .lead{color:rgba(255,255,255,.88);max-width:52ch;font-size:clamp(1rem,1.8vw,1.18rem);margin:.5rem 0 0}
.page-hero .hero-cta{margin-top:1.4rem}
.page-hero .kicker{display:inline-block;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--gold);margin-bottom:.7rem}

/* Diagrama del pago protegido: nodos con flechas */
.escrow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:2rem;counter-reset:esc}
.esc-node{position:relative;text-align:center;padding:0 .8rem}
.esc-node::before{counter-increment:esc;content:counter(esc);display:grid;place-items:center;width:54px;height:54px;
  margin:0 auto .7rem;border-radius:50%;background:var(--parchment);color:var(--ochre);
  font-family:"Playfair Display",serif;font-weight:700;font-size:1.35rem;border:2px solid var(--gold-dark)}
.esc-node:not(:last-child)::after{content:"";position:absolute;top:26px;left:calc(50% + 36px);right:calc(-50% + 36px);
  height:2px;background:repeating-linear-gradient(90deg,var(--gold-dark) 0 8px,transparent 8px 14px)}
.esc-node h3{font-size:1rem;margin:0 0 .2rem}
.esc-node p{margin:0;font-size:.85rem;color:var(--muted)}
.esc-node.esc-hold::before{background:var(--ink);color:var(--gold);border-color:var(--ink)}
@media(max-width:860px){
  .escrow{grid-template-columns:1fr;gap:1.1rem;max-width:420px}
  .esc-node{display:grid;grid-template-columns:54px 1fr;gap:1rem;text-align:left;align-items:start;padding:0}
  .esc-node::before{margin:0}
  .esc-node:not(:last-child)::after{top:60px;bottom:-14px;left:26px;right:auto;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--gold-dark) 0 8px,transparent 8px 14px)}
}

/* Panel de precio: el 5% explicado con un ejemplo real */
.price-panel{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:2rem 2.2rem;box-shadow:var(--shadow);margin-top:2rem}
.price-big{font-family:"Playfair Display",serif;font-weight:900;font-size:clamp(3.4rem,8vw,5.5rem);color:var(--ochre);line-height:1}
.price-big small{display:block;font-family:"Nunito Sans",sans-serif;font-weight:800;font-size:.85rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:.3rem}
.price-rows{max-width:430px;width:100%}
.price-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;font-size:1rem}
.price-row+.price-row{border-top:1px dashed var(--line)}
.price-row strong{color:var(--ink)}
.price-row.total{font-weight:800;color:var(--ochre);font-size:1.1rem}
.price-note{margin:.8rem 0 0;font-size:.88rem;color:var(--muted)}
@media(max-width:640px){.price-panel{grid-template-columns:1fr;text-align:center}.price-rows{margin-inline:auto}}

/* Herramientas del vendedor: grilla con iconos */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:2rem}
.tool{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.4rem 1.3rem}
.tool .ic{width:26px;height:26px;color:var(--ochre);margin-bottom:.6rem}
.tool h3{font-size:1.05rem;margin:0 0 .25rem}
.tool p{margin:0;font-size:.92rem;color:var(--muted)}
@media(max-width:860px){.tools{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tools{grid-template-columns:1fr}}

/* Valores (nosotros): lista dividida grande */
.values{margin-top:1.6rem;max-width:680px}
.value{padding:1.2rem 0;border-top:1px solid var(--line)}
.value:last-child{border-bottom:1px solid var(--line)}
.value h3{font-size:1.2rem;margin:0 0 .25rem}
.value p{margin:0;color:var(--muted)}

/* El sello explicado (nosotros) */
.seal-story{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.8rem,5vw,4rem);align-items:center}
.seal-story .seal{width:min(280px,70vw);margin-inline:auto}
@media(max-width:760px){.seal-story{grid-template-columns:1fr}}

/* Quirqui (nosotros) */
.quirqui{display:flex;align-items:center;gap:1.6rem;background:var(--parchment-low);border:1px solid var(--line);
  border-radius:24px;padding:1.6rem 1.8rem;margin-top:2.4rem;max-width:640px}
.quirqui img{height:96px;width:auto;flex:none}
.quirqui p{margin:0;color:#5d564b}
.quirqui strong{color:var(--ink)}
@media(max-width:560px){.quirqui{flex-direction:column;text-align:center}}

/* Catálogo de piezas (página completa) */
.catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:2rem}
@media(max-width:980px){.catalog{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.catalog{grid-template-columns:repeat(2,1fr)}}
.catalog-empty{margin-top:2rem;color:var(--muted)}

/* CTA de cierre de subpágina */
.page-cta{text-align:center;background:var(--parchment-low);border-top:1px solid var(--line)}
.page-cta h2{max-width:24ch;margin-inline:auto}
.page-cta .hero-cta{justify-content:center;margin-top:1.3rem}

/* Navbar flotante: al scrollear se despega y se vuelve píldora con sombra */
.nav{transition:background 240ms var(--ease-out),box-shadow 240ms var(--ease-out),
  margin 240ms var(--ease-out),border-radius 240ms var(--ease-out)}
.nav.floating{margin:.6rem .8rem 0;border-radius:50px;border:1px solid var(--line);
  background:rgba(255,249,239,.92);box-shadow:0 12px 34px rgba(34,27,0,.14)}
.nav.floating .container{padding:.5rem 0}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}

/* Métricas animadas: números de POLÍTICA (no contadores inflables) */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:2.2rem;text-align:center}
.metric .num{font-family:"Playfair Display",serif;font-weight:900;line-height:1;
  font-size:clamp(2.8rem,7vw,4.6rem);color:var(--ochre)}
.metric .num small{font-size:.45em;font-weight:800}
.metric p{margin:.4rem 0 0;font-weight:700;color:var(--muted);font-size:.95rem}
@media(max-width:640px){.metrics{grid-template-columns:1fr;gap:1.6rem}}

/* Testimonios reales (auto-activable): slider que se pausa al pasar el mouse */
.reviews-track{display:flex;gap:18px;width:max-content;animation:rv-slide 32s linear infinite;margin-top:1.8rem}
.reviews-wrap{overflow:hidden}
.reviews-wrap:hover .reviews-track{animation-play-state:paused}
.review{flex:0 0 min(78vw,330px);background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:1.3rem 1.4rem;box-shadow:var(--shadow)}
.review .stars{color:var(--gold-dark);letter-spacing:.12em;font-size:.95rem;margin-bottom:.5rem}
.review p{margin:0 0 .8rem;color:var(--ink);font-size:.97rem;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.review cite{font-style:normal;font-weight:800;font-size:.85rem;color:var(--muted)}
@keyframes rv-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.reviews-track{animation:none;width:auto;flex-wrap:wrap}}

/* Formulario de contacto (nosotros) */
.contact-form{max-width:560px;display:grid;gap:1rem;margin-top:1.8rem}
.contact-form label{display:grid;gap:.35rem;font-weight:700;font-size:.92rem;color:var(--ink)}
.contact-form input,.contact-form textarea{font:inherit;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:12px;padding:.75rem .9rem;width:100%}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold-dark)}
.contact-form textarea{min-height:120px;resize:vertical}
.form-status{font-weight:700;font-size:.95rem;margin:0}
.form-status.ok{color:#2E7D32}
.form-status.err{color:#C62828}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* CTA pegajoso en móvil: aparece al pasar el hero (en móvil convierte mucho más;
   en desktop no aporta y no se muestra). Respeta el área segura del gesto de iOS. */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;
  padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(255,249,239,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform 260ms var(--ease-out)}
.sticky-cta.on{transform:translateY(0)}
.sticky-cta .btn{width:100%;justify-content:center;background:var(--gold);color:#221B00;font-size:1.02rem}
@media(max-width:840px){.sticky-cta{display:block}}
@media(prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* Legal pages */
.legal{padding:2.4rem 0 3rem}
.legal h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.legal h2{font-size:1.25rem;margin-top:1.8rem;color:var(--primary)}
.legal p{color:#4a4540}
.legal .back{display:inline-block;margin-bottom:1rem;font-weight:700}
.legal ul{padding-left:1.2rem}.legal li{margin:.25rem 0}

/* Estados iniciales de los reveals por scroll (GSAP los anima; sin GSAP quedan visibles) */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .seal::after{animation:none}
  .bm-track{animation:none}
  .g-frame{transition:none}
  .piece-img img{transition:none}
  .faq-item summary::after{transition:none}
  .btn{transition:none}
}