/* =========================================================
   Servicios P.R.C. — Hoja de estilos única
   Paleta: #111111 negro, #FFCC33 amarillo, #C9A227 dorado,
           #FFFFFF blanco, #F3F3F3 gris claro, #4A4A4A gris texto
   Tipografía: Poppins
   ========================================================= */

:root {
  --negro: #111111;
  --amarillo: #FFCC33;
  --dorado: #C9A227;
  --blanco: #FFFFFF;
  --gris-claro: #F3F3F3;
  --gris-texto: #4A4A4A;
  --dorado-texto: #8A6D1A; /* variante de #C9A227 oscurecida para texto pequeño sobre fondos claros (AA 4.5:1) */
  --whatsapp: #0D7A5F; /* verde WhatsApp oscurecido: texto blanco cumple contraste AA (4.5:1) */

  --radio-boton: 14px;
  --radio-tarjeta: 18px;
  --sombra-tarjeta: 0 10px 30px rgba(17, 17, 17, 0.08);

  --duracion-corta: 300ms;
  --duracion-larga: 600ms;
  --easing: cubic-bezier(0.2, 0.7, 0.2, 1);

  --alto-header: 76px;
  --alto-header-scroll: 60px;
  --alto-barra-movil: 64px;

  --ancho-maximo: 1180px;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-header) + 16px); }
body {
  margin: 0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gris-texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; color: var(--negro); line-height: 1.25; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; }

.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.salta-al-contenido {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--amarillo);
  color: var(--negro);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  z-index: 1000;
  transition: top var(--duracion-corta) var(--easing);
}
.salta-al-contenido:focus { top: 12px; }

/* Foco visible accesible en toda la página */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 2px;
}

/* ---------- Tipografía ---------- */
.etiqueta-seccion {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  margin-bottom: 10px;
}
.titulo-seccion {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  margin-bottom: 16px;
}
.subtitulo-seccion {
  font-size: clamp(16px, 2.2vw, 19px);
  font-weight: 400;
  max-width: 62ch;
  margin-bottom: 40px;
}
.fondo-negro .titulo-seccion,
.fondo-negro .etiqueta-seccion { color: var(--blanco); }
.fondo-negro .etiqueta-seccion { color: var(--amarillo); }
.fondo-negro .subtitulo-seccion { color: #D9D9D9; }

/* ---------- Fondos por sección ---------- */
.seccion { padding: 72px 0; position: relative; overflow: hidden; }
.fondo-negro { background: var(--negro); color: #D9D9D9; }
.fondo-blanco { background: var(--blanco); }
.fondo-gris { background: var(--gris-claro); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radio-boton);
  font-weight: 600;
  font-size: 16px;
  border: 2px solid transparent;
  transition: transform var(--duracion-corta) var(--easing),
              background-color var(--duracion-corta) var(--easing),
              color var(--duracion-corta) var(--easing),
              box-shadow var(--duracion-corta) var(--easing);
  white-space: nowrap;
}
.boton svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; }
.boton:hover, .boton:focus-visible { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton-principal {
  background: var(--amarillo);
  color: var(--negro);
  border-color: var(--negro);
}
.boton-principal:hover { background: var(--dorado); }

.boton-secundario {
  background: transparent;
  color: var(--blanco);
  border-color: var(--blanco);
}
.boton-secundario:hover { background: rgba(255,255,255,0.12); }

.fondo-blanco .boton-secundario,
.fondo-gris .boton-secundario {
  color: var(--negro);
  border-color: var(--negro);
}
.fondo-blanco .boton-secundario:hover,
.fondo-gris .boton-secundario:hover { background: rgba(17,17,17,0.06); }

.boton-whatsapp {
  background: var(--whatsapp);
  color: var(--blanco);
  border-color: var(--whatsapp);
}
.boton-whatsapp:hover { background: #1ebe5a; }

.boton-tarjeta {
  background: var(--negro);
  color: var(--blanco);
  border-color: var(--negro);
  width: 100%;
  min-height: 48px;
}
.boton-tarjeta:hover { background: #000; }

.boton-ancho-completo { width: 100%; }

/* ---------- Header ---------- */
.encabezado {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--alto-header);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(17,17,17,0.92), rgba(17,17,17,0.55) 65%, rgba(17,17,17,0));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: height var(--duracion-corta) var(--easing),
              background-color var(--duracion-corta) var(--easing),
              box-shadow var(--duracion-corta) var(--easing);
}
.encabezado.con-fondo {
  height: var(--alto-header-scroll);
  background: var(--negro);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.encabezado .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
}
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--blanco);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.marca .texto-marca { white-space: nowrap; }
.marca .escudo {
  width: 42px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  transition: filter var(--duracion-corta) var(--easing);
}
.marca:hover .escudo { filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.45)); }

