/* Compara Seguros - mejoras de conversión (oct 2026) */

/* Hero: lista de beneficios */
.hero-checks {
  list-style: none;
  padding: 0;
  margin: 14px 0 4px;
  display: grid;
  gap: 8px;
}
.hero-checks li {
  position: relative;
  padding-left: 30px;
  font-size: 18px;
  color: var(--text);
}
.hero-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.3 3 8.1l1.1-1.1 2.1 2.1 5.7-5.7L13 4.5z' fill='%23041015'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

/* Franja de aseguradoras: carrusel continuo, logos en blanco/gris */
.aseguradoras { padding: 40px 0 34px; }
.aseg-title {
  text-align: center;
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 22px;
}
.aseg-nota {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 18px 0 0;
}
.carrusel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.carrusel-pista {
  display: flex;
  width: max-content;
  animation: carrusel 45s linear infinite;
}
.carrusel:hover .carrusel-pista { animation-play-state: paused; }
.carrusel-grupo {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 18px;
  margin: 0;
  list-style: none;
}
.carrusel-grupo li a {
  position: relative;
  display: grid;
  place-items: center;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.carrusel-grupo li a::before,
.carrusel-grupo li a::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* reflejo superior del cristal */
.carrusel-grupo li a::before {
  left: 6%;
  right: 6%;
  top: 3px;
  height: 42%;
  border-radius: 12px 12px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  z-index: 0;
}
/* marco fino con el degradé de marca */
.carrusel-grupo li a::after {
  inset: -1px;
  border-radius: 15px;
  padding: 1.5px;
  background: linear-gradient(120deg, var(--blue), var(--violet), var(--orange));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.carrusel-grupo img {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  height: 34px;
  width: auto;
  display: block;
  transition: opacity 0.3s ease;
}
.carrusel-grupo img.cuadrado { height: 50px; }
.carrusel-grupo img.aseg-g { opacity: 0.55; }
.carrusel-grupo img.aseg-c { opacity: 0; }
.carrusel-grupo li a:hover,
.carrusel-grupo li a:focus-visible {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 244, 255, 0.82));
  -webkit-backdrop-filter: blur(14px) saturate(170%);
          backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -10px 18px rgba(255, 255, 255, 0.35),
    0 12px 30px rgba(0, 0, 0, 0.35);
  outline: none;
}
.carrusel-grupo li a:hover::before,
.carrusel-grupo li a:hover::after,
.carrusel-grupo li a:focus-visible::before,
.carrusel-grupo li a:focus-visible::after { opacity: 1; }
.carrusel-grupo li a:hover img.aseg-g,
.carrusel-grupo li a:focus-visible img.aseg-g { opacity: 0; }
.carrusel-grupo li a:hover img.aseg-c,
.carrusel-grupo li a:focus-visible img.aseg-c { opacity: 1; }
@keyframes carrusel {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .carrusel { -webkit-mask-image: none; mask-image: none; }
  .carrusel-pista { animation: none; width: auto; }
  .carrusel-grupo { flex-wrap: wrap; justify-content: center; gap: 28px 40px; }
  .carrusel-grupo[aria-hidden="true"] { display: none; }
}
@media (max-width: 560px) {
  .carrusel-grupo { gap: 20px; padding: 0 10px; }
  .carrusel-grupo li a { padding: 8px 10px; }
  .carrusel-grupo img { height: 22px; }
  .carrusel-grupo img.cuadrado { height: 34px; }
}
/* celular: misma velocidad que en computadora y bordes que se desvanecen suave */
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .carrusel {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  }
  .carrusel-pista { animation-duration: 26s; }
}

/* Autos de aplicación, taxis y remises: panel con borde de marca + íconos */
.apps-panel {
  border-radius: 24px;
  padding: 44px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(120deg, var(--blue), var(--violet), var(--orange)) border-box;
  box-shadow: 0 30px 80px -30px rgba(198, 83, 204, 0.35);
}
.apps-pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--orange);
  background: rgba(244, 180, 45, 0.12);
  border: 1px solid rgba(244, 180, 45, 0.35);
}
.apps-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
.apps-tipos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.apps-tipos li {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
}
.apps-tipos strong { display: block; font-size: 20px; }
.apps-tipos span:not(.apps-ico) { color: var(--muted); font-size: 16px; }
.apps-ico {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(244, 180, 45, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.apps-ico svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 860px) {
  .apps-grid { grid-template-columns: 1fr; gap: 24px; }
  .apps-panel { padding: 28px 20px; }
}

/* Cómo funciona */
.pasos {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pasos li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
}
.paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 10px;
}
.pasos h3 { margin: 0 0 6px; font-size: 22px; }
.pasos p { margin: 0; font-size: 18px; color: var(--text); }
@media (max-width: 860px) {
  .pasos { grid-template-columns: 1fr; }
}

