/*
Theme Name: Asesores A&Z
Theme URI: https://asesoresaz.com
Author: iTouch Redes y Soluciones
Author URI: https://itouch.mx
Description: Tema a la medida para el despacho contable Asesores A&Z: portal de una sola página con anclas, formulario de contacto seguro, modo claro y oscuro con conmutador, y marcas visibles de los datos que el despacho aún no entrega. Sin dependencias externas.
Version: 1.0.6
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 8.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asesoresaz
Tags: one-column, custom-logo, custom-menu, custom-colors, translation-ready
*/

/* ===== REGLAS DE LA CASA (contrato DISENO §0) =====
   · Todo el color vive en variables --az- de :root; el modo oscuro
   SOLO redefine variables, nunca reglas de componente.
   · Mobile-first: base de 360 px y @media (min-width) 640 → 900 → 1200.
   · El estilo va por clase, nunca por id: el id es del JS.
   · Sin @import, sin url() externas, sin fuentes descargadas.
   · Los únicos !important están en «movimiento reducido». */


/* ===== 1. VARIABLES — modo claro completo ===== */
:root{
  /* Color de marca: NO cambia entre modos */
  --az-marino:#0B2545; --az-marino-oscuro:#071A33; --az-marino-medio:#1B3B6F;
  --az-oro:#C9A227; --az-oro-claro:#E3C35A;

  /* Color semántico */
  --az-fondo:#FFFFFF; --az-superficie:#FFFFFF; --az-superficie-2:#F6F8FB; --az-superficie-3:#EDF1F7;
  --az-texto:#12202F; --az-texto-2:#4A5A6B; --az-texto-3:#5C6C7E; --az-titulo:#0B2545;
  --az-enlace:#1B3B6F; --az-enlace-hover:#071A33;
  --az-borde:#DCE3EC; --az-borde-campo:#7C8CA0;
  --az-oro-texto:#82650D; --az-oro-borde:#82650D; --az-filete:#C9A227;
  --az-encabezado-fondo:#FFFFFF; --az-encabezado-borde:#DCE3EC;
  --az-velo:rgba(7,26,51,.55); --az-sombra-color:rgba(11,37,69,.14);
  --az-logo-placa:#0B2545; --az-logo-oro:#C9A227;

  /* Sobre azul marino: iguales en los dos modos */
  --az-texto-inverso:#E8EEF7; --az-texto-inverso-2:#C4D2E4; --az-oro-sobre-oscuro:#E3C35A;
  --az-borde-inverso:rgba(227,195,90,.35); --az-borde-campo-inverso:#E3C35A;

  /* Botón primario y anillo de foco */
  --az-boton-primario-fondo:#C9A227; --az-boton-primario-texto:#071A33; --az-boton-primario-hover:#E3C35A;
  --az-foco:#82650D; --az-foco-sobre-oscuro:#E3C35A; --az-foco-separador:#FFFFFF;

  /* Estados */
  --az-exito:#146B3C; --az-exito-fondo:#EAF6EE;
  --az-error:#A32019; --az-error-fondo:#FDECEA;
  --az-aviso:#8A5300; --az-aviso-fondo:#FFF6E5;

  /* Marca de dato pendiente (ámbar) */
  --az-pendiente-texto:#6B4B00; --az-pendiente-fondo:#FDF3D7;
  --az-pendiente-borde:#9A6B0A; --az-pendiente-acento:#B07D12;

  /* Sombras */
  --az-sombra-1:0 1px 2px rgba(11,37,69,.06),0 1px 3px rgba(11,37,69,.05);
  --az-sombra-2:0 6px 18px rgba(11,37,69,.08);
  --az-sombra-3:0 18px 44px rgba(11,37,69,.14);
  --az-sombra-encabezado:0 2px 12px rgba(11,37,69,.10);

  /* Flecha del <select>: dibujo en línea (data-URI), cero peticiones.
     Va como variable para que su color también quede aquí y el modo
     oscuro solo tenga que redefinirla. */
  --az-flecha-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%234A5A6B' stroke-width='2'/%3E%3C/svg%3E");

  /* Tipografía */
  --az-fuente-titulos:Georgia,'Times New Roman','Iowan Old Style',serif;
  --az-fuente-texto:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --az-fuente-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --az-t-h1:clamp(2.125rem,1.35rem + 3.4vw,3.75rem);
  --az-t-h2:clamp(1.625rem,1.15rem + 2.1vw,2.75rem);
  --az-t-h3:clamp(1.3rem,1.05rem + 1.1vw,1.75rem);
  --az-t-h4:clamp(1.125rem,1.02rem + 0.45vw,1.375rem);
  --az-t-h5:clamp(1rem,0.96rem + 0.2vw,1.125rem);
  --az-t-h6:clamp(0.9375rem,0.92rem + 0.1vw,1rem);
  --az-t-cuerpo:clamp(1rem,0.97rem + 0.14vw,1.125rem);
  --az-t-cuerpo-grande:clamp(1.0625rem,0.99rem + 0.34vw,1.3125rem);
  --az-t-pequeno:clamp(0.875rem,0.86rem + 0.07vw,0.9375rem);
  --az-t-micro:0.8125rem; --az-t-rotulo:0.875rem;
  --az-int-titulos:1.18; --az-int-cuerpo:1.6; --az-int-compacto:1.35;
  --az-peso-normal:400; --az-peso-medio:500; --az-peso-fuerte:600; --az-peso-negro:700;
  --az-esp-titulos:-0.01em; --az-esp-rotulo:0.12em;

  /* Espaciado (escala de 4 px) */
  --az-e1:0.25rem; --az-e2:0.5rem; --az-e3:0.75rem; --az-e4:1rem; --az-e5:1.5rem;
  --az-e6:2rem; --az-e7:3rem; --az-e8:4rem; --az-e9:6rem; --az-e10:8rem;
  --az-seccion-y:clamp(3.5rem,7vw,7rem);
  --az-pad-lateral:clamp(1rem,4vw,2rem);
  --az-hueco-tarjetas:clamp(1rem,2.5vw,2rem);

  /* Radios */
  --az-radio-xs:4px; --az-radio-s:8px; --az-radio-m:12px; --az-radio-g:18px; --az-radio-pastilla:999px;

  /* Anchos */
  --az-ancho:1180px; --az-ancho-estrecho:760px; --az-ancho-lectura:68ch; --az-ancho-panel:360px;

  /* Movimiento (y sus atajos, para no repetir duración + curva en cada transición) */
  --az-dur-rapida:120ms; --az-dur-normal:220ms; --az-dur-lenta:420ms;
  --az-curva:cubic-bezier(.22,.61,.36,1); --az-curva-salida:cubic-bezier(.4,0,1,1);
  --az-mov-rapida:var(--az-dur-rapida) var(--az-curva);
  --az-mov-normal:var(--az-dur-normal) var(--az-curva);
  --az-mov-lenta:var(--az-dur-lenta) var(--az-curva);

  /* Capas */
  --az-capa-base:1; --az-capa-elevada:10; --az-capa-velo:80; --az-capa-menu:90;
  --az-capa-encabezado:100; --az-capa-flotante:300; --az-capa-panel:400; --az-capa-salto:500;

  /* Alto del encabezado fijo: el <body> reserva ese espacio arriba */
  /* Alto de DISEÑO del encabezado: lo usa SOLO .encabezado-interior como
     min-height. Es un valor fijo a propósito. */
  --az-alto-encabezado:64px;
  /* Alto REAL, que main.js mide y reescribe. Lo usa todo lo que necesita
     librar el encabezado fijo (hueco del body, anclas, menú móvil).
     Tiene que ser una variable APARTE: si el JS reescribiera la de arriba,
     el min-height del propio encabezado crecería, el observador volvería a
     medir, crecería otra vez... y el encabezado terminaba tapando la pantalla. */
  --az-alto-encabezado-real:var(--az-alto-encabezado);

  /* Puntos de quiebre. DOCUMENTALES: @media no acepta var(), en las
     consultas van los píxeles escritos. */
  --az-bp-xs:360px; --az-bp-sm:640px; --az-bp-md:900px; --az-bp-lg:1200px;
}


/* ===== 2. MODO OSCURO — solo se redefinen variables de color =====
   Los dos bloques llevan EXACTAMENTE la misma lista: uno atiende
   la preferencia del sistema mientras el visitante no haya pedido
   modo claro, y el otro su elección guardada. Cualquier cambio se
   aplica en los dos. html[data-tema="claro"] hereda :root. */
