/* Palette: red is the brand accent only (mark, primary action, small cues).
   Surfaces are cool porcelain and white; depth comes from a deep navy ink. */
:root {
  --rojo: #E60028;            /* new MAPFRE red (#FF002D) deepened to 4.8:1 for white text */
  --rojo-hondo: #B8001F;
  --rojo-suave: #FCEEEE;
  --tinta: #172235;          /* headings, body text, dark band */
  --tinta-2: #24324A;        /* hover on dark surfaces */
  --gris: #586273;
  --porcelana: #EEF2F5;      /* hero + alternate bands */
  --porcelana-2: #E2E8EE;    /* hero motif, quiet fills */
  --linea: #DAE1E7;
  --blanco: #FFFFFF;
  --wa: #1FA855;
  --wa-hondo: #168A45;
  --radius-lg: 22px;
  --radius: 12px;
  --shadow-card: 0 1px 2px rgba(23,34,53,.06), 0 24px 48px -24px rgba(23,34,53,.28);
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--tinta); background: var(--blanco); }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.025em; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 6px; }

.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 99; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font: 700 1rem/1 var(--font); padding: 1rem 1.4rem; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--rojo); color: #fff; }
.btn-primary:hover { background: var(--rojo-hondo); }
.btn-white { background: #fff; color: var(--tinta); }
.btn-white:hover { background: var(--porcelana); }
.btn-ghost { border-color: var(--linea); color: var(--tinta); background: #fff; }
.btn-ghost:hover { border-color: var(--tinta); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-hondo); }
.btn-sm { padding: .6rem 1rem; font-size: .92rem; }
.btn-block { width: 100%; }
.ico-wa { color: #fff; background: var(--wa); border-radius: 50%; padding: 2px; width: 1.5em; height: 1.5em; }
.btn-ghost .ico { color: var(--wa); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--linea); }
.top-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; color: var(--tinta); }
.brand b { color: var(--rojo); font-weight: 800; }
.brand-mark { width: 32px; height: 32px; color: var(--rojo); }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a, .nav button { text-decoration: none; font: 500 1rem var(--font); color: var(--gris); background: none; border: 0; padding: 0; cursor: pointer; }
.nav a:hover, .nav button:hover { color: var(--tinta); }
/* Nav needs room next to the MAPFRE lockup: hidden on phones and tablets */
@media (max-width: 960px) {
  .nav { display: none; }
  .top-in .btn { margin-left: auto; }
}

/* ── Hero: porcelain field, white chat ───────────────────────────────────── */
.hero { background: var(--porcelana); padding: 40px 0 64px; overflow: hidden; overflow: clip; position: relative; } /* clip: the decoration must not make the hero scrollable */
.hero::after { /* oversized speech-bubble tail echoing the logo */ content: ''; position: absolute; right: -140px; bottom: -260px; width: 680px; height: 680px; border-radius: 50% 50% 50% 0; background: var(--porcelana-2); pointer-events: none; }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-areas: "copy chat" "spot chat"; grid-template-rows: auto 1fr; gap: 32px 56px; align-items: start; position: relative; z-index: 1; }
.hero-copy { padding-top: 16px; grid-area: copy; }
.hero-in > .chat { grid-area: chat; }

