/* ============================================================
   Alerta Temprana — sitio público · Home
   Según especificaciones de diseño 2026-07-09:
   logo Grande · tipografía Archivo · ojo "Mirada" · hero Oscuro
   ============================================================ */

:root {
  --ambar: #F5A623;
  --ambar-hover: #FFB93E;
  --ambar-logo: #E4A13A;
  --ambar-aa: #8A5F06;        /* labels/links sobre claro (AA real: 5.28:1 s/claro, 5.64:1 s/blanco) */
  --ambar-badge: #8A5F06;
  --negro: #111111;
  --carbon: #1D1F23;
  --claro: #FAF7F2;
  --blanco: #FFFFFF;
  --txt-sec-oscuro: #C9C5BE;
  --txt-ter-oscuro: #8A8D93;
  --txt-sec-claro: #4A4A46;
  --txt-bullet: #2C2C29;
  --borde-claro: #E7E2D9;
  --borde-input: #D8D2C7;
  --whatsapp: #25D366;
  --whatsapp-hover: #1FBF5B;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  background: var(--claro);
  color: var(--txt-bullet);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Accesibilidad: foco de teclado visible y consistente (WCAG 2.4.7 / 1.4.11).
   Ámbar pasa 3:1 como indicador de componente sobre fondos claros y oscuros. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip-link: saltar al contenido (oculto hasta recibir foco por teclado). */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ambar); color: var(--negro);
  padding: 10px 16px; border-radius: 8px;
  font-weight: 800; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.kicker {
  font-size: 14px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; display: block; margin-bottom: 12px;
}
.kicker--claro { color: var(--ambar-aa); }
.kicker--oscuro { color: var(--ambar); }

.h2-seccion {
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.05;
  margin-bottom: 16px;
}

.intro-seccion { font-size: 17px; line-height: 1.55; max-width: 640px; }

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: 68px;
  background: rgba(17, 17, 17, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(245, 166, 35, .18);
}

.header .contenedor {
  height: 68px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px;
}

.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca img { height: 58px; width: auto; border-radius: 4px; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: #d9d5ce; text-decoration: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; transition: color .18s ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--ambar); }

.acciones-header { display: flex; align-items: center; gap: 12px; }

.cta-header {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ambar); color: var(--negro); text-decoration: none;
  height: 44px; padding: 0 20px; border-radius: 8px;
  font-size: 15px; font-weight: 800; white-space: nowrap;
  transition: background-color .18s ease;
}
.cta-header:hover { background: var(--ambar-hover); }

.hamburguesa {
  display: none; width: 44px; height: 44px;
  background: none; border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.hamburguesa span { width: 18px; height: 2px; background: #fff; }
.hamburguesa span:nth-child(2) { background: var(--ambar); }

.nav-mobile {
  display: none;
  position: fixed; top: 68px; left: 0; right: 0; z-index: 89;
  background: var(--negro);
  border-bottom: 1px solid rgba(245, 166, 35, .18);
}
.nav-mobile.abierta { display: block; }
.nav-mobile a {
  display: block; padding: 13px 20px;
  color: #d9d5ce; text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-mobile a:last-child { border-bottom: 0; color: var(--ambar); font-weight: 700; }

/* ---------- Hero ---------- */
.hero {
  background: var(--negro); color: #fff;
  padding: 148px 0 80px;
  position: relative; overflow: hidden;
}

.hero .contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.hero-texto { flex: 1 1 420px; }
.hero-visual { flex: 1 1 340px; display: flex; justify-content: center; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(245, 166, 35, .4); border-radius: 999px;
  padding: 7px 16px; margin-bottom: 24px;
  font-size: 14px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ambar);
}
.hero-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); }

.hero h1 {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 900; letter-spacing: -.035em; line-height: 1.02;
  margin-bottom: 20px;
}
.hero h1 em { font-style: normal; color: var(--ambar); }

.hero-bajada {
  font-size: clamp(16px, 2vw, 19px); line-height: 1.55;
  color: var(--txt-sec-oscuro); max-width: 34em; margin-bottom: 12px;
}

.hero-sub { font-size: 15px; line-height: 1.55; color: var(--txt-ter-oscuro); max-width: 36em; margin-bottom: 30px; }

