/* TurisRed — landing créditos IMSS
   Medidas exactas del PDF de la maqueta (TURISRED.pdf, 460.8 x 1420 pt) escaladas a 1440 px (x3.125):
   posiciones, tamaños de letra y colores salen de las líneas de texto del PDF (PyMuPDF);
   colores de marca de los PNG entregados. Valor de maqueta anotado junto a cada medida. */

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/opensans.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --azul: #082945;        /* PNG logo / complementos */
  --azul-titulo: #05192a; /* títulos azules en PDF */
  --azul-oscuro: #051829; /* botón oscuro en maqueta */
  --rojo: #d00018;        /* PNG logo / encabezado de tabla */
  --rojo-btn: #e63124;    /* botones rojos y tarjeta "Cobertura" en maqueta */
  --gris-tabla: #ced5da;
  --rosa: #f3c8bb;
  --gris-hero: #eceaeb;
  --gris-seccion: #f5f7f9;
  --texto: #030406;       /* texto de cuerpo y h2 en PDF */
  --texto-pie: #231f20;   /* textos de "¿Por qué elegirnos?" */
  --ancho: 1120px;        /* maqueta: contenido de x 180 a 1260 (+20 px de padding) */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15.6px;
  line-height: 1.35;
  color: var(--texto);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                 /* las animaciones laterales no deben abrir scroll horizontal */
}
@supports (overflow-x: clip) { body { overflow-x: clip; } }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; color: var(--texto); font-weight: 700; }
p { margin: 0 0 1em; }
a { color: inherit; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.centro { text-align: center; }

/* Etiqueta con doble línea roja (maqueta 18.8 px bold, línea de 26 px, icono 21 px a 6 px del texto) */
.etiqueta {
  display: inline-flex; align-items: flex-start; gap: 6px;
  font-size: 18.8px; font-weight: 700; color: var(--azul-titulo); line-height: 1.38;
  margin-bottom: 15px;
}
.etiqueta::before {
  content: ""; flex: none; width: 21px; height: 6px; margin-top: .6em;
  border-top: 2px solid var(--rojo); border-bottom: 2px solid var(--rojo);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 30% 50%, 0 50%);
}
.etiqueta--centro { display: flex; justify-content: center; }

/* h2: 29.4 px, paso de línea 40 px */
h2 { font-size: 29.4px; line-height: 1.36; margin-bottom: 20px; }

/* Botones (maqueta: 39 px de alto, píldora, texto a 16 px del borde) */
.botones { display: flex; flex-wrap: wrap; gap: 15px; }
.botones--centro { justify-content: center; gap: 68px; }
.btn {
  display: inline-flex; align-items: center; gap: 16px;
  min-height: 39px; padding: 5px 17px 5px 16px;
  border-radius: 999px; font-size: 18px; line-height: 1.3;
  color: #fff; text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.btn::after {
  content: ""; width: 6px; height: 6px; flex: none;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); margin-right: 3px;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn--rojo { background: var(--rojo-btn); }
.btn--azul { background: var(--azul-oscuro); }
.btn--chico { font-size: 15.6px; min-height: 39px; width: 245px; justify-content: space-between; padding: 5px 17px; }

/* Lista con check rojo (icono 27 px, texto a 37 px) */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  position: relative; padding-left: 37px; font-size: 21.9px; line-height: 1.37; margin-bottom: 8.5px;
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -13.5px; width: 27px; height: 27px;
  background: url("../img/check.png") center / contain no-repeat;
}

/* ===== CABECERA (maqueta: blanca, 90 px, x 6–1434, esquinas inferiores redondeadas)
   logo x 203–420, lema x 461 (21.9 px), Multiva x 1063–1243 ===== */