@media (prefers-color-scheme:dark){
  html:not([data-tema="claro"]){
    --az-fondo:#0A1524; --az-superficie:#0F1E33; --az-superficie-2:#12233C; --az-superficie-3:#14263D;
    --az-texto:#E8EEF7; --az-texto-2:#A9BBD0; --az-texto-3:#8FA3BC; --az-titulo:#E8EEF7;
    --az-enlace:#9CC0EC; --az-enlace-hover:#C9DCF6;
    --az-borde:#24374F; --az-borde-campo:#5A7AA8;
    --az-oro-texto:#E3C35A; --az-oro-borde:#C9A227; --az-filete:#E3C35A;
    --az-encabezado-fondo:#0C1A2C; --az-encabezado-borde:#22344B;
    --az-velo:rgba(0,0,0,.65); --az-sombra-color:rgba(0,0,0,.6);
    --az-logo-placa:#10233D; --az-logo-oro:#E3C35A;
    --az-boton-primario-fondo:#E3C35A; --az-boton-primario-texto:#071A33; --az-boton-primario-hover:#F0D274;
    --az-foco:#E3C35A; --az-foco-sobre-oscuro:#E3C35A; --az-foco-separador:#0A1524;
    --az-exito:#6FCF97; --az-exito-fondo:#122A22;
    --az-error:#FFA79E; --az-error-fondo:#2B1614;
    --az-aviso:#F0C271; --az-aviso-fondo:#2B2110;
    --az-pendiente-texto:#FFD98A; --az-pendiente-fondo:#3A2C0C;
    --az-pendiente-borde:#C79A3A; --az-pendiente-acento:#E0B25A;
    --az-sombra-1:0 1px 2px rgba(0,0,0,.5);
    --az-sombra-2:0 8px 22px rgba(0,0,0,.55);
    --az-sombra-3:0 20px 50px rgba(0,0,0,.65);
    --az-sombra-encabezado:0 2px 12px rgba(0,0,0,.55);
    --az-flecha-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23A9BBD0' stroke-width='2'/%3E%3C/svg%3E");
  }
}
html[data-tema="oscuro"]{
  --az-fondo:#0A1524; --az-superficie:#0F1E33; --az-superficie-2:#12233C; --az-superficie-3:#14263D;
  --az-texto:#E8EEF7; --az-texto-2:#A9BBD0; --az-texto-3:#8FA3BC; --az-titulo:#E8EEF7;
  --az-enlace:#9CC0EC; --az-enlace-hover:#C9DCF6;
  --az-borde:#24374F; --az-borde-campo:#5A7AA8;
  --az-oro-texto:#E3C35A; --az-oro-borde:#C9A227; --az-filete:#E3C35A;
  --az-encabezado-fondo:#0C1A2C; --az-encabezado-borde:#22344B;
  --az-velo:rgba(0,0,0,.65); --az-sombra-color:rgba(0,0,0,.6);
  --az-logo-placa:#10233D; --az-logo-oro:#E3C35A;
  --az-boton-primario-fondo:#E3C35A; --az-boton-primario-texto:#071A33; --az-boton-primario-hover:#F0D274;
  --az-foco:#E3C35A; --az-foco-sobre-oscuro:#E3C35A; --az-foco-separador:#0A1524;
  --az-exito:#6FCF97; --az-exito-fondo:#122A22;
  --az-error:#FFA79E; --az-error-fondo:#2B1614;
  --az-aviso:#F0C271; --az-aviso-fondo:#2B2110;
  --az-pendiente-texto:#FFD98A; --az-pendiente-fondo:#3A2C0C;
  --az-pendiente-borde:#C79A3A; --az-pendiente-acento:#E0B25A;
  --az-sombra-1:0 1px 2px rgba(0,0,0,.5);
  --az-sombra-2:0 8px 22px rgba(0,0,0,.55);
  --az-sombra-3:0 20px 50px rgba(0,0,0,.65);
  --az-sombra-encabezado:0 2px 12px rgba(0,0,0,.55);
  --az-flecha-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23A9BBD0' stroke-width='2'/%3E%3C/svg%3E");
}


/* ===== 3. REINICIO LIGERO ===== */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
/* Desplazamiento suave solo para quien no pidió menos movimiento */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0;padding-top:var(--az-alto-encabezado-real); /* hueco del encabezado fijo */
  background:var(--az-fondo);color:var(--az-texto);
  font-family:var(--az-fuente-texto);font-size:var(--az-t-cuerpo);line-height:var(--az-int-cuerpo);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* El menú de celular y el panel de pendientes bloquean el desplazamiento */
/* El menú móvil sí ocupa toda la pantalla y debe congelar el fondo. El panel de
   pendientes solo es hoja inferior por debajo de 900px: en escritorio es una
   tarjeta lateral y congelar la página entera nada más estorbaba. */
body.menu-abierto{overflow:hidden}
@media (max-width:899px){ body.panel-abierto{overflow:hidden} }
[hidden]{display:none}
img,svg,video{max-width:100%}
img{height:auto}
figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;padding:0}
a{color:var(--az-enlace);text-underline-offset:.18em;text-decoration-thickness:1px;transition:color var(--az-mov-rapida)}
a:hover,a:focus{color:var(--az-enlace-hover)}
hr{height:1px;border:0;background:var(--az-borde);margin:var(--az-e6) 0}
table{border-collapse:collapse}
::placeholder{color:var(--az-texto-3);opacity:1}
/* El <main> es destino de «Saltar al contenido»: que no lo tape el encabezado */
main{display:block;scroll-margin-top:calc(var(--az-alto-encabezado-real) + var(--az-e4))}


/* ===== 4. TIPOGRAFÍA ===== */
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--az-e3);
  font-family:var(--az-fuente-titulos);font-weight:var(--az-peso-negro);
  line-height:var(--az-int-titulos);letter-spacing:var(--az-esp-titulos);
  color:var(--az-titulo);text-wrap:balance;
}
h1{font-size:var(--az-t-h1)}
h2{font-size:var(--az-t-h2)}
h3{font-size:var(--az-t-h3);line-height:1.22}
h4{font-size:var(--az-t-h4);line-height:1.25}
/* h5 y h6 van en sans a propósito: a ese tamaño la serif pierde legibilidad */
h5,h6{
  font-family:var(--az-fuente-texto);font-weight:var(--az-peso-fuerte);
  line-height:var(--az-int-compacto);letter-spacing:normal;
}
h5{font-size:var(--az-t-h5)}
h6{font-size:var(--az-t-h6)}
p{margin:0 0 var(--az-e4);max-width:var(--az-ancho-lectura);text-wrap:pretty}
strong,b{font-weight:var(--az-peso-fuerte)}
blockquote{margin:var(--az-e5) 0;padding-left:var(--az-e4);border-left:3px solid var(--az-filete);color:var(--az-texto-2)}
/* Párrafos cuyo ancho ya lo pone la tarjeta, la columna o la pastilla */
.tarjeta-servicio-texto,.tarjeta-mvv-cuerpo p,.lista-valores li,.paso-texto,.formulario-nota,.bloque-portal-texto,
.franja-confianza-dato,.franja-confianza-texto,.titulo-seccion-bajada,.panel-pendientes-intro,
.panel-pendientes-nota,.pie-legal-datos,.pie-copy,.pie-cierre-interior p,.error-404-texto,
.campo-error,.form-aviso,.etiqueta-proximamente,.rotulo{max-width:none}


/* ===== 5. UTILIDADES TRANSVERSALES ===== */
.contenedor{width:100%;max-width:var(--az-ancho);margin-inline:auto;padding-inline:var(--az-pad-lateral)}
.contenedor-estrecho{max-width:var(--az-ancho-estrecho)}
/* Oculto a la vista, presente para los lectores de pantalla */
.solo-lectores,.screen-reader-text{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%);
}
/* Aparición al entrar en pantalla; el JS agrega .visible */
.animar{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--az-mov-lenta),transform var(--az-mov-lenta);
  transition-delay:var(--az-retardo,0ms);
}
.animar.visible{opacity:1;transform:none}
/* Red de seguridad: sin JavaScript el contenido nace visible */
@media (scripting:none){ .animar{opacity:1;transform:none} }
/* El filete dorado: la firma visual de la marca */
.filete-dorado{
  display:block;flex:0 0 auto;width:56px;height:3px;margin-block:var(--az-e4);
  background:var(--az-filete);border-radius:var(--az-radio-xs);
}
.filete-dorado-ancho{width:100%;margin-block:0;border-radius:0}
/* Ojo de aguja dorado sobre los títulos y sobre los rótulos de dato */
.rotulo{
  display:block;margin:0 0 var(--az-e2);
  font-family:var(--az-fuente-texto);font-size:var(--az-t-rotulo);font-weight:var(--az-peso-negro);
  line-height:var(--az-int-compacto);letter-spacing:var(--az-esp-rotulo);text-transform:uppercase;
  color:var(--az-oro-texto);
}
/* Íconos SVG en línea: heredan color y tamaño del texto */
.icono{
  width:1.25em;height:1.25em;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;
}
.icono-s{width:1em;height:1em}
.icono-g{width:1.75em;height:1.75em}
/* <em> dorado dentro de un título: acento de color, sin cursiva */
.acento-dorado{font-style:normal;color:var(--az-oro-sobre-oscuro)}
/* Velo tras el menú de celular y el panel */
.velo:not([hidden]){display:block}
.velo{
  position:fixed;inset:0;z-index:var(--az-capa-velo);background:var(--az-velo);
  opacity:0;transition:opacity var(--az-mov-normal);
}
.velo.abierto{opacity:1}
/* Cajas centradas que se repiten en todo el sitio (íconos, botones redondos) */
.logotipo-placa,.boton-tema,.boton-menu,.boton-tema-icono,.credencial-icono,.adicional-icono,
.hueco-foto-icono,.franja-confianza-icono,.tarjeta-servicio-icono,.tarjeta-mvv-icono,
.bloque-portal-icono,.dato-contacto-icono,.paso-numero,.panel-pendientes-cerrar,
.boton-flotante{display:inline-flex;align-items:center;justify-content:center}

