/*
  RecordMédico — sitio público.

  Paleta limpia: blanco, grises azulados y un azul de acento. El peso visual lo
  siguen haciendo el espacio en blanco y las líneas de un píxel.

  El color entra en dosis pequeñas y siempre en los mismos sitios: un degradado
  azul→índigo para los acentos (el hilo superior, el guion de los epígrafes, el
  canto del bloque de la ley) y los colores propios de cada producto de Google
  en sus iconos. Fuera de ahí, nada compite con el texto.
*/

:root {
  --azul: #1a73e8;
  --azul-hover: #1557b0;
  --azul-suave: #e8f0fe;
  --indigo: #635bff;

  /* Grises con algo de azul dentro: menos apagados que los neutros puros. */
  --tinta: #0a2540;
  --gris: #425466;
  --gris-claro: #6b7c93;
  --linea: #e3e8ee;
  --fondo: #f6f9fc;
  --wa: #25D366;

  --gradiente: linear-gradient(100deg, var(--azul), var(--indigo) 62%, #00b8d9);
  --sombra: 0 2px 5px -1px rgba(10, 37, 64, .12), 0 1px 3px -1px rgba(10, 37, 64, .08);
  --sombra-alta: 0 12px 28px -14px rgba(10, 37, 64, .28);
  --ancho: 1140px;
  --radio: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, "Google Sans", Roboto, system-ui, -apple-system, sans-serif;
  color: var(--tinta);
  background: #fff;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Un solo ancho para todo: la barra, el hero y cada sección caen en la misma
   vertical. Antes había tres (1140 el hero, 1040 las secciones, 740 las de
   texto) y los bloques de ley se veían encogidos al lado del resto. */
.contenido { max-width: var(--ancho); margin: 0 auto; padding: 0 28px; }

h1, h2, h3 { font-family: Poppins, Inter, sans-serif; line-height: 1.25; margin: 0 0 16px; }
h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 700; letter-spacing: -.022em; }
h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; letter-spacing: -.021em; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 0 0 16px; }

code {
  font-family: ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
  font-size: .88em; background: var(--fondo);
  border: 1px solid var(--linea);
  padding: 1px 6px; border-radius: 4px; color: #3c4043;
}

/* ------------------------------- barra ------------------------------- */

.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}

/* El fondo y el hilo de color van de lado a lado; el contenido se alinea con
   el resto de la página, que es lo que se espera al mirar el logo y el hero. */
.barra-interior {
  display: flex; align-items: center; gap: 28px;
  max-width: var(--ancho); margin: 0 auto; padding: 12px 28px;
}

/* El hilo de arriba es lo único de color que se ve siempre. */
.barra::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--gradiente);
}

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinta); }
.marca img { height: 28px; width: 28px; border-radius: 6px; }
.marca strong {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px;
  letter-spacing: -.01em; white-space: nowrap;
}

.barra nav { display: flex; gap: 28px; margin-left: auto; }

.barra nav a {
  color: var(--gris); text-decoration: none;
  font-size: 14px; font-weight: 500; white-space: nowrap;
}

/* Entre 900 y 1140 la barra va justa: antes de que los enlaces partan en dos
   lineas, se cierran los huecos. */
@media (max-width: 1140px) {
  .barra-interior { gap: 18px; }
  .barra nav { gap: 18px; }
}

.barra nav a:hover { color: var(--tinta); }

/* ------------------------------ botones ------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .15s ease, box-shadow .18s ease, transform .15s ease;
}

/* Un botón plano no se lee como botón. El relieve viene de tres cosas a la vez:
   un degradado mínimo, una luz interior arriba y una sombra del color del
   propio botón, no gris. */