/* Spotlight: continues the hero copy with what is particular to the chosen insurance */
.spot { grid-area: spot; align-self: start; border-top: 1px solid var(--linea); padding-top: 28px; }
.spot[hidden] { display: none; }
.spot.swap { animation: spot-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes spot-in { from { opacity: 0; transform: translateY(6px); } }
.spot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.spot-ico .ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #fff; color: var(--rojo); }
.spot-name { font-size: .95rem; }
.spot-promo { font-size: .85rem; font-weight: 700; color: var(--rojo-hondo); background: var(--rojo-suave); border-radius: 999px; padding: 5px 12px; line-height: 1.3; }
.spot-promo[hidden] { display: none; }
.spot-hook { margin-top: 14px; max-width: 30ch; font-size: 1.45rem; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.spot-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.spot-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; line-height: 1.45; color: var(--gris); }
.spot-list b { display: block; color: var(--tinta); }
.spot-list span { min-width: 0; }
.spot-list .ico { flex: none; width: 20px; height: 20px; padding: 3px; margin-top: 1px; border-radius: 50%; background: var(--rojo); color: #fff; }
.spot-more { display: inline-block; margin-top: 20px; font-size: .9rem; font-weight: 500; color: var(--tinta); text-underline-offset: 3px; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); font-weight: 800; max-width: 13ch; text-wrap: balance; color: var(--tinta); }
.lead { margin-top: 24px; font-size: 1.18rem; max-width: 44ch; color: var(--gris); }

.chat { background: #fff; color: var(--tinta); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--linea); }
.chat-head b { display: block; line-height: 1.2; }
.chat-head small { color: var(--wa-hondo); font-weight: 500; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--rojo); display: grid; place-items: center; flex: none; }
.avatar svg { width: 30px; height: 30px; }
.chat-body { padding: 18px; display: grid; gap: 12px; }

.bubble { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .98rem; }
.bubble.in { background: var(--porcelana); border-top-left-radius: 4px; justify-self: start; }
.bubble.out { background: #E7F6EC; border-top-right-radius: 4px; justify-self: end; width: 88%; }
.out-label { display: block; font-size: .78rem; font-weight: 700; color: var(--wa-hondo); margin-bottom: 2px; }
.bubble pre { margin: 0; font: inherit; white-space: pre-wrap; word-break: break-word; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 .92rem/1 var(--font); color: var(--tinta); background: #fff; border: 1.5px solid var(--linea); border-radius: 999px; padding: 8px 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.chip .ico { width: 18px; height: 18px; color: var(--rojo); }
.chip:hover { border-color: var(--tinta); }
.chip[aria-checked="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip[aria-checked="true"] .ico { color: #fff; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 4px; font-size: .85rem; font-weight: 500; color: var(--gris); }
.fields .field:first-child:nth-last-child(odd of .field) { grid-column: 1 / -1; }
.field-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 500; color: var(--tinta); cursor: pointer; padding: 2px 0; }
.field-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--tinta); flex: none; }
.field input, .field select { font: 400 1rem var(--font); color: var(--tinta); padding: 11px 12px; border: 1.5px solid var(--linea); border-radius: var(--radius); background: #fff; width: 100%; min-height: 46px; }
.field input:focus, .field select:focus { border-color: var(--tinta); outline: none; }
.touched :invalid:not(input[type=checkbox]) { border-color: var(--rojo); background: #FFF8F8; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--gris); }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tinta); flex: none; }
.form-err { color: var(--rojo-hondo); font-weight: 500; font-size: .9rem; min-height: 0; }
.form-err:empty { display: none; }

/* "Not sure which plan?" → opens the assistant with this product as context */
.ask-ai { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: 500 .9rem/1.35 var(--font); color: var(--tinta); background: var(--porcelana); border: 0; border-radius: var(--radius); padding: 10px 12px; cursor: pointer; }
.ask-ai:hover { background: var(--porcelana-2); }
.ask-ai .ico { width: 22px; height: 22px; }
.ask-ai u { text-underline-offset: 3px; }

@media (max-width: 920px) {
  .hero { padding: 32px 0 40px; }
  .hero-in { grid-template-columns: 1fr; grid-template-areas: "copy" "chat" "spot"; grid-template-rows: none; gap: 28px; }
  .spot { padding-top: 24px; }
  .spot-hook { font-size: 1.25rem; }
  .spot-list { grid-template-columns: 1fr; gap: 12px; }
  .hero-copy { padding-top: 0; }
  .lead { font-size: 1.05rem; margin-top: 16px; }
      .cookies { grid-template-columns: 1fr auto; align-items: center; font-size: .85rem; padding: 12px 14px; }
  .cookies-btns { flex-direction: column; gap: 6px; }
}
@media (max-width: 420px) { .fields { grid-template-columns: 1fr; } }

/* ── Bands ───────────────────────────────────────────────────────────────── */
.band { padding: 88px 0; }
.band-soft { background: var(--porcelana); }
.band h2, .closing h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; max-width: 20ch; }
.sub { margin-top: 12px; color: var(--gris); max-width: 56ch; }
@media (max-width: 760px) { .band { padding: 56px 0; } }

/* Products: grouped lists of tappable rows, not a card wall */
.products { margin-top: 36px; columns: 3 300px; column-gap: 40px; }
.pgroup { break-inside: avoid; margin-bottom: 28px; }
.pgroup h3 { font-size: .95rem; font-weight: 700; color: var(--gris); padding-bottom: 8px; border-bottom: 1px solid var(--tinta); }
.product { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--linea); text-decoration: none; }
.product .ico { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--porcelana); color: var(--rojo); transition: background .15s; }
.product b { display: block; font-size: 1.1rem; }
.product small { color: var(--gris); font-size: .92rem; }
.product:hover .ico { background: var(--rojo-suave); }
.product:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Steps: genuinely sequential, so numbered */
.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 1px solid var(--tinta); padding-top: 18px; }
.steps li::before { content: counter(s); display: block; font-size: 2.6rem; font-weight: 800; color: var(--tinta); line-height: 1; margin-bottom: 14px; }
.steps li:first-child { border-top: 3px solid var(--rojo); padding-top: 16px; }
.steps li:first-child::before { color: var(--rojo); }
.steps h3 { font-size: 1.2rem; margin-bottom: 6px; }
.steps p { color: var(--gris); }
@media (max-width: 920px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; gap: 24px; } }

