/* base-fix.css — cargar ANTES de styles.css */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, video, canvas, svg, picture { max-width: 100%; height: auto; display: block; }
main, section, article, aside, header, footer, nav, div { min-width: 0; }

/* Rojo accesible para texto pequeño (ratio ≥4.5:1 sobre #0a0a0a) */
:root {
  --red-brand: #c8102e;       /* mantener para bloques grandes y decoración */
  --red-text-sm: #ff4d63;     /* usar para texto <18px o <14px bold */
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: #0a0a0a; color: #fff; padding: 12px 16px;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; outline: 2px solid var(--red-text-sm); }

/* ============================================================
   Bloque 5 — Fixes responsive puntuales
   ============================================================ */

/* RSP-001 Contacto */
.contact-form, .contact-form * { min-width: 0; }
.contact-form { width: 100%; max-width: 100%; padding-inline: clamp(16px, 4vw, 32px); }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; max-width: 100%;
}
.contact-form textarea { resize: vertical; }

/* RSP-002 Nosotros */
.nos-marco, .nos-marco * { min-width: 0; }
.nos-marco__media { max-width: 100%; }
.nos-marco__media img { width: 100%; height: auto; }

/* RSP-004 Hero CTA — contenedor real del sitio: .hero__ctas */
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  max-width: 100%;
}
.hero__ctas > * { max-width: 100%; }

/* RSP-003 Menú móvil desplazable */
.mobile-menu, #mobile-menu, [data-mobile-menu] {
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* ============================================================
   Bloque 7 — Validación accesible del formulario
   ============================================================ */
.field-error { color: var(--red-text-sm); font-size: .85rem; margin-top: 4px; }
.form-summary { background: #2a0a0f; color: #fff; padding: 12px 16px; border-left: 4px solid var(--red-text-sm); margin-bottom: 16px; }
[aria-invalid="true"] { outline: 2px solid var(--red-text-sm); outline-offset: 2px; }

/* ============================================================
   Bloque 8 — Utilidad sr-only (valor real de contadores accesible)
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   Auditoría responsive — reglas globales SEGURAS
   (aplicadas sin verificación de navegador; las correcciones por
    selector concreto esperan reports/responsive/report.md)
   ============================================================ */

/* Criterio 4 — inputs ≥16px en todo viewport (red de seguridad; el origen
   .field controls se corrigió en styles.css 0.95rem→1rem). */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
select, textarea { font-size: max(16px, 1rem); }

/* 4.2 — medios embebidos y contenido ancho no deben desbordar */
iframe, embed, object { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; }
table { max-width: 100%; display: block; overflow-x: auto; }

/* 4.8 — banner de cookies fijo no debe ocupar >40% del alto en móvil (UX-004) */
.cookie-banner, [data-cookie-banner], #cookie-banner {
  max-height: 60vh;
  overflow-y: auto;
}
@media (max-width: 640px) {
  .cookie-banner, [data-cookie-banner], #cookie-banner {
    max-height: 40vh;
    font-size: .9rem;
  }
  .cookie-banner p, [data-cookie-banner] p { margin-block: .4em; }
}

/* 4.3 — titulares no desbordan por palabras/URLs largas en pantallas estrechas.
   break-word sólo parte tokens que no caben; el texto normal no se ve afectado. */
h1, h2, h3, .hero__title, .display, .headline {
  overflow-wrap: break-word;
}

/* ==========================================================================
   Menú móvil rediseñado — allianceprotect.com
   El selector incluye #mobile-menu (ID) a propósito: gana por especificidad
   sobre .mobile-menu de styles.css sin importar el orden de carga de los
   <link> (base-fix.css se carga antes que styles.css en el <head>).
   padding-top/right/left explícitos (no shorthand "padding"): así no se pisa
   el padding-bottom con safe-area-inset-bottom ya definido más arriba en
   este mismo archivo (regla RSP-003).
   ========================================================================== */

.mobile-menu, #mobile-menu, [data-mobile-menu] {
  background: #0a0a0a;
  color: #fff;
  /* El drawer (position:fixed, z-index:90) es hijo del <header id="navbar">
     (position:fixed, z-index:100) y pinta por encima de .navbar__inner
     dentro del stacking context del header — confirmado visualmente: el
     navbar queda tapado, no al revés. Por eso el padding-top NO necesita
     igualar la altura del navbar (--nav-h); solo el safe-area del notch/
     dynamic-island + un respiro fijo, como pedía el diseño (20px). */
  padding-top: calc(env(safe-area-inset-top) + 20px);
  padding-right: 24px;
  padding-left: 24px;
  font-family: 'Poppins', system-ui, sans-serif;
}

.mm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
}
.mm-logo { display: inline-flex; align-items: center; }
.mm-logo img { height: 44px; width: auto; display: block; }
.mm-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5);
}
.mm-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mm-close:hover, .mm-close:focus-visible {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
  outline: none;
}
.mm-close i { font-size: 16px; }

.mm-nav { display: flex; flex-direction: column; }

.mm-group-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
  margin: 20px 0 4px;
}
.mm-group-label:first-child { margin-top: 0; }

.mm-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  min-height: 44px;
  transition: color .15s;
}
.mm-link:hover, .mm-link:focus-visible {
  color: #c8102e;
  outline: none;
}
.mm-arrow {
  font-size: 13px;
  color: rgba(255,255,255,0.25);
  transition: color .15s, transform .15s;
}
.mm-link:hover .mm-arrow { color: #c8102e; transform: translate(2px, -2px); }

.mm-link.is-active {
  padding: 12px 14px;
  margin: 2px -14px;
  background: rgba(200,16,46,0.12);
  border-left: 3px solid #c8102e;
}
.mm-link.is-active .mm-arrow { color: rgba(255,255,255,0.5); }

.mm-badge {
  font-size: 9px;
  background: rgba(200,16,46,0.15);
  color: #ff6b7a;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.mm-contact {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.mm-contact-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  min-height: 44px;
  transition: border-color .15s, background .15s;
}
.mm-contact-btn:hover, .mm-contact-btn:focus-visible {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04);
  outline: none;
}
.mm-contact-btn:first-child i { color: #c8102e; font-size: 15px; }
.mm-contact-btn:last-child i { color: #25D366; font-size: 15px; }

.mm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding: 15px 20px;
  background: #c8102e;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  min-height: 44px;
  transition: background .15s, transform .15s;
}
.mm-cta:hover, .mm-cta:focus-visible {
  background: #a30d25;
  transform: translateY(-1px);
  outline: none;
}
.mm-cta i { font-size: 15px; }

.mm-social {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mm-social a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s;
}
.mm-social a:hover, .mm-social a:focus-visible {
  color: #fff;
  outline: none;
}
.mm-social i { font-size: 18px; }

/* Retirar estilos legacy que ya no aplican al nuevo markup */
.mobile-menu ol, .mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu a { text-decoration: none !important; }
.mobile-menu [class*="counter"], .mobile-menu [data-num] { display: none; }