/* ============================================
   MAYORAZGO — Sitio completo (Inicio + líneas de seguro)
   Se carga DESPUÉS de landing.css: reutiliza sus tokens y bloques
   (marquee, 24/7, Aura, preguntas, cierre, footer) y suma lo nuevo.
   ============================================ */

/* ---------- Menú: Seguros desplegable + Siniestros + Nosotros ---------- */
.nav-site { align-items: center; }
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0; border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; color: inherit; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.nav-drop-btn svg { width: 14px; height: 14px; transition: transform .2s; }
.nav-drop-btn:hover, .nav-drop.is-open .nav-drop-btn { color: var(--tinta); border-color: var(--azul-claro); }
.nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }
.nav-drop-btn:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; border-radius: 4px; }

.nav-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  width: min(640px, 92vw);
  translate: -50% 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 12px;
  background: var(--blanco);
  border: 1px solid var(--piedra);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-drop.is-open .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a {
  display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center;
  padding: 12px; border: 0; border-radius: 14px;
  transition: background-color .15s;
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--marfil-2); outline: none; }
.nav-menu .ico { grid-row: span 2; }
.nav-menu b { font-weight: 700; font-size: 15px; color: var(--tinta); line-height: 1.2; }
.nav-menu small { font-size: 13.5px; color: var(--gris); line-height: 1.3; }

/* Ícono de cada línea: el mismo en menú, selector y tarjetas.
   Los íconos son a color (volumen suave), así que el fondo es apenas un halo. */
.ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--marfil-2); color: var(--azul);
  flex: none;
}
.ico svg { width: 30px; height: 30px; }

/* ---------- Botón "Cotizá tu seguro": el más llamativo de la página ----------
   Naranja sol (contrasta con todo el azul del sitio), texto azul noche y un brillo
   que lo cruza cada tanto. Vale para todos los botones que abren el formulario. */
.btn[data-open-lead-form], .btn[data-cotizador], .cta-float {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #FFB73D 0%, #FF8A1F 100%);
  color: #12324A; font-weight: 800;
  box-shadow: 0 14px 30px -12px rgba(255, 122, 20, .8), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: box-shadow .25s ease, transform .2s ease, filter .2s ease;
}
.btn[data-open-lead-form]:hover, .btn[data-cotizador]:hover, .cta-float:hover {
  background: linear-gradient(180deg, #FFB73D 0%, #FF8A1F 100%);
  color: #12324A; filter: brightness(1.06);
  box-shadow: 0 20px 40px -12px rgba(255, 122, 20, .95), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn[data-open-lead-form]:not(.header-cta), .btn[data-cotizador]:not(.header-cta) { padding: 20px 34px; font-size: 17px; }
.btn[data-open-lead-form]::before, .btn[data-cotizador]::before, .cta-float::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 70%);
  translate: -130% 0;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .btn[data-open-lead-form]::before, html:not(.no-anim) .btn[data-cotizador]::before, html:not(.no-anim) .cta-float::before { animation: cta-shine 6s ease-in-out 1.5s infinite; }
  @keyframes cta-shine { 0% { translate: -130% 0; } 16%, 100% { translate: 130% 0; } }
}

/* ---------- Botones de AURA: nuestro producto, tienen que brillar ----------
   Azul noche con un borde de luz que gira (celeste, verde menta y blanco) y un resplandor
   alrededor. No compite con el naranja de cotizar: es otra familia de color, pero se ve
   de lejos sobre cualquier fondo (cielo de día, de noche, foto o claro). */
@property --aura-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-aura {
  --aura-a: 0deg;
  position: relative; gap: 10px;
  padding: 20px 36px; font-size: 17px; font-weight: 700;
  color: var(--blanco);
  border: 2.5px solid transparent;
  background:
    linear-gradient(135deg, #0E2A40, #163F62) padding-box,
    conic-gradient(from var(--aura-a), #7DD3FC, #34D399, #FFFFFF, #5BB4F0, #7DD3FC) border-box;
  box-shadow: 0 0 22px rgba(125, 211, 252, .55), 0 0 56px rgba(52, 211, 153, .22), 0 14px 30px -14px rgba(8, 30, 52, .8);
  transition: box-shadow .25s ease, transform .2s ease;
}
.btn-aura:hover, .btn-aura:focus-visible {
  color: var(--blanco);
  box-shadow: 0 0 30px rgba(125, 211, 252, .75), 0 0 72px rgba(52, 211, 153, .32), 0 14px 30px -14px rgba(8, 30, 52, .8);
}
.aura-spark { width: 20px; height: 20px; fill: #7DD3FC; flex: none; filter: drop-shadow(0 0 6px rgba(125, 211, 252, .8)); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .btn-aura { animation: aura-ring 4s linear infinite; }
  html:not(.no-anim) .aura-spark { animation: aura-spark 3.2s ease-in-out infinite; }
  @keyframes aura-ring { to { --aura-a: 360deg; } }
  @keyframes aura-spark { 0%, 70%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.2) rotate(12deg); } }
}

/* ---------- Menú en celular ---------- */
.menu-btn {
  display: none;
  width: 46px; height: 46px; border-radius: 14px;
  border: 1px solid var(--piedra); background: var(--blanco); color: var(--tinta);
  place-items: center; cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; }
.mnav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: var(--blanco);
  overflow-y: auto;
  padding: 16px clamp(20px, 4vw, 40px) 40px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.mnav.is-open { opacity: 1; visibility: visible; }
.mnav-label { font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); margin: 8px 0 10px; }
.mnav-list a { display: flex; align-items: center; gap: 14px; padding: 10px 0; font-weight: 600; font-size: 17px; color: var(--tinta); }
.mnav-links { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--piedra); }
.mnav-links a { display: block; padding: 12px 0; font-weight: 600; font-size: 17px; color: var(--tinta); }
.mnav .btn { width: 100%; margin-top: 22px; }
body.menu-open { overflow: hidden; }

@media (max-width: 1024px) {
  .menu-btn { display: grid; }
  .header-actions { display: flex; align-items: center; gap: 10px; }
}
@media (min-width: 1025px) {
  .mnav { display: none; }
  .header-actions { display: contents; }
}

/* ---------- Hero del inicio: título + selector sobre la foto ---------- */
.hero-home .hero-title { max-width: 18ch; }
.hero-home .hero-sub { max-width: 50ch; margin-bottom: 34px; }

.picker {
  position: relative; z-index: 2;
  width: min(1060px, 100%);
  margin: 0 auto -84px;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--piedra);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
}
.picker-q { font-family: var(--font-display); font-size: clamp(22px, 2vw, 26px); color: var(--tinta); margin-bottom: 16px; }
.picker-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pick {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px;
  min-height: 132px; padding: 22px 10px 18px;
  border-radius: 18px;
  background: var(--marfil-2);
  border: 1.5px solid transparent;
  text-align: center;
  transition: background-color .2s, border-color .2s;
}
.pick .ico {
  width: 68px; height: 68px; border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, var(--blanco) 0%, rgba(255, 255, 255, .7) 55%, rgba(255, 255, 255, 0) 72%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1.2);
}
.pick .ico svg { width: 52px; height: 52px; filter: drop-shadow(0 6px 10px rgba(18, 50, 74, .14)); }
.pick:hover .ico, .pick:focus-visible .ico { transform: translateY(-3px) scale(1.06); }
.pick span:last-child { font-weight: 700; font-size: 15.5px; line-height: 1.25; color: var(--tinta); text-wrap: balance; }
.pick:hover, .pick:focus-visible { background: var(--azul-tinte); border-color: rgba(28, 123, 190, .35); outline: none; }
.picker-foot { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 15px; color: var(--gris); }
.picker-foot .btn { padding: 14px 24px; font-size: 15.5px; }

.hero-home .hero-film { height: clamp(360px, 54vh, 560px); }
.hero-home .hero-film img { object-position: 50% 62%; }

@media (max-width: 1024px) {
  .picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .picker { margin-bottom: -48px; padding: 18px 14px 16px; border-radius: 22px; }
  .picker-q { text-align: center; }
  .pick { min-height: 112px; padding: 14px 8px; }
  .pick .ico { width: 56px; height: 56px; }
  .pick .ico svg { width: 44px; height: 44px; }
  .hero-home .hero-film { height: 300px; }
}
@media (max-width: 520px) {
  .picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Líneas de seguro: seis tarjetas iguales con foto ----------
   Una foto que cuenta cada seguro y el texto abajo, con el botón en cápsula.
   Al entrar en pantalla aparecen en cadena (la foto se acomoda y después llega el texto). */
.lines { padding-block: clamp(140px, 13vw, 180px) clamp(72px, 9vw, 120px); }
.lines .section-title { text-wrap: balance; }

.lc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lc {
  --d: calc(var(--i, 0) * 110ms);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(440px, 36vw, 500px);
  padding: 18px;
  border-radius: 28px;
  background: var(--azul-profundo);
  color: var(--blanco);
}
.lc-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.lc-photo { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.lc::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 30, 46, .18) 0%, rgba(10, 30, 46, 0) 26%, rgba(10, 30, 46, .1) 46%, rgba(10, 30, 46, .72) 72%, rgba(10, 30, 46, .92) 100%);
}
.lc-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px -14px rgba(10, 30, 46, .6);
  font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--tinta);
}
.lc-chip svg { width: 32px; height: 32px; flex: none; padding: 3px; border-radius: 50%; background: var(--blanco); }
.lc-body { padding: 0 10px 10px; }
.lc h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -0.012em; color: var(--blanco); margin-bottom: 8px; }
.lc p { font-size: 16.5px; line-height: 1.45; color: rgba(255, 255, 255, .9); max-width: 30ch; text-wrap: pretty; }
/* el botón: la misma cápsula azul de las tarjetas de las landings (.sc-more) */
.lc-go { display: inline-flex; align-items: center; min-height: 48px; margin-top: 16px; padding: 0 24px; border-radius: 999px; background: var(--azul); font-weight: 700; font-size: 15px; color: var(--blanco); white-space: nowrap; transition: background-color .25s ease, color .25s ease; }
/* hover: solo realza (la foto se acerca un poco), nada se mueve de lugar */
.lc:hover .lc-photo { transform: scale(1.05); }
.lc:hover .lc-go, .lc:focus-visible .lc-go { background: var(--blanco); color: var(--azul); }
.lc:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; }

/* foco de cada foto */
.lc:nth-child(1) .lc-photo { object-position: 84% 60%; }
.lc:nth-child(2) .lc-photo { object-position: 18% 50%; }
.lc:nth-child(3) .lc-photo { object-position: 50% 30%; }
.lc:nth-child(4) .lc-photo { object-position: 50% 30%; }
.lc:nth-child(5) .lc-photo { object-position: 40% 40%; }
.lc:nth-child(6) .lc-photo { object-position: 50% 30%; }

@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .lc[data-reveal] {
    opacity: 0; transform: translateY(32px);
    clip-path: inset(14% 0 0 0 round 28px);
    transition: opacity .6s ease var(--d), transform 1s cubic-bezier(.2, .7, .2, 1) var(--d), clip-path 1s cubic-bezier(.2, .7, .2, 1) var(--d);
  }
  html:not(.no-anim) .lc[data-reveal].is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 28px); }
  html:not(.no-anim) .lc.is-visible .lc-photo { animation: lc-zoom 1.8s cubic-bezier(.2, .7, .2, 1) var(--d) backwards; }
  html:not(.no-anim) .lc.is-visible .lc-chip { animation: lc-chip .7s cubic-bezier(.2, .9, .3, 1.25) calc(var(--d) + .7s) backwards; }
  html:not(.no-anim) .lc.is-visible .lc-body { animation: lc-body .8s cubic-bezier(.2, .7, .2, 1) calc(var(--d) + .3s) backwards; }
  @keyframes lc-zoom { from { transform: scale(1.18); } to { transform: scale(1); } }
  @keyframes lc-chip { from { opacity: 0; transform: translateY(-10px) scale(.9); } to { opacity: 1; transform: none; } }
  @keyframes lc-body { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 1024px) {
  .lc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc { --d: calc(var(--i, 0) * 70ms); }
}
/* Celular: las tarjetas se deslizan de costado y se asoma la siguiente */
@media (max-width: 640px) {
  .lines { padding-top: 104px; }
  .lc-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    gap: 12px;
    margin-inline: calc(-1 * clamp(20px, 4vw, 40px));
    padding: 0 clamp(20px, 4vw, 40px) 4px;
    scroll-padding-inline: clamp(20px, 4vw, 40px);
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y;
    scrollbar-width: none;
  }
  .lc-grid::-webkit-scrollbar { display: none; }
  .lc { --d: 0ms; scroll-snap-align: start; min-height: 440px; border-radius: 24px; }
  .lc:nth-child(2) { --d: 120ms; }
  /* 2026-11-09 (Abi): logos de aseguradoras centrados entre las tarjetas y la sección de abajo */
  .lines:has(+ .carriers-color) { padding-bottom: 20px; }
  .lines + .carriers-color { padding-bottom: 50px; }
  /* En celular las tarjetas quedan quietas: sin entrada ni zoom al deslizar */
  html:not(.no-anim) .lc[data-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; }
  html:not(.no-anim) .lc.is-visible :is(.lc-photo, .lc-chip, .lc-body) { animation: none; }
}