.btn-primario {
  background: linear-gradient(180deg, #3b8bf0, var(--azul));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 1px 2px rgba(10, 37, 64, .16),
    0 5px 12px -4px rgba(26, 115, 232, .48);
}

.btn-primario:hover {
  background: linear-gradient(180deg, #2f80ec, var(--azul-hover));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 2px 4px rgba(10, 37, 64, .18),
    0 10px 20px -6px rgba(26, 115, 232, .55);
  transform: translateY(-1px);
}

.btn-primario:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(10, 37, 64, .2); }

.btn-wa {
  background: #fff; color: #137333; border: 1px solid var(--linea);
  box-shadow: 0 1px 2px rgba(10, 37, 64, .07);
}

.btn-wa:hover {
  background: #f1f8f3; border-color: #a8d5b5;
  box-shadow: 0 6px 14px -8px rgba(10, 37, 64, .35);
  transform: translateY(-1px);
}

.btn-wa:active { transform: translateY(0); }
.btn-grande { padding: 15px 32px; font-size: 16px; }
.barra-cta { padding: 9px 20px; font-size: 13.5px; white-space: nowrap; }

.cta .btn-wa {
  background: linear-gradient(180deg, #2fdd75, var(--wa));
  color: #fff; border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 1px 2px rgba(10, 37, 64, .16),
    0 5px 12px -4px rgba(37, 211, 102, .5);
}

.cta .btn-wa:hover {
  background: linear-gradient(180deg, #25cc63, #1faa54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 10px 20px -6px rgba(37, 211, 102, .55);
}

.btn-grande { letter-spacing: -.005em; }

/* ------------------------------- hero ------------------------------- */

.hero {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center;
  max-width: var(--ancho); margin: 0 auto; padding: 84px 28px 92px;
}

/* Dos manchas de color muy diluidas detrás del titular. A esta opacidad no se
   leen como degradado: solo evitan que el blanco se sienta vacío. */
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: -60px; left: 0; right: 0; height: 460px;
  background:
    radial-gradient(58% 100% at 14% 0%, rgba(26, 115, 232, .09), transparent 68%),
    radial-gradient(48% 90% at 92% 8%, rgba(99, 91, 255, .08), transparent 70%);
}

.etiqueta {
  display: inline-block; margin-bottom: 22px;
  padding: 5px 14px; border-radius: 999px;
  background: var(--azul-suave); color: #174ea6;
  font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
}

h1 em {
  font-style: normal; color: var(--azul);
  background: var(--gradiente);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.entradilla { font-size: 18px; color: var(--gris); max-width: 56ch; }
.hero-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 18px; }
.letra-chica { font-size: 13px; color: var(--gris-claro); margin: 0; }

/* ------------------------------ bloques ------------------------------ */

.bloque { padding: 88px 0; border-top: 1px solid var(--linea); }
.bloque-ice { background: var(--fondo); }
.bloque-oscuro { background: var(--fondo); }

.eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul);
}

.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--gradiente);
}

.bloque h2 { max-width: 22ch; }
/* Sin tope, un titular de estos ocupaba los 1140 px de una sola línea. Con el
   contenedor ancho vuelve a hacer falta una medida. */
.bloque-oscuro h2, .estrecho h2 { max-width: 30ch; }

.dos-columnas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
  margin-top: 28px; font-size: 16px; color: var(--gris);
}

.dos-columnas strong { color: var(--tinta); font-weight: 600; }

.destacado {
  font-size: 18px; line-height: 1.6; color: var(--tinta);
  padding: 22px 26px; margin: 4px 0 26px;
  background: var(--azul-suave); border-radius: var(--radio);
}

/* --------------------------- pasos de la tesis --------------------------- */

.pasos-ia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }

.paso-ia {
  padding: 26px; border-radius: var(--radio);
  background: #fff; border: 1px solid var(--linea);
}

.paso-ia span {
  display: block; font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 15px; color: var(--azul); margin-bottom: 10px;
}

.paso-ia h3 { font-size: 17px; margin-bottom: 6px; }
.paso-ia p { margin: 0; font-size: 14.5px; color: var(--gris); }

/* ------------------------------ tarjetas ------------------------------ */

.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }

.tarjeta {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 26px;
}