.why { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.why-list { margin: 0; display: grid; gap: 28px; }
.why-list dt { font-weight: 700; font-size: 1.2rem; }
.why-list dd { margin: 4px 0 0; color: var(--gris); }
@media (max-width: 760px) { .why { grid-template-columns: 1fr; gap: 28px; } }

details { border-bottom: 1px solid var(--linea); }
details:first-of-type { margin-top: 28px; border-top: 1px solid var(--linea); }
summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-weight: 700; font-size: 1.08rem; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--rojo); transition: transform .2s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { padding: 0 0 20px; color: var(--gris); max-width: 62ch; }

.closing { background: var(--tinta); color: #fff; padding: 64px 0; }
.closing h2 { max-width: 24ch; }
.closing-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.closing p { color: #B9C3D3; margin-top: 10px; max-width: 46ch; }
.closing-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.closing .btn-outline { border-color: #4A5A75; color: #fff; background: transparent; }
.closing .btn-outline:hover { background: var(--tinta-2); border-color: #fff; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot { padding: 36px 0 40px; font-size: .88rem; color: var(--gris); }
.foot-in { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot-in > p { max-width: 62ch; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: start; }

/* ── Health band: navy, the five plans as a ladder of coverage ──────────── */
.salud { background: var(--tinta); color: #fff; padding: 88px 0; }
.salud-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.salud-tag { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #DCE3EC; }
.salud-tag .ico { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--rojo); color: #fff; }
.salud h2 { margin-top: 18px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; max-width: 18ch; text-wrap: balance; }
.salud-lead { margin-top: 16px; color: #B9C3D3; max-width: 46ch; }
.salud-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.salud-link { color: #fff; font-weight: 500; text-underline-offset: 3px; }
.salud-plans { list-style: none; margin: 0; padding: 0; border-top: 1px solid #2E3E58; }
.salud-plans li { display: grid; grid-template-columns: 78px 120px 1fr; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid #2E3E58; }
.salud-plans b { font-size: 1.1rem; }
.salud-plans li > span:last-child { color: #B9C3D3; font-size: .95rem; line-height: 1.45; }
/* coverage meter: the lit share is the plan level out of five */
.meter { display: flex; gap: 4px; }
.meter::before { content: ''; flex: 1; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--rojo) calc(var(--n) * 20% - 3px), #2E3E58 0); }
.meter[data-n="1"] { --n: 1; } .meter[data-n="2"] { --n: 2; } .meter[data-n="3"] { --n: 3; } .meter[data-n="4"] { --n: 4; } .meter[data-n="5"] { --n: 5; }
@media (max-width: 920px) {
  .salud { padding: 56px 0; }
  .salud-in { grid-template-columns: 1fr; gap: 36px; }
  .salud-plans li { grid-template-columns: 56px 1fr; gap: 4px 14px; }
  .salud-plans li > span:last-child { grid-column: 2; }
}

/* ── Floating actions + cookie banner ────────────────────────────────────── */
.fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30; display: flex; gap: 10px; align-items: center; }
.ai-launch { display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 20px 0 14px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); font: 700 .95rem var(--font); cursor: pointer; box-shadow: 0 10px 24px -8px rgba(23,34,53,.35); }
.ai-launch .ai-spark { width: 26px; height: 26px; }
/* tiny «IA» tag on the spark: says at a glance that this is an AI agent */
.ai-mark { position: relative; display: inline-grid; margin-right: 6px; }
.ai-badge { position: absolute; top: -7px; right: -13px; padding: 2px 4px; border-radius: 999px; font: 800 .56rem/1 var(--font); letter-spacing: .03em; color: #fff; background: linear-gradient(135deg, #E60028, #C4247A 55%, #7B3FF2); box-shadow: 0 0 0 2px #fff; }
.ai-launch:hover { border-color: var(--tinta); }
body.ai-open .fab { display: none; }

.cookies { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; max-width: 520px; background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-card); display: grid; gap: 12px; font-size: .92rem; }
.cookies[hidden] { display: none; }
.cookies-btns { display: flex; gap: 10px; justify-content: flex-end; }
.cookies .btn-primary { background: var(--tinta); }
.cookies .btn-primary:hover { background: var(--tinta-2); }

/* Chips beyond the main eight stay hidden until "Más seguros" */
.chips .extra { display: none; }
.chips.open .extra { display: inline-flex; }
.chip-more { border-style: dashed; font-weight: 700; }

/* ── Assistant panel ─────────────────────────────────────────────────────── */
.ai { position: fixed; z-index: 50; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 420px; height: min(780px, calc(100dvh - 40px)); background: #fff; border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(23,34,53,.08), 0 30px 70px -20px rgba(23,34,53,.45); display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden; transform-origin: bottom right; animation: ai-in .22s cubic-bezier(.2,.8,.2,1); }
.ai[hidden] { display: none; }
@keyframes ai-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.ai-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 18px; border-bottom: 1px solid var(--linea); }
.ai-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--porcelana); display: grid; place-items: center; flex: none; }
.ai-avatar .ico { width: 24px; height: 24px; }
.ai-head b { display: block; line-height: 1.2; }
.ai-head small { display: block; color: var(--gris); font-size: .8rem; line-height: 1.3; }
.ai-clear { margin-left: auto; }
.ai-clear + .ai-close { margin-left: 0; }
.ai-close { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: var(--gris); cursor: pointer; display: grid; place-items: center; flex: none; }
.ai-close:hover { background: var(--porcelana); color: var(--tinta); }
.ai-ctx { display: flex; align-items: center; padding: 8px 14px; background: var(--porcelana); border-bottom: 1px solid var(--linea); }
.ai-ctx[hidden] { display: none; }
.ai-topic { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font: 600 .9rem var(--font); color: var(--tinta); background: #fff; border: 1.5px solid var(--linea); border-radius: 999px; padding: 5px 14px 5px 10px; cursor: pointer; }
.ai-topic:hover { border-color: var(--tinta); }
.ai-topic span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-topic .ico { color: var(--rojo); }
.ai-topic u { font-weight: 500; color: var(--gris); text-underline-offset: 2px; }
.ai-log { grid-row: 3; }
.ai-foot { grid-row: 4; }
.ai-log { overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.ai-log .bubble { white-space: pre-wrap; word-break: break-word; }
.ai-log .bubble.me { background: var(--tinta); color: #fff; border-radius: 16px; border-top-right-radius: 4px; align-self: flex-end; }
.ai-log .bubble.in { align-self: flex-start; }
.ai-handoff { display: flex; width: fit-content; margin-top: 10px; white-space: nowrap; }
.ai-log .bubble.note { align-self: stretch; max-width: none; background: #fff; border: 1px solid var(--linea); font-size: .9rem; color: var(--gris); }
.ai-wiz { display: flex; flex-wrap: wrap; gap: 6px; animation: ai-in .2s ease; }
.ai-wiz button { font: 500 .9rem/1.25 var(--font); text-align: left; color: var(--tinta); background: #fff; border: 1.5px solid var(--linea); border-radius: 14px; padding: 8px 12px; cursor: pointer; }
.ai-wiz button:hover { border-color: var(--tinta); }
.ai-wiz .quiet { border-color: transparent; color: var(--gris); }
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ai-grid button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-weight: 600; min-width: 0; }
.ai-grid .ico { color: var(--rojo); }
.ai-grid button.on { border-color: var(--tinta); background: var(--porcelana); }
.ai-grid .extra { display: none; }
.ai-grid.open .extra { display: flex; }
.ai-grid.open .more { display: none; }
.ai-grid .more { grid-column: 1 / -1; justify-content: center; border-style: dashed; }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--gris); opacity: .35; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: 1; transform: translateY(-2px); } }
.ai-foot { border-top: 1px solid var(--linea); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.ai-form { display: flex; gap: 8px; align-items: flex-end; }
.ai-form textarea { flex: 1; font: 400 1rem/1.4 var(--font); color: var(--tinta); border: 1.5px solid var(--linea); border-radius: 14px; padding: 10px 12px; resize: none; max-height: 120px; min-height: 46px; }
.ai-form textarea:focus { outline: none; border-color: var(--tinta); }
.ai-send { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--rojo); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.ai-send:hover { background: var(--rojo-hondo); }
.ai-send:disabled { background: var(--porcelana-2); color: var(--gris); cursor: default; }
.ai-human { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: #E7F6EC; color: var(--tinta); text-decoration: none; line-height: 1.3; transition: background .15s; }
.ai-human:hover { background: #D6F0DF; }
.ai-human b { display: block; font-size: .92rem; }
.ai-human small { display: block; font-size: .82rem; color: var(--wa-hondo); font-weight: 500; }
.ai-human-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; flex: none; }
.ai-human-ico .ico { width: 20px; height: 20px; }
.ai-human-go { margin-left: auto; width: 20px; height: 20px; color: var(--wa-hondo); }
.ai-legal { font-size: .75rem; color: var(--gris); line-height: 1.35; }
/* Phones: the panel fills the screen below the site header, which stays visible */
@media (max-width: 560px) {
  .ai { top: 65px; left: 0; right: 0; bottom: 0; width: auto; height: auto; border-radius: 0; box-shadow: none; border-top: 1px solid var(--linea); transform-origin: bottom center; }
  /* page pinned (iOS ignores overflow:hidden) and painted over, so nothing shows
     through Safari's translucent toolbars; header stays on top */
  html:has(body.ai-lock) { overflow: hidden; overscroll-behavior: none; }
  body.ai-lock { position: fixed; left: 0; right: 0; overflow: hidden; overscroll-behavior: none; }
  .ai { overscroll-behavior: contain; touch-action: pan-y; }
  body.ai-lock .top { position: fixed; top: 0; left: 0; right: 0; }
  body.ai-open::before { content: ''; position: fixed; left: 0; right: 0; top: -100px; bottom: -200px; background: #fff; z-index: 19; }
}

/* ── MAPFRE co-brand: lockup next to our mark in the header, and the footer ─ */
.cobrand { display: grid; gap: 3px; padding-left: 16px; margin-left: -8px; border-left: 1px solid var(--linea); line-height: 1; }
.cobrand small { font-size: .7rem; font-weight: 500; color: var(--gris); white-space: nowrap; }
.cobrand img { height: 14px; width: auto; }
.foot-legal { display: grid; gap: 14px; max-width: 62ch; }
.foot-legal b { white-space: nowrap; }
.cobrand.cobrand-foot { justify-self: start; border-left: 0; padding-left: 0; margin-left: 0; gap: 5px; }
.cobrand.cobrand-foot img { height: 18px; }
.cobrand.cobrand-foot small { font-size: .72rem; }
@media (max-width: 560px) {
  .top-in { gap: 16px; }
  .brand { font-size: 1.05rem; gap: 8px; }
  .brand-mark { width: 28px; height: 28px; }
  .cobrand { padding-left: 12px; margin-left: -4px; }
  .cobrand small { font-size: .64rem; }
  .cobrand img { height: 12px; }
  .top-wa { flex: none; width: 42px; height: 42px; padding: 0; border-width: 1.5px; }
  .top-wa span { display: none; }
}
@media (max-width: 380px) {
  .top-in { gap: 10px; }
  .brand { font-size: 1rem; gap: 6px; }
  .cobrand { padding-left: 10px; margin-left: 0; }
  .cobrand small { font-size: .6rem; }
  .cobrand img { height: 11px; }
  .top-wa { width: 40px; height: 40px; }
}
/* Old 320 px phones: brand + MAPFRE lockup only; WhatsApp stays in the form and the assistant */
@media (max-width: 340px) {
  .top-wa { display: none; }
}
/* Short phones (≤ 700 px tall): give the conversation the room */
@media (max-width: 560px) and (max-height: 700px) {
  .ai-head { padding: 8px 8px 8px 14px; gap: 10px; }
  .ai-avatar { width: 32px; height: 32px; }
  .ai-ctx { padding: 6px 14px; }
  .ai-log { padding: 12px 14px; }
  .ai-foot { padding-top: 8px; gap: 6px; }
  .ai-human { padding: 6px 10px; }
  .ai-human small { display: none; }
  .ai-human-ico { width: 30px; height: 30px; }
}

/* ── «Planes» pages (generated by web/build_planes.py) ───────────────────── */
.pl main.band { padding: 28px 0 64px; }
.pl main h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; margin: 6px 0 16px; }
.pl-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pl-jump a { font: 500 .92rem/1 var(--font); color: var(--tinta); text-decoration: none; border: 1.5px solid var(--linea); border-radius: 999px; padding: 9px 14px; }
.pl-jump a:hover { border-color: var(--tinta); }
.pl-body h3 { scroll-margin-top: 84px; }
.pl-crumb a { color: var(--gris); font-size: .92rem; }
.pl-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 24px; }
.pl-body h2 { font-size: 1.5rem; font-weight: 800; margin: 40px 0 12px; padding-top: 18px; border-top: 1px solid var(--tinta); max-width: none; }
.pl-body h3 { font-size: 1.15rem; margin: 26px 0 8px; }
.pl-body p, .pl-body li { color: var(--gris); }
.pl-body p { margin: 10px 0; max-width: 68ch; }
.pl-body ul { margin: 6px 0; padding-left: 1.1em; display: grid; gap: 6px; max-width: 68ch; }
.pl-body b { color: var(--tinta); }
.pl-table { overflow-x: auto; margin: 14px 0; border: 1px solid var(--linea); border-radius: var(--radius); }
.pl-table table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.pl-table th, .pl-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.pl-table th { background: var(--porcelana); color: var(--tinta); font-weight: 700; }
.pl-table tr:last-child td { border-bottom: 0; }
.pl-rev { margin-top: 32px; font-size: .85rem; color: var(--gris); }
.pl .foot { padding-bottom: 40px; }