/* Contexto de color invertido: reasigna los tokens para los bloques azul
   marino, así cualquier componente que caiga dentro se adapta solo. */
.sobre-oscuro{
  --az-texto:var(--az-texto-inverso); --az-texto-2:var(--az-texto-inverso-2);
  --az-texto-3:var(--az-texto-inverso-2); --az-titulo:var(--az-texto-inverso);
  --az-enlace:var(--az-oro-sobre-oscuro); --az-enlace-hover:#FFFFFF;
  --az-oro-texto:var(--az-oro-sobre-oscuro);
  --az-borde:var(--az-borde-inverso); --az-borde-campo:var(--az-borde-campo-inverso);
  --az-superficie:rgba(255,255,255,.06); --az-superficie-2:rgba(255,255,255,.09);
  --az-superficie-3:rgba(255,255,255,.13);
  --az-foco:var(--az-foco-sobre-oscuro); --az-foco-separador:var(--az-marino-oscuro);
  color:var(--az-texto-inverso);background:var(--az-marino);
}


/* ===== 6. FOCO VISIBLE — anillo dorado en los dos modos ===== */
:focus-visible{outline:3px solid var(--az-foco);outline-offset:2px;border-radius:var(--az-radio-xs)}
/* El botón primario ya es dorado: lleva anillo doble con un aro de
   separación para que no se confunda con su propio relleno. */
/* Se conserva un outline REAL además de la sombra: en el modo de alto contraste
   de Windows los box-shadow se descartan y el botón se quedaba sin ninguna
   señal de foco. El outline transparente lo pinta el sistema con su propio color. */
.boton-primario:focus-visible{outline:3px solid transparent;outline-offset:3px;box-shadow:0 0 0 2px var(--az-foco-separador),0 0 0 5px var(--az-foco)}
@media (forced-colors:active){
  .boton-primario:focus-visible{outline:3px solid Highlight;outline-offset:3px}
}
.sobre-oscuro :focus-visible{outline-color:var(--az-foco-sobre-oscuro)}


/* ===== 7. CLASES OBLIGATORIAS DE WORDPRESS =====
   Marcado que genera WordPress (editor, galerías, listados). */
.alignleft{float:left;margin:var(--az-e2) var(--az-e5) var(--az-e4) 0}
.alignright{float:right;margin:var(--az-e2) 0 var(--az-e4) var(--az-e5)}
.aligncenter{display:block;margin-inline:auto;margin-bottom:var(--az-e4)}
.wp-caption{max-width:100%;margin-bottom:var(--az-e5)}
.wp-caption img{border-radius:var(--az-radio-s)}
.wp-caption-text,.gallery-caption{margin:var(--az-e2) 0 0;font-size:var(--az-t-pequeno);color:var(--az-texto-2);text-align:center}
/* Entrada fijada y entrada del autor: se marcan con el filete dorado */
.sticky,.bypostauthor{padding-left:var(--az-e4);border-left:3px solid var(--az-filete)}
.screen-reader-text:focus{
  position:static;width:auto;height:auto;margin:0;padding:var(--az-e2) var(--az-e3);
  overflow:visible;clip-path:none;background:var(--az-superficie-2);color:var(--az-texto);
}


/* ===== 8. BOTONES ===== */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--az-e2);
  min-height:44px;padding:.75rem 1.4rem;
  border:1.5px solid transparent;border-radius:var(--az-radio-s);
  font-family:var(--az-fuente-texto);font-size:var(--az-t-cuerpo);
  font-weight:var(--az-peso-fuerte);line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color var(--az-mov-normal),color var(--az-mov-normal),
    border-color var(--az-mov-normal),box-shadow var(--az-mov-normal),transform var(--az-mov-normal);
}
.boton-primario{background:var(--az-boton-primario-fondo);color:var(--az-boton-primario-texto);border-color:var(--az-oro-borde)}
.boton-primario:hover,.boton-primario:focus-visible{background:var(--az-boton-primario-hover);color:var(--az-boton-primario-texto);box-shadow:var(--az-sombra-2)}
.boton-primario:active{transform:translateY(1px)}
.boton-secundario{background:transparent;color:var(--az-titulo);border-color:var(--az-titulo)}
.boton-secundario:hover,.boton-secundario:focus-visible{background:var(--az-superficie-3);color:var(--az-titulo)}
/* Sobre azul marino el contorno del secundario pasa a dorado */
.sobre-oscuro .boton-secundario{color:var(--az-texto-inverso);border-color:var(--az-oro-sobre-oscuro)}
.sobre-oscuro .boton-secundario:hover,.sobre-oscuro .boton-secundario:focus-visible{color:var(--az-texto-inverso)}
.boton-inhabilitado{opacity:.55;cursor:not-allowed}
.boton-inhabilitado:hover{background:transparent;box-shadow:none}
/* Girador del botón mientras se envía el formulario */
.boton-girador{
  display:none;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:var(--az-radio-pastilla);animation:asesoresaz-giro 700ms linear infinite;
}
.cargando{opacity:.75;pointer-events:none}
.cargando .boton-girador{display:inline-block}
@keyframes asesoresaz-giro{ to{transform:rotate(360deg)} }


/* ===== 9. SALTAR AL CONTENIDO ===== */
.saltar-contenido{
  position:fixed;top:-100%;left:0;z-index:var(--az-capa-salto);
  padding:var(--az-e3) var(--az-e4);background:var(--az-oro);color:var(--az-marino-oscuro);
  font-weight:var(--az-peso-fuerte);text-decoration:none;border-radius:0 0 var(--az-radio-s) 0;
}
.saltar-contenido:focus-visible{top:0;color:var(--az-marino-oscuro)}


/* ===== 10. ENCABEZADO, NAVEGACIÓN Y CONMUTADORES ===== */
.encabezado{
  position:fixed;inset-inline:0;top:0;z-index:var(--az-capa-encabezado);
  background:var(--az-encabezado-fondo);border-bottom:1px solid var(--az-encabezado-borde);
  transition:box-shadow var(--az-mov-normal);
}
/* Clase que agrega el JS al desplazar más de 8 px */
.encabezado.desplazado{box-shadow:var(--az-sombra-encabezado)}
.encabezado-interior{display:flex;align-items:center;gap:var(--az-e3);min-height:var(--az-alto-encabezado)}
.encabezado-acciones{display:flex;align-items:center;gap:var(--az-e2);margin-inline-start:auto}
/* En celular el botón de cita vive dentro del menú desplegado */
.encabezado-cta{display:none}

/* --- Logotipo --- */
/* .marca envuelve el enlace del logotipo y la marca LOGO PENDIENTE. Van como
   hermanos, no anidados, para que el chip no crezca el alto del encabezado. */
.marca{display:flex;align-items:center;gap:var(--az-e2);min-width:0}
.logotipo{display:flex;align-items:center;gap:var(--az-e3);color:inherit;text-decoration:none;min-width:0}
.logotipo-placa{width:40px;height:40px;flex:0 0 auto}
.logotipo-svg{width:100%;height:100%}
/* Logotipo REAL del despacho: WordPress lo entrega en tamaño completo, así que
   hay que atarlo al mismo alto que el monograma o revienta el encabezado fijo. */