.cabecera { position: relative; z-index: 2; }
.cabecera__in {
  width: auto; max-width: none; display: flex; align-items: center; justify-content: center;
  height: 90px; background: #fff;
  border-radius: 0 0 45px 45px; margin: 0 6px; padding: 0 20px;
}
.cabecera__logo { margin-top: 3px; }
.cabecera__logo img { width: 217px; }
.cabecera__lema { margin: 0 0 0 41px; font-size: 21.9px; font-weight: 700; color: var(--azul-titulo); white-space: nowrap; }
.cabecera__multiva { width: 180px; margin: 4px 0 0 88px; }

/* ===== HERO (maqueta y 0–627; foto x 0–653, y 91–628; texto x 688) ===== */
.hero {
  position: relative; margin-top: -90px; padding: 90px 0 0;
  background: #ebebed;                /* mismo gris plano que BANNER 1 FINAL.jpg (cambio del cliente 2026-10-31) */
  border-radius: 0 0 70px 0; overflow: hidden; min-height: 628px;
}
.hero__foto { position: absolute; left: 0; bottom: 0; width: 45.35%; max-width: 653px; }
.hero__foto img { width: 100%; }
.hero__in { position: relative; display: flex; justify-content: flex-end; }
.hero__texto { width: 592px; padding: 53px 0 57px; margin-right: -20px; }
.hero h1 { font-size: 28.1px; line-height: 1.352; color: var(--azul-titulo); margin-bottom: 5px; }      /* y 149 / 187 */
.hero__sub { font-size: 21.9px; font-weight: 700; color: var(--texto); line-height: 1.37; margin-bottom: 27px; } /* y 230 / 260 */
.hero__checks { margin: 0 0 35px 74px; }                                                            /* texto x 799, y 317 */
.hero__checks li { color: var(--texto); }

/* ===== QUIÉNES SOMOS (maqueta y 765–1353; fotos x 759–1261) ===== */
.nosotros { padding: 138px 0 137px; }
.nosotros__in { display: grid; grid-template-columns: 1fr 502px; gap: 58px; align-items: start; }   /* texto x 186–694 */
.nosotros__texto { padding: 46px 0 0 5px; }                                                     /* texto x 185 */
.nosotros__texto p:not(.etiqueta) { font-size: 15.6px; line-height: 1.346; margin-bottom: 22px; }    /* pasos de 21 px */
.nosotros h2 { margin-bottom: 22px; }
.mision { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-top: 4px; }        /* icono y 1087 */
.mision img { width: 63px; }
.mision h3 { font-size: 21.9px; color: var(--azul-titulo); }
.nosotros__texto .btn { margin-top: 19px; margin-left: -5px; }                                     /* botón x 180 */
.nosotros__fotos { position: relative; height: 588px; }
.nosotros__sofa { position: absolute; left: 0; top: 0; width: 502px; }
.nosotros__abrazo { position: absolute; right: 0; bottom: 0; width: 270px; }
.nosotros__tarjeta {
  position: absolute; left: 0; bottom: 0; width: 208px; height: 200px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 20px 24px; border-radius: 12px; background: var(--rojo-btn); color: #fff;
  font-size: 22.6px; font-weight: 700; line-height: 1.37;
}

