/* ========================================================================== base.css — SANTA ANA GLOBAL (réplica) Tokens, tipografía base, header, menú overlay, footer, preloader, botón circular de flecha y utilidades de reveal compartidas por TODO el sitio. Cada página interior añade sólo lo suyo en su propio CSS. Sistema de escala: Wix Studio escala todo con vw (--one-unit:1vw) y sólo tiene el breakpoint @media (max-width:500px). Medidas tomadas a un viewport de referencia de 1728px (px / 17.28 = vw). Contrato de animación (compartido con pais.css / inversores.css): main.js observa los elementos marcados con [data-reveal] y les añade la clase .visible al entrar en pantalla (IntersectionObserver, threshold 0.15, rootMargin "0px 0px -10% 0px"). El estado "oculto" de cada elemento vive SIEMPRE dentro de @media (prefers-reduced-motion:no-preference), así que si JS no llega a marcarlo, o el usuario prefiere menos movimiento, el contenido es igualmente visible sin animación. ========================================================================== */ /* ---------- Fuentes ---------- */ /* Añadir en el de cada página: /* ---------- Tokens ---------- */ :root{ --negro:#101212; /* color_15 — texto y tinta */ --blanco:#ffffff; --azul:#5286B4; /* rgb(82,134,180) — acento */ --gutter:5vw; /* margen lateral del contenedor (86px @1728) */ --ancho:90vw; /* ancho útil (1555px @1728) */ --ease:cubic-bezier(0.645,0.045,0.355,1); /* curva de las entradas */ --ease-suave:cubic-bezier(0.445,0.05,0.55,0.95); /* curva de los fundidos */ --one-unit:1vw; --font-titular:"Montserrat", sans-serif; --font-base:"Poppins", Arial, sans-serif; --font-black:"Arial Black", "Arial Bold", Gadget, sans-serif; --header-alto:5.27vw; } /* ---------- Reset mínimo ---------- */ html{ box-sizing:border-box; } *, *::before, *::after{ box-sizing:inherit; } html, body{ margin:0; padding:0; } body{ font-family:var(--font-base); font-weight:600; color:var(--negro); background:var(--blanco); line-height:1.1; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1,h2,h3,h4,h5,h6,p,ul,figure{ margin:0; } ul{ padding:0; list-style:none; } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; } video{ display:block; } /* Compensa el header sticky al saltar a un ancla (#que-hacemos, etc.) */ [id]{ scroll-margin-top:var(--header-alto); } @media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } } /* Bloquea el scroll del body mientras el menú overlay está abierto */ body.menu-abierto{ overflow:hidden; } /* ========================================================================== HEADER — .cabecera (idéntico en todas las páginas, ver partials.html) ========================================================================== */ .cabecera{ position:sticky; top:0; z-index:100; height:var(--header-alto); background:var(--blanco); display:flex; align-items:center; justify-content:space-between; padding-inline:var(--gutter); } .cabecera__marca{ display:block; flex:none; line-height:0; } .cabecera__marca img{ width:16.7vw; height:auto; } .cabecera__monograma{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block; line-height:0; } .cabecera__monograma img{ width:2.55vw; height:auto; } .cabecera__acciones{ flex:none; display:flex; align-items:center; gap:1.4vw; } /* Hamburguesa: 3 barras negras */ .hamburguesa{ flex:none; width:1.9vw; height:1.3vw; min-width:26px; min-height:18px; display:flex; flex-direction:column; justify-content:space-between; } .hamburguesa span{ display:block; height:2px; width:100%; background:var(--negro); } /* Conmutador de idioma ES/EN */ .idiomas{ display:flex; border:1px solid var(--negro); border-radius:2px; overflow:hidden; } .idiomas__op{ display:inline-flex; align-items:center; justify-content:center; padding:0.35em 0.75em; font-family:var(--font-base); font-weight:600; font-size:13px; color:#181818; background:var(--blanco); } .idiomas__op--activo{ background:var(--negro); color:var(--blanco); } /* ========================================================================== MENÚ OVERLAY — .menu (ver partials.html) ========================================================================== */ .menu{ position:fixed; inset:0; z-index:200; width:100%; height:100%; background:var(--negro); transform:translateX(100%); transition:transform 500ms var(--ease); display:flex; flex-direction:column; justify-content:center; padding-inline:var(--gutter); visibility:hidden; } .menu.menu--abierto{ transform:translateX(0); visibility:visible; } .menu__cerrar{ position:absolute; top:2.5vw; right:var(--gutter); width:2vw; height:2vw; min-width:28px; min-height:28px; } .menu__cerrar svg{ width:100%; height:100%; fill:none; stroke:var(--blanco); stroke-width:2; stroke-linecap:round; } .menu__lista{ display:flex; flex-direction:column; max-width:26vw; } .menu__lista li + li{ margin-top:1.1vw; } .menu__lista a{ display:block; padding-bottom:0.55vw; border-bottom:1px solid var(--blanco); font-family:var(--font-base); font-weight:600; font-size:18px; line-height:1.2; letter-spacing:0.02em; color:var(--blanco); text-transform:uppercase; } .menu__lista a.is-activo{ color:var(--azul); } /* ========================================================================== FOOTER — .pie (idéntico en todas las páginas, ver partials.html) ========================================================================== */ .pie{ background:var(--negro); color:var(--blanco); padding-inline:var(--gutter); padding-block:2.4vw 1.6vw; min-height:22.7vw; box-sizing:border-box; display:flex; flex-direction:column; } .pie__filete{ border-top:1px solid var(--blanco); border-bottom:1px solid var(--blanco); height:3px; margin-bottom:3.2vw; } .pie__cuerpo{ flex:1; display:grid; grid-template-columns:16.7vw 1fr 1fr 1fr; gap:2vw; } .pie__logo{ display:flex; align-items:flex-start; } .pie__logo img{ width:9.6vw; height:auto; } /* 166px @1728 — medido en la web original */ .pie__titulo{ margin:0 0 1.3vw; font-family:var(--font-black); font-weight:400; font-size:1.7vw; line-height:1; letter-spacing:-0.01em; color:var(--blanco); } .pie__enlaces, .pie__menu{ display:flex; flex-direction:column; } .pie__enlaces li + li{ margin-top:0.4vw; } .pie__menu li + li{ margin-top:0.25vw; } .pie__enlaces a{ font-family:var(--font-base); font-weight:600; font-size:18px; line-height:1.5; color:var(--blanco); text-decoration:underline; } .pie__menu a{ font-family:var(--font-base); font-weight:600; font-size:18px; line-height:1.1; color:var(--blanco); text-transform:uppercase; } .pie__menu a.is-activo{ color:var(--azul); } .pie__contacto{ font-family:var(--font-base); font-weight:600; font-size:0.9vw; line-height:1.5; color:var(--blanco); } .pie__contacto a{ text-decoration:none; } .pie__contacto a:hover{ color:var(--azul); } .pie__legal{ position:relative; height:2.2vw; min-height:22px; margin-top:1.6vw; } .pie__legal a{ position:absolute; top:0; white-space:nowrap; font-family:var(--font-base); font-weight:600; font-size:0.7vw; line-height:1.4; color:var(--blanco); } .pie__legal a:nth-child(1){ left:6.4vw; } .pie__legal a:nth-child(2){ left:17.5vw; } .pie__legal a:nth-child(3){ left:31.8vw; } /* ========================================================================== PRELOADER — .preloader (sólo en index.html) ========================================================================== */ .preloader{ position:fixed; inset:0; z-index:9999; background:var(--blanco); overflow:hidden; transition:opacity 600ms var(--ease-suave); } .preloader__tierra, .preloader__mascara{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .preloader.preloader--oculto{ opacity:0; pointer-events:none; } /* ========================================================================== BOTÓN CIRCULAR DE FLECHA — .flecha (se repite en varias secciones) ========================================================================== */ .flecha{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:3.3vw; height:3.3vw; min-width:34px; min-height:34px; border-radius:50%; background:var(--negro); border:1px solid var(--blanco); } .flecha svg{ width:55%; height:55%; fill:none; stroke:var(--blanco); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } @media (prefers-reduced-motion:no-preference){ html.reveal-ready .flecha[data-reveal]{ opacity:0; transform:translateY(20%) scale(0.8); } .flecha[data-reveal].visible{ animation:flecha-in 1200ms var(--ease) forwards; } @keyframes flecha-in{ to{ opacity:1; transform:translateY(0) scale(1); } } } /* ========================================================================== RESPONSIVE — @media (max-width:500px) Sólo los elementos comunes de esta hoja (header, menú, footer, preloader, flecha). Cada página añade el suyo para su propio contenido. ========================================================================== */ @media (max-width:500px){ .pie__logo img{ width:120px; } :root{ --gutter:24px; } .cabecera{ height:70px; } .cabecera__marca img{ width:140px; } /* En movil el monograma queda pegado al wordmark y repite la misma marca dos veces en 140 px. Se oculta; en escritorio siguen separados por el centro de la cabecera, que es la composicion buscada. */ .cabecera__monograma{ display:none; } .cabecera__acciones{ gap:14px; } .hamburguesa{ width:24px; height:16px; min-width:0; min-height:0; } .idiomas__op{ font-size:12px; padding:0.35em 0.6em; } .menu__lista{ max-width:100%; } .menu__cerrar{ top:20px; right:24px; width:26px; height:26px; min-width:0; min-height:0; } .pie{ min-height:0; padding-block:48px 24px; } .pie__cuerpo{ grid-template-columns:1fr; gap:32px; } .pie__titulo{ font-size:18px; margin-bottom:14px; } .pie__enlaces a, .pie__menu a{ font-size:16px; } .pie__contacto{ font-size:15px; } .pie__legal{ height:auto; display:flex; flex-direction:column; gap:8px; margin-top:28px; } .pie__legal a{ position:static; font-size:12px; } .flecha{ width:44px; height:44px; min-width:0; min-height:0; } } /* Opción de idioma no disponible en esta revisión: se ve deshabilitada en vez de comportarse como un enlace que no lleva a ninguna parte. */ .idiomas__op--inactivo{ color:#9a9a9a; cursor:default; user-select:none; }