/* A&L Corredores de Seguros · base común de las betas
   Colores de marca tomados del logo oficial (07 logos negocios/A&L-corredor-de-seguros.jpg)
   y del manual de marca 2018:
   - Naranja Corredores (Pantone 172 C): #F24C24
   - Grafito A&L (Pantone 426 C): #222628
   - Verde A&L (Pantone 389 C, marca madre): #C4D62D
   Reglas de uso:
   - El naranja va en rellenos, marcas, iconos y texto grande. Nunca como texto pequeño:
     #F24C24 no llega a 4,5:1 ni sobre blanco (3,6) ni sobre grafito (4,24).
   - Texto pequeño naranja: --naranja-texto (claro #B5381A, oscuro #FF6A45).
   - Texto sobre botón naranja: --sobre-naranja #141618 (5,04:1).
   - El naranja nunca es fondo de página.
*/

:root{
  --naranja:#F24C24;
  --sobre-naranja:#141618;
  --grafito:#222628;
  --verde-al:#C4D62D;
  --radio:0px;
  --foco:3px solid var(--naranja);
  --salto-max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul[role=list],ol[role=list]{list-style:none;padding:0}
a{text-underline-offset:.18em}

/* Accesibilidad */
.saltar{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 18px;background:var(--grafito);color:#fff;font-weight:700;text-decoration:none}
.saltar:focus{top:12px}
:focus-visible{outline:var(--foco);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ic{width:1.35em;height:1.35em;flex:none;stroke-width:1.75}
.envoltura{width:100%;max-width:var(--salto-max);margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}

/* Dato pendiente de confirmar con el cliente: se ve a propósito en la beta */
.pend{background:repeating-linear-gradient(-45deg,rgb(242 76 36 / .14) 0 6px,transparent 6px 12px);outline:1px dashed rgb(242 76 36 / .7);outline-offset:1px;padding:0 .2em}

/* Hueco de foto: el manual pide fotografía en blanco y negro */
.foto{position:relative;display:grid;place-items:center;text-align:center;padding:24px;background:linear-gradient(160deg,#55595b,#2a2d2f);color:#e9eae7;font-size:.9rem;line-height:1.4}
.foto span{max-width:30ch;opacity:.9}

/* Menú móvil sin JS */
.menu-movil{display:none}
.menu-movil summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:48px;height:48px}
.menu-movil summary::-webkit-details-marker{display:none}
@media (max-width:900px){
  .nav-escritorio{display:none!important}
  .menu-movil{display:block;position:relative}
  .menu-movil[open] .menu-panel{display:flex}
  .menu-panel{display:none;position:absolute;right:0;top:56px;z-index:40;flex-direction:column;min-width:240px;padding:8px;box-shadow:0 18px 40px rgb(20 22 24 / .25)}
  .menu-panel a{padding:14px 12px;min-height:48px}
}

/* Aviso antes de abrir WhatsApp (checklist punto 5 y 24) */
dialog.aviso-wa{max-width:440px;width:calc(100% - 32px);border:0;padding:28px;background:#fff;color:#222628;box-shadow:0 30px 80px rgb(20 22 24 / .35)}
dialog.aviso-wa::backdrop{background:rgb(20 22 24 / .55)}
dialog.aviso-wa h2{font-size:1.25rem;line-height:1.25;margin-bottom:10px}
dialog.aviso-wa p{color:#4a4f52;margin-bottom:16px}
dialog.aviso-wa label{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px;cursor:pointer}
dialog.aviso-wa input[type=checkbox]{width:22px;height:22px;margin-top:2px;accent-color:var(--grafito);flex:none}
dialog.aviso-wa a{color:#B5381A}
.aviso-acciones{display:flex;gap:10px;flex-wrap:wrap}
.aviso-acciones button{min-height:48px;padding:0 20px;border:1px solid var(--grafito);background:transparent;cursor:pointer;font-weight:700}
.aviso-acciones button[data-wa-seguir]{background:var(--naranja);border-color:var(--naranja);color:var(--sobre-naranja)}
.aviso-acciones button[disabled]{opacity:.45;cursor:not-allowed}

/* Formularios: etiqueta arriba, error debajo */
.campo{display:grid;gap:6px}
.campo input,.campo select,.campo textarea{min-height:48px;padding:10px 12px;border:1.5px solid currentColor;background:transparent;border-radius:var(--radio)}
.campo .error{font-size:.875rem;font-weight:600;min-height:1.2em}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consentimiento{display:flex;gap:12px;align-items:flex-start}
.consentimiento input{width:22px;height:22px;margin-top:2px;flex:none}
.nota-beta{font-size:.85rem;padding:12px 14px;border-left:4px solid var(--naranja);background:rgb(242 76 36 / .08)}
[hidden]{display:none!important}

/* Movimiento: solo transiciones de estado, nada en bucle */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}