/* ===== CARACTERÍSTICAS (maqueta y 1490–2225; tabla x 300–1140, y 1672–2080) ===== */
.caracteristicas {
  padding: 52px 0 57px;
  background: #eeedeb url("../img/fondo-tabla.webp") center / cover no-repeat;
}
.caracteristicas h2 { margin-bottom: 50px; }
.tabla { max-width: 840px; margin: 0 auto 49px; overflow-x: auto; }
.tabla table { width: 100%; border-collapse: collapse; font-size: 15.6px; }
.tabla thead th {
  background: var(--rojo); color: #fff; font-size: 21.9px; text-align: left;
  padding: 10px 39px; height: 55px;
}
.tabla thead th:first-child { border-top-left-radius: 22px; }
.tabla thead th:last-child { border-top-right-radius: 22px; padding-left: 0; }
.tabla tbody th, .tabla tbody td { text-align: left; font-weight: 400; padding: 0 39px; height: 44px; color: var(--texto); }
.tabla tbody td { padding-left: 0; padding-right: 16px; }
.caracteristicas .btn { justify-content: space-between; padding-right: 26px; }
.caracteristicas .btn--rojo { width: 274px; }                                                   /* x 426–700 */
.caracteristicas .btn--azul { width: 245px; }                                                   /* x 768–1013 */
.tabla tbody tr:nth-child(odd) { background: var(--gris-tabla); }
.tabla tbody tr:nth-child(even) { background: #fff; }
.tabla tbody th, .tabla thead th:first-child { width: 318px; }                                      /* detalle en x 618 */

/* ===== MEJORA TU CRÉDITO (maqueta y 2226–3053; collage x 180–591, y 2362–2916; texto x 661) ===== */
.mejora { padding: 136px 0 137px; }
.mejora__in { display: grid; grid-template-columns: 411px 1fr; gap: 70px; align-items: start; }
.mejora__collage { width: 411px; }
.mejora__texto { padding-top: 8px; }
.mejora .etiqueta { margin-bottom: 16px; }
.mejora h2 { margin-bottom: 0; }
.mejora__texto > p:not(.etiqueta) { font-size: 15.6px; line-height: 1.38; color: var(--texto); margin: 0; }
.mejora h3 { font-size: 21.9px; color: var(--azul-titulo); margin: 32px 0 21px; }                      /* y 2637 */
.mejora__checks { display: grid; grid-template-columns: 323px 1fr; margin-bottom: 38px; }              /* col 2 en x 987 */
.mejora__checks li { font-size: 15.6px; padding-left: 36px; margin-bottom: 30px; line-height: 27px; }  /* pasos de 57.5 px */
.mejora__checks li:last-child { grid-column: 1 / -1; margin-bottom: 0; }
.mejora .botones { gap: 12px; flex-wrap: nowrap; }
.mejora .btn { flex: none; white-space: nowrap; }
.mejora .btn { font-size: 15.6px; gap: 14px; padding: 5px 13px 5px 16px; }                    /* 342 + 12 + 245 = 599 */

/* ===== POR QUÉ ELEGIRNOS (maqueta y 3053–3932; centros de columna x 367 / 718 / 1055) ===== */
.porque { background: var(--gris-seccion); padding: 79px 0 85px; }
.porque { padding-top: 79px; }
.porque .etiqueta { margin-bottom: 18px; }
.porque h2 { margin-bottom: 28px; }
.beneficios {
  display: grid; grid-template-columns: 300px 401px 274px;
  margin: 0 0 63px 37px; row-gap: 15px;
}
.beneficio { text-align: center; }
.beneficio img { width: 135px; margin: 0 auto 13px; }
.beneficio h3 { font-size: 18.8px; line-height: 1.38; margin: 0 auto 24px; color: var(--texto-pie); }
.beneficio:first-child h3 { color: var(--azul-titulo); }
.beneficio p { font-size: 15.6px; line-height: 1.35; margin: 0 auto; color: var(--texto-pie); }
.porque .btn { font-size: 15.6px; padding-left: 26px; gap: 20px; }                                    /* x 415–660 */

/* ===== PIE (maqueta y 3932–4438; columnas x 184 / 699 / 1076–1256) ===== */
.pie {
  background: #06204a url("../img/fondo-footer.webp") center top / cover no-repeat;
  color: #fff; padding: 71px 0 17px;
}
.pie__in { display: grid; grid-template-columns: 519px 1fr 188px; gap: 0; padding-bottom: 67px; }   /* línea en y 4368 */
.pie__col p:last-child { margin-bottom: 0; }
.pie__col:first-child { padding-left: 4px; }
.pie__logo { width: 213px; margin-bottom: 23px; }
.pie__col p { font-size: 18.8px; line-height: 1.36; margin-bottom: 25px; }
.pie__col p.pie__titulo { font-size: 21.9px; font-weight: 700; line-height: 1.37; margin-bottom: 22px; }
.pie__col:nth-child(2) .pie__titulo { margin-bottom: 21px; }                                         /* tel en y 4053 */
.pie__col--multiva img { margin-top: 3px; }
.pie__dato { display: flex; align-items: center; gap: 8px; font-size: 18.8px; line-height: 1.36; text-decoration: none; margin-bottom: 11px; }
.pie__dato img { width: 26px; }
.pie__botones { display: grid; gap: 17px; margin-top: 23px; justify-items: start; }                /* y 4139 / 4195 / 4249 */
.pie__col--multiva { display: flex; justify-content: flex-end; margin-right: 8px; }
.pie__col--multiva img { width: 180px; height: fit-content; }
.pie__legal {
  max-width: 1224px; padding: 30px 0 0; border-top: 2px solid rgba(255,255,255,.85);
  text-align: center; font-size: 15.6px;
}

/* ===== VOLVER ARRIBA (mismo lenguaje que los botones: píldora azul oscuro, chevron blanco) ===== */
.arriba {
  position: fixed; right: 24px; bottom: 24px; z-index: 20;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--azul-oscuro); box-shadow: 0 8px 22px rgba(5,24,41,.28);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .2s ease;
}
.arriba::before {
  content: ""; width: 10px; height: 10px; margin-top: 5px;
  border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(45deg);
}
.arriba.visible { opacity: 1; visibility: visible; transform: none; }
.arriba:hover { background: var(--rojo-btn); transform: translateY(-3px); }
.arriba:focus-visible { outline: 2px solid var(--rojo-btn); outline-offset: 3px; }