.hero-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 28px; border-radius: 10px;
  font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; border: 0;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.boton-primario { background: var(--ambar); color: var(--negro); }
.boton-primario:hover { background: var(--ambar-hover); }
.boton-secundario { background: transparent; border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; }
.boton-secundario:hover { border-color: var(--ambar); color: var(--ambar); }
.boton svg { flex-shrink: 0; }

.hero-micro { font-size: 14px; color: var(--txt-ter-oscuro); }
.hero-micro strong { color: var(--txt-sec-oscuro); font-weight: 600; }

/* Radar + ojo "Mirada" */
.radar {
  width: min(420px, 78vw); height: min(420px, 78vw);
  position: relative; display: flex; align-items: center; justify-content: center;
}
.radar-anillo, .radar-pulso {
  position: absolute; inset: 0; border-radius: 50%;
}
.radar-anillo { border: 1px dashed rgba(245, 166, 35, .22); }
.radar-anillo.e1 { transform: scale(.36); }
.radar-anillo.e2 { transform: scale(.60); }
.radar-anillo.e3 { transform: scale(.84); }

.radar-pulso {
  border: 1.5px solid rgba(245, 166, 35, .55);
  animation: atRadarPulse 4s linear infinite;
}
.radar-pulso.p2 { animation-delay: 1s; }
.radar-pulso.p3 { animation-delay: 2s; }
.radar-pulso.p4 { animation-delay: 3s; }

@keyframes atRadarPulse {
  0%   { transform: scale(.42); opacity: .9; }
  100% { transform: scale(1.06); opacity: 0; }
}

/* Marca en el centro del radar: círculo ámbar con el ojo vigilando,
   y el nombre curvado sobre el arco inferior del radar (estático). */
.radar-centro {
  position: relative; z-index: 2;
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--ambar-logo);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 60px rgba(245, 166, 35, .35);
  animation: atLatido 4s ease-in-out infinite;
}
.radar-centro img.ojo { width: 96px; height: auto; animation: atMirada 7s ease-in-out infinite; }

