/* ==========================================================================
   Portada (index.html). Se carga despues de nova.css y solo en la portada:
   las demas paginas no cambian. Usa los mismos tokens de nova.css (azul del
   logo, azul marino, Sora + IBM Plex Sans) para que el sitio hable igual.
   El ancho, las secciones (.sec), los titulos (.sec-head), los iconos (.ico),
   la banda final (.cierre) y el pie son los de nova.css.
   ========================================================================== */

.inicio{--in-gap:18px;--in-pad:24px}
/* Los enlaces internos (#cotiza, #preguntas...) no quedan debajo de la barra fija. */
.inicio [id]{scroll-margin-top:100px}

/* ---- Portada ---- */
.in-hero{padding:64px 0 72px}
.in-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.in-hero h1{font-size:clamp(2.1rem,4vw,3.15rem)}
.in-garantias{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.in-garantias li{display:inline-flex;align-items:center;gap:8px;font-size:.87rem;color:var(--ink-2)}
.in-garantias svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--apto);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* En escritorio el formulario esta al lado: el boton que baja a el sobra. */
@media (min-width:981px){
  .in-solo-movil{display:none}
}

/* ---- Formulario: una sola pantalla que abre WhatsApp ---- */
.in-form{max-width:none;margin:0;padding:28px}
.in-form-cab{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.in-form-cab h2{font-size:1.3rem;line-height:1.2;margin:0 0 5px}
.in-form-cab p{font-size:.86rem;color:var(--muted)}
.in-pregunta{font-size:.94rem;margin-bottom:15px}
.in-opcional{color:var(--muted)}
/* El caso elegido se queda marcado */
.in-form .opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-50);box-shadow:inset 0 0 0 1px var(--blue)}
.in-form .fields{margin-top:18px}
/* Lo que falta se avisa aqui mismo, no en una ventana del navegador */
.in-form-aviso{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:.85rem;
  background:var(--reserva-bg);border:1px solid rgba(180,83,9,.25);color:var(--reserva)}
.in-form-aviso[hidden]{display:none}
.in-form-enviar{width:100%;margin-top:18px}
.in-form-legal{margin:14px 0 0;font-size:.78rem;line-height:1.5;color:var(--muted)}
.in-form-legal a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

/* Tarjeta base: borde suave y las mismas esquinas que las de las interiores */
.in-paso,.in-etapa{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)}

/* ---- Como funciona ---- */
.in-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--in-gap)}
.in-paso{display:flex;flex-direction:column;gap:10px;padding:var(--in-pad)}
.in-paso-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-family:var(--display);font-weight:700;font-size:.95rem}
.in-paso h3{font-size:1.06rem;line-height:1.3;margin-top:4px}
.in-paso p{font-size:.9rem;color:var(--ink-2)}
/* Bloque de la plataforma (22 oct 2026): el titulo y el texto van a la izquierda (Alfredo); solo los botones centrados. */
.in-plataforma .sec-head strong{color:var(--ink,#0b1b3a);font-weight:700}
.in-pasos-cta{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem}

/* ---- Que verificamos ---- */
.in-etapas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--in-gap)}
.in-etapa{display:flex;flex-direction:column;gap:8px;padding:var(--in-pad)}
.in-etapa h3{font-size:1rem;margin-top:8px}

/* ---- Resenas ---- */
.in-resenas{margin-top:var(--in-gap);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--in-gap);align-items:stretch}
.in-resenas-txt{grid-column:1 / -1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;
  padding:var(--in-pad);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)}
.in-resenas-txt h3{font-size:1.15rem;line-height:1.3}
.in-resenas-txt .resenas-resumen{margin:0}
.in-resena{display:flex;flex-direction:column;width:auto;max-width:none;margin:0;flex:none;border-radius:var(--r-lg)}
.in-resena .resena-texto{flex:1 1 auto}

/* ---- Preguntas ---- */
.in-faq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.in-faq-txt h2{font-size:clamp(1.65rem,2.8vw,2.2rem);line-height:1.16;margin:13px 0}
.in-faq-lista{border-top:1px solid var(--line)}
.in-faq-lista .q-a{padding-right:44px}

/* ---- Pantallas medianas y telefonos ---- */
@media (max-width:1100px){
  .in-etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .in-hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .in-faq{grid-template-columns:minmax(0,1fr);gap:36px}
  .in-resenas{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .in-pasos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .inicio{--in-pad:20px}
  .in-hero{padding:44px 0 52px}
  .inicio main .hero-cta .btn{flex:1 1 auto}
  .in-form{padding:20px}
  .in-faq-lista .q-a{padding-right:0}
}
@media (max-width:360px){
  .in-form{padding:16px}
}

/* En celular la portada va al grano: de las resenas queda una, y las etapas
   (solo icono y titulo) caben de dos en dos para que la seccion no se alargue. */
@media (max-width:600px){
  .in-etapa{padding-top:14px;padding-bottom:14px}
  .in-resena:nth-of-type(n+2){display:none}
  .in-etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:330px){
  .in-etapas{grid-template-columns:minmax(0,1fr)}
}

/* Tarjetas del mismo tipo, del mismo alto en cualquier ancho. */
.in-etapas{grid-auto-rows:1fr}
.in-etapa{height:100%}