.logotipo img,.custom-logo{max-height:40px;width:auto;height:auto;object-fit:contain}
.custom-logo-link{display:inline-flex;align-items:center}
/* Por debajo de 400 px queda solo la placa: el nombre no cabe sin apretarse */
.logotipo-texto{display:none;flex-direction:column;line-height:var(--az-int-compacto)}
.logotipo-nombre{
  font-family:var(--az-fuente-titulos);font-size:var(--az-t-h5);font-weight:var(--az-peso-negro);
  letter-spacing:.01em;color:var(--az-titulo);
}
.logotipo-amperson{color:var(--az-oro-texto)}
.logotipo-lema{
  font-size:var(--az-t-micro);font-weight:var(--az-peso-fuerte);letter-spacing:var(--az-esp-rotulo);
  text-transform:uppercase;color:var(--az-texto-2);
}
@media (min-width:400px){ .logotipo-texto{display:flex} }
/* El lema arrastraba el alto del encabezado en celular: aparece desde tableta.
   Solo en el encabezado: en el pie hay espacio de sobra y ahí sí se muestra. */
.marca .logotipo-lema{display:none}
@media (min-width:900px){ .marca .logotipo-lema{display:block} }

/* --- Navegación: en celular es un panel desplegable bajo el encabezado --- */
.nav-principal{
  position:fixed;inset-inline:0;top:var(--az-alto-encabezado-real);z-index:var(--az-capa-menu);
  max-height:calc(100vh - var(--az-alto-encabezado-real));overflow-y:auto;overscroll-behavior:contain;
  padding:var(--az-e2) var(--az-pad-lateral) var(--az-e5);
  background:var(--az-superficie);border-bottom:1px solid var(--az-borde);box-shadow:var(--az-sombra-3);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--az-dur-normal) var(--az-curva-salida),
    transform var(--az-dur-normal) var(--az-curva-salida),visibility 0s linear var(--az-dur-normal);
}
/* Clase que agrega el JS al desplegar el menú */
.nav-principal.abierto{
  opacity:1;visibility:visible;transform:none;
  transition:opacity var(--az-mov-normal),transform var(--az-mov-normal),visibility 0s;
}
.nav-lista,.lista-adicionales,.lista-credenciales,.datos-contacto,.rejilla-pasos,
.pie-lista,.migas-lista,.panel-pendientes-lista{margin:0;padding:0;list-style:none}
.nav-enlace{
  position:relative;display:flex;align-items:center;min-height:48px;padding-block:var(--az-e2);
  color:var(--az-texto-2);font-weight:var(--az-peso-fuerte);text-decoration:none;
  transition:color var(--az-mov-rapida);
}
.nav-elemento + .nav-elemento .nav-enlace{border-top:1px solid var(--az-borde)}
/* Filete dorado que crece bajo el enlace */
.nav-enlace::after{
  content:"";position:absolute;inset-inline:0;bottom:6px;height:2px;background:var(--az-filete);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--az-mov-normal);
}
.nav-enlace:hover,.nav-enlace:focus-visible,.nav-enlace-activo{color:var(--az-titulo)}
.nav-enlace:hover::after,.nav-enlace:focus-visible::after,.nav-enlace-activo::after{transform:scaleX(1)}
.nav-cta{display:inline-flex;width:100%;margin-top:var(--az-e4)}

/* --- Conmutador de tema y botón de menú --- */
.boton-tema,.boton-menu{
  width:44px;height:44px;flex:0 0 auto;
  /* --az-borde-campo, no --az-borde: el contorno de un CONTROL tiene que llegar
     a 3:1 (WCAG 1.4.11) y el borde suave de las tarjetas se quedaba en 1.3:1,
     invisible para muchas personas. */
  border:1px solid var(--az-borde-campo);border-radius:var(--az-radio-pastilla);
  background:transparent;color:var(--az-texto-2);cursor:pointer;
  transition:background-color var(--az-mov-rapida),color var(--az-mov-rapida);
}
.boton-tema:hover,.boton-menu:hover{background:var(--az-superficie-3);color:var(--az-oro-texto)}
/* Se muestra el ícono de la acción que ocurrirá al pulsar: en claro la luna,
   en oscuro el sol. Lo decide el CSS; el JS no toca los íconos. */
.boton-tema-sol{display:none}
.boton-tema-luna{display:inline-flex}
@media (prefers-color-scheme:dark){
  html:not([data-tema="claro"]) .boton-tema-sol{display:inline-flex}
  html:not([data-tema="claro"]) .boton-tema-luna{display:none}
}
html[data-tema="oscuro"] .boton-tema-sol{display:inline-flex}
html[data-tema="oscuro"] .boton-tema-luna{display:none}
html[data-tema="claro"] .boton-tema-sol{display:none}
html[data-tema="claro"] .boton-tema-luna{display:inline-flex}
.boton-menu-barras{display:flex;flex-direction:column;justify-content:center;gap:5px;width:20px;height:16px}
.boton-menu-barras span{
  display:block;width:100%;height:2px;background:currentColor;border-radius:var(--az-radio-xs);
  transition:transform var(--az-mov-normal),opacity var(--az-mov-rapida);
}
/* Estado abierto: la única fuente de verdad es aria-expanded, que es lo que
   leen las tecnologías de asistencia. Se selecciona por clase, no por id. */
.boton-menu[aria-expanded="true"] .boton-menu-barras span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.boton-menu[aria-expanded="true"] .boton-menu-barras span:nth-child(2){opacity:0}
.boton-menu[aria-expanded="true"] .boton-menu-barras span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Encabezado en tableta y escritorio --- */
@media (min-width:900px){
  :root{--az-alto-encabezado:76px}
  .encabezado-cta{display:inline-flex}
  .boton-menu,.nav-cta{display:none}
  .nav-principal{
    position:static;max-height:none;overflow:visible;margin-inline-start:auto;padding:0;
    background:none;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;
  }
  .nav-lista{display:flex;align-items:center;gap:var(--az-e5)}
  .nav-enlace{min-height:44px;padding-block:var(--az-e3)}
  .nav-elemento + .nav-elemento .nav-enlace{border-top:0}
  .encabezado-acciones{margin-inline-start:var(--az-e4)}
  .logotipo-placa{width:44px;height:44px}
  .logotipo img,.custom-logo{max-height:44px}
}


/* ===== 11. SECCIONES Y TÍTULOS DE SECCIÓN ===== */
.seccion{
  padding-block:var(--az-seccion-y);background:var(--az-fondo);
  /* El encabezado fijo no debe tapar el título al saltar a un ancla */
  scroll-margin-top:calc(var(--az-alto-encabezado-real) + var(--az-e5));
}
.seccion-alterna{background:var(--az-superficie-2)}
/* Siempre acompañada de .sobre-oscuro, que pone los tokens invertidos */
.seccion-oscura{background:var(--az-marino-oscuro)}
.seccion-compacta{padding-block:calc(var(--az-seccion-y) * .6)}
.titulo-seccion{max-width:720px;margin-inline:auto;margin-bottom:var(--az-e7);text-align:center}
.titulo-seccion .filete-dorado{margin-inline:auto}
.titulo-seccion-texto{margin-bottom:0}
.titulo-seccion-bajada{margin-bottom:0;font-size:var(--az-t-cuerpo-grande);line-height:1.55;color:var(--az-texto-2)}
/* Variante alineada a la izquierda (sección Nosotros) */
.titulo-seccion-izquierda{max-width:none;margin-inline:0;text-align:left}
.titulo-seccion-izquierda .filete-dorado{margin-inline:0}


/* ===== 12. PORTADA Y FRANJA DE CONFIANZA ===== */
.portada{
  position:relative;overflow:hidden;padding-block:clamp(4rem,10vw,8rem) 0;
  background:linear-gradient(160deg,var(--az-marino) 0%,var(--az-marino-oscuro) 68%,var(--az-marino) 100%);
  scroll-margin-top:var(--az-alto-encabezado-real);
}
/* Adorno puro: resplandor dorado muy tenue arriba a la derecha. No transmite
   información y no recibe el puntero. */