.nav-principal { display: none; min-width: 0; }
.nav-principal ul {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  white-space: nowrap;
}
.nav-principal a {
  position: relative;
  display: inline-block;
  color: #E8E8E8;
  font-weight: 500;
  font-size: clamp(13.5px, 1.05vw, 15px);
  letter-spacing: 0.01em;
  padding: 10px 1px;
}
.nav-principal a::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 6px;
  height: 2px;
  background: var(--amarillo);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duracion-corta) var(--easing);
}
.nav-principal a:hover,
.nav-principal a.activo { color: var(--amarillo); }
.nav-principal a:hover::after,
.nav-principal a.activo::after { transform: scaleX(1); }

.encabezado-acciones { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.boton-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  padding: 0;
}
.boton-menu span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blanco);
  border-radius: 2px;
  transition: transform var(--duracion-corta) var(--easing), opacity var(--duracion-corta) var(--easing);
}
.boton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.boton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.boton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-movil {
  position: fixed;
  inset: var(--alto-header) 0 0 0;
  background: var(--negro);
  transform: translateX(100%);
  transition: transform var(--duracion-larga) var(--easing);
  z-index: 400;
  overflow-y: auto;
  padding: 24px 0 100px;
}
.menu-movil.abierto { transform: translateX(0); }
.menu-movil ul { display: flex; flex-direction: column; }
.menu-movil a {
  display: block;
  padding: 16px 24px;
  color: var(--blanco);
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.menu-movil a:hover, .menu-movil a.activo { color: var(--amarillo); }
.menu-movil .encabezado-acciones-movil { padding: 24px; display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 1024px) {
  .nav-principal { display: block; }
  .boton-menu { display: none; }
  .menu-movil { display: none; }
}

/* ---------- Sección Inicio ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--alto-header);
  background: var(--negro);
  color: var(--blanco);
}
.hero .contenedor { position: relative; z-index: 2; padding-top: 40px; padding-bottom: 40px; }
.hero-grafico {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-grafico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-superposicion {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.62) 40%, rgba(17,17,17,0.2) 68%, rgba(17,17,17,0.4) 100%),
    linear-gradient(0deg, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0) 32%);
}
@media (max-width: 640px) {
  .hero-superposicion {
    background:
      linear-gradient(180deg, rgba(17,17,17,0.78) 0%, rgba(17,17,17,0.5) 30%, rgba(17,17,17,0.55) 68%, rgba(17,17,17,0.82) 100%);
  }
}
.hero-radar-mini {
  position: absolute;
  right: 32px;
  bottom: 32px;
  width: 84px;
  height: 84px;
  opacity: 0.85;
  display: none;
}
@media (min-width: 640px) { .hero-radar-mini { display: block; } }
.hero-radar-mini svg { width: 100%; height: 100%; }

/* Anillos de radar animados: refuerzan "monitoreo" con un pulso que se
   expande y se desvanece, como un eco de sonar/radar. */
.anillo-radar {
  transform-box: fill-box;
  transform-origin: center;
  animation: radar-ping 3.6s ease-out infinite;
}
.anillo-radar.retraso { animation-delay: 1.8s; }
@keyframes radar-ping {
  0% { transform: scale(0.35); opacity: 0.55; }
  100% { transform: scale(1); opacity: 0; }
}
.hero-contenido { position: relative; z-index: 2; max-width: 640px; }
.hero-contenido h1 {
  color: var(--blanco);
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero-contenido h1 .resaltado { color: var(--amarillo); }
.hero-contenido p {
  color: #E4E4E4;
  font-size: clamp(17px, 2vw, 19px);
  margin-bottom: 32px;
  max-width: 52ch;
}
.hero-botones { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 44px; }

.datos-confianza {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 560px;
}
.dato-confianza {
  position: relative;
  padding-top: 16px;
}
.dato-confianza::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--amarillo);
}
.dato-confianza .numero {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--amarillo);
  display: block;
}
.dato-confianza .texto { font-size: 13px; color: #CFCFCF; }

.punto-en-vivo {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amarillo);
  margin-right: 6px;
  vertical-align: middle;
  animation: pulso-vivo 1.8s ease-in-out infinite;
}
@keyframes pulso-vivo {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.5); }
}

