/* ==========================================================================
   Seguros Pietrantonio — Hoja de estilos principal
   Paleta: azul marca (#1e3a8a, #2563eb, #60a5fa) + naranja CTA (#f97316)
   Tipografías: Fraunces (títulos) + Outfit (texto)
   Enfoque: mobile-first
   ========================================================================== */

:root {
  --navy-900: #14275f;
  --navy: #1e3a8a;
  --blue: #2563eb;
  --blue-light: #60a5fa;
  --orange: #f97316;
  --orange-dark: #ea580c;
  --ink: #1c2740;
  --slate: #55617e;
  --bg: #ffffff;
  --bg-tint: #f5f8ff;
  --line: #dfe7f5;
  --radius: 18px;
  --shadow-blue: 0 12px 32px -10px rgba(30, 58, 138, .35);
  --shadow-soft: 0 10px 30px -12px rgba(30, 58, 138, .18);
  --shadow-orange: 0 12px 28px -10px rgba(249, 115, 22, .45);
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Outfit", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.container { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-sans); font-weight: 600; text-decoration: none;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn--cta {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #fff; box-shadow: var(--shadow-orange);
}
.btn--cta:hover { box-shadow: 0 16px 34px -10px rgba(249, 115, 22, .6); }

.btn--whatsapp { background: #25d366; color: #fff; box-shadow: 0 8px 20px -8px rgba(37, 211, 102, .6); }
.btn--whatsapp:hover { box-shadow: 0 12px 26px -8px rgba(37, 211, 102, .75); }

.btn--ghost {
  background: rgba(255, 255, 255, .08); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .45); backdrop-filter: blur(4px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

.btn--sm { padding: .5rem 1.1rem; font-size: .9rem; }
.btn--lg { padding: .95rem 1.7rem; font-size: 1.05rem; }
.btn--block { width: 100%; padding: 1rem; font-size: 1.05rem; }

/* ===== Navbar ===== */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.navbar__logo { width: auto; height: 56px; object-fit: contain; }

.navbar__nav { display: none; }
.navbar__link {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem;
  padding: .35rem .15rem; border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.navbar__link:hover { color: var(--blue); border-color: var(--blue-light); }
.navbar__link:active { color: var(--navy); }

.navbar__toggle {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; /* área de toque mínima recomendada */
}
.navbar__toggle span {
  width: 24px; height: 2.5px; border-radius: 2px; background: var(--navy);
  transition: transform .25s ease, opacity .25s ease;
}
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Menú móvil desplegado */
.navbar__nav.is-open {
  display: flex; flex-direction: column; align-items: stretch; gap: .1rem;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: .75rem 1.25rem 1.25rem; box-shadow: var(--shadow-soft);
}
/* Links del menú móvil con altura de toque cómoda */
.navbar__nav.is-open .navbar__link {
  display: flex; align-items: center; min-height: 48px;
  border-bottom: 1px solid var(--line);
}
.navbar__nav.is-open .navbar__link:last-of-type { border-bottom: 0; }
.navbar__nav.is-open .navbar__cta { margin-top: .5rem; }

@media (min-width: 900px) {
  .navbar__toggle { display: none; }
  .navbar__nav { display: flex; align-items: center; gap: 1.6rem; }
}

/* ===== Hero ===== */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy) 45%, var(--blue) 100%);
  /* Los 5rem de abajo dejan libre la onda (60px) para que no tape las tarjetas */
  padding: 4rem 0 5rem;
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; pointer-events: none; }
.hero__glow--1 { width: 420px; height: 420px; background: var(--blue-light); top: -140px; right: -100px; }
.hero__glow--2 { width: 360px; height: 360px; background: var(--orange); bottom: -180px; left: -140px; opacity: .22; }

.hero__inner { position: relative; display: grid; gap: 3rem; }

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  color: #dbeafe; font-size: .8rem; font-weight: 500; letter-spacing: .02em;
  padding: .45rem .9rem; border-radius: 999px; margin-bottom: 1.3rem;
}

.hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.12; letter-spacing: -.01em;
  margin-bottom: 1.1rem;
}
.hero__title em { font-style: italic; color: var(--blue-light); }