.portada::before{
  content:"";position:absolute;pointer-events:none;top:-30%;right:-15%;width:70%;height:90%;
  background:radial-gradient(circle at center,rgba(227,195,90,.16) 0%,rgba(227,195,90,0) 65%);
}
.portada-interior{
  position:relative;z-index:var(--az-capa-base);max-width:860px;
  padding-bottom:var(--az-e8);text-align:center;
}
.portada-interior .rotulo{color:var(--az-oro-sobre-oscuro)}
.portada-titulo{margin-bottom:var(--az-e5);color:var(--az-texto-inverso)}
.portada-bajada{
  max-width:62ch;margin-inline:auto;font-size:var(--az-t-cuerpo-grande);
  line-height:1.55;color:var(--az-texto-inverso-2);
}
.portada-acciones{display:flex;flex-direction:column;gap:var(--az-e3);margin-top:var(--az-e6)}
.franja-confianza{
  position:relative;z-index:var(--az-capa-elevada);padding-block:var(--az-e5);
  background:rgba(255,255,255,.06);border-top:1px solid var(--az-borde-inverso);
}
.franja-confianza-lista{display:grid;gap:var(--az-e5)}
.franja-confianza-item{display:flex;flex-direction:column;align-items:center;gap:var(--az-e2);text-align:center}
.franja-confianza-icono{
  width:44px;height:44px;border:1.5px solid var(--az-borde-inverso);
  border-radius:var(--az-radio-pastilla);color:var(--az-oro-sobre-oscuro);
}
.franja-confianza-dato{
  margin:0;font-size:var(--az-t-h5);font-weight:var(--az-peso-negro);
  line-height:var(--az-int-compacto);color:var(--az-texto-inverso);
}
.franja-confianza-texto{margin:0;font-size:var(--az-t-pequeno);color:var(--az-texto-inverso-2)}
@media (min-width:640px){
  .portada-acciones{flex-direction:row;justify-content:center}
  .franja-confianza-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Separadores verticales dorados entre columnas */
  .franja-confianza-item + .franja-confianza-item{padding-left:var(--az-e5);border-left:1px solid var(--az-borde-inverso)}
}
@media (min-width:1200px){ .portada{padding-block:8rem 0} }


/* ===== 13. SERVICIOS Y SERVICIOS ADICIONALES ===== */
.rejilla-servicios,.rejilla-mvv{display:grid;gap:var(--az-hueco-tarjetas)}
.tarjeta-servicio{
  position:relative;overflow:hidden;padding:var(--az-e6);
  background:var(--az-superficie);border:1px solid var(--az-borde);border-radius:var(--az-radio-m);
  box-shadow:var(--az-sombra-1);
  transition:transform var(--az-mov-normal),box-shadow var(--az-mov-normal);
}
/* Filete dorado superior que crece con el puntero o con el foco */
.tarjeta-servicio::before{
  content:"";position:absolute;top:0;left:0;width:40px;height:3px;
  background:var(--az-filete);transition:width var(--az-mov-normal);
}
.tarjeta-servicio:hover,.tarjeta-servicio:focus-within{transform:translateY(-3px);box-shadow:var(--az-sombra-3)}
.tarjeta-servicio:hover::before,.tarjeta-servicio:focus-within::before{width:100%}
.tarjeta-servicio-icono{
  width:52px;height:52px;margin-bottom:var(--az-e4);background:var(--az-marino);
  border-radius:var(--az-radio-s);color:var(--az-oro-claro);
}
.tarjeta-servicio-titulo{margin-bottom:var(--az-e2)}
.tarjeta-servicio-texto{margin:0;color:var(--az-texto-2)}
/* Más compacta que las tarjetas: sin fondo ni sombra, solo el filete inferior */
.lista-adicionales{display:grid;gap:var(--az-e3) var(--az-e5)}
.adicional{display:flex;align-items:flex-start;gap:var(--az-e3);padding-block:var(--az-e3);border-bottom:1px solid var(--az-borde)}
.adicional-icono{flex:0 0 auto;margin-top:2px;color:var(--az-oro-texto);transition:color var(--az-mov-rapida)}
.adicional-icono .icono{width:20px;height:20px}
.adicional:hover .adicional-icono{color:var(--az-enlace)}
.adicional-texto{display:flex;flex-direction:column;gap:2px;font-weight:var(--az-peso-medio);color:var(--az-texto)}
.adicional-texto span{font-size:var(--az-t-pequeno);font-weight:var(--az-peso-normal);color:var(--az-texto-2)}
@media (min-width:640px){
  .rejilla-servicios,.rejilla-mvv,.lista-adicionales{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .rejilla-servicios,.rejilla-mvv,.lista-adicionales{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ===== 14. NOSOTROS: CREDENCIALES, HUECO DE FOTOS Y MISIÓN/VISIÓN/VALORES ===== */
.bloque-nosotros{display:grid;gap:var(--az-e7);align-items:start;margin-bottom:var(--az-e8)}
.bloque-nosotros-texto h3{margin-top:var(--az-e5)}
.bloque-nosotros-equipo{min-width:0}
.lista-credenciales{margin-top:var(--az-e5)}
.credencial{
  display:flex;align-items:flex-start;gap:var(--az-e3);padding-block:var(--az-e3);
  border-top:1px solid var(--az-borde);font-weight:var(--az-peso-medio);
}
.credencial-icono{flex:0 0 auto;margin-top:2px;color:var(--az-oro-texto)}
/* Hueco explícito donde irán las fotografías del equipo */
.hueco-foto{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--az-e3);
  aspect-ratio:4/3;padding:var(--az-e5);background:var(--az-superficie-3);
  border:2px dashed var(--az-pendiente-borde);border-radius:var(--az-radio-m);text-align:center;
}
.hueco-foto-icono{color:var(--az-texto-3);opacity:.45}
.hueco-foto-icono .icono{width:40px;height:40px}
.hueco-foto-leyenda{display:flex;flex-direction:column;align-items:center;gap:var(--az-e2)}
.tarjeta-mvv{
  position:relative;overflow:hidden;padding:var(--az-e6);background:var(--az-superficie-2);
  border:1px solid var(--az-borde);border-radius:var(--az-radio-m);box-shadow:var(--az-sombra-1);
}
/* Aquí el filete dorado va a la izquierda, a todo lo alto */
.tarjeta-mvv::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--az-filete)}
.tarjeta-mvv-icono{
  width:44px;height:44px;margin-bottom:var(--az-e4);border:1.5px solid var(--az-oro-texto);
  border-radius:var(--az-radio-pastilla);color:var(--az-oro-texto);
}
.tarjeta-mvv-titulo{margin-bottom:var(--az-e2)}
/* Alto mínimo para que las tres tarjetas casen aunque una siga pendiente */
.tarjeta-mvv-cuerpo{min-height:84px;color:var(--az-texto-2)}
/* Un texto de varios párrafos necesita aire entre ellos, no una fila de saltos
   de línea. El último no lleva margen para que la tarjeta no acabe en un hueco. */
.tarjeta-mvv-cuerpo p{margin:0 0 var(--az-e2)}
.tarjeta-mvv-cuerpo p:last-child{margin-bottom:0}
/* Los valores: uno por renglón, con su nombre resaltado y una viñeta dorada.
   Sin separación entre ellos, seis seguidos se leen como un solo bloque y no se
   distingue dónde acaba uno y empieza el siguiente. */
.lista-valores{list-style:none;margin:0;padding:0;display:grid;gap:var(--az-e2)}
.lista-valores li{padding-left:15px;position:relative}
.lista-valores li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--az-oro)}
.lista-valores b{color:var(--az-texto);font-weight:650}
@media (min-width:900px){
  .bloque-nosotros{grid-template-columns:1.15fr .85fr}
  /* La foto acompaña la lectura de la columna de texto */
  .bloque-nosotros-equipo{position:sticky;top:calc(var(--az-alto-encabezado-real) + var(--az-e5))}
}