/* Animación de entrada escalonada del hero */
.hero-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duracion-larga) var(--easing), transform var(--duracion-larga) var(--easing);
}
.hero-anim.visible { opacity: 1; transform: translateY(0); }

/* ---------- Quiénes somos ---------- */
.quienes-somos { display: grid; gap: 40px; }
.qs-texto { max-width: 68ch; margin-bottom: 8px; }
.qs-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
.qs-tarjeta {
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: var(--radio-tarjeta);
  padding: 26px;
}
.qs-tarjeta h3 {
  font-size: 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.qs-tarjeta h3::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--amarillo);
  flex-shrink: 0;
}
.valores-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.valor-etiqueta {
  background: var(--gris-claro);
  border: 1px solid #E3E3E3;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 14px;
  color: var(--negro);
}

@media (min-width: 780px) {
  .qs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tarjetas con ícono (Servicios / círculo amarillo) ---------- */
.icono-circulo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--amarillo);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform var(--duracion-corta) var(--easing);
}
.icono-circulo svg { width: 28px; height: 28px; stroke: var(--negro); }

.rejilla-tarjetas {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .rejilla-tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rejilla-tarjetas.cuatro { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .rejilla-tarjetas.cinco { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: var(--radio-tarjeta);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-tarjeta);
  transition: transform var(--duracion-corta) var(--easing), box-shadow var(--duracion-corta) var(--easing);
}
.tarjeta:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(17,17,17,0.14); }
.tarjeta:hover .icono-circulo { transform: rotate(8deg) scale(1.05); }
.tarjeta h3 { font-size: 19px; margin-bottom: 10px; }
.tarjeta p { flex-grow: 1; margin-bottom: 20px; }

/* ---------- Cómo funciona: foto y línea de tiempo ---------- */
.como-funciona-foto {
  max-width: 900px;
  margin: 0 auto 48px;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.como-funciona-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.linea-tiempo { position: relative; max-width: 760px; margin: 0 auto 56px; }
.paso-tiempo {
  position: relative;
  padding-left: 56px;
  padding-bottom: 40px;
  border-left: 2px solid rgba(255,255,255,0.18);
}
.paso-tiempo:last-child { border-left-color: transparent; padding-bottom: 0; }
.paso-tiempo::before {
  content: attr(data-paso);
  position: absolute;
  left: -21px; top: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--negro);
  border: 2px solid rgba(255,255,255,0.3);
  color: #CFCFCF;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  transition: background var(--duracion-larga) var(--easing), border-color var(--duracion-larga) var(--easing), color var(--duracion-larga) var(--easing);
}
.paso-tiempo.encendido::before {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--negro);
}

/* El paso 1 describe algo continuo (monitoreo 24/7, todo el año), a
   diferencia de los demás pasos que son eventos puntuales: por eso es
   el único con un pulso permanente una vez que se enciende. */
