/* ============================================================
Sistema visual compartido por los borradores de restyling.
Heredado tal cual de "borrador blog blue&white.html": mismos
tokens, las dos paletas reales de marca y el botón de contraste.
Se saca a un fichero aparte para que las cuatro páginas no
diverjan — el fallo clásico es copiar el CSS y que a la tercera
página ya no coincidan los colores.
============================================================ */
:root{
--bg:#eef1f6; --bg2:#ffffff; --card:#ffffff; --card2:#dfdfe1;
--ink:#2c3e50; --muted:#415c76; --rule:#dfdfe1;
/* El azul de marca es #3498db, pero como TEXTO no llega: mide 3,15 sobre
blanco y 2,68 sobre el panel claro, cuando el mínimo legible es 4,5. Y de
los 79 usos del token, 51 son `color:` —es sobre todo un color de texto—,
así que se sube el token entero en vez de parchear regla a regla.
#1a6699 da 6,17 sobre blanco y 4,64 sobre el gris más oscuro, que es el
peor caso. Los siete fondos que usan el token llevan todos texto encima
(el botón de Contacto, las píldoras, el chip del slicer), así que ganan
con el mismo cambio: blanco sobre el botón pasa de 3,15 a 6,17.
`--accent-vivo` conserva el original para lo puramente decorativo, donde
no se apoya ningún texto. Para volver atrás basta con esta línea. */
--accent:#1a6699; --accent-vivo:#3498db;
--accent-dim:#155d8a; --on-accent:#fff;
--card-border:rgba(44,62,80,.18);
--card-shadow:0 2px 6px rgba(44,62,80,.08),0 14px 32px -14px rgba(44,62,80,.3);
--quote-bg:rgba(52,152,219,.1);
--input-bg:var(--card2); --footer-legal:rgba(44,62,80,.6);
--pill-text:#fff;
--sup:#f4f7fb; --sup-borde:rgba(44,62,80,.06);
--barra:#16222e; --barra-borde:transparent;
--sans:"Roboto","Segoe UI",sans-serif; --geo:"Roboto Condensed","Segoe UI",sans-serif;
}
body[data-theme="gold"],html[data-theme-pre="gold"] body{
--bg:#080808; --bg2:#0e0e0e; --card:#131313; --card2:#171717;
--ink:#ffffff; --muted:#9c9c9f; --rule:rgba(255,255,255,.09);
--accent:#ffd700; --accent-dim:#7a6300; --on-accent:#04101f;
--card-border:rgba(255,255,255,.18);
--card-shadow:0 0 0 1px rgba(255,255,255,.05),0 14px 32px -14px rgba(0,0,0,.8);
--quote-bg:rgba(255,215,0,.08);
--input-bg:var(--bg); --footer-legal:rgba(141,151,179,.55);
--pill-text:var(--accent);
--sup:#0d0d0d; --sup-borde:rgba(255,255,255,.07);
--barra:#e9e9e4; --barra-borde:rgba(0,0,0,.10);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;
position:relative;}
/* --- Fondo continuo de toda la página ---
La retícula y los arcos que estaban solo detrás de las FAQs pasan a ser una
sola capa que recorre el documento entero, por debajo de todas las secciones.
La retícula va en CSS (se repite sola a cualquier altura, no hay que estirar
un SVG kilométrico) y los arcos en vector, arriba a la derecha y abajo a la
izquierda. Las secciones se ponen por encima con `body > *`. */
body > *{position:relative;z-index:1;}
.fondo-global{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
background-image:
radial-gradient(58% 38% at 84% 4%,rgba(52,152,219,.07),transparent 70%),
radial-gradient(50% 30% at 8% 62%,rgba(52,152,219,.045),transparent 72%),
linear-gradient(to right,rgba(52,152,219,.05) 1px,transparent 1px),
linear-gradient(to bottom,rgba(52,152,219,.05) 1px,transparent 1px);
background-size:100% 1500px,100% 1800px,48px 48px,48px 48px;
background-repeat:no-repeat,no-repeat,repeat,repeat;
background-position:0 0,0 40%,0 0,0 0;}
body[data-theme="gold"] .fondo-global,html[data-theme-pre="gold"] body .fondo-global{
background-image:
radial-gradient(58% 38% at 84% 4%,rgba(255,215,0,.05),transparent 70%),
radial-gradient(50% 30% at 8% 62%,rgba(255,215,0,.035),transparent 72%),
linear-gradient(to right,rgba(255,215,0,.035) 1px,transparent 1px),
linear-gradient(to bottom,rgba(255,215,0,.035) 1px,transparent 1px);}
.fondo-global svg{position:absolute;color:#3498db;opacity:.26;}
body[data-theme="gold"] .fondo-global svg,html[data-theme-pre="gold"] body .fondo-global svg{color:#ffd700;opacity:.1;}
.fondo-global .arcos-a{top:-6rem;right:-8rem;width:min(1000px,88vw);height:min(1000px,88vw);}
.fondo-global .arcos-b{bottom:14%;left:-14rem;width:min(820px,72vw);height:min(820px,72vw);opacity:.18;}
body[data-theme="gold"] .fondo-global .arcos-b,html[data-theme-pre="gold"] body .fondo-global .arcos-b{opacity:.07;}
@media(max-width:700px){.fondo-global{background-size:100% 900px,100% 1100px,34px 34px,34px 34px;}}
/* Cada sección se apoya en su propia superficie opaca, así el fondo continuo
solo asoma en los huecos entre secciones y nunca por detrás de un texto. */
.bloque{background:var(--sup);border:1px solid var(--sup-borde);border-radius:28px;
margin:2.2rem 3.5rem;}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
.wrap{max-width:110rem;margin:0 auto;padding:0 1.25rem;}
/* Barra de navegación: se queda arriba al bajar (sticky) y va en el mismo azul
marino que el pie, para que la página quede cerrada por arriba y por abajo con
el mismo color. El cerebro marca la pestaña activa; a la derecha solo queda el
texto del logotipo, recortado y discreto.
Los dos usan máscara CSS en vez de ![]()
: así toman el color que les demos y
funcionan igual en las dos paletas (el isotipo es negro con transparencia y en
la paleta oro sería invisible; el lockup lleva las letras en azul marino y
sobre esta barra tampoco se leerían). */
.jb-header{position:sticky;top:.7rem;z-index:80;margin:.7rem 3.5rem 0;
padding:.85rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2rem;
background:var(--barra);border:1px solid var(--barra-borde);border-radius:18px;
box-shadow:0 8px 26px -20px rgba(16,24,40,.6);
transition:padding .25s ease,box-shadow .25s ease;}
/* Cabecera y pie comparten siempre el token --barra: #16222e en la paleta azul
y #c8c8c3 —gris claro cálido— en la de oro. En esta última hay que invertir
todo lo que va dentro de las dos barras: enlaces, cerebro y logotipo en oscuro,
y el Contacto en negro con letra dorada, que sobre ese gris contrasta mucho
más que el oro macizo. */
/* Negro pleno, sin porcentajes: en la barra clara todo el texto va en negro,
el logotipo incluido, y la pestaña abierta se distingue por COLOR, no por
estar el resto apagado. */
body[data-theme="gold"] .jb-nav a,html[data-theme-pre="gold"] body .jb-nav a{color:#17170f;}
body[data-theme="gold"] .jb-nav a:hover,html[data-theme-pre="gold"] body .jb-nav a:hover{color:#6f5a00;}
body[data-theme="gold"] .jb-nav a.on,html[data-theme-pre="gold"] body .jb-nav a.on{color:#6f5a00;}
body[data-theme="gold"] .jb-nav a.on::before,html[data-theme-pre="gold"] body .jb-nav a.on::before{filter:brightness(0);}
body[data-theme="gold"] .jb-word,html[data-theme-pre="gold"] body .jb-word{opacity:1;}
body[data-theme="gold"] .jb-word img,html[data-theme-pre="gold"] body .jb-word img{filter:brightness(0);}
body[data-theme="gold"] .jb-theme,html[data-theme-pre="gold"] body .jb-theme{border-color:rgba(0,0,0,.28);color:#17170f;}
body[data-theme="gold"] .jb-theme:hover,html[data-theme-pre="gold"] body .jb-theme:hover{color:#16160f;border-color:var(--accent-dim);}
body[data-theme="gold"] .jb-cta,html[data-theme-pre="gold"] body .jb-cta{background:#17170f;color:var(--accent);}
.jb-header.pegada{padding:.62rem 1.5rem;box-shadow:0 18px 40px -24px rgba(16,24,40,.8);}
body[data-theme="gold"] .jb-header.pegada,html[data-theme-pre="gold"] body .jb-header.pegada{box-shadow:0 18px 40px -24px rgba(0,0,0,1);}
.jb-nav{display:flex;gap:1.9rem;font-size:1rem;flex-wrap:wrap;align-items:center;}
/* Blanco pleno, no al 62 %: en la barra oscura todos los enlaces se leen
igual de bien. Antes la pestaña abierta se distinguía porque el resto
estaba apagado; ahora se distingue por color, que es más claro y no obliga
a penalizar la legibilidad de las otras cuatro.
El azul vivo de marca sobre la barra da 5,11, por encima del 4,5 exigible,
y se separa bien del blanco de al lado. El azul de texto (#1a6699) no vale
aquí: sobre este azul oscuro se hunde. */
.jb-nav a{text-decoration:none;color:#fff;letter-spacing:-.015em;
padding:.2rem 0;transition:color .18s ease;display:inline-flex;align-items:center;}
.jb-nav a:hover{color:var(--accent-vivo);}
.jb-nav a.on{color:var(--accent-vivo);font-weight:600;}
/* El cerebro acompaña a la pestaña seleccionada, no a la marca, y va en blanco.
Se pinta como imagen de fondo con filtro en vez de con máscara: el escalador
de imágenes del navegador tiene en cuenta la densidad de pantalla y filtra
mucho mejor que el rasterizador de máscaras, y `brightness(0) invert(1)`
deja cualquier original en blanco puro respetando la transparencia. */
.jb-nav a.on::before{content:"";width:31px;height:31px;margin-right:.55rem;flex:0 0 auto;
background:url(https://javbrain.com/wp-content/uploads/2022/12/logo.png) center/contain no-repeat;
filter:brightness(0) invert(1);}
.jb-header .right{margin-left:auto;display:flex;align-items:center;gap:1rem;}
/* Solo el texto del lockup. Va como ![]()
real dentro de una caja con overflow
—no como máscara— por el mismo motivo de calidad. El original mide 1342x328 y
las letras van de x=205 a x=1285; a 40px de alto eso son 25px de desplazamiento
y 132px de ancho visible. El filtro lo pasa a blanco. */
.jb-word{width:132px;height:40px;flex:0 0 auto;position:relative;overflow:hidden;opacity:1;}
.jb-word img{position:absolute;left:-25px;top:0;height:40px;width:auto;max-width:none;
filter:brightness(0) invert(1);}
.jb-theme{background:transparent;border:1px solid rgba(255,255,255,.22);color:#fff;
border-radius:999px;padding:.42rem .9rem;font-size:.8rem;cursor:pointer;font-family:inherit;
letter-spacing:-.01em;transition:color .18s ease,border-color .18s ease;}
.jb-theme:hover{color:#fff;border-color:var(--accent);}
.jb-cta{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:.55rem 1.3rem;
font-size:.92rem;font-weight:600;text-decoration:none;letter-spacing:-.015em;
transition:transform .18s ease,opacity .18s ease;}
.jb-cta:hover{transform:translateY(-1px);opacity:.92;}
/* Selector de idioma: bandera redonda a la derecha del Contacto. Va en SVG y no
en emoji porque Windows no dibuja los emoji de bandera —los muestra como las
dos letras del país— y el borrador se revisa en Windows. */
.jb-idioma{width:19px;height:19px;flex:0 0 auto;display:block;border-radius:50%;overflow:hidden;
border:1px solid rgba(255,255,255,.4);transition:transform .18s ease;}
.jb-idioma:hover{transform:translateY(-1px);}
body[data-theme="gold"] .jb-idioma,html[data-theme-pre="gold"] body .jb-idioma{border-color:rgba(0,0,0,.28);}
.jb-idioma svg{width:100%;height:100%;display:block;}
/* El botón de menú y el Contacto del panel los inyecta tema.js en todas las
páginas, pero solo se ven por debajo de 600 px. Ocultos aquí, la barra ancha
no cambia en nada aunque los dos elementos existan en el documento. */
/* `.jb-nav a` ya declara `display:inline-flex` y tiene una clase más, así que
un `.jb-cta-movil` a secas perdía y el botón se colaba en la barra ancha. */
.jb-nav a.jb-cta-movil{display:none;}
.jb-burger{display:none;flex-direction:column;align-items:center;justify-content:center;
flex:0 0 auto;
width:2.35rem;height:2.35rem;padding:0;border-radius:11px;cursor:pointer;
background:transparent;border:1px solid rgba(255,255,255,.22);
transition:background .18s ease,border-color .18s ease;}
.jb-burger:hover{border-color:var(--accent);}
.jb-burger span{display:block;width:1.05rem;height:2px;border-radius:2px;
background:rgba(255,255,255,.82);transition:transform .22s ease,opacity .18s ease;}
.jb-burger span + span{margin-top:4px;}
/* Abierto, las tres barras se cruzan en aspa: dice que ese mismo botón cierra. */
.jb-header.menu-abierto .jb-burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.jb-header.menu-abierto .jb-burger span:nth-child(2){opacity:0;}
.jb-header.menu-abierto .jb-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
body[data-theme="gold"] .jb-burger,html[data-theme-pre="gold"] body .jb-burger{border-color:rgba(0,0,0,.2);}
body[data-theme="gold"] .jb-burger span,html[data-theme-pre="gold"] body .jb-burger span{background:rgba(20,20,16,.75);}
@media(max-width:760px){.jb-header{padding:.7rem 1rem;gap:.5rem 1rem;margin:.7rem 1rem 0;}
.bloque{margin:1.2rem 1rem;}
.pie-grande,.hero-video{margin-left:1rem;margin-right:1rem;}
.jb-nav{gap:1.1rem;font-size:.92rem;}
.jb-nav a.on::before{width:21px;height:21px;margin-right:.4rem;}
.jb-word{display:none;}}
/* Aquí vivía el plegado antiguo de la barra —acciones arriba, navegación
debajo—, de cuando los cinco enlaces iban en la propia barra. Ya no: la
navegación es un panel y la barra lleva botón de menú, contraste y bandera
en UNA fila. Se quita entero en vez de dejarlo: su `.right{width:100%}`
seguía ganando —la regla nueva no declara `width`, así que no lo pisaba— y
mandaba el contraste y la bandera a una segunda fila. Ver el bloque de
móvil del final del fichero. */
.hero{padding:3.2rem 0 2.4rem;text-align:center;}
.hero .kicker{font-family:var(--geo);letter-spacing:.22em;text-transform:uppercase;
font-size:.72rem;color:var(--muted);}
.hero h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.1;margin:.6rem 0 .5rem;font-weight:900;
letter-spacing:-.02em;}
.hero .lema{color:var(--accent);font-weight:700;font-size:1.02rem;margin:0 0 1.4rem;}
.hero .acciones{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;}
.btn{border-radius:999px;padding:.62rem 1.3rem;font-size:.9rem;font-weight:700;text-decoration:none;
display:inline-block;border:0;cursor:pointer;font-family:inherit;}
/* Los botones sólidos van en el mismo azul marino de la barra, no en el azul de
acento: con la barra y el pie en ese tono, el acento quedaba como un tercer
azul suelto. En la paleta de oro se mantienen en oro. */
.btn-solid{background:var(--barra);color:#fff;}
body[data-theme="gold"] .btn-solid,html[data-theme-pre="gold"] body .btn-solid{background:var(--accent);color:var(--on-accent);}
.btn-ghost{border:1px solid var(--card-border);color:var(--ink);background:transparent;}
.sec{padding:2.6rem 0;}
.sec-hd{display:flex;align-items:baseline;gap:.8rem;border-bottom:1px solid var(--rule);
padding-bottom:.6rem;margin-bottom:1.6rem;}
.sec-title{font-size:1.18rem;font-weight:900;letter-spacing:-.01em;}
.sec-meta{margin-left:auto;font-size:.74rem;color:var(--muted);letter-spacing:.05em;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.1rem;}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:14px;
box-shadow:var(--card-shadow);padding:1.3rem 1.35rem;display:flex;flex-direction:column;}
.card h3{margin:0 0 .5rem;font-size:1.02rem;font-weight:800;line-height:1.3;}
.card .sub{margin:0 0 .7rem;color:var(--accent);font-size:.85rem;font-weight:700;}
.card p{margin:0 0 .7rem;color:var(--muted);font-size:.9rem;}
.card .resultado{margin:.2rem 0 0;font-size:.88rem;color:var(--ink);}
.card .mas{margin-top:.9rem;font-size:.82rem;font-weight:700;color:var(--accent);text-decoration:none;}
.pill{display:inline-block;background:var(--accent);color:var(--pill-text);font-family:var(--geo);
font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
padding:.22rem .6rem;border-radius:999px;margin-bottom:.7rem;align-self:flex-start;}
body[data-theme="gold"] .pill,html[data-theme-pre="gold"] body .pill{background:rgba(255,215,0,.14);}
.dos-col{display:grid;grid-template-columns:1.2fr .8fr;gap:1.6rem;align-items:start;}
@media(max-width:760px){.dos-col{grid-template-columns:1fr;}}
.dos-col p{color:var(--muted);margin:0 0 .9rem;}
.marca-panel{background:#16222e;border-radius:12px;padding:2.2rem 1.6rem;display:flex;
align-items:center;justify-content:center;border:1px solid var(--card-border);}
body[data-theme="gold"] .marca-panel,html[data-theme-pre="gold"] body .marca-panel{background:var(--card);}
.news{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:1.5rem;
box-shadow:var(--card-shadow);}
.news h3{margin:0 0 .3rem;font-size:1.05rem;font-weight:900;}
.news p{margin:0 0 1rem;color:var(--muted);font-size:.9rem;}
.news .fila{display:flex;gap:.6rem;flex-wrap:wrap;}
.news input[type=email],.news input[type=text],.news textarea{flex:1;min-width:14rem;background:var(--input-bg);
border:1px solid var(--card-border);color:var(--ink);border-radius:12px;padding:.6rem 1rem;
font-family:inherit;font-size:.88rem;}
.news input[type=email]{border-radius:999px;}
.news label{display:block;margin-top:.7rem;font-size:.76rem;color:var(--muted);}
footer{border-top:1px solid var(--rule);margin-top:2.4rem;padding:1.6rem 0 2.4rem;}
.pie{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;font-size:.8rem;color:var(--muted);}
.pie .legal{margin-left:auto;color:var(--footer-legal);display:flex;gap:1rem;flex-wrap:wrap;}
.pie a{text-decoration:none;}
.nota{max-width:74rem;margin:1.4rem auto 0;padding:.9rem 1.25rem;border:1px dashed var(--card-border);
border-radius:10px;font-size:.8rem;color:var(--muted);background:var(--card);}
/* ============================================================
Piezas que existen en el sitio real y hay que conservar:
vídeo de cabecera a pantalla completa, servicios en filas
horizontales con su imagen, cinta de opiniones, y el pie con
mapa, LinkedIn y correo. Solo cambian color y estilo.
============================================================ */
/* --- cabecera con vídeo: de día clara, de noche oscura ---
El mismo vídeo sirve para las dos paletas; lo que cambia es el velo que lleva
encima, el color del texto y el lockup del logotipo. La marca tiene una versión
para cada fondo y usar la equivocada deja el texto invisible, así que van las dos
en el HTML y el CSS enseña la que toca. */
.hero-video{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;
text-align:center;overflow:hidden;border-radius:18px;margin:1rem 3.5rem 0;
background:var(--bg2);}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-video .velo{position:absolute;inset:0;}
.hero-video .dentro{position:relative;z-index:2;padding:4rem 1.5rem;max-width:74rem;}
.hero-video .marca{height:74px;margin:0 auto 1.4rem;width:auto;}
.hero-video h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;font-weight:900;
letter-spacing:-.02em;margin:0 0 .7rem;}
.hero-video .lema{color:var(--accent);font-weight:700;font-size:clamp(1rem,1.7vw,1.25rem);margin:0 0 1.8rem;}
/* De día: el vídeo se aclara pero el cerebro se sigue leyendo, y en azul de marca.
El velo baja para no borrarlo; a cambio, detrás del texto va un halo claro para
que el titular no pierda contraste sobre las zonas con más detalle. */
.hero-video video{opacity:.75;
/* invert deja el cerebro claro pero gris cálido; sepia + hue-rotate + saturate
es lo que de verdad lo tiñe del azul de marca. */
filter:invert(1) grayscale(1) contrast(1.25) brightness(1.02)
sepia(1) hue-rotate(178deg) saturate(2.6);}
.hero-video .velo{background:
radial-gradient(58% 52% at 50% 52%,rgba(238,241,246,.7) 0%,rgba(238,241,246,.3) 58%,transparent 100%),
linear-gradient(180deg,rgba(238,241,246,.2),rgba(238,241,246,.5));}
.hero-video h1{color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.65);}
.hero-video .marca-oscuro{display:none;}
.hero-video .marca-claro{display:block;}
.hero-video .btn-ghost{color:var(--ink);border-color:var(--card-border);}
/* De noche: el vídeo recupera su aspecto original y el texto va en blanco. */
body[data-theme="gold"] .hero-video,html[data-theme-pre="gold"] body .hero-video{background:#080808;}
body[data-theme="gold"] .hero-video video,html[data-theme-pre="gold"] body .hero-video video{opacity:.5;filter:none;}
body[data-theme="gold"] .hero-video .velo,html[data-theme-pre="gold"] body .hero-video .velo{background:linear-gradient(180deg,rgba(8,8,8,.35),rgba(8,8,8,.85));}
body[data-theme="gold"] .hero-video h1,html[data-theme-pre="gold"] body .hero-video h1{color:#fff;}
body[data-theme="gold"] .hero-video .marca-oscuro,html[data-theme-pre="gold"] body .hero-video .marca-oscuro{display:block;}
body[data-theme="gold"] .hero-video .marca-claro,html[data-theme-pre="gold"] body .hero-video .marca-claro{display:none;}
body[data-theme="gold"] .hero-video .btn-ghost,html[data-theme-pre="gold"] body .hero-video .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5);}
body[data-theme="gold"] .hero-video .dentro p,html[data-theme-pre="gold"] body .hero-video .dentro p{color:#fff;}
/* --- servicios destacados de la portada: foto a la izquierda, servicios grandes apilados --- */
/* La foto acompaña a la lista: misma altura que los textos y difuminada por el
borde para que se funda con la página en vez de quedar como un recorte pegado. */
.destacados{display:grid;grid-template-columns:0.92fr 1.08fr;gap:1.8rem;align-items:stretch;}
@media(max-width:880px){.destacados{grid-template-columns:1fr;}}
.destacados .foto{border-radius:16px;overflow:hidden;position:relative;min-height:100%;}
.destacados .foto img{width:100%;height:100%;object-fit:cover;display:block;
-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,#000 55%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
mask-composite:intersect;}
.serv-item{border-bottom:1px solid var(--rule);padding:1.15rem 0;}
.serv-item:first-child{padding-top:0;}
.serv-item:last-child{border-bottom:0;}
.serv-item h3{margin:.1rem 0 .35rem;font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:900;
letter-spacing:-.01em;}
.serv-item p{margin:0;color:var(--muted);font-size:.97rem;}
.serv-item .mas{display:inline-block;margin-top:.6rem;font-size:.85rem;font-weight:700;
color:var(--accent);text-decoration:none;}
/* --- servicio en fila: imagen a un lado, texto al otro --- */
.fila-serv{display:grid;grid-template-columns:0.9fr 1.1fr;gap:2rem;align-items:center;
padding:2.2rem 0;border-bottom:1px solid var(--rule);}
.fila-serv:last-child{border-bottom:0;}
.fila-serv.invertida{grid-template-columns:1.1fr 0.9fr;}
.fila-serv.invertida .foto{order:2;}
@media(max-width:820px){.fila-serv,.fila-serv.invertida{grid-template-columns:1fr;}
.fila-serv.invertida .foto{order:0;}}
.fila-serv .foto{border-radius:16px;overflow:hidden;background:#16222e;border:1px solid var(--card-border);}
.fila-serv .foto img{width:100%;height:100%;object-fit:cover;}
.fila-serv h3{margin:.2rem 0 .3rem;font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:900;letter-spacing:-.01em;}
.fila-serv .sub{margin:0 0 1rem;color:var(--accent);font-weight:700;font-size:1rem;}
.fila-serv p{margin:0 0 .9rem;color:var(--muted);font-size:.98rem;}
.fila-serv .resultado{color:var(--ink);}
/* --- cinta de opiniones, como en el sitio: pasan de derecha a izquierda --- */
.cinta{overflow:hidden;position:relative;padding:.4rem 0;}
.cinta::before,.cinta::after{content:"";position:absolute;top:0;bottom:0;width:5rem;z-index:2;pointer-events:none;}
.cinta::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}
.cinta::after{right:0;background:linear-gradient(270deg,var(--bg),transparent);}
.cinta-pista{display:flex;gap:1.1rem;width:max-content;animation:desfile 70s linear infinite;}
.cinta:hover .cinta-pista{animation-play-state:paused;}
@keyframes desfile{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.cinta-pista{animation:none;}
.cinta{overflow-x:auto;} }
.op{flex:0 0 22rem;background:var(--card);border:1px solid var(--card-border);border-radius:14px;
box-shadow:var(--card-shadow);padding:1.2rem 1.3rem;display:flex;flex-direction:column;}
.op p{margin:0 0 .8rem;font-size:.88rem;color:var(--muted);}
.op .firma{font-size:.82rem;font-weight:700;margin-top:auto;}
.op .estrellas{font-size:.74rem;color:var(--accent);}
/* El rótulo de la sección dice cómo se maneja la cinta, y eso cambia según
haya ratón o dedo. Las dos frases están en el HTML y manda el ancho. */
.solo-tacto{display:none;}
/* --- equipo con foto --- */
.persona{background:var(--card);border:1px solid var(--card-border);border-radius:16px;
box-shadow:var(--card-shadow);overflow:hidden;display:flex;flex-direction:column;}
.persona .retrato{aspect-ratio:4/3;background:#16222e;}
.persona .retrato img{width:100%;height:100%;object-fit:cover;}
.persona .txt{padding:1.4rem 1.5rem;}
.persona h3{margin:0 0 .15rem;font-size:1.15rem;font-weight:900;}
.persona .rol{margin:0 0 .9rem;color:var(--accent);font-size:.8rem;font-weight:700;
font-family:var(--geo);letter-spacing:.08em;text-transform:uppercase;}
.persona p{margin:0 0 .8rem;color:var(--muted);font-size:.9rem;}
.persona .li{font-size:.82rem;font-weight:700;color:var(--accent);text-decoration:none;}
/* --- pie compacto: marca, dos columnas de enlaces, mapa y línea legal ---
Cuatro columnas en vez de tres: separar «Navegación» de «Contacto» reparte la
altura y evita que una columna crezca mientras la de la marca queda vacía. La
línea legal entra dentro de la caja, separada por un filete, en vez de flotar
suelta debajo. El mapa baja de 300 a 180 px: ahí solo hace falta situar, no
navegar, y para eso está el enlace «Cómo llegar».
El lockup tiene una versión por fondo y por paleta: el -9 (azul/blanco) con la
paleta azul y el -10 (oro/blanco) con la de oro. */
.pie-grande{background:var(--barra);border:1px solid var(--barra-borde);border-radius:20px;
margin:2.6rem 2.8rem;padding:.5rem 4.6rem .9rem;
display:grid;grid-template-columns:1.3fr .9fr 1.15fr;gap:.25rem 1.4rem;
align-items:center;color:#fff;}
/* Cada columna centrada en su hueco, y las de texto centradas también en
vertical contra el mapa: así el pie no crece más allá del alto del mapa. */
.pie-grande .col-nav,.pie-grande .col-dat{text-align:center;}
.pie-grande .col-nav .enlaces{justify-items:center;}
.pie-grande .col-dat .enlaces{align-items:center;}
.pie-grande .enlaces a{margin:0 auto;}
@media(max-width:1020px){.pie-grande{grid-template-columns:1.2fr 1fr 1.2fr;margin:2rem 1.5rem;}
.pie-grande .col-mapa{grid-column:1/-1;margin-top:.6rem;}}
@media(max-width:660px){.pie-grande{grid-template-columns:1fr 1fr;padding:1.6rem 1.4rem 1.2rem;margin:1.6rem 1rem;}
.pie-grande .col-marca{grid-column:1/-1;}}
/* Columna de marca centrada: lockup, lema e iconos en el mismo eje. */
.pie-grande .col-marca{display:flex;flex-direction:column;align-items:center;text-align:center;}
.pie-grande .marca{height:106px;width:auto;margin:0 auto 1rem;}
.pie-grande .lk-oro{display:none;}
body[data-theme="gold"] .pie-grande .lk-azul,html[data-theme-pre="gold"] body .pie-grande .lk-azul{display:none;}
body[data-theme="gold"] .pie-grande .lk-oro,html[data-theme-pre="gold"] body .pie-grande .lk-oro{display:block;}
/* El lema del pie no lleva el azul de acento como el resto de enlaces: va en
el color opuesto a su fondo —blanco sobre el pie azul, negro sobre el pie
claro de la paleta de oro—. Es la unica frase del pie con este tratamiento;
el lema del hero no se toca. */
.pie-grande .lema{color:#fff;font-weight:600;font-size:1.06rem;letter-spacing:-.01em;
line-height:1.45;margin:0 auto .8rem;max-width:24rem;}
/* Al 42 % estos rótulos medían 3,97 sobre el azul del pie, por debajo del
4,5 exigible. Al 62 % dan 6,62 y siguen leyéndose como rótulo secundario,
que es lo que son: la jerarquía la marcan el cuerpo y el espaciado, no lo
apagado que esté el gris. */
.pie-grande h4{margin:0 0 .75rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
font-weight:700;color:rgba(255,255,255,.62);}
.pie-grande .enlaces{display:flex;flex-direction:column;gap:.45rem;}
/* Navegación a dos columnas: seis enlaces en una sola fila hacían la columna
mucho más alta que las demás. */
.pie-grande .col-nav .enlaces{display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1rem;}
.pie-grande .enlaces a{color:rgba(255,255,255,.78);text-decoration:none;font-size:1rem;
line-height:1.4;letter-spacing:-.01em;transition:color .18s ease;width:fit-content;}
.pie-grande .enlaces a:hover{color:var(--accent);}
.iconos{display:flex;gap:.6rem;justify-content:center;align-self:center;}
/* Logotipo, lema e iconos comparten eje: los tres centrados en la columna de
marca. Antes los iconos iban 2,2rem a la izquierda y el logotipo algo a la
derecha; se retiran los dos desplazamientos (decisión del 16/09, que revierte
la anterior). `.col-marca` ya centra en columna, así que basta con no
moverlos. */
.iconos a{width:3.1rem;height:3.1rem;border-radius:14px;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);color:#fff;
display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;
font-size:1.2rem;transition:background .18s ease,border-color .18s ease,color .18s ease;}
.iconos a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
/* El filete y la línea legal son una sola pieza, en las dos columnas centrales
y dentro de la banda que ocupan la marca y el mapa: por eso esos dos rebasan
la línea por izquierda y derecha. Pegada al inicio de la fila 2, la pieza
sube hasta justo debajo de navegación y contacto en vez de caer al fondo. */
/* El mapa se centra en su hueco en vez de ir pegado al canto derecho. */
.pie-grande .col-mapa{display:flex;align-items:center;justify-content:center;}
.pie-grande .col-mapa .mapa{width:93%;transform:translate(11px,3px);}
/* Navegación y contacto bajan un poco para no quedar tan altas frente al mapa. */
.pie-grande .col-nav,.pie-grande .col-dat{padding-top:1.4rem;}
.pie-grande .col-marca,.pie-grande .col-mapa{grid-row:1/3;}
.pie-grande .col-nav,.pie-grande .col-dat{grid-row:1;}
.pie-legal{grid-column:2 / 3;grid-row:2;align-self:start;display:flex;flex-wrap:wrap;
justify-content:center;text-align:center;gap:.3rem 1.6rem;
margin-top:1rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.16);
font-size:.83rem;color:rgba(255,255,255,.55);}
.pie-legal a{text-decoration:none;transition:color .18s ease;}
.pie-legal a:hover{color:var(--accent);}
/* En la paleta de oro el pie es gris claro, como la cabecera, así que hay que
darle la vuelta a todo su contenido. El lockup se pasa a negro con un filtro:
la guía de marca no tiene una versión de oro sobre fondo claro —solo azul
sobre claro y oro sobre oscuro—, y el monocromo negro es la salida limpia,
además de ser lo mismo que ya hace el logotipo de la barra de arriba. */
body[data-theme="gold"] .pie-grande,html[data-theme-pre="gold"] body .pie-grande{color:#17170f;}
body[data-theme="gold"] .pie-grande .marca,html[data-theme-pre="gold"] body .pie-grande .marca{filter:brightness(0);}
body[data-theme="gold"] .pie-grande .lema,html[data-theme-pre="gold"] body .pie-grande .lema{color:#17170f;}
body[data-theme="gold"] .pie-grande h4,html[data-theme-pre="gold"] body .pie-grande h4{color:rgba(23,23,15,.48);}
body[data-theme="gold"] .pie-grande .enlaces a,html[data-theme-pre="gold"] body .pie-grande .enlaces a{color:rgba(23,23,15,.74);}
body[data-theme="gold"] .pie-grande .enlaces a:hover,html[data-theme-pre="gold"] body .pie-grande .enlaces a:hover{color:#6f5a00;}
body[data-theme="gold"] .iconos a,html[data-theme-pre="gold"] body .iconos a{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.18);color:#17170f;}
body[data-theme="gold"] .iconos a:hover,html[data-theme-pre="gold"] body .iconos a:hover{background:#17170f;border-color:#17170f;color:var(--accent);}
body[data-theme="gold"] .pie-legal,html[data-theme-pre="gold"] body .pie-legal{border-top-color:rgba(0,0,0,.18);color:rgba(23,23,15,.52);}
body[data-theme="gold"] .pie-legal a:hover,html[data-theme-pre="gold"] body .pie-legal a:hover{color:#6f5a00;}
/* El embed de Google llega en azul saturado y con el zoom demasiado abierto.
El mapa va en sus colores originales en las dos paletas, sin filtro. La ficha grande
se sustituye por un solo enlace flotante: la dirección ya está en la columna
de al lado y repetirla dentro del mapa era ruido. */
.mapa{position:relative;border-radius:14px;overflow:hidden;
border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 30px -20px rgba(0,0,0,.7);}
body[data-theme="gold"] .mapa,html[data-theme-pre="gold"] body .mapa{border-color:rgba(0,0,0,.16);}
.mapa iframe{display:block;width:100%;height:244px;border:0;}
.mapa .ir{position:absolute;right:.6rem;bottom:.6rem;font-size:.74rem;font-weight:700;
text-decoration:none;color:var(--on-accent);background:var(--accent);border-radius:999px;
padding:.34rem .8rem;white-space:nowrap;box-shadow:0 6px 18px -8px rgba(0,0,0,.7);}
/* ============================================================
CAPA DE ESTILO DEL SITIO — registro Apple
Estaba dentro de inicio.html y se sube aquí para que las cuatro
pestañas compartan exactamente el mismo sistema. Va al final del
fichero a propósito: muchas de estas reglas son afinados que tienen
que ganar a las de arriba (el aire de .sec, el fondo de .op, etc.).
============================================================ */
body{-webkit-font-smoothing:antialiased;}
.wrap{max-width:110rem;}
/* Una sola superficie para todos los bloques de texto: gris muy claro con un
punto de azul, para que no sea un gris muerto. Todo lo que lleva texto —
servicios, sobre nosotros, opiniones y FAQs— usa esta misma clase, así el
ojo lee una sola familia de fondos en vez de cuatro tratamientos distintos. */
:root{--panel:#e7edf6;--panel-borde:rgba(44,62,80,.08);}
body[data-theme="gold"],html[data-theme-pre="gold"] body{--panel:#151515;--panel-borde:rgba(255,255,255,.09);}
.panel{background:var(--panel);border:1px solid var(--panel-borde);border-radius:22px;}
/* Aire: el ritmo entre secciones es lo que más "caro" hace parecer un sitio. */
.sec{padding:5.5rem 0;}
.sec-hd{border:0;padding:0;margin-bottom:2.6rem;display:block;}
.sec-title{display:block;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.035em;
line-height:1.05;}
.sec-meta{display:block;margin:.6rem 0 0;font-size:.95rem;color:var(--muted);letter-spacing:0;}
/* Cabecera: titular más grande y muy apretado, como los de Apple.
El lockup manda: grande y con aire por arriba antes del titular. */
.hero-video{min-height:88vh;border-radius:26px;}
.hero-video h1{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.04em;font-weight:700;line-height:1.03;}
.hero-video .lema{font-size:clamp(1.05rem,1.8vw,1.4rem);font-weight:500;letter-spacing:-.01em;}
.hero-video .marca{height:clamp(84px,10.4vw,146px);margin:0 auto 2.8rem;opacity:.97;}
.hero-video .dentro{padding:8rem 1.5rem 5rem;}
@media(max-width:700px){.hero-video .dentro{padding:5.5rem 1.25rem 3.5rem;}}
/* La capa blanca sutil que pediste: va entre el vídeo y el texto, no sobre todo
el bloque, para que el cerebro siga viéndose alrededor. */
.hero-video .dentro::before{content:"";position:absolute;inset:-8% -6%;z-index:-1;
background:radial-gradient(58% 60% at 50% 50%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.28) 45%,transparent 78%);
filter:blur(6px);}
body[data-theme="gold"] .hero-video .dentro::before,html[data-theme-pre="gold"] body .hero-video .dentro::before{background:none;}
/* Botones: cápsula limpia, sin sombra dura. */
.btn{padding:.85rem 1.7rem;font-size:.98rem;font-weight:500;letter-spacing:-.01em;
transition:transform .18s ease, opacity .18s ease;}
.btn:hover{transform:translateY(-1px);opacity:.92;}
.btn-ghost{backdrop-filter:blur(8px);background:rgba(255,255,255,.35);}
body[data-theme="gold"] .btn-ghost,html[data-theme-pre="gold"] body .btn-ghost{background:rgba(255,255,255,.06);}
/* Servicios: tipografía grande, separadores finísimos, sin cajas. */
.serv-item{padding:1.9rem 0;border-color:rgba(44,62,80,.09);}
body[data-theme="gold"] .serv-item,html[data-theme-pre="gold"] body .serv-item{border-color:rgba(255,255,255,.08);}
.serv-item h3{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:700;letter-spacing:-.03em;}
.serv-item p{font-size:1.04rem;line-height:1.62;max-width:44rem;}
.pill{background:transparent;color:var(--accent);border:1px solid currentColor;font-family:var(--sans);
letter-spacing:.02em;text-transform:none;font-size:.72rem;font-weight:600;padding:.2rem .7rem;}
body[data-theme="gold"] .pill,html[data-theme-pre="gold"] body .pill{background:transparent;}
/* --- Visual de arquitectura, dibujado en vector -------------------------
Sustituye la captura antigua del sitio. Al ser vector es nítido a
cualquier densidad de pantalla (no hay un "2x" que se quede corto),
se adapta a las dos paletas y no envejece como una captura de UI. */
.visual{border-radius:22px;overflow:hidden;position:relative;min-height:100%;
background:var(--panel);border:1px solid var(--panel-borde);}
/* Aire propio del panel de servicios: sin esto la primera etiqueta queda casi
pegada al canto superior del recuadro. */
.lista{padding:1.6rem 2.5rem 1.8rem;}
.lista .serv-item:last-child{border-bottom:0;}
@media(max-width:520px){.lista{padding:.4rem 1.3rem 1rem;}}
.visual svg{position:absolute;inset:0;width:100%;height:100%;color:#3498db;}
body[data-theme="gold"] .visual svg,html[data-theme-pre="gold"] body .visual svg{color:#ffd700;}
.visual .luz{position:absolute;inset:0;
background:radial-gradient(72% 46% at 26% 6%,rgba(255,255,255,.92),transparent 64%),
radial-gradient(52% 42% at 84% 90%,rgba(52,152,219,.2),transparent 72%);}
body[data-theme="gold"] .visual .luz,html[data-theme-pre="gold"] body .visual .luz{
background:radial-gradient(72% 46% at 26% 6%,rgba(255,215,0,.13),transparent 64%),
radial-gradient(52% 42% at 84% 90%,rgba(255,215,0,.07),transparent 72%);}
.visual .vidrio{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(112deg,transparent 33%,rgba(255,255,255,.3) 47%,transparent 58%);}
body[data-theme="gold"] .visual .vidrio,html[data-theme-pre="gold"] body .visual .vidrio{
background:linear-gradient(112deg,transparent 35%,rgba(255,215,0,.05) 48%,transparent 60%);}
/* --- Sobre nosotros: un solo color plano en el panel y las fotos alineadas
exactamente con él, arriba y abajo (stretch, sin desplazamientos). --- */
.dos-col{grid-template-columns:1.05fr .95fr;gap:1.6rem;align-items:stretch;}
.panel-txt{padding:2.6rem 2.3rem;display:flex;flex-direction:column;justify-content:center;}
.panel-txt p{font-size:1.04rem;line-height:1.66;color:var(--muted);}
/* Un solo parrafo, en el cuerpo normal: antes el primero iba mas grande y en
tinta fuerte, y con los dos textos fundidos ya no hay dos niveles. */
.panel-txt .btn-ghost{align-self:flex-start;background:rgba(255,255,255,.5);}
body[data-theme="gold"] .panel-txt .btn-ghost,html[data-theme-pre="gold"] body .panel-txt .btn-ghost{background:rgba(255,255,255,.05);}
.equipo-foto{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
/* Sin recortar: la foto entra completa sobre el mismo fondo del panel de al lado,
así que las bandas que sobran arriba y abajo son del color de la sección y no
se ve una caja distinta. Recortar obligaba a acercarse mucho para esconder el
logotipo que los originales llevan impreso, y por eso salían tan de cerca. */
.equipo-foto figure{margin:0;position:relative;border-radius:22px;overflow:hidden;
background:var(--panel);border:1px solid var(--panel-borde);}
.equipo-foto img{width:100%;height:100%;object-fit:contain;filter:saturate(.94) contrast(1.02);}
.equipo-foto figcaption{position:absolute;left:.55rem;right:.55rem;bottom:.55rem;border-radius:13px;
padding:.5rem .75rem;font-size:.82rem;font-weight:600;letter-spacing:-.015em;color:#2c3e50;
background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(12px) saturate(1.4);
backdrop-filter:blur(12px) saturate(1.4);}
body[data-theme="gold"] .equipo-foto figcaption,html[data-theme-pre="gold"] body .equipo-foto figcaption{background:rgba(12,12,12,.74);color:#fff;}
.equipo-foto figcaption span{display:block;font-weight:400;font-size:.73rem;color:var(--accent);}
@media(max-width:760px){.equipo-foto figure{transform:none;}}
/* --- Opiniones: el mismo panel claro que el resto de bloques de texto --- */
/* Los degradados de los bordes de la cinta tienen que fundir con la superficie
de la sección, no con el fondo de la página, o se ve una banda más oscura. */
.cinta::before{background:linear-gradient(90deg,var(--sup),transparent);}
.cinta::after{background:linear-gradient(270deg,var(--sup),transparent);}
.op{border-radius:20px;padding:1.7rem 1.75rem;border:1px solid rgba(44,62,80,.08);}
.op p{font-size:.95rem;line-height:1.62;}
.op .firma{letter-spacing:-.01em;}
/* --- FAQs: dos columnas, fondo propio y acordeón limpio -------------------- */
.faqs{position:relative;padding:5rem 0;}
.faq-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:3rem;align-items:start;}
@media(max-width:880px){.faq-grid{grid-template-columns:1fr;gap:1.8rem;}}
.faq-intro{position:sticky;top:7rem;}
.faq-intro .sec-title{display:block;margin-bottom:1rem;}
.faq-intro p{color:var(--muted);font-size:1rem;line-height:1.62;margin:0 0 1.7rem;max-width:24rem;}
.faq-lista{padding:.5rem 2.1rem;}
@media(max-width:520px){.faq-lista{padding:.4rem 1.2rem;}}
.faq{border-bottom:1px solid rgba(44,62,80,.09);}
body[data-theme="gold"] .faq,html[data-theme-pre="gold"] body .faq{border-bottom-color:rgba(255,255,255,.07);}
.faq:last-of-type{border-bottom:0;}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:1.35rem 2.6rem 1.35rem 0;
font-size:1.05rem;font-weight:600;letter-spacing:-.02em;line-height:1.42;
transition:color .18s ease;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--accent);}
.faq summary::after{content:"";position:absolute;right:.45rem;top:1.62rem;width:.6rem;height:.6rem;
border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);border-radius:1px;
transform:rotate(45deg);transition:transform .24s ease;}
.faq[open] summary::after{transform:rotate(-135deg);}
.faq p{margin:0 0 1.4rem;font-size:1rem;line-height:1.68;color:var(--muted);max-width:52rem;}
/* --- Móvil: el mismo diseño, plegado. Solo cambian rejillas y aire, ningún
color, tipografía ni componente. --- */
@media(max-width:820px){
.dos-col{grid-template-columns:1fr;}
.panel-txt{padding:1.9rem 1.5rem;}
}
@media(max-width:640px){
.sec{padding:3.2rem 0;}
.faqs{padding:3rem 0;}
.sec-hd{margin-bottom:1.6rem;}
.equipo-foto{grid-template-columns:1fr;}
.op{flex:0 0 17rem;padding:1.3rem 1.35rem;}
.lista{padding:.3rem 1.2rem 1rem;}
.serv-item{padding:1.4rem 0;}
.visual{min-height:19rem;}
.faq-intro{position:static;}
}
/* ============================================================
SERVICIOS con el mismo sistema que la portada
Cada línea de servicio es una pareja visual + panel de texto, con el
mismo panel claro, el mismo aire y los mismos visuales en vector que
sustituyen a las capturas antiguas del sitio.
============================================================ */
.fila-serv{display:grid;grid-template-columns:.82fr 1.18fr;gap:1.5rem;align-items:stretch;
border:0;padding:0;margin:0 0 1.6rem;}
.fila-serv:last-child{margin-bottom:0;}
.fila-serv.invertida{grid-template-columns:1.18fr .82fr;}
.fila-serv.invertida .visual{order:2;}
@media(max-width:880px){.fila-serv,.fila-serv.invertida{grid-template-columns:1fr;}
.fila-serv.invertida .visual{order:0;}
.fila-serv .visual{min-height:15rem;}}
.fila-serv .txt{padding:2rem 2.1rem;display:flex;flex-direction:column;justify-content:center;}
@media(max-width:520px){.fila-serv .txt{padding:1.5rem 1.3rem;}}
.fila-serv h3{margin:.35rem 0 .35rem;font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:700;
letter-spacing:-.03em;line-height:1.1;}
.fila-serv .sub{margin:0 0 1rem;color:var(--accent);font-weight:600;font-size:1.02rem;
letter-spacing:-.015em;}
.fila-serv p{margin:0 0 .9rem;color:var(--muted);font-size:1.02rem;line-height:1.62;}
.fila-serv .resultado{color:var(--ink);font-size:1rem;}
.fila-serv .mas{margin-top:.4rem;font-size:.95rem;font-weight:600;color:var(--accent);
text-decoration:none;letter-spacing:-.015em;align-self:flex-start;}
.fila-serv .mas:hover{text-decoration:underline;}
/* Cabecera corta: en las páginas interiores el vídeo se recortaba por arriba y
por abajo, y el cerebro salía cortado. Con `contain` entra el fotograma
entero —el cerebro se ve más pequeño pero completo— y el hueco que queda a
los lados lo cubre un degradado del mismo tono que el resto de la cabecera. */
.hero-video.hero-corto video{object-fit:contain;transform:scale(1.51);
-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);
mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);}
.hero-video.hero-corto{background:
radial-gradient(60% 100% at 50% 50%,#ffffff 0%,#f2f6fb 55%,#e9eff7 100%);}
body[data-theme="gold"] .hero-video.hero-corto,html[data-theme-pre="gold"] body .hero-video.hero-corto{background:
radial-gradient(60% 100% at 50% 50%,#141414 0%,#0d0d0d 60%,#080808 100%);}
/* Variante estrecha del bloque: 1 cm menos por cada lado. La usa Servicios,
donde el contenido es más denso y la caja a ancho completo pesaba demasiado.
Va como modificador y no tocando .bloque para no mover la portada. */
.bloque.estrecho{margin-left:5.9rem;margin-right:5.9rem;}
@media(max-width:1020px){.bloque.estrecho{margin-left:2.6rem;margin-right:2.6rem;}}
@media(max-width:760px){.bloque.estrecho{margin-left:1rem;margin-right:1rem;}}
/* ============================================================
RECURSOS: no es una pestana, es un desplegable
En javbrain.com "Recursos" no lleva a ninguna pagina propia: el enlace de
cabecera apunta a /blog/ y cuelgan de el siete categorias. Se reproduce
igual, con las siete URL reales del sitio.
Se abre al pasar el raton y tambien con el teclado (:focus-within), y el
::after tapa el hueco entre la barra y el panel para que no se cierre al
bajar el cursor.
============================================================ */
.jb-menu{position:relative;display:inline-flex;align-items:center;}
.jb-menu::after{content:"";position:absolute;top:100%;left:0;right:0;height:1.1rem;}
.jb-caret{width:.4rem;height:.4rem;margin-left:.45rem;flex:0 0 auto;
border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
transform:rotate(45deg) translate(-1px,-2px);transition:transform .2s ease;}
.jb-menu:hover .jb-caret,.jb-menu:focus-within .jb-caret{transform:rotate(-135deg) translate(1px,1px);}
.jb-desplegable{position:absolute;top:calc(100% + 1rem);left:-.9rem;min-width:15.5rem;z-index:90;
background:var(--sup);border:1px solid var(--sup-borde);border-radius:14px;padding:.45rem;
box-shadow:0 22px 48px -24px rgba(16,24,40,.7);
display:flex;flex-direction:column;gap:.05rem;
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.jb-menu:hover .jb-desplegable,.jb-menu:focus-within .jb-desplegable{opacity:1;visibility:visible;transform:none;}
.jb-desplegable a{color:var(--ink);font-size:.93rem;font-weight:400;letter-spacing:-.012em;
padding:.52rem .7rem;border-radius:9px;text-decoration:none;white-space:nowrap;
transition:background .15s ease,color .15s ease;}
.jb-desplegable a:hover{background:var(--quote-bg);color:var(--accent);}
@media(max-width:600px){
.jb-desplegable{left:auto;right:auto;min-width:13rem;max-width:calc(100vw - 3rem);}
.jb-desplegable a{white-space:normal;}
}
/* En la paleta de oro el desplegable colgaba en #0d0d0d sobre una pagina casi
negra y no se veia. Va en el mismo gris claro que la barra, para que se lea
como una prolongacion de ella y no como una caja flotando en el vacio. */
body[data-theme="gold"] .jb-desplegable,html[data-theme-pre="gold"] body .jb-desplegable{background:#dcdcd6;border-color:rgba(0,0,0,.14);
box-shadow:0 22px 48px -22px rgba(0,0,0,1);}
body[data-theme="gold"] .jb-desplegable a,html[data-theme-pre="gold"] body .jb-desplegable a{color:#17170f;}
body[data-theme="gold"] .jb-desplegable a:hover,html[data-theme-pre="gold"] body .jb-desplegable a:hover{background:rgba(0,0,0,.07);color:#6f5a00;}
/* El panel del menú de móvil, por lo mismo: en la paleta de oro `--sup` es
casi negro y colgaría una caja oscura de una barra clara. Va en el mismo
gris que el desplegable, que ahí dentro vive. */
@media(max-width:600px){
body[data-theme="gold"] .jb-header .jb-nav,html[data-theme-pre="gold"] body .jb-header .jb-nav{background:#dcdcd6;
border-color:rgba(0,0,0,.14);box-shadow:0 22px 48px -22px rgba(0,0,0,1);}
/* El botón de Contacto queda fuera: su color lo pone `.jb-cta`, que en oro
es negro con texto dorado. Sin excluirlo, esta regla le pintaba el texto
del mismo negro que su fondo. */
body[data-theme="gold"] .jb-header .jb-nav > a:not(.jb-cta-movil),html[data-theme-pre="gold"] body .jb-header .jb-nav > a:not(.jb-cta-movil),body[data-theme="gold"] .jb-header .jb-menu > a,html[data-theme-pre="gold"] body .jb-header .jb-menu > a{color:#17170f;}
/* Dentro del panel el desplegable ya no es una caja: hereda su fondo. */
body[data-theme="gold"] .jb-desplegable,html[data-theme-pre="gold"] body .jb-desplegable{background:none;box-shadow:none;}
}
/* ============================================================
RECURSOS: rejilla de fichas de post, cuatro por fila
Mismo panel claro que el resto del sitio. La imagen va en 16:10 recortada,
asi que da igual el formato original de cada portada: la rejilla no se
desalinea. Baja a 3, 2 y 1 columna segun el ancho.
============================================================ */
.rejilla-posts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;}
@media(max-width:1180px){.rejilla-posts{grid-template-columns:repeat(3,1fr);}}
@media(max-width:860px){.rejilla-posts{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.rejilla-posts{grid-template-columns:1fr;}}
.post{background:var(--panel);border:1px solid var(--panel-borde);border-radius:18px;
overflow:hidden;display:flex;flex-direction:column;
transition:transform .18s ease,box-shadow .18s ease;}
.post:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(16,24,40,.55);}
.post-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sup);}
.post-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.post:hover .post-img img{transform:scale(1.04);}
.post-sin-img{display:block;aspect-ratio:16/10;
background:linear-gradient(150deg,var(--sup),var(--panel));}
.post-txt{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;flex:1;}
.post time{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
color:var(--muted);font-weight:600;}
.post h3{margin:0;font-size:1.02rem;line-height:1.32;font-weight:600;letter-spacing:-.02em;}
.post h3 a{text-decoration:none;color:var(--ink);transition:color .15s ease;}
.post h3 a:hover{color:var(--accent);}
.post p{margin:0;font-size:.9rem;line-height:1.5;color:var(--muted);}
/* Cabecera de seccion sin titulo: en las paginas de Recursos el nombre de la
categoria ya va en la cabecera con el video, y repetirlo dentro del bloque
sobraba. Queda solo la linea de conteo. */
.sec-hd.sin-titulo{margin-bottom:1.8rem;}
.sec-hd.sin-titulo .sec-meta{margin-top:0;}
/* Conteo de articulos bajo el titulo de la cabecera: discreto, para que no
compita con el nombre de la categoria. Al sacarlo del bloque, la rejilla de
posts sube y se ve mas contenido sin hacer scroll. */
.hero-video .conteo{margin:.9rem 0 0;font-size:.85rem;letter-spacing:.04em;
color:var(--muted);font-weight:500;opacity:.85;}
body[data-theme="gold"] .hero-video .conteo,html[data-theme-pre="gold"] body .hero-video .conteo{color:rgba(255,255,255,.62);}
.sec.bloque.estrecho > .wrap > .rejilla-posts:first-child{margin-top:.4rem;}
/* ============================================================
SOBRE NOSOTROS con el sistema del resto del sitio
============================================================ */
/* Panel de marca: pasa del azul macizo al mismo panel claro que los textos,
con el lockup que corresponde a cada paleta. */
.marca-panel{background:var(--panel);border:1px solid var(--panel-borde);border-radius:22px;
padding:2.4rem 1.8rem;display:flex;align-items:center;justify-content:center;}
.marca-panel img{height:clamp(84px,9vw,124px);width:auto;}
.marca-panel .lk-oscuro{display:none;}
body[data-theme="gold"] .marca-panel .lk-claro,html[data-theme-pre="gold"] body .marca-panel .lk-claro{display:none;}
body[data-theme="gold"] .marca-panel .lk-oscuro,html[data-theme-pre="gold"] body .marca-panel .lk-oscuro{display:block;}
/* Fichas del equipo: mismo panel, mismo radio y misma tipografia que el resto. */
.grid{gap:1.4rem;}
.persona{background:var(--panel);border:1px solid var(--panel-borde);border-radius:22px;
box-shadow:none;overflow:hidden;}
.persona .retrato{aspect-ratio:16/11;background:var(--sup);}
.persona .retrato img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.persona .txt{padding:1.6rem 1.7rem 1.8rem;}
.persona h3{margin:0 0 .2rem;font-size:1.3rem;font-weight:700;letter-spacing:-.025em;}
.persona .rol{margin:0 0 1rem;color:var(--accent);font-size:.85rem;font-weight:600;
letter-spacing:.02em;text-transform:none;}
.persona p{margin:0 0 .85rem;color:var(--muted);font-size:.98rem;line-height:1.6;}
.persona .li{font-size:.92rem;font-weight:600;color:var(--accent);text-decoration:none;
letter-spacing:-.015em;}
.persona .li:hover{text-decoration:underline;}
/* Cierre: el mismo video, con mas zoom aunque el cerebro salga cortado. */
.hero-video.hero-cierre video{transform:scale(2.15);}
.hero-video.hero-cierre{margin-top:2.2rem;}
/* Foto real en la columna de servicios destacados: sin recuadro ni borde, y con
los cuatro cantos difuminados con una mascara para que se funda con el fondo
de la seccion en vez de recortarse como una caja. El lado derecho se desvanece
antes que el resto, que es el que da al texto. */
.visual.foto{background:none;border:0;box-shadow:none;overflow:hidden;border-radius:0;}
.visual.foto img{width:100%;height:100%;object-fit:cover;display:block;
-webkit-mask-image:
linear-gradient(to right,transparent 0,#000 9%,#000 84%,transparent 100%),
linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-image:
linear-gradient(to right,transparent 0,#000 9%,#000 84%,transparent 100%),
linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
-webkit-mask-composite:source-in;mask-composite:intersect;}
/* Foto y panel montados, no uno al lado del otro: la foto se mete por debajo
del texto y sobresale por arriba y por abajo, y el panel se vuelve traslucido
con desenfoque de fondo, asi que la imagen se intuye detras de las palabras. */
.destacados{gap:0;}
.destacados .visual.foto{margin:-2rem -5.5rem -2rem 0;z-index:0;}
.destacados .lista{position:relative;z-index:1;
background:rgba(231,237,246,.90);
-webkit-backdrop-filter:blur(18px) saturate(1.15);
backdrop-filter:blur(18px) saturate(1.15);
box-shadow:0 24px 60px -34px rgba(16,24,40,.55);}
body[data-theme="gold"] .destacados .lista,html[data-theme-pre="gold"] body .destacados .lista{background:rgba(21,21,21,.88);
box-shadow:0 24px 60px -34px rgba(0,0,0,.95);}
@media(max-width:880px){
.destacados{gap:1.4rem;}
.destacados .visual.foto{margin:0;}
.destacados .lista{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;}
}
/* FAQs montadas: la foto no ocupa sitio en la columna, va detras de todo. El
titulo, el parrafo y el boton se apoyan encima, y por la derecha la imagen se
mete por debajo del acordeon, que es traslucido con desenfoque. */
.faq-grid{gap:0;}
.faq-intro{z-index:0;}
.faq-intro > .sec-title,.faq-intro > p,.faq-intro > .btn{position:relative;z-index:1;}
/* La foto se baja hasta apoyarse en el fondo del acordeon: la columna de la
izquierda es mucho mas corta que la caja de preguntas, asi que centrarla en
ella la dejaba flotando muy arriba. */
.faq-foto{position:absolute;left:-4%;top:50%;transform:translateY(-24%);
width:140%;z-index:0;pointer-events:none;opacity:.82;}
.faq-foto img{width:100%;display:block;
-webkit-mask-image:
linear-gradient(to right,#000 0,#000 62%,transparent 96%),
linear-gradient(to bottom,transparent 0,#000 10%,#000 88%,transparent 100%);
mask-image:
linear-gradient(to right,#000 0,#000 62%,transparent 96%),
linear-gradient(to bottom,transparent 0,#000 10%,#000 88%,transparent 100%);
-webkit-mask-composite:source-in;mask-composite:intersect;}
.faq-lista{position:relative;z-index:1;
background:rgba(231,237,246,.90);
-webkit-backdrop-filter:blur(18px) saturate(1.15);
backdrop-filter:blur(18px) saturate(1.15);
box-shadow:0 24px 60px -34px rgba(16,24,40,.55);}
body[data-theme="gold"] .faq-lista,html[data-theme-pre="gold"] body .faq-lista{background:rgba(21,21,21,.88);
box-shadow:0 24px 60px -34px rgba(0,0,0,.95);}
@media(max-width:880px){
.faq-grid{gap:1.8rem;}
.faq-foto{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:20rem;
margin:1.2rem 0 0;opacity:.9;}
.faq-lista{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;}
}
/* Filas de servicio con foto real montada sobre el panel de texto. La direccion
del solape y la del difuminado dependen de si la fila va invertida: la imagen
siempre se apaga por el lado que da al texto. */
.fila-serv.montada{gap:0;}
.fila-serv.montada .txt{position:relative;z-index:1;
background:rgba(231,237,246,.90);
-webkit-backdrop-filter:blur(18px) saturate(1.15);
backdrop-filter:blur(18px) saturate(1.15);
box-shadow:0 24px 60px -34px rgba(16,24,40,.55);}
body[data-theme="gold"] .fila-serv.montada .txt,html[data-theme-pre="gold"] body .fila-serv.montada .txt{background:rgba(21,21,21,.88);
box-shadow:0 24px 60px -34px rgba(0,0,0,.95);}
/* La foto se ajusta a la altura que marca el texto, no al reves: son verticales
y con altura automatica estiraban la fila el doble de lo necesario. */
.fila-serv.montada{min-height:24rem;}
.fila-serv.montada .visual.foto{z-index:0;position:relative;min-height:0;overflow:hidden;}
.fila-serv.montada .visual.foto img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;}
.fila-serv.montada:not(.invertida) .visual.foto{margin:-1.8rem -5.5rem -1.8rem 0;}
.fila-serv.montada.invertida .visual.foto{margin:-1.8rem 0 -1.8rem -5.5rem;}
.fila-serv.montada.invertida .visual.foto img{
-webkit-mask-image:
linear-gradient(to left,transparent 0,#000 9%,#000 84%,transparent 100%),
linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-image:
linear-gradient(to left,transparent 0,#000 9%,#000 84%,transparent 100%),
linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);}
@media(max-width:880px){
.fila-serv.montada{gap:1.4rem;}
/* Los dos selectores completos, no `.fila-serv.montada .visual.foto`: ese
tiene una clase menos que el que pone el margen negativo y perdía, así que
los -5,5rem seguían puestos en una columna y sacaban la foto 51 px fuera
de la pantalla (390 de ancho, 441 de página). */
.fila-serv.montada:not(.invertida) .visual.foto,
.fila-serv.montada.invertida .visual.foto{margin:0;}
/* Y altura propia. En escritorio la foto se estira a la del panel de al lado
(`align-items:stretch`), pero en una sola columna ya no tiene con quién
estirarse: la imagen va en `position:absolute`, así que la caja se queda en
cero y las cinco fotos de Servicios desaparecían sin dejar hueco. */
.fila-serv.montada .visual.foto{min-height:14rem;}
.fila-serv.montada .txt{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;}
}
/* La foto de FAQs deja de acompanar al scroll: sale de la columna sticky y se
ancla a la rejilla, apoyada en su fondo. El titulo y el texto pasan por
delante al bajar; la imagen se queda donde esta. */
.faq-grid{position:relative;}
.faq-intro{position:relative;top:auto;z-index:1;}
.faq-foto{position:absolute;left:-4%;top:auto;bottom:-2rem;transform:none;
width:43%;z-index:0;pointer-events:none;opacity:.82;}
.faq-lista{z-index:2;}
@media(max-width:880px){
.faq-foto{position:relative;left:auto;bottom:auto;width:100%;max-width:20rem;
margin:1.2rem 0 0;opacity:.9;}
}
/* Fichas del equipo mas contenidas: el retrato pasa de 16:11 a 16:8 y la rejilla
se limita en ancho, que a pantalla completa las fotos salian enormes. */
.grid{max-width:58rem;}
/* Altura fija en vez de proporcion: la ficha es un contenedor flex en columna y
ahi el aspect-ratio no se estaba respetando. */
.persona .retrato{aspect-ratio:auto;height:13.5rem;flex:0 0 auto;}
.persona .txt{padding:1.4rem 1.5rem 1.6rem;}
.persona h3{font-size:1.18rem;}
.persona .rol{font-size:.82rem;margin-bottom:.85rem;}
.persona p{font-size:.94rem;line-height:1.58;margin-bottom:.75rem;}
.persona .li{font-size:.88rem;}
/* Mas aire entre las dos fichas y retrato mas alto, para que la cabeza entre
entera: a 13,5rem la coronilla quedaba justo en el canto superior. */
.grid{gap:2.8rem;}
.persona .retrato{height:17rem;}
.persona .retrato img{object-position:center 36%;}
/* Mas separacion entre las dos fichas y encuadre anclado arriba: asi no se
recorta nada de la parte superior de los retratos. */
.grid{gap:5rem;}
.persona .retrato{height:19rem;}
.persona .retrato img{object-position:center top;}
/* Separacion de 3 cm entre las dos fichas (7rem = 112px a 96 ppp) y rejilla
centrada: sin los margenes automaticos quedaba pegada a la izquierda. */
.grid{gap:7rem;max-width:64rem;margin-left:auto;margin-right:auto;}
/* El poste de senales de Oficina IA llega recortado y con fondo transparente,
asi que se muestra entero en vez de recortado a la caja, y sin la mascara de
difuminado: el propio PNG ya no tiene canto que disimular. */
.fila-serv .visual.foto img[src*="oficina-ia-11"]{object-fit:contain;object-position:center;
-webkit-mask-image:none;mask-image:none;}
/* Aviso de categoria sin articulos: la version inglesa de algunas categorias
todavia no tiene posts publicados. */
.vacio{margin:0;padding:2.6rem 0 1rem;font-size:1.02rem;color:var(--muted);line-height:1.6;}
.vacio a{color:var(--accent);text-decoration:none;font-weight:600;}
.vacio a:hover{text-decoration:underline;}
/* ============================================================
BRAINSIGHTS — la publicacion, con el sistema visual del sitio
El boceto original traia sus propios tokens, cabecera, hero y pie. Aqui se
queda solo con los componentes que le son propios —selector de ediciones,
tarjetas de noticia, "En 60 segundos", pozo de enlaces y "Tu turno"— y todos
ellos se repintan con los tokens del sitio: mismo panel, mismo radio, misma
tipografia y las mismas dos paletas. Ninguna regla de aqui toca la barra, el
fondo continuo ni las superficies de seccion.
============================================================ */
:root{
--accent2:var(--accent);
--overlay:rgba(44,62,80,.045);
--why-bg:rgba(52,152,219,.1); --why-text:#2c3e50;
--slice-inactive:rgba(44,62,80,.4); --hover-tint:rgba(52,152,219,.12);
--topic-text:#fff;
}
body[data-theme="gold"],html[data-theme-pre="gold"] body{
--overlay:rgba(255,255,255,.045);
--why-bg:rgba(255,215,0,.08); --why-text:#c9d3ea;
--slice-inactive:rgba(255,255,255,.32); --hover-tint:rgba(255,215,0,.14);
--topic-text:var(--accent);
}
/* Bloque estrecho para la tira del selector: sin el aire de una seccion. */
.sec.tira{padding:1.5rem 0;}
/* --- selector de ediciones: mes en la tira, quincena en un globo encima --- */
.jb-slicer{margin:0 auto;max-width:56rem;width:100%;display:flex;align-items:stretch;
border:1px solid var(--panel-borde);border-radius:14px;position:relative;
background:var(--panel);}
.jb-slicer-year{padding:0 1rem;display:flex;align-items:center;font-size:.85rem;font-weight:600;
color:var(--muted);border-right:1px solid var(--panel-borde);
border-radius:13px 0 0 13px;flex:0 0 auto;letter-spacing:.04em;}
.jb-slicer-track{display:flex;align-items:center;justify-content:space-between;gap:.3rem;flex:1;
padding:.45rem .7rem;}
.jb-slicer-sub{position:absolute;bottom:calc(100% + .45rem);display:flex;align-items:center;gap:.25rem;
background:var(--sup);border:1px solid var(--panel-borde);border-radius:11px;padding:.25rem;
box-shadow:0 14px 30px -14px rgba(16,24,40,.55);z-index:20;}
.jb-slicer-sub:empty{display:none;}
.jb-slicer-sub .jb-slice{padding:.34rem .6rem;font-size:.68rem;}
.jb-slicer-sub::after{content:"";position:absolute;top:100%;left:var(--arrow-left,1rem);
width:.55rem;height:.55rem;background:var(--sup);
border-right:1px solid var(--panel-borde);border-bottom:1px solid var(--panel-borde);
transform:translateY(-50%) rotate(45deg);}
.jb-slice{flex:0 0 auto;padding:.5rem .9rem;border-radius:10px;text-align:center;font-size:.78rem;
font-weight:600;letter-spacing:-.01em;white-space:nowrap;background:none;border:0;
color:var(--slice-inactive);font-family:var(--sans);cursor:pointer;
transition:background .15s ease,color .15s ease;}
.jb-slice-current{background:var(--accent);color:var(--on-accent);font-weight:700;}
.jb-slice-open{color:var(--ink);}
.jb-slice-open:hover{background:var(--hover-tint);color:var(--accent);}
.jb-slice-empty{cursor:default;}
/* 860 y no 700: los doce meses miden unos 700 px y el rótulo del año otros
110, así que entre 700 y 830 la tira seguía en una línea y sacaba la página
46 px fuera de la pantalla en una tableta de 768. */
@media(max-width:860px){.jb-slicer{flex-wrap:wrap;}
.jb-slicer-year{border-right:0;border-bottom:1px solid var(--panel-borde);width:100%;
border-radius:13px 13px 0 0;padding:.5rem 1rem;}
.jb-slicer-track{flex-wrap:wrap;justify-content:flex-start;}}
/* --- En 60 segundos: lista sobre el panel claro --- */
.sixty-box{background:var(--panel);border:1px solid var(--panel-borde);border-radius:22px;
padding:.4rem 2rem 1rem;}
.sixty-list{list-style:none;margin:0;padding:0;}
.sixty-item{display:flex;gap:1rem;align-items:baseline;padding:1.15rem 0;
border-bottom:1px solid rgba(44,62,80,.09);}
body[data-theme="gold"] .sixty-item,html[data-theme-pre="gold"] body .sixty-item{border-bottom-color:rgba(255,255,255,.07);}
.sixty-item:last-child{border-bottom:0;}
/* La cifra es la misma que la de las cajas de Nuestros valores: grande, en
color de acento y sin pastilla, para que los dos sitios donde el sitio
enumera cosas se lean igual. Alineadas por la base con la primera linea. */
.sixty-dot{flex:0 0 auto;min-width:2.5rem;font-size:2.3rem;font-weight:700;
letter-spacing:-.04em;line-height:1;color:var(--accent);}
.sixty-text{font-size:1rem;line-height:1.6;color:var(--ink);}
@media(max-width:520px){.sixty-box{padding:.3rem 1.2rem .8rem;}}
/* --- tarjetas de noticia: mismo panel y mismo comportamiento que las de Recursos --- */
/* align-items:start y no el `stretch` de serie: cada tarjeta mide lo que mide
su contenido. Si una noticia tiene tres comentarios de lectores y la de al
lado ninguno, la primera crece y la segunda se queda corta — que es lo
honesto. Igualarlas obliga a repartir hueco vacío por dentro, y un hueco
dentro de una caja se lee como si faltara algo. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start;}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.cards{grid-template-columns:1fr;}}
.card{background:var(--panel);border:1px solid var(--panel-borde);border-radius:20px;overflow:hidden;
display:flex;flex-direction:column;box-shadow:none;
transition:transform .18s ease,box-shadow .18s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(16,24,40,.55);}
.card-cover{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--sup);}
.card-cover svg{width:100%;height:100%;}
.card-cover img{width:100%;height:100%;object-fit:cover;}
.card-cover::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(5,7,15,.1) 0%,rgba(5,7,15,.3) 55%,rgba(5,7,15,.72) 100%);}
.card-topic{position:absolute;top:.75rem;left:.75rem;z-index:2;background:rgba(10,15,25,.72);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
color:#fff;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
padding:.28rem .65rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);}
.card-body{padding:1.3rem 1.35rem 1.4rem;}
.card h3{font-family:var(--sans);font-style:normal;font-weight:600;font-size:1.1rem;line-height:1.32;
letter-spacing:-.02em;margin:0 0 .7rem;color:var(--ink);}
/* Sin `flex:1`: el resumen crecía para rellenar la tarjeta y dejaba un hueco
entre él y el comentario de los expertos. */
.card .summary{font-size:.92rem;line-height:1.55;color:var(--muted);margin:0 0 .9rem;}
.card .why{background:var(--why-bg);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
padding:.7rem .9rem;margin-bottom:1rem;}
.card .why-label{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
font-weight:700;margin:0 0 .3rem;}
.card .why-text{font-size:.88rem;line-height:1.5;color:var(--why-text);margin:0;}
.card .pending{background:var(--overlay);border:1px dashed var(--panel-borde);border-radius:10px;
padding:.7rem .9rem;margin-bottom:1rem;font-size:.82rem;color:var(--muted);font-style:italic;}
/* Sin `margin-top:auto`: empujaba la ficha al fondo de la tarjeta y abría el
hueco justo debajo del comentario. Va pegada a lo que tiene encima. */
.card .meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
font-size:.76rem;color:var(--muted);border-top:1px solid rgba(44,62,80,.09);padding-top:.8rem;}
body[data-theme="gold"] .card .meta,html[data-theme-pre="gold"] body .card .meta{border-top-color:rgba(255,255,255,.07);}
.card .source{color:var(--accent);text-decoration:none;font-weight:600;}
.card .source:hover{text-decoration:underline;}
.card .comment-link{display:inline-block;margin-top:.8rem;font-size:.82rem;color:var(--accent);
background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
text-align:left;font-weight:600;}
.card .comment-link:hover{text-decoration:underline;}
.card .comments{margin-top:.9rem;padding-top:.8rem;border-top:1px solid rgba(44,62,80,.09);}
body[data-theme="gold"] .card .comments,html[data-theme-pre="gold"] body .card .comments{border-top-color:rgba(255,255,255,.07);}
.card .comments-count{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
font-weight:700;margin:0 0 .55rem;}
.card .comment-item{background:var(--overlay);border-radius:10px;padding:.6rem .75rem;margin-bottom:.5rem;}
.card .comment-item:last-child{margin-bottom:0;}
.card .comment-author{font-size:.8rem;font-weight:600;color:var(--ink);margin:0 0 .2rem;}
.card .comment-body{font-size:.82rem;line-height:1.5;color:var(--muted);margin:0;}
.card-overlay-title{display:none;}
/* --- pozo de enlaces --- */
.pool-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
gap:0 2.4rem;}
@media(max-width:820px){.pool-list{grid-template-columns:1fr;}}
.pool-item{display:flex;justify-content:space-between;gap:1.2rem;padding:.85rem 0;
border-bottom:1px solid rgba(44,62,80,.09);}
body[data-theme="gold"] .pool-item,html[data-theme-pre="gold"] body .pool-item{border-bottom-color:rgba(255,255,255,.07);}
.pool-headline{font-size:.95rem;line-height:1.5;color:var(--ink);}
.pool-source{font-size:.82rem;color:var(--accent);white-space:nowrap;text-decoration:none;font-weight:600;}
.pool-source:hover{text-decoration:underline;}
/* --- Tu turno --- */
.talk{background:var(--panel);border:1px solid var(--panel-borde);border-radius:22px;padding:2.2rem 2.3rem;}
@media(max-width:520px){.talk{padding:1.5rem 1.3rem;}}
.talk-lead{font-size:1.04rem;line-height:1.6;color:var(--ink);margin:0 0 1.4rem;max-width:42rem;}
.field-row{display:flex;gap:1.1rem;flex-wrap:wrap;margin-bottom:1rem;}
.field{flex:1;min-width:200px;display:flex;flex-direction:column;gap:.35rem;}
.field-label{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.input,.select,.textarea{background:var(--sup);border:1px solid var(--panel-borde);border-radius:11px;
color:var(--ink);padding:.7rem .85rem;font-family:var(--sans);font-size:.92rem;}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.textarea{width:100%;resize:vertical;}
.cta-button{background:var(--barra);color:#fff;border:0;border-radius:999px;padding:.8rem 1.7rem;
font-weight:600;font-size:.95rem;letter-spacing:-.015em;cursor:pointer;font-family:var(--sans);
transition:transform .18s ease,opacity .18s ease;}
body[data-theme="gold"] .cta-button,html[data-theme-pre="gold"] body .cta-button{background:#17170f;color:var(--accent);}
.cta-button:hover{transform:translateY(-1px);opacity:.92;}
.talk-outro{color:var(--muted);font-size:.9rem;line-height:1.6;text-align:center;max-width:38rem;
margin:1.8rem auto 0;}
/* --- cierre de la publicacion: sin mapa ni contacto, solo la nota legal --- */
.bs-cierre{max-width:44rem;margin:2.4rem auto 0;padding:0 1.25rem;text-align:center;}
.bs-cierre .lema{color:var(--accent);font-weight:600;font-size:1.02rem;margin:0 0 .5rem;}
.bs-cierre .sitio{color:var(--muted);font-size:.88rem;margin:0 0 1rem;}
.bs-cierre .rgpd{color:var(--footer-legal);font-size:.76rem;line-height:1.55;margin:0;}
/* ============================================================
Compactado vertical de los bloques
Solo altura: el relleno interior de las secciones baja de 5,5 a 3,2 rem y la
separacion entre cajas de 2,2 a 1,4 rem. Los margenes laterales no se tocan,
asi que el ancho de las cajas se mantiene tal cual.
============================================================ */
.sec{padding:3.2rem 0;}
.sec-hd{margin-bottom:1.9rem;}
.bloque{margin-top:1.4rem;margin-bottom:1.4rem;}
.faqs{padding:3.2rem 0;}
.sec.tira{padding:1.1rem 0;}
.hero-video{margin-bottom:0;}
@media(max-width:640px){.sec{padding:2.4rem 0;}.faqs{padding:2.4rem 0;}}
/* Cierre de Sobre nosotros: un 150% mas de zoom sobre el 2,15 anterior, para
entrar dentro del cerebro. El recorte lateral es el precio. */
.hero-video.hero-cierre video{transform:scale(3.22);}
/* ============================================================
Cinta de opiniones: separar las tarjetas del fondo
La cinta compartia tono con la superficie de la seccion y las tarjetas se
confundian con ella, sobre todo en la paleta de oro, donde solo habia ocho
niveles de diferencia entre #0d0d0d y #151515.
La cinta pasa a tener color propio, mas claro en las dos paletas. En la de
oro eso obliga a invertir la relacion —tarjeta mas oscura que la cinta— para
que la separacion se vea; es el unico sitio del sitio donde ocurre.
============================================================ */
:root{--cinta:#ffffff;}
body[data-theme="gold"],html[data-theme-pre="gold"] body{--cinta:#1f1f1f;}
.cinta{background:var(--cinta);border-radius:20px;padding:1.3rem 0;}
.cinta::before{background:linear-gradient(90deg,var(--cinta),transparent);}
.cinta::after{background:linear-gradient(270deg,var(--cinta),transparent);}
body[data-theme="gold"] .op,html[data-theme-pre="gold"] body .op{background:#0d0d0d;border-color:rgba(255,255,255,.12);}
.op{box-shadow:0 1px 2px rgba(16,24,40,.05),0 14px 30px -22px rgba(16,24,40,.4);}
body[data-theme="gold"] .op,html[data-theme-pre="gold"] body .op{box-shadow:0 14px 30px -22px rgba(0,0,0,.9);}
/* ============================================================
Profundidad en la paleta de oro
Los tres niveles del sitio estaban demasiado juntos —fondo #080808,
seccion #0d0d0d y panel #151515: trece niveles sobre 255 entre el mas
oscuro y el mas claro— y la pagina se leia como una mancha plana.
Se abre la escala manteniendola oscura, y se anade un filo superior de
luz a las superficies: en fondos oscuros la sombra no se ve, la que
separa es la arista iluminada.
============================================================ */
body[data-theme="gold"],html[data-theme-pre="gold"] body{
--bg:#070707;
--sup:#121212;
--panel:#1c1c1c;
--card2:#202020;
--sup-borde:rgba(255,255,255,.08);
--panel-borde:rgba(255,255,255,.11);
--cinta:#282828;
--rule:rgba(255,255,255,.11);
}
body[data-theme="gold"] .bloque,html[data-theme-pre="gold"] body .bloque{box-shadow:inset 0 1px 0 rgba(255,255,255,.045);}
body[data-theme="gold"] .panel,html[data-theme-pre="gold"] body .panel,body[data-theme="gold"] .card,html[data-theme-pre="gold"] body .card,body[data-theme="gold"] .post,html[data-theme-pre="gold"] body .post,body[data-theme="gold"] .talk,html[data-theme-pre="gold"] body .talk,body[data-theme="gold"] .sixty-box,html[data-theme-pre="gold"] body .sixty-box,body[data-theme="gold"] .persona,html[data-theme-pre="gold"] body .persona,body[data-theme="gold"] .jb-slicer,html[data-theme-pre="gold"] body .jb-slicer{box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
body[data-theme="gold"] .op,html[data-theme-pre="gold"] body .op{background:#131313;border-color:rgba(255,255,255,.1);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 16px 32px -22px rgba(0,0,0,1);}
body[data-theme="gold"] .visual,html[data-theme-pre="gold"] body .visual{background:linear-gradient(155deg,#1f1f1f 0%,#151515 46%,#212121 100%);}
body[data-theme="gold"] .faqs,html[data-theme-pre="gold"] body .faqs{background:linear-gradient(160deg,#151515 0%,#0f0f0f 50%,#1a1a1a 100%);}
body[data-theme="gold"] .card-cover,html[data-theme-pre="gold"] body .card-cover,body[data-theme="gold"] .post-img,html[data-theme-pre="gold"] body .post-img{background:#0c0c0c;}
/* Velo entre la foto de FAQs y su texto: un halo del color de la seccion que
se desvanece hacia fuera. Va como ::before de la columna de texto, que ya
esta por encima de la foto, asi que separa los dos planos sin tapar la
imagen mas alla de donde hay letras. */
:root{--velo-faq:rgba(244,247,251,.94);}
body[data-theme="gold"],html[data-theme-pre="gold"] body{--velo-faq:rgba(18,18,18,.94);}
.faq-intro::before{content:"";position:absolute;z-index:-1;pointer-events:none;
inset:-1.4rem -2.4rem -1.4rem -1.8rem;
background:radial-gradient(72% 64% at 34% 42%,
var(--velo-faq) 0%,var(--velo-faq) 38%,transparent 80%);
filter:blur(7px);}
/* ============================================================
CONTACTO
Formulario a la izquierda y tres fichas de datos a la derecha, todo sobre
el panel del sitio. Sustituye al bloque azul macizo con la ilustracion: la
misma informacion en la mitad de alto y con los campos del sistema.
============================================================ */
.contacto-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:1.4rem;align-items:start;}
@media(max-width:880px){.contacto-grid{grid-template-columns:1fr;}}
.contacto-form{padding:1.9rem 2rem 2rem;}
@media(max-width:520px){.contacto-form{padding:1.4rem 1.3rem;}}
.campo-fila{display:flex;gap:1.1rem;flex-wrap:wrap;}
.contacto-grid .campo{flex:1;min-width:190px;display:flex;flex-direction:column;gap:.35rem;
margin-bottom:1rem;}
.campo-etiqueta{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
font-weight:600;}
.contacto-form .input,.contacto-form .textarea{background:var(--sup);border:1px solid var(--panel-borde);
border-radius:11px;color:var(--ink);padding:.72rem .85rem;font-family:var(--sans);font-size:.95rem;
width:100%;}
.contacto-form .textarea{resize:vertical;}
.contacto-form .input:focus,.contacto-form .textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.acepto{display:flex;align-items:flex-start;gap:.6rem;font-size:.86rem;color:var(--muted);line-height:1.5;text-align:left;}.acepto>input[type="checkbox"]{flex:0 0 auto;width:1.1rem;height:1.1rem;margin:.15rem 0 0;}.acepto>span{flex:1 1 auto;min-width:0;}
.acepto input{margin-top:.2rem;flex:0 0 auto;}
.acepto a{color:var(--accent);}
.contacto-form .btn-solid{display:block;width:100%;text-align:center;}
.contacto-datos{display:flex;flex-direction:column;gap:1.4rem;}
.dato{padding:1.4rem 1.5rem 1.5rem;}
.dato h3{margin:0 0 .5rem;font-size:1.08rem;font-weight:600;letter-spacing:-.02em;}
.dato p{margin:0 0 .9rem;color:var(--muted);font-size:.95rem;line-height:1.55;}
.dato .btn-solid{display:block;width:100%;text-align:center;}
.dato-enlace{display:block;color:var(--accent);text-decoration:none;font-weight:600;font-size:.95rem;
letter-spacing:-.015em;margin-top:.35rem;}
.dato-enlace:hover{text-decoration:underline;}
/* Las dos columnas de Contacto acaban a la misma altura: el panel del
formulario se estira y el campo de mensaje absorbe el alto sobrante, en vez
de dejar un hueco muerto debajo del boton. */
.contacto-grid{align-items:stretch;}
.contacto-form{display:flex;flex-direction:column;}
.contacto-form form{display:flex;flex-direction:column;flex:1;}
.contacto-form .campo-mensaje{flex:1;margin-bottom:1rem;}
.contacto-form .campo-mensaje .textarea{flex:1;min-height:9rem;}
@media(max-width:880px){.contacto-form .campo-mensaje .textarea{min-height:8rem;}}
/* ============================================================
AJUSTE AUTOMATICO AL ANCHO DE PANTALLA
Hasta aqui los margenes laterales eran fijos en rem: en un portatil de 1280
se comian el contenido y en un monitor de 2560 se quedaban en nada. Pasan a
escalar con el ancho (clamp con vw) y las cajas llevan un tope, de modo que
en pantallas muy grandes se centran en vez de estirarse sin fin.
Todo lo demas —tipografia, rejillas y cortes de movil— ya estaba resuelto
con clamp y consultas de medios.
============================================================ */
:root{
--marco:clamp(1rem,2.5vw,4rem); /* margen lateral general */
--marco-estrecho:clamp(1rem,3.2vw,5rem); /* el de las cajas estrechas */
}
.jb-header,
.hero-video{width:min(126rem,calc(100% - 2 * var(--marco)));margin-left:auto;margin-right:auto;}
.bloque{width:min(126rem,calc(100% - 2 * var(--marco)));margin-left:auto;margin-right:auto;}
.bloque.estrecho{width:min(104rem,calc(100% - 2 * var(--marco-estrecho)));}
.pie-grande{width:min(120rem,calc(100% - 2 * var(--marco)));margin-left:auto;margin-right:auto;
padding-left:clamp(1.2rem,4vw,4.6rem);padding-right:clamp(1.2rem,4vw,4.6rem);}
.barra-legal{padding-left:var(--marco);padding-right:var(--marco);}
.sec{padding:clamp(2rem,3.4vw,3.2rem) 0;}
.faqs{padding:clamp(2rem,3.4vw,3.2rem) 0;}
/* Paso intermedio: entre 880 y 1180 las parejas de imagen y texto se quedaban
muy justas antes de apilarse. Se les da mas peso al texto en esa franja. */
@media(min-width:881px) and (max-width:1180px){
.destacados{grid-template-columns:.8fr 1.2fr;}
.faq-grid{grid-template-columns:.62fr 1.38fr;}
.contacto-grid{grid-template-columns:1.15fr 1fr;}
.fila-serv{grid-template-columns:.72fr 1.28fr;}
.fila-serv.invertida{grid-template-columns:1.28fr .72fr;}
}
/* La separacion entre las fichas del equipo tambien escala. */
.grid{gap:clamp(1.6rem,5vw,7rem);}
/* ============================================================
UN SOLO ANCHO PARA TODO
Convivian cuatro: cabecera y hero a 110rem, los bloques a 110, los
estrechos a 94 y el pie a 104. En una misma pagina se veian tres
escalones de margen, y entre pestañas no coincidian.
Manda el del pie, que es el que ya estaba ajustado, y lo heredan la
cabecera, el hero, los bloques y la variante estrecha. Sigue siendo
adaptable: el tope solo actua en pantallas grandes, y por debajo manda
el margen lateral fluido de --marco.
Va al final del fichero a proposito, para ganar a las reglas antiguas
de margen fijo que quedan mas arriba.
============================================================ */
.jb-header,
.hero-video,
.bloque,
.bloque.estrecho,
.pie-grande{width:min(126rem,calc(100% - 2 * var(--marco)));
margin-left:auto;margin-right:auto;}
@media(max-width:660px){
.jb-header,.hero-video,.bloque,.bloque.estrecho,.pie-grande{width:calc(100% - 2rem);}
}
/* Franja intermedia de la barra: entre 900 y 1150 px el menu y las acciones no
caben en una linea y las acciones caian a una segunda fila. Se aprieta el
menu y se retira el logotipo de texto, que es decorativo, para que la barra
siga siendo de una sola altura. */
@media(max-width:1150px){
.jb-header{gap:.5rem 1.2rem;padding:.75rem 1.2rem;}
.jb-nav{gap:1.3rem;font-size:.94rem;}
.jb-word{display:none;}
.jb-header .right{gap:.7rem;}
.jb-cta{padding:.5rem 1.1rem;font-size:.88rem;}
}
/* ============================================================
EQUIPO Y PILARES (Inicio)
Sustituye a las dos fichas de dirección: el foco pasa del individuo a la
compañía. Los pilares van en una tira de cinco pasos numerados, conectados
por un filete, para que se lean como una secuencia y no como cinco cajas
sueltas. El desarrollo largo vive en Sobre nosotros.
============================================================ */
.equipo-intro{padding:2.2rem 2.1rem;display:flex;flex-direction:column;justify-content:center;}
.equipo-intro h3{margin:0 0 .8rem;font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:700;
letter-spacing:-.03em;line-height:1.1;}
.equipo-intro p{margin:0;color:var(--muted);font-size:1.04rem;line-height:1.66;}
.pilares{margin-top:1.4rem;display:grid;grid-template-columns:repeat(5,1fr);
padding:1.6rem 0;overflow:hidden;}
@media(max-width:1000px){.pilares{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.pilares{grid-template-columns:1fr;}}
.pilar{padding:.9rem 1.4rem;position:relative;}
.pilar + .pilar::before{content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:1px;
background:rgba(44,62,80,.1);}
body[data-theme="gold"] .pilar + .pilar::before,html[data-theme-pre="gold"] body .pilar + .pilar::before{background:rgba(255,255,255,.09);}
@media(max-width:1000px){.pilar:nth-child(odd)::before{display:none;}}
@media(max-width:560px){.pilar + .pilar::before{display:none;}}
.pilar-num{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--accent);
margin-bottom:.45rem;}
.pilar h4{margin:0 0 .15rem;font-size:1.08rem;font-weight:700;letter-spacing:-.02em;}
.pilar-concepto{margin:0 0 .5rem;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
color:var(--accent);font-weight:600;}
.pilar-linea{margin:0;font-size:.86rem;line-height:1.5;color:var(--muted);}
/* ============================================================
NUESTROS VALORES (Sobre nosotros)
Sustituye a las dos fichas de dirección. Se evita la cuadrícula de cinco
tarjetas: los valores se cuentan como una secuencia —tira numerada arriba— y
luego se desarrollan en filas editoriales que alternan visual y texto, con un
número grande de fondo que encadena la lectura.
============================================================ */
.secuencia{list-style:none;margin:0 0 1.6rem;padding:1.2rem 0;
display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;}
@media(max-width:1000px){.secuencia{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.secuencia{grid-template-columns:1fr;}}
.secuencia li{padding:.55rem 1.4rem;position:relative;display:flex;flex-direction:column;gap:.15rem;}
.secuencia li + li::before{content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;width:1px;
background:rgba(44,62,80,.1);}
body[data-theme="gold"] .secuencia li + li::before,html[data-theme-pre="gold"] body .secuencia li + li::before{background:rgba(255,255,255,.09);}
@media(max-width:1000px){.secuencia li:nth-child(odd)::before{display:none;}}
@media(max-width:560px){.secuencia li + li::before{display:none;}}
/* La flecha que encadena un paso con el siguiente. */
.secuencia li + li::after{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;
border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
transform:translateY(-50%) rotate(-45deg);background:var(--panel);}
@media(max-width:1000px){.secuencia li:nth-child(odd)::after{display:none;}}
@media(max-width:560px){.secuencia li + li::after{display:none;}}
.secuencia .sec-num{font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--accent);}
.secuencia strong{font-size:1rem;font-weight:700;letter-spacing:-.02em;}
.secuencia span:last-child{font-size:.84rem;color:var(--muted);}
/* Separado de la tira de cajas: el panel y su foto quedaban pegados justo
debajo de los cinco rectangulos. */
.valores{display:flex;flex-direction:column;gap:1.4rem;margin-top:2.4rem;}
.valor{display:grid;grid-template-columns:.86fr 1.14fr;gap:0;align-items:stretch;min-height:21rem;}
.valor.invertida{grid-template-columns:1.14fr .86fr;}
.valor.invertida .valor-visual{order:2;}
@media(min-width:881px) and (max-width:1180px){
.valor{grid-template-columns:.76fr 1.24fr;}
.valor.invertida{grid-template-columns:1.24fr .76fr;}
}
@media(max-width:880px){
.valor,.valor.invertida{grid-template-columns:1fr;gap:1.2rem;min-height:0;}
.valor.invertida .valor-visual{order:0;}
.valor-visual{min-height:14rem;}
}
/* Cada pilar lleva su fotografia de la carpeta fotos/, con el nombre del valor.
Va como fondo y no como ![]()
a proposito: si el fichero todavia no esta, el
hueco se queda liso en vez de mostrar el icono de imagen rota. Se listan .png
y .jpg: la capa que falte no pinta y deja ver la siguiente.
Sin marco ni esquinas redondeadas. La mascara cruzada difumina los cuatro
bordes para que la foto se funda con la pagina, igual que en Servicios. */
.valor-visual{position:relative;border:0;border-radius:0;background-color:var(--panel);
background-size:cover;background-position:center;background-repeat:no-repeat;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
mask-composite:intersect;}
.valor-visual.foto-compromiso{background-image:url("https://javbrain.com/wp-content/uploads/2026/09/compromiso.png");}
.valor-visual.foto-etica{background-image:url("https://javbrain.com/wp-content/uploads/2026/09/etica.png");}
.valor-visual.foto-innovacion{background-image:url("https://javbrain.com/wp-content/uploads/2026/09/innovacion.png");}
.valor-visual.foto-calidad{background-image:url("https://javbrain.com/wp-content/uploads/2026/09/calidad.png");}
.valor-visual.foto-resultados{background-image:url("https://javbrain.com/wp-content/uploads/2026/09/resultados.png");}
/* El panel se monta sobre el visual, igual que en Servicios. */
.valor .valor-txt{position:relative;z-index:1;padding:2rem 2.1rem;
display:flex;flex-direction:column;justify-content:center;
background:rgba(231,237,246,.92);
-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
box-shadow:0 24px 60px -34px rgba(16,24,40,.55);}
body[data-theme="gold"] .valor .valor-txt,html[data-theme-pre="gold"] body .valor .valor-txt{background:rgba(28,28,28,.9);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px -34px rgba(0,0,0,.95);}
.valor:not(.invertida) .valor-visual{margin-right:-5rem;}
.valor.invertida .valor-visual{margin-left:-5rem;}
@media(max-width:880px){
.valor .valor-txt{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;
padding:1.5rem 1.4rem;}
.valor:not(.invertida) .valor-visual,.valor.invertida .valor-visual{margin:0;}
}
.valor-num{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--accent);
margin-bottom:.5rem;}
.valor h3{margin:0 0 .2rem;font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:700;letter-spacing:-.03em;
line-height:1.08;}
.valor-concepto{margin:0 0 1rem;font-size:1rem;font-weight:600;letter-spacing:-.015em;color:var(--accent);}
.valor-txt p{margin:0 0 .9rem;color:var(--muted);font-size:1rem;line-height:1.62;}
.valor-clave{margin:.3rem 0 0;padding:.85rem 1rem;border-left:3px solid var(--accent);
border-radius:0 10px 10px 0;background:var(--quote-bg);
color:var(--ink)!important;font-size:.95rem;line-height:1.55;}
.valor-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 0;padding:0;}
.valor-tags li{font-size:.76rem;font-weight:600;letter-spacing:.01em;color:var(--accent);
border:1px solid currentColor;border-radius:999px;padding:.22rem .7rem;}
/* ============================================================
NUESTROS VALORES en Inicio, en circulos
Un solo cuadro a lo ancho para el equipo, y debajo los cinco valores como
figuras independientes encadenadas por un filete que pasa por su centro.
Sustituye a la tira de columnas: los circulos se leen como pasos y dejan
respirar el bloque.
============================================================ */
.equipo-uno{padding:2.2rem 2.4rem 2.3rem;}
@media(max-width:520px){.equipo-uno{padding:1.6rem 1.4rem;}}
.equipo-uno h3{margin:0 0 .9rem;font-size:clamp(1.45rem,2.6vw,2rem);font-weight:700;
letter-spacing:-.03em;line-height:1.1;}
.equipo-uno p{margin:0 0 .9rem;color:var(--muted);font-size:1.04rem;line-height:1.66;max-width:62rem;}
.equipo-uno p:first-of-type{color:var(--ink);font-size:1.12rem;line-height:1.6;letter-spacing:-.012em;}
.equipo-uno .btn-ghost{margin-top:.4rem;background:rgba(255,255,255,.5);}
body[data-theme="gold"] .equipo-uno .btn-ghost,html[data-theme-pre="gold"] body .equipo-uno .btn-ghost{background:rgba(255,255,255,.05);}
.sec-hd-valores{margin-top:2.2rem;}
.circulos{list-style:none;margin:.4rem 0 0;padding:0;position:relative;
display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem;text-align:center;}
@media(max-width:1000px){.circulos{grid-template-columns:repeat(3,1fr);gap:2rem 1.4rem;}}
@media(max-width:620px){.circulos{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.circulos{grid-template-columns:1fr;}}
/* El filete que encadena los cinco pasos pasa por el centro de las figuras. */
.circulos::before{content:"";position:absolute;top:3.6rem;left:11%;right:11%;height:1px;
background:linear-gradient(90deg,transparent,var(--accent) 18%,
var(--accent) 82%,transparent);opacity:.3;}
@media(max-width:1000px){.circulos::before{display:none;}}
.circulo{position:relative;display:flex;flex-direction:column;align-items:center;}
.circulo-figura{width:7.2rem;height:7.2rem;border-radius:50%;display:grid;place-items:center;
position:relative;margin-bottom:1.05rem;background:var(--panel);
border:1px solid var(--panel-borde);
box-shadow:0 1px 2px rgba(16,24,40,.05),0 20px 40px -26px rgba(16,24,40,.55);
transition:transform .22s ease,box-shadow .22s ease;}
body[data-theme="gold"] .circulo-figura,html[data-theme-pre="gold"] body .circulo-figura{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
0 20px 40px -26px rgba(0,0,0,.95);}
/* Anillo exterior en color de marca: es lo que da vistosidad sin recargar. */
.circulo-figura::before{content:"";position:absolute;inset:-5px;border-radius:50%;
border:1.5px solid var(--accent);opacity:.34;
transition:opacity .22s ease,inset .22s ease;}
.circulo-figura::after{content:"";position:absolute;inset:.9rem;border-radius:50%;
background:radial-gradient(closest-side,var(--quote-bg),transparent 78%);}
.circulo-figura > span{position:relative;font-size:1.65rem;font-weight:700;letter-spacing:-.03em;
color:var(--accent);}
.circulo:hover .circulo-figura{transform:translateY(-5px);}
.circulo:hover .circulo-figura::before{opacity:.75;}
.circulo h4{margin:0 0 .2rem;font-size:1.1rem;font-weight:700;letter-spacing:-.025em;}
.circulo-concepto{margin:0 0 .55rem;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--accent);font-weight:600;}
.circulo-linea{margin:0;font-size:.88rem;line-height:1.5;color:var(--muted);max-width:15rem;}
/* ============================================================
Valores de Inicio: rectángulos con el nombre dentro
Sustituyen a los círculos numerados. El nombre vive dentro de la caja, así
que la figura ya dice de qué valor se trata sin necesidad de leer debajo.
Y en «Nuestro equipo» los dos párrafos van con la misma letra y el mismo
cuerpo: antes el primero iba destacado y parecían dos voces distintas.
============================================================ */
.equipo-uno p:first-of-type{color:var(--muted);font-size:1.04rem;line-height:1.66;letter-spacing:0;}
.equipo-uno p:last-of-type{margin-bottom:0;}
.valores-tira{list-style:none;margin:.5rem 0 0;padding:0;position:relative;
display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;}
@media(max-width:1000px){.valores-tira{grid-template-columns:repeat(3,1fr);gap:1.6rem 1.2rem;}}
@media(max-width:640px){.valores-tira{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.valores-tira{grid-template-columns:1fr;}}
.valor-paso{position:relative;display:flex;flex-direction:column;}
/* La flecha que encadena un paso con el siguiente, a la altura de las cajas. */
.valor-paso + .valor-paso::before{content:"";position:absolute;left:-.85rem;top:2.3rem;
width:8px;height:8px;border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
transform:rotate(-45deg);opacity:.55;}
@media(max-width:1000px){.valor-paso:nth-child(3n+1)::before{display:none;}}
@media(max-width:640px){.valor-paso:nth-child(odd)::before{display:none;}}
@media(max-width:420px){.valor-paso + .valor-paso::before{display:none;}}
.valor-caja{display:flex;flex-direction:column;justify-content:center;gap:.3rem;
min-height:4.6rem;padding:.9rem 1.1rem;margin-bottom:.9rem;border-radius:14px;
background:var(--panel);border:1px solid var(--panel-borde);
box-shadow:0 1px 2px rgba(16,24,40,.05),0 16px 34px -24px rgba(16,24,40,.5);
transition:transform .2s ease,border-color .2s ease;}
body[data-theme="gold"] .valor-caja,html[data-theme-pre="gold"] body .valor-caja{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
0 16px 34px -24px rgba(0,0,0,.95);}
.valor-paso:hover .valor-caja{transform:translateY(-3px);border-color:var(--accent);}
.valor-caja-num{font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--accent);}
.valor-caja-nombre{font-size:1.12rem;font-weight:700;letter-spacing:-.025em;line-height:1.1;
color:var(--ink);}
.valor-paso-concepto{margin:0 0 .4rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--accent);font-weight:600;}
.valor-paso-linea{margin:0;font-size:.88rem;line-height:1.5;color:var(--muted);}
/* El número manda dentro de la caja y el nombre del valor va debajo: la cifra
marca el orden de un vistazo y el nombre lo identifica. */
.valor-caja{gap:.15rem;min-height:6.2rem;padding:1rem 1.1rem;}
.valor-caja-num{font-size:2.3rem;font-weight:700;letter-spacing:-.04em;line-height:1;
color:var(--accent);}
.valor-caja-nombre{font-size:1.02rem;font-weight:600;letter-spacing:-.02em;}
/* «Nuestros valores» es hermano de «Nuestro equipo», no del título de sección:
comparte con él tamaño y peso. «Sobre nosotros» sigue siendo el título
grande que los engloba. */
.sec-hd-valores .sec-title{font-size:clamp(1.45rem,2.6vw,2rem);}
/* Los dos subtítulos de la sección salen del panel y se alinean con el margen
del bloque, así que arrancan en la misma vertical. El del equipo no lleva
el margen superior del de valores: viene justo detrás del título grande. */
.sec-hd-sub{margin-bottom:1rem;}
.sec-hd-sub .sec-title{font-size:clamp(1.45rem,2.6vw,2rem);}
.sec-hd-valores{margin-top:2.2rem;}
.equipo-uno{padding:1.8rem 2.1rem;}
/* El número de cada valor en Sobre nosotros toma el mismo peso que en las
cajas de Inicio: cifra grande y nombre debajo. Así las dos páginas hablan
el mismo lenguaje aunque una resuma y la otra desarrolle. */
.valor-num{font-size:2.3rem;font-weight:700;letter-spacing:-.04em;line-height:1;
color:var(--accent);margin-bottom:.35rem;display:block;}
.valor h3{margin:0 0 .15rem;}
.valor-concepto{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
margin-bottom:1.1rem;}
/* La tira de valores como pestañas: la caja es un botón y el panel de entrada
ocupa el sitio del desarrollo mientras no haya ninguna elegida. */
.valores-tira li{list-style:none;}
button.valor-paso{width:100%;text-align:left;background:none;border:0;padding:0;margin:0;
font-family:inherit;cursor:pointer;color:inherit;}
button.valor-paso:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:16px;}
button.valor-paso .valor-paso-concepto,
button.valor-paso .valor-paso-linea{display:block;}
button.valor-paso[aria-selected="true"] .valor-caja{border-color:var(--accent);
box-shadow:0 0 0 1px var(--accent),0 16px 34px -22px rgba(16,24,40,.55);}
body[data-theme="gold"] button.valor-paso[aria-selected="true"] .valor-caja,html[data-theme-pre="gold"] body button.valor-paso[aria-selected="true"] .valor-caja{
box-shadow:0 0 0 1px var(--accent),inset 0 1px 0 rgba(255,255,255,.06);}
/* La caja abierta apunta a su desarrollo con una pestaña bajo el borde. */
button.valor-paso[aria-selected="true"] .valor-caja::after{content:"";position:absolute;
left:50%;bottom:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);
background:var(--panel);border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);}
.valor-caja{position:relative;}
.valor-intro{padding:2rem 2.1rem;}
.valor-intro h3{margin:0 0 .8rem;font-size:clamp(1.45rem,2.6vw,2rem);font-weight:700;
letter-spacing:-.03em;line-height:1.1;}
.valor-intro p{margin:0 0 .8rem;color:var(--muted);font-size:1.04rem;line-height:1.66;max-width:52rem;}
.valor-intro-pista{margin:0!important;color:var(--accent)!important;font-size:.92rem!important;
font-weight:600;letter-spacing:-.015em;}
/* Cualquier bloque con display propio ignora el hidden del navegador: los
paneles de valores son grid, asi que hay que apagarlos explicitamente. */
[hidden]{display:none!important;}
/* Marca de Sobre nosotros: el sello estatico se sustituye por el video de
logotipo. Un unico