/* ===== 15. CÓMO TRABAJAMOS — los cuatro pasos ===== */
.rejilla-pasos{display:grid;gap:var(--az-e6)}
.paso{
  position:relative;z-index:var(--az-capa-base);display:flex;flex-direction:column;
  align-items:center;text-align:center;background:transparent;
}
.paso-numero{
  width:48px;height:48px;margin-bottom:var(--az-e4);background:var(--az-marino);
  /* El borde del color del fondo «corta» la línea dorada que une los pasos */
  border:2px solid var(--az-fondo);border-radius:var(--az-radio-pastilla);
  font-family:var(--az-fuente-titulos);font-size:1.25rem;font-weight:var(--az-peso-negro);
  line-height:1;color:var(--az-oro-claro);
}
.paso-titulo{margin-bottom:var(--az-e2);font-size:var(--az-t-h4)}
.paso-texto{margin:0;font-size:var(--az-t-pequeno);color:var(--az-texto-2)}
@media (min-width:640px){ .rejilla-pasos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){
  .rejilla-pasos{position:relative;grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Línea dorada tenue que cruza por detrás de los números */
  .rejilla-pasos::before{
    content:"";position:absolute;top:24px;left:12.5%;right:12.5%;height:2px;
    background:var(--az-filete);opacity:.3;
  }
  .paso-texto{font-size:var(--az-t-cuerpo)}
}


/* ===== 16. PORTAL DE CLIENTES (FASE 2) ===== */
/* El panel es el mismo elemento que el .contenedor: en vez de heredar su
   relleno lateral se le recorta el ancho, así queda separado del borde de
   la pantalla en celular y con su propio aire por dentro. */
.bloque-portal{
  display:flex;flex-direction:column;gap:var(--az-e5);
  width:calc(100% - var(--az-pad-lateral) * 2);padding:var(--az-e5);
  background:rgba(255,255,255,.06);border:1px solid var(--az-borde-inverso);
  border-radius:var(--az-radio-g);
}
.bloque-portal-icono{
  width:56px;height:56px;flex:0 0 auto;border:1.5px solid var(--az-borde-inverso);
  border-radius:var(--az-radio-m);color:var(--az-oro-sobre-oscuro);
}
.bloque-portal-cuerpo{flex:1 1 auto}
.bloque-portal-titulo{margin-bottom:var(--az-e3);font-size:var(--az-t-h3)}
.bloque-portal-texto{color:var(--az-texto-inverso-2)}
.bloque-portal-texto:last-child{margin-bottom:0}
.etiqueta-proximamente{
  display:inline-block;margin:0 0 var(--az-e3);padding:2px 10px;
  border:1.5px solid var(--az-oro-sobre-oscuro);border-radius:var(--az-radio-pastilla);
  font-size:var(--az-t-micro);font-weight:var(--az-peso-negro);letter-spacing:var(--az-esp-rotulo);
  text-transform:uppercase;color:var(--az-oro-sobre-oscuro);
}
@media (min-width:900px){
  .bloque-portal{flex-direction:row;align-items:center;gap:var(--az-e6);padding:var(--az-e6)}
}


/* ===== 17. CONTACTO: FORMULARIO Y DATOS ===== */
.formulario-contacto{
  display:grid;gap:var(--az-e4) var(--az-e5);padding:var(--az-e5);
  /* Aire de sobra abajo en celular: ahí viven los botones flotantes y no
     deben taparle nada al visitante. */
  padding-bottom:calc(var(--az-e8) + 56px);
  background:var(--az-superficie);border:1px solid var(--az-borde);
  border-radius:var(--az-radio-m);box-shadow:var(--az-sombra-2);
}
.campo{display:flex;flex-direction:column;gap:var(--az-e2);min-width:0}
.campo-ancho{grid-column:1 / -1}
.etiqueta{font-size:var(--az-t-pequeno);font-weight:var(--az-peso-fuerte);color:var(--az-texto)}
/* El asterisco es decorativo: lo obligatorio lo dice el atributo required */
.requerido{color:var(--az-oro-texto)}
.opcional{font-weight:var(--az-peso-normal);color:var(--az-texto-3)}
.control{
  width:100%;min-height:46px;padding:0 var(--az-e3);
  background:var(--az-superficie-2);border:1.5px solid var(--az-borde-campo);
  border-radius:var(--az-radio-s);color:var(--az-texto);
  transition:border-color var(--az-mov-rapida),box-shadow var(--az-mov-rapida);
}
.control:hover{border-color:var(--az-titulo)}
.control-area{min-height:132px;padding:var(--az-e3);line-height:var(--az-int-cuerpo);resize:vertical}
/* Flecha propia dibujada en un data-URI: cero peticiones externas */
.control-seleccion{
  appearance:none;padding-right:var(--az-e7);background-image:var(--az-flecha-select);
  background-repeat:no-repeat;background-position:right var(--az-e3) center;background-size:20px 20px;cursor:pointer;
}
/* Con este relleno la fila completa supera los 44 px de área de toque */
.campo-casilla{display:grid;grid-template-columns:auto 1fr;gap:var(--az-e3);align-items:start;padding-block:var(--az-e3)}
.casilla{width:20px;height:20px;margin-top:2px;accent-color:var(--az-oro);cursor:pointer}
.etiqueta-casilla{font-size:var(--az-t-pequeno);font-weight:var(--az-peso-normal);color:var(--az-texto)}
.etiqueta-casilla a{text-decoration:underline}
.campo-casilla .campo-error{grid-column:1 / -1}
.campo-error:not([hidden]){display:flex;align-items:flex-start;gap:var(--az-e1)}
.campo-error{margin:0;font-size:var(--az-t-pequeno);color:var(--az-error)}
.campo-error .icono{width:14px;height:14px;margin-top:4px}
/* Clase que agrega el JS cuando un campo no pasa la validación */
.con-error .control{border-color:var(--az-error);box-shadow:0 0 0 3px var(--az-error-fondo)}
/* Trampa anti-spam: fuera de pantalla, NUNCA display:none */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulario-acciones{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--az-e4);align-items:stretch}
.formulario-nota{margin:0;font-size:var(--az-t-pequeno);color:var(--az-texto-2)}
/* Región de mensajes del formulario: «Enviando…», éxito o error */
.form-aviso:not([hidden]){display:flex;align-items:flex-start;gap:var(--az-e2)}
.form-aviso{
  grid-column:1 / -1;margin:0;padding:var(--az-e3) var(--az-e4);
  background:var(--az-superficie-2);border:1px solid var(--az-borde);border-radius:var(--az-radio-s);
  font-size:var(--az-t-pequeno);color:var(--az-texto-2);
}
.form-aviso .icono{margin-top:2px}
.form-aviso-exito{background:var(--az-exito-fondo);border-color:var(--az-exito);color:var(--az-exito)}
.form-aviso-error{background:var(--az-error-fondo);border-color:var(--az-error);color:var(--az-error)}
.form-aviso-cargando{background:var(--az-superficie-3);border-color:var(--az-borde);color:var(--az-texto-2)}
/* Vacío: sin caja, pero SIGUE renderizado. No poner aquí display:none ni
   hidden: la región aria-live debe existir antes de que llegue el texto. */
.form-aviso-vacia{padding:0;border:0;background:none;min-height:0;margin:0}
.form-aviso:focus-visible{outline:3px solid var(--az-foco);outline-offset:2px}

/* Área táctil mínima (WCAG 2.5.8): 44x44 px reales en los controles chicos. */
.panel-pendientes-cerrar{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.pie-enlace{display:inline-flex;align-items:center;min-height:44px}

/* --- Datos de contacto --- */
.datos-contacto{display:flex;flex-direction:column;gap:var(--az-e4);margin-top:var(--az-e6)}
.dato-contacto{display:flex;align-items:flex-start;gap:var(--az-e3)}
.dato-contacto-icono{
  width:40px;height:40px;flex:0 0 auto;background:var(--az-superficie-2);
  border:1px solid var(--az-borde);border-radius:var(--az-radio-s);color:var(--az-oro-texto);
}
.dato-contacto-cuerpo{display:flex;flex-direction:column;gap:2px;min-width:0}
.dato-contacto-rotulo{
  font-size:var(--az-t-micro);letter-spacing:var(--az-esp-rotulo);
  text-transform:uppercase;color:var(--az-texto-3);
}
.dato-contacto-valor{font-weight:var(--az-peso-fuerte);color:var(--az-texto);overflow-wrap:anywhere}
.dato-contacto-valor a{color:inherit;text-decoration:none}
.dato-contacto-valor a:hover,.dato-contacto-valor a:focus-visible{text-decoration:underline}
@media (min-width:640px){
  .formulario-contacto{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--az-e6)}
  .formulario-acciones{flex-direction:row;align-items:center}
}
@media (min-width:900px){
  /* La sección de contacto pasa a dos columnas: formulario y datos. Se
     selecciona por el formulario que contiene y no por el id #contacto,
     porque el estilo va siempre por clase. */
  .contenedor:has(> .formulario-contacto){display:grid;grid-template-columns:1.1fr .9fr;gap:var(--az-e7);align-items:start}
  .contenedor:has(> .formulario-contacto) > .titulo-seccion{grid-column:1 / -1}
  .datos-contacto{margin-top:0}
}


/* ===== 18. MARCA DE PENDIENTE, BOTÓN Y PANEL DE PENDIENTES ===== */
/* El chip ámbar. Borde PUNTEADO a propósito: comunica «provisional», no
   «error». Se lee como una nota pegada sobre la página. */
.marca-pendiente,.panel-pendiente-marca,.boton-pendientes{
  background:var(--az-pendiente-fondo);border:1.5px dashed var(--az-pendiente-borde);
  border-radius:var(--az-radio-pastilla);color:var(--az-pendiente-texto);
  font-family:var(--az-fuente-texto);font-weight:var(--az-peso-fuerte);
}
.marca-pendiente{
  display:inline-flex;align-items:center;gap:var(--az-e2);padding:2px 10px;
  font-size:var(--az-t-pequeno);letter-spacing:.02em;line-height:1.5;vertical-align:baseline;
}
.marca-pendiente .icono{color:var(--az-pendiente-acento)}
.marca-pendiente-texto{overflow-wrap:anywhere}
/* Versión chica, para el encabezado y el pie */
.marca-pendiente-compacta{padding:1px 8px;font-size:var(--az-t-micro)}
.marca-pendiente-compacta .icono{width:12px;height:12px}
/* Versión de ancho completo, para Misión, Visión y Valores */
.marca-pendiente-bloque{display:flex;width:100%;align-items:flex-start;padding:var(--az-e3) var(--az-e4);border-radius:var(--az-radio-s)}