.hero__subtitle { color: #cfe0ff; font-size: 1.06rem; max-width: 34rem; font-weight: 300; margin-bottom: 1.8rem; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.6rem; }

.hero__stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.8rem; }
.hero__stat dt { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: #fff; line-height: 1; }
.hero__stat dd { color: #b8d0fb; font-size: .88rem; margin-top: .3rem; }

/* Tarjetas visuales del hero */
/* En mobile las tarjetas van apiladas bajo el logo (flex column). Antes iban
   todas absolutas y, al no ocupar lugar, la de "Nuestro equipo" se salía del
   hero: la onda inferior le cortaba las fotos. Desde 900px vuelven a flotar. */
.hero__visual {
  position: relative; justify-self: center; margin-top: .5rem;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.hero__card {
  background: rgba(255, 255, 255, .97); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-blue);
}
.hero__card--main {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.5rem 1.7rem; text-align: center; font-size: .92rem;
  transform: rotate(-2deg);
}
.hero__card--main img { width: 150px; height: auto; }
.hero__card--float {
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; padding: .55rem .8rem;
  animation: float 5s ease-in-out infinite;
}
/* La única que sigue flotando en mobile: es chica y cae sobre el logo */
.hero__card--check { position: absolute; top: -16px; right: -8px; }
.hero__card--shield { animation-delay: 2.5s; }
.hero__card-icon {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: #fff; font-size: .7rem;
}

.hero__card--team {
  flex-direction: column; gap: .4rem;
  padding: .65rem .8rem; animation-delay: 1.2s;
}
.hero__team-avatars { display: flex; }
.hero__team-avatars img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 2px 8px -2px rgba(15, 23, 42, .35);
  margin-left: -18px;
}
.hero__team-avatars img:first-child { margin-left: 0; }
.hero__team-label { font-size: .78rem; font-weight: 700; color: var(--slate); letter-spacing: .01em; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__card--float { animation: none; }
  html { scroll-behavior: auto; }
}

.hero__wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; }

@media (min-width: 900px) {
  .hero { padding: 5.5rem 0 8rem; }
  .hero__inner { grid-template-columns: 1.25fr 1fr; align-items: center; }
  /* Acá sí hay espacio de sobra: las tarjetas vuelven a flotar alrededor
     del logo en vez de apilarse debajo. */
  .hero__visual { margin-top: 0; display: grid; place-items: center; }

  .hero__card--main { gap: .6rem; padding: 2.2rem 2.4rem; font-size: 1.05rem; }
  .hero__card--main img { width: 200px; }
  .hero__card--float { position: absolute; gap: .55rem; font-size: .9rem; padding: .75rem 1.1rem; }
  .hero__card--check { top: -18px; right: -10px; }
  .hero__card--shield { top: 100%; left: -18px; margin-top: -14px; }
  .hero__card-icon { width: 26px; height: 26px; font-size: .8rem; }

  .hero__card--team { gap: .5rem; top: 100%; left: -18px; margin-top: 50px; padding: .85rem 1.05rem; }
  .hero__team-avatars img { width: 68px; height: 68px; border-width: 3px; margin-left: -24px; }
  .hero__team-label { font-size: .82rem; }
}

