/* Generado por estilos.py: no editar aqui. */ /* Objetivos tactiles (WCAG 2.2, minimo 24x24). Los enlaces en texto corrido estan exentos por la norma, pero el relleno superior no cambia su aspecto y los ayuda. El relleno inferior se omite cuando el enlace lleva subrayado por borde, para no bajar la linea. La marca de la cabecera ya mide 34 px. */ header a:not([href="#top"]):not([href="/#top"]), footer a, nav a, .nav-mov a { padding-top: 6px; padding-bottom: 6px; } header nav a, footer a, .nav-mov a { display: inline-block; } main a { padding-top: 8px; } main a:not(:is([data-s="3"],[data-s="23"],[data-s="55"],[data-s="87"],[data-s="94"],[data-s="98"],[data-s="113"],[data-s="114"],[data-s="136"],[data-s="156"],[data-s="197"],[data-s="199"],[data-s="214"],[data-s="231"],[data-s="252"],[data-s="298"],[data-s="311"],[data-s="330"])) { padding-bottom: 6px; } /* a11y-tap */ /* Impresion: los abogados imprimen. Fuera lo que no sirve en papel (boton flotante, menu, hamburguesa, pie de contacto) y sin cortar una cita legal entre dos paginas. */ @media print { a[aria-label*="WhatsApp"], header nav, #nav-movil, #btn-menu, footer, video { display: none !important; } header { position: static !important; box-shadow: none !important; } p:is([data-s="101"],[data-s="210"],[data-s="269"],[data-s="293"]), h2, h3 { break-inside: avoid; page-break-inside: avoid; } h2, h3 { break-after: avoid; page-break-after: avoid; } main { max-width: none !important; padding-top: 24px !important; } a { color: inherit !important; } } /* Cabecera: la variante escritorio/movil la decidia JavaScript (matchMedia 1180px), lo que impedia pre-renderizar la pagina sin congelar una de las dos. Ahora la decide el CSS, con el mismo punto de corte y el mismo resultado visual. */ .nav-esc{display:none!important} .mail-esc{display:none!important} .btn-menu{display:flex!important} .nav-mov{display:none!important} .nav-mov.abierto{display:flex!important} @media(min-width:1180px){ .nav-esc{display:flex!important} /* El correo sale de la barra: con ocho enlaces el nav necesita 831 px y solo tenia 718; los 185 px del correo son justo lo que faltaba. Sigue en el menu movil, en el pie y en toda la pagina de contacto. */ .mail-esc{display:none!important} .btn-menu{display:none!important} .nav-mov,.nav-mov.abierto{display:none!important} } /* ---- */ /* hover y focus: antes los resolvia el runtime con onmouseenter; ahora es CSS, asi sobreviven al pre-renderizado y funcionan sin JavaScript. */ [data-hv="wa"]:hover{background:#1ea952!important} [data-hv="azul"]:hover{background:#1a3a5c!important} [data-hv="borde"]:hover{border-top-color:#B08D57!important} [data-hv="oro"]:hover{background:#6F5834!important} [data-hv="op"]:hover{opacity:.85!important} [data-hv="col"]:hover{color:#886C40!important} [data-hv="inv"]:hover{border-color:#fff!important;background:rgba(255,255,255,.08)!important} [data-fc="skip"]:focus{left:12px!important;top:12px!important;z-index:200!important} /* ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* El crema lo pintaba solo el contenedor: en iOS, al rebotar el scroll, asomaba el blanco del navegador. */ body { margin: 0; background: #F7F5F1; } ::selection { background: #B08D57; color: #fff; } a { color: #0F2A43; } a:hover { color: #B08D57; } /* Anillo de foco. El dorado daba 2,84:1 sobre el crema y 1,59:1 sobre el boton dorado, bajo el minimo de 3:1 que pide la norma 1.4.11 para elementos no textuales. El navy da 13,46:1 sobre el crema. */ a:focus-visible, button:focus-visible { outline: 2px solid #0F2A43; outline-offset: 2px; } /* El menu movil vive sobre el crema, asi que ahi el anillo vuelve al navy aunque el enlace sea el boton dorado. */ #nav-movil a:focus-visible { outline-color: #0F2A43; } /* El
recibe el foco al usar el enlace de salto. Lleva tabindex="-1" para poder recibirlo, pero no es un control: no debe dibujar anillo. */ main:focus { outline: none; } /* La pagina actual no puede distinguirse solo por el color (norma 1.4.1): ademas del dorado lleva subrayado. Se hace con text-decoration y no con borde para no mover un pixel la altura de la cabecera. */ nav a[aria-current="page"] { text-decoration-line: underline !important; text-underline-offset: 6px; text-decoration-thickness: 2px; } /* El boton del menu medía 38x32 y el minimo de un objetivo tactil es 44x44. En movil es la unica entrada a la navegacion. Las tres barras no cambian de aspecto: se centran dentro de un area mayor. */ #btn-menu { width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; } /* Y al abrirse se convierte en una X: antes el icono era identico abierto y cerrado, y lo unico que cambiaba era el aria-label, que no se ve. */ #btn-menu span { transition: transform .2s ease, opacity .2s ease; } #btn-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #btn-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; } #btn-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Con el menu abierto, el fondo no debe seguir haciendo scroll por detras. Va SOLO en , y eso importa. Medido en el navegador: overflow:hidden en body -> no bloquea (quien desplaza es ) overflow:hidden en ambos -> bloquea, pero la pagina salta al inicio overflow:hidden en html -> bloquea y conserva la posicion <-- este La clase se pone igual en el body por si sirve de gancho, pero el bloqueo lo hace . */ html.menu-abierto { overflow: hidden; } /* Quien pide menos movimiento no recibe ni el desplazamiento suave ni la transicion de la X del menu. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto !important; } #btn-menu span { transition: none !important; } } /* Sobre fondo oscuro el navy desaparece, asi que ahi el anillo va en crema. Se reconocen por el blanco del propio enlace, por vivir en el hero o en el pie, o por ser el boton dorado. Crema sobre el boton dorado: 4,52:1. */ footer a:focus-visible, footer button:focus-visible, #top a:focus-visible, #top button:focus-visible, a:is([data-s="2"],[data-s="17"],[data-s="26"],[data-s="32"],[data-s="35"],[data-s="58"],[data-s="66"],[data-s="76"],[data-s="96"],[data-s="119"],[data-s="146"],[data-s="150"],[data-s="151"],[data-s="171"],[data-s="183"],[data-s="190"],[data-s="195"],[data-s="197"],[data-s="199"],[data-s="219"],[data-s="227"],[data-s="231"],[data-s="239"],[data-s="259"]):focus-visible, a:is([data-s="24"],[data-s="27"],[data-s="29"],[data-s="30"],[data-s="37"],[data-s="147"],[data-s="148"],[data-s="152"],[data-s="155"],[data-s="184"],[data-s="185"],[data-s="191"],[data-s="198"],[data-s="228"],[data-s="229"],[data-s="230"],[data-s="240"],[data-s="304"]):focus-visible, a:is([data-s="156"]):focus-visible, a:is([data-s="17"],[data-s="150"],[data-s="239"]):focus-visible { outline-color: #F7F5F1; } /* El boton flotante de WhatsApp es verde claro y pasa por encima de fondos distintos segun el scroll, asi que ningun anillo exterior sirve siempre: se dibuja por dentro, sobre su propio verde, donde el navy da 7,39:1. */ a[aria-label*="WhatsApp"]:focus-visible { outline-color: #0F2A43; outline-offset: -4px; } /* Subrayado de los enlaces de texto: el dorado claro daba 2,84:1, bajo el minimo de 3:1. Sobre crema va el dorado oscuro (4,52:1); dentro del hero, sobre el video, el dorado claro (5,29:1 contra el fotograma mas claro). */ main a:is([data-s="3"],[data-s="23"],[data-s="55"],[data-s="87"],[data-s="94"],[data-s="98"],[data-s="113"],[data-s="114"],[data-s="136"],[data-s="156"],[data-s="197"],[data-s="199"],[data-s="214"],[data-s="231"],[data-s="252"],[data-s="298"],[data-s="311"],[data-s="330"]) { border-bottom-color: #886C40 !important; } #top a:is([data-s="3"],[data-s="23"],[data-s="55"],[data-s="87"],[data-s="94"],[data-s="98"],[data-s="113"],[data-s="114"],[data-s="136"],[data-s="156"],[data-s="197"],[data-s="199"],[data-s="214"],[data-s="231"],[data-s="252"],[data-s="298"],[data-s="311"],[data-s="330"]) { border-bottom-color: #E8D3A9 !important; } /* ---- */ /* Arreglos de la auditoria del 9-oct-2026. */ /* Boton flotante de WhatsApp: sitio.js le pone .wa-oculto mientras se ve la portada o el pie, que ya tienen su propio WhatsApp. Asi no tapa texto. */ [data-hv="wa"]{transition:opacity .25s ease,transform .25s ease,visibility 0s linear 0s} [data-hv="wa"].wa-oculto{opacity:0;transform:translateY(16px);visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s} /* Sin JavaScript el boton queda fijo: el pie deja espacio para que no tape el nombre. */ @media (max-width:767px){footer>div:last-child{padding-bottom:96px!important}} /* Boton de pausa del video de portada (solo existe en el inicio). */ #video-pausa{position:absolute;top:20px;right:24px;z-index:2;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(15,42,67,.62);border:1px solid rgba(247,245,241,.5);border-radius:2px;color:#F7F5F1;cursor:pointer;padding:0} #video-pausa:hover{background:rgba(15,42,67,.88)} #video-pausa .i-play{display:none}#video-pausa.en-pausa .i-play{display:block}#video-pausa.en-pausa .i-pausa{display:none} #video-pausa:focus-visible{outline:2px solid #F7F5F1;outline-offset:2px} @media (max-width:767px){#video-pausa{display:none}} /* Formulario de contacto. */ .form-campo{margin:0 0 22px} .form-campo label{display:block;font-size:15px;font-weight:500;color:#0F2A43;margin:0 0 8px} .form-campo .ayuda{display:block;font-size:13.5px;color:#6B7179;margin:6px 0 0;line-height:1.5} .form-campo input,.form-campo select,.form-campo textarea{width:100%;font:inherit;font-size:16px;color:#0F2A43;background:#fff;border:1px solid #6B7179;border-radius:2px;padding:13px 14px;line-height:1.4} .form-campo textarea{min-height:170px;resize:vertical} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #0F2A43;outline-offset:2px;border-color:#0F2A43} .form-trampa{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden} #form-estado{padding:14px 18px;background:#FBEDEA;border-left:3px solid #A33A2B;color:#5E1F16;font-size:15px;line-height:1.5;margin:0 0 24px} /* pulir-2026-10b */ /* Celular: el boton flotante queda solo con el icono, 56x56, y tapa menos texto. La etiqueta "Escribeme" sigue en el aria-label para lectores de pantalla. */ @media (max-width:600px){[data-hv="wa"]{width:56px!important;padding:0!important;justify-content:center!important}[data-hv="wa"]>span{display:none!important}} /* Sin JavaScript el boton de pausa no hace nada: se oculta. sitio.js pone la clase "js" en . Antes esto era un