/* --- Botón flotante que abre el panel (abajo a la izquierda) --- */
.boton-pendientes{
  position:fixed;left:var(--az-e4);bottom:calc(var(--az-e4) + env(safe-area-inset-bottom,0px));
  z-index:var(--az-capa-flotante);display:inline-flex;align-items:center;justify-content:center;
  gap:var(--az-e2);min-width:52px;min-height:52px;padding:var(--az-e2);
  font-size:var(--az-t-pequeno);box-shadow:var(--az-sombra-2);cursor:pointer;
}
.boton-pendientes:hover,.boton-pendientes:focus-visible{box-shadow:var(--az-sombra-3)}
/* En celular solo se ve la cuenta; el aria-label lo explica completo */
.boton-pendientes .icono{display:none}
.boton-pendientes-texto{font-size:0}
.boton-pendientes-cuenta{font-size:var(--az-t-cuerpo);font-weight:var(--az-peso-negro)}

/* --- Panel: hoja inferior en celular --- */
.panel-pendientes:not([hidden]){display:block}
.panel-pendientes{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--az-capa-panel);
  max-height:78vh;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--az-e5);padding-bottom:calc(var(--az-e5) + env(safe-area-inset-bottom,0px));
  background:var(--az-superficie);border:1px solid var(--az-pendiente-borde);
  border-radius:var(--az-radio-g) var(--az-radio-g) 0 0;box-shadow:var(--az-sombra-3);
  opacity:0;transform:translateY(100%);
  transition:opacity var(--az-mov-normal),transform var(--az-mov-normal);
}
/* Clase que agrega el JS junto con quitar el atributo hidden */
.panel-pendientes.abierto{opacity:1;transform:none}
.panel-pendientes-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--az-e3);margin-bottom:var(--az-e3)}
.panel-pendientes-titulo{margin:0;font-family:var(--az-fuente-titulos);font-size:var(--az-t-h5);color:var(--az-titulo)}
.panel-pendientes-cerrar{
  width:36px;height:36px;flex:0 0 auto;border-radius:var(--az-radio-pastilla);
  color:var(--az-texto-2);cursor:pointer;
}
.panel-pendientes-cerrar:hover{background:var(--az-superficie-3);color:var(--az-texto)}
.panel-pendientes-intro{margin:0 0 var(--az-e3);font-size:var(--az-t-pequeno);color:var(--az-texto-2)}
.panel-pendientes h3{
  margin:var(--az-e4) 0 var(--az-e2);font-family:var(--az-fuente-texto);font-size:var(--az-t-h6);
  letter-spacing:var(--az-esp-rotulo);text-transform:uppercase;color:var(--az-texto-3);
}
.panel-pendiente-item{display:flex;flex-direction:column;gap:var(--az-e1);padding-block:var(--az-e3);border-bottom:1px solid var(--az-borde)}
.panel-pendiente-marca{align-self:flex-start;padding:2px 10px;font-size:var(--az-t-micro)}
.panel-pendiente-donde{font-size:var(--az-t-micro);color:var(--az-texto-3)}
.panel-pendientes-nota{
  margin:var(--az-e3) 0 0;padding-top:var(--az-e3);border-top:1px solid var(--az-borde);
  font-size:var(--az-t-pequeno);color:var(--az-texto-2);
}
.panel-pendientes-nota + .panel-pendientes-nota{padding-top:0;border-top:0}
@media (min-width:640px){
  /* Con más ancho el botón recupera su texto completo: «Faltan N datos» */
  .boton-pendientes{min-width:0;min-height:44px;padding:var(--az-e2) var(--az-e4)}
  .boton-pendientes .icono{display:inline-block}
  .boton-pendientes-texto{font-size:var(--az-t-pequeno)}
}
@media (min-width:900px){
  /* Deja de ser hoja inferior: panel flotante justo encima del botón */
  .panel-pendientes{
    right:auto;left:var(--az-e4);bottom:calc(var(--az-e4) + 56px + env(safe-area-inset-bottom,0px));
    width:var(--az-ancho-panel);max-width:calc(100vw - var(--az-e6));max-height:min(70vh,560px);
    border-radius:var(--az-radio-g);transform:translateY(12px);
  }
  .panel-pendientes.abierto{transform:none}
}


/* ===== 19. BOTÓN FLOTANTE DE WHATSAPP (abajo a la derecha) ===== */
.boton-flotante{
  position:fixed;right:var(--az-e4);bottom:calc(var(--az-e4) + env(safe-area-inset-bottom,0px));
  z-index:var(--az-capa-flotante);width:52px;height:52px;
  background:var(--az-marino);border:1.5px solid var(--az-oro);border-radius:var(--az-radio-pastilla);
  color:var(--az-oro-claro);box-shadow:var(--az-sombra-3);transition:transform var(--az-mov-normal);
}
.boton-flotante:hover,.boton-flotante:focus-visible{transform:scale(1.04);color:var(--az-oro-claro)}
/* Sin número real el botón lleva al formulario y se marca con un punto ámbar:
   jamás se inventa un número de WhatsApp. */
.boton-flotante-pendiente::after{
  content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px;
  background:var(--az-pendiente-acento);border-radius:var(--az-radio-pastilla);
}
@media (min-width:640px){ .boton-flotante{width:56px;height:56px} }


/* ===== 20. PIE DE PÁGINA ===== */
.pie{position:relative;padding-block:var(--az-e8) 0;background:var(--az-marino-oscuro)}
.pie .filete-dorado-ancho{position:absolute;top:0;left:0}
.rejilla-pie{display:grid;gap:var(--az-e6)}
.pie-columna,.pie-marca,.pie-mapa,.pie-contacto,.pie-redes{min-width:0}
.pie-titulo{
  margin:0 0 var(--az-e3);font-family:var(--az-fuente-texto);font-size:var(--az-t-rotulo);
  font-weight:var(--az-peso-negro);letter-spacing:var(--az-esp-rotulo);text-transform:uppercase;
  color:var(--az-oro-sobre-oscuro);
}
.pie-titulo + .pie-lista{margin-bottom:var(--az-e5)}
.pie-lista li + li{margin-top:var(--az-e2)}
.pie-enlace{display:inline-block;min-height:32px;padding-block:var(--az-e1);color:var(--az-texto-inverso-2);text-decoration:none}
.pie-enlace:hover,.pie-enlace:focus-visible{color:var(--az-enlace-hover);text-decoration:underline}
.pie-marca .logotipo{margin-bottom:var(--az-e4)}
.pie-marca p{color:var(--az-texto-inverso-2)}
.pie-legal-datos{font-size:var(--az-t-pequeno)}
/* En el pie los rótulos y el logotipo van en los tonos invertidos */
.pie .rotulo{color:var(--az-oro-sobre-oscuro)}
/* Fotografía real del equipo (Personalizar → Nosotros) */
.foto-equipo{margin:0;border-radius:var(--az-radio-m);overflow:hidden;border:1px solid var(--az-borde);box-shadow:var(--az-sombra-2)}
.foto-equipo-imagen{display:block;width:100%;height:auto}
.logotipo-pie img,.logotipo-pie .custom-logo{max-height:56px}
.logotipo-pie .logotipo-nombre{color:var(--az-texto-inverso)}
.logotipo-pie .logotipo-lema{color:var(--az-texto-inverso-2)}
.pie-contacto .dato-contacto-icono{background:rgba(255,255,255,.06);border-color:var(--az-borde-inverso);color:var(--az-oro-sobre-oscuro)}
.datos-contacto-pie{margin-top:0;gap:var(--az-e3)}
/* Las redes van en fila: son pocas y ahorran alto */
/* Solo los perfiles sociales van en fila. La lista «Legal» comparte columna y
   antes heredaba este flex: sus tres enlaces largos se apretaban en un renglón. */
.pie-redes .pie-lista-redes{display:flex;flex-wrap:wrap;gap:var(--az-e2) var(--az-e4)}
.pie-cierre{
  margin-top:var(--az-e7);padding-block:var(--az-e4);
  /* Aire extra abajo: en celular ahí viven los botones flotantes */
  padding-bottom:calc(var(--az-e4) + 64px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--az-borde-inverso);font-size:var(--az-t-pequeno);
}
.pie-cierre-interior{display:flex;flex-direction:column;align-items:center;gap:var(--az-e2);text-align:center}
.pie-cierre-interior p{margin:0;color:var(--az-texto-inverso-2)}
.pie-copy{margin:0}