/* ===== RESPONSIVO ===== */
@media (max-width: 1240px) {
  .cabecera__lema { font-size: 18px; margin-left: 28px; }
  .cabecera__multiva { margin-left: 40px; }
  .beneficios { grid-template-columns: repeat(3, 1fr); margin-left: 0; }
}

@media (max-width: 1100px) {
  .cabecera__lema { font-size: 16px; margin-left: 20px; }
  .cabecera__logo img { width: 180px; }
  .cabecera__multiva { width: 150px; margin-left: 24px; }
  .hero__foto { width: 38%; }
  .hero__texto { width: 58%; margin-right: 0; }
  .hero__checks { margin-left: 30px; }
  .nosotros__in, .mejora__in { gap: 40px; }
  .mejora .botones { flex-wrap: wrap; }
  .nosotros__in { grid-template-columns: 1fr 420px; }
  .nosotros__fotos { height: 492px; }
  .nosotros__sofa { width: 420px; }
  .nosotros__abrazo { width: 226px; }
  .nosotros__tarjeta { width: 175px; height: 168px; font-size: 19px; }
  .mejora__in { grid-template-columns: 340px 1fr; }
  .mejora__collage { width: 340px; }
  .mejora__checks { grid-template-columns: 1fr 1fr; }
  .pie__in { grid-template-columns: 1fr 1fr; gap: 40px; }
  .pie__col--multiva { grid-column: 1 / -1; justify-content: flex-start; margin-right: 0; }
}