.paso-tiempo.paso-continuo.encendido::after {
  content: "";
  position: absolute;
  left: -21px; top: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--amarillo);
  pointer-events: none;
  animation: pulso-anillo 2.2s ease-out infinite;
}
@keyframes pulso-anillo {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.paso-tiempo h3 { color: var(--blanco); font-size: 18px; margin-bottom: 6px; }
.paso-tiempo p { color: #CFCFCF; max-width: 56ch; }

.beneficios-lista {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 700px) { .beneficios-lista { grid-template-columns: repeat(2, 1fr); } }
.beneficio-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #E4E4E4;
}
.beneficio-item svg { width: 22px; height: 22px; flex-shrink: 0; stroke: var(--amarillo); margin-top: 2px; }

/* ---------- Equipo ---------- */
.equipo-layout {
  display: grid;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) { .equipo-layout { grid-template-columns: 1fr 1fr; } }
.equipo-grafico { border-radius: var(--radio-tarjeta); overflow: hidden; aspect-ratio: 3 / 2; }
.equipo-grafico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equipo-columna h3 { font-size: 19px; margin-bottom: 14px; }
.lista-check { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; }
.lista-check svg { width: 20px; height: 20px; flex-shrink: 0; stroke: var(--dorado); margin-top: 3px; }

/* ---------- Precios ---------- */
.franja-precios {
  margin-top: 48px;
  background: var(--blanco);
  border-radius: var(--radio-tarjeta);
  border: 2px solid var(--negro);
  padding: 32px;
  display: grid;
  gap: 18px;
}
@media (min-width: 780px) { .franja-precios { grid-template-columns: repeat(3, 1fr); } }
.franja-precios .item { display: flex; gap: 12px; }
.franja-precios svg { width: 24px; height: 24px; flex-shrink: 0; stroke: var(--negro); }

/* ---------- Cotización / formulario ---------- */
.cotizacion-layout {
  display: grid;
  gap: 36px;
}
@media (min-width: 960px) {
  .cotizacion-layout { grid-template-columns: 1.3fr 1fr; align-items: start; }
}

.tarjeta-formulario {
  background: var(--blanco);
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.campo {
  position: relative;
  margin-bottom: 22px;
}
.campo label {
  position: absolute;
  left: 16px;
  top: 15px;
  color: #707070;
  font-size: 16px;
  pointer-events: none;
  transition: transform var(--duracion-corta) var(--easing), font-size var(--duracion-corta) var(--easing), color var(--duracion-corta) var(--easing);
  background: var(--blanco);
  padding: 0 4px;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  border: 2px solid #DADADA;
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--negro);
  background: var(--blanco);
  transition: border-color var(--duracion-corta) var(--easing);
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--dorado); }

.campo input:focus + label,
.campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label,
.campo textarea:not(:placeholder-shown) + label {
  transform: translateY(-26px);
  font-size: 12px;
  color: var(--dorado-texto);
  font-weight: 600;
}
.campo select { color: var(--negro); }
.campo select ~ label,
.campo.con-valor label {
  transform: translateY(-26px);
  font-size: 12px;
  color: var(--dorado-texto);
  font-weight: 600;
}

.campo-error {
  display: none;
  color: #B3261E;
  font-size: 13px;
  margin-top: 6px;
}
.campo.invalido input,
.campo.invalido select,
.campo.invalido textarea { border-color: #B3261E; }
.campo.invalido .campo-error { display: block; }

.campo-privacidad {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--gris-texto);
}
.campo-privacidad input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
.campo-privacidad a { color: var(--negro); font-weight: 600; text-decoration: underline; }

