/* ============================================================
   v2.css — Sistema de diseño "Dos Voces" · santamartacrea.com
   Fuente de verdad: DESIGN.md (raíz) + nueva-web/home.html
   Congelado 2026-07-02 con aprobación de JM.
   No improvisar valores: si falta un token, se añade en DESIGN.md primero.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Montserrat:wght@300;400;500;600;700&display=swap');
@view-transition{ navigation:auto; }
html{scrollbar-gutter:stable;scroll-behavior:smooth;overflow-x:clip}
:root{
  /* color */
  --paper:#FFF8E7;          /* Cosmic Latte · Pantone 9060 C — uniforme en toda la web */
  --ink:#111111;
  --ink-soft:#111111a8;
  --paper-on-ink:#FFF8E7;
  --paper-on-ink-dim:#FFF8E7b0;
  --teal:#23727a;           /* teal de TEXTO — 5.28:1 sobre latte, cumple AA */
  --teal-b:#47AAB4;         /* teal vivo histórico — RESERVADO, sin uso en la web */
  --line:#1111112b;
  --rule:#111111;
  /* type */
  --font-sans:'Montserrat',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* space */
  --sp-1:.5rem;--sp-2:1rem;--sp-3:1.5rem;--sp-4:2.5rem;--sp-5:4rem;--sp-6:7rem;
  /* motion */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  /* estado funcional de error (validación de formularios) — único uso permitido
     fuera de la paleta de 3: rojo profundo AA sobre latte (6.6:1) */
  --err:#b3261e;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-mono);background:var(--paper);color:var(--ink);overflow-x:clip}
