/* ============================================================ ACTORES S.C.G — DESIGN SYSTEM (compartido por todas las páginas) Tokens + chrome (nav, menú móvil, footer, botones, utilidades). Estilos de página van en home.css / news.css / etc. ============================================================ */ :root{ --font-display:'Zilla Slab', Georgia, serif; --font-ui:'Inter', system-ui, sans-serif; --orange:#FF5115; --accent:#FF5115; --orange-700:#E5410E; --orange-100:#FFE7DE; --orange-50:#FFF4EF; --ink:#0E0E0C; --white:#FFFFFF; --paper:#FAFAF7; --g1:#B0B0B0; --g2:#606060; --line:rgba(14,14,12,.12); --line-light:rgba(255,255,255,.14); --maxw:1220px; --ease:cubic-bezier(.16,1,.3,1); --spin:0deg; /* Alto común de los heros de páginas interiores. Lo fija «Nuestro equipo», que es el más alto porque además del título lleva las cifras y la cinta de caras; el resto se rellena hasta ahí. Ver «PAGE HERO» más abajo. NINGÚN HERO PASA DE UNA PANTALLA. Los 795px son el alto DESEADO, no el alto: el `min` con `100svh` es el techo. Un número fijo de píxeles es una apuesta sobre la pantalla de quien mira, y se perdía en las corrientes: en un portátil de 768px de alto —la mitad del parque— el hueco útil ronda los 640, así que la banda naranja se comía la pantalla entera y el visitante no veía NADA de la página hasta bajar. Con el techo, ahí mide 640 y el borde de la sección siguiente asoma, que es lo que le dice al ojo que hay algo debajo. `svh` y no `vh`: en el teléfono `vh` mide la ventana con la barra del navegador RETRAÍDA, que es un alto que no existe hasta que uno hace scroll. `svh` mide la de verdad, la de cuando se entra. Es el mismo token que ya usa el hero de la portada (home.css). Sigue siendo `min-height` en cada hero, así que un titular largo lo sigue estirando por encima del techo antes que recortarse. El techo gobierna lo que el hero RESERVA, no lo que el hero deja ver. */ --alto-hero:min(795px, 100svh); } /* En teléfono no vale un número fijo. Un titular que en escritorio ocupa dos líneas ocupa cuatro a 360px, así que el alto que necesita la página más larga —Ruta Verde— crece según se estrecha la pantalla: 578px a 640 de ancho, 802 a 480, 899 a 375, 993 a 320. Escalonarlo por breakpoints dejaba media banda de color de más en el extremo ancho de cada tramo; esta recta pasa por los dos extremos medidos y va justo por encima en el medio. El clamp son los topes: nunca menos de 560 ni más de 1020, y por encima de todo el techo de una pantalla: 1020px en un teléfono de 360x740 eran pantalla y media de naranja antes de la primera línea. */ @media(max-width:640px){ :root{--alto-hero:min(clamp(560px, calc(1300px - 95vw), 1020px), 100svh)} } *{box-sizing:border-box} site-header, site-footer, site-fabs{display:block} html{scroll-behavior:smooth} body{margin:0; background:var(--white); color:var(--ink); font-family:var(--font-ui); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden} body.no-scroll{overflow:hidden} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 30px} a{color:inherit; text-decoration:none} img{max-width:100%; display:block} section{position:relative; padding:96px 0} @media(max-width:640px){section{padding:64px 0}} /* ====== PRELOADER (pantalla de carga) ====== */ #preloader{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:var(--orange); transition:opacity .6s var(--ease), visibility .6s} #preloader.hide{opacity:0; visibility:hidden} #preloader .pl-in{display:flex; flex-direction:column; align-items:center; gap:30px; transition:opacity .45s var(--ease), transform .55s var(--ease)} #preloader.hide .pl-in{opacity:0; transform:translateY(-18px)} #preloader .pl-word{font-family:var(--font-display); font-weight:700; letter-spacing:.34em; padding-left:.34em; font-size:clamp(28px,4.6vw,44px); line-height:1; color:var(--ink); animation:plFloat 2.2s ease-in-out infinite} #preloader .pl-word .o{color:#fff} #preloader .pl-bar{width:min(250px,58vw); height:6px; border-radius:20px; background:rgba(255,255,255,.3); overflow:hidden} #preloader .pl-bar i{display:block; height:100%; width:0; border-radius:20px; background:#fff} #preloader .pl-pct{font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.06em; color:rgba(14,14,12,.72)} @keyframes plFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @media(prefers-reduced-motion:reduce){ #preloader{display:none} } /* ====== ESPIRAL ====== */ .spiral{position:absolute; pointer-events:none; overflow:visible; transform:rotate(var(--spin)); transition:transform .2s linear} .spiral path{fill:none; stroke-width:9; stroke-linecap:round} @media(prefers-reduced-motion:reduce){.spiral{transform:none !important; transition:none}} /* ====== TRAMA DE PUNTOS ====== La textura de fondo del manual. Vive aquí, y no en la hoja de cada página, porque el problema que resuelve es de conjunto: mientras cada sección se inventaba su retícula —28px con punto de 1.6 en la portada, 24px con punto de 1.3 en las claras— el fondo se sentía desparejo al bajar, aunque cada una por separado se viera bien. Ahora la geometría es una sola en todo el sitio y lo único que decide la sección es de qué color va el punto, según su fondo, y si cubre todo o solo marca la entrada. Uso:
claro → banda de arriba
naranja → trama entera
tinta → trama entera El punto va más tenue sobre tinta que sobre naranja a propósito: el mismo blanco que sobre naranja apenas se insinúa, sobre negro grita. ====== */ :root{ --trama-paso:26px; --trama-punto:1.5px; --trama-tinta:rgba(14,14,12,.17); --trama-blanca:rgba(255,255,255,.16); --trama-tenue:rgba(255,255,255,.07); } .trama::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(var(--trama-color, var(--trama-tinta)) var(--trama-punto), transparent var(--trama-punto)); background-size:var(--trama-paso) var(--trama-paso)} .trama-blanca{--trama-color:var(--trama-blanca)} .trama-tenue{--trama-color:var(--trama-tenue)} /* El contenido de la sección, por encima de la textura. Se listan los contenedores que usa el sitio; una sección nueva con otro envoltorio tiene que subirlo ella misma. */ .trama > .wrap, .trama > .car-hero{position:relative; z-index:1} /* Banda de entrada: marca el arranque y se apaga antes de que empiece el contenido. Es lo que llevan las secciones de fondo claro, donde una trama de punta a punta se leería como papel cuadriculado. */ .trama-entrada::before{inset:0 0 auto; height:var(--trama-alto,440px); -webkit-mask-image:linear-gradient(#000 0 30%, transparent 94%); mask-image:linear-gradient(#000 0 30%, transparent 94%)} /* ====== NAV ====== */ nav{position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:14px 30px; color:var(--ink); transition:background .5s var(--ease), color .4s, border-color .4s, box-shadow .4s; border-bottom:1px solid transparent} nav .brand{font-family:var(--font-display); font-weight:700; letter-spacing:.34em; font-size:16px; padding-left:.34em} nav .brand .o{color:var(--white); transition:color .3s} nav.solid .brand .o{color:var(--accent)} /* El menú pegado a la derecha, junto al botón de acceso. En la maqueta la barra tiene DOS hijos —el logotipo y `.navmenu`, con «Iniciar sesión» dentro de ella—, así que el `space-between` de `nav` deja el logotipo a la izquierda y todo lo demás junto a la derecha. Aquí el acceso va FUERA de `.navmenu` a propósito —por debajo de 1040px el menú se repliega en el cajón y el botón de entrar no puede irse con él—, y eso deja tres o cuatro hijos que el `space-between` reparte por todo el ancho: el menú se queda a la izquierda y se abre un hueco en medio que la maqueta no tiene. `margin-left:auto` se come ese hueco de una vez: empuja el menú y lo que venga detrás contra la derecha. Misma composición que la maqueta, sin devolver el botón de acceso al cajón. */ .navmenu{display:flex; align-items:center; gap:2px} /* Acotado a la barra pública: la maqueta no tiene barra de socio, así que de esa no dice nada y no se toca. La del socio lleva cinco servicios con icono más el retrato y el nombre, y ahí el reparto por todo el ancho es lo que hace que quepan. */ nav:not(.nav-oficina) .navmenu{margin-left:auto} /* Y cuando el menú se repliega, el que empuja es el botón. Con `.navmenu` en `display:none` la barra se queda con tres hijos —logotipo, botón y hamburguesa— y el `space-between` los reparte por todo el ancho: el botón de entrar acababa flotando en mitad de la barra, sin nada que lo sujetara a ningún lado. Con el auto aquí se va contra la hamburguesa, que es donde están las otras acciones. No hace nada en escritorio: el primer margen automático —el de `.navmenu`— ya se comió el hueco libre, y al segundo no le queda nada que repartir. */ @media(max-width:1040px){ nav:not(.nav-oficina) .socios{margin-left:auto} } .navitem{position:static} .navlink{position:relative; font-family:var(--font-ui); font-size:13.5px; font-weight:500; color:inherit; background:none; border:0; cursor:pointer; padding:10px 13px; border-radius:10px; display:inline-flex; align-items:center; gap:6px; opacity:.85; transition:opacity .2s, color .2s} .navlink:hover{opacity:1} .navlink .car{font-size:8px; opacity:.7; transition:transform .3s var(--ease)} .navitem.open .navlink .car{transform:rotate(180deg)} /* Ítem actual: sobre el hero naranja (nav transparente) va en tinta + subrayado para que se vea; solo se pinta de naranja cuando el nav es blanco (sólido/mega). */ .navitem.current > .navlink{opacity:1; font-weight:600} .navitem.current > .navlink::after{content:""; position:absolute; left:13px; right:13px; bottom:6px; height:2px; border-radius:2px; background:currentColor} nav.solid .navitem.current > .navlink, nav:has(.navitem.open) .navitem.current > .navlink{color:var(--accent)} /* Hero OSCURO (theme="dark"): el nav transparente va en claro para verse desde la primera carga. Se revierte solo al hacerse sólido (scroll) o al abrir el mega-menú, donde el fondo ya es blanco. Mantiene la transición fluida. */ nav.on-dark:not(.solid):not(:has(.navitem.open)){color:#fff} nav.on-dark:not(.solid):not(:has(.navitem.open)) .brand .o{color:var(--accent)} nav.on-dark:not(.solid):not(:has(.navitem.open)) .socios{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.5); color:#fff} nav.on-dark:not(.solid):not(:has(.navitem.open)) .socios:hover{background:rgba(255,255,255,.26)} .socios{margin-left:10px; background:var(--ink); color:#fff; border-radius:40px; padding:9px 18px; font-weight:600; font-size:12.5px; transition:transform .25s var(--ease), background .25s} .socios:hover{transform:translateY(-2px)} nav.solid{background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom-color:var(--line); box-shadow:0 8px 30px -22px rgba(0,0,0,.5)} nav.solid .socios{background:var(--accent)} nav:has(.navitem.open){background:rgba(255,255,255,.97); backdrop-filter:blur(12px); color:var(--ink); border-bottom-color:var(--line); box-shadow:0 8px 30px -22px rgba(0,0,0,.5)} nav:has(.navitem.open) .brand .o{color:var(--accent)} nav:has(.navitem.open) .socios{background:var(--accent)} /* ---------- Con sesión iniciada ---------- Vivía en camaleon.css, cuando la barra con sesión solo existía en el Centro. Desde que la portada institucional es parte del mismo proyecto la barra es una sola en todo el sitio, y sus estilos tienen que estar donde está la barra: en camaleon.css se quedaban fuera de cualquier página que no fuera del Centro, y el sello del socio salía sin formato. El sitio no se convierte en un panel: sigue siendo la misma web y este es el único sitio donde se nota que hay sesión. En vez de un "Mi cuenta" anónimo va el sello con las iniciales y el nombre de pila. El sello va en tinta y no en naranja a propósito: tiene que leerse igual sobre el naranja del hero (barra transparente) que sobre el blanco de la barra sólida al bajar, y la tinta es lo único que cumple las dos. Es el mismo recurso del botón .socios de aquí arriba. */ #nav .navacceso{display:flex; align-items:center; gap:14px} #nav .navacceso form{margin:0} #nav .navsocio{display:flex; align-items:center; gap:9px; color:inherit} #nav .navini{flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:31px; height:31px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.02em; line-height:1; transition:background .25s var(--ease), transform .25s var(--ease)} #nav .navsocio:hover .navini{background:var(--accent); transform:translateY(-1px)} /* El retrato ocupa exactamente el hueco del sello de iniciales: la barra no puede cambiar de alto según el socio tenga foto o no. El fondo pintado es para los avatares SVG, que vienen con el lienzo transparente. */ #nav .navfoto{flex:0 0 auto; width:31px; height:31px; border-radius:50%; object-fit:cover; object-position:center; background:var(--ink); transition:box-shadow .25s var(--ease), transform .25s var(--ease)} #nav .navsocio:hover .navfoto{box-shadow:0 0 0 2px var(--accent); transform:translateY(-1px)} #nav .navnom{display:flex; flex-direction:column; line-height:1.15; font-size:13px; font-weight:700} /* El "Mi cuenta" queda de antetítulo: dice a dónde lleva sin quitarle el protagonismo al nombre, que es lo que hace de señal de sesión. */ #nav .navnom small{font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.55} /* En pantallas estrechas manda el sello: el nombre no cabe junto al botón de salir y a la hamburguesa, y las iniciales ya identifican a quien entró. */ @media(max-width:560px){#nav .navnom{display:none} #nav .navacceso{gap:10px}} /* .socios se aplica también a un