.bloque-ice .tarjeta { background: #fff; }
.tarjeta h3 { margin-bottom: 8px; }
.tarjeta p { margin: 0; font-size: 14.5px; color: var(--gris); }

.icono {
  width: 42px; height: 42px; border-radius: 50%; margin-bottom: 16px;
  display: grid; place-items: center;
  background: var(--azul-suave);
}

.icono svg {
  width: 21px; height: 21px; fill: none;
  stroke: var(--azul); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ------------------------------- permiso ------------------------------- */

.caja-permiso {
  background: #fff; border: 1px solid var(--linea);
  padding: 28px; border-radius: var(--radio);
}

.caja-permiso h3 { color: var(--tinta); margin-bottom: 12px; }
.caja-permiso p { font-size: 15px; color: var(--gris); }
.caja-permiso strong { color: var(--tinta); font-weight: 600; }
.caja-permiso .nota { font-size: 13.5px; color: var(--gris-claro); margin: 0; }

/* ----------------------------- sí / no ----------------------------- */

.si-no { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; }

.si, .no { padding: 26px; border-radius: var(--radio); border: 1px solid var(--linea); background: #fff; }
.si { border-left: 3px solid var(--azul); }
.no { border-left: 3px solid var(--linea); }

.si h3, .no h3 { margin-bottom: 12px; }
.si ul, .no ul { margin: 0; padding-left: 20px; font-size: 14.5px; color: var(--gris); }
.si li, .no li { margin-bottom: 10px; }
.si strong, .no strong { color: var(--tinta); font-weight: 600; }

.caja-consejo {
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 20px 24px;
  font-size: 14.5px; color: var(--gris); margin: 20px 0;
}

.caja-consejo strong { color: var(--tinta); }

/* ------------------------------- pasos ------------------------------- */

.pasos { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 20px; }

.paso {
  display: grid; grid-template-columns: 48px 1fr; gap: 22px;
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 30px;
}

.paso-num {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul-suave); color: var(--azul);
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px;
}

.paso-cuerpo h3 { margin-bottom: 10px; font-size: 19px; }
.paso-cuerpo p { font-size: 15.5px; color: var(--gris); }
.paso-cuerpo strong { color: var(--tinta); font-weight: 600; }
.paso-cuerpo .btn { margin-top: 8px; }

/* ------------------------------ capturas ------------------------------ */

.captura { margin: 22px 0 0; }
.captura img { border-radius: var(--radio); border: 1px solid var(--linea); }
.captura-ancha { margin-top: 44px; }
.captura figcaption { display: none; }

/* Si la imagen aún no existe, se muestra un hueco honesto en vez de un roto. */
.captura.falta img { display: none; }

.captura.falta figcaption {
  display: block; text-align: center;
  padding: 56px 24px; border: 1px dashed var(--linea);
  border-radius: var(--radio); background: var(--fondo);
  color: var(--gris-claro); font-size: 13px;
}

/* ----------------------------- preguntas ----------------------------- */

details {
  border-bottom: 1px solid var(--linea);
  padding: 18px 4px;
}

summary {
  cursor: pointer; font-weight: 500; font-size: 16px;
  list-style: none; color: var(--tinta);
}

summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--gris); font-weight: 400; font-size: 20px; line-height: 1; }
details[open] summary::after { content: "–"; }
details[open] summary { margin-bottom: 12px; color: var(--azul); }
details p { margin: 0; font-size: 15px; color: var(--gris); }

/* -------------------------------- CTA -------------------------------- */

.cta { padding: 84px 0; text-align: center; background: var(--fondo); border-top: 1px solid var(--linea); }
.cta p { font-size: 16.5px; color: var(--gris); max-width: 58ch; margin: 0 auto 26px; }
.cta .btn { margin-bottom: 18px; }

/* -------------------------------- pie -------------------------------- */

.pie { background: #fff; color: var(--gris); padding: 46px 0 30px; font-size: 13.5px; border-top: 1px solid var(--linea); }
.pie-fila { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.pie-logo { height: 20px; margin-bottom: 12px; opacity: .7; }
.pie p { margin: 0; }
.pie-enlaces { display: grid; gap: 8px; }
.pie-enlaces a { color: var(--gris); text-decoration: none; }
.pie-enlaces a:hover { color: var(--azul); }

.descargo {
  margin-top: 32px; padding-top: 22px;
  border-top: 1px solid var(--linea);
  font-size: 12.5px; color: var(--gris-claro); max-width: 80ch;
}

/* ------------------------------ responsive ------------------------------ */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 54px; }
  .dos-columnas, .si-no { grid-template-columns: 1fr; gap: 24px; }
  .rejilla, .rejilla-3, .pasos-ia { grid-template-columns: 1fr 1fr; }
}

