/* =========================================================
   Triax v3 :: Servicio de creación de webs
   Componentes extra en el mismo tema oscuro de styles.css
   ========================================================= */

/* hero corto para páginas internas */
.shero{position:relative;z-index:2;padding:70px 0 40px;text-align:center}
.shero .eyebrow{margin-bottom:14px}
.shero h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800;letter-spacing:-.5px;max-width:20ch;margin:0 auto;text-wrap:balance}
.shero .lead{font-size:1.16rem;color:var(--muted);max-width:58ch;margin:20px auto 24px}
.pricetag{display:inline-flex;align-items:baseline;gap:10px;background:rgba(2,8,23,.55);border:1px solid var(--line-strong);border-radius:999px;padding:9px 20px}
.pricetag b{font-family:var(--font-head);font-weight:800;font-size:1.35rem;color:var(--white)}
.pricetag span{color:var(--muted);font-size:.9rem}
.trustrow{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:24px 0 0;padding:0}
.trustrow li{position:relative;padding-left:24px;font-weight:600;font-size:.92rem;color:var(--text)}
.trustrow li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:800}

/* grupos + grilla de modelos */
.group-head{display:flex;align-items:baseline;gap:14px;margin:0 0 22px;flex-wrap:wrap}
.group-head h2{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800}
.group-head p{color:var(--muted);font-size:1rem}
.models{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.model{display:block;background:var(--panel);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .2s,box-shadow .2s}
.model:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.model .cover{height:150px;position:relative;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.model .cover .nm{font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:#fff;padding:14px 16px;text-shadow:0 2px 12px rgba(0,0,0,.7);z-index:2}
.model .body{padding:14px 18px 18px}
.model .tagline{display:block;font-size:.84rem;color:var(--muted);margin-bottom:10px}
.model .open{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--cyan)}
.model .open svg{width:15px;height:15px;fill:currentColor;transition:transform .18s}
.model:hover .open svg{transform:translateX(3px)}

/* nota referencia / mix */
.gal-note{max-width:880px;margin:0 auto;background:linear-gradient(135deg,rgba(20,85,192,.22),var(--panel));border:1px solid var(--line-strong);border-radius:var(--radius);padding:28px 30px;text-align:center}
.gal-note h3{font-size:1.25rem;margin-bottom:8px}
.gal-note p{color:var(--muted);max-width:62ch;margin:0 auto 16px}

/* comparación no-plantillas */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.cmp{border-radius:var(--radius);padding:28px 26px;border:1px solid var(--line);background:var(--panel)}
.cmp h3{font-size:1.12rem;margin-bottom:16px}
.cmp ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.cmp li{position:relative;padding-left:28px;font-size:.98rem;color:var(--muted)}
.cmp-bad li::before{content:"✕";position:absolute;left:2px;color:#FF6B6B;font-weight:700}
.cmp-good{border-color:var(--line-strong);background:linear-gradient(135deg,rgba(20,85,192,.22),var(--panel))}
.cmp-good li{color:var(--text)}
.cmp-good li::before{content:"✓";position:absolute;left:2px;color:var(--cyan);font-weight:800}

/* qué incluye */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 28px;max-width:900px;margin:0 auto}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat-ck{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(77,159,255,.14);border:1px solid var(--line-strong);color:var(--cyan);display:flex;align-items:center;justify-content:center;font-weight:700;margin-top:2px}
.feat strong{font-family:var(--font-head);color:var(--white);display:block;margin-bottom:3px}
.feat p{color:var(--muted);font-size:.96rem}

/* value stack */
.vstack{max-width:680px;margin:0 auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.vrow{display:flex;justify-content:space-between;gap:14px;padding:14px 26px;border-bottom:1px dashed var(--line);font-size:1rem}
.vrow span{color:var(--muted)}
.vrow b{font-family:var(--font-head);color:var(--text);white-space:nowrap}
.vsub{display:flex;justify-content:space-between;padding:15px 26px;background:rgba(2,8,23,.4);font-weight:600;color:var(--muted)}
.vsub .old{text-decoration:line-through;color:#FF8B8B}
.vtotal{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px;background:linear-gradient(135deg,var(--blue-deep),#0a3a8c);text-align:center}
.vtotal .vlbl{font-size:.82rem;color:rgba(255,255,255,.8);letter-spacing:.06em;text-transform:uppercase}
.vtotal .amt{font-family:var(--font-head);font-weight:800;font-size:2.8rem;line-height:1;color:#fff}
.vtotal .amt small{font-size:1rem;color:var(--cyan)}
.vtotal .note{font-size:.86rem;color:rgba(255,255,255,.82)}

/* garantía */
.guarantee{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.g-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:center;box-shadow:var(--shadow-sm)}
.g-item .g-ic{font-size:2rem;display:block;margin-bottom:10px}
.g-item h3{font-size:1.1rem;margin-bottom:6px}
.g-item p{color:var(--muted);font-size:.93rem}

/* pasos numerados (vertical, distinto al de proceso del home) */
.flow{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.flow-step{display:flex;gap:18px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.flow-step .fn{flex:none;width:44px;height:44px;border-radius:12px;background:var(--bg1);border:2px solid var(--line-strong);color:var(--cyan);font-family:var(--font-head);font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.flow-step h3{font-size:1.12rem;margin-bottom:4px}
.flow-step p{color:var(--muted);font-size:.98rem}
.flow-note{max-width:760px;margin:18px auto 0;text-align:center;color:var(--muted);font-size:.95rem;background:rgba(2,8,23,.4);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px}

/* precio (card) */
.pricing{max-width:520px;margin:0 auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);padding:34px 30px;text-align:center;box-shadow:var(--shadow)}
.pricing .pa-anchor{color:var(--muted);font-size:.95rem;margin-bottom:4px}
.pricing .pa-anchor s{color:#FF8B8B;font-weight:600}
.pricing .pa-big{font-family:var(--font-head);font-weight:800;font-size:3rem;color:var(--white);line-height:1}
.pricing .pa-tax{color:var(--muted);font-weight:600;font-size:1.05rem}
.pricing .pa-sub{color:var(--muted);font-size:.92rem;margin-top:6px}
.pricing ul{list-style:none;text-align:left;max-width:380px;margin:22px auto;display:flex;flex-direction:column;gap:10px}
.pricing li{position:relative;padding-left:28px;color:var(--text);font-size:.98rem}
.pricing li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:800}

/* CTA final ancho */
.cta-wide{text-align:center;background:linear-gradient(135deg,var(--blue-deep),#0a3a8c);border-radius:var(--radius);padding:60px 28px;box-shadow:var(--shadow)}
.cta-wide h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.cta-wide p{color:rgba(255,255,255,.85);margin:12px 0 24px;font-size:1.1rem}

/* tally */
.tally-wrap{max-width:780px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm)}
.tally-embed{width:100%;border:0;min-height:1000px;border-radius:10px;background:#fff}
.tally-fallback{text-align:center;color:var(--muted);font-size:.92rem;margin-top:12px}
.tally-fallback a{color:var(--cyan);font-weight:600}

@media (max-width:980px){.models{grid-template-columns:repeat(2,1fr)}.guarantee{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.web-promo,.compare,.features{grid-template-columns:1fr}}
@media (max-width:520px){.models{grid-template-columns:1fr}.guarantee{grid-template-columns:1fr}}

/* === Mejoras CRO (auditoría jun 2026) === */
/* línea de autoridad bajo el hero */
.shero-auth{max-width:54ch;margin:16px auto 0;color:var(--muted);font-size:.95rem;line-height:1.6}
.shero-auth strong{color:var(--text)}

/* precio como acento coral */
.pricetag b{color:var(--coral-soft)}
.vtotal .amt{color:var(--coral-soft)}
.vtotal .amt small{color:rgba(255,255,255,.85)}

/* barra CTA fija en móvil */
.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{
    display:flex;align-items:center;justify-content:center;gap:9px;
    position:fixed;left:12px;right:12px;bottom:12px;z-index:70;
    background:var(--red);color:#fff;font-family:var(--font-head);font-weight:800;
    font-size:1rem;padding:15px 18px;border-radius:14px;
    box-shadow:0 12px 30px rgba(255,77,61,.42);
  }
  .sticky-cta svg{width:20px;height:20px;fill:#fff}
  .wa-float{bottom:86px}
  main{padding-bottom:84px}
}

/* hover states (pulido estilo agencia) */
.feat{transition:transform .16s ease}
.feat:hover{transform:translateY(-2px)}
.flow-step{transition:transform .16s ease,border-color .2s ease,box-shadow .2s ease}
.flow-step:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.g-item{transition:transform .16s ease,border-color .2s ease,box-shadow .2s ease}
.g-item:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.cmp-good{transition:transform .18s ease}
.cmp-good:hover{transform:translateY(-3px)}