:root{
    --tinta:#1a2332; --texto:#333d4d; --gris:#66707f; --linea:#d9dee6;
    --fondo:#ffffff; --crema:#f7f8fa; --azul:#0f4c92; --azul-osc:#0a3567;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:Georgia,"Times New Roman",serif;color:var(--texto);
       background:var(--fondo);line-height:1.65;font-size:17px}
  h1,h2,h3,.nav,.btn,.etq,th,td,label,input,select,textarea,button,.mini
    {font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif}
  .wrap{max-width:1020px;margin:0 auto;padding:0 24px}

  header{border-bottom:1px solid var(--linea);background:#fff;position:sticky;top:0;z-index:9}
  .nav{display:flex;align-items:center;gap:26px;height:60px;font-size:.93rem}
  .marca{font-weight:700;font-size:1.25rem;letter-spacing:.04em;color:var(--tinta)}
  .nav a{color:var(--gris);text-decoration:none}
  .nav a:hover{color:var(--tinta)}
  .nav .cta{margin-left:auto;border:1.5px solid var(--azul);color:var(--azul);
            padding:7px 16px;border-radius:4px;font-weight:600}
  .nav .cta:hover{background:var(--azul);color:#fff}

  .hero{padding:76px 0 60px;border-bottom:1px solid var(--linea)}
  .hero .cols{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
  @media(max-width:820px){.hero .cols{grid-template-columns:1fr}}
  .hero h1{font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.2;font-weight:700;color:var(--tinta)}
  .hero p.sub{margin-top:18px;font-size:1.08rem;color:var(--texto)}
  .hero .botones{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
  .btn{display:inline-block;padding:12px 22px;border-radius:4px;font-weight:600;
       text-decoration:none;font-size:.97rem;border:1.5px solid transparent}
  .btn.principal{background:var(--azul);color:#fff}
  .btn.principal:hover{background:var(--azul-osc)}
  .btn.secundario{border-color:var(--linea);color:var(--tinta);background:#fff}
  .btn.secundario:hover{border-color:var(--gris)}
  .hero .mini{margin-top:12px;font-size:.83rem;color:var(--gris)}
  .hero .lema{border-left:3px solid var(--azul);background:var(--crema);
              padding:22px 24px;font-size:1.02rem}
  .hero .lema b{color:var(--tinta)}
  .hero .lema .firma{display:block;margin-top:12px;font-size:.85rem;color:var(--gris);font-style:italic}

  section{padding:64px 0}
  section + section{border-top:1px solid var(--linea)}
  .encabezado{max-width:680px}
  .encabezado h2{font-size:1.6rem;color:var(--tinta)}
  .encabezado p{margin-top:10px;color:var(--gris)}
  .kicker{font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--azul);
          text-transform:uppercase;font-family:"Segoe UI",sans-serif}

  .modulos{margin-top:36px;border-top:1px solid var(--linea)}
  .modulo{display:grid;grid-template-columns:220px 1fr;gap:24px;
          padding:22px 0;border-bottom:1px solid var(--linea)}
  @media(max-width:680px){.modulo{grid-template-columns:1fr;gap:6px}}
  .modulo h3{font-size:1.02rem;color:var(--tinta)}
  .modulo p{font-size:.98rem;color:var(--texto)}
  .modulo p b{color:var(--tinta)}

  .garantias{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
             border:1px solid var(--linea);margin-top:36px}
  .garantia{padding:28px;border-right:1px solid var(--linea)}
  .garantia:last-child{border-right:none}
  @media(max-width:900px){.garantia{border-right:none;border-bottom:1px solid var(--linea)}
    .garantia:last-child{border-bottom:none}}
  .garantia h3{font-size:1rem;color:var(--tinta);margin-bottom:8px}
  .garantia p{font-size:.95rem}
  .garantia code{font-family:Consolas,monospace;font-size:.85em;background:var(--crema);
                 padding:1px 6px;border:1px solid var(--linea);border-radius:3px}

  table{width:100%;border-collapse:collapse;margin-top:36px;font-size:.95rem}
  caption{caption-side:bottom;padding-top:12px;font-size:.83rem;color:var(--gris);text-align:left}
  th,td{border:1px solid var(--linea);padding:12px 16px;text-align:left;vertical-align:top}
  th{background:var(--crema);color:var(--tinta);font-size:.9rem}
  td .precio{font-size:1.5rem;font-weight:700;color:var(--tinta)}
  td .precio small{font-size:.85rem;font-weight:400;color:var(--gris)}
  .si{color:var(--azul);font-weight:700}
  .tabla-scroll{overflow-x:auto}

  ol.pasos{margin:36px 0 0 0;list-style:none;counter-reset:p;max-width:720px}
  ol.pasos li{counter-increment:p;padding:16px 0 16px 56px;position:relative;
              border-bottom:1px solid var(--linea)}
  ol.pasos li::before{content:counter(p);position:absolute;left:0;top:14px;width:36px;height:36px;
    border:1.5px solid var(--azul);color:var(--azul);border-radius:50%;font-weight:700;
    display:flex;align-items:center;justify-content:center;font-family:"Segoe UI",sans-serif}
  ol.pasos b{color:var(--tinta)}

  form{max-width:560px;margin-top:36px;display:grid;gap:16px}
  label{font-size:.88rem;font-weight:600;color:var(--tinta)}
  input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--linea);
       border-radius:4px;font-size:.95rem;background:#fff}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul)}
  button.btn{border:none;cursor:pointer}
  .form-nota{font-size:.83rem;color:var(--gris)}
  .captcha-hueco{border:1px dashed var(--linea);padding:14px;text-align:center;
                 color:var(--gris);font-size:.85rem;font-family:"Segoe UI",sans-serif}

  details{border-bottom:1px solid var(--linea);padding:14px 2px;max-width:760px}
  summary{cursor:pointer;font-weight:600;color:var(--tinta);font-family:"Segoe UI",sans-serif;
          font-size:.97rem}
  details p{color:var(--texto);margin-top:10px;font-size:.95rem}

  footer{border-top:2px solid var(--tinta);padding:36px 0 44px;font-size:.88rem;color:var(--gris)}
  footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
  footer a{color:var(--texto);text-decoration:none}
  footer a:hover{text-decoration:underline}

  .mockup{border:1px solid var(--linea);border-radius:8px;overflow:hidden;
          box-shadow:0 18px 40px rgba(16,35,60,.10);background:#fff}
  .mockup svg{display:block;width:100%;height:auto}
  .capturas{display:grid;gap:28px;grid-template-columns:1.15fr .85fr;
            margin-top:40px;align-items:start}
  @media(max-width:820px){.capturas{grid-template-columns:1fr}}
  figure figcaption{font-size:.85rem;color:var(--gris);margin-top:10px;
                    font-family:"Segoe UI",sans-serif}

/* ── Familia GARF (portada + páginas de producto) ─────────────────────── */
.suite{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:40px}
.tarjeta{border:1px solid var(--linea);border-radius:8px;padding:28px;background:#fff;
         display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s}
.tarjeta:hover{box-shadow:0 14px 32px rgba(16,35,60,.09);border-color:#c3ccd8}
.tarjeta .nombre{font-family:"Segoe UI",sans-serif;font-weight:700;font-size:1.22rem;
                 color:var(--tinta);letter-spacing:.02em}
.tarjeta .para{font-family:"Segoe UI",sans-serif;font-size:.8rem;color:var(--gris);
               text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.tarjeta p{margin-top:14px;font-size:.97rem;flex:1}
.tarjeta .pie{margin-top:20px}
.badge{display:inline-block;font-family:"Segoe UI",sans-serif;font-size:.72rem;font-weight:700;
       letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.badge.activa{background:#e4f1e6;color:#1c6b32}
.badge.piloto{background:#fdf3e0;color:#8a6d1a}
.badge.proximo{background:#eceff3;color:#66707f}
.suite-link{font-family:"Segoe UI",sans-serif;font-size:.85rem;color:var(--gris);text-decoration:none}
.suite-link:hover{color:var(--tinta)}
.nav .prod{font-weight:600;color:var(--tinta)}
.principio{background:var(--crema);border:1px solid var(--linea);border-radius:8px;
           padding:32px;margin-top:40px}
.principio h3{font-size:1.1rem;color:var(--tinta);font-family:"Segoe UI",sans-serif}
.principio p{margin-top:10px;font-size:1rem}


/* Logo de GARF en la cabecera */
.marca-logo{height:34px;width:auto;display:block}
.nav .marca-img{display:flex;align-items:center;padding:0}
@media(max-width:520px){.marca-logo{height:28px}}
.foot-logo{height:30px;width:auto;opacity:.9;margin-bottom:8px;display:block}

/* Filas de grupo en la tabla de precios */
.fila-grupo td{background:var(--crema);font-weight:700;color:var(--tinta);
               font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}

/* Capturas reales dentro de las tarjetas de maqueta (03/09/2026) */
.mockup img{display:block;width:100%;height:auto;border-radius:10px}