/* Los enlaces se retiran antes de que el logo y el CTA se queden sin aire.
   El indice completo sigue a un scroll de distancia. */
@media (max-width: 1040px) {
  .barra nav { display: none; }
}

@media (max-width: 620px) {
  .bloque { padding: 60px 0; }
  .rejilla, .rejilla-3, .pasos-ia { grid-template-columns: 1fr; }
  .paso { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
  .contenido { padding: 0 20px; }
  .barra-interior { padding: 12px 20px; }
  .barra-cta { display: none; }
}

/* ------------------------------ galería ------------------------------ */

.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.galeria .captura { margin: 0; }

/* La captura del panel es alta y estrecha: no debe ocupar todo el ancho. */
.captura-panel img { max-width: 420px; }

@media (max-width: 620px) {
  .galeria { grid-template-columns: 1fr; }
}


/* --------------------------- modelo de consentimiento --------------------------- */

.acciones-doc { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; align-items: center; }

.doc { padding-top: 48px; padding-bottom: 80px; }

.aviso-legal {
  background: #fef7e0; border: 1px solid #f9d67a;
  border-radius: var(--radio); padding: 18px 22px; margin-bottom: 32px;
  font-size: 14.5px; color: #5c4813;
}

.carta {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 52px 56px;
}

.carta h1 { font-size: 26px; margin-bottom: 6px; }
.carta-sub { color: var(--gris); font-size: 14.5px; margin-bottom: 34px; }

.carta h2 {
  font-size: 16px; font-weight: 600; margin: 32px 0 10px;
  padding-top: 18px; border-top: 1px solid var(--linea);
}

.carta p, .carta li { font-size: 15px; color: #3c4043; }
.carta ul { padding-left: 22px; }
.carta li { margin-bottom: 6px; }

.rellenar {
  background: #fff8e1; border-bottom: 1px dashed #d4a017;
  padding: 0 3px; color: #7a5b00;
}

.carta-nota {
  background: var(--fondo); border-left: 3px solid var(--linea);
  padding: 14px 18px; font-size: 14px; color: var(--gris);
}

.firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 40px; margin: 40px 0 8px; }
.firma .linea { border-bottom: 1px solid #9aa0a6; height: 34px; }
.firma p { margin: 6px 0 0; font-size: 12.5px; color: var(--gris); }

.doc-pie { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; justify-content: center; }

@media print {
  .no-imprimir { display: none !important; }
  body { background: #fff; }
  .doc { padding: 0; max-width: none; }
  .carta { border: 0; border-radius: 0; padding: 0; }
  .carta h2 { page-break-after: avoid; }
  .firmas { page-break-inside: avoid; }
  .rellenar { background: none; }
}

/* ------------------------------- checklist ------------------------------- */

.progreso-check { margin: 30px 0 8px; }

.barra-progreso {
  height: 6px; border-radius: 999px; background: var(--linea); overflow: hidden;
}

.barra-progreso span {
  display: block; height: 100%; width: 0;
  background: var(--azul); border-radius: 999px;
  transition: width .25s ease;
}

#progreso-txt { margin: 8px 0 0; font-size: 13px; color: var(--gris); }

.grupo-check { margin-top: 36px; }
.grupo-check h3 { font-size: 17px; margin-bottom: 2px; }
.grupo-sub { color: var(--gris-claro); font-size: 13.5px; margin: 0 0 14px; }

.lista-check { list-style: none; margin: 0; padding: 0; }

.lista-check li { border-top: 1px solid var(--linea); }
.lista-check li:last-child { border-bottom: 1px solid var(--linea); }

.lista-check label {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  padding: 14px 4px; cursor: pointer; align-items: start;
}

.lista-check label:hover { background: var(--fondo); }

.lista-check input {
  width: 17px; height: 17px; margin-top: 3px; accent-color: var(--azul); cursor: pointer;
}

.lista-check strong { display: block; font-size: 15px; font-weight: 500; color: var(--tinta); }
.lista-check em { display: block; font-style: normal; font-size: 13.5px; color: var(--gris); margin-top: 3px; }
.lista-check input:checked + span strong { color: var(--gris-claro); text-decoration: line-through; }
.lista-check input:checked + span em { color: var(--gris-claro); }

.btn-reset {
  background: none; border: 1px solid var(--linea); color: var(--gris);
  cursor: pointer; font-family: inherit;
}

.btn-reset:hover { color: var(--tinta); border-color: var(--gris-claro); }

@media (max-width: 620px) {
  .carta { padding: 28px 22px; }
  .firmas { grid-template-columns: 1fr; }
}

/* Titular largo: es una frase completa, no un lema de tres palabras. */
.titular-largo { font-size: clamp(29px, 3.9vw, 43px); letter-spacing: -.018em; }

.subtitular {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  color: var(--tinta);
  margin: 0 0 18px;
  max-width: 30ch;
}


/* ------------------------- el bloque de la ley 172-13 ------------------------- */

.ley {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 158px 1fr; gap: 28px;
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 30px 32px 30px 36px;
  margin: 28px 0;
  box-shadow: var(--sombra);
}

/* El canto de color va de pseudo-elemento y no de borde: un `border-left` con
   degradado obliga a renunciar al radio de la tarjeta. */
.ley::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 5px; background: var(--gradiente);
}

.ley-sello {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 18px 10px;
  background: var(--azul-suave); border-radius: var(--radio);
}

.ley-num {
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: 32px; line-height: 1; color: var(--azul); letter-spacing: -.02em;
}

.ley-pais {
  margin-top: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #174ea6;
}

.ley-txt h3 { font-size: 19px; margin-bottom: 2px; }

.ley-nombre {
  font-size: 14.5px; color: var(--gris);
  margin: 0 0 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--linea);
}

.ley-txt p { font-size: 15.5px; color: #3c4043; }
.ley-txt strong { color: var(--tinta); font-weight: 600; }
.ley-extra { font-size: 14.5px; color: var(--gris); margin-bottom: 0; }

.hipaa {
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 24px 28px; margin-top: 28px;
}

.hipaa-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.hipaa h3 { font-size: 16px; margin: 0; }
.hipaa p { font-size: 14.5px; color: var(--gris); }
.hipaa strong { color: var(--tinta); font-weight: 600; }
.hipaa .letra-chica { margin-top: 10px; }

@media (max-width: 620px) {
  .ley { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .ley-sello { flex-direction: row; gap: 12px; padding: 12px; }
  .ley-num { font-size: 26px; }
}


/* ------------------------- lo que necesitas ------------------------- */

.intro-necesitas { max-width: 62ch; color: var(--gris); font-size: 16px; }

.necesitas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }

.necesita {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 30px;
}

.necesita-num {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--azul); color: #fff;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px;
}

.necesita h3 { font-size: 18px; margin-bottom: 10px; }
.necesita p { font-size: 15px; color: var(--gris); }
.necesita strong { color: var(--tinta); font-weight: 600; }
.necesita a { color: var(--azul); font-weight: 500; }

.necesita-nota {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-size: 13.5px; color: var(--gris-claro);
}

.incluye {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 24px 28px; margin-top: 20px;
}

.incluye-tit { font-size: 15px; font-weight: 600; color: var(--tinta); margin: 0 0 14px; }

.incluye-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px;
}

