/* Elite Shield Health Benefits — hoja del sitio público.
 *
 * ⚠️ TODAS las media queries van AL FINAL, de ancha a estrecha. Una media query no añade
 * especificidad: una regla base escrita después la anula en silencio, y solo en teléfono.
 * Es un error que no se ve en el escritorio y cuesta una tarde encontrarlo.
 */

/* ── Tipografía autoalojada. No se depende de Google: menos latencia, y el sitio no
      filtra a un tercero quién lo visita. */
@font-face { font-family: Poppins; font-weight: 400; font-style: normal; font-display: swap;
             src: url(../fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 500; font-style: normal; font-display: swap;
             src: url(../fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-style: normal; font-display: swap;
             src: url(../fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; font-display: swap;
             src: url(../fonts/poppins-700.woff2) format('woff2'); }

:root {
  --marino:    #0A2342;
  --marino-2:  #10305C;
  --dorado:    #D4AF37;
  /* ⚠️ El dorado NO es color de texto: #D4AF37 sobre blanco da 1,9:1, muy por debajo del
        4,5:1 que hace falta. Para texto sobre claro va este otro, que da 5,4:1. */
  --dorado-tx: #8A6A18;
  --gris-osc:  #2F3640;
  --gris-med:  #6C757D;
  --gris-clr:  #F7F8FA;
  --blanco:    #FFFFFF;
  --linea:     #E4E7EC;
  --ancho:     1180px;
  --radio:     10px;
}

/* `.btn` es inline-flex y `.campo` es flex, y los dos se comen el display:none que el
   navegador le da al atributo hidden. Sin esto, hidden no hace absolutamente nada. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 16px/1.65 Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--gris-osc);
  background: var(--blanco);
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; font-weight: 700; color: var(--marino); }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); letter-spacing: -.01em; }
h3 { font-size: 1.12rem; font-weight: 600; }
p  { margin: 0 0 1em; }
a  { color: var(--marino); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Sin él, un width/height en el HTML deforma la imagen al encogerse la columna. */
img, svg { max-width: 100%; height: auto; }

.envoltura { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.seccion   { padding: 5rem 0; }
.seccion--gris { background: var(--gris-clr); }

.centrado { text-align: center; }
.centrado p { max-width: 62ch; margin-inline: auto; }

.apunte { color: var(--gris-med); font-size: .95rem; }

/* ── Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; border: 2px solid transparent; border-radius: var(--radio);
  font: 600 .95rem/1 Poppins, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s;
}
.btn--oro     { background: var(--dorado); color: var(--marino); }
.btn--oro:hover     { background: #E6C458; }
.btn--marino  { background: var(--marino); color: var(--blanco); }
.btn--marino:hover  { background: var(--marino-2); }
.btn--linea   { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,.6); }
.btn--linea:hover   { background: var(--blanco); color: var(--marino); border-color: var(--blanco); }
.btn--linea-osc { background: transparent; color: var(--marino); border-color: var(--marino); }
.btn--linea-osc:hover { background: var(--marino); color: var(--blanco); }

/* ── Barra superior */
.superior {
  background: var(--marino-2); color: rgba(255,255,255,.9);
  font-size: .84rem; padding: .45rem 0;
}
.superior .envoltura { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.superior a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.superior a:hover { color: var(--dorado); }
.superior .glifo { width: 15px; height: 15px; }

/* ── Cabecera */
.cabecera { background: var(--marino); position: sticky; top: 0; z-index: 50; }
.cabecera .envoltura { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; }

.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.marca img { width: 38px; height: 46px; }
.marca__txt   { color: var(--blanco); font-weight: 600; font-size: 1.06rem; letter-spacing: .01em; line-height: 1.1; }
.marca__sub   { display: block; color: var(--dorado); font-size: .58rem; font-weight: 500;
                letter-spacing: .28em; text-transform: uppercase; margin-top: .18rem; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { color: rgba(255,255,255,.88); text-decoration: none; font-size: .9rem; font-weight: 500; }
.nav a:hover { color: var(--dorado); }

.hamburguesa { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; color: var(--blanco); }
.hamburguesa .glifo { width: 26px; height: 26px; }

/* ── Hero */
.hero { background: linear-gradient(135deg, var(--marino) 0%, var(--marino-2) 100%);
        color: var(--blanco); padding: 5.5rem 0 0; position: relative; overflow: hidden; }
.hero h1 { color: var(--blanco); max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--dorado); }
.hero__bajada { font-size: 1.12rem; color: rgba(255,255,255,.82); max-width: 52ch; margin-bottom: 2rem; }
.hero__botones { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__cuerpo { padding-bottom: 4rem; }

/* La onda del cierre del hero, de la identidad de marca. */
.onda { display: block; width: 100%; height: 70px; }

/* ── Cinta de sellos */
.sellos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
          background: rgba(255,255,255,.14); border-top: 1px solid rgba(255,255,255,.14); }
.sello { background: var(--marino); padding: 1.4rem 1.2rem; display: flex; align-items: center; gap: .85rem; }
.sello .glifo { width: 30px; height: 30px; color: var(--dorado); flex: none; }
.sello b  { display: block; color: var(--blanco); font-size: .95rem; font-weight: 600; }
.sello span { color: rgba(255,255,255,.62); font-size: .8rem; }

/* ── Rejilla de coberturas */
.grupo + .grupo { margin-top: 3.5rem; }
.grupo__cabeza { display: flex; align-items: baseline; justify-content: space-between;
                 gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--linea);
                 padding-bottom: .7rem; margin-bottom: 1.8rem; }
.grupo__cabeza h3 { font-size: 1.4rem; font-weight: 700; margin: 0; }
/* La licencia que habilita el grupo. Es un dato verificable, no un adorno. */
.grupo__lic { color: var(--dorado-tx); font-size: .82rem; font-weight: 600;
              letter-spacing: .06em; text-transform: uppercase; }

.rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.15rem; }

.ramo {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.5rem 1.35rem; text-decoration: none; display: block;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.ramo:hover { border-color: var(--dorado); transform: translateY(-3px);
              box-shadow: 0 10px 26px rgba(10,35,66,.09); }
.ramo .glifo { width: 34px; height: 34px; color: var(--dorado); margin-bottom: .9rem; }
.ramo h4 { font-size: 1rem; font-weight: 600; margin-bottom: .35rem; }
.ramo p  { font-size: .875rem; color: var(--gris-med); margin: 0; line-height: 1.5; }

/* ── Cómo funciona */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.paso__n { display: inline-flex; align-items: center; justify-content: center;
           width: 44px; height: 44px; border-radius: 50%; background: var(--marino);
           color: var(--dorado); font-weight: 700; margin-bottom: 1rem; }

/* ── Contacto */
.contacto { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.5rem; align-items: center; }
.contacto__caja { background: var(--marino); color: var(--blanco); border-radius: var(--radio);
                  padding: 2.5rem; }
.contacto__caja h2 { color: var(--blanco); }
.contacto__fila { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.contacto__fila .glifo { width: 22px; height: 22px; color: var(--dorado); flex: none; }
.contacto__fila a { color: var(--blanco); font-size: 1.15rem; font-weight: 600; text-decoration: none; }
.mapa { border: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radio); }

/* ── Aviso de CMS */
.tpmo { background: var(--gris-clr); border-left: 3px solid var(--dorado);
        padding: 1rem 1.15rem; margin: 1.5rem 0; }
.tpmo p { font-size: .78rem; color: var(--gris-med); margin: 0; line-height: 1.55; }
.tpmo p + p { margin-top: .5rem; }

/* ── Pie */
.pie { background: var(--marino); color: rgba(255,255,255,.72); padding: 3.5rem 0 0; font-size: .88rem; }
.pie a { color: rgba(255,255,255,.72); text-decoration: none; }
.pie a:hover { color: var(--dorado); }
.pie__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.pie h4 { color: var(--dorado); font-size: .78rem; font-weight: 600; letter-spacing: .14em;
          text-transform: uppercase; margin-bottom: .9rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .45rem; }
.pie__legal { border-top: 1px solid rgba(255,255,255,.13); margin-top: 3rem;
              padding: 1.5rem 0; font-size: .78rem; color: rgba(255,255,255,.5); }
.pie .tpmo { background: rgba(255,255,255,.05); border-left-color: var(--dorado); }
.pie .tpmo p { color: rgba(255,255,255,.55); }

/* ── Barra fija de teléfono. Es flex, así que depende de la regla [hidden] de arriba. */
.barra-fija { display: none; }

/* ══════════════════════════════════════════════════ Media queries, de ancha a estrecha
   Todo lo de abajo son ajustes de pantalla. Nada de reglas base a partir de aquí. */

@media (max-width: 1000px) {
  .rejilla   { grid-template-columns: repeat(3, 1fr); }
  .contacto  { grid-template-columns: 1fr; }
  .pie__cols { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}

@media (max-width: 820px) {
  .seccion { padding: 3.5rem 0; }
  .nav { position: fixed; inset: 78px 0 auto; flex-direction: column; align-items: stretch;
         background: var(--marino-2); padding: 1rem 1.25rem 1.5rem; gap: 0; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav .btn { margin-top: 1rem; }
  .hamburguesa { display: block; }
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .pasos   { grid-template-columns: 1fr; gap: 1.5rem; }
  .sellos  { grid-template-columns: repeat(2, 1fr); }
  .hero    { padding-top: 3.5rem; }
  .hero__cuerpo { padding-bottom: 2.5rem; }
}

@media (max-width: 560px) {
  .envoltura { width: calc(100% - 2rem); }
  .superior__ciudad { display: none; }
  .ramo { padding: 1.15rem 1rem; }
  .ramo .glifo { width: 28px; height: 28px; margin-bottom: .6rem; }
  /* Los dos botones del hero van EN FILA: apilados se comen 150 px y empujan la cinta de
     sellos fuera del primer golpe de vista, que es donde se decide si alguien sigue. */
  .hero__botones .btn { flex: 1; padding-inline: .9rem; font-size: .82rem; }
  .contacto__caja { padding: 1.75rem 1.35rem; }
  /* Cuatro columnas en un teléfono son 78 px cada una: se parten las palabras. Van dos. */
  .pie__cols { grid-template-columns: 1fr 1fr; }

  /* Barra fija: llamar, WhatsApp y cotizar siempre a la mano. Se esconde sola cuando el
     botón grande de cotizar entra en pantalla, para no taparlo. */
  .barra-fija {
    display: flex; position: fixed; inset: auto 0 0; z-index: 60;
    background: var(--marino); border-top: 1px solid rgba(255,255,255,.14);
    padding: .5rem; gap: .5rem;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
  }
  .barra-fija .btn { flex: 1; padding: .7rem .4rem; font-size: .72rem; letter-spacing: .02em; }
  body { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}