/* Portada: hero, carrusel de soluciones y vista ilustrativa. Spec 077.
   CSS plano sobre los tokens de app/plantillas/design-tokens.php (var(--navy),
   var(--navy2), var(--cyan)). Colores sólidos: nada de degradados. */

/* ── Hero: captura de escritorio con la de celular encima ─────────────────── */
.hero-visual{ position:relative; padding:0 0 36px; }
.hero-pantalla{ border:1px solid #dbe4ee; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 30px 70px -40px rgba(8,33,69,.45); }
.hero-pantalla img{ display:block; width:100%; height:auto; }
.hero-celular{ position:absolute; right:4%; bottom:0; width:24%; min-width:84px; border:4px solid var(--navy); border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 24px 40px -22px rgba(8,33,69,.6); }
.hero-celular img{ display:block; width:100%; height:auto; }

.hero-confianza{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.8125rem; color:#475569; }
.hero-confianza li{ display:flex; align-items:center; gap:7px; }
.hero-confianza li::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); flex-shrink:0; }

/* ── El dolor ─────────────────────────────────────────────────────────────── */
.dolor-lista{ display:grid; gap:14px; }
@media (min-width:768px){ .dolor-lista{ grid-template-columns:1fr 1fr; } }
.dolor-lista li{ border:1px solid #e2e8f0; border-radius:14px; padding:18px 20px; background:#fff; color:#334155; line-height:1.55; }

/* ── Carrusel ─────────────────────────────────────────────────────────────── */
.car-cabecera{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.car-flechas{ display:flex; gap:8px; flex-shrink:0; }
.car-flechas button{ width:44px; height:44px; border-radius:50%; border:1px solid #cbd5e1; background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; transition:border-color .2s; }
.car-flechas button:hover{ border-color:var(--navy); }
.car-flechas button:disabled{ opacity:.35; cursor:default; }
.car-flechas[hidden], .car-indicadores[hidden]{ display:none; }

.car-pista{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 18px; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.car-pista:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px; border-radius:16px; }

.car-tarjeta{ flex:0 0 88%; min-width:0; scroll-snap-align:start; display:flex; flex-direction:column; border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; background:#fff; transition:border-color .2s; }
.car-tarjeta:hover{ border-color:#a7b8cd; }
/* Con dos tarjetas a la vista, un hueco al final deja que la última llegue al
   borde izquierdo: si no, su indicador compartía posición con el penúltimo y
   no se encendía nunca. */
@media (min-width:768px){
  .car-tarjeta{ flex-basis:calc(50% - 10px); }
  .car-pista::after{ content:''; flex:0 0 calc(50% - 30px); }
}

.car-visual{ position:relative; background:#eef3f8; border-bottom:1px solid #e2e8f0; padding:18px 18px 0; aspect-ratio:16/11; overflow:hidden; }
.car-visual .car-pc{ display:block; width:100%; height:auto; border-radius:8px 8px 0 0; border:1px solid #dbe4ee; border-bottom:0; }
.car-visual .car-movil{ position:absolute; right:14px; bottom:0; width:22%; height:auto; border:3px solid var(--navy); border-bottom:0; border-radius:12px 12px 0 0; background:#fff; }

/* Una solución sin demo propia: nunca la captura de otro sistema (caso límite). */
.car-ilustrativa{ display:flex; flex-direction:column; justify-content:flex-end; }
.car-maqueta{ flex:1; display:grid; grid-template-columns:22% 1fr; gap:10px; background:#fff; border:1px solid #dbe4ee; border-bottom:0; border-radius:8px 8px 0 0; padding:12px; }
.car-maqueta-lado{ background:var(--navy); border-radius:6px; }
.car-maqueta-cuerpo{ display:grid; grid-template-rows:auto auto 1fr; gap:8px; }
.car-maqueta-cuerpo i{ display:block; height:10px; border-radius:4px; background:#e2e8f0; }
.car-maqueta-cuerpo i:first-child{ width:45%; height:14px; background:#cbd5e1; }
.car-maqueta-rejilla{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.car-maqueta-rejilla b{ display:block; border-radius:6px; background:#eef3f8; border:1px solid #e2e8f0; min-height:38px; }
.car-rotulo{ position:absolute; left:18px; top:18px; font-size:.6875rem; font-weight:600; color:#475569; background:#fff; border:1px solid #dbe4ee; border-radius:6px; padding:4px 8px; }

.car-texto{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.car-meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#64748b; }
.car-etiqueta{ text-transform:none; letter-spacing:0; color:var(--navy2); background:#e9f8fb; border-radius:4px; padding:3px 8px; }
.car-texto h3{ margin-top:12px; font-size:1.25rem; line-height:1.3; font-weight:600; color:var(--navy); }
.car-texto p{ margin-top:8px; font-size:.9375rem; line-height:1.6; color:#475569; }
.car-enlace{ margin-top:auto; padding-top:18px; font-size:.875rem; font-weight:600; color:var(--navy2); }
.car-enlace:hover{ color:var(--navy); }

.car-pie{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:8px; }
.car-indicadores{ display:flex; gap:2px; }
.car-indicadores button{ padding:12px 5px; }
.car-indicadores button::after{ content:''; display:block; width:8px; height:8px; border-radius:8px; background:#cbd5e1; transition:width .2s; }
.car-indicadores button[aria-current="true"]::after{ width:26px; background:var(--navy); }

/* ── A medida ──────────────────────────────────────────────────────────────── */
.medida-lista{ display:grid; gap:14px; }
@media (min-width:768px){ .medida-lista{ grid-template-columns:repeat(3,1fr); gap:20px; } }
.medida-lista li{ border:1px solid #e2e8f0; border-top:3px solid var(--cyan); border-radius:14px; padding:22px 22px 24px; background:#fff; }
.medida-lista h3{ font-size:1.125rem; line-height:1.3; font-weight:600; color:var(--navy); }
.medida-lista p{ margin-top:8px; font-size:.9375rem; line-height:1.6; color:#475569; }

/* ── Cómo trabajamos: tres pasos numerados por CSS ────────────────────────── */
.proceso-pasos{ counter-reset:paso; display:grid; gap:14px; }
.proceso-pasos li{ counter-increment:paso; position:relative; border:1px solid #e2e8f0; border-radius:14px; padding:20px 22px 22px 70px; background:#fff; }
.proceso-pasos li::before{ content:counter(paso); position:absolute; left:22px; top:20px; width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; font-weight:600; font-size:.875rem; display:flex; align-items:center; justify-content:center; }
.proceso-pasos h3{ font-size:1.125rem; line-height:1.3; font-weight:600; color:var(--navy); }
.proceso-pasos p{ margin-top:6px; font-size:.9375rem; line-height:1.6; color:#475569; }

@media (prefers-reduced-motion:reduce){
  .car-indicadores button::after{ transition:none; }
}