::selection{background:var(--teal);color:#fff}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(1.25rem,5vw,4rem)}
img{max-width:100%}

/* ================= NAV ================= */
nav.main{position:fixed;top:0;left:0;right:0;z-index:60;background:color-mix(in oklab,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.main .nav-content{display:flex;justify-content:space-between;align-items:center;height:80px}
.nav-logo img{height:3.4rem;width:auto;display:block}
.navlinks{display:flex;align-items:center}
.navlinks a{font-family:var(--font-sans);color:var(--ink);text-decoration:none;padding:.75rem;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition:color .3s,transform .3s}
.navlinks a:hover{color:var(--teal);transform:translateY(-2px)}
.navlinks a.active{color:var(--teal)}
.navlinks a.hot{color:var(--teal);font-weight:700}
.menu-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:.4rem}
@media(max-width:980px){.navlinks{display:none}.menu-toggle{display:block}}
.mobile-menu{position:fixed;inset:0;z-index:70;background:var(--paper);display:none;flex-direction:column;padding:1.5rem}
.mobile-menu.active{display:flex}
.mm-head{display:flex;justify-content:space-between;align-items:center;height:80px}
.mm-head img{height:3.4rem}
.mm-close{background:none;border:none;color:var(--ink);cursor:pointer}
.mm-nav{display:flex;flex-direction:column;gap:1.2rem;margin-top:2.5rem}
.mm-nav a{font-family:var(--font-sans);color:var(--ink);text-decoration:none;font-size:1.3rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.mm-nav a.hot{color:var(--teal)}
.mm-foot{margin-top:auto;font-size:.75rem;color:var(--ink-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.mm-foot a{color:var(--ink);text-decoration:none}

/* ================= TIPOS BASE ================= */
.kicker{font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--teal)}
.kicker::before{content:"// "}
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--paper-on-ink);text-decoration:none;font-weight:700;font-size:.9rem;padding:1rem 1.75rem;border-radius:100px;transition:gap .3s var(--ease-out),background .3s;border:none;cursor:pointer;font-family:var(--font-sans)}
.btn:hover{gap:1.1rem;background:var(--teal)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* ================= HERO ================= */
header.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:7rem;padding-bottom:3rem}
h1{font-family:var(--font-sans);font-weight:700;font-size:clamp(3rem,10.5vw,8.8rem);line-height:.98;letter-spacing:-.035em;text-transform:uppercase;overflow-wrap:anywhere;min-width:0}
h1 .l{display:block;overflow:hidden}
h1 .l>span{display:inline-block;transform:translateY(110%);animation:riseup .9s var(--ease-out) forwards}
h1 .l:nth-child(2)>span{animation-delay:.12s}
@keyframes riseup{to{transform:translateY(0)}}
h1 em{font-style:normal;color:var(--teal);position:relative;white-space:nowrap}
h1 em svg{position:absolute;left:0;bottom:-.06em;width:100%;height:.18em;overflow:visible}
h1 em svg path{fill:none;stroke:var(--teal);stroke-width:6;stroke-linecap:round;stroke-dasharray:820;stroke-dashoffset:820;animation:draw 1s var(--ease-out) .75s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-sub{margin-top:var(--sp-4);max-width:640px;font-family:var(--font-mono);font-size:clamp(.9rem,1.4vw,1.05rem);font-weight:500;line-height:1.9;color:var(--ink-soft);min-height:2em}
.hero-sub::before{content:"> ";color:var(--teal);font-weight:600}
.caret{display:inline-block;width:.6ch;height:1.05em;background:var(--teal);vertical-align:text-bottom;margin-left:.2ch;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.herofoot{margin-top:var(--sp-4);display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
/* Hero compacto para páginas interiores (sin 100svh) */
header.hero.inner{min-height:0;padding-top:11rem;padding-bottom:1rem}
/* Título de interior: menos de la mitad del de la home (corrección JM gate F3) */
header.hero.inner h1{font-size:clamp(1.9rem,4.6vw,4rem)}
header.hero.inner .hero-sub{margin-top:var(--sp-3)}

/* ================= MARQUEE ================= */
.marquee{border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);overflow:hidden;white-space:nowrap;padding:1rem 0}
.marquee div{display:inline-block;animation:scroll 30s linear infinite}
.marquee span{margin:0 1.4rem;color:var(--ink);font-family:var(--font-mono);font-weight:500;font-size:1rem;text-transform:lowercase}
.marquee i{color:var(--teal);font-style:normal;margin:0 1.4rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ================= SISTEMA DE SECCIONES (reglas de tinta, latte uniforme) ================= */
section.block{padding:clamp(5.5rem,11vw,9rem) 0 0}
.sec-head{border-top:2px solid var(--rule);padding-top:var(--sp-3);display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3) var(--sp-4);align-items:start;margin-bottom:var(--sp-5)}
.sec-head .num{font-family:var(--font-mono);font-weight:400;font-size:clamp(2.4rem,5.5vw,4rem);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--teal)}
.sec-head .num::after{content:"_";color:var(--teal);-webkit-text-stroke:0;animation:blink 1.1s steps(1) infinite}
.sec-head .tit .kicker{display:block;margin-bottom:.6rem}
.sec-head h2{font-family:var(--font-sans);font-weight:700;font-size:clamp(1.8rem,4vw,3rem);line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere}
.sec-head h2 em{font-style:normal;color:var(--teal)}
@media(max-width:640px){.sec-head{grid-template-columns:1fr}}

/* ================= PROSA EDITORIAL (columna ancha + corta) ================= */
.mission{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-4) var(--sp-5);align-items:start}
@media(max-width:800px){.mission{grid-template-columns:1fr}}
.mission p{font-size:.98rem;line-height:1.95;font-weight:400;color:var(--ink-soft)}
.mission .btn{margin-top:var(--sp-3)}
/* Prosa simple de página interior */
.prose{max-width:820px}
.prose p{font-size:.98rem;line-height:1.95;font-weight:400;color:var(--ink-soft);margin-bottom:1.2rem}
.prose strong{color:var(--ink)}
.prose a:not(.btn){color:var(--teal)}

/* ================= TARJETA ÚNICA: ficha de registro con filo teal ================= */
/* hover: trazo de tinta que se dibuja alrededor (conic-gradient + @property --trace) */
@property --trace{syntax:'<percentage>';initial-value:0%;inherits:false}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));grid-auto-rows:1fr;gap:1.1rem}
.card{position:relative;background:transparent;border:1.5px solid var(--teal);border-radius:24px;padding:1.7rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:.55rem;transition:transform .35s var(--ease-out)}
.card::before{content:"";position:absolute;inset:-2px;border-radius:26px;padding:2px;pointer-events:none;
  background:conic-gradient(from -90deg,var(--rule) var(--trace),transparent var(--trace));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  --trace:0%;transition:--trace .55s var(--ease-out)}
.card:hover{transform:translateY(-4px)}
.card:hover::before{--trace:100%}
.card .idx{display:block;width:100%;font-family:var(--font-mono);font-size:.8rem;color:var(--teal);border-bottom:1.5px solid var(--line);padding-bottom:.7rem;margin-bottom:.4rem}
.card .idx::before{content:"["}
.card .idx::after{content:"]"}
.card h3{font-family:var(--font-sans);font-weight:700;font-size:1.08rem;letter-spacing:.01em;text-transform:uppercase;line-height:1.3}
.card p{color:var(--ink-soft);font-size:.8rem;font-weight:400;line-height:1.75;flex:1}
.card .go{font-family:var(--font-mono);color:var(--teal);font-size:.68rem;font-weight:600;letter-spacing:.1em;display:flex;align-items:center;gap:.45rem;margin-top:.4rem}

.tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.2rem}
/* Parrillas con filas SIEMPRE completas (corrección JM gate F3): elegir la
   clase según el nº de fichas — 4 fichas → cols-4, 6 → cols-3, 2 o 4 con
   texto largo → cols-2. Nunca dejar una ficha suelta en la última fila. */
.cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.cards.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.cards.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.cards.cols-2,.cards.cols-3,.cards.cols-4{grid-template-columns:1fr}}
/* Enlaces dentro de fichas (p. ej. enlace discreto a la gemela en FAQ) */
.card p a:not(.btn),details.faq-item p a:not(.btn){color:var(--teal);text-decoration:underline}
/* Listas dentro de fichas */
.card ul{list-style:none;margin-top:.2rem;display:flex;flex-direction:column;gap:.4rem}
.card ul li{font-family:var(--font-mono);font-size:.78rem;line-height:1.6;color:var(--ink-soft)}
.card ul li::before{content:"\2014  ";color:var(--teal)}

/* ================= CAPA GEO: bloque "En corto" =================
   Ancho completo de la página y texto un punto más pequeño que el resto
   (corrección JM gate F3). Va siempre en la sección 01, presentando. */
.tldr-box{border:none;border-radius:0;padding:0;margin:2.2rem 0 0;width:100%;text-align:left}
.tldr-box .tldr-label{display:inline-block;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--teal);margin-bottom:.6rem}
.tldr-box .tldr-label::before{content:"// "}
.tldr-box p{font-family:var(--font-mono);font-size:.98rem;line-height:1.9;color:var(--ink-soft);margin:0}

/* ================= HERO INTERIOR: grid con ficha lateral ================= */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--sp-4) var(--sp-5);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ================= PRECIOS (componente único del sistema) =================
   !important deliberado: unifica los estilos .price que las páginas de venta
   definieron por su cuenta y vence a .card p (que los aplastaba a .8rem) */
.price,.card p.price{font-family:var(--font-sans)!important;font-weight:700!important;font-size:2.2rem!important;letter-spacing:-.02em;line-height:1.15!important;color:var(--ink)!important}
.price span,.price .per{font-family:var(--font-mono)!important;font-size:.8rem!important;font-weight:400!important;color:var(--ink-soft)!important;letter-spacing:0}
.price.sm,.card p.price.sm{font-size:1.45rem!important}
.price.old,.card p.price.old{font-size:1.15rem!important;color:var(--ink-soft)!important;text-decoration:line-through}
.price-note{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-soft)}

/* ================= FAQ UNIFICADA: fichas colapsables 2 por fila =================
   Ficha de registro que se pliega: [0X] + pregunta visibles, respuesta al abrir */
/* FAQ compacta (aprobada por JM 2026-07-05): [0X] pregunta ..... + en una línea */
details.faq-card{padding:.85rem 1.15rem;border-radius:14px}
details.faq-card::before{border-radius:16px}
details.faq-card summary{cursor:pointer;list-style:none;display:flex;flex-direction:row;align-items:center;gap:.8rem}
details.faq-card summary::-webkit-details-marker{display:none}
details.faq-card summary .idx{width:auto;border-bottom:none;padding-bottom:0;margin-bottom:0;flex-shrink:0}
details.faq-card summary h3{font-size:.85rem;text-transform:none;letter-spacing:0;line-height:1.45;flex:1}
details.faq-card summary::after{content:"+";margin-left:auto;flex-shrink:0;font-family:var(--font-mono);font-weight:600;color:var(--teal);font-size:1.15rem;line-height:1}
details.faq-card[open] summary::after{content:"\2212"}
details.faq-card>p{margin-top:.7rem}
.cards:has(> details.faq-card){gap:.6rem}

/* FAQ desplegables (capa GEO: los <details> nunca se pierden al migrar) */
details.faq-item{border:1.5px solid var(--teal);border-radius:24px;padding:1.1rem 1.5rem;margin-bottom:.9rem}
details.faq-item summary{cursor:pointer;font-family:var(--font-sans);font-weight:700;font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:"+";font-family:var(--font-mono);color:var(--teal);font-size:1.2rem;flex-shrink:0}
details.faq-item[open] summary::after{content:"\2212"}
details.faq-item p,details.faq-item div{font-family:var(--font-mono);color:var(--ink-soft);font-size:.9rem;line-height:1.8;margin-top:.8rem}