/* ---------- Cinta de aseguradoras: franja gris clarita, logos a color pasando de punta a punta ---------- */
.carriers-color { background: var(--marfil-2); border-top: 1px solid var(--piedra); border-bottom: 1px solid var(--piedra); padding-block: 26px 30px; }
.carriers-color .carriers-inner { flex-direction: column; align-items: center; gap: 20px; max-width: none; padding-inline: 0; }
.carriers-color .carriers-lead { display: block; color: var(--tinta-75); font-size: 16px; text-align: center; padding-inline: 20px; white-space: normal; }
.carriers-color .marquee {
  width: 100%; max-width: 1680px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.carriers-color .marquee-track { gap: 80px; }
.carriers-color .marquee-track img { height: 34px; opacity: 1; filter: none; }
.carriers-color .marquee-track img[src*="lacaja"] { height: 52px; }
.carriers-color .marquee-track img[src*="provincia"] { height: 46px; }
@media (max-width: 640px) {
  .carriers-color .marquee-track { gap: 52px; }
  .carriers-color .marquee-track img { height: 28px; }
  .carriers-color .marquee-track img[src*="lacaja"] { height: 44px; }
  .carriers-color .marquee-track img[src*="provincia"] { height: 38px; }
}

/* ---------- Por qué un broker ---------- */
.why { padding-block: clamp(72px, 9vw, 120px); background: var(--marfil-2); }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.why-card { padding: 30px 26px; border-radius: 24px; background: var(--blanco); }
.why-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul); color: var(--blanco); font-weight: 700; font-size: 17px; margin-bottom: 18px; }
.why-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--tinta); margin-bottom: 10px; }
.why-card p { color: var(--tinta-75); font-size: 16.5px; text-wrap: pretty; }
@media (max-width: 860px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Atención 24/7 (solo inicio: .att-live): un día entero en loop de 16 s ----------
   Noche con estrellas que titilan, amanece y sube el sol, cielo celeste, atardecer naranja
   y amarillo mientras el sol baja, y vuelve la noche. Un velo oscuro en el centro deja leer
   el texto blanco a cualquier hora. Sin movimiento: queda de noche. */
.att-day, .att-dusk { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; }
.att-day {
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%, rgba(14, 58, 98, .3) 0%, rgba(14, 58, 98, 0) 70%),
    linear-gradient(180deg, #2A7FC6 0%, #3E98DC 50%, #7FC4EE 100%);
}
.att-dusk {
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(60, 30, 40, .34) 0%, rgba(60, 30, 40, 0) 70%),
    linear-gradient(180deg, #3D5A99 0%, #8C6A9E 30%, #E98A5B 62%, #F7B65E 84%, #FFD98A 100%);
}
/* el sol: sube desde el horizonte a la derecha, lejos del texto */
.att-sun-path { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateY(100%); }
.att-sun {
  position: absolute; top: 12%; right: 5%; width: clamp(72px, 9vw, 128px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #FFFBEA 0%, #FFE9A3 55%, #FFD36B 100%);
  box-shadow: 0 0 40px 12px rgba(255, 226, 140, .55), 0 0 120px 50px rgba(255, 210, 120, .28);
}
@media (max-width: 700px) { .att-sun { top: 1.5%; right: -18px; width: 64px; } }
.att-sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 50% 45%, #FFE2A8 0%, #FFAE5C 60%, #F2803F 100%); box-shadow: 0 0 60px 18px rgba(255, 150, 80, .5); }
/* estrellas: un cielo fijo y dos capas que titilan a destiempo */
.att-live .att-sky::before, .att-live .att-sky::after { content: ""; position: absolute; inset: 0; }
.att-live .att-sky::before {
  background-image:
    radial-gradient(2px 2px at 17% 24%, #fff 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 34% 14%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 73% 20%, #fff 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 86% 38%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 6% 62%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 95% 70%, #fff 50%, transparent 51%);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9));
}
.att-live .att-sky::after {
  background-image:
    radial-gradient(2.2px 2.2px at 25% 44%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 54% 8%, #fff 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 64% 34%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 12% 82%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 80% 84%, #fff 50%, transparent 51%);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9));
  opacity: .3;
}
/* el punto verde de "en línea", al lado del título */
.att-dot { display: inline-block; position: relative; width: .26em; height: .26em; margin-right: .32em; vertical-align: .14em; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 .08em rgba(52, 211, 153, .25), 0 0 14px rgba(52, 211, 153, .8); }
.att-live .att-title, .att-live .att-sub { text-shadow: 0 2px 24px rgba(8, 30, 52, .45); }
/* las píldoras se leen de día y de noche */
.att-live .att-strip li { background: rgba(8, 30, 52, .28); border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* preguntas para AURA: burbujas que se tocan y abren el chat con esa pregunta */
.att-asks-lead { font-weight: 600; font-size: 17px; color: rgba(255, 255, 255, .9); margin-bottom: 14px; text-shadow: 0 2px 16px rgba(8, 30, 52, .45); }
.att-live .att-asks li { padding: 0; }
.att-live .att-asks li::before { display: none; }
.att-asks a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  border-radius: 999px; color: var(--blanco); font-weight: 600; font-size: 15.5px;
  transition: background-color .2s ease;
}
.att-asks a:hover, .att-asks a:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
/* las cuatro preguntas en una sola línea (en celular, una debajo de otra) */
.att-live .att-content { max-width: 1040px; }
@media (min-width: 1100px) { .att-live .att-asks { flex-wrap: nowrap; } }

.att-cta { margin-top: 30px; }

/* la franja ocupa todo el ancho de la pantalla, sin tarjeta */
.att-live { padding: 0; }
.att-live > .wrap { max-width: none; padding-inline: 0; }
.att-live .att-band { border-radius: 0; box-shadow: none; min-height: clamp(560px, 70vh, 720px); }
.att-live .att-band::after { left: 0; right: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* arranca cuando la franja aparece en pantalla. Un ciclo dura 16 s:
     0-8% noche · 8-24% amanece y sube el sol · 24-46% día · 46-62% atardecer · 62-100% noche */
  html:not(.no-anim) .att-live .is-visible :is(.att-day, .att-dusk, .att-sun-path, .att-sky, .att-glow-dawn) { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
  html:not(.no-anim) .att-live .is-visible .att-day { animation-name: att-day; }
  html:not(.no-anim) .att-live .is-visible .att-dusk { animation-name: att-dusk; }
  html:not(.no-anim) .att-live .is-visible .att-sun-path { animation-name: att-sun; }
  html:not(.no-anim) .att-live .is-visible .att-sun::after { animation: att-sun-warm 16s ease-in-out infinite; }
  html:not(.no-anim) .att-live .is-visible .att-sky { animation-name: att-night; }
  html:not(.no-anim) .att-live .is-visible .att-glow-dawn { animation-name: att-dawn; }
  html:not(.no-anim) .att-live .att-sky::before { animation: att-twinkle 2.6s ease-in-out infinite; }
  html:not(.no-anim) .att-live .att-sky::after { animation: att-twinkle 3.4s ease-in-out 1.3s infinite reverse; }
  html:not(.no-anim) .att-dot { animation: att-dot 2.2s ease-in-out infinite; }
  @keyframes att-day { 0%, 10% { opacity: 0; } 24%, 44% { opacity: 1; } 56%, 100% { opacity: 0; } }
  @keyframes att-dusk { 0%, 8% { opacity: 0; } 15% { opacity: .55; } 24%, 42% { opacity: 0; } 52%, 57% { opacity: 1; } 68%, 100% { opacity: 0; } }
  @keyframes att-sun { 0%, 9% { transform: translateY(100%); } 28% { transform: translateY(0); } 44% { transform: translateY(6%); } 58% { transform: translateY(52%); } 66%, 100% { transform: translateY(100%); } }
  @keyframes att-sun-warm { 0%, 12% { opacity: 1; } 24%, 42% { opacity: 0; } 54%, 100% { opacity: 1; } }
  @keyframes att-night { 0%, 6% { opacity: 1; } 18%, 56% { opacity: 0; } 70%, 100% { opacity: 1; } }
  @keyframes att-dawn { 0%, 6% { opacity: .2; } 16% { opacity: .9; } 26%, 44% { opacity: .2; } 56% { opacity: .9; } 70%, 100% { opacity: .2; } }
  @keyframes att-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
  @keyframes att-dot { 0%, 100% { box-shadow: 0 0 0 .08em rgba(52, 211, 153, .25), 0 0 14px rgba(52, 211, 153, .8); } 50% { box-shadow: 0 0 0 .18em rgba(52, 211, 153, .08), 0 0 22px rgba(52, 211, 153, 1); } }
}

/* ---------- Nosotros (adelanto): sección con aire, sin bloque de color.
   Foto redondeada a la izquierda y texto a la derecha, dentro del ancho de la página. */
.about { padding-block: clamp(88px, 10vw, 136px) clamp(48px, 6vw, 88px); background: var(--blanco); }
.about-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.about-photo { position: relative; min-height: clamp(460px, 56vh, 600px); border-radius: 32px; overflow: hidden; }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.about-pin {
  position: absolute; left: 24px; bottom: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-weight: 700; font-size: 15px; color: var(--tinta);
  box-shadow: 0 12px 28px -14px rgba(10, 30, 46, .5);
}
.about-pin svg { width: 22px; height: 22px; }
.about-text .section-title { text-wrap: balance; margin-bottom: 18px; }
.about-text .section-sub { margin-bottom: clamp(32px, 3.4vw, 44px); }
.about-stats { display: flex; margin: 0 0 clamp(32px, 3.4vw, 44px); }
.about-stats > div { padding-right: 36px; }
.about-stats > div + div { padding-left: 36px; border-left: 1.5px solid var(--piedra); }
.about-stats dt { font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.02em; color: var(--azul); margin-bottom: 10px; font-variant-numeric: lining-nums; }
.about-stats dd { margin: 0; font-size: 16px; line-height: 1.4; color: var(--tinta); }
.about .btn-dark::after, .help .btn-dark::after { display: none; }

@media (max-width: 860px) {
  .about { padding-block: 72px; }
  .about-panel { grid-template-columns: minmax(0, 1fr); }
  .about-panel { gap: 32px; }
  .about-photo { min-height: 320px; border-radius: 24px; }
}
@media (max-width: 420px) {
  .about-stats > div { padding-right: 18px; }
  .about-stats > div + div { padding-left: 18px; }
  .about-stats dd { font-size: 15px; }
}

/* ---------- Siniestros: se entiende sin leer ----------
   Foto de un auto con balizas, pasos con dibujos y los teléfonos con el logo de cada aseguradora. */
/* Sección clara que fluye: el celeste aparece y se va suave, sin bordes duros */
.help {
  position: relative; isolation: isolate; overflow-x: clip;
  padding-block: clamp(88px, 11vw, 150px);
  background: linear-gradient(180deg, rgba(234, 243, 251, 0) 0%, #EAF3FB 22%, #EAF3FB 78%, rgba(234, 243, 251, 0) 100%);
}
.sos { color: var(--tinta); }
/* al revés que Nosotros: texto a la izquierda, foto a la derecha con un brillo cálido de baliza detrás */
.sos-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.sos-grid::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -6%; top: -12%; width: 56%; height: 124%;
  background: radial-gradient(closest-side, rgba(255, 122, 100, .22) 0%, rgba(255, 170, 120, .1) 55%, rgba(255, 170, 120, 0) 100%);
  filter: blur(20px);
}
.sos-photo { order: 2; transform: rotate(1.5deg); box-shadow: 0 30px 60px -30px rgba(18, 50, 74, .5); }

/* Foto con la etiqueta de baliza */
.sos-photo { position: relative; margin: 0; min-height: 440px; border-radius: 22px; overflow: hidden; background: #0A1F35; }
.sos-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.sos-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 46, 0) 55%, rgba(10, 30, 46, .55) 100%); }
.sos-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-weight: 700; font-size: 15px; color: var(--tinta);
}
.sos-tag svg { width: 34px; height: 34px; padding: 4px; border-radius: 50%; background: #FFF1EC; }
@media (prefers-reduced-motion: no-preference) {
  /* parpadeo suave, como una baliza */
  html:not(.no-anim) .sos-tag svg { animation: baliza 1.4s ease-in-out infinite; }
  @keyframes baliza { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 100, 0); } 50% { box-shadow: 0 0 0 7px rgba(255, 122, 100, .28); } }
}

.sos-main { order: 1; padding: clamp(12px, 2vw, 28px) 0 clamp(12px, 2vw, 24px); }
.sos-title { color: var(--tinta); font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.012em; margin-bottom: 28px; text-wrap: balance; }

/* Los pasos son una secuencia: dibujo + número chico, unidos por una línea */
.sos-steps { counter-reset: paso; display: grid; margin-bottom: 30px; }
.sos-steps li { counter-increment: paso; position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 18px; padding-bottom: 20px; }
.sos-steps li:last-child { padding-bottom: 0; }
.sos-pic {
  position: relative;
  width: 60px; height: 60px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--blanco); border: 1px solid var(--piedra);
  box-shadow: 0 10px 24px -16px rgba(18, 50, 74, .45);
}
.sos-pic svg { width: 42px; height: 42px; }
.sos-pic::after {
  content: counter(paso);
  position: absolute; right: -7px; top: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: var(--blanco);
  font-weight: 800; font-size: 12.5px;
}
.sos-steps li:not(:last-child)::after { content: ""; position: absolute; left: 29px; top: 66px; bottom: 6px; width: 2px; background: rgba(28, 123, 190, .22); }
.sos-steps b { display: block; font-weight: 700; font-size: 17.5px; line-height: 1.3; padding-top: 6px; }
.sos-steps div span { display: block; font-size: 16px; color: var(--tinta-75); margin-top: 2px; }
.sos-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* la guía queda como botón secundario: el que brilla es AURA */
.sos-guide { padding: 19px 30px; font-size: 16px; border-color: rgba(18, 50, 74, .3); color: var(--tinta); }
.sos-guide:hover { border-color: var(--tinta); }

