/* PubliCOW® — sistema visual (brief de diseño v1, 2026-09-12: secciones I1–I4).
   Tokens, escala tipográfica, botones, campos y estados; después la página
   (header A4, barras A2/A3, hero B, pasos C, precio D, confianza E, preguntas F,
   cierre y pie G), el panel de COWBB (H) y las páginas legales y 404 (J). */
/* Fuentes en el propio dominio (latin), bajadas de Google Fonts el 2026-09-13: sin terceros en la carga. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/IBMPlexMono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/IBMPlexMono-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url(fuentes/Unbounded-900.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/WorkSans-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/WorkSans-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/WorkSans-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --crema:#F9F0E7; --tinta:#17150F; --naranja:#F0491F; --ambar:#FFA81E; --gris:#5A5346;
  --error:#A62B0A; --listo:#1F5C2E; --burbuja:#DCF7C5; --burbuja-texto:#1B2E12; --hilo:var(--crema);
  --dis:'Unbounded','Trebuchet MS',sans-serif; --mono:'IBM Plex Mono','Courier New',monospace; --tex:'Work Sans',Arial,sans-serif;
  --header:72px; --barra:64px; --radio:14px 18px 12px 20px / 16px 12px 18px 14px;
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 24px)}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--tex);font-size:19px;line-height:1.55;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.quieto{overflow:hidden}
[hidden]{display:none!important}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.escondido{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pendiente{color:var(--error)}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

/* ── Escala (I1) ───────────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;font-family:var(--dis);font-weight:900;letter-spacing:-.02em}
h1{font-size:clamp(56px,6.6vw,96px);line-height:.95;letter-spacing:-.045em;text-transform:uppercase;max-width:760px}
h1 span{display:block}
h1 .s2{color:var(--naranja)}
h2{font-size:44px;line-height:1.05}
h3{font-size:32px;line-height:1.1;max-width:22ch}
.texto,p.texto{font-size:19px;line-height:1.55;max-width:60ch;color:var(--tinta)}
.clara{font-family:var(--tex);font-size:15px;line-height:1.5;color:var(--gris);max-width:52ch}
.mono,.etiqueta{font-family:var(--mono);font-weight:600;font-size:13px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase}
.etiqueta{display:inline-block;background:var(--tinta);color:var(--crema);padding:9px 13px;border-radius:6px 10px 5px 11px;
          transform:rotate(-1.5deg);position:relative;box-shadow:0 3px 0 rgba(23,21,15,.2)}
.etiqueta::before{content:"";position:absolute;inset:4px;border:1.5px dashed rgba(249,240,231,.55);border-radius:inherit}
.etiqueta b{color:var(--ambar);font-weight:600;margin-right:6px}
.cifra{font-family:var(--dis);font-weight:900;font-size:48px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cifra small{font-size:16px;letter-spacing:0;margin-left:4px}
@media(max-width:959px){
  h1{font-size:clamp(36px,10.5vw,48px);line-height:.98}
  h2{font-size:32px} h3{font-size:26px}
  .texto,p.texto{font-size:17px} .mono,.etiqueta{font-size:12px}
  .etiqueta{transform:none;white-space:normal;line-height:1.4}
  .cifra{font-size:40px}
}

/* ── Material: fieltro con costura ─────────────────────────────────────────── */
.fieltro{position:relative;border-radius:22px 26px 18px 28px / 24px 20px 26px 22px;
         box-shadow:0 3px 0 rgba(23,21,15,.16),inset 0 2px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.09)}
.fieltro::after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grano);opacity:.22;pointer-events:none;mix-blend-mode:multiply}
.costura{outline:2px dashed var(--hilo);outline-offset:-9px}
.crema{background:var(--crema);--hilo:var(--naranja)}
.negro{background:var(--tinta);color:var(--crema);--hilo:var(--ambar)}
.ambar{background:var(--ambar);color:#2B1C02;--hilo:#2B1C02}

/* ── Botones (I2, I3): principal, secundario y liga ─────────────────────────── */
.parche{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--dis);font-weight:900;font-size:16px;line-height:1;
        letter-spacing:-.01em;text-decoration:none;color:var(--tinta);height:52px;padding:0 24px;border:0;cursor:pointer;
        border-radius:var(--radio);position:relative;box-shadow:0 3px 0 rgba(23,21,15,.2);transition:transform .15s,box-shadow .15s;
        -webkit-appearance:none;appearance:none;white-space:nowrap}