/* --- Crédito del desarrollador --- */
.pie-credito{display:inline-flex;align-items:center;gap:.4em;margin:0;color:var(--az-texto-inverso-2)}
.credito-itouch{
  display:inline-flex;align-items:center;gap:.4em;
  color:var(--az-texto-inverso);text-decoration:none;font-weight:var(--az-peso-fuerte);
  border-bottom:1px solid transparent;transition:border-color var(--az-mov-rapida),color var(--az-mov-rapida);
}
.credito-itouch:hover,.credito-itouch:focus-visible{color:#3EC7EE;border-bottom-color:#3EC7EE}
.credito-itouch-icono{display:block;width:20px;height:auto;flex:0 0 auto}
@media (min-width:640px){
  .rejilla-pie{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Los datos del pie se quedan en UNA columna hasta 900px: a dos columnas
     dentro de una rejilla que ya es de dos, los chips de PENDIENTE quedaban en
     tiras de 90px con las palabras partidas a la mitad. */
  .pie-cierre{padding-bottom:calc(var(--az-e4) + 64px + env(safe-area-inset-bottom,0px))}
  .pie-cierre-interior{flex-direction:row;justify-content:space-between;text-align:left}
}
@media (min-width:900px){
  .rejilla-pie{grid-template-columns:repeat(4,minmax(0,1fr))}
  .datos-contacto-pie{display:grid;grid-template-columns:1fr}
  /* Desde aquí los botones flotantes ya no se encinan con la barra del pie. */
  .pie-cierre{padding-bottom:var(--az-e4)}
}


/* ===== 21. PÁGINAS INTERNAS, MIGAS, TEXTO DEL EDITOR Y ERROR 404 ===== */
.pagina-interna{background:var(--az-fondo)}
.pagina-encabezado{padding-block:clamp(2.5rem,6vw,4.5rem)}
.pagina-titulo{margin-bottom:0;color:var(--az-texto-inverso)}
.migas{margin-bottom:var(--az-e4);font-size:var(--az-t-pequeno)}
.migas-lista{display:flex;flex-wrap:wrap;gap:var(--az-e2)}
.migas-item{display:inline-flex;align-items:center;gap:var(--az-e2);color:var(--az-texto-2)}
/* Separador decorativo entre escalones */
.migas-item + .migas-item::before{content:"›";color:var(--az-oro-texto)}
.migas-enlace{color:var(--az-texto-2);text-decoration:none}
.migas-enlace:hover,.migas-enlace:focus-visible{color:var(--az-texto);text-decoration:underline}
.migas-actual{font-weight:var(--az-peso-fuerte);color:var(--az-texto)}

/* Texto corrido que produce el editor de WordPress */
.contenido-pagina{max-width:var(--az-ancho-estrecho)}
.contenido-pagina h2,.contenido-pagina h3,.contenido-pagina h4{margin-top:var(--az-e6)}
.contenido-pagina p,.contenido-pagina li{max-width:var(--az-ancho-lectura)}
.contenido-pagina ul,.contenido-pagina ol{margin:0 0 var(--az-e4);padding-left:var(--az-e5)}
.contenido-pagina li{margin-bottom:var(--az-e2)}
/* Viñeta dorada en las listas del editor */
.contenido-pagina ul{list-style:none;padding-left:var(--az-e4)}
.contenido-pagina ul li{position:relative;padding-left:var(--az-e4)}
.contenido-pagina ul li::before{
  content:"";position:absolute;top:.65em;left:0;width:7px;height:7px;
  background:var(--az-filete);border-radius:var(--az-radio-xs);
}
.contenido-pagina a{text-decoration:underline}
.contenido-pagina table{width:100%;margin-bottom:var(--az-e5);font-size:var(--az-t-pequeno)}
.contenido-pagina th,.contenido-pagina td{padding:var(--az-e3);border:1px solid var(--az-borde);text-align:left}
.contenido-pagina th{background:var(--az-superficie-2);color:var(--az-titulo)}
/* Paginación de la plantilla de respaldo: el marcado lo genera WordPress */
.nav-links{display:flex;flex-wrap:wrap;gap:var(--az-e2);margin-top:var(--az-e6)}
.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding-inline:var(--az-e2);border:1px solid var(--az-borde);border-radius:var(--az-radio-s);
  color:var(--az-texto-2);text-decoration:none;
}
.page-numbers.current{background:var(--az-superficie-3);color:var(--az-titulo);font-weight:var(--az-peso-fuerte)}

/* Error 404 */
.error-404{display:flex;align-items:center;min-height:60vh;padding-block:var(--az-seccion-y);background:var(--az-fondo)}
.error-404-interior{display:flex;flex-direction:column;gap:var(--az-e4)}
.error-404-codigo{
  margin:0;font-family:var(--az-fuente-titulos);font-size:clamp(4rem,14vw,8rem);
  font-weight:var(--az-peso-negro);line-height:1;text-align:center;color:var(--az-oro-texto);opacity:.9;
}
.error-404-titulo,.error-404-texto{margin:0;text-align:center}
.error-404-texto{color:var(--az-texto-2)}
.error-404-acciones{display:flex;flex-direction:column;gap:var(--az-e3);margin-bottom:var(--az-e5)}
.error-404-interior form,.error-404-interior .lista-adicionales{margin-bottom:var(--az-e5)}
.error-404-interior form{display:flex;flex-direction:column;gap:var(--az-e3)}
@media (min-width:640px){
  .error-404-acciones{flex-direction:row;justify-content:center}
  .error-404-interior form{flex-direction:row;align-items:flex-end}
  .error-404-interior .campo{flex:1 1 auto}
}


/* ===== 22. MOVIMIENTO REDUCIDO (obligatorio) =====
   Único bloque con !important, y está justificado: anula de un
   golpe TODAS las animaciones y transiciones —propias y de los
   bloques del editor— sin repetir la regla en cada componente. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;    /* justificado: anula toda animación */
    animation-iteration-count:1 !important; /* justificado: nada se repite */
    transition-duration:.01ms !important;   /* justificado: anula toda transición */
    scroll-behavior:auto !important;        /* justificado: nada de desplazamiento animado */
  }
  /* El contenido nace visible: no depende de una transición para verse */
  .animar{opacity:1;transform:none}
  .tarjeta-servicio:hover,.boton:hover,.boton-flotante:hover{transform:none}
}


/* ===== 23. IMPRESIÓN =====
   Pensada para que el contador imprima la página y palomee a mano
   lo que falta: fondo blanco, tinta oscura y las marcas con su
   borde punteado. */
@media print{
  /* Los tres selectores son a propósito: si solo se redefiniera :root, el
     bloque de html[data-tema="oscuro"] tendría más especificidad y ganaría, y
     quien tuviera el sitio en modo oscuro imprimiría texto casi blanco sobre
     papel blanco. */
  :root,html[data-tema="claro"],html[data-tema="oscuro"]{
    --az-fondo:#FFF; --az-superficie:#FFF; --az-superficie-2:#FFF; --az-superficie-3:#FFF;
    --az-texto:#000; --az-texto-2:#333; --az-texto-3:#333; --az-titulo:#000; --az-enlace:#000;
    --az-borde:#999; --az-filete:#999; --az-oro-texto:#000;
    --az-texto-inverso:#000; --az-texto-inverso-2:#333; --az-oro-sobre-oscuro:#000; --az-borde-inverso:#999;
    --az-pendiente-texto:#000; --az-pendiente-fondo:transparent;
    --az-pendiente-borde:#000; --az-pendiente-acento:#000;
    --az-sombra-1:none; --az-sombra-2:none; --az-sombra-3:none;
  }
  body{padding-top:0;background:#FFF;color:#000;font-size:11pt}
  .encabezado,.saltar-contenido,.velo,.boton-flotante,.boton-pendientes,.panel-pendientes,
  .portada-acciones,.formulario-acciones,.form-aviso,.error-404-acciones{display:none}
  .sobre-oscuro,.portada,.portada::before,.franja-confianza,.seccion-oscura,.bloque-portal,
  .pagina-encabezado,.pie,.seccion-alterna{background:none;box-shadow:none}
  .tarjeta-servicio-icono,.paso-numero{background:none;color:#000;border:1px solid #000}
  .seccion,.portada{padding-block:1.5cm 0}
  .tarjeta-servicio,.tarjeta-mvv,.formulario-contacto,.hueco-foto{border:1px solid #999;break-inside:avoid}
  .animar{opacity:1;transform:none}
}