/* Campo trampa oculto, accesible correctamente */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mensaje-confirmacion {
  display: none;
  background: #EAF7EE;
  border: 2px solid #2E7D32;
  color: #1B5E20;
  border-radius: 14px;
  padding: 20px;
  gap: 12px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duracion-larga) var(--easing), transform var(--duracion-larga) var(--easing);
}
.mensaje-confirmacion.visible { display: flex; opacity: 1; transform: translateY(0); }
.mensaje-confirmacion svg { width: 24px; height: 24px; flex-shrink: 0; stroke: #2E7D32; }

.mensaje-envio-error {
  display: none;
  background: #FDECEA;
  border: 2px solid #B3261E;
  color: #7A1912;
  border-radius: 14px;
  padding: 16px;
  margin-top: 16px;
}
.mensaje-envio-error.visible { display: block; }

.panel-contacto {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 32px 24px;
  color: var(--blanco);
}
.panel-contacto h3 { color: var(--blanco); font-size: 20px; margin-bottom: 18px; }
.panel-contacto-cta { margin: 24px 0 4px; }
.panel-contacto .fila a { text-decoration: underline; }

/* Fila de ícono + texto: reutilizada por el panel de contacto y el pie */
.fila {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  color: #E4E4E4;
}
.fila svg { width: 22px; height: 22px; stroke: var(--amarillo); flex-shrink: 0; }

/* Íconos circulares de redes sociales: reutilizados por el panel de contacto y el pie */
.redes { margin-top: 22px; display: flex; gap: 12px; }
.redes a {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duracion-corta) var(--easing), border-color var(--duracion-corta) var(--easing), transform var(--duracion-corta) var(--easing);
}
.redes a:hover { background: var(--amarillo); border-color: var(--amarillo); transform: translateY(-2px); }
.redes a:hover svg { stroke: var(--negro); }
.redes svg { width: 20px; height: 20px; stroke: var(--blanco); transition: stroke var(--duracion-corta) var(--easing); }

.redes--pie { margin-top: 18px; }
.redes--pie a { width: 38px; height: 38px; border-color: rgba(255,255,255,0.18); }
.redes--pie svg { width: 17px; height: 17px; }

/* ---------- Footer ---------- */
.pie {
  background: var(--negro);
  color: #CFCFCF;
  padding: 56px 0 calc(28px + var(--alto-barra-movil));
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pie-grid {
  display: grid;
  gap: 40px;
  margin-bottom: 32px;
}
@media (min-width: 780px) { .pie-grid { grid-template-columns: repeat(3, 1fr); } }
.pie-marca { display: flex; align-items: center; gap: 12px; color: var(--blanco); font-weight: 700; margin-bottom: 14px; }
.pie-marca .escudo { width: 36px; height: auto; }
.pie h4 { color: var(--blanco); font-size: 15px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.05em; }
.pie ul li { margin-bottom: 10px; }
.pie a:hover { color: var(--amarillo); }

.fila--pie { color: #CFCFCF; font-size: 15px; margin-bottom: 14px; }
.fila--pie svg { width: 18px; height: 18px; stroke: var(--dorado); }
.fila--pie a:hover { color: var(--amarillo); }
.pie-inferior {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.pie-inferior .enlaces-legales { display: flex; gap: 18px; flex-wrap: wrap; }
.pie-inferior a:hover { color: var(--amarillo); }

@media (min-width: 900px) {
  .pie { padding-bottom: 40px; }
}

/* ---------- Barra fija inferior (móvil) ---------- */
.barra-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 450;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--negro);
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
}
.barra-movil a {
  min-height: var(--alto-barra-movil);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--blanco);
}
.barra-movil a svg { width: 20px; height: 20px; }
.barra-movil .accion-llamar { background: var(--amarillo); color: var(--negro); }
.barra-movil .accion-whatsapp { background: var(--whatsapp); }

@media (min-width: 1024px) { .barra-movil { display: none; } }