.incluye-lista li {
  font-size: 14.5px; color: var(--gris);
  padding-left: 24px; position: relative;
}

.incluye-lista li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--azul); border-bottom: 2px solid var(--azul);
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .necesitas { grid-template-columns: 1fr; }
  .incluye-lista { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .incluye-lista { grid-template-columns: 1fr; }
}

/* =========================== ajustes de móvil ===========================
   Revisado a 375 px. Cuatro problemas concretos: el titular se comía la
   primera pantalla y empujaba el botón fuera de vista, la barra superior
   quedaba vacía sin su CTA, las capturas de una app de escritorio se volvían
   tiras ilegibles, y el hero tenía aire de sobra arriba.
   ====================================================================== */

@media (max-width: 620px) {

  /* El titular, más contenido: gana tres líneas y el botón sube a la vista */
  .titular-largo { font-size: 25.5px; line-height: 1.22; }
  .subtitular { font-size: 17px; max-width: none; margin-bottom: 14px; }
  .entradilla { font-size: 15.5px; }
  .hero { padding-top: 34px; padding-bottom: 48px; gap: 30px; }
  .etiqueta { margin-bottom: 16px; }
  .hero-acciones { margin: 22px 0 14px; }
  .hero-acciones .btn { width: 100%; }

  /* La barra sin enlaces se quedaba solo con el logo: que al menos lleve
     al WhatsApp, que es la conversión de esta página */
  .barra-cta { display: inline-flex; padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
  .barra-cta .solo-ancho { display: none; }
  .barra-cta .solo-angosto { display: inline; }
  .barra-interior { gap: 10px; padding: 10px 16px; flex-wrap: nowrap; }
  .marca { flex: 0 1 auto; min-width: 0; }
  .marca img { height: 24px; width: 24px; }
  .marca strong { font-size: 14px; white-space: nowrap; }

  /* Dos capturas de escritorio, lado a lado, en 330 px: nadie lee eso */
  .galeria { display: none; }

  h2 { font-size: 23px; }
  .bloque { padding: 52px 0; }
}

/* El CTA de la barra dice más en pantalla ancha y menos en el móvil.
   Van en dos media queries que no se solapan, para que el orden del archivo
   no decida cuál gana. */
@media (min-width: 621px) {
  .barra-cta .solo-angosto { display: none; }
}


/* ------------------------- marcas, banderas e iconos ------------------------- */

/* El sprite no se ve: solo guarda los <symbol>. No se usa display:none porque
   algunos navegadores dejan de resolver los <use> que apuntan dentro. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.g-icono { width: 20px; height: 20px; flex: none; }

.bandera {
  width: 27px; height: 18px; flex: none;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(10, 37, 64, .15);
}

.bandera-grande { width: 40px; height: 27px; margin-bottom: 4px; }

/* Tira de productos bajo el titular. */
.marcas { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linea); }