@media (max-width: 860px) {
  h2 { font-size: 26px; }
  .pie br, .mejora h2 br, .nosotros__texto p br, .mejora__texto p br { display: none; }
  .cabecera__in { height: 72px; border-radius: 0 0 28px 28px; justify-content: space-between; }
  .cabecera__lema { display: none; }
  .cabecera__logo img { width: 160px; }
  .cabecera__multiva { width: 130px; margin-left: auto; }
  .hero { margin-top: -72px; padding-top: 72px; border-radius: 0 0 44px 0; min-height: 0; display: flex; flex-direction: column; }
  .hero__in { flex-direction: column; }
  .hero__foto { position: relative; width: 70%; max-width: 360px; margin: 18px auto 0; order: 2; }
  .hero__foto img { aspect-ratio: 1 / 1; object-fit: cover; object-position: left bottom; }   /* la pareja ocupa el lado izquierdo del banner */
  .hero__texto { width: 100%; padding: 30px 0 0; }
  .hero h1 { font-size: 24px; }
  .hero__sub { font-size: 18px; margin-bottom: 20px; }
  .hero__checks { margin-left: 0; }
  .checks li { font-size: 18px; padding-left: 34px; }
  .checks li::before { width: 24px; height: 24px; margin-top: -12px; }
  .nosotros, .mejora { padding: 64px 0; }
  .nosotros__in, .mejora__in { grid-template-columns: 1fr; }
  .nosotros__texto { padding: 0; }
  .nosotros__texto .btn { margin-left: 0; }
  .nosotros__fotos { height: auto; aspect-ratio: 502 / 588; max-width: 502px; width: 100%; margin: 0 auto; }
  .nosotros__sofa { width: 100%; }
  .nosotros__abrazo { width: 53.8%; }
  .nosotros__tarjeta { width: 41.4%; height: 34%; font-size: clamp(14px, 4vw, 22px); padding: 10px; }
  .mejora__collage { width: 100%; max-width: 411px; margin: 0 auto; order: 2; }
  .mejora__texto { padding-top: 0; }
  .mejora__checks { grid-template-columns: 1fr; }
  .mejora__checks li { margin-bottom: 14px; }
  .mejora__checks li:last-child { grid-column: auto; }
  .caracteristicas { padding: 48px 0; }
  .caracteristicas h2 { margin-bottom: 30px; }
  .tabla thead th { font-size: 18px; padding: 10px 16px; }
  .tabla tbody th, .tabla tbody td { padding: 10px 16px; height: auto; font-size: 15px; }
  .tabla tbody th, .tabla thead th:first-child { width: 40%; }
  .tabla thead th:last-child, .tabla tbody td { padding-left: 0; padding-right: 16px; }
.caracteristicas .btn { justify-content: space-between; padding-right: 26px; }
.caracteristicas .btn--rojo { width: 274px; }                                                   /* x 426–700 */
.caracteristicas .btn--azul { width: 245px; }                                                   /* x 768–1013 */
  .botones--centro { gap: 14px; }
  .beneficios { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .beneficio img { width: 110px; }
  .beneficio h3 { font-size: 16px; margin-bottom: 8px; }
  .beneficio p { font-size: 14.5px; }
  .porque { padding: 56px 0 64px; }
  .pie { padding-top: 48px; }
  .pie__in { grid-template-columns: 1fr; gap: 30px; padding-bottom: 40px; }
  .pie__col p, .pie__dato { font-size: 16px; }
  .pie__col p.pie__titulo { font-size: 19px; }
  .pie__legal { font-size: 13px; }
  .arriba { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

@media (max-width: 520px) {
  .botones .btn { width: 100%; justify-content: space-between; font-size: 16px; }
  .beneficios { grid-template-columns: 1fr; }
  .btn--chico { width: 100%; }
  .pie__botones { justify-items: stretch; }
}

/* ===== ANIMACIONES (pedidas en el video del KAM) ===== */
.js [data-anim] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js [data-anim="izq"] { transform: translateX(-40px); }
.js [data-anim="der"] { transform: translateX(40px); }
.js [data-anim].visible { opacity: 1; transform: none; }
.beneficio img { transition: transform .35s ease; }
.beneficio:hover img { transform: scale(1.07) rotate(-3deg); }
.nosotros__tarjeta { transition: transform .3s ease, box-shadow .3s ease; }
.nosotros__tarjeta:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(230,49,36,.3); }
.tabla tbody tr { transition: background-color .2s ease; }
.tabla tbody tr:hover { background: var(--rosa); }
.btn--rojo { animation: latido 2.8s ease-in-out infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,49,36,.45); } 50% { box-shadow: 0 0 0 9px rgba(230,49,36,0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn--rojo { transition: none; animation: none; }
  .js [data-anim] { opacity: 1; transform: none; transition: none; }
  .arriba { transition: none; }
}