/* ===== Secciones genéricas ===== */
.section { padding: 4.2rem 0; }
.section--tint { background: var(--bg-tint); }
.section--dark {
  background: linear-gradient(150deg, var(--navy-900), var(--navy) 55%, #1d44a8);
  color: #fff;
}

.section__eyebrow {
  color: var(--orange); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: .6rem;
}
.section__eyebrow--light { color: #fdba74; }

.section__title {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  font-size: clamp(1.7rem, 4.5vw, 2.5rem); line-height: 1.15; margin-bottom: 1rem;
  max-width: 38rem;
}
.section__title--light { color: #fff; }

.section__lead { color: var(--slate); max-width: 40rem; margin-bottom: 2.6rem; }

/* ===== Rubros (acordeones) ===== */
.rubros { display: grid; gap: 1rem; margin-top: 2.4rem; align-items: start; }

.rubro {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rubro:hover { transform: translateY(-3px); box-shadow: var(--shadow-blue); border-color: var(--blue-light); }

.rubro__head {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.1rem 1.2rem; font-family: var(--font-sans);
}
.rubro__head:active { background: var(--bg-tint); }

.rubro__icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 13px; color: #fff;
  background: linear-gradient(135deg, var(--icono-1, var(--navy)), var(--icono-2, var(--blue)));
  box-shadow: 0 6px 14px -6px rgba(var(--icono-sombra, 37, 99, 235), .6);
}

/* Color por rubro en el ícono del home.
   Cada tarjeta lleva el color del hero de su propia página (ver .page-hero--*
   más abajo), así el rubro se reconoce de un vistazo antes de entrar y la
   página de destino no cambia de clima al abrirse.
   --icono-1 es el --hero-2 de esa página y --icono-2 su --hero-glow.
   El ícono va en blanco: el extremo claro del degradado tiene que quedar por
   encima de 3:1 de contraste contra el blanco. Por eso el oliva de la ART usa
   #8a8a18 y no el #b5b520 del hero, que en un tile chico se lava (2,2:1). */
.rubro--auto     { --icono-1: #2f3947; --icono-2: #64748b; --icono-sombra:  71,  85, 105; }
.rubro--moto     { --icono-1: #701a1a; --icono-2: #dc2626; --icono-sombra: 153,  27,  27; }
.rubro--hogar    { --icono-1: #6f270e; --icono-2: #ea580c; --icono-sombra: 154,  52,  18; }
.rubro--comercio { --icono-1: #26282c; --icono-2: #6b7280; --icono-sombra:  55,  65,  81; }
.rubro--art      { --icono-1: #41410c; --icono-2: #8a8a18; --icono-sombra:  77,  77,  16; }
.rubro--caucion  { --icono-1: #573309; --icono-2: #d97706; --icono-sombra: 146,  64,  14; }
.rubro--salud    { --icono-1: #781b45; --icono-2: #db2777; --icono-sombra: 157,  23,  77; }
.rubro--retiro   { --icono-1: #1e422c; --icono-2: #16a34a; --icono-sombra:  22, 101,  52; }
.rubro__icon svg { width: 24px; height: 24px; }

.rubro__name { flex: 1; font-weight: 600; font-size: 1.02rem; color: var(--ink); }

.rubro__chevron {
  flex: none; width: 10px; height: 10px;
  border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg); transition: transform .25s ease;
}
.rubro__head[aria-expanded="true"] .rubro__chevron { transform: rotate(225deg); }

.rubro__panel {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
}

.rubro__list { list-style: none; padding: 0 1.2rem 1.15rem; }
.rubro__list li {
  position: relative; padding: .3rem 0 .3rem 1.6rem; color: var(--slate); font-size: .95rem;
}
.rubro__list li::before {
  content: ""; position: absolute; left: .2rem; top: .72rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--blue-light));
}

.rubros__note { margin-top: 2rem; color: var(--slate); text-align: center; }
.rubros__note a {
  color: var(--blue); font-weight: 600;
  display: inline-block; padding: .5rem .25rem; /* área de toque cómoda */
}
.rubros__note a:hover { color: var(--navy); }

@media (min-width: 640px) { .rubros { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rubros { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) {
  .rubro__head { flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1.3rem; }
  .rubro__chevron { position: absolute; }
  .rubro { position: relative; }
  .rubro .rubro__chevron { top: 1.5rem; right: 1.3rem; }
  .rubro__list { padding-inline: 1.3rem; }
}

/* ===== Contenido legal (Privacidad / Términos) ===== */
.legal { max-width: 46rem; margin-inline: auto; padding-block: 3rem 5rem; }
.legal__updated { color: var(--slate); font-size: .9rem; margin-bottom: 2.5rem; }
.legal h2 {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  font-size: 1.4rem; margin: 2.4rem 0 .9rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { color: var(--slate); margin-bottom: 1rem; }
.legal ul { color: var(--slate); margin: 0 0 1rem 1.3rem; }
.legal li { margin-bottom: .4rem; }
.legal a { color: var(--blue); }
.legal a:hover { color: var(--navy); }
.legal strong { color: var(--ink); }

/* ===== FAQ (acordeón) ===== */
.faq { display: grid; gap: 1rem; margin-top: 2.4rem; max-width: 46rem; }

.faq__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.faq__item:hover { border-color: var(--blue-light); }

.faq__question {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.1rem 1.3rem; font-family: var(--font-sans);
  font-weight: 600; font-size: 1rem; color: var(--ink);
}
.faq__question:active { background: var(--bg-tint); }

.faq__chevron {
  flex: none; width: 10px; height: 10px; margin-left: auto;
  border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq__question[aria-expanded="true"] .faq__chevron { transform: rotate(225deg); }

.faq__panel {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
}

.faq__answer { padding: 0 1.3rem 1.15rem; color: var(--slate); font-size: .95rem; line-height: 1.65; }

/* ===== Cotizador ===== */
.cotizador { display: grid; gap: 2.8rem; }

.cotizador__text { color: #cfe0ff; margin-bottom: 1.6rem; max-width: 32rem; }

.cotizador__steps { list-style: none; counter-reset: paso; display: grid; gap: 1rem; }
.cotizador__steps li {
  counter-increment: paso; position: relative;
  padding-left: 3.2rem; color: #dbeafe; font-weight: 300;
}
.cotizador__steps li strong { color: #fff; font-weight: 600; }
.cotizador__steps li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
  border-radius: 50%; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  box-shadow: var(--shadow-orange);
}

.cotizador__form {
  background: #fff; color: var(--ink);
  border-radius: calc(var(--radius) + 6px);
  padding: 1.8rem 1.5rem 1.5rem;
  box-shadow: 0 24px 60px -20px rgba(10, 20, 50, .55);
}
.cotizador__form-title {
  font-family: var(--font-display); color: var(--navy);
  font-size: 1.45rem; margin-bottom: 1.3rem;
}

.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label { font-weight: 600; font-size: .88rem; color: var(--navy); }
.field input {
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
  padding: .75rem .9rem; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--bg-tint);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  width: 100%;
}
.field input:hover { border-color: var(--blue-light); }
.field input:focus {
  outline: none; border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}

.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
/* El código postal es corto: no necesita media columna al lado de la localidad */
@media (min-width: 560px) { .field-row--cp { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); } }

/* Toda la tarjeta es clickeable y supera los 44px de alto recomendados */
.field--checkbox {
  flex-direction: row; align-items: center; gap: .75rem;
  background: var(--bg-tint); border: 1.5px dashed var(--blue-light);
  border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1.2rem;
  min-height: 56px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.field--checkbox:hover { border-color: var(--blue); background: #eef4ff; }
.field--checkbox input {
  width: 1.5rem; height: 1.5rem;
  accent-color: var(--blue); flex: none; cursor: pointer;
}
.field--checkbox label {
  font-weight: 500; font-size: .92rem; color: var(--slate);
  cursor: pointer; flex: 1; padding: .35rem 0;
}

/* Refuerzo de confianza justo debajo del botón de envío */
.cotizador__promise {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: .9rem; font-size: .92rem; font-weight: 600; color: #15803d;
}
.cotizador__promise svg { flex: none; }

.field__opt { font-weight: 400; color: var(--slate); }

.cotizador__disclaimer { font-size: .85rem; color: var(--slate); text-align: center; margin-top: .5rem; }

.form-status { display: none; margin-top: 1rem; padding: 1rem; border-radius: 12px; font-size: .95rem; }
.form-status.is-error { display: block; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.form-status.is-success { display: block; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; text-align: center; }
.form-status.is-success .btn { margin-top: .8rem; }

@media (min-width: 900px) {
  .cotizador { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .cotizador__form { padding: 2.2rem 2.2rem 1.8rem; }
}

/* ===== Por qué elegirnos ===== */
.features { display: grid; gap: 1.2rem; margin-top: 2.4rem; }

.feature {
  position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.5rem; box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.feature::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: linear-gradient(180deg, var(--blue-light), var(--navy));
  opacity: 0; transition: opacity .2s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-blue); }
.feature:hover::before { opacity: 1; }

.feature__icon {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 14px; margin-bottom: 1rem; color: var(--blue);
  background: linear-gradient(135deg, #e4edff, #f5f8ff);
  border: 1px solid var(--line);
}
.feature__icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.08rem; color: var(--navy); margin-bottom: .45rem; }
.feature p { color: var(--slate); font-size: .95rem; }

@media (min-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(4, 1fr); } }

/* ===== Compañías ===== */
.companias {
  list-style: none; display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr); margin-top: 2.2rem;
}
.compania {
  display: grid; place-items: center; min-height: 86px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem; color: var(--slate); font-weight: 600; font-size: .92rem;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.compania:hover { transform: translateY(-3px); color: var(--navy); border-color: var(--blue-light); box-shadow: var(--shadow-blue); }
/* Los logos están normalizados a un lienzo 480x160 con área óptica pareja,
   así que basta con darles un ancho común: todos quedan del mismo tamaño visual. */
.compania img {
  width: 100%; max-width: 150px; height: auto;
  object-fit: contain;
}
.compania--more { border-style: dashed; color: var(--blue); background: var(--bg-tint); }

@media (min-width: 640px) { .companias { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .companias { grid-template-columns: repeat(5, 1fr); } }

/* ===== Contacto ===== */
.section--contact { background: var(--bg-tint); }
.contacto { display: grid; gap: 1.6rem; margin-top: 2.2rem; }

.contacto__cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.contacto__card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 1rem; align-items: center; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.15rem 1.3rem; box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contacto__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-blue); border-color: var(--blue-light); }
.contacto__card:active { transform: translateY(-1px); }

.contacto__icon {
  grid-row: span 2; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px; color: #fff;
}
.contacto__card--wa .contacto__icon { background: linear-gradient(135deg, #25d366, #128c7e); }
.contacto__card--ig .contacto__icon { background: linear-gradient(135deg, #f58529, #dd2a7b 60%, #8134af); }
.contacto__card--mail .contacto__icon { background: linear-gradient(135deg, var(--blue), var(--navy)); }
.contacto__card--map .contacto__icon { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); }

.contacto__label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); }
.contacto__value { color: var(--navy); font-weight: 600; font-size: .98rem; }
/* La dirección completa ocupa dos renglones: achica un poco para que entre prolija */
.contacto__card--map .contacto__value { font-size: .88rem; line-height: 1.35; }

.contacto__map {
  min-height: 320px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-blue);
}

@media (min-width: 900px) {
  .contacto { grid-template-columns: 1fr 1.2fr; }
  .contacto__map { min-height: 100%; }
}

/* ===== Franja SSN ===== */
.ssn-strip { background: var(--bg-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.6rem 0; }
.ssn-strip__inner { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; }
.ssn-strip__logo { height: 42px; width: auto; }
.ssn-strip__text { color: var(--slate); font-size: .85rem; font-weight: 600; letter-spacing: .01em; }

@media (min-width: 640px) {
  .ssn-strip__inner { flex-direction: row; justify-content: center; gap: 1.3rem; }
}

/* ===== Footer ===== */
.footer { background: var(--navy-900); color: #b8d0fb; }
.footer__grid { display: grid; gap: 2.2rem; padding: 3.5rem 0 2.5rem; }

.footer__logo {
  width: 160px; height: auto; background: #fff;
  border-radius: 12px; padding: .5rem .9rem; margin-bottom: 1rem;
}
.footer__brand p { font-size: .82rem; font-weight: 300; max-width: 22rem; }

.footer__col { display: flex; flex-direction: column; gap: .4rem; }
.footer__col h3 {
  color: #fff; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: .3rem;
}
/* min-height moderado para mantener un área de toque razonable en celular sin agrandar la franja */
.footer__col a {
  color: #b8d0fb; text-decoration: none; font-size: .82rem;
  display: flex; align-items: center; min-height: 36px;
  transition: color .2s ease;
}
.footer__col a:hover { color: #fff; }

.footer__legal { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1.2rem 0; }
.footer__legal p { font-size: .78rem; color: #a9c4f2; text-align: center; }

@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr .8fr 1.2fr; } }

/* ===== Botón flotante de WhatsApp ===== */
.whatsapp-float {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  display: grid; place-items: center; width: 60px; height: 60px;
  border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #25d366, #128c7e);
  box-shadow: 0 10px 26px -6px rgba(18, 140, 126, .65);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: pulse 2.6s ease-in-out infinite;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 14px 32px -6px rgba(18, 140, 126, .8); }
.whatsapp-float:active { transform: scale(1); }

@keyframes pulse {
  0%, 100% { box-shadow: 0 10px 26px -6px rgba(18, 140, 126, .65), 0 0 0 0 rgba(37, 211, 102, .45); }
  50% { box-shadow: 0 10px 26px -6px rgba(18, 140, 126, .65), 0 0 0 14px rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-float { animation: none; } }

/* Campo trampa anti-spam del cotizador: invisible para personas y para lectores
   de pantalla, pero presente en el HTML que leen los bots. Ver index.html. */
.hp-field { display: none; }

/* ===== Animaciones de aparición (scroll reveal) ===== */
/* El estado oculto depende de la clase .js que agrega el <head> de index.html.
   Si el JS está bloqueado o falla, .js nunca se aplica y el contenido se ve
   normalmente en vez de quedar invisible para siempre. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   PÁGINAS DE RUBRO (/seguro-de-auto/, /art/, /seguro-de-hogar/, etc.)
   Todo lo de acá abajo lo usan únicamente esas páginas. El home no lo toca.
   ========================================================================== */

/* ===== Migas de pan ===== */
/* Además de orientar al visitante, le dicen a Google la jerarquía del sitio.
   El JSON-LD de BreadcrumbList de cada página repite exactamente estos pasos. */
.breadcrumb { padding: .9rem 0; font-size: .82rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
/* En blanco translúcido y no en celeste: las migas van sobre el fondo del
   rubro, que puede ser verde, violeta o grafito según la página. */
.breadcrumb li { display: flex; align-items: center; gap: .45rem; color: rgba(255, 255, 255, .78); }
.breadcrumb li:not(:last-child)::after { content: "›"; color: rgba(255, 255, 255, .45); }
.breadcrumb a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .2s ease; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; font-weight: 500; }

/* ===== Encabezado de la página de rubro ===== */
/* Más bajo que el hero del home a propósito: acá el visitante ya sabe qué
   busca, así que el objetivo es que el H1 y el formulario entren juntos en
   pantalla, no impresionar. */
.page-hero {
  /* Colores por defecto (azul de marca). Cada rubro los pisa más abajo con su
     clase --auto, --moto, --hogar, etc. Al estar declarados como variables,
     el degradado, el resplandor y el color de la palabra en itálica del título
     cambian los tres juntos con solo agregar una clase en el HTML. */
  --hero-1: var(--navy-900);
  --hero-2: var(--navy);
  --hero-3: #2a52b8;
  --hero-glow: var(--blue-light);
  --hero-acento: #93c5fd;

  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--hero-1) 0%, var(--hero-2) 45%, var(--hero-3) 100%);
  color: #fff; padding-bottom: 3.6rem;
}
.page-hero__glow {
  position: absolute; border-radius: 50%; filter: blur(90px);
  pointer-events: none; width: 380px; height: 380px;
  background: var(--hero-glow); opacity: .34; top: -160px; right: -120px;
}
.page-hero__inner { position: relative; padding-top: 1.4rem; max-width: 46rem; }
.page-hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .92); padding: .4rem .9rem; border-radius: 999px;
  font-size: .78rem; font-weight: 500; margin-bottom: 1.1rem;
}
.page-hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.95rem, 6.2vw, 3rem); line-height: 1.1;
  letter-spacing: -.02em; margin-bottom: 1rem;
}
.page-hero__title em { font-style: italic; color: var(--hero-acento); }
/* Blanco translúcido en vez de un celeste fijo: así el subtítulo se lee bien
   sobre cualquiera de los ocho fondos, no solo sobre el azul. */
.page-hero__lead { color: rgba(255, 255, 255, .86); font-size: 1.05rem; font-weight: 300; margin-bottom: 1.7rem; }

/* ===== Un color por rubro =====
   Cada página de rubro tiene su propio degradado para que se distinga de un
   vistazo. Los ocho comparten la misma receta —tres tonos del mismo color, del
   más oscuro arriba a la izquierda al más claro abajo a la derecha— así que se
   ven distintos pero de la misma familia.

   Los ocho son oscuros y apagados por dos motivos concretos, no por gusto:
   1. El texto del título va en blanco. Contra estos fondos queda entre 8,6:1 y
      18:1 de contraste, muy por encima del 4,5:1 que se considera legible.
   2. El botón naranja de "Cotizar" tiene que saltar a la vista en las ocho
      páginas. Contra estos fondos queda como mínimo en 3,07:1, que es el piso
      recomendado para un botón. Si los amarillos o el naranja del hogar
      fueran más claros, el botón se fundiría con el fondo y se perdería la
      consulta. Por eso: si algún día se aclara un fondo, hay que volver a
      medirlo contra el naranja #f97316. */

/* Auto: gris acero, con un tinte frío que recuerda al asfalto y a la chapa. */
.page-hero--auto {
  --hero-1: #1c212a; --hero-2: #2f3947; --hero-3: #3d4a5c;
  --hero-glow: #64748b; --hero-acento: #cbd5e1;
}
/* Moto: rojo granate, el rojo con más carácter y sin estridencia. */
.page-hero--moto {
  --hero-1: #380c0c; --hero-2: #701a1a; --hero-3: #872022;
  --hero-glow: #dc2626; --hero-acento: #fca5a5;
}
/* Hogar: terracota, el naranja del ladrillo y del techo de tejas. */
.page-hero--hogar {
  --hero-1: #3d1206; --hero-2: #6f270e; --hero-3: #853010;
  --hero-glow: #ea580c; --hero-acento: #fdba74;
}
/* Comercio: carbón. Es el plomo más neutro y oscuro, para no confundirlo con
   el gris azulado del auto. */
.page-hero--comercio {
  --hero-1: #141518; --hero-2: #26282c; --hero-3: #33353a;
  --hero-glow: #6b7280; --hero-acento: #d1d5db;
}
/* ART: amarillo oliva. Es el amarillo de la seguridad industrial, tirado al
   verde para que no se confunda con el ámbar del retiro. */
.page-hero--art {
  --hero-1: #26260a; --hero-2: #41410c; --hero-3: #4e4e10;
  --hero-glow: #b5b520; --hero-acento: #dcdc6e;
}
/* Caución: ámbar miel. Es el otro amarillo, pero corrido al naranja para
   separarlo del oliva de la ART. */
.page-hero--caucion {
  --hero-1: #331e06; --hero-2: #573309; --hero-3: #69400d;
  --hero-glow: #d97706; --hero-acento: #fcd34d;
}
/* Salud: rosa apagado, lo médico sin el rojo de la alarma. */
.page-hero--salud {
  --hero-1: #3d0f27; --hero-2: #781b45; --hero-3: #8c2050;
  --hero-glow: #db2777; --hero-acento: #f9a8d4;
}
/* Retiro: verde bosque, el verde del dinero que crece. Va con el signo $ del
   ícono del home. */
.page-hero--retiro {
  --hero-1: #0f2418; --hero-2: #1e422c; --hero-3: #265335;
  --hero-glow: #16a34a; --hero-acento: #86efac;
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.page-hero__wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 52px; }

/* ===== Respuesta directa ===== */
/* Bloque corto y autocontenido al principio de cada página: responde la
   pregunta del título en dos o tres oraciones, sin depender del resto del
   texto. Es el fragmento que Google levanta como destacado y el que citan
   ChatGPT, Gemini y Perplexity, que necesitan un pasaje que se entienda solo. */
.answer-box {
  background: var(--bg-tint); border: 1px solid var(--line);
  border-left: 4px solid var(--orange); border-radius: 14px;
  padding: 1.3rem 1.4rem; margin-bottom: 2.4rem;
  box-shadow: var(--shadow-soft);
}
.answer-box p { color: var(--ink); font-size: 1.02rem; line-height: 1.7; }
.answer-box p + p { margin-top: .8rem; }
.answer-box strong { color: var(--navy); }

/* ===== Texto corrido ===== */
.prose { max-width: 46rem; }
.prose p { color: var(--slate); margin-bottom: 1rem; }
.prose h3 {
  font-family: var(--font-display); color: var(--navy);
  font-size: 1.22rem; margin: 2rem 0 .7rem;
}
.prose ul, .prose ol { color: var(--slate); margin: 0 0 1.1rem 1.2rem; }
.prose li { margin-bottom: .45rem; }
.prose strong { color: var(--ink); }
.prose a { color: var(--blue); font-weight: 500; }
.prose a:hover { color: var(--navy); }

/* ===== Tarjetas de cobertura ===== */
.coberturas { display: grid; gap: 1.1rem; margin-top: 2.2rem; }
.cobertura {
  position: relative; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cobertura:hover { transform: translateY(-4px); box-shadow: var(--shadow-blue); border-color: var(--blue-light); }
.cobertura__tag {
  display: inline-block; background: var(--navy); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: 999px; margin-bottom: .8rem;
}
.cobertura__tag--top { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); }
.cobertura h3 { font-size: 1.12rem; color: var(--navy); margin-bottom: .5rem; }
.cobertura p { color: var(--slate); font-size: .95rem; margin-bottom: .9rem; }
.cobertura ul { list-style: none; display: grid; gap: .4rem; }
.cobertura li {
  position: relative; padding-left: 1.5rem;
  color: var(--slate); font-size: .92rem;
}
.cobertura li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--blue); font-weight: 700;
}
.cobertura li.is-no { color: #9aa4bd; }
.cobertura li.is-no::before { content: "✕"; color: #c8d1e4; }

@media (min-width: 680px) { .coberturas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .coberturas--3 { grid-template-columns: repeat(3, 1fr); } }

/* ===== Tabla comparativa ===== */
/* Las tablas son el formato que mejor citan los buscadores con IA: dejan
   comparar coberturas de un vistazo sin leer los párrafos. El contenedor con
   overflow-x es lo que evita que la tabla desborde la pantalla del celular. */
.tabla-wrap {
  overflow-x: auto; margin-top: 2.2rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); background: var(--bg);
  -webkit-overflow-scrolling: touch;
}
.tabla { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: .9rem; }
.tabla caption {
  caption-side: bottom; padding: .9rem 1.1rem;
  font-size: .82rem; color: var(--slate); text-align: left;
}
.tabla th, .tabla td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.tabla thead th {
  background: var(--navy); color: #fff; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.tabla tbody th { font-weight: 600; color: var(--navy); background: var(--bg-tint); }
.tabla td { color: var(--slate); }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .si { color: #15803d; font-weight: 600; }
.tabla .no { color: #b91c1c; }
.tabla .opt { color: var(--orange-dark); font-weight: 600; }

/* ===== Proceso en pasos ===== */
.pasos { list-style: none; counter-reset: paso; display: grid; gap: 1.2rem; margin-top: 2.2rem; }
.pasos li {
  counter-increment: paso; position: relative; padding-left: 3.4rem;
  color: var(--slate);
}
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -.15rem;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--navy));
  color: #fff; font-weight: 700; font-family: var(--font-display);
  box-shadow: var(--shadow-blue);
}
.pasos strong { display: block; color: var(--navy); font-size: 1.02rem; margin-bottom: .15rem; }
@media (min-width: 780px) { .pasos { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2rem; } }

/* ===== Enlaces a los otros rubros ===== */
/* Enlazar cada rubro con los demás reparte autoridad entre las nueve URLs y
   le da a Google un camino para descubrirlas todas desde cualquier página. */
.otros-rubros { display: grid; gap: .8rem; margin-top: 2.2rem; }
.otro-rubro {
  display: flex; align-items: center; gap: .85rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: .9rem 1.1rem; text-decoration: none; color: var(--ink);
  font-weight: 500; font-size: .95rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.otro-rubro:hover { transform: translateY(-3px); box-shadow: var(--shadow-blue); border-color: var(--blue-light); color: var(--navy); }
.otro-rubro:active { transform: translateY(0); }
.otro-rubro svg { width: 22px; height: 22px; color: var(--blue); flex: none; }
.otro-rubro span { flex: 1; }
.otro-rubro::after { content: "→"; color: var(--blue); font-weight: 700; }
@media (min-width: 640px) { .otros-rubros { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .otros-rubros { grid-template-columns: repeat(4, 1fr); } }

/* ===== Franja de cierre con CTA ===== */
.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, #24479e 60%, var(--blue) 100%);
  color: #fff; text-align: center; padding: 3.2rem 0;
}
.cta-band h2 {
  font-family: var(--font-display); font-size: clamp(1.5rem, 4.6vw, 2.1rem);
  margin-bottom: .7rem;
}
.cta-band p { color: #cfe0ff; max-width: 34rem; margin: 0 auto 1.7rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ===== Campos extra de los formularios por rubro ===== */
/* El home solo usaba <input>. Los rubros nuevos suman desplegables (tipo de
   vivienda, rubro del comercio) y un campo de texto libre. */
.field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field select { appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355617e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px;
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field select:hover, .field textarea:hover { border-color: var(--blue-light); }
.field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

/* Fecha de última revisión del contenido. Sirve para el visitante y también
   como señal de contenido vigente para buscadores y asistentes de IA. */
.updated { font-size: .82rem; color: var(--slate); margin-top: 2.5rem; font-style: italic; }

/* ===== Enlace del acordeón del home hacia la página del rubro ===== */
/* Va dentro del panel desplegable de cada tarjeta de /#rubros. Es el camino
   principal por el que Google descubre las ocho páginas nuevas, así que el
   texto del enlace nombra el rubro en lugar de decir "ver más". */
.rubro__link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: 0 1.2rem 1.15rem; padding: .6rem .85rem;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 10px;
  color: var(--blue); font-size: .88rem; font-weight: 600; text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.rubro__link::after { content: "→"; font-weight: 700; }
.rubro__link:hover { background: #e8f0ff; border-color: var(--blue-light); transform: translateX(2px); }
.rubro__link:active { transform: translateX(0); }
/* Altura de toque cómoda en celular */
.rubro__link { min-height: 44px; }

/* ==========================================================================
   ACCESIBILIDAD Y AJUSTES DE PANTALLA
   ========================================================================== */

/* ===== Foco visible al navegar con teclado ===== */
/* Sin esto, quien recorre el sitio con la tecla Tab no ve dónde está parado:
   el navegador dibuja un contorno por defecto que las hojas de estilo suelen
   pisar sin querer. Se usa :focus-visible (y no :focus) para que el recuadro
   aparezca al navegar con teclado pero NO al hacer clic con el mouse, que es
   donde molestaba y por lo que históricamente se lo desactivaba. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sobre los fondos azules el contorno azul no se vería: ahí va en blanco. */
.hero :focus-visible,
.page-hero :focus-visible,
.section--dark :focus-visible,
.cta-band :focus-visible,
.footer :focus-visible,
.whatsapp-float:focus-visible {
  outline-color: #fff;
}
.whatsapp-float:focus-visible { outline-offset: 4px; }

/* Los campos del formulario ya avisan el foco con su propio borde azul y su
   halo. Agregarles además el contorno se vería doble y desprolijo. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
}

/* ===== Toque en celular ===== */
/* Android pinta un recuadro gris al tocar cualquier enlace. Se reemplaza por
   un destello azul de la marca, mucho más discreto. */
a, button, input[type="checkbox"], label {
  -webkit-tap-highlight-color: rgba(37, 99, 235, .12);
}

/* Área de toque del breadcrumb: el texto es chico y sin esto queda muy fino
   para el dedo. */
.breadcrumb a, .breadcrumb li { min-height: 32px; }

/* ===== Menú móvil en pantallas bajas ===== */
/* Con el celular acostado quedan unos 390px de alto y el menú desplegado no
   entra: sin esto, los últimos links quedan fuera de la pantalla y no hay
   forma de llegar a ellos. */
.navbar__nav.is-open {
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ===== Tablas comparativas en celular ===== */
/* El scroll de la tabla no debe arrastrar la página entera cuando el dedo
   llega al final del recorrido horizontal. */
.tabla-wrap { overscroll-behavior-x: contain; }

/* Aviso de que la tabla se desliza. Solo aparece en pantallas donde la tabla
   no entra completa; en escritorio no tiene sentido y se oculta. */
.tabla-hint {
  display: none;
  align-items: center; gap: .45rem;
  margin: 2.2rem 0 -1.4rem;
  font-size: .82rem; font-weight: 600; color: var(--blue);
}
.tabla-hint::after {
  content: "→";
  animation: deslizar 1.8s ease-in-out infinite;
}
@keyframes deslizar {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@media (max-width: 720px) {
  .tabla-hint { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .tabla-hint::after { animation: none; }
}

/* ===== Equilibrio de los títulos ===== */
/* Evita que quede una sola palabra colgando en la última línea de un título.
   Los navegadores que no lo soportan simplemente lo ignoran. */
.hero__title, .page-hero__title, .section__title, .cta-band h2, .answer-box p:first-child {
  text-wrap: balance;
}