/* Nombre de marca curvado en el arco inferior (decorativo, sin animación) */
.radar-curva { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.radar-curva text {
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .34em; fill: rgba(245, 166, 35, .75);
}

/* Mirada: el ojo recorre el acceso, con pausas en los extremos */
@keyframes atMirada {
  0%, 20%   { transform: translateX(-7px); }
  40%, 60%  { transform: translateX(7px); }
  80%, 100% { transform: translateX(-7px); }
}

@keyframes atLatido {
  0%, 100% { box-shadow: 0 0 45px rgba(245, 166, 35, .3), 0 8px 28px rgba(0, 0, 0, .45); }
  50%      { box-shadow: 0 0 85px rgba(245, 166, 35, .55), 0 8px 28px rgba(0, 0, 0, .45); }
}

@media (prefers-reduced-motion: reduce) {
  .radar-pulso { animation: none; opacity: .35; transform: scale(.8); }
  .radar-centro, .radar-centro img.ojo { animation: none; }
}

/* ---------- Barra de confianza ---------- */
.confianza { background: var(--carbon); color: var(--txt-sec-oscuro); padding: 26px 0; }
.confianza .contenedor {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 14px 44px;
}
.confianza .item { font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.confianza .item strong { color: var(--ambar); font-weight: 800; }
.confianza .clientes { display: inline-flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.confianza .clientes .titulo { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--txt-ter-oscuro); }
.confianza .clientes span:not(.titulo) { font-weight: 800; letter-spacing: .05em; color: #b5b1aa; font-size: 15px; text-transform: uppercase; }

/* ---------- Soluciones ---------- */
.soluciones { background: var(--claro); padding: 84px 0; }

.grilla-cards { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 44px; }

.card {
  flex: 1 1 300px;
  background: var(--blanco);
  border: 1px solid var(--borde-claro);
  border-radius: 16px;
  padding: 34px 28px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.destacada { border: 2px solid var(--ambar); }
/* Micro-interacción: lift al hover (solo dispositivos con puntero; evita
   que quede "pegado" tras un tap en táctiles) + feedback de presión. */
@media (hover: hover) {
  .card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(17, 17, 17, .14); }
  .card.destacada:hover { box-shadow: 0 14px 32px rgba(245, 166, 35, .22); }
}
.card:active { transform: translateY(1px) scale(.99); }
.card .badge {
  position: absolute; top: -13px; left: 28px;
  background: var(--ambar); color: var(--negro);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
}
.card h3 { font-size: 25px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 10px; }
.card > p { font-size: 15px; line-height: 1.5; color: var(--txt-sec-claro); margin-bottom: 18px; }
.card ul { list-style: none; margin-bottom: 26px; }
.card li {
  font-size: 15px; line-height: 1.45; color: var(--txt-bullet);
  padding: 6px 0 6px 26px; position: relative;
}
.card li::before {
  content: "✓"; position: absolute; left: 0; top: 6px;
  color: var(--ambar-aa); font-weight: 800;
}
.cta-card {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; border-radius: 10px; text-decoration: none;
  font-size: 16px; font-weight: 800;
  background: var(--negro); color: #fff;
  transition: background-color .18s ease, color .18s ease;
}
.cta-card:hover { background: var(--txt-bullet); color: var(--ambar); }
.card.destacada .cta-card { background: var(--ambar); color: var(--negro); }
.card.destacada .cta-card:hover { background: var(--ambar-hover); }

/* ---------- Servicios ---------- */
.servicios { background: var(--blanco); padding: 84px 0; }

.grilla-servicios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 18px; margin-top: 44px;
}
.servicio {
  border: 1px solid var(--borde-claro); border-radius: 12px;
  padding: 20px 22px; background: var(--claro);
}
.servicio.destacado {
  grid-column: 1 / -1;
  border: 2px solid var(--ambar); background: var(--blanco);
  position: relative;
}
.servicio.destacado .badge {
  position: absolute; top: -13px; left: 22px;
  background: var(--ambar); color: var(--negro);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
}
.servicio.destacado h3 { font-size: 21px; }
.servicio h3 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.servicio p { font-size: 15px; line-height: 1.45; color: var(--txt-sec-claro); margin-bottom: 10px; }
.servicio a {
  font-size: 14px; font-weight: 700; color: var(--ambar-aa);
  text-decoration: none;
}
.servicio a:hover { text-decoration: underline; }

/* ---------- Cómo funciona ---------- */
.como-funciona { background: var(--negro); color: #fff; padding: 84px 0; }
.como-funciona .intro-seccion { color: var(--txt-sec-oscuro); }

.grilla-pasos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px; margin-top: 44px;
}
.paso {
  background: var(--carbon);
  border: 1px solid rgba(245, 166, 35, .2);
  border-radius: 16px; padding: 30px 26px;
}
.paso .numero { font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--ambar); margin-bottom: 14px; }
.paso h3 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.paso p { font-size: 15px; line-height: 1.5; color: var(--txt-sec-oscuro); }

.como-funciona .cierre { margin-top: 40px; text-align: center; }

.boton-outline-ambar {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 28px; border-radius: 10px;
  border: 1.5px solid var(--ambar); color: var(--ambar);
  font-size: 17px; font-weight: 800; text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.boton-outline-ambar:hover { background: var(--ambar); color: var(--negro); }

/* ---------- Por qué ---------- */
.porque { background: var(--blanco); padding: 60px 0; }
.porque h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 16px; }

.grilla-razones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 24px 40px; margin-top: 40px;
}
.razon { border-top: 3px solid var(--ambar); padding-top: 14px; }
.razon h3 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.razon p { font-size: 15px; line-height: 1.5; color: var(--txt-sec-claro); }

/* ---------- Problemas ---------- */
.problemas { background: var(--claro); padding: 84px 0; }