.parche::before{content:"";position:absolute;inset:6px;border:2px dashed var(--naranja);border-radius:inherit;pointer-events:none}
.parche.n{background:var(--naranja)}
.parche.n::before{border-color:rgba(255,255,255,.78)}
.parche.c{background:var(--crema)}
.parche:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(23,21,15,.2)}
.parche:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(23,21,15,.2)}
.parche:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.parche[disabled],.parche.cargando{opacity:.55;pointer-events:none}
.parche.chico{height:40px;padding:0 18px;font-size:14px}
.liga{font-family:var(--tex);font-weight:500;font-size:15px;color:var(--tinta);text-decoration:underline;text-underline-offset:3px;
      background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.liga svg{width:20px;height:20px;flex:0 0 auto}
.botones{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media(max-width:959px){
  .parche{height:50px;font-size:15px}
  .botones{flex-direction:column;align-items:stretch}
  .botones .parche{width:100%}
}

/* ── Campos, chips y estados (I4) ──────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:6px;width:100%}
.campo>span.mono{font-size:12px}
.campo input,.campo select,.campo textarea,.entrada{font-family:var(--tex);font-size:16px;color:var(--tinta);height:48px;padding:0 14px;
     border:2px solid var(--tinta);border-radius:10px 12px 9px 13px;background:#fff;width:100%;-webkit-appearance:none;appearance:none}
.campo textarea{height:auto;min-height:96px;padding:12px 14px;line-height:1.45;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--naranja);box-shadow:0 0 0 3px rgba(240,73,31,.3)}
.campo.mal input,.campo.mal select{border-color:var(--error)}
.campo .ayuda{font-size:15px;line-height:1.5;color:var(--gris)}
.campo .falla{font-size:14px;line-height:1.4;color:var(--error);display:none}
.campo.mal .falla{display:block}
.tel{display:flex;gap:8px}
.tel select{width:auto;flex:0 0 auto;font-family:var(--mono);font-size:14px;padding:0 10px}
.tel input{flex:1;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.04em;height:40px;padding:0 14px;background:#fff;
      border:2px solid var(--tinta);border-radius:10px 12px 9px 13px;cursor:pointer;color:var(--tinta);display:inline-flex;align-items:center}
.chip.activa{background:var(--tinta);color:var(--crema)}
.chip:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.estado{font-family:var(--tex);font-size:15px;line-height:1.5;color:var(--gris);min-height:1em}
.estado.listo{color:var(--listo)}
.estado.error{color:var(--error)}
.estado.listo::before{content:"✓ "}

/* ── Header (A4) ───────────────────────────────────────────────────────────── */
header.cabecera{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header);display:flex;align-items:center;justify-content:space-between;
       gap:16px;padding:0 24px;background:transparent;transition:background .2s,box-shadow .2s}
header.cabecera.solida{background:var(--crema);box-shadow:0 1px 0 rgba(23,21,15,.12)}
.wm{font-family:var(--dis);font-weight:900;font-size:17px;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:9px;
    padding:8px 14px 8px 8px;background:var(--crema);border-radius:14px 18px 12px 20px;box-shadow:0 3px 0 rgba(23,21,15,.2);
    text-decoration:none;color:var(--tinta);position:relative;line-height:1}
.wm::before{content:"";position:absolute;inset:5px;border:2px dashed var(--naranja);border-radius:inherit;pointer-events:none}
.wm em{font-style:normal;color:var(--naranja)}
.wm img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.wm sup{font-size:.48em;vertical-align:top;margin-left:2px;line-height:1;color:var(--tinta)}
.anclas{display:flex;gap:28px;font-family:var(--tex);font-weight:500;font-size:15px}
.anclas a{text-decoration:none;color:var(--tinta);padding:6px 0;border-bottom:2px solid transparent}
.anclas a:hover{border-bottom-color:var(--naranja)}
@media(max-width:959px){
  :root{--header:60px}
  header.cabecera{padding:0 20px}
  .anclas{gap:0}
  .anclas a:not(.precio-ancla){display:none}
  .anclas .precio-ancla{text-decoration:underline;text-underline-offset:3px}
  header.cabecera .parche{display:none}
}

/* ── Barra de progreso (A2, escritorio) y barra fija (A3, móvil) ───────────── */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:48;height:var(--barra);background:var(--tinta);color:var(--crema);
       border-top:3px dashed var(--crema);display:flex;align-items:center;gap:12px;padding:0 20px;
       transform:translateY(calc(100% + 64px));transition:transform .25s}