.marcas-tit {
  display: block; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gris-claro);
}

.marcas-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 8px;
}

.marcas-lista li {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px;
  background: #fff; border: 1px solid var(--linea); border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--gris);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.marcas-lista li:hover {
  transform: translateY(-1px);
  border-color: #cdd7e3; box-shadow: var(--sombra);
}

/* La lista de "lo que incluye" cambia la palomita por el logo del producto. */
.incluye-lista.con-logos li { padding-left: 0; display: flex; align-items: center; gap: 11px; }
.incluye-lista.con-logos li::before { display: none; }

/* ------------------------- relieve, en dosis pequeñas ------------------------- */

.tarjeta, .paso-ia, .necesita, .paso {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tarjeta:hover, .paso-ia:hover, .necesita:hover {
  transform: translateY(-2px);
  border-color: #cdd7e3;
  box-shadow: var(--sombra);
}

.captura-grande img, .captura-ancha img { box-shadow: var(--sombra-alta); }

@media (prefers-reduced-motion: reduce) {
  .btn, .tarjeta, .paso-ia, .necesita, .paso, .marcas-lista li { transition: none; }
  .btn:hover, .tarjeta:hover, .paso-ia:hover,
  .necesita:hover, .marcas-lista li:hover { transform: none; }
}

@media (max-width: 620px) {
  .marcas-lista { gap: 8px 6px; }
  .marcas-lista li { padding: 6px 12px 6px 9px; font-size: 13px; }
  .hipaa-head { align-items: flex-start; }
  .ley-sello { flex-direction: row; flex-wrap: wrap; }
  .bandera-grande { width: 34px; height: 23px; margin-bottom: 0; }
}


/* --------------------------- el checklist por pasos --------------------------- */

[hidden] { display: none !important; }

.pasos-check {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 24px 0 8px;
}

.paso-check {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px; cursor: pointer;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  font: inherit; color: var(--gris);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.paso-check:hover { border-color: #cdd7e3; box-shadow: var(--sombra); }

.paso-check-num {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fondo); color: var(--gris-claro);
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px;
  transition: background .18s ease, color .18s ease;
}

.paso-check-txt { display: grid; min-width: 0; }
.paso-check-txt strong { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.paso-check-txt em { font-style: normal; font-size: 12.5px; color: var(--gris-claro); }

.paso-check.activo {
  border-color: transparent; background: #fff;
  box-shadow: 0 0 0 2px var(--azul), var(--sombra);
}

.paso-check.activo .paso-check-num { background: var(--azul); color: #fff; }

/* Completo gana al activo en el color del número: saber que un paso está
   cerrado importa más que saber cuál se está mirando, que ya lo dice el aro. */
.paso-check.completo .paso-check-num { background: #e6f4ea; color: #137333; }
.paso-check.completo .paso-check-num::after { content: "✓"; font-size: 13px; }
.paso-check.completo .paso-check-num { font-size: 0; }
.paso-check.completo em { color: #137333; }

.nav-check {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linea);
}

.nav-check-pos { font-size: 13.5px; color: var(--gris-claro); }

.btn-paso {
  background: #fff; color: var(--gris);
  border: 1px solid var(--linea);
  box-shadow: 0 1px 2px rgba(10, 37, 64, .07);
}

.btn-paso:hover { border-color: #cdd7e3; color: var(--tinta); }
.nav-check .btn:disabled { opacity: .4; pointer-events: none; box-shadow: none; }

@media (max-width: 620px) {
  .pasos-check { grid-template-columns: 1fr; gap: 8px; }
  .paso-check { padding: 12px 14px; }
  .nav-check { flex-wrap: wrap; }
  .nav-check .btn { flex: 1; }
  .nav-check-pos { order: 3; width: 100%; text-align: center; }
}


/* --------------------------- el movil no se desborda --------------------------- */

/* Un elemento de rejilla no encoge por debajo de su contenido salvo que se le
   diga. Con capturas de 1280 px dentro de los pasos, eso empujaba la pagina
   entera 116 px a la derecha en un telefono. */
.pasos > li, .paso > *, .paso-cuerpo, .captura { min-width: 0; }
.captura img { width: 100%; height: auto; }

.g-icono { object-fit: contain; }


/* ------------------------- el bloque penal (Ley 74-25) ------------------------- */

.aviso-penal {
  margin: 26px 0 0; padding: 16px 20px;
  background: #fef7f6; border: 1px solid #f5c6c0;
  border-radius: var(--radio);
  font-size: 15.5px; color: #3c4043;
}

.aviso-penal strong { color: #a50e0e; font-weight: 600; }

/* Mismo diseño que el bloque de la 172-13, con el canto en rojo: es la misma
   jerarquía, distinto registro. */
.ley-penal::before { background: linear-gradient(180deg, #d93025, #a50e0e); }
.ley-sello-penal { background: #fce8e6; }
.ley-sello-penal .ley-num { color: #a50e0e; }
.ley-sello-penal .ley-pais { color: #a50e0e; }

.penas { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 18px; }

.penas li {
  display: grid; grid-template-columns: 130px 1fr; gap: 20px;
  padding-top: 18px; border-top: 1px solid var(--linea);
}

.penas li:first-child { padding-top: 0; border-top: 0; }

/* La pena primero y en grande: es el dato que hace leer el resto. */
.pena {
  display: block; text-align: center;
  padding: 12px 8px; border-radius: var(--radio);
  background: #fce8e6; color: #a50e0e;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: 17px; line-height: 1.2; letter-spacing: -.01em;
  align-self: start;
}

.pena em {
  display: block; margin-top: 4px;
  font-style: normal; font-weight: 500; font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase; opacity: .85;
}

.penas strong { display: block; font-size: 15.5px; color: var(--tinta); margin-bottom: 6px; }
.penas p { font-size: 14.5px; color: var(--gris); margin: 0 0 8px; }
.penas b { color: var(--tinta); font-weight: 600; }

.pena-nota {
  margin: 0; padding-left: 14px;
  border-left: 2px solid var(--linea);
  font-size: 13.5px; color: var(--gris-claro);
}

.entre-leyes { font-size: 15px; color: var(--gris); margin-top: 24px; }
.entre-leyes em { font-style: italic; }

@media (max-width: 620px) {
  .penas li { grid-template-columns: 1fr; gap: 12px; }
  .pena { text-align: left; padding: 10px 14px; }
}

/* --------------------------- descargo del pie --------------------------- */

.descargo-fuerte {
  max-width: none; margin-top: 32px; padding: 24px 26px;
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--radio);
  border-top: 1px solid var(--linea);
  color: var(--gris); font-size: 13.5px;
}

.descargo-fuerte p { margin: 0 0 12px; max-width: 86ch; }
.descargo-fuerte p:last-child { margin-bottom: 0; }
.descargo-fuerte strong { color: var(--tinta); font-weight: 600; }

.descargo-tit {
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 14.5px; color: var(--tinta);
}

/* El checklist pasó de tres pasos a cuatro. */
.pasos-check { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .pasos-check { grid-template-columns: 1fr 1fr; }
}

/* La tarjeta penal es larga: el sello se queda arriba en vez de estirarse y
   dejar una columna de color de medio metro. */
.ley-penal .ley-sello { align-self: start; }


/* --------------------------- medida de lectura --------------------------- */

/* `estrecho` ya no encoge el módulo: encoge solo el texto corrido, que es lo
   que de verdad se lee mal a lo ancho. Las tarjetas y las rejillas ocupan todo. */
.bloque .contenido.estrecho > p,
.bloque .contenido.estrecho > .caja-consejo,
.bloque .contenido.estrecho > .aviso-penal,
.bloque .contenido.estrecho > .entre-leyes,
.bloque .contenido.estrecho > .grupo-check > .grupo-sub,
.ley-txt p,
.penas p {
  max-width: 78ch;
}

/* La carta de consentimiento sí quiere ser angosta: es un documento para
   imprimir, no una página. */
.contenido.doc { max-width: 820px; }


/* ------------------------------ patrocinio ------------------------------ */

.patrocinio {
  background: #fff; border-top: 1px solid var(--linea);
  padding: 38px 0 34px; text-align: center;
}

.patrocinio-tit {
  margin: 0 0 20px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris-claro);
}

.patrocinio-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 22px 44px;
}

/* En escala de grises reposan al lado del contenido; al pasar por encima
   recuperan su color, que es de quien pone el dinero. */
.patrocinio-logos img {
  height: 30px; width: auto;
  filter: grayscale(1); opacity: .65;
  transition: filter .2s ease, opacity .2s ease;
}

.patrocinio-logos a:hover img,
.patrocinio-logos img:hover { filter: none; opacity: 1; }

@media (max-width: 620px) {
  .patrocinio { padding: 30px 0 26px; }
  .patrocinio-logos { gap: 18px 28px; }
  .patrocinio-logos img { height: 26px; }
}

/* En un bloque centrado, una caja con max-width se queda pegada a la izquierda
   si no se le dan márgenes automáticos. Le pasó al titular del CTA cuando se
   unificaron los anchos y los titulares recuperaron su medida. */
.cta h2 { margin-left: auto; margin-right: auto; }


/* --------------------------- oficinas en el pie --------------------------- */

.pie-fila { align-items: flex-start; }
.pie-marca { max-width: 34ch; }
.pie-horario { margin-top: 8px; color: var(--gris-claro); font-size: 12.5px; }

.pie-oficina { font-size: 13px; line-height: 1.65; }

.pie-oficina-tit {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta);
}

.pie-oficina address { font-style: normal; color: var(--gris); }

.pie-oficina a {
  display: inline-block; margin-top: 8px;
  color: var(--gris); text-decoration: none; font-weight: 600;
}

.pie-oficina a:hover { color: var(--azul); }

@media (max-width: 900px) {
  /* Cuatro columnas no caben en una tableta; en dos se leen igual de bien. */
  .pie-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 30px; }
  .pie-marca { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 620px) {
  .pie-fila { grid-template-columns: 1fr; gap: 24px; }
}