/* ============================================================
Arelance — hoja de estilos base
Los estilos de maquetación viajan en atributos style="" dentro
de cada página (decisión de la fase de diseño). Aquí sólo están
los resets globales, los estados :hover/:focus y la animación
de aparición al hacer scroll.
============================================================ */
/* --- Tipografía: Poppins servida en local -------------------------------
Antes venía de Google Fonts, que transfiere la IP del visitante a Google
(punto flojo de RGPD señalado en ENTREGA/seo-requisitos.md). Subconjunto
latin, suficiente para el español. Ficheros en assets/fonts/.
---------------------------------------------------------------------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/poppins-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* --- Resets y tipografía base --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
[id]{scroll-margin-top:86px}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
a{text-decoration:none;color:inherit}
a:hover{color:#e8531e}
img{display:block;max-width:100%}
::selection{background:#e8531e;color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#c5ccd8;border-radius:8px;border:3px solid #fff}
input,textarea,button,select{font-family:inherit}
input::placeholder,textarea::placeholder{color:#9aa3b4}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
/* --- Estados interactivos (antes atributos style-hover del diseño) --- */
.hv1:hover{background:var(--soft);color:var(--accent)}
.hv2:hover{background:var(--soft)}
.hv3:hover{border-color:var(--accent);color:var(--accent)}
.hv4:hover{background:var(--accent-d);transform:translateY(-1px)}
.hv5:hover{transform:translateY(-6px);box-shadow:0 24px 50px -28px rgba(22,36,61,.35);border-color:#d5dbe6}
.hv6:hover{transform:translateY(-6px);box-shadow:0 24px 50px -28px rgba(22,36,61,.35)}
.hv7:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(21,34,56,.55);color:#fff}
.hv8:hover{color:var(--accent)}
.hv9:focus{border-color:var(--accent)}
.hva:hover{text-decoration:underline}
.hvb:hover{background:var(--accent)}
.hvc:hover{background:var(--accent);border-color:var(--accent)}
.hvd:hover{color:#fff}
.hve:hover{transform:translateY(-5px);box-shadow:0 24px 50px -32px rgba(22,36,61,.5);border-color:#d5dbe6}
.hvf:hover{border-color:var(--accent);transform:translateY(-3px)}
.hvg:hover{background:var(--accent-d);transform:translateY(-2px)}
.hvh:hover{border-color:var(--accent);box-shadow:0 20px 44px -30px rgba(22,36,61,.4)}
.hvi:hover{background:var(--accent-d)}
.hvj:hover{transform:translateY(-5px);box-shadow:0 22px 46px -30px rgba(22,36,61,.4)}
.hvk:hover{transform:translateY(-4px);box-shadow:0 20px 40px -28px rgba(22,36,61,.4)}
.hvl:hover{transform:translateY(-6px);box-shadow:0 26px 54px -30px rgba(22,36,61,.45);border-color:#d5dbe6}
.hvm:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(21,34,56,.4)}
.hvn:hover{color:var(--accent-d)}
.hvo:hover{transform:translateY(-4px);box-shadow:0 20px 40px -28px rgba(22,36,61,.4);border-color:#d5dbe6}
/* --- Aparición al entrar en pantalla --- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
[data-reveal]{opacity:1;transform:none;transition:none}
html{scroll-behavior:auto}
}
/* --- Accesibilidad: foco visible por teclado --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:2px solid #e8531e;outline-offset:2px;border-radius:4px;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hv-outline:hover{border-color:#e8531e;color:#e8531e}
/* ============================================================
Efectos añadidos el 22/09/2026 (no venían en la maqueta)
Todos en CSS, sin JavaScript nuevo, y desactivados si el
visitante tiene reducido el movimiento en su sistema.
============================================================ */
/* --- Aparición escalonada POR FILAS: dentro de una rejilla, las tarjetas de una
misma fila entran seguidas (160 ms entre ellas) y cada fila empieza de cero.
Escritorio: 3 columnas (rejillas de 3 y de soluciones) o 4 (certificaciones,
rejilla de 4). En tablet y móvil la rejilla se reparte en 2 o 1 columnas por
JavaScript, y el escalón se reduce para que no se note el desfase. --- */
[data-solutions-grid]>[data-reveal]:nth-child(3n+2),[data-grid-3]>[data-reveal]:nth-child(3n+2){transition-delay:.16s}
[data-solutions-grid]>[data-reveal]:nth-child(3n+3),[data-grid-3]>[data-reveal]:nth-child(3n+3){transition-delay:.32s}
[data-certs-grid]>[data-reveal]:nth-child(4n+2),[data-grid-4]>[data-reveal]:nth-child(4n+2){transition-delay:.16s}
[data-certs-grid]>[data-reveal]:nth-child(4n+3),[data-grid-4]>[data-reveal]:nth-child(4n+3){transition-delay:.32s}
[data-certs-grid]>[data-reveal]:nth-child(4n+4),[data-grid-4]>[data-reveal]:nth-child(4n+4){transition-delay:.48s}
@media (max-width:1079px){
[data-solutions-grid]>[data-reveal],[data-grid-3]>[data-reveal],[data-certs-grid]>[data-reveal],[data-grid-4]>[data-reveal]{transition-delay:0s}
[data-solutions-grid]>[data-reveal]:nth-child(2n),[data-grid-3]>[data-reveal]:nth-child(2n),[data-certs-grid]>[data-reveal]:nth-child(2n),[data-grid-4]>[data-reveal]:nth-child(2n){transition-delay:.16s}
}
@media (max-width:859px){
[data-solutions-grid]>[data-reveal],[data-grid-3]>[data-reveal],[data-certs-grid]>[data-reveal],[data-grid-4]>[data-reveal]{transition-delay:0s}
}
/* --- Hero de inicio: etiqueta, título y texto entran escalonados --- */
#inicio h1[data-reveal]{transition-delay:.25s}
#inicio p[data-reveal]{transition-delay:.5s}
#inicio h1 span{background:linear-gradient(90deg,var(--accent),#ff8a5b);-webkit-background-clip:text;background-clip:text;color:transparent}
/* --- Fotografías de equipo (inicio): sombra suave y zoom lento al pasar el ratón --- */
[data-split-grid]>[data-reveal] [style*="aspect-ratio"],[data-equipo-img] [style*="aspect-ratio"]{box-shadow:0 30px 60px -30px rgba(21,34,56,.45);transition:box-shadow .5s}
[data-split-grid]>[data-reveal] [style*="aspect-ratio"] img,[data-equipo-img] [style*="aspect-ratio"] img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
[data-split-grid]>[data-reveal]:hover [style*="aspect-ratio"],[data-equipo-img]:hover [style*="aspect-ratio"]{box-shadow:0 40px 70px -30px rgba(21,34,56,.55)}
[data-split-grid]>[data-reveal]:hover [style*="aspect-ratio"] img,[data-equipo-img]:hover [style*="aspect-ratio"] img{transform:scale(1.04)}
/* --- Botones naranja: destello que recorre el botón al pasar el ratón --- */
.hv4,.hvg,.hvi{position:relative;overflow:hidden;isolation:isolate}
.hv4::after,.hvg::after,.hvi::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform 1.1s ease;pointer-events:none;z-index:-1}
.hv4:hover::after,.hvg:hover::after,.hvi:hover::after{transform:translateX(120%)}
/* --- Menú de escritorio: subrayado que crece desde el centro --- */
[data-desktop-nav]>a,[data-desktop-nav] [data-dropdown-hover]>a{position:relative}
[data-desktop-nav]>a::after,[data-desktop-nav] [data-dropdown-hover]>a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .4s ease}
[data-desktop-nav]>a:hover::after,[data-desktop-nav] [data-dropdown-hover]:hover>a::after,[data-desktop-nav]>a[aria-current="page"]::after{transform:scaleX(1)}
/* --- Tarjetas de soluciones: la barra naranja superior se extiende al pasar el ratón --- */
.hv5>div[aria-hidden]:first-child{transition:width .5s cubic-bezier(.2,.7,.2,1)}
.hv5:hover>div[aria-hidden]:first-child{width:64px}
/* --- Icono de las tarjetas: leve giro y escala --- */
.hv5>div:nth-child(2){transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hv5:hover>div:nth-child(2){transform:scale(1.08) rotate(-4deg)}
/* --- Patrón de flechas del hero: deriva lenta y continua --- */
@keyframes arelance-deriva{0%{transform:translateY(0)}50%{transform:translateY(-14px)}100%{transform:translateY(0)}}
#inicio>div[aria-hidden][style*="arrows-pattern"]{animation:arelance-deriva 9s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
[data-reveal]{transition-delay:0s!important}
#inicio>div[aria-hidden][style*="arrows-pattern"]{animation:none}
.hv4::after,.hvg::after,.hvi::after{display:none}
[data-split-grid]>[data-reveal]:hover [style*="aspect-ratio"] img,[data-equipo-img]:hover [style*="aspect-ratio"] img{transform:none}
}
/* ============================================================
Accesibilidad (25/09/2026). Ajustes que activa el usuario desde
assets/js/accesibilidad.js mediante atributos data-a11y-* en .
Los estilos en línea de la maqueta obligan a !important.
============================================================ */
.saltar{position:absolute;left:-9999px;top:0;z-index:10000;background:#152238;color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.saltar:focus{left:0;outline:3px solid #e8531e;outline-offset:2px}
/* Tamaño del texto: la maqueta usa px en línea, así que se escala todo el documento. */
html[data-a11y-texto="1"] body{zoom:1.15}
html[data-a11y-texto="2"] body{zoom:1.3}
/* Alto contraste: fondo negro, texto blanco, enlaces amarillos, sin imágenes de fondo. */
html[data-a11y-contraste] body,html[data-a11y-contraste] body *{background-color:#000!important;background-image:none!important;color:#fff!important;border-color:#fff!important;box-shadow:none!important;text-shadow:none!important}
html[data-a11y-contraste] a,html[data-a11y-contraste] a *{color:#ffd54a!important;text-decoration:underline!important}
html[data-a11y-contraste] button,html[data-a11y-contraste] input,html[data-a11y-contraste] select,html[data-a11y-contraste] textarea{border:2px solid #fff!important}
html[data-a11y-contraste] svg{color:#fff!important;stroke:#fff}
html[data-a11y-contraste] img{opacity:1!important}
html[data-a11y-contraste] [data-site-root]{background:#000!important}
/* Escala de grises (en la raíz del sitio, no en body: filter rompe position:fixed de los paneles). */
html[data-a11y-grises] [data-site-root]{filter:grayscale(1)}
/* Enlaces subrayados. */
html[data-a11y-enlaces] a{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:2px}
/* Tipografía legible: sin adornos y con más aire. */
html[data-a11y-legible] body,html[data-a11y-legible] body *{font-family:Verdana,Arial,"Helvetica Neue",sans-serif!important;letter-spacing:.04em!important;word-spacing:.1em!important;line-height:1.75!important}
/* Animaciones detenidas. */
html[data-a11y-animaciones] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-a11y-animaciones] [data-reveal]{opacity:1!important;transform:none!important}
/* Cursor grande. */
html[data-a11y-cursor],html[data-a11y-cursor] body *{cursor:url("data:image/svg+xml;utf8,") 4 2,auto!important}
/* Listas con «check» de las entradas del blog (li.check, lo pone scripts/importar-entrada.mjs): el visto lo
dibuja la hoja de estilos, porque el contenido publicado desde la intranet no puede llevar SVG. Ocupa la
columna del icono en la rejilla que trae la
de la plantilla de Marketing. */
li.check::before{content:"";width:22px;height:22px;margin-top:2px;background:no-repeat center/22px 22px url("data:image/svg+xml;utf8,")}