/* Intro de sección (párrafo descriptivo bajo la cabecera numerada) */
.sec-intro{max-width:820px;margin:calc(-1*var(--sp-4)) 0 var(--sp-5);font-family:var(--font-mono);font-size:.98rem;line-height:1.9;color:var(--ink-soft)}

/* ================= FORMULARIO (centrado en su bloque) ================= */
.form-wrap{max-width:820px;margin:0 auto}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-4)}
@media(max-width:700px){.contact-form{grid-template-columns:1fr}}
.form-group.full{grid-column:1/-1}
.form-label{display:block;font-family:var(--font-sans);font-weight:700;font-size:1rem}
.form-description{font-family:var(--font-mono);color:var(--ink-soft);font-size:.74rem;font-weight:400;margin:.2rem 0 .55rem}
.form-description::before{content:"# ";color:var(--teal)}
.form-input{width:100%;background:transparent;border:none;border-bottom:2px solid var(--line);padding:.65rem .1rem;font-family:var(--font-mono);font-size:1rem;font-weight:500;color:var(--ink);transition:border-color .3s;border-radius:0}
.form-input::placeholder{color:#11111150;font-weight:400}
.form-input:focus{outline:none;border-bottom-color:var(--teal)}
textarea.form-input{resize:vertical;line-height:1.6}
/* Mensajes que inyecta form-handler.js (antes los estilaba el CSS legacy) */
.form-error-message{display:block;font-family:var(--font-mono);font-size:.78rem;color:var(--err);margin-top:.4rem}
.form-error-message::before{content:"# "}
.form-success-message{display:block;font-family:var(--font-mono);font-size:.78rem;color:var(--teal);margin-top:.4rem}
.form-message{font-family:var(--font-mono);font-size:.9rem;line-height:1.7;border:1.5px solid var(--teal);border-radius:16px;padding:.9rem 1.2rem;margin-top:1.2rem;color:var(--ink)}
.form-message.error,.form-message-error{border-color:var(--err);color:var(--err)}
.form-input.error,.form-input.invalid{border-bottom-color:var(--err)}

/* ================= MARCAS ================= */
.brands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4) var(--sp-3);align-items:center;justify-items:center}
@media(max-width:700px){.brands{grid-template-columns:repeat(2,minmax(0,1fr))}}
.brands img{height:38px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .35s,opacity .35s}
.brands img:hover{filter:none;opacity:1}

/* ================= CTA FINAL ================= */
.cta{background:transparent;border:1.5px solid var(--teal);color:var(--ink);border-radius:30px;padding:clamp(3rem,7vw,5.5rem);text-align:center}
.cta .kicker{color:var(--teal)}
.cta h2{font-family:var(--font-sans);font-weight:700;font-size:clamp(1.7rem,4.5vw,3.3rem);line-height:1.15;letter-spacing:-.02em;max-width:26ch;margin:1.4rem auto 0}
.cta h2 em{font-style:normal;color:var(--teal)}
.cta .btn{margin-top:2.4rem}

/* ================= FOOTER (única superficie de color) ================= */
footer.v2{background:var(--teal);color:var(--paper-on-ink);padding:var(--sp-5) 0 var(--sp-4);margin-top:var(--sp-6)}
footer.v2 .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4)}
footer.v2 .fh{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--paper-on-ink);margin-bottom:.9rem}
footer.v2 .fh::before{content:"// "}
footer.v2 p,footer.v2 address{color:#FFF8E7f2;font-weight:400;font-size:.85rem;line-height:2;font-style:normal}
footer.v2 a{color:var(--paper-on-ink);text-decoration:none;transition:color .3s}
footer.v2 a:hover{color:#ffffff;text-decoration:underline}
footer.v2 .fsocial a{display:inline-flex;align-items:center;gap:.5rem;margin-right:1.2rem}
footer.v2 .fbottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid #FFF8E73d;font-size:.8rem;color:#FFF8E7f2;font-weight:400}
/* En móvil, el N.I.T. baja a su propia línea (legibilidad, pedido de JM) */
@media(max-width:640px){
  footer.v2 .fbottom .nit{display:block}
  footer.v2 .fbottom .nit-sep{display:none}
}
.mm-foot .nit{display:block}
.mm-foot .nit-sep{display:none}

/* ================= REVEAL + REDUCED MOTION ================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .marquee div{animation:none}
  .caret,.sec-head .num::after{animation:none}
  h1 .l>span{transform:none;animation:none}
  h1 em svg path{stroke-dashoffset:0;animation:none}
}