/* ---------- Botón flotante de WhatsApp (escritorio) ---------- */
.whatsapp-flotante {
  display: none;
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 460;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #18b482 0%, var(--whatsapp) 55%, #094c3a 100%);
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(13,122,95,0.42), 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.25s var(--easing), box-shadow 0.25s var(--easing);
}
.whatsapp-flotante:hover,
.whatsapp-flotante:focus-visible {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 20px 38px rgba(13,122,95,0.52), 0 6px 16px rgba(0,0,0,0.22);
}
.whatsapp-flotante svg {
  width: 30px;
  height: 30px;
  fill: var(--blanco);
  position: relative;
  z-index: 1;
}
.whatsapp-flotante-diadema,
.whatsapp-flotante-microfono {
  fill: none;
  stroke: var(--whatsapp);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.whatsapp-flotante-audifono { fill: var(--whatsapp); }
.whatsapp-flotante::before,
.whatsapp-flotante::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(13,122,95,0.55);
  animation: pulso-flotante 2.8s ease-out infinite;
}
.whatsapp-flotante::after { animation-delay: 1.4s; }
@media (min-width: 1024px) { .whatsapp-flotante { display: flex; } }

@keyframes pulso-flotante {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Revelado al hacer scroll ---------- */
.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duracion-larga) var(--easing), transform var(--duracion-larga) var(--easing);
}
.revelar.visible { opacity: 1; transform: translateY(0); }

/* ---------- Banner de cookies ---------- */
.banner-cookies {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(var(--alto-barra-movil) + 16px);
  z-index: 600;
  max-width: 720px;
  margin: 0 auto;
  background: var(--negro);
  color: #E8E8E8;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(140%);
  transition: transform var(--duracion-larga) var(--easing);
}
.banner-cookies.visible { transform: translateY(0); }
.banner-cookies p { font-size: 14px; }
.banner-cookies a { text-decoration: underline; color: var(--amarillo); }
.banner-cookies .acciones { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

@media (min-width: 700px) {
  .banner-cookies { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* En escritorio no hay barra fija inferior, así que el banner puede
   bajar más cerca del borde. Se deja espacio a la derecha para que
   no choque con el botón flotante de WhatsApp. */
@media (min-width: 1024px) {
  .banner-cookies { bottom: 16px; right: 110px; margin: 0; }
}

/* ---------- Páginas legales ---------- */
.legal-main { padding-top: calc(var(--alto-header) + 40px); padding-bottom: 80px; }
.legal-main .contenedor { max-width: 760px; }
.legal-main h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 8px; }
.legal-actualizacion { color: var(--gris-texto); font-size: 14px; margin-bottom: 32px; }
.legal-main h2 { font-size: 20px; margin-top: 34px; margin-bottom: 12px; }
.legal-main p, .legal-main li { color: var(--gris-texto); margin-bottom: 12px; }
.legal-main ul { list-style: disc; padding-left: 22px; }
.legal-main table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal-main th, .legal-main td { border: 1px solid #DADADA; padding: 10px 12px; text-align: left; }
.legal-main th { background: var(--gris-claro); }

/* En celular la tabla se apila como tarjetas por fila, para no forzar
   scroll horizontal ni columnas ilegibles a 375px. */
@media (max-width: 640px) {
  .legal-main table, .legal-main tbody, .legal-main tr, .legal-main td { display: block; width: 100%; }
  .legal-main thead { display: none; }
  .legal-main table { border: none; margin: 20px 0; }
  .legal-main tr {
    margin-bottom: 16px;
    border: 1px solid #DADADA;
    border-radius: 12px;
    overflow: hidden;
  }
  .legal-main td {
    border: none;
    border-bottom: 1px solid #ECECEC;
    padding: 12px 14px;
  }
  .legal-main td:last-child { border-bottom: none; }
  .legal-main td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--negro);
    margin-bottom: 4px;
  }
}
.marcador-pendiente {
  background: #FFF3CD;
  color: #7A5D00;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95em;
}

/* ---------- Utilidades responsive generales ---------- */
@media (min-width: 780px) {
  .seccion { padding: 100px 0; }
}

/* ---------- Reducción de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar, .hero-anim { opacity: 1; transform: none; }
  .whatsapp-flotante::before, .whatsapp-flotante::after { display: none; }
}