.barra.visible{transform:none}
.barra::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.18;mix-blend-mode:screen;pointer-events:none}
.barra>*{position:relative;z-index:1}
/* COWBB en la barra: grande y asomándose por encima (Enrique, 2026-09-13: «casi imperceptible»).
   Respira en reposo y brinca al cambiar de pose; el bloque de la barra le deja su espacio. */
.barra .cara{position:absolute;left:20px;bottom:6px;width:98px;height:98px;border-radius:50%;overflow:hidden;
             border:3px solid var(--crema);background:var(--crema);box-shadow:0 0 0 3px var(--tinta),0 6px 0 rgba(0,0,0,.28);
             transform-origin:50% 100%;animation:respira 3.2s ease-in-out infinite;z-index:2}
.barra .cara img{width:100%;height:100%;object-fit:cover}
.barra .cara.brinco{animation:brinco .8s cubic-bezier(.3,1.3,.5,1)}
@keyframes respira{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
.barra .marcos{display:flex;gap:8px;flex:1;justify-content:center}
.barra .marco{width:44px;height:36px;border:2px dashed rgba(249,240,231,.55);border-radius:6px;background:none;color:var(--crema);
              font-family:var(--mono);font-weight:600;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.barra .marco.activo{background:var(--naranja);border-color:var(--naranja);color:var(--tinta)}
.barra .marco:focus-visible{outline:3px solid var(--ambar);outline-offset:2px}
.barra .parche{height:44px;font-size:14px;padding:0 20px}
#barra-escritorio{border-bottom:3px dashed var(--crema);box-sizing:content-box;height:58px;padding-left:138px}
#barra-movil{display:none;height:calc(var(--barra) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
             padding-left:96px;padding-right:16px}
#barra-movil .cara{left:10px;bottom:calc(6px + env(safe-area-inset-bottom,0px));width:78px;height:78px}
#barra-movil .parche{flex:1;width:auto;font-size:13px;padding:0 10px}
@media(max-width:374px){ #barra-movil{padding-left:84px} #barra-movil .cara{width:66px;height:66px} #barra-movil .parche{font-size:12.5px} }
@media(max-width:339px){ #barra-movil{padding-left:72px} #barra-movil .cara{width:56px;height:56px} #barra-movil .parche{font-size:12px;padding:0 4px} }
@media(max-width:959px){ #barra-escritorio{display:none} #barra-movil{display:flex} }

/* ── Estructura: columna vertical (A1) ──────────────────────────────────────── */
main{display:block}
.seccion{max-width:1180px;margin:0 auto;padding:128px 24px 0}
.seccion.primera{padding-top:calc(var(--header) + 24px)}
.cabeza{display:flex;flex-direction:column;gap:16px;align-items:flex-start;margin-bottom:64px}
.cabeza h2{max-width:24ch;text-wrap:balance}
@media(max-width:959px){
  .seccion{padding:80px 20px 0}
  .cabeza{margin-bottom:40px}
}

/* ── Hero (B) ──────────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:7fr 5fr;gap:32px;align-items:end}
.hero .cuerpo{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero .etiqueta{margin-bottom:-4px}
.hero .lead{font-size:19px;line-height:1.5;max-width:46ch}
.hero .clara{margin-top:-8px}
.hilo{width:min(100%,640px);height:14px;overflow:visible;margin:-6px 0 2px}
.hilo path{fill:none;stroke:var(--naranja);stroke-width:4;stroke-dasharray:14 10;stroke-linecap:round}
.hilo.dibujando path{stroke-dasharray:none}
.imagen{position:relative;justify-self:end;width:100%;max-width:560px}
.imagen img{width:100%;height:auto;filter:drop-shadow(0 10px 0 rgba(23,21,15,.10))}
.gafete{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
        background:var(--crema);border:2px solid var(--tinta);box-shadow:2px 2px 0 var(--tinta);padding:6px 10px;color:var(--tinta)}
.eyebrow-corto{display:none}
@media(max-width:959px){
  .hero{grid-template-columns:1fr;gap:20px}
  .hero .lead{font-size:17px}
  .imagen{justify-self:center;max-width:420px}
  .imagen img{max-height:240px;object-fit:contain;filter:none}
}
@media(max-width:374px){ .eyebrow-largo{display:none} .eyebrow-corto{display:inline} }

/* ── Cómo funciona (C): pasos alternados ───────────────────────────────────── */
.pasos{display:flex;flex-direction:column;gap:96px}
.paso{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}
.paso:nth-child(even){grid-template-columns:7fr 5fr}
.paso:nth-child(even) .lado{order:2}
.paso .lado{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.paso .texto{max-width:44ch}
.paso .visual{min-width:0}
.paso.fin .lado h3{font-size:40px;max-width:none}
@media(max-width:959px){
  .pasos{gap:64px}
  .paso,.paso:nth-child(even){grid-template-columns:1fr;gap:24px}
  .paso:nth-child(even) .lado{order:0}
  .paso.fin .lado h3{font-size:32px}
}

/* 01: así te entendí */
.perfil{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:16px;overflow:hidden;align-items:center}
.perfil img{width:96px;height:96px;object-fit:cover;border-radius:50%;border:3px solid var(--tinta);background:#fff}
.perfil .arroba{font-family:var(--mono);font-weight:600;font-size:15px}
.perfil .bio{font-size:15px;color:var(--gris);margin-top:4px;line-height:1.45}
.hallazgos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.mu{width:38px;height:38px;border-radius:10px 12px 9px 13px;border:2px dashed rgba(23,21,15,.55);box-shadow:0 2px 0 rgba(23,21,15,.18)}
.hallazgo{font-family:var(--mono);font-size:12px;font-weight:600;padding:8px 12px;background:var(--tinta);color:var(--crema);
          border-radius:10px 12px 9px 13px;letter-spacing:.04em}
.acciones{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.acciones .mono{font-size:12px}
.si-soy-yo{margin-top:14px}

/* 02: tres propuestas (C3) y 03: piezas (C4) — carrusel en móvil */
.vistas{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:12px}
.vista{position:relative;margin:0;border:3px solid var(--tinta);border-radius:12px;overflow:hidden;background:#fff}
.vista img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.vista figcaption{position:relative;z-index:3;background:#fff;padding:8px 10px;border-top:2px solid var(--tinta);font-size:15px;line-height:1.3;
                  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.vista figcaption b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-bottom:2px}
.vista .sello{position:absolute;right:-8px;top:-10px;background:var(--ambar);color:#2B1C02;font-family:var(--mono);font-weight:600;font-size:12px;
              letter-spacing:.14em;padding:6px 10px;border:2px solid var(--tinta);border-radius:8px;transform:rotate(-8deg);z-index:4}
.vista.elegida{outline:3px solid var(--naranja);outline-offset:2px}
.marcada::after{content:"PubliCOW® · PubliCOW® · PubliCOW® · PubliCOW® · PubliCOW® · PubliCOW® · PubliCOW® · PubliCOW® · PubliCOW® · PubliCOW® · PubliCOW® · PubliCOW®";
  position:absolute;left:-60%;right:-60%;top:-30%;height:200%;transform:rotate(-28deg);font-family:var(--dis);font-weight:900;font-size:clamp(12px,1.4vw,17px);
  line-height:2.6;color:rgba(255,255,255,.55);text-shadow:0 1px 2px rgba(0,0,0,.35);text-align:center;word-spacing:.5em;pointer-events:none;z-index:2}

.ejemplo-sello{position:absolute;left:8px;top:8px;z-index:4;background:var(--tinta);color:var(--ambar);font-family:var(--mono);font-weight:600;font-size:12px;
               letter-spacing:.1em;padding:4px 8px;border-radius:4px}
.puntos{display:none;justify-content:center;gap:8px;margin-top:12px}
.puntos i{width:8px;height:8px;border-radius:50%;background:rgba(23,21,15,.3)}
.puntos i.activo{background:var(--naranja)}
.taller{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:end}
.maquina{padding:14px;display:flex;flex-direction:column;gap:8px;z-index:3;position:relative}
.placa{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;line-height:1.35;color:var(--ambar);
       border:1.5px solid rgba(255,168,30,.6);padding:7px 8px;border-radius:4px;position:relative}
.placa::before,.placa::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:var(--ambar);top:3px}
.placa::before{left:3px}.placa::after{right:3px}
.boca{height:26px;background:#000;border-radius:4px;overflow:hidden;position:relative;margin-top:6px}
.boca span{position:absolute;white-space:nowrap;left:0;top:5px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:rgba(249,240,231,.35);
           animation:tira 9s linear infinite}
@keyframes tira{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.salida{display:flex;gap:12px;align-items:flex-end;position:relative;z-index:2}
.pieza{margin:0;flex:1 1 0;min-width:0;max-width:160px;border:3px solid var(--tinta);border-radius:10px;overflow:hidden;background:#fff;position:relative;
       box-shadow:0 3px 0 rgba(23,21,15,.2)}
.pieza img{width:100%;height:auto}
.pieza.reel img{animation:reel 7s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes reel{from{transform:scale(1)}to{transform:scale(1.12)}}
.pieza .tipo{position:absolute;left:6px;bottom:6px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
             background:var(--tinta);color:var(--crema);padding:3px 6px;border-radius:4px;z-index:3}
@media(max-width:959px){
  .vistas,.salida{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 20px 8px;margin:0 -20px;scrollbar-width:none}
  .vistas::-webkit-scrollbar,.salida::-webkit-scrollbar{display:none}
  .vista{flex:0 0 min(78vw,320px);scroll-snap-align:center}
  .pieza{flex:0 0 58vw;max-width:none;scroll-snap-align:center}
  .puntos{display:flex}
  .taller{grid-template-columns:1fr;gap:12px}
  .maquina{flex-direction:row;flex-wrap:wrap;align-items:center}
  .maquina .placa{flex:1 1 auto}
  .maquina .boca{width:100%}
}

/* 04: chat */
.chat{display:flex;flex-direction:column;gap:10px;max-width:460px;margin:0 auto}
.burbuja{padding:12px 15px;border-radius:16px;font-size:16px;line-height:1.45;max-width:86%}
.burbuja.cliente{align-self:flex-end;background:var(--burbuja);color:var(--burbuja-texto);border-bottom-right-radius:4px}
.burbuja.pc{align-self:flex-start;background:#fff;border:2px solid var(--tinta);border-bottom-left-radius:4px}
.burbuja .mini{width:168px;height:auto;aspect-ratio:4/5;object-fit:cover;margin-top:8px;border-radius:8px;border:2px solid var(--tinta)}
.burbuja small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gris);margin-bottom:4px;text-transform:uppercase}

/* 05: calendario */
.calendario{padding:22px 22px 26px;max-width:360px;min-height:150px}
.calendario .dia{font-family:var(--dis);font-weight:900;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;line-height:1}
.calendario .hora{font-family:var(--mono);font-weight:600;font-size:16px;margin-top:6px}
.calendario .redes{font-family:var(--mono);font-size:12px;letter-spacing:.08em;margin-top:14px;color:var(--gris);text-transform:uppercase}
.sello-prog{position:absolute;right:14px;bottom:14px;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.16em;color:var(--listo);
            border:3px solid var(--listo);padding:6px 9px;border-radius:6px;transform:rotate(-10deg);text-transform:uppercase}

/* ── Precio (D1) ───────────────────────────────────────────────────────────── */
.precio{display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:start}
.etiqueta-precio{position:relative;width:200px;padding:44px 16px 20px;text-align:center;transform-origin:50% -20px;animation:cuelga 5s ease-in-out infinite}
.etiqueta-precio::before{content:"";position:absolute;top:12px;left:50%;width:14px;height:14px;border-radius:50%;background:var(--crema);border:3px solid var(--tinta);transform:translateX(-50%)}
.etiqueta-precio .mono{font-size:12px;color:#2B1C02;margin-top:6px}
.etiqueta-precio hr{border:0;border-top:2px dashed rgba(23,21,15,.35);margin:14px 0}
.etiqueta-precio .p2{font-family:var(--dis);font-weight:900;font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@keyframes cuelga{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.condiciones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.condiciones li{padding:14px 0;border-bottom:1px dashed rgba(23,21,15,.3);font-size:17px;line-height:1.5;max-width:60ch}
.condiciones li:first-child{padding-top:0}
.condiciones b{font-weight:600}
.precio-boton{margin-top:32px}
@media(max-width:679px){
  .precio{grid-template-columns:1fr;gap:32px;justify-items:center}
  .condiciones{width:100%}
  .condiciones li{font-size:16px}
}

/* ── Confianza (E) ─────────────────────────────────────────────────────────── */
.bloque{display:flex;flex-direction:column;gap:20px;align-items:flex-start;margin-top:80px}
.bloque:first-of-type{margin-top:0}
.bloque h2{max-width:24ch;text-wrap:balance}
.detras{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
.detras img{width:120px;height:120px;border-radius:50%;border:3px solid var(--tinta);object-fit:cover;background:#fff}
.ejemplos{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:12px}
.ejemplos .vista figcaption{font-size:15px}
.promesas{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:760px;width:100%}
.promesas .placa{color:var(--tinta);border-color:rgba(23,21,15,.5);font-size:13px;padding:11px 14px;background:#fff}
.promesas .placa::before,.promesas .placa::after{background:var(--tinta)}
@media(max-width:959px){
  .detras{grid-template-columns:1fr}
  .promesas{grid-template-columns:1fr}
  /* align-self: el .bloque alinea a la izquierda y el carrusel crecía a 977 px en vez de desplazarse (2026-09-13) */
  .ejemplos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 8px;margin:0 -20px;scrollbar-width:none;align-self:stretch}
  .ejemplos .vista{flex:0 0 min(78vw,320px);scroll-snap-align:center}
}

/* ── Preguntas (F1) ────────────────────────────────────────────────────────── */
.preguntas{display:flex;flex-direction:column;max-width:760px;width:100%;border-top:2px solid var(--tinta)}
.preguntas details{border-bottom:2px solid var(--tinta)}
.preguntas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;
                   font-family:var(--dis);font-weight:900;font-size:17px;line-height:1.3}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"";width:16px;height:16px;flex:0 0 auto;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2l6 6-6 6' fill='none' stroke='%2317150F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                          transition:transform .15s}
.preguntas details[open] summary::after{transform:rotate(90deg)}
.preguntas .texto{font-size:17px;padding:0 0 20px;max-width:60ch}

/* ── Cierre (G1) ───────────────────────────────────────────────────────────── */
.cierre{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;padding-bottom:80px}
.cierre h2{max-width:20ch;text-wrap:balance}
.cierre .botones{justify-content:center}
.cierre .clara{text-align:center}

/* ── Pie (G2) ──────────────────────────────────────────────────────────────── */
footer.pie{max-width:1180px;margin:0 auto;padding:64px 24px calc(48px + 80px);display:flex;flex-direction:column;gap:32px;font-size:15px;line-height:1.55}
.pie .columnas{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.pie h3{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-bottom:10px}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pie a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.pie .wm{margin-bottom:12px}
.pie .final{border-top:1px dashed rgba(23,21,15,.3);padding-top:20px;color:var(--gris)}
@media(max-width:959px){
  .cierre{padding-bottom:88px}
  footer.pie{padding:56px 20px calc(40px + 88px)}
  .pie .columnas{grid-template-columns:1fr}
}
@media(max-width:959px){ .seccion{padding-bottom:0} }

/* ── Panel de COWBB (H1) ───────────────────────────────────────────────────── */
.fondo-panel{position:fixed;inset:0;z-index:70;background:rgba(23,21,15,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.vivo-panel{position:relative;width:100%;max-width:720px;max-height:90vh;overflow:hidden;background:var(--crema);color:var(--tinta);
            border:3px solid var(--tinta);border-radius:22px 26px 18px 28px / 24px 20px 26px 22px;outline:2px dashed var(--naranja);outline-offset:-10px;
            padding:26px 28px 32px;display:flex;flex-direction:column;gap:18px;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.vp-cabeza{display:flex;align-items:center;gap:14px}
.vp-cara{position:relative;width:64px;height:64px;flex:0 0 auto}
.vp-cara img{width:64px;height:64px;border-radius:50%;border:3px solid var(--tinta);object-fit:cover;background:#fff}
.vp-puntos{position:absolute;right:-10px;top:-4px;display:none;gap:4px}
.pensando .vp-puntos{display:flex}
.vp-puntos i{width:9px;height:9px;border-radius:50%;background:var(--naranja);animation:vp-puntos 1.2s infinite ease-in-out}
.vp-puntos i:nth-child(2){animation-delay:.2s}.vp-puntos i:nth-child(3){animation-delay:.4s}
@keyframes vp-puntos{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-7px);opacity:1}}
.pensando .vp-cara img{animation:vp-mece 1.6s ease-in-out infinite alternate}
@keyframes vp-mece{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.vp-estado{font-family:var(--dis);font-weight:900;font-size:22px;line-height:1.2;letter-spacing:-.01em;flex:1;min-width:0;margin:0}
.vp-cerrar{margin-left:auto;flex:0 0 auto}
.vp-pasos{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.vp-pasos span.actual{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--naranja);text-decoration-thickness:3px;text-underline-offset:4px}
/* Solo el cuerpo se desplaza: COWBB y los pasos quedan fijos y el contenido no cruza la costura (2026-09-13). */
.vp-cuerpo{display:flex;flex-direction:column;gap:16px;overflow-x:hidden;overflow-y:auto;min-height:0;flex:1 1 auto;margin:-6px -12px 0;padding:6px 12px 8px}
.vp-form{display:flex;flex-direction:column;gap:14px;align-items:flex-start;width:100%}
.vp-form .parche{align-self:flex-start}
.vp-lineas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:17px}
.vp-lineas li{color:var(--gris);display:flex;gap:10px;align-items:baseline}
.vp-lineas li::before{content:"○";font-family:var(--mono);color:rgba(23,21,15,.4)}
.vp-lineas li.hecha{color:var(--tinta)}
.vp-lineas li.hecha::before{content:"✓";color:var(--listo)}
.vp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vp-grid figure{margin:0;border:3px solid var(--tinta);border-radius:12px;overflow:hidden;background:#fff;position:relative;display:flex;flex-direction:column}
.vp-grid figure.elegida{outline:3px solid var(--naranja);outline-offset:2px}
.vp-grid img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.vp-grid figcaption{padding:8px 10px;font-size:15px;line-height:1.3;border-top:2px solid var(--tinta);display:flex;flex-direction:column;gap:8px;flex:1}
.vp-grid figcaption b{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.vp-grid figcaption .vp-idea{font-size:13.5px;line-height:1.35;color:var(--gris)}
.vp-grid figcaption .vp-idea:empty{display:none}
.vp-grid figcaption .parche,.vp-grid figcaption .liga{margin-top:auto;width:100%;justify-content:center}
.vp-grid figcaption .motivo{font-size:14px;color:var(--error);line-height:1.35}
.vp-grid .tipo{position:absolute;left:8px;top:8px;z-index:3;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
               background:var(--tinta);color:var(--crema);padding:3px 6px;border-radius:4px}
.vp-adn{display:flex;flex-direction:column;gap:14px}
.vp-adn .perfil img[src=""]{visibility:hidden}
.vp-nota{font-size:15px;color:var(--gris);line-height:1.5}
.vp-fotos{display:flex;flex-direction:column;gap:8px}
.vp-fotos>div{display:flex;gap:10px;flex-wrap:wrap}
.vp-fotos img{width:88px;aspect-ratio:4/5;object-fit:cover;border-radius:12px;border:3px solid var(--tinta);background:#fff}
.vp-trabajando{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0 2px}
.vp-trabajando video,.vp-trabajando img{width:100%;max-width:600px;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:#E3D9CC;
                 border-radius:18px 22px 16px 24px;border:3px solid var(--tinta)}
.vp-trabajando figcaption{text-align:center}
.vp-reloj{font-size:15px;line-height:1.5;color:var(--gris)}
.vp-reloj b{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--tinta);font-variant-numeric:tabular-nums}
.vp-opcional{border:2px dashed rgba(23,21,15,.35);border-radius:14px 18px 12px 20px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.vp-opcional>b{font-weight:600;font-size:17px;line-height:1.35}
.vp-tarjeta{padding:18px 20px;font-size:17px;line-height:1.5;display:flex;flex-direction:column;gap:6px}
.vp-tarjeta b{font-weight:600}
.vp-liga-copiar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%}
.vp-liga-copiar input{flex:1;min-width:200px}
.vp-candado{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--gris)}
.vp-candado svg{width:16px;height:16px}
.vp-conexion{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vp-cuenta{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--listo)}
.vp-cuenta::before{content:"✓ "}
.pantalla-movil .vp-cabeza-fija{display:none}
@media(max-width:959px){
  .fondo-panel{padding:0;align-items:stretch}
  .vivo-panel{max-width:none;max-height:none;height:100%;border:0;border-radius:0;outline:0;padding:0 20px 32px;gap:14px}
  .vp-cabeza{position:sticky;top:0;z-index:5;background:var(--crema);padding:12px 0;margin:0 -20px;padding-left:20px;padding-right:20px;
             border-bottom:1px solid rgba(23,21,15,.12)}
  .vp-cara,.vp-cara img{width:40px;height:40px}
  .vp-cara img{border-width:2px}
  .vp-estado{font-size:19px}
  .vp-cerrar{height:40px;padding:0 14px;font-size:13px}
  .vp-cuerpo{margin:0 -20px;padding:0 20px 8px}      /* los carruseles (.vp-grid) salen 20 px: mismo margen */
  .vp-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:4px 20px 8px;scrollbar-width:none}
  .vp-grid::-webkit-scrollbar{display:none}
  .vp-grid figure{flex:0 0 82vw;scroll-snap-align:center}
}

/* ── Movimiento (I5, C8): el reposo es visible; la clase la pone el JS ──────── */
.oculto{opacity:0;transform:translateY(24px)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .oculto{opacity:1;transform:none}
  .etiqueta-precio,.pieza.reel img,.boca span,.pensando .vp-cara img,.vp-puntos i,.barra .cara{animation:none}
  *{transition:none!important}
}

/* ── Páginas legales y 404 (J2, J3) ─────────────────────────────────────────── */
.legal{max-width:760px;margin:0 auto;padding:calc(var(--header) + 40px) 24px 80px;display:flex;flex-direction:column;gap:20px;font-size:17px;line-height:1.6}
.legal h1{font-size:44px;line-height:1.05;text-transform:none;letter-spacing:-.02em;max-width:none}
.legal h2{font-size:26px;margin-top:20px}
.legal h3{font-size:20px;margin-top:8px;max-width:none}
.legal p,.legal li{max-width:65ch}
.legal ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.legal a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.legal .clara{font-size:15px}
.no-existe{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;padding:calc(var(--header) + 40px) 24px 80px}
.no-existe img{width:160px;height:160px;border-radius:50%;border:3px solid var(--tinta)}
@media(max-width:959px){ .legal h1{font-size:32px} .legal h2{font-size:22px} }
.revela{transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
@keyframes brinco{0%{transform:translateY(0) scale(1)}18%{transform:translateY(4px) scale(1.12,.84)}
  48%{transform:translateY(-30px) scale(.9,1.1) rotate(-7deg)}72%{transform:translateY(0) scale(1.08,.92) rotate(3deg)}100%{transform:translateY(0) scale(1)}}