/* Footer: marca El Mirador */
.footer-marca { margin-top: 22px; text-align: center; }
.footer-marca a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.footer-marca a:hover { opacity: 1; }
.footer-marca img { width: 150px; height: auto; }

/* Footer legal (SSN) */
.footer-legal {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.footer-legal a { color: var(--muted); text-decoration: underline; }

/* Botón flotante: siempre por encima del cotizador */
/* Cotizador: el cuadro de pestañas toma siempre el alto de su contenido (index.js le fijaba un alto en px y,
   cuando el cotizador de Woker crece con las cotizaciones, las tarjetas se montaban sobre las secciones de abajo) */
#cotizador .panels { height: auto !important; }
.fab { z-index: 1000; }
/* Celular: escondido mientras se completa el cotizador (lo maneja fabCotizador en mejoras.js) */
.fab { transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; }
.fab.fab-oculto { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) { .fab { transition: none; } }

/* Cotizador: marco con el degradé de marca */
.cot-marco {
  border-radius: 22px;
  padding: 6px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(120deg, var(--blue), var(--violet), var(--orange)) border-box;
  box-shadow: 0 30px 90px -25px rgba(198, 83, 204, 0.45);
}
.cot-marco .iframe-wrap { border-color: transparent; }
@media (max-width: 560px) {
  .cot-marco { padding: 4px; border-radius: 18px; }
}

/* Menú: una sola línea al lado del logo en pantallas medianas */
@media (min-width: 981px) and (max-width: 1280px) {
  .brand img { width: 170px; }
  nav[aria-label="principal"] { gap: 2px; }
  nav[aria-label="principal"] a { padding: 9px 9px; font-size: 15px; }
}

/* Cotizador: ilustración según la pestaña activa (solo escritorio; el ancho lo ajusta mejoras.js) */
.cot-ilus { display: none; }
@media (min-width: 1200px) {
  .cot-ilus { display: block; position: relative; height: 0; }
  .cot-ilus-in {
    position: absolute;
    right: 6px;
    bottom: -10px;
    width: 270px;
    aspect-ratio: 260 / 170;
    pointer-events: none;
  }
  .cot-ilus-in img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .cot-ilus-in img.on { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cot-ilus-in img { transition: none; transform: none; }
}

/* Asistencia al viajero: el widget fija 547px aunque el formulario ocupa ~300;
   en escritorio se compacta (el calendario del widget se acomoda solo) */
#tsvwidget-v0\.1 iframe { transition: height 0.25s ease; }
@media (min-width: 992px) {
  #tsvwidget-v0\.1 iframe.cs-compacto { height: var(--cs-viaje-h, 320px) !important; }
}

/* Pestaña Garantía de alquiler (deriva a Alquilo Seguro) */
.tab[data-color="garantia"].is-active { --tab-active: linear-gradient(90deg, #ff5f96, #ff9a56); }
.garantia {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 28px 36px;
  background: var(--card);
}
.garantia h3 { margin: 12px 0 8px; font-size: 26px; }
.garantia p { margin: 0 0 6px; color: var(--text); font-size: 17px; }
.garantia .apps-pill { color: #ff8fb4; background: rgba(255, 95, 150, 0.12); border-color: rgba(255, 95, 150, 0.35); }
.garantia-cta { display: grid; gap: 12px; }
.garantia-cta .btn { justify-content: center; }
.garantia-cta small { color: var(--muted); font-size: 13px; text-align: center; }
@media (max-width: 760px) {
  .garantia { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; }
}

/* Carrusel manejado por mejoras.js: se puede deslizar con el dedo o el mouse */
.carrusel.js-carrusel { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.carrusel.js-carrusel.arrastrando { cursor: grabbing; }
.carrusel.js-carrusel .carrusel-pista { animation: none; will-change: transform; }
.carrusel-grupo img { -webkit-user-drag: none; }
/* logo tocado en el celular: queda pintado mientras sigue girando */
.carrusel-grupo li a.tocado {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 244, 255, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -10px 18px rgba(255, 255, 255, 0.35), 0 12px 30px rgba(0, 0, 0, 0.35);
}
.carrusel-grupo li a.tocado::before,
.carrusel-grupo li a.tocado::after { opacity: 1; }
.carrusel-grupo li a.tocado img.aseg-g { opacity: 0; }
.carrusel-grupo li a.tocado img.aseg-c { opacity: 1; }
/* en pantallas táctiles el "hover" pegado no debe pintar otros logos */
@media (hover: none) {
  .carrusel-grupo li a:hover:not(.tocado) { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .carrusel-grupo li a:hover:not(.tocado)::before,
  .carrusel-grupo li a:hover:not(.tocado)::after { opacity: 0; }
  .carrusel-grupo li a:hover:not(.tocado) img.aseg-g { opacity: 0.55; }
  .carrusel-grupo li a:hover:not(.tocado) img.aseg-c { opacity: 0; }
}

/* Con 8 pestañas: más compactas en computadora para que entren en una línea (y la ilustración) */
@media (min-width: 992px) {
  #cotizador .tabs { gap: 6px; }
  #cotizador .tab { padding: 9px 15px; font-size: 16px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #cotizador .tabs { gap: 5px; }
  #cotizador .tab { padding: 8px 12px; font-size: 15px; }
}

/* Pestañas del cotizador: color propio de cada una (r,g,b) */
#cotizador .tab { transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
#cotizador .tab[data-color="auto"] { --tc: 91, 107, 255; }
#cotizador .tab[data-color="viaje"] { --tc: 244, 180, 45; }
#cotizador .tab[data-color="hogar"] { --tc: 47, 107, 255; }
#cotizador .tab[data-color="garantia"] { --tc: 255, 107, 154; }
#cotizador .tab[data-color="bici"] { --tc: 198, 83, 204; }
#cotizador .tab[data-color="tecnología"] { --tc: 20, 240, 179; }
#cotizador .tab[data-color="art"] { --tc: 34, 197, 94; }
#cotizador .tab[data-color="otros"] { --tc: 154, 163, 178; }
#cotizador .tab[data-color="moto"] { --tc: 91, 176, 188; }
/* Auto seleccionada: azul-violeta de marca (el azul marino casi no se distinguía del fondo) */
#cotizador .tab[data-color="auto"].is-active { --tab-active: linear-gradient(90deg, #0041d6, #5b3fe0); }
#cotizador .tab[data-color="moto"].is-active { --tab-active: linear-gradient(90deg, #2f8fa3, #5bb0bc); }
/* Letra oscura sobre los colores claros */
#cotizador .tab[data-color="viaje"].is-active,
#cotizador .tab[data-color="tecnología"].is-active { color: #0b0d1e; }

/* Computadora: al pasar el mouse la pestaña toma su color (más suave que la seleccionada) */
@media (hover: hover) {
  #cotizador .tab:not(.is-active):hover {
    background: rgba(var(--tc), 0.16);
    border-color: rgba(var(--tc), 0.7);
    color: #fff;
  }
}

/* Celular: todas con su color suave y la seleccionada destacada */
@media (hover: none) {
  #cotizador .tabs { padding: 10px 8px 16px; margin-top: 10px; margin-bottom: 8px; }
  #cotizador .tab:not(.is-active) {
    background: rgba(var(--tc), 0.14);
    border-color: rgba(var(--tc), 0.55);
  }
  #cotizador .tab.is-active {
    transform: scale(1.06);
    box-shadow: 0 3px 12px rgba(var(--tc), 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  #cotizador .tab.is-active { transform: none; }
}

/* Riel de pestañas deslizable: difuminado que indica que hay más pestañas */
#cotizador .tabs.hay-mas { -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
#cotizador .tabs.hay-antes { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%); mask-image: linear-gradient(90deg, transparent, #000 16%); }
#cotizador .tabs.hay-antes.hay-mas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }

/* Riel de pestañas: sin barra de desplazamiento (se desliza con el dedo; el difuminado avisa que hay más) */
#cotizador .tabs { scrollbar-width: none; }
#cotizador .tabs::-webkit-scrollbar { display: none; }
/* aire arriba para que la pestaña no se recorte al subir 1 px con el mouse */
@media (hover: hover) {
  #cotizador .tabs { padding-top: 3px; }
}

/* Barra superior más baja: 84 px arriba y 68 px al bajar (celular: 72 px) */
header { height: 84px; transition: background 0.2s ease, box-shadow 0.2s ease, height 0.25s ease; }
header.scrolled { height: 68px; }
header .nav { height: 100%; padding-top: 0; padding-bottom: 0; }
header .brand img { width: 170px; transition: width 0.25s ease; }
header.scrolled .brand img { width: 140px; }
body { padding-top: 84px; } /* fijo, para que la página no salte cuando la barra se achica */
@media (max-width: 980px) {
  header, header.scrolled { height: 72px; }
  header .brand img, header.scrolled .brand img { width: 140px; }
  body { padding-top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  header, header .brand img { transition: none; }
}

/* Menú superior: cada opción toma un color del degradé del logo, en el mismo orden (azul → índigo → violeta → turquesa → verde agua) */
nav[aria-label="principal"] a:not(.btn) { --mc: 18, 67, 213; transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
nav[aria-label="principal"] a[href="#autos"] { --mc: 18, 67, 213; }
nav[aria-label="principal"] a[href="#apps"] { --mc: 78, 72, 210; }
nav[aria-label="principal"] a[href="#viajes"] { --mc: 177, 101, 201; }
nav[aria-label="principal"] a[href*="preguntas-frecuentes"] { --mc: 91, 176, 188; }
nav[aria-label="principal"] a[href="#contacto"] { --mc: 20, 240, 179; }
nav[aria-label="principal"] a:not(.btn):hover,
nav[aria-label="principal"] a:not(.btn):focus-visible {
  background: rgba(var(--mc), 0.18);
  box-shadow: inset 0 0 0 1px rgba(var(--mc), 0.75);
  color: #fff;
  outline: none;
}
/* sección en la que está la persona: su color pleno */
nav[aria-label="principal"] a.activo:not(.btn) {
  background: rgb(var(--mc));
  box-shadow: 0 4px 14px rgba(var(--mc), 0.35);
  color: #fff;
}
/* letra oscura sobre los tonos claros (turquesa y verde agua) */
nav[aria-label="principal"] a.activo[href*="preguntas-frecuentes"],
nav[aria-label="principal"] a.activo[href="#contacto"] { color: #0b0d1e; }

/* ---------- Hogar: planes 30 / 60 / 90 + Personalizado ---------- */
.hogar { padding: 18px 16px 14px; }
.hogar-intro { margin: 0 0 14px; color: var(--muted); font-size: 16px; }
.hogar-planes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column;
  border-radius: 16px; background: var(--card);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  overflow: hidden; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.plan input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.plan-cab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 10px 12px; cursor: pointer; text-align: center;
  background: linear-gradient(120deg, #2fd4b4, #7b8be0 55%, #a85ee0);
  color: #fff;
}
.plan-nombre { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 15px; }
.plan-cod { font-size: 13px; opacity: 0.92; }
.plan-precio { margin-top: 6px; font-size: 26px; font-weight: 800; line-height: 1; }
.plan-precio small { font-size: 13px; font-weight: 600; opacity: 0.9; margin-left: 3px; }
.plan-precio-txt { font-size: 20px; }
.plan-cob { list-style: none; margin: 0; padding: 10px 12px 12px; font-size: 13.5px; }
.plan-cob li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.plan-cob li:last-child { border-bottom: 0; }
.plan-cob li span { color: var(--text); }
.plan-cob li b { color: #fff; white-space: nowrap; font-weight: 700; }
.plan-cob li.no span, .plan-cob li.no b { color: rgba(154, 163, 178, 0.55); font-weight: 500; }
.plan-cob li.no span { text-decoration: line-through; text-decoration-color: rgba(154, 163, 178, 0.35); }

.plan-campos { padding: 4px 12px 12px; }
.plan-campos .cs-control > span { font-size: 13.5px; margin: 10px 0 6px; }
.plan-campos .cs-control input { padding: 10px 12px; }
.hogar-rango output { display: block; font-size: 20px; font-weight: 800; color: var(--mint); margin-bottom: 4px; }
.plan-campos .hogar-rango input[type="range"] { padding: 0; border: 0; background: transparent; box-shadow: none; accent-color: #a85ee0; height: 26px; cursor: pointer; }
.hogar-rango-lim { display: flex !important; justify-content: space-between; margin: 0 !important; font-weight: 500 !important; color: var(--muted); font-size: 12px !important; }

/* tarjeta elegida */
.plan.elegido {
  border-color: transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(120deg, #14f0b3, #a85ee0, #f4b42d) border-box;
  box-shadow: 0 14px 40px -12px rgba(168, 94, 224, 0.65);
}
.plan.elegido .plan-cab::after {
  content: "✓"; position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: #fff; color: #5b3fe0;
}
.plan:has(input:focus-visible) { outline: 3px solid rgba(20, 240, 179, 0.6); outline-offset: 2px; }
@media (hover: hover) {
  .plan:not(.elegido):hover { transform: translateY(-3px); border-color: rgba(168, 94, 224, 0.55); }
}

.hogar-accion { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.hogar-elegido { margin: 0; font-size: 16px; color: var(--muted); }
.hogar-elegido strong { color: #fff; }
.hogar-wa[aria-disabled="true"] { opacity: 0.55; filter: saturate(0.6); }
.hogar-aviso { color: #ffb4b4 !important; }
.plan-campos input.falta { border-color: #ff7b7b; box-shadow: 0 0 0 3px rgba(255, 123, 123, 0.2); }

/* notebook: 2 x 2 */
@media (max-width: 1199px) {
  .hogar-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* celular: tarjetas deslizables de a una */
@media (max-width: 760px) {
  .hogar { padding: 14px 4px 10px; }
  .hogar-intro { padding: 0 8px; font-size: 15px; }
  .hogar-planes {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; padding: 4px 8px 10px; scrollbar-width: none;
  }
  .hogar-planes::-webkit-scrollbar { display: none; }
  .plan { flex: 0 0 84%; scroll-snap-align: center; }
  .hogar-accion { padding: 0 8px; flex-direction: column; align-items: stretch; text-align: center; }
  .hogar-wa { justify-content: center; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .plan { transition: none; }
  .plan:not(.elegido):hover { transform: none; }
}

/* ---------- Tecnología: formulario corto + WhatsApp ---------- */
.iframe-wrap .form-tec { margin-top: 0; padding: 22px 20px; }
@media (min-width: 768px) { .iframe-wrap .form-tec { padding: 28px 36px; } }
.tec-grid { grid-template-columns: 1fr 0.7fr 1.2fr; }
.wa-grid { grid-template-columns: 1fr 0.7fr; max-width: 900px; }
.tec-nota { margin: 12px 2px 0; font-size: 15px; color: var(--text); background: rgba(var(--tc, 20, 240, 179), 0.10); border-left: 3px solid rgb(var(--tc, 20, 240, 179)); padding: 10px 12px; border-radius: 8px; }
.form-tec .actions { margin-top: 18px; }
.tec-msg { margin-top: 10px; color: #ffb4b4; font-size: 15px; min-height: 1em; }
.form-tec .falta { border-color: #ff7b7b !important; box-shadow: 0 0 0 3px rgba(255, 123, 123, 0.22) !important; }
@media (max-width: 760px) {
  .tec-grid, .wa-grid { grid-template-columns: 1fr; }
  .form-tec .tec-wa { width: 100%; justify-content: center; margin: 0; }
}

.form-wa .hogar-rango output { display: block; font-size: 20px; font-weight: 800; color: rgb(var(--tc, 20, 240, 179)); margin: 2px 0 2px; }
.form-wa .hogar-rango input[type="range"] { width: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; accent-color: rgb(var(--tc, 168, 94, 224)); height: 26px; cursor: pointer; }

/* ---------- Campos de los formularios: color suave del rubro elegido ---------- */
#panel-hogar { --tc: 47, 107, 255; }
#panel-bici { --tc: 198, 83, 204; }
#panel-tecnología { --tc: 20, 240, 179; }
#panel-art { --tc: 34, 197, 94; }
#panel-otros { --tc: 154, 163, 178; }
#cotizador .panel .cs-control input:not([type="range"]),
#cotizador .panel .cs-control select,
#cotizador .panel .cs-control textarea {
  background: rgba(var(--tc, 91, 107, 255), 0.11);
  border: 1.5px solid rgba(var(--tc, 91, 107, 255), 0.45);
  color: #fff;
}
#cotizador .panel .cs-control input::placeholder { color: rgba(255, 255, 255, 0.5); }
#cotizador .panel .cs-control select option { background: #151935; color: #fff; }
#cotizador .panel .cs-control select:invalid { color: rgba(255, 255, 255, 0.55); }
#cotizador .panel .cs-control input:focus,
#cotizador .panel .cs-control select:focus {
  background: rgba(var(--tc, 91, 107, 255), 0.17);
  border-color: rgb(var(--tc, 91, 107, 255));
  box-shadow: 0 0 0 3px rgba(var(--tc, 91, 107, 255), 0.25);
}

/* ---------- Marco del cotizador: borde que gira lento (1 vuelta cada 10 s) ---------- */
@property --cs-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  .cot-marco {
    background:
      linear-gradient(var(--bg), var(--bg)) padding-box,
      conic-gradient(from var(--cs-ang), var(--blue), var(--violet), var(--orange), var(--violet), var(--blue)) border-box;
    animation: cs-marco-gira 10s linear infinite;
    animation-play-state: paused;
  }
  .cot-marco.en-vista { animation-play-state: running; }
}
@keyframes cs-marco-gira { to { --cs-ang: 360deg; } }

/* ---------- Redes sociales: siempre con su color ---------- */
.socials a[aria-label="Instagram"] { background: linear-gradient(135deg, var(--ig1, #f58529), var(--ig2, #dd2a7b)); border-color: transparent; color: #fff; }
.socials a[aria-label="Facebook"] { background: var(--fb, #1877f2); border-color: transparent; color: #fff; }

/* ---------- Autos de aplicación / taxis / remises: tarjetas que abren WhatsApp ---------- */
.apps-tipos li:has(> .apps-tipo-link) { padding: 0; }
.apps-tipo-link {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 16px 18px; border-radius: inherit; color: inherit; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.apps-tipo-link > div { flex: 1; }
.apps-ir {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(244, 180, 45, 0.12); border: 1px solid rgba(244, 180, 45, 0.45);
  transition: background 0.2s ease, transform 0.2s ease;
}
.apps-ir svg { width: 20px; height: 20px; fill: none; stroke: #f4b42d; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s ease, transform 0.2s ease; }
.apps-tipos li:has(> .apps-tipo-link) { transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; }
@media (hover: hover) {
  .apps-tipos li:has(> .apps-tipo-link:hover) { border-color: rgba(244, 180, 45, 0.75); transform: translateY(-3px); box-shadow: 0 14px 34px -14px rgba(244, 180, 45, 0.55); }
  .apps-tipo-link:hover .apps-ir { background: #f4b42d; }
  .apps-tipo-link:hover .apps-ir svg { stroke: #1b1b1b; transform: translateX(2px); }
}
.apps-tipo-link:active .apps-ir { background: #f4b42d; }
.apps-tipo-link:active .apps-ir svg { stroke: #1b1b1b; }
.apps-tipo-link:focus-visible { outline: 3px solid rgba(20, 240, 179, 0.6); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .apps-tipos li:has(> .apps-tipo-link:hover) { transform: none; }
}

/* ---------- Botones: centrados en los formularios y alineados con el texto en las secciones ---------- */
.form-wa .actions { display: flex; justify-content: center; }
.form-wa .actions .btn { margin: 0; }
.tec-msg { text-align: center; }
.container div[style*="display:flex"] > .btn:first-child,
.split .text div[style*="display:flex"] > .btn:first-child { margin-left: 0; }

/* ---------- Menú: colores de Autos y Asistencia al viajero (ahora apuntan al cotizador) ---------- */
nav[aria-label="principal"] a[data-ir-tab="auto"] { --mc: 18, 67, 213; }
nav[aria-label="principal"] a[data-ir-tab="viaje"] { --mc: 177, 101, 201; }

/* Celular: el menú cerrado dejaba una franja oscura de 21 px bajo el encabezado (padding + borde con max-height 0) */
@media (max-width: 980px) {
  nav[aria-label="principal"] { padding-top: 0; padding-bottom: 0; border-top-width: 0; visibility: hidden; transition: max-height 0.2s ease, padding 0.2s ease, visibility 0s linear 0.2s; }
  nav[aria-label="principal"].open { padding-top: 10px; padding-bottom: 10px; border-top-width: 1px; visibility: visible; transition: max-height 0.2s ease, padding 0.2s ease, visibility 0s; }
}

/* Botones con degradé: sin la rayita del color opuesto en los bordes (el degradé se repetía bajo el borde transparente) */
.btn { background-origin: border-box; }

/* Portada: el texto arranca en la misma línea que el logo y el resto de las secciones */
@media (min-width: 981px) {
  body .hero .text .inner { padding-left: max(20px, calc((100vw - 1320px) / 2 + 6px)); }
}

/* Pestañas del cotizador: nombre corto solo en celular */
#cotizador .tab .t-corto { display: none; }
/* Celular: todas las pestañas a la vista en 3 columnas, 3 filas de 3 (sin deslizar) */
@media (max-width: 760px) {
  #cotizador .tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; overflow: visible !important; padding: 6px 0 14px !important; -webkit-mask-image: none !important; mask-image: none !important; }
  #cotizador .tab { width: 100%; margin: 0 !important; font-size: 13.5px !important; padding: 10px 4px !important; justify-content: center; text-align: center; white-space: normal; line-height: 1.1; min-height: 44px; }
  #cotizador .tab.is-active { transform: none !important; }
  #cotizador .tab .t-largo { display: none; }
  #cotizador .tab .t-corto { display: inline; }
}


/* Título del cotizador: "¡a un click!" en naranja con flechita, ola y destello (02/11)
 * Sin JS o con movimiento reducido se ve el estado final quieto.
 * Con JS: flechita (sube y hace click) → ola en "click" → destello. Pasa una sola vez, cuando el título entra en pantalla. */
.titulo-click { padding-bottom: .3em; }
.titulo-click .aclick { color: var(--orange); position: relative; display: inline-block; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.titulo-click .ac-l { display: inline-block; }
.titulo-click .ac-pin { position: relative; display: inline-block; width: 0; height: 0; }
.titulo-click .ac-cur { position: absolute; left: -.3em; top: .08em; width: .62em; height: .62em; color: var(--orange); }
.titulo-click .ac-ray { position: absolute; right: -.55em; top: -.38em; width: .62em; height: .62em; color: var(--orange); transform-origin: 0 100%; }
/* Celular: el título ocupa varios renglones; el destello va al costado del "!" para no tocar el renglón de arriba */
@media (max-width: 760px) {
  .titulo-click .ac-ray { right: -.72em; top: .02em; }
}
@media (prefers-reduced-motion: no-preference) {
  .titulo-click.ac-prep .ac-cur, .titulo-click.ac-prep .ac-ray { opacity: 0; }
  .titulo-click.ac-go .ac-cur { animation: acCur .9s ease-out .15s both; }
  .titulo-click.ac-go .ac-l { animation: acOla .5s cubic-bezier(.3,1.6,.5,1) both; }
  .titulo-click.ac-go .ac-l.l1 { animation-delay: 1.1s; }
  .titulo-click.ac-go .ac-l.l2 { animation-delay: 1.22s; }
  .titulo-click.ac-go .ac-l.l3 { animation-delay: 1.34s; }
  .titulo-click.ac-go .ac-l.l4 { animation-delay: 1.46s; }
  .titulo-click.ac-go .ac-l.l5 { animation-delay: 1.58s; }
  .titulo-click.ac-go .ac-ray { animation: acRay .35s ease-out 2.05s both; }
}
@keyframes acCur { 0% { opacity: 0; transform: translate(.45em, .4em); } 55% { opacity: 1; transform: none; } 70% { transform: scale(.82); } 85%, 100% { opacity: 1; transform: none; } }
@keyframes acOla { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-.3em); } }
@keyframes acRay { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: scale(1); } }