/* =====================================================================
   PÁGINA PRINCIPAL DE LA WEB DE CLIENTES FINALES (index)  -  entrega 309
   Para cambiar colores o tamaños, toca SOLO estas variables.
   ===================================================================== */
:root{
  --h9-tinta:  #1d2a3a;        /* textos y franja oscura                    */
  --h9-azul:   #3f6fa8;        /* botones y títulos                         */
  --h9-cian:   #1f98a9;        /* el color del "17" del logotipo            */
  --h9-verde:  #2e8b57;        /* pasos hechos                              */
  --h9-ambar:  #e0a526;        /* paso en el que está la reparación         */
  --h9-fondo:  #eef2f7;        /* fondo de la página                        */
  --h9-papel:  #ffffff;
  --h9-gris:   #5d6878;        /* textos secundarios                        */
  --h9-ancho:  1320px;         /* ancho máximo del contenido                */
}

@font-face{ font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('fuentes_sat17/ficheros/barlow-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('fuentes_sat17/ficheros/barlow-700-normal.woff2') format('woff2'); }

/* ---------------- a partir de aquí no hace falta tocar ---------------- */
main.h9{ flex:1 0 auto; font-family:'Barlow', Arial, Helvetica, sans-serif; font-size:17px; line-height:1.55; color:var(--h9-tinta); }
main.h9 *{ box-sizing:border-box; }
main.h9 h1, main.h9 h2, main.h9 h3{ margin:0; font-weight:700; line-height:1.12; color:var(--h9-tinta); }
main.h9 h2{ font-size:34px; letter-spacing:-.3px; }
main.h9 h3{ font-size:20px; }
main.h9 p{ margin:0; }
main.h9 a:focus-visible, main.h9 summary:focus-visible{ outline:3px solid var(--h9-cian); outline-offset:3px; }
div.h9-ancho{ width:var(--h9-ancho); max-width:100%; margin:0 auto; padding:0 24px; }

/* botones */
a.h9-boton{ display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:8px; background:var(--h9-azul); color:#fff !important; font-size:17px; font-weight:700; text-decoration:none !important; white-space:nowrap; transition:background .15s; }
a.h9-boton:hover{ background:#355f91; }
a.h9-boton svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
a.h9-boton-claro{ background:transparent; color:var(--h9-tinta) !important; box-shadow:inset 0 0 0 2px #c3cfdf; }
a.h9-boton-claro:hover{ background:#fff; }
a.h9-boton-blanco{ background:#fff; color:var(--h9-tinta) !important; }
a.h9-boton-blanco:hover{ background:#e6edf6; }
a.h9-enlace{ color:var(--h9-azul); font-weight:700; text-decoration:none; }
a.h9-enlace:hover{ text-decoration:underline; }

/* portada */
section.h9-portada{ padding:56px 0 64px; background:linear-gradient(180deg, #fff 0, var(--h9-fondo) 100%); }
div.h9-portada-rejilla{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:56px; align-items:center; }
div.h9-portada-texto h1{ max-width:19ch; font-size:56px; letter-spacing:-1px; line-height:1.02; }
p.h9-entradilla{ max-width:56ch; margin-top:20px !important; font-size:20px; line-height:1.5; color:#3a4757; }
div.h9-botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
ul.h9-ventajas{ display:flex; flex-wrap:wrap; gap:8px 26px; margin:26px 0 0; padding:0; list-style:none; font-size:16px; color:#3a4757; }
ul.h9-ventajas li{ display:flex; align-items:center; gap:8px; }
ul.h9-ventajas svg{ width:20px; height:20px; fill:none; stroke:var(--h9-verde); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

/* el resguardo de la reparación (lo que más llama la atención de la página) */
div.h9-resguardo{ position:relative; padding:30px 30px 26px; background:var(--h9-papel); border-radius:6px; box-shadow:0 30px 60px -20px rgba(29,42,58,.35), 0 2px 6px rgba(29,42,58,.08); transform:rotate(1.2deg); }
div.h9-resguardo::before{ content:""; position:absolute; left:0; right:0; top:-7px; height:14px; background:radial-gradient(circle at 7px 7px, var(--h9-fondo) 6px, transparent 6.5px) 0 0 / 22px 14px repeat-x; }
div.h9-resguardo::after{ content:""; position:absolute; left:22px; right:22px; top:92px; border-top:2px dashed #d5dde8; }
div.h9-resguardo-cab{ display:flex; align-items:center; gap:16px; padding-bottom:30px; }
span.h9-resguardo-dibujo{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:12px; background:#e7f4f6; }
span.h9-resguardo-dibujo svg{ width:34px; height:34px; fill:none; stroke:var(--h9-cian); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
div.h9-resguardo-cab b{ display:block; font-size:21px; }
div.h9-resguardo-cab span{ font-size:16px; color:var(--h9-gris); }
ol.h9-estados{ position:relative; margin:4px 0 0; padding:0; list-style:none; }
ol.h9-estados li{ position:relative; display:flex; align-items:center; gap:16px; padding:11px 0; font-size:18px; color:#98a2b0; }
ol.h9-estados li + li::before{ content:""; position:absolute; left:13px; top:-11px; height:22px; width:2px; background:#dfe5ee; }
ol.h9-estados li.hecho + li::before{ background:var(--h9-verde); }
span.h9-punto{ position:relative; z-index:1; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:2px solid #d3dae5; background:#fff; }
span.h9-punto svg{ width:16px; height:16px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
ol.h9-estados li.hecho{ color:var(--h9-tinta); }
ol.h9-estados li.hecho span.h9-punto{ border-color:var(--h9-verde); background:var(--h9-verde); }
ol.h9-estados li.ahora{ color:var(--h9-tinta); font-weight:700; }
ol.h9-estados li.ahora span.h9-punto{ border-color:var(--h9-ambar); background:#fff6e0; }
ol.h9-estados li.ahora span.h9-punto::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--h9-ambar); animation:h9-latido 1.6s ease-in-out infinite; }
@keyframes h9-latido{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.55); opacity:.55; } }
p.h9-resguardo-nota{ margin-top:16px !important; padding-top:14px; border-top:1px solid #e6ebf2; font-size:15px; color:var(--h9-gris); }

/* bloques */
section.h9-bloque{ padding:64px 0; }
section.h9-bloque h2{ margin-bottom:30px; }

/* qué reparamos: un solo panel blanco dividido en cuatro columnas */
div.h9-servicios{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); background:#fff; border-radius:14px; box-shadow:0 1px 3px rgba(29,42,58,.08); }
article.h9-servicio{ padding:32px 28px 30px; }
article.h9-servicio + article.h9-servicio{ border-left:1px solid #e6ebf2; }
span.h9-dibujo{ display:block; width:64px; height:64px; margin-bottom:18px; }
span.h9-dibujo svg{ width:64px; height:64px; fill:none; stroke:var(--h9-azul); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
article.h9-servicio ul{ margin:12px 0 0; padding:0; list-style:none; }
article.h9-servicio li{ position:relative; padding:5px 0 5px 18px; font-size:16px; color:#3a4757; }
article.h9-servicio li::before{ content:""; position:absolute; left:0; top:15px; width:7px; height:7px; border-radius:2px; background:var(--h9-cian); }

/* cómo funciona (es una secuencia: van numerados) */
section.h9-bloque-pasos{ padding-top:8px; }
ol.h9-pasos{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; margin:0; padding:0; list-style:none; counter-reset:none; }
ol.h9-pasos li{ position:relative; padding-top:62px; }
ol.h9-pasos li::before{ content:""; position:absolute; left:52px; right:-28px; top:21px; height:2px; background:#cfd8e5; }
ol.h9-pasos li:last-child::before{ display:none; }
span.h9-num{ position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--h9-tinta); color:#fff; font-size:20px; font-weight:700; }
ol.h9-pasos h3{ margin-bottom:8px; }
ol.h9-pasos p{ font-size:16px; color:#3a4757; }

/* franja oscura: garantías y contacto */
section.h9-banda{ padding:64px 0; background:var(--h9-tinta); color:#dbe3ee; }
section.h9-banda h2, section.h9-banda h3{ color:#fff; }
div.h9-banda-rejilla{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:56px; align-items:start; }
dl.h9-garantias{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; margin:28px 0 0; }
dl.h9-garantias div{ padding-top:16px; border-top:3px solid var(--h9-cian); }
dl.h9-garantias dt{ font-size:19px; font-weight:700; color:#fff; }
dl.h9-garantias dd{ margin:6px 0 0; font-size:16px; color:#b9c5d4; }
div.h9-contacto{ padding:30px; border-radius:14px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
div.h9-contacto p{ margin-top:8px !important; color:#c6d1de; }
a.h9-telefono{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; color:#fff !important; font-size:30px; font-weight:700; letter-spacing:.5px; text-decoration:none !important; }
a.h9-telefono svg{ width:26px; height:26px; fill:none; stroke:var(--h9-cian); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
p.h9-horario{ font-size:15px; }
div.h9-contacto a.h9-boton{ display:flex; width:fit-content; margin-top:22px; }
a.h9-telefono{ display:flex; width:fit-content; }

/* liberar móvil */
section.h9-bloque-liberar{ padding-top:56px; padding-bottom:56px; }
div.h9-liberar{ display:flex; align-items:center; gap:22px; padding:26px 30px; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px #d8e1ec; }
div.h9-liberar > div{ flex:1 1 auto; }
div.h9-liberar h2{ margin:0 0 4px !important; font-size:24px; }
div.h9-liberar p{ color:#3a4757; }
span.h9-liberar-icono{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#e7f4f6; }
span.h9-liberar-icono svg{ width:28px; height:28px; fill:none; stroke:var(--h9-cian); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* preguntas frecuentes */
div.h9-faq-cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:22px; }
div.h9-faq-cab h2{ margin:0 !important; }
div.h9-faq{ background:#fff; border-radius:14px; box-shadow:0 1px 3px rgba(29,42,58,.08); }
div.h9-faq details{ padding:0 26px; }
div.h9-faq details + details{ border-top:1px solid #e6ebf2; }
div.h9-faq summary{ display:flex; justify-content:space-between; gap:16px; padding:20px 0; font-size:18px; font-weight:700; cursor:pointer; list-style:none; }
div.h9-faq summary::-webkit-details-marker{ display:none; }
div.h9-faq summary::after{ content:"+"; flex:0 0 auto; font-size:24px; line-height:1; color:var(--h9-azul); }
div.h9-faq details[open] summary::after{ content:"\2013"; }
div.h9-faq details > div{ padding:0 0 22px; font-size:16px; color:#3a4757; }
div.h9-faq details > div img{ max-width:100%; height:auto; }

/* pantallas medianas y móviles */
@media (max-width:1100px){
  div.h9-portada-texto h1{ font-size:48px; }
  div.h9-servicios{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  article.h9-servicio:nth-child(3){ border-left:0; }
  article.h9-servicio:nth-child(n+3){ border-top:1px solid #e6ebf2; }
  dl.h9-garantias{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:900px){
  div.h9-portada-rejilla, div.h9-banda-rejilla{ grid-template-columns:minmax(0,1fr); gap:40px; }
  div.h9-resguardo{ transform:none; max-width:480px; }
  ol.h9-pasos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  ol.h9-pasos li::before{ display:none; }
  div.h9-liberar{ flex-wrap:wrap; }
}
@media (max-width:560px){
  div.h9-ancho{ padding:0 16px; }
  div.h9-portada-texto h1{ font-size:38px; }
  main.h9 h2{ font-size:28px; }
  div.h9-servicios, ol.h9-pasos{ grid-template-columns:minmax(0,1fr); }
  article.h9-servicio + article.h9-servicio{ border-left:0; border-top:1px solid #e6ebf2; }
}
@media (prefers-reduced-motion:reduce){
  ol.h9-estados li.ahora span.h9-punto::after{ animation:none; }
}