/* Teléfonos: una fila de logos para tocar y llamar */
.sos-phones { margin-top: clamp(48px, 5vw, 72px); }
.sos-phones-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--tinta); margin-bottom: 18px; }
.sos-phones-title .br-mobile { display: none; }
.sos-phones-title svg { width: 20px; height: 20px; color: var(--azul); }
.sos-phones-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sos-phones-grid a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 112px; padding: 18px 12px;
  border-radius: 16px; background: var(--blanco); color: var(--tinta);
  border: 2px solid transparent;
  transition: border-color .2s;
}
.sos-phones-grid img { height: 28px; width: auto; max-width: 100%; object-fit: contain; }
.sos-phones-grid span { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; color: var(--azul); white-space: nowrap; }
.sos-phones-grid a:hover, .sos-phones-grid a:focus-visible { border-color: var(--azul-claro); outline: none; }
.sos-phones-grid a:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* cada aseguradora con su color: fondo suave, línea arriba y número en su tono */
.sos-phones-grid a { position: relative; overflow: hidden; background: var(--tel-bg, var(--blanco)); }
.sos-phones-grid a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--tel-c, var(--azul)); }
.sos-phones-grid a span { color: var(--tel-n, var(--azul)); }
.sos-phones-grid a:hover, .sos-phones-grid a:focus-visible { border-color: var(--tel-c, var(--azul-claro)); }
.tel-mapfre    { --tel-c: #FF002D; --tel-bg: #FFF0F2; --tel-n: #C4002A; }
.tel-lacaja    { --tel-c: #0E548E; --tel-bg: #EEF4FA; --tel-n: #0E548E; }
.tel-sancor    { --tel-c: #B00064; --tel-bg: #FBEFF5; --tel-n: #95005A; }
.tel-provincia { --tel-c: #2BB8CE; --tel-bg: #EAF8FA; --tel-n: #1D2C5B; }
.tel-zurich    { --tel-c: #2167AE; --tel-bg: #EDF3FA; --tel-n: #1B5A99; }
.sos-phones-grid img { height: 30px; }
.sos-phones-grid .tel-lacaja img { height: 52px; }
.sos-phones-grid .tel-provincia img { height: 46px; }
.sos-phones-grid a { min-height: 124px; box-shadow: 0 14px 30px -20px rgba(18, 50, 74, .45); }

@media (max-width: 1024px) {
  .sos-phones-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sos-phones-grid a { grid-column: span 2; }
  .sos-phones-grid a:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 960px) {
  .sos-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sos-photo { order: 0; transform: none; }
  .sos-photo { min-height: 260px; }
  .sos-main { padding: 24px 0 8px; }
}
@media (max-width: 640px) {
  .help { padding-block: 72px; }
  .sos-photo { min-height: 220px; border-radius: 18px; }
  .sos-main { padding: 22px 0 6px; }
  /* 2026-11-09 (Abi): en celular sin foto; queda el ícono de alerta grande, animado, con "Choque, robo o granizo" */
  .sos-photo { min-height: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; padding-top: 6px; }
  .sos-photo img, .sos-photo::after { display: none; }
  .sos-tag { position: static; gap: 14px; padding: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 17px; line-height: 1.25; letter-spacing: .01em; color: #C8372D; }
  .sos-tag svg { flex: none; width: 52px; height: 52px; padding: 10px; overflow: visible; }
  /* el ícono y "Choque, robo o granizo" van pegados al título, como una sola pieza */
  .sos-grid { gap: 0; }
  .sos-main { padding-top: 4px; }
  /* 2026-11-09 (Abi): un toque de rojo arriba de la card que se funde con su color */
  section.help { background: linear-gradient(180deg, #FBE1DC 0%, #F8ECEB 90px, var(--panel-claro) 300px); }
  @media (prefers-reduced-motion: no-preference) {
    html:not(.no-anim) .sos-tag svg { animation: alerta-ondas 1.6s ease-out infinite, alerta-sacude 2.4s ease-in-out infinite; }
    @keyframes alerta-ondas {
      0% { box-shadow: 0 0 0 0 rgba(255, 122, 100, .45), 0 0 0 0 rgba(255, 122, 100, .25); }
      100% { box-shadow: 0 0 0 14px rgba(255, 122, 100, 0), 0 0 0 26px rgba(255, 122, 100, 0); }
    }
    @keyframes alerta-sacude {
      0%, 55%, 100% { transform: rotate(0); }
      60% { transform: rotate(-10deg); } 66% { transform: rotate(9deg); }
      72% { transform: rotate(-6deg); } 78% { transform: rotate(4deg); } 84% { transform: rotate(0); }
    }
  }
  .sos-actions .btn { width: 100%; }

  .sos-phones-title .br-mobile { display: inline; }
  .sos-phones-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sos-phones-grid a, .sos-phones-grid a:nth-child(n+4) { grid-column: auto; }
  .sos-phones-grid a:last-child { grid-column: 1 / -1; }
  .sos-phones-grid a { min-height: 96px; padding: 14px 8px; }
  .sos-phones-grid img { height: 22px; }
  .sos-phones-grid span { font-size: 14.5px; }
}

/* ---------- AURA en el inicio: pensado como un buscador (solo inicio: .aura-ask) ----------
   Arriba se presenta diciendo qué hace, al medio la caja para escribir con el borde de luz
   de AURA, abajo las preguntas para tocar. Sin insignias ni tarjeta de publicidad. */
.aura-ask { padding-block: clamp(88px, 10vw, 136px); }
.aura-ask .aura-head { margin-bottom: clamp(32px, 4vw, 44px); }
.aura-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: #0E2A40; color: var(--blanco); font-weight: 700; font-size: 14.5px;
  box-shadow: 0 0 18px rgba(125, 211, 252, .45);
}
.aura-kicker .aura-spark { width: 16px; height: 16px; }
.aura-ask .aura-title { font-size: clamp(40px, 5vw, 64px); }
.aura-ask .aura-stage { max-width: 980px; margin: 0 auto; }
@media (min-width: 1024px) { .aura-ask .gpt-chips { flex-wrap: nowrap; } }

.aura-ask .gpt {
  display: flex; flex-direction: column;
  border-radius: 30px;
  border: 1px solid var(--piedra);
  background: var(--blanco);
  box-shadow: 0 40px 80px -48px rgba(18, 50, 74, .45), 0 10px 30px -20px rgba(18, 50, 74, .2);
  font-family: var(--font-body);
  color: var(--tinta);
}
/* orden: presentación, conversación o voz, caja para escribir, preguntas */
.aura-ask .gpt-head { order: 0; }
.aura-ask .gpt-intro, .aura-ask .gpt-thread, .aura-ask .gpt-voice { order: 1; }
.aura-ask .gpt-prompt-wrap { order: 2; }
.aura-ask .gpt-empty { order: 3; }

.gpt-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--piedra); }
.gpt-head-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #0E2A40; box-shadow: 0 0 14px rgba(125, 211, 252, .5); flex: none; }
.gpt-head-avatar .aura-spark { width: 18px; height: 18px; }
.gpt-head-name { display: flex; flex-direction: column; line-height: 1.15; }
.gpt-head-name b { font-weight: 800; font-size: 16px; color: var(--tinta); letter-spacing: .02em; }
.gpt-head-name small { font-size: 13px; color: var(--gris); }
.gpt-head-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ok); }
.gpt-head-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .2); }

/* AURA se presenta como un mensaje del chat */
.gpt-intro { display: flex; gap: 12px; align-items: flex-start; padding: 24px 24px 6px; }
.gpt-intro p {
  max-width: 600px;
  padding: 14px 18px; border-radius: 6px 20px 20px 20px;
  background: var(--marfil-2); border: 1px solid var(--piedra);
  font-size: 17px; line-height: 1.5; color: var(--tinta);
}
.gpt-intro b { font-weight: 700; }
.aura-stage.is-chatting .gpt-intro, .gpt:has(.gpt-voice:not([hidden])) .gpt-intro { display: none; }

/* la caja para escribir: grande, con el borde de luz de AURA */
.aura-ask .gpt-prompt-wrap { padding: 14px 24px 8px; background: transparent; }
.aura-ask .gpt-prompt { max-width: none; padding: 10px; border-radius: 24px; filter: drop-shadow(0 0 14px rgba(125, 211, 252, .35)); }
.aura-ask .gpt-prompt::before {
  border-radius: 26px; padding: 2.5px;
  background: conic-gradient(from var(--gpt-angle), #7DD3FC, #34D399, #FFFFFF, #5BB4F0, #1C7BBE, #7DD3FC);
  animation-duration: 4s;
}
.aura-ask .gpt-textarea { min-height: 64px; font-size: 18px; font-family: var(--font-body); }
.aura-ask .gpt-textarea::placeholder { color: #5B6B7A; }
.aura-ask .gpt-tool { width: auto; height: 40px; padding: 0 14px 0 10px; gap: 7px; display: inline-flex; align-items: center; border-radius: 999px; font: 600 14.5px var(--font-body); color: var(--tinta); }
.aura-ask .gpt-tool:hover { background: var(--azul-tinte); color: var(--azul); }
.aura-ask .gpt-send { width: 46px; height: 46px; background: #0E2A40; box-shadow: 0 0 14px rgba(125, 211, 252, .45); }
.aura-ask .gpt-send:hover:not(:disabled) { background: #163F62; }
.aura-ask .gpt-send:disabled { background: rgba(14, 42, 64, .35); box-shadow: none; }
.aura-ask .gpt-trust { font-size: 13px; color: var(--gris); margin-top: 12px; }

/* preguntas para tocar, debajo de la caja */
.aura-ask .gpt-empty { padding: 12px 24px 28px; gap: 0; }
.aura-ask .gpt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: none; }
.aura-ask .gpt-chip {
  align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px;
  font: 600 15px var(--font-body); color: var(--tinta);
  background: var(--blanco); border: 1px solid var(--piedra); box-shadow: none; backdrop-filter: none;
}
.aura-ask .gpt-chip svg { width: 18px; height: 18px; color: var(--azul); }
.aura-ask .gpt-chip:hover { transform: none; border-color: var(--azul-claro); background: var(--azul-tinte); box-shadow: none; }

/* voz: botón para volver a escribir */
.gpt-back { border: 1px solid var(--piedra); background: var(--blanco); border-radius: 999px; padding: 10px 18px; font: 600 15px var(--font-body); color: var(--tinta); cursor: pointer; }
.gpt-back:hover { border-color: var(--azul-claro); color: var(--azul); }

@media (max-width: 640px) {
  .gpt-head { padding: 14px 16px; }
  .gpt-intro { padding: 18px 14px 4px; }
  .gpt-intro p { font-size: 16px; }
  .aura-ask .gpt-prompt-wrap { padding: 12px 12px 6px; }
  .aura-ask .gpt-textarea { font-size: 16.5px; }
  .aura-ask .gpt-empty { padding: 10px 12px 22px; }
  .aura-ask .gpt-chip { width: 100%; justify-content: flex-start; }
}

/* ---------- Barra flotante: AURA siempre a mano (y "Cotizá tu seguro" en celular) ---------- */
.fbar {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  transition: opacity .3s ease, translate .3s ease, visibility .3s;
}
.fbar .cta-float { position: static; }
.aura-fab { padding: 0 22px; height: 54px; font-size: 15.5px; }
.aura-fab-short { display: none; }
/* se esconde con el formulario abierto; con el panel de AURA, ver aura.css */
body.lead-modal-open .fbar { opacity: 0; translate: 0 16px; pointer-events: none; }
/* se esconde al llegar al footer: la marca el script de sitio.js */
html.ft-en-vista .fbar { opacity: 0; translate: 0 16px; visibility: hidden; pointer-events: none; }
@media (min-width: 861px) { html.cmpx-btn-abajo .fbar { opacity: 0; translate: 0 16px; visibility: hidden; pointer-events: none; } }

@media (max-width: 860px) {
  /* 2026-11-09 (Abi): dos botones flotantes sueltos, sin la barra blanca que los juntaba.
     El naranja ocupa casi todo, AURA va chica al costado */
  .fbar { left: 16px; right: 16px; bottom: 16px; gap: 10px; }
  .fbar .cta-float { box-shadow: 0 14px 28px -10px rgba(255, 122, 20, .75), 0 6px 16px -6px rgba(18, 50, 74, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
  .fbar .cta-float { flex: 1; height: 50px; justify-content: center; }
  .aura-fab { height: 50px; padding: 0 16px; font-size: 15px; }
  .aura-fab-long { display: none; }
  .aura-fab-short { display: inline; }
}

/* ---------- Footer: azul noche, pocas cosas y mucho aire ---------- */
.ft { margin-top: var(--bloque); padding-bottom: 0; background: #0E2A40; color: rgba(255, 255, 255, .72); border-top: 0; border-radius: var(--panel-r) var(--panel-r) 0 0; }
.ft .wrap { padding-block: clamp(56px, 6.5vw, 96px) 28px; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px clamp(48px, 7vw, 104px); align-items: end; align-items: last baseline; }
.ft-logo { display: block; height: 60px; width: auto; filter: brightness(0) invert(1); }
.ft-lema { max-width: 19em; margin-top: 20px; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; color: #fff; text-wrap: balance; }
.ft-info { display: grid; grid-template-columns: repeat(3, auto); gap: 32px clamp(32px, 4vw, 64px); align-items: end; align-items: last baseline; }
.ft a:hover { color: #7DD3FC; text-decoration: underline; text-underline-offset: 5px; }
.ft a:focus-visible { outline: 3px solid #7DD3FC; outline-offset: 3px; border-radius: 4px; }
.ft-office { max-width: 25ch; font-size: 15.5px; line-height: 1.5; }
.ft-office:last-child { max-width: none; }
.ft-office b { display: block; font-weight: 600; font-size: 16px; color: #fff; margin-bottom: 6px; }
.ft-office p + p { margin-top: 6px; }
.ft-office a { display: block; width: fit-content; padding: 2px 0; color: #fff; font-weight: 500; }
.ft-bottom { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 80px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14.5px; color: rgba(255, 255, 255, .72); }
.ft-bottom a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; }

@media (max-width: 1024px) { .ft-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ft .wrap { padding-top: 48px; }
  .ft-info { grid-template-columns: minmax(0, 1fr); }
  .ft-office { max-width: none; }
  .ft-bottom { flex-direction: column; }
}

/* ---------- Celular: un solo botón de cotizar (el flotante) y título más compacto ---------- */
@media (max-width: 860px) {
  .header-actions .header-cta { display: none; }
  .hero-home .hero-title { font-size: clamp(34px, 9.4vw, 44px); }
}

/* =====================================================================
   PÁGINAS DE CADA LÍNEA DE SEGURO (primera: seguros-patrimoniales.html)
   Mismo idioma visual que el inicio. Prefijo pp- (página de producto).
   ===================================================================== */

/* menú: la página donde estás queda marcada */
.nav-drop-btn.is-current { color: var(--tinta); border-color: var(--azul-claro); }
.nav-menu a[aria-current="page"] { background: var(--azul-tinte); }
.mnav-list a[aria-current="page"] { color: var(--azul); }

/* ---------- Hero: el mismo comienzo que el inicio ----------
   Título al centro, selector con los seguros de la línea y foto ancha abajo. */
.picker-4 { width: min(820px, 100%); }
.picker-4 .picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* en las páginas de cada línea, cada seguro del selector es un botón que abre el formulario */
button.pick { width: 100%; font: inherit; color: inherit; cursor: pointer; }
@media (max-width: 640px) { .picker-4 .picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-line .hero-film img { object-position: 50% 40%; }
.hero-home.hero-line .hero-sub { max-width: 58ch; }

/* ---------- Cómo se cotiza: tres pasos que se entienden mirando ---------- */
.pp-steps {
  padding-block: clamp(88px, 10vw, 136px);
  background: linear-gradient(180deg, rgba(234, 243, 251, 0) 0%, #EAF3FB 20%, #EAF3FB 80%, rgba(234, 243, 251, 0) 100%);
}
.pp-steps-row { position: relative; list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pp-gap); --pp-gap: clamp(44px, 5.4vw, 76px); }
.pp-steps-row li { counter-increment: paso; position: relative; z-index: 1; }
.pp-step-art {
  position: relative; height: 184px; padding: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: 26px; background: var(--blanco); border: 1px solid var(--piedra);
  box-shadow: 0 24px 48px -32px rgba(18, 50, 74, .45);
}
.pp-step-art::before {
  content: counter(paso);
  position: absolute; left: 20px; top: -14px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul); color: var(--blanco); font-weight: 800; font-size: 15px;
  box-shadow: 0 0 0 5px #EAF3FB;
}
.pp-steps-row h3 { font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 18, "SOFT" 100, "WONK" 0; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.15; color: var(--tinta); margin: 26px 0 8px; text-wrap: balance; }
.pp-steps-row p { font-size: 17px; line-height: 1.5; color: var(--tinta-75); max-width: 34ch; text-wrap: pretty; }

/* 1: un formulario corto, con lo que quieres asegurar ya escrito */
.pp-form-line { display: flex; align-items: center; gap: 10px; width: min(240px, 100%); height: 38px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--piedra); font-size: 14.5px; color: var(--gris); }
.pp-form-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--piedra); flex: none; }
.pp-form-line.is-on { border-color: var(--azul-claro); color: var(--tinta); font-weight: 600; box-shadow: 0 0 0 4px var(--azul-tinte); }
.pp-form-line.is-on i { background: var(--azul); }
/* 2: los logos de las aseguradoras */
.pp-art-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; }
.pp-art-logos span { height: 58px; border-radius: 14px; background: var(--marfil-2); display: grid; place-items: center; padding: 0 14px; }
.pp-art-logos img { max-width: 100%; height: 22px; width: auto; object-fit: contain; }
.pp-art-logos img[src*="provincia"] { height: 34px; }
/* Prepagas: los logos son más anchos, se achican sin deformarse */
.pp-art-prepagas img { height: 26px; width: 100%; object-fit: contain; }
.pp-art-prepagas img[src*="swiss"] { height: 34px; }
.pp-art-prepagas img[src*="sancor"] { height: 30px; }
/* 3: el alivio. La única tarjeta llena de color: Mayorazgo te está llamando */
.pp-art-call {
  gap: 14px; overflow: visible;
  background: radial-gradient(120% 90% at 85% 0%, #5FB3E4 0%, rgba(95, 179, 228, 0) 60%), linear-gradient(160deg, #3C96CD 0%, #1C7BBE 55%, #2F759C 100%);
  border-color: transparent; color: var(--blanco);
  box-shadow: 0 30px 56px -26px rgba(28, 123, 190, .75);
}
.pp-call-card {
  display: flex; align-items: center; gap: 12px; width: min(300px, 100%); padding: 10px 10px 10px 12px;
  border-radius: 22px; background: var(--blanco); color: var(--tinta);
  box-shadow: 0 18px 36px -18px rgba(10, 40, 70, .6);
}
.pp-call-logo { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--blanco); border: 1.5px solid var(--piedra); }
.pp-call-logo img { width: 30px; height: 30px; }
.pp-call-who { flex: 1; display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.pp-call-who b { font-size: 17px; font-weight: 700; }
.pp-call-who small { font-size: 14px; color: var(--tinta-75); }
.pp-call-ring { position: relative; flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #4CD08F, #22A564); color: var(--blanco); box-shadow: 0 10px 20px -8px rgba(34, 165, 100, .8); }
.pp-call-ring svg { width: 22px; height: 22px; }
.pp-call-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .4); font-size: 14.5px; font-weight: 600; color: var(--blanco); }
.pp-call-chip svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--blanco); color: #22A564; }

@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .pp-steps-row li { opacity: 0; transform: translateY(18px); transition: opacity .6s ease calc(var(--i) * 140ms), transform .8s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 140ms); }
  html:not(.no-anim) .pp-steps-row.is-visible li { opacity: 1; transform: none; }
  html:not(.no-anim) .pp-steps-row.is-visible .pp-form-line.is-on { animation: pp-type .8s steps(8) .9s both; }
  html:not(.no-anim) .pp-steps-row.is-visible .pp-call-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: pp-ring 1.6s ease-out 1.2s infinite; }
  html:not(.no-anim) .pp-steps-row.is-visible .pp-call-ring svg { animation: pp-shake 1.6s ease-in-out 1.2s infinite; }
  @keyframes pp-type { from { clip-path: inset(0 100% 0 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
  @keyframes pp-ring { from { box-shadow: 0 0 0 0 rgba(76, 208, 143, .6); } to { box-shadow: 0 0 0 16px rgba(76, 208, 143, 0); } }
  @keyframes pp-shake { 0%, 40%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-14deg); } 10%, 20%, 30% { transform: rotate(14deg); } }
}
@media (max-width: 860px) {
  .pp-steps-row { grid-template-columns: minmax(0, 1fr); --pp-gap: 60px; }
  .pp-steps-row p { max-width: none; }
}

/* cierre de las páginas de cada línea: el título entra en dos líneas */
.finale-v3 .pp-fin-title { max-width: 26ch; }

/* ---------- AURA como un buscador: sin caja alrededor (inicio y landings) ----------
   Título al centro, una sola barra para escribir y las preguntas sugeridas debajo
   (como ChatGPT). El comportamiento sigue en js/landing.js; acá solo cambia el aspecto */
.aura-search {
  background:
    radial-gradient(60% 70% at 50% 62%, rgba(60, 150, 205, .22) 0%, rgba(60, 150, 205, 0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #EEF6FC 45%, #EEF6FC 70%, #FFFFFF 100%) !important;
}
.aura-search .why-dots, .aura-search .aura-kicker, .aura-search .aura-halo, .aura-search .aura-ring, .aura-search .aura-badge { display: none !important; }
.aura-search .aura-head { margin-bottom: 36px; }
.aura-search .section-title { font-size: clamp(40px, 4.6vw, 68px); }
.aura-search .aura-stage { max-width: 1080px; margin-inline: auto; }
.aura-search .gpt-prompt-wrap, .aura-search .gpt-thread, .aura-search .gpt-voice { width: 100%; max-width: 820px; margin-inline: auto; }
.aura-search .gpt {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0; overflow: visible; display: flex; flex-direction: column;
}
.aura-search .gpt-head, .aura-search .gpt-intro { display: none !important; }

/* La barra para escribir: una sola línea, redonda, con sombra suave */
.aura-search .gpt-prompt-wrap { order: 2; padding: 0; background: transparent; }
.aura-search .gpt-prompt {
  max-width: none; padding: 8px 8px 8px 10px; border-radius: 999px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 4px;
  background: #fff; border: 2px solid transparent; filter: none;
  background-image: linear-gradient(#fff, #fff), linear-gradient(100deg, #7DD3FC, #3C96CD 45%, #2F759C 70%, #7DD3FC);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 18px 50px -16px rgba(47, 117, 156, .55), 0 0 0 8px rgba(60, 150, 205, .10);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.aura-search .gpt-prompt:focus-within { box-shadow: 0 18px 50px -16px rgba(47, 117, 156, .65), 0 0 0 8px rgba(60, 150, 205, .22); }
.aura-search .gpt-prompt::before { display: none; }
.aura-search .gpt-toolbar { display: contents; }
.aura-search .gpt-file-pill { grid-column: 1 / -1; grid-row: 1; margin: 2px 8px 6px; }
.aura-search #gpt-attach { grid-column: 1; grid-row: 2; }
.aura-search .gpt-textarea { grid-column: 2; grid-row: 2; min-height: 0; height: 58px; max-height: 140px; padding: 17px 8px; font-size: 18px; line-height: 1.3; }
.aura-search .gpt-textarea::placeholder { color: #5D6E7E; }
.aura-search .gpt-tool { color: #2F759C; font-weight: 700; }
.aura-search .gpt-toolbar-right { grid-column: 3; grid-row: 2; }
.aura-search .gpt-send, .aura-search .gpt-send:disabled { width: 54px; height: 54px; background: #3C96CD; color: #fff; box-shadow: 0 8px 18px -8px rgba(47, 117, 156, .8); }
.aura-search .gpt-send:hover:not(:disabled) { background: #2F759C; }
.aura-search .gpt-send svg { width: 22px; height: 22px; }
.aura-search .gpt-trust { order: 3; margin-top: 14px; font-size: 13px; color: var(--tinta-75); }

/* Preguntas sugeridas: texto simple debajo, sin cajas */
.aura-search .gpt-empty { order: 4; padding: 22px 0 0 !important; background: transparent; }
.aura-search .gpt-chips { display: flex !important; flex-wrap: nowrap; justify-content: center; gap: 8px; max-width: none; }
.aura-search .gpt-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; white-space: nowrap;
  border: 0 !important; border-radius: 999px; background: rgba(255, 255, 255, .75) !important; box-shadow: none !important;
  backdrop-filter: none; transform: none !important;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 500; color: var(--tinta-75);
}
.aura-search .gpt-chip:hover, .aura-search .gpt-chip:focus-visible { background: #fff !important; color: var(--tinta); }
.aura-search .gpt-chip svg { color: #3C96CD; }

/* La conversación aparece arriba de la barra, sin marco */
.aura-search .gpt-thread { order: 1; min-height: 0; max-height: 460px; padding: 0 4px 22px; }
.aura-search .gpt-voice { order: 1; }

@media (max-width: 700px) {
  .aura-search .gpt-prompt { padding: 6px 6px 6px 6px; }
  .aura-search #gpt-attach span, .aura-search [data-gpt-tab="voice"] span { display: none; }
  .aura-search .gpt-textarea { font-size: 16px; height: 52px; padding: 15px 4px; }
  .aura-search .gpt-textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .aura-search .gpt-chips { flex-direction: column; align-items: stretch; flex-wrap: wrap; }
  .aura-search .gpt-chip { white-space: normal; }
  .aura-search .gpt-chip { justify-content: flex-start; }
}

/* ---------- PREGUNTAS FRECUENTES: formato único para todas las páginas (Abi 2026-10-28) ----------
   Título grande a la izquierda con una tarjeta de AURA que acompaña al bajar.
   Las preguntas van grandes, sin cajas, separadas por una línea; la abierta se tiñe de celeste */
.faq { padding-block: clamp(88px, 10vw, 140px); background: #fff; }
.faq-inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 104px); }
.faq .section-head { position: sticky; top: calc(var(--header-h) + 32px); }
.faq .section-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(44px, 5vw, 80px); line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
.faq-aura {
  margin-top: clamp(28px, 3vw, 40px); padding: 28px; border-radius: 28px; max-width: 420px;
  background: linear-gradient(150deg, #EAF3FB 0%, #DCEBF7 100%);
}
.faq-aura-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: #fff; color: var(--azul); box-shadow: 0 10px 24px -14px rgba(28, 123, 190, .6); }
.faq-aura-ic svg { width: 26px; height: 26px; }
.faq-aura-t { margin: 18px 0 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--tinta); }
.faq-aura-s { margin: 8px 0 0; font-size: 18px; line-height: 1.45; color: var(--tinta-75); text-wrap: pretty; }
.faq-aura-btn {
  display: inline-flex; align-items: center; min-height: 50px; margin-top: 20px; padding: 0 24px; border-radius: 999px;
  background: var(--azul); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
  box-shadow: 0 12px 26px -12px rgba(28, 123, 190, .75); transition: background-color .25s ease;
}
.faq-aura-btn:hover { background: var(--azul-hover); }
.faq-aura-btn:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; }

.faq-list { gap: 0; }
.faq details {
  background: transparent; border: 0; border-bottom: 1px solid var(--piedra); border-radius: 22px 22px 0 0;
  padding: 0 24px; transition: background-color .3s ease;
}
.faq details[open] { background: #EAF3FB; border-bottom-color: transparent; border-radius: 22px; }
.faq summary {
  padding: 26px 64px 26px 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -0.015em; color: var(--tinta); text-wrap: balance;
  transition: color .25s ease;
}
@media (hover: hover) { .faq summary:hover { color: var(--azul); } }
.faq summary::after { width: 40px; height: 40px; background-color: var(--azul); }
.faq summary::before { width: 40px; height: 40px; color: #fff; font-family: var(--font-body); font-size: 24px; font-weight: 500; }
.faq details[open] summary::after { background-color: #fff; }
.faq details[open] summary::before { color: var(--azul); }
.faq details p { margin: -6px 0 0; padding: 0 64px 28px 0; font-size: 18px; line-height: 1.55; color: var(--tinta-75); }
@media (max-width: 860px) {
  .faq-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* En el celular primero las preguntas y después la tarjeta de AURA */
  .faq .section-head { display: contents; }
  .faq .faq-list { order: 1; }
  .faq .faq-aura { order: 2; margin-top: 0; }
  .faq .section-title { font-size: clamp(38px, 10vw, 48px); }
  .faq-aura { max-width: none; padding: 22px; }
  .faq details { padding: 0 16px; }
  .faq summary { padding: 20px 52px 20px 0; font-size: 19px; }
  .faq summary::after, .faq summary::before { width: 34px; height: 34px; }
  .faq details p { padding: 0 0 22px; font-size: 17px; }
}

/* ---------- FAMILIA / NOSOTROS: bloque azul igual en todas las páginas (Abi 2026-10-28: "muy blend, sin personalidad") ----------
   Bloque azul de Mayorazgo a todo el ancho: la foto llega al borde de la pantalla,
   el texto va en blanco y la torre aparece grande y transparente detrás.
   El blanco de la página se corta acá a propósito: es lo que hay que resaltar. */
.about {
  position: relative; isolation: isolate; overflow: hidden; padding: 0; color: #fff;
  background: linear-gradient(120deg, #2F759C 0%, #3C96CD 100%);
}
.about::after {
  content: ""; position: absolute; z-index: -1; right: -6vw; bottom: -14%; width: min(46vw, 640px); aspect-ratio: 78 / 90;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='212 32 78 90'%3E%3Cpath fill='white' d='M251.47 119.77 241.96 117.48 242.39 78.4 234.33 78.2 233.37 115.13 215.01 109.71 215.73 96.82 219.72 97.27 221.77 53.62 218.71 53.93 219.32 42.98 235.36 38.75 235.03 51.36 242.79 50.04 242.97 36.75 251.47 34.52Z'/%3E%3Cpath fill='white' opacity='.7' d='M251.47 119.77 260.98 117.48 260.55 78.4 268.62 78.2 269.58 115.13 287.94 109.71 287.21 96.82 283.23 97.27 281.18 53.62 284.23 53.93 283.62 42.98 267.59 38.75 267.92 51.36 260.16 50.04 259.98 36.75 251.47 34.52Z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .09; pointer-events: none;
}
.about .wrap { max-width: none; padding: 0; }
.about-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.about-photo { min-height: clamp(560px, 74vh, 780px); border-radius: 0; }
.about-pin { left: clamp(20px, 4vw, 40px); bottom: clamp(20px, 3vw, 36px); }
.about-photo img { object-position: 50% 40%; }
.about-text { align-self: center; max-width: 660px; padding: clamp(64px, 7vw, 112px) clamp(32px, 6vw, 104px); }
.about-text .section-title { color: #fff; font-size: clamp(44px, 4.8vw, 76px); line-height: 1.06; letter-spacing: -0.03em; }
.about-text .section-sub { color: rgba(255, 255, 255, .9); font-size: 20px; }
.about-stats dt { color: #fff; font-size: clamp(56px, 5.6vw, 84px); }
.about-stats dd { color: rgba(255, 255, 255, .88); }
.about-stats > div + div { border-left-color: rgba(255, 255, 255, .35); }
.about .btn-dark { background: #fff; color: #2F759C; box-shadow: 0 16px 34px -16px rgba(10, 40, 70, .55); }
.about .btn-dark:hover { background: #EAF3FB; color: #2F759C; }
@media (max-width: 860px) {
  .about { padding: 0; }
  .about-panel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .about-photo { min-height: 380px; border-radius: 0; }
  .about-text { padding: 48px 20px 64px; }
  .about-text .section-title { font-size: clamp(36px, 10vw, 46px); }
  .about-text .section-sub { font-size: 18px; }
  .about::after { width: 80vw; right: -24vw; bottom: -8%; }
}

/* ---------- INICIO: título con palabra que cambia ----------
   "Cuidamos tu" queda fijo y abajo pasan las cosas que asegura Mayorazgo.
   Todas las palabras ocupan la misma celda, así el título no salta de ancho. */
.hero-rot-title .rot { display: inline-grid; justify-items: center; color: #2F759C; }
.hero-rot-title .rot-w { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(100%); }
.hero-rot-title .rot-w.is-on { opacity: 1; transform: none; }
.hero-rot-title .rot-w.is-out { opacity: 0; transform: translateY(-100%); }
@media (prefers-reduced-motion: no-preference) {
  .hero-rot-title .rot-w { transition: transform .8s cubic-bezier(.22, 1.2, .36, 1), opacity .5s ease; }
  .hero-rot-title .rot-w.is-out { transition: transform .6s cubic-bezier(.5, 0, .75, 0), opacity .4s ease; }
}

/* ---------- Fondos: paneles redondeados (Abi, 2026-10-31) ----------
   Sin esfumados azules. Cada sección con fondo es un panel con esquinas redondeadas,
   con un margen chico a los costados. Las claras van en un gris muy suave y liso;
   las de color (azul, noche, foto) mantienen su color. Entre dos paneles seguidos queda
   una línea blanca, como tarjetas apiladas. */
:root { --panel-gap: clamp(8px, 1.2vw, 18px); --panel-claro: #F3F6F9; }
.why, .att-live, .help, .pp-steps, .cmpx, .about, .finale, .pt-close {
  margin-inline: var(--panel-gap); border-radius: var(--panel-r); overflow: clip;
}
:is(.why, .att-live, .help, .pp-steps, .cmpx, .about, .finale, .pt-close) + :is(.why, .att-live, .help, .pp-steps, .cmpx, .about, .finale, .pt-close) { margin-top: var(--panel-gap); }
.why, .help, .pp-steps { background: var(--panel-claro); }
.carriers-color { background: #fff; border-top: 0; border-bottom: 0; }
.aura-light { background: #fff; }
.faq-aura { background: var(--panel-claro); }
.faq details[open] { background: var(--panel-claro); }

/* ---------- Tarjetas: la misma letra en toda la web ---------- */
:root { --card-t: clamp(18px, 1.6vw, 30px); --card-p: 16.5px; }
@media (min-width: 701px) and (max-width: 1024px) { :root { --card-t: 24px; } }
.lc h3, .why-card h3, .faq-aura-t, .faq summary { font-size: var(--card-t); }
.lc p, .why-card p, .faq-aura-s, .faq details p { font-size: var(--card-p); }
.lc-go, .faq-aura-btn { font-size: var(--card-btn); }

/* ---------- Pasos: flechita que marca el recorrido de un paso al otro ---------- */
.pp-steps-row li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2; top: 78px; left: calc(100% + var(--pp-gap) / 2 - 14px); width: 28px; height: 28px;
  background: var(--azul); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .pp-steps-row li:not(:last-child)::after { animation: pp-flecha 1.5s ease-in-out infinite; }
  @keyframes pp-flecha { 0%, 100% { translate: -6px 0; opacity: .4; } 50% { translate: 6px 0; opacity: 1; } }
  @keyframes pp-flecha-v { 0%, 100% { translate: 0 -6px; opacity: .4; } 50% { translate: 0 6px; opacity: 1; } }
}
@media (max-width: 860px) {
  .pp-steps-row li:not(:last-child)::after { top: calc(100% + var(--pp-gap) / 2 - 14px); left: calc(50% - 14px); rotate: 90deg; animation-name: pp-flecha-v; }
}

/* ---------- "Una familia de Mendoza": entra entero en la pantalla ---------- */
.about-photo { min-height: clamp(420px, calc(100svh - 124px), 620px); }
.about-text { padding-block: clamp(28px, 5vh, 56px); }
.about-text .section-title { font-size: clamp(36px, min(3.8vw, 7vh), 60px); margin-bottom: 12px; }
.about-text .section-sub { font-size: 18px; margin-bottom: clamp(16px, 3vh, 28px); }
.about-stats { margin-bottom: clamp(16px, 3vh, 28px); }
.about-stats dt { font-size: clamp(40px, min(4.4vw, 8vh), 64px); }
@media (max-width: 860px) {
  .about-photo { min-height: clamp(170px, 24svh, 260px); }
  .about-text { padding: 24px 20px 28px; }
  .about-text .section-title { font-size: clamp(30px, 8.4vw, 40px); margin-bottom: 8px; }
  .about-text .section-sub { font-size: 16.5px; margin-bottom: 14px; }
  .about-stats { margin-bottom: 16px; }
  .about-stats dt { font-size: 40px; }
}

.about + .pt-close--chico, .about + .finale-v3 { margin-top: var(--bloque); }

/* ---------- Siniestro: tres tarjetas blancas, cada una dice cuándo hacerlo ---------- */
.sos-when { display: grid; gap: 10px; margin-bottom: 30px; }
.sos-steps.sos-when li { display: block; padding: 18px 22px; border-radius: 20px; background: var(--blanco); box-shadow: 0 12px 28px -22px rgba(18, 50, 74, .45); }
.sos-when li::after { display: none; }
.sos-when em { display: block; font-style: normal; font-weight: 700; font-size: 14px; color: var(--azul); margin-bottom: 4px; }
.sos-when b { display: block; padding: 0; font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--tinta); }
.sos-when span { display: block; font-size: 16px; line-height: 1.45; color: var(--tinta-75); margin-top: 2px; }

/* ---------- Un broker que trabaja para vos: los tres pasos entran uno detrás del otro ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .why-anim[data-reveal] { opacity: 1; transform: none; transition: none; }
  html:not(.no-anim) .why-anim .why-card { opacity: 0; transform: translateY(34px) scale(.97); transition: opacity .6s ease calc(var(--i) * 220ms), transform .8s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 220ms); }
  html:not(.no-anim) .why-anim .why-n { transform: scale(0); }
  html:not(.no-anim) .why-anim .why-card h3, html:not(.no-anim) .why-anim .why-card p { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 220ms + 320ms); }
  html:not(.no-anim) .why-anim .why-card p { transition-delay: calc(var(--i) * 220ms + 420ms); }
  html:not(.no-anim) .why-anim.is-visible .why-card { opacity: 1; transform: none; }
  html:not(.no-anim) .why-anim.is-visible .why-card h3, html:not(.no-anim) .why-anim.is-visible .why-card p { opacity: 1; transform: none; }
  html:not(.no-anim) .why-anim.is-visible .why-n { animation: why-pop .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 220ms + 180ms) both, why-onda 1s ease-out calc(var(--i) * 220ms + 500ms) 1; }
  @keyframes why-pop { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes why-onda { from { box-shadow: 0 0 0 0 rgba(28, 123, 190, .45); } to { box-shadow: 0 0 0 16px rgba(28, 123, 190, 0); } }
}

/* ---------- Inicio: foto de portada como en las landings ----------
   Mide la pantalla menos el menú y corta a la mitad de los botones de "¿Qué querés asegurar?".
   El alto exacto lo ajusta js/sitio.js (--extra y el borde de abajo de la foto). */
.hero-foto { position: relative; isolation: isolate; padding: calc(clamp(56px, 7vw, 104px) + var(--extra, 0px) / 2) 0 0; }
.hero-foto-bg { position: absolute; inset: 0 0 150px 0; z-index: -1; overflow: hidden; background: #2B4A62; }
.hero-foto-bg picture, .hero-foto-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-foto-bg img { object-fit: cover; object-position: 50% 30%; }
.hero-foto .hero-title { color: #fff; text-shadow: 0 2px 30px rgba(18, 50, 74, .45); }
.hero-foto .hero-sub { color: #fff; font-weight: 500; text-shadow: 0 1px 14px rgba(18, 50, 74, .6); }
.hero-foto .picker { background: none; border: 0; box-shadow: none; padding: 0; margin: calc(8px + var(--extra, 0px) / 2) auto 0; }
.hero-foto .picker-q { color: #fff; text-shadow: 0 1px 14px rgba(18, 50, 74, .6); }
.hero-foto .pick { background: #fff; box-shadow: 0 18px 36px -20px rgba(10, 30, 50, .55); }
.hero-foto .pick:hover, .hero-foto .pick:focus-visible { background: #fff; border-color: rgba(28, 123, 190, .45); }
.hero-foto .picker-foot { margin-top: 22px; }
.hero-foto + .lines { padding-top: clamp(64px, 7vw, 104px); }
@media (max-width: 860px) {
  .hero-foto { padding-top: calc(44px + var(--extra, 0px) / 2); }
  .hero-foto-bg img { object-position: 18% 30%; }
  .hero-foto .picker { margin-bottom: 0; padding: 0; }
  .hero-foto + .lines { padding-top: 64px; }
}

/* La palabra que cambia: celeste claro con un brillo, y un destello que la cruza cada vez que entra */
.hero-foto .hero-rot-title .rot { color: #A8DCF8; filter: drop-shadow(0 0 14px rgba(125, 211, 252, .55)); }
.hero-foto .hero-rot-title .rot-w {
  text-shadow: none;
  background: linear-gradient(100deg, #A8DCF8 0%, #A8DCF8 38%, #FFFFFF 50%, #A8DCF8 62%, #A8DCF8 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .hero-foto .hero-rot-title .rot-w.is-on { animation: rot-destello 1.4s ease-in-out .45s both; }
  @keyframes rot-destello { from { background-position: 100% 0; } to { background-position: 0 0; } }
}

/* ---------- Siniestro: cada tarjeta lleva su número grande, con degradé azul ---------- */
.sos-when { counter-reset: sos; }
.sos-steps.sos-when li { counter-increment: sos; position: relative; padding-right: 92px; }
.sos-steps.sos-when li::before {
  content: counter(sos);
  position: absolute; right: 24px; top: 50%; translate: 0 -52%;
  font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 1;
  background: linear-gradient(160deg, #7DD3FC 0%, #1C7BBE 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 640px) {
  .sos-steps.sos-when li { padding-right: 70px; }
  .sos-steps.sos-when li::before { right: 18px; font-size: 52px; }
}

/* Broker: después de entrar, cada 6 segundos los números dan un saltito con su onda (js/sitio.js) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .why-anim.is-visible.why-ping .why-n { animation: why-salto .8s cubic-bezier(.3, 1.4, .5, 1) calc(var(--i) * 180ms) both, why-onda 1s ease-out calc(var(--i) * 180ms + 120ms) 1; }
  @keyframes why-salto { 0% { transform: none; } 35% { transform: translateY(-8px) scale(1.14); } 70% { transform: translateY(0) scale(.96); } 100% { transform: none; } }
}

/* Siniestro: la foto va derecha */
.sos-photo { transform: none; }

/* Inicio: la palabra que cambia, del mismo tamaño que "Cuidamos tu" (Abi 2026-11-07) */
.hero-foto .hero-rot-title .rot { font-size: 1em; line-height: 1; }
/* Bajada de una línea, del ancho de "Cuidamos tu" (el tamaño exacto lo pone js/sitio.js) */
.hero-foto .hero-sub { font-size: clamp(19px, 1.9vw, 27px); line-height: 1.3; margin-bottom: 0; max-width: none; }
.hero-foto .picker { margin-top: calc(clamp(28px, 3.4vw, 48px) + var(--extra, 0px) / 2); }

/* ---------- 2026-11-06 ---------- */
/* Inicio: foto de la familia frente a la casa. La familia queda a la izquierda, sin cortarse */
/* La foto es un poco más alta que el recuadro y se corta abajo: así el auto queda más abajo, lejos de la bajada */
.hero-foto-bg img { inset: 0 0 auto 0; height: 115%; object-position: 14% 0; }
@media (max-width: 860px) { .hero-foto-bg img { height: 100%; object-position: 26% 40%; } }
/* La bajada, un poco más separada del título */
.hero-foto .hero-sub { margin-top: clamp(14px, 1.8vw, 26px); }

/* Las secciones aparecen más rápido: menos recorrido y menos espera entre una tarjeta y otra */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) [data-reveal] { transition-duration: .45s; }
  html:not(.no-anim) .lc[data-reveal] { transition: opacity .4s ease var(--d), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d), clip-path .6s cubic-bezier(.2, .7, .2, 1) var(--d); }
  .lc { --d: calc(var(--i, 0) * 60ms); }
  html:not(.no-anim) .lc.is-visible .lc-body { animation-duration: .5s; animation-delay: calc(var(--d) + .15s); }
  html:not(.no-anim) .lc.is-visible .lc-chip { animation-delay: calc(var(--d) + .35s); }
  html:not(.no-anim) .why-anim .why-card { transition: opacity .45s ease calc(var(--i) * 140ms), transform .55s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 140ms); }
  html:not(.no-anim) .why-anim .why-card h3 { transition-delay: calc(var(--i) * 140ms + 160ms); }
  html:not(.no-anim) .why-anim .why-card p { transition-delay: calc(var(--i) * 140ms + 220ms); }
  html:not(.no-anim) .why-anim.is-visible .why-n { animation: why-pop .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 140ms + 120ms) both, why-onda 1s ease-out calc(var(--i) * 140ms + 420ms) 1; }

  /* Broker: cada 6 segundos los números se repiten igual que la primera vez (aparecen y largan su onda) */
  html:not(.no-anim) .why-anim.is-visible.why-ping .why-n { animation: why-pop2 .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 220ms) both, why-onda2 1s ease-out calc(var(--i) * 220ms + 320ms) 1; }
  @keyframes why-pop2 { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes why-onda2 { from { box-shadow: 0 0 0 0 rgba(28, 123, 190, .45); } to { box-shadow: 0 0 0 16px rgba(28, 123, 190, 0); } }

  /* Siniestro: los números 1, 2 y 3 aparecen uno detrás del otro, y se repite cada 5 segundos (js/sitio.js) */
  html:not(.no-anim) .sos-when li::before { transform-origin: 50% 60%; }
  html:not(.no-anim) .sos:not(.is-visible) .sos-when li::before { opacity: 0; }
  html:not(.no-anim) .sos.is-visible .sos-when li::before { animation: sos-num .8s cubic-bezier(.3, 1.5, .5, 1) calc(var(--n) * 260ms + 250ms) both; }
  html:not(.no-anim) .sos.is-visible.sos-ping .sos-when li::before { animation: sos-num2 .8s cubic-bezier(.3, 1.5, .5, 1) calc(var(--n) * 260ms) both; }
  .sos-when li:nth-child(1) { --n: 0; }
  .sos-when li:nth-child(2) { --n: 1; }
  .sos-when li:nth-child(3) { --n: 2; }
  @keyframes sos-num { 0% { opacity: 0; transform: translateY(14px) scale(.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  @keyframes sos-num2 { 0% { opacity: 0; transform: translateY(14px) scale(.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
}

/* Inicio: la bajada va sobre una cápsula azul oscuro para que se lea sobre la foto (sin efecto vidrio) */
.hero-foto .hero-sub { width: fit-content; margin-inline: auto; padding: .32em 1.05em; border-radius: 999px; background: rgba(13, 38, 58, .62); text-shadow: none; }
@media (max-width: 860px) { .hero-foto .hero-sub { padding: .4em 1em; border-radius: 22px; } }

/* Inicio: la palabra que cambia tiene lugar abajo para las letras con colita (p, g, y). Sin esto la "p" de "empresa" salía cortada */
.hero-foto .hero-rot-title .rot-w { padding-bottom: .24em; margin-bottom: -.24em; }
.hero-foto .hero-rot-title .hl:last-child { padding-bottom: .38em; margin-bottom: -.38em; }

/* Siniestro: los números 1, 2 y 3 se escriben de izquierda a derecha y después los cruza un brillo.
   Se repite cada 5 segundos (js/sitio.js) */
.sos-steps.sos-when li::before {
  background:
    linear-gradient(110deg, transparent 0 40%, rgba(255, 255, 255, .95) 50%, transparent 60% 100%) no-repeat,
    linear-gradient(160deg, #7DD3FC 0%, #1C7BBE 70%);
  background-size: 300% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .sos.is-visible .sos-when li::before { animation: sos-write .8s cubic-bezier(.45, .05, .3, 1) calc(var(--n) * 380ms + 200ms) both, sos-shine 1.1s ease-in-out calc(var(--n) * 380ms + 900ms) both; }
  html:not(.no-anim) .sos.is-visible.sos-ping .sos-when li::before { animation: sos-write2 .8s cubic-bezier(.45, .05, .3, 1) calc(var(--n) * 380ms) both, sos-shine2 1.1s ease-in-out calc(var(--n) * 380ms + 700ms) both; }
  @keyframes sos-write { from { opacity: 1; clip-path: inset(-15% 100% -15% 0); } to { opacity: 1; clip-path: inset(-15% -5% -15% 0); } }
  @keyframes sos-write2 { from { opacity: 1; clip-path: inset(-15% 100% -15% 0); } to { opacity: 1; clip-path: inset(-15% -5% -15% 0); } }
  @keyframes sos-shine { from { background-position: 100% 0, 0 0; } to { background-position: 0 0, 0 0; } }
  @keyframes sos-shine2 { from { background-position: 100% 0, 0 0; } to { background-position: 0 0, 0 0; } }

  /* Broker: los números quedan quietos; cada 6 segundos solo se repite la onda circular de la primera vez */
  html:not(.no-anim) .why-anim.is-visible.why-ping .why-n { transform: none; animation: why-onda2 1s ease-out calc(var(--i) * 220ms) 1; }
}

/* ---------- Siniestro: números dibujados (reemplaza los números anteriores) ----------
   Cada número primero se dibuja con un trazo fino, después se llena con el degradé azul
   y al final lo cruza un brillo en barrido. Uno detrás del otro; se repite cada 5 segundos (js/sitio.js) */
.sos-steps.sos-when li::before { content: none; }
.sos-num { position: absolute; right: 18px; top: 50%; width: 62px; height: auto; translate: 0 -50%; overflow: visible; pointer-events: none; }
.sos-num text { font-family: var(--font-display); font-weight: 600; font-size: 64px; text-anchor: middle; }
.sos-num-fill { fill: url(#sos-g); }
.sos-num-line { fill: none; stroke: url(#sos-g); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; opacity: 0; }
.sos-num-shine { fill: url(#sos-brillo); transform: translateX(0) skewX(-18deg); }
@media (max-width: 640px) { .sos-num { width: 50px; right: 14px; } }

@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .sos-num-fill { opacity: 0; }
  html:not(.no-anim) .sos-num-line { stroke-dasharray: 320; stroke-dashoffset: 320; }
  html:not(.no-anim) .sos.is-visible .sos-num-line { animation: sos-trazo 1.5s cubic-bezier(.5, 0, .3, 1) calc(var(--n) * 350ms + 200ms) both; }
  html:not(.no-anim) .sos.is-visible .sos-num-fill { animation: sos-relleno .7s ease-out calc(var(--n) * 350ms + 1050ms) both; }
  html:not(.no-anim) .sos.is-visible .sos-num-shine { animation: sos-barrido 1.1s cubic-bezier(.45, 0, .25, 1) calc(var(--n) * 350ms + 1650ms) both; }
  html:not(.no-anim) .sos.is-visible.sos-ping .sos-num-line { animation-name: sos-trazo2; animation-delay: calc(var(--n) * 350ms); }
  html:not(.no-anim) .sos.is-visible.sos-ping .sos-num-fill { animation-name: sos-relleno2; animation-delay: calc(var(--n) * 350ms + 850ms); }
  html:not(.no-anim) .sos.is-visible.sos-ping .sos-num-shine { animation-name: sos-barrido2; animation-delay: calc(var(--n) * 350ms + 1450ms); }
  @keyframes sos-trazo { 0% { opacity: 1; stroke-dashoffset: 320; } 70% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
  @keyframes sos-trazo2 { 0% { opacity: 1; stroke-dashoffset: 320; } 70% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
  @keyframes sos-relleno { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sos-relleno2 { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sos-barrido { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(125px) skewX(-18deg); } }
  @keyframes sos-barrido2 { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(125px) skewX(-18deg); } }
}
/* Siniestro: al repetirse cada 6 segundos los números ya no se borran; quedan quietos y solo los cruza el brillo */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .sos.is-visible.sos-ping .sos-num-line { animation: none; opacity: 0; }
  html:not(.no-anim) .sos.is-visible.sos-ping .sos-num-fill { animation: none; opacity: 1; }
  html:not(.no-anim) .sos.is-visible.sos-ping .sos-num-shine { animation: sos-barrido2 1.1s cubic-bezier(.45, 0, .25, 1) calc(var(--n) * 250ms) both; }
}

/* 2026-11-06: bajada del héroe del mismo tamaño en todas las páginas */
.hero-foto .hero-sub { font-size: clamp(16px, 1.45vw, 21px); line-height: 1.35; max-width: min(100%, var(--tit-w, 100%)); text-wrap: balance; white-space: normal; }
.hero-foto .hero-sub.sub-2l { border-radius: 20px; }

/* ---------- Íconos de las líneas: se animan al pasar el mouse ----------
   Todos se mueven como gelatina. Además:
   Auto gira las ruedas, Prepaga late la rayita blanca, Vida y personas
   lanza el corazoncito que explota, Finanzas salta en escalerita y
   Empresas estira los edificios de a uno. Hogar solo hace gelatina.
   Las partes viven dentro de los dibujos compartidos (<use>), así que se
   encienden con variables que heredan desde el enlace en hover. */
a:is(:hover, :focus-visible) .ico, button:is(:hover, :focus-visible) .ico {
  --ic-rueda: ic-rueda; --ic-pulso: ic-pulso; --ic-corazon: ic-corazon;
  --ic-chispas: ic-chispas; --ic-barra: ic-barra; --ic-edif: ic-edif;
}
a:is(:hover, :focus-visible) .ico svg, button:is(:hover, :focus-visible) .ico svg { transform-origin: 50% 90%; animation: ic-gelatina 1.1s ease-out infinite; }
@keyframes ic-gelatina {
  0%, 100% { transform: scale(1, 1); }
  20% { transform: scale(1.14, .86); }
  38% { transform: scale(.9, 1.12); }
  55% { transform: scale(1.06, .95); }
  70% { transform: scale(.98, 1.02); }
  80% { transform: scale(1, 1); }
}

.ic-rueda { transform-box: fill-box; transform-origin: center; animation: var(--ic-rueda, none) .7s linear infinite; }
@keyframes ic-rueda { to { transform: rotate(360deg); } }

.ic-pulso { stroke-dasharray: 100; stroke-dashoffset: 0; animation: var(--ic-pulso, none) 1.1s ease-in-out infinite; }
@keyframes ic-pulso { 0% { stroke-dashoffset: 100; } 45% { stroke-dashoffset: 0; } 80%, 100% { stroke-dashoffset: -100; } }

.ic-corazon { transform-box: fill-box; transform-origin: center; animation: var(--ic-corazon, none) 1.4s ease-out infinite; }
@keyframes ic-corazon {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  30% { transform: translateY(-5px) scale(1.35); opacity: 1; }
  42% { transform: translateY(-6px) scale(1.9); opacity: 0; }
  70% { transform: translateY(0) scale(0); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.ic-chispas circle { opacity: 0; transform-box: fill-box; transform-origin: center; animation: var(--ic-chispas, none) 1.4s ease-out infinite; }
@keyframes ic-chispas {
  0%, 36% { opacity: 0; transform: translate(0, 0) scale(.6); }
  44% { opacity: 1; transform: translate(calc(var(--x) * .4), calc(var(--y) * .4)) scale(1); }
  66%, 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); }
}

.ic-barra { transform-box: fill-box; transform-origin: 50% 100%; animation: var(--ic-barra, none) .9s ease-out infinite; }
.ic-b2 { animation-delay: .12s; } .ic-b3 { animation-delay: .24s; }
@keyframes ic-barra {
  0%, 60%, 100% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(0) scale(1.08, .88); }
  32% { transform: translateY(-5px) scale(.95, 1.06); }
  48% { transform: translateY(0) scale(1.05, .94); }
}

.ic-edif { transform-box: fill-box; transform-origin: 50% 100%; animation: var(--ic-edif, none) 1s ease-out infinite; }
.ic-e2 { animation-delay: .15s; }
@keyframes ic-edif {
  0%, 70%, 100% { transform: scale(1, 1); }
  18% { transform: scale(1.06, .9); }
  36% { transform: scale(.95, 1.12); }
  52% { transform: scale(1.03, .96); }
}

@media (prefers-reduced-motion: reduce) {
  a:is(:hover, :focus-visible) .ico svg, button:is(:hover, :focus-visible) .ico svg { animation: none; }
  a:is(:hover, :focus-visible) .ico, button:is(:hover, :focus-visible) .ico { --ic-rueda: none; --ic-pulso: none; --ic-corazon: none; --ic-chispas: none; --ic-barra: none; --ic-edif: none; }
}

/* ---------- 2026-11-07 ---------- */
/* Inicio: el logo en blanco arriba del título, para reconocer la marca apenas se abre la página */
.hero-logo { display: block; width: auto; height: clamp(66px, 5.8vw, 88px); margin: calc(-1 * clamp(40px, 5vw, 76px)) auto clamp(52px, 6vw, 96px); filter: brightness(0) invert(1) drop-shadow(0 2px 18px rgba(13, 38, 58, .5)); }
@media (max-width: 860px) { .hero-logo { height: 56px; margin-top: -24px; margin-bottom: 34px; } }

/* Inicio: la foto con más luz. Un velo suave solo detrás del título mantiene el texto legible */
/* La foto ya viene nítida y luminosa (2026-11-07): sin filtro. Velo suave arriba y detrás del título */
.hero-home .hero-foto-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 48% 56% at 50% 42%, rgba(13, 38, 58, .4) 0%, rgba(13, 38, 58, 0) 100%), linear-gradient(180deg, rgba(13, 38, 58, .28) 0%, rgba(13, 38, 58, 0) 45%); }
@media (max-width: 860px) { .hero-home .hero-foto-bg img { object-position: 50% 62%; } }

/* Tarjetas del héroe (Inicio y Auto): al pasar el mouse se pintan de celeste Mayorazgo */
.hero-foto .pick:hover, .hero-foto .pick:focus-visible,
.hero-auto-foto .auto-qs .pick:hover, .hero-auto-foto .auto-qs .pick:focus-visible { background: #CDE9FB; border-color: #5BB4F0; }

/* Siniestro: los números van en el mismo circulito azul que "Un broker que trabaja para vos".
   Aparecen uno detrás del otro con su onda; cada 5 segundos se repite solo la onda (js/sitio.js) */
.sos-steps.sos-when li { padding: 18px 22px 18px 84px; }
.sos-n { position: absolute; left: 22px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--azul); color: var(--blanco); font-weight: 700; font-size: 18px; }
@media (max-width: 640px) { .sos-steps.sos-when li { padding-left: 72px; } .sos-n { left: 16px; width: 40px; height: 40px; font-size: 17px; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .sos:not(.is-visible) .sos-n { transform: scale(0); }
  html:not(.no-anim) .sos.is-visible .sos-n { animation: why-pop .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--n) * 220ms + 200ms) both, why-onda 1s ease-out calc(var(--n) * 220ms + 520ms) 1; }
  html:not(.no-anim) .sos.is-visible.sos-ping .sos-n { animation: why-onda2 1s ease-out calc(var(--n) * 220ms) 1; }
}

/* Pie claro: panel gris liso, logo a color, textos oscuros y títulos en azul.
   Las direcciones abren Google Maps */
.ft { background: var(--panel-claro, #F3F6F9); color: #3E5266; }
.ft-logo { filter: none; }
.ft-lema { color: var(--tinta); }
.ft-office b { color: var(--azul); }
.ft-office a { color: var(--tinta); }
.ft-office a.ft-map { display: inline; padding: 0; font-weight: 400; color: inherit; text-decoration: underline; text-decoration-color: rgba(28, 123, 190, .35); text-underline-offset: 4px; }
.ft a:hover { color: var(--azul); }
.ft a:focus-visible { outline-color: var(--azul); }
.ft-bottom { border-top-color: rgba(26, 47, 68, .12); color: #5B6B7A; }
.ft-bottom a { color: var(--tinta); text-decoration-color: rgba(26, 47, 68, .3); }

/* Inicio: "Cuidamos tu" tenía un recuadro más claro alrededor. La máscara de la entrada cortaba la sombra del texto.
   Cuando la línea terminó de subir, la máscara se abre y la sombra se ve entera */
.hero-foto .hero-rot-title .hl:not(:last-child) { animation: hl-abrir 0s linear 1.3s forwards; }
@keyframes hl-abrir { to { overflow: visible; } }
html.no-anim .hero-foto .hero-rot-title .hl:not(:last-child) { overflow: visible; animation: none; }
@media (prefers-reduced-motion: reduce) { .hero-foto .hero-rot-title .hl:not(:last-child) { overflow: visible; animation: none; } }

/* Siniestro: el circulito le gana al estilo general de los textos de la tarjeta */
.sos-steps.sos-when li .sos-n { display: grid; margin: 0; line-height: 1; color: var(--blanco); font-size: 18px; }
@media (max-width: 640px) { .sos-steps.sos-when li .sos-n { font-size: 17px; } }

/* 2026-11-07: las tarjetas del héroe llevan a cada parte de la página (Inicio no cambia).
   Son enlaces: hacen la misma gelatina que los íconos del menú. Las secciones frenan debajo del menú */
a.pick { text-decoration: none; color: inherit; }
#seguros, #comparar, #tu-caso, #casos, #como, #dudas, #cobertura-card, #coberturas, #mayorazgo { scroll-margin-top: calc(var(--header-h, 80px) + 20px); }

/* 2026-11-07: el logo de Inicio va arriba de todo en la foto, más chico y centrado (Abi).
   Sale del flujo para que el título no se mueva */
.hero-foto { position: relative; }
.hero-foto .hero-logo { position: absolute; top: clamp(18px, 3.2vh, 34px); left: 50%; transform: translateX(-50%); height: clamp(46px, 3.6vw, 56px); margin: 0; z-index: 2; }
.hero-home.hero-foto .hero-title { margin-top: 98px; }
@media (max-width: 860px) { .hero-foto .hero-logo { top: 16px; height: 42px; margin: 0; } .hero-home.hero-foto .hero-title { margin-top: 66px; } }

/* 2026-11-07: en compu el menú queda en el centro exacto de la página,
   alineado con el logo y el título del héroe (Abi) */
@media (min-width: 1025px) {
  .site-header .header-inner { position: relative; }
  .site-header .nav-site { position: absolute; left: 50%; translate: -50% 0; }
}
/* 2026-11-09 (Abi): en celular las fotos de los héroes de todas las páginas van difuminadas y un poco
   más oscuras, igual que la de la familia en Inicio. El scale esconde el borde del difuminado */
@media (max-width: 860px) {
  .pt-hero .pt-hero-media img, .hero-auto-foto .hero-auto-bg img { filter: blur(3px) brightness(.72); transform: scale(1.06); }
  .pt-hero .pt-hero-media { overflow: hidden; }
}
/* 2026-11-09 (Abi): tarjetas de seguros de todas las landings, en celular: sin el botón
   "Ver qué cubre" (o "Ver planes", "Ver qué incluye"). Toda la tarjeta se toca: el nombre va en una
   pastilla transparente, como de vidrio, y la tarjeta se achica apenas al tocarla */
@media (max-width: 860px) {
  .sv-sec .sc-more { display: none; }
  .sv-sec .sc { transition: transform .15s ease; }
  .sv-sec .sc:active { transform: scale(.97); }
  .sv-sec .sc-name {
    min-height: 0; max-width: 100%; padding: 8px 14px; border-radius: 16px;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .38);
    backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
    box-shadow: 0 8px 20px -10px rgba(10, 30, 46, .55);
  }
  /* Salud: el nombre está oculto (se reconoce por el logo), así que sin pastilla */
  .pg-prep .sv-sec .sc-name { padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* 2026-11-09 (Abi): formulario "Pedí tu cotización", "¿Qué querés asegurar?" con los seguros de la página
   como botones (los arma js/patrimoniales.js). Solo en celular: en compu queda el campo de texto como siempre.
   Con un seguro elegido, el campo de texto se esconde; "Otra cosa" lo vuelve a mostrar para escribir */
.lead-chips { display: none; }
@media (max-width: 860px) {
  .lead-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .lead-chip {
    min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
    border: 2px solid transparent; background: var(--lf-panel, #F3F6F9);
    font: inherit; font-size: 15.5px; font-weight: 600; color: var(--lf-tinta, #1A2F44);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .lead-chip[aria-pressed="true"] { background: var(--lf-azul, #1C7BBE); border-color: var(--lf-azul, #1C7BBE); color: #fff; }
  .lead-field.lead-chip-elegido input { display: none; }
}
/* 2026-11-09 (Abi): en celular el logo va en el centro exacto de la barra y el botón del menú a la izquierda */
@media (max-width: 860px) {
  .site-header .header-inner { position: relative; }
  .site-header .brand { position: absolute; left: 50%; translate: -50% 0; }
  .site-header .header-actions { margin-left: 0; margin-right: auto; }
}

/* 2026-11-07: cotizador dentro de la página de Auto. Marco azul para que sea lo que más resalta */
#cotizador { scroll-margin-top: calc(var(--header-h, 80px) + 12px); }
.cotz-sec { padding-block: clamp(40px, 5vw, 72px) clamp(28px, 3.5vw, 48px); }
.cotz-panel {
  position: relative; border-radius: 32px;
  padding: clamp(40px, 5vw, 76px) clamp(16px, 4vw, 56px) clamp(32px, 4.5vw, 64px);
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(165deg, #2A8AD0 0%, #1C6FB0 55%, #17588F 100%);
  box-shadow: 0 40px 80px -50px rgba(18, 50, 74, .7);
}
.cotz-panel-head { text-align: center; color: #fff; max-width: 780px; margin: 0 auto clamp(22px, 3vw, 32px); }
.cotz-panel-kicker {
  display: inline-block; padding: .45em 1.1em; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32);
  font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
.cotz-panel-head h2 { margin-top: 16px; font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.cotz-panel-sub { text-wrap: balance; margin-top: 14px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.4; color: rgba(255, 255, 255, .9); }
.cotz-panel .cotz { max-width: 880px; margin-inline: auto; padding: 0; }
.cotz-panel .cotz-steps li { color: rgba(255, 255, 255, .75); }
.cotz-panel .cotz-steps span { border-color: rgba(255, 255, 255, .6); color: #fff; }
.cotz-panel .cotz-steps li.is-on { color: #fff; }
.cotz-panel .cotz-steps li.is-on span { background: #fff; border-color: #fff; color: #1C6FB0; }
.cotz-panel .cotz-card, .cotz-panel .cotz-results { border: 0; box-shadow: 0 30px 60px -36px rgba(10, 30, 50, .65); }
.cotz-panel .cotz-results { background: #fff; border-radius: var(--r-lg); padding: clamp(22px, 4vw, 36px); }
@media (max-width: 640px) {
  .cotz-panel { border-radius: 24px; padding-inline: 10px; }
  .cotz-panel-head { padding-inline: 8px; }
}

/* 2026-11-07: en celular las tarjetas del héroe de Auto dejan el mismo margen que en las otras páginas */
@media (max-width: 700px) {
  .hero-auto-foto .auto-qs, .hero-auto-foto .auto-qs.pt-nav { width: min(100%, calc(100vw - 32px)); gap: 8px; }
}

/* ---------- 2026-11-07: teléfonos de emergencia que se notan (Abi) ----------
   Título grande con un teléfono rojo que suena y ondas, y cada número en un botón de llamar
   con el color de su aseguradora. Los teléfonos de las tarjetas suenan uno detrás del otro. */
.sos-phones-head { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); margin-bottom: clamp(22px, 2.6vw, 32px); }
.sos-ring {
  position: relative; flex: none; display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(180deg, #FF7A64 0%, #D93A2B 100%); color: #fff;
  box-shadow: 0 16px 30px -12px rgba(217, 58, 43, .7);
}
.sos-ring svg { position: relative; width: 34px; height: 34px; }
.sos-ring-wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(217, 58, 43, .6); opacity: 0; }
.sos-phones .sos-phones-title {
  display: block; margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -.01em; color: var(--tinta); text-wrap: balance;
}
.sos-phones-sub { margin-top: 6px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: var(--tinta-75); }

.sos-phones-grid a { justify-content: space-between; gap: 16px; min-height: 150px; padding: 22px 12px 16px; transition: border-color .2s, transform .25s ease, box-shadow .25s ease; }
.sos-phones-grid a img { margin-block: auto; }
.sos-phones-grid a:hover, .sos-phones-grid a:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(18, 50, 74, .55); }
.sos-phones-grid .tel-num {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: var(--tel-n, var(--azul)); color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 20px -12px var(--tel-n, var(--azul));
}
.sos-phones-grid a .tel-num { color: #fff; }
.sos-phones-grid a:hover .tel-num { text-decoration: none; filter: brightness(1.12); }
.sos-phones-grid .tel-num svg { width: 17px; height: 17px; flex: none; }

@media (max-width: 640px) {
  .sos-ring { width: 60px; height: 60px; }
  .sos-ring svg { width: 27px; height: 27px; }
  .sos-phones-head { gap: 14px; align-items: flex-start; }
  .sos-phones .sos-phones-title { font-size: 24px; }
  .sos-phones-sub { font-size: 17px; }
  .sos-phones-grid a { min-height: 128px; padding: 16px 8px 12px; gap: 12px; }
  .sos-phones-grid .tel-num { padding: 9px 12px; font-size: 14.5px; gap: 6px; }
  .sos-phones-grid .tel-num svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .sos-ring svg { animation: tel-suena 2.6s ease-in-out infinite; transform-origin: 50% 50%; }
  html:not(.no-anim) .sos-ring-wave { animation: tel-onda 2.6s ease-out infinite; }
  html:not(.no-anim) .sos-ring-wave + .sos-ring-wave { animation-delay: .5s; }
  /* En las tarjetas, cada teléfono suena a su turno: uno por vez, en ronda */
  html:not(.no-anim) .sos-phones-grid .tel-num svg { animation: tel-turno 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.1s + 1s); transform-origin: 50% 50%; }
  html:not(.no-anim) .sos-phones-grid a:hover .tel-num svg { animation: tel-suena .9s ease-in-out infinite; }
  @keyframes tel-suena {
    0%, 55%, 100% { transform: rotate(0); }
    60% { transform: rotate(-16deg); } 65% { transform: rotate(16deg); }
    70% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); }
    80% { transform: rotate(-8deg); } 85% { transform: rotate(0); }
  }
  @keyframes tel-onda { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(1.75); opacity: 0; } }
  @keyframes tel-turno {
    0%, 14%, 100% { transform: rotate(0) scale(1); }
    2% { transform: rotate(-18deg) scale(1.15); } 4% { transform: rotate(18deg) scale(1.15); }
    6% { transform: rotate(-16deg) scale(1.15); } 8% { transform: rotate(16deg) scale(1.15); }
    10% { transform: rotate(-8deg) scale(1.08); } 12% { transform: rotate(0) scale(1); }
  }
}

/* 2026-11-07 (Abi): el título de Inicio, más grande. Es lo primero que se ve de la web */
.hero-home.hero-foto .hero-title { font-size: clamp(56px, min(7.2vw, 11.5vh - 8px), 108px); line-height: 1.02; }
.hero-home.hero-foto .hero-sub { font-size: clamp(19px, 1.75vw, 26px); }
@media (max-width: 700px) {
  .hero-home.hero-foto .hero-title { font-size: clamp(44px, 12.4vw, 56px); }
  .hero-home.hero-foto .hero-sub { font-size: 18px; max-width: calc(100vw - 32px); white-space: nowrap; }
}
/* En compus de pantalla baja, el título sube un poco para que las tarjetas sigan entrando enteras */
@media (min-width: 861px) and (max-height: 780px) { .hero-home.hero-foto .hero-title { margin-top: 72px; } }

/* ---------- Solo celular (2026-11-09, Abi) ---------- */
/* 24 horas: sin el sol (en celular no se ve bien); el cielo sigue pasando del día a la noche */
@media (max-width: 700px) { .att-sun-path { display: none; } }
/* Inicio: el título sube arriba de la foto, sobre el árbol, con un velo oscuro de arriba hacia abajo;
   la familia queda libre debajo. Todo el espacio que sobra va antes de las tarjetas. */
@media (max-width: 860px) {
  .hero-home.hero-foto { padding-top: 44px; }
  .hero-home.hero-foto .hero-title { margin-top: 58px; }
  /* 2026-11-09 (Abi): sin el logo blanco sobre la foto en celular (ya está arriba, en la barra) */
  .hero-home.hero-foto .hero-logo { display: none; }
  .hero-home.hero-foto .picker { margin-top: calc(28px + var(--extra, 0px)); }
  .hero-home .hero-foto-bg img { object-position: 50% 0%; }
  /* 2026-11-09 (Abi): la foto ocupa todo el fondo, difuminada y más oscura para que los textos se lean.
     Encuadre desde abajo para que se vea el abrazo de los chicos; el scale esconde el borde del difuminado */
  .hero-home .hero-foto-bg img { object-position: 50% 50%; filter: blur(3px) brightness(.72); transform: translateX(7.8vw) scale(1.2); transform-origin: 50% 85%; }
  /* La familia ocupa del 6 % al 78 % del ancho de la foto (centro en ~43 %): se corre a la derecha
     para quedar en el eje del título; el scale tapa el hueco que deja a la izquierda */
  .hero-home .hero-foto-bg::after { background: linear-gradient(180deg, rgba(13, 38, 58, .66) 0%, rgba(13, 38, 58, .5) 26%, rgba(13, 38, 58, .16) 44%, rgba(13, 38, 58, 0) 56%); }
}

/* ---------- 2026-11-09 (Abi): celular más corto. Solo hasta 860 px; la compu queda igual ---------- */
/* Textos que se cambian solo en celular: el de compu va en .txt-compu y el de celular en .txt-cel */
.txt-cel { display: none; }
@media (max-width: 860px) {
  .txt-compu { display: none; }
  .txt-cel { display: inline; }
  /* Sin bajadas que explican cómo usar la página ("Tocá un seguro...") ni las que alargan el scroll */
  .why .section-head .section-sub,
  .about-pin,
  .pg-auto .cov-head .section-sub,
  .pg-auto .how-head .section-sub,
  .cotz-panel-sub,
  .fit .section-head .section-sub,
  .sv-sub,
  .sos-phones-sub { display: none; }
}
/* Cotizador de Auto en celular: más corto. Código postal y provincia en una fila (año y marca no: se cortan sus textos),
   menos aire entre campos y el botón a todo el ancho */
@media (max-width: 639px) {
  .cotz-panel-head { margin-bottom: 16px; }
  .cotz-panel .cotz-steps { margin-bottom: 12px; }
  .cotz-panel .cotz-card { padding: 18px 16px 20px; }
  .cotz-card__title { font-size: 20px; }
  .cotz-form { margin-top: 14px; }
  .cotz-grid { gap: 10px; }
  #cotz-auto > .cotz-grid--lugar { grid-template-columns: 104px minmax(0, 1fr); margin-top: 14px; padding-top: 14px; }
  #cotz-contacto > .cotz-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cotz-field { gap: 4px; }
  .cotz-field > span { font-size: 13.5px; }
  .cotz-field input, .cotz-field select { min-height: 46px; padding: 10px 12px; }
  .cotz-check { margin-top: 12px; font-size: 15px; line-height: 1.2; }
  .cotz-check em { display: none; }
  .cotz-actions { margin-top: 16px; flex-direction: column; align-items: stretch; gap: 2px; }
  .cotz-actions .btn { width: 100%; justify-content: center; }
}
/* Tarjetas de seguros: la pastilla del nombre abraza el texto también en nombres largos
   ("Responsabilidad civil"): un poco menos de margen en la tarjeta y la letra apenas más chica */
@media (max-width: 860px) {
  .sv-sec .sc, .sv-sec .sc-grid-6 .sc { padding-inline: 10px; }
  .sv-sec .sc-name { padding: 8px 12px; font-size: 16px; overflow-wrap: normal; }
}
/* Ficha de cada seguro en celular: hoja que sube desde abajo (la mueve js/patrimoniales.js) y se cierra
   con la cruz o deslizando hacia abajo. Sin bordes blancos: arriba la foto sobre fondo oscuro, una manija
   para arrastrar, y la foto encuadrada más arriba para que se vean las caras */
@media (max-width: 700px) {
  /* 2026-11-09 (Abi): esquinas redondeadas, sin blanco detrás de la curva. En algunos celulares el fondo
     difuminado no se dibuja debajo de la tarjeta y en las esquinas asomaba la página en blanco:
     en celular el fondo es un oscuro liso, sin difuminado, que se dibuja siempre */
  .svm .svm-backdrop { background: rgba(12, 30, 46, .72); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .svm .svm-card { background: linear-gradient(180deg, #16324A 0 50%, #fff 50%); overscroll-behavior: contain; scrollbar-width: none; }
  .svm .svm-card::-webkit-scrollbar { display: none; }
  .svm .svm-card::before {
    content: ""; position: absolute; z-index: 3; top: 9px; left: 50%; translate: -50% 0;
    width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 6px rgba(10, 30, 46, .45); pointer-events: none;
  }
  .svm .svm-photo { height: 36svh; background: #16324A; }
  /* La foto se pasa 1 px de cada lado: así nunca asoma una línea clara en los bordes */
  .svm .svm-photo img { object-position: 50% 20%; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; }
  .svm [data-view="vida"] .svm-photo img { object-position: 50% 45%; }
  .svm .svm-body { background: #fff; }
}
/* Vida y personas: la familia queda en el centro de la pantalla */
@media (max-width: 700px) {
  /* La familia está en el 46,6 % del ancho de la foto: se corre a la derecha y el scale tapa el borde */
  .pg-pers .pt-hero .pt-hero-media img { transform: translateX(3.7vw) scale(1.1); }
}
/* 2026-11-09: tarjetas de "Protegemos lo que más te importa" en celular: el botón más largo
   ("Ver seguros para empresas") se pasaba del borde de la tarjeta. Un poco menos de margen y de letra */
@media (max-width: 640px) {
  .lc .lc-go { padding-inline: 18px; font-size: 15px; }
}

/* ---------- 2026-11-09 (Abi): que se vea igual de bien en todos los celulares (de 320 a 430 px) ----------
   Medidas que se adaptan al ancho de la pantalla en vez de un tamaño fijo, para que nada se corte en los chicos */
@media (max-width: 640px) {
  /* Teléfonos de emergencia: el número entra entero en su tarjeta también en celulares angostos */
  .sos-phones .sos-phones-title { font-size: clamp(20px, 6.4vw, 24px); }
  .sos-phones-grid a { padding-inline: clamp(5px, 1.6vw, 8px); }
  .sos-phones-grid .tel-num { padding: 9px clamp(7px, 2.4vw, 12px); gap: clamp(4px, 1.4vw, 6px); font-size: clamp(12.5px, 3.75vw, 14.5px); }
  .sos-phones-grid .tel-num svg { width: clamp(13px, 3.9vw, 15px); height: clamp(13px, 3.9vw, 15px); }
  /* Barra flotante de abajo: "Cotizá tu seguro" entra en una línea también en celulares chicos */
  .fbar .cta-float { padding-inline: clamp(12px, 4.2vw, 20px); font-size: clamp(14px, 4vw, 15px); }
  .fbar .aura-fab { padding-inline: clamp(12px, 3.8vw, 16px); font-size: clamp(14px, 4vw, 15px); }
  /* Casos ("Cuando pasa algo"): el botón no se sale de la tarjeta */
  .fit .fit-cta .btn.btn-primary { max-width: 100%; padding-inline: clamp(16px, 6vw, 34px); font-size: clamp(15px, 4.6vw, 17px); }
}
@media (max-width: 860px) {
  /* Pastillas con el nombre del seguro: nombres largos ("Responsabilidad civil") entran en celulares angostos */
  .sv-sec .sc, .sv-sec .sc-grid-6 .sc { padding-inline: clamp(7px, 2.6vw, 10px); }
  .sv-sec .sc-name { padding: 8px clamp(7px, 2.6vw, 12px); font-size: clamp(14px, 4.3vw, 16px); }
}
/* Celulares muy angostos (320 px, como el iPhone SE viejo): un poco menos de letra en números y pastillas */
@media (max-width: 340px) {
  .sos-phones-grid a { padding-inline: 4px; }
  .sos-phones-grid .tel-num { padding-inline: 6px; font-size: 12px; }
  .sv-sec .sc, .sv-sec .sc-grid-6 .sc { padding-inline: 6px; }
  .sv-sec .sc-name { padding-inline: 6px; font-size: 13.5px; }
}
/* Héroes en celulares de pantalla baja (iPhone SE, Android chicos, o con la barra del navegador a la vista):
   la primera fila de tarjetas tiene que entrar entera arriba de la barra de abajo. Se achica el aire
   del título, y en las pantallas más bajas se saca el segundo botón (la barra de abajo ya tiene "Cotizá tu seguro") */
@media (max-width: 700px) {
  /* Las tarjetas quedan con aire arriba de la barra de abajo (antes 140 px: quedaban pegadas) */
  .pg-patri .pt-hero:has(+ .pt-qs-wrap) { height: calc(100svh - var(--header-h) - 155px); min-height: 300px; }
  /* Todas las tarjetas del héroe con el mismo alto, tengan el nombre en una línea o en dos */
  .pg-patri .pt-qs .pick { min-height: 126px; }
}
@media (max-width: 700px) and (max-height: 760px) {
  .pt-hero .pt-hero-copy { padding-top: 16px; }
  .pt-hero .pt-hero-sub { margin-top: 10px; }
  .pt-hero .pt-hero-actions { margin-top: 14px; gap: 10px; }
  .hero-auto-foto .hero-inner { padding-top: calc(20px + var(--extra, 0px) / 2); }
  .hero-auto-foto .hero-sub { margin-top: 10px; }
  .hero-auto-foto .hero-actions { margin-top: 14px; gap: 10px; }
  .hero-auto-foto .auto-qs { margin-top: calc(16px + var(--extra, 0px) / 2); }
}
@media (max-width: 700px) and (max-height: 600px) {
  .hero-auto-foto .hero-link { display: none; }
  /* En las landings, los dos botones del héroe hacen lo mismo que la barra de abajo ("Cotizá tu seguro")
     o llevan a las tarjetas que ya se ven: en pantallas tan bajas se sacan para que entren las tarjetas */
  .pt-hero .pt-hero-actions { display: none; }
  .hero-auto-foto .hero-inner { padding-top: calc(8px + var(--extra, 0px) / 2); }
  .hero-auto-foto .auto-qs { margin-top: calc(12px + var(--extra, 0px) / 2); }
  .hero-home.hero-foto { padding-top: 24px; }
  .hero-home.hero-foto .hero-title { margin-top: 20px; }
}