.grilla-problemas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px; margin-top: 44px;
}
.problema {
  background: var(--blanco); border: 1px solid var(--borde-claro); border-radius: 12px;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.problema blockquote { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.problema blockquote::before { content: "“"; color: var(--ambar-aa); }
.problema blockquote::after { content: "”"; color: var(--ambar-aa); }
.problema p { font-size: 14.5px; line-height: 1.45; color: var(--txt-sec-claro); }
.problema a { font-size: 14px; font-weight: 700; color: var(--ambar-aa); text-decoration: none; margin-top: auto; }
.problema a:hover { text-decoration: underline; }

/* ---------- Cobertura ---------- */
.cobertura { background: var(--blanco); padding: 60px 0; }

.zonas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.zonas span {
  display: inline-flex; align-items: center; min-height: 38px;
  background: var(--claro); border: 1px solid var(--borde-claro); border-radius: 999px;
  padding: 0 18px; font-size: 14.5px; font-weight: 600;
}
.cobertura .nota { margin-top: 18px; font-size: 15px; color: var(--txt-sec-claro); }

/* ---------- FAQ ---------- */
.faq { background: var(--claro); padding: 84px 0; }
.faq-lista { max-width: 820px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 12px; }

.faq-item { background: var(--blanco); border: 1px solid var(--borde-claro); border-radius: 12px; overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer;
  min-height: 56px; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ambar); color: var(--negro);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .respuesta { padding: 0 20px 20px; font-size: 15px; line-height: 1.6; color: var(--txt-sec-claro); }

/* ---------- Contacto ---------- */
.contacto { background: var(--carbon); color: #fff; padding: 84px 0; }
.contacto .intro-seccion { color: var(--txt-sec-oscuro); }

.contacto-grilla { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 44px; }
.contacto-datos { flex: 1 1 380px; }
.contacto-form { flex: 1 1 380px; }

.dato { display: flex; gap: 14px; margin-bottom: 22px; }
.dato .icono {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px;
  background: rgba(245, 166, 35, .16);
  display: flex; align-items: center; justify-content: center;
}
.dato strong { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ambar); margin-bottom: 3px; }
.dato a { color: #fff; text-decoration: none; font-size: 16px; transition: color .18s ease; }
.dato a:hover { color: var(--ambar); }
.dato p { color: var(--txt-sec-oscuro); font-size: 15px; line-height: 1.5; }

.formulario {
  background: var(--blanco); color: var(--txt-bullet);
  border-radius: 16px; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.formulario h3 { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.formulario label { font-size: 14px; font-weight: 700; display: block; margin-bottom: 5px; }
.formulario input, .formulario select, .formulario textarea {
  width: 100%; height: 48px;
  background: var(--claro); border: 1.5px solid var(--borde-input); border-radius: 8px;
  font-family: inherit; font-size: 16px; color: var(--txt-bullet);
  padding: 0 14px;
}
.formulario textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
  outline: 2px solid var(--ambar); outline-offset: 1px; border-color: var(--ambar);
}
.formulario .legal { font-size: 13px; line-height: 1.5; color: var(--txt-sec-claro); }
.formulario .legal a { color: var(--ambar-aa); }

/* ---------- Footer ---------- */
.footer { background: var(--negro); color: var(--txt-ter-oscuro); padding: 56px 0 100px; }

.footer-grilla { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.footer-marca { flex: 2 1 280px; }
.footer-col { flex: 1 1 160px; }
.footer-col:last-child { flex: 1 1 220px; }

.footer-marca img { height: 64px; width: auto; border-radius: 4px; margin-bottom: 16px; }
.footer-marca p { font-size: 14.5px; line-height: 1.6; color: var(--txt-sec-oscuro); max-width: 34em; }

.footer h4 {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ambar); margin-bottom: 14px;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 9px; }
.footer a { color: var(--txt-sec-oscuro); text-decoration: none; font-size: 14.5px; transition: color .18s ease; }
.footer a:hover { color: var(--ambar); }

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 40px; padding-top: 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.footer-legal p { font-size: 13px; line-height: 1.6; }

/* Badges legales oficiales (imágenes con link a cada organismo).
   Cada uno sobre pastilla blanca para unificar el set sobre el footer oscuro. */
.badges-legales { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.badges-legales a,
.badges-legales .badge-sinlink {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 8px; padding: 8px;
  transition: transform .12s, box-shadow .12s;
}
.badges-legales a:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.badges-legales img { height: 62px; width: auto; display: block; }

/* ---------- FAB WhatsApp ---------- */
.fab-whatsapp {
  position: fixed; bottom: 22px; right: 22px; z-index: 95;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--whatsapp);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  transition: background-color .2s ease, transform .2s ease;
}
.fab-whatsapp:hover { background: var(--whatsapp-hover); }
@media (hover: hover) {
  .fab-whatsapp:hover { transform: scale(1.08); }
}
.fab-whatsapp:active { transform: scale(.96); }

/* Feedback de presión en botones y CTAs (mobile y desktop) */
.boton:active, .cta-header:active, .cta-card:active, .boton-outline-ambar:active {
  transform: translateY(1px);
}

/* Accesibilidad: sin movimiento para quien lo pidió en su sistema.
   (Las animaciones del radar/ojo ya tienen su propia regla más arriba.) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
  .card:hover, .card:active,
  .boton:active, .cta-header:active, .cta-card:active, .boton-outline-ambar:active,
  .fab-whatsapp:hover, .fab-whatsapp:active,
  .badges-legales a:hover { transform: none; }
}

/* Anclas: compensan el header fijo al navegar por #id */
section[id], article[id] { scroll-margin-top: 84px; }

/* ---------- Páginas internas ---------- */
.hero-interna { padding: 128px 0 64px; }
.hero-interna h1 { font-size: clamp(32px, 5vw, 54px); }

.miga-pan { font-size: 13.5px; margin-bottom: 18px; }
.miga-pan a { color: var(--txt-ter-oscuro); text-decoration: none; transition: color .18s ease; }
.miga-pan a:hover { color: var(--ambar); }
.miga-pan span { color: var(--txt-sec-oscuro); }

/* Tabla comparativa */
.tabla-scroll { overflow-x: auto; margin-top: 36px; }
.comparativa {
  width: 100%; min-width: 560px; border-collapse: collapse;
  background: var(--blanco); border: 1px solid var(--borde-claro); border-radius: 12px;
  overflow: hidden; font-size: 15px;
}
.comparativa th, .comparativa td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--borde-claro); vertical-align: top; }
.comparativa thead th { background: var(--negro); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.comparativa thead th:last-child { background: var(--ambar); color: var(--negro); }
.comparativa tbody th { font-weight: 700; color: var(--txt-bullet); width: 30%; background: var(--claro); font-size: 14px; }
.comparativa td { color: var(--txt-sec-claro); }
.comparativa td:last-child { color: var(--txt-bullet); }
.comparativa tbody tr:last-child th, .comparativa tbody tr:last-child td { border-bottom: 0; }
.nota-tabla { margin-top: 14px; font-size: 13.5px; color: var(--txt-sec-claro); }

/* Páginas legales */
.legal-cabecera { background: var(--negro); color: #fff; padding: 118px 0 44px; }
.legal-cabecera h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin-top: 10px; }
.legal-cabecera .actualizacion { margin-top: 10px; font-size: 13.5px; color: var(--txt-ter-oscuro); }

.legal-cuerpo { background: var(--claro); padding: 56px 0 84px; }
.legal-cuerpo .contenido { max-width: 820px; }
.legal-cuerpo h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 32px 0 10px; }
.legal-cuerpo p, .legal-cuerpo li { font-size: 15px; line-height: 1.7; color: var(--txt-sec-claro); margin-bottom: 12px; }
.legal-cuerpo ul { padding-left: 22px; margin-bottom: 12px; }
.legal-cuerpo a { color: var(--ambar-aa); }
.legal-cuerpo .destacado {
  background: var(--blanco); border: 1px solid var(--borde-claro); border-left: 4px solid var(--ambar);
  border-radius: 8px; padding: 14px 18px; margin: 20px 0;
}
.legal-cuerpo .formulario { max-width: 560px; margin-top: 32px; }
.legal-cuerpo .formulario h3 { color: var(--txt-bullet); }

/* Franja CTA intermedia */
.franja-cta { background: var(--negro); color: #fff; padding: 48px 0; }
.franja-cta .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.franja-cta p { font-size: clamp(19px, 2.6vw, 25px); font-weight: 800; letter-spacing: -.02em; max-width: 24em; }
.franja-cta strong { color: var(--ambar); }

/* ---------- Responsive: breakpoint único 1020px ---------- */
@media (max-width: 1019.98px) {
  .nav { display: none; }
  .hamburguesa { display: flex; }
  .marca img { height: 48px; }
}

@media (min-width: 1020px) {
  .nav-mobile { display: none !important; }
}