/* ═══════════════════════════════════════════════════════════════════════
julio.cuestas.com — plantilla adaptada del sitio de referencia
Lienzo de referencia: 1280 px · margen lateral 104 px · contenido 1072 px
Paleta: #FFBF00 (dorado, acento) · #0A0A0A (negro profundo) · #FFFFFF ·
#1A1A1A (secciones oscuras) · #F7F5F0 (fondo claro cálido)
Tipografía: titulares Space Grotesk · cuerpo Inter (cargadas en el )
═══════════════════════════════════════════════════════════════════════ */
/* ══════════════════ TOKENS ══════════════════ */
:root {
--negro: #0A0A0A;
--tinta: #1A1A1A;
--claro: #F7F5F0;
--acento: #FFBF00;
--acento-claro: #FFD24D;
--rojo-boton: #8a6a10;
--borde-calido: #6b5510;
--radio: 15.434px;
--radio-foto: 9px;
--sombra: 4px 4px 14px rgba(0, 0, 0, .25);
--sans: 'Inter', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif;
--display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
--pixel: var(--display);
/* Escala de texto sobre fondo oscuro — contrastes verificados AA/AAA
sobre #0A0A0A: cuerpo 13:1 · suave 10,6:1 · tenue 7,7:1 */
--texto-cuerpo: rgba(255, 255, 255, .86);
--texto-suave: rgba(255, 255, 255, .78);
--texto-tenue: rgba(255, 255, 255, .64);
/* … y sobre fondo claro */
--tinta-cuerpo: rgba(20, 20, 20, .92);
--tinta-suave: rgba(20, 20, 20, .8);
/* margen lateral: 104 px a 1280 px, proporcional por debajo */
--margen: clamp(20px, 8.125vw, 104px);
/* ritmo vertical de sección */
--pad-sec-sup: 73px;
--pad-sec-inf: 82px;
--gap-sub: 0px;
--gap-bloque: 50px;
--curva: cubic-bezier(.22, .68, .3, 1);
}
/* ══════════════════ BASE ══════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 80px;
background: var(--negro);
}
body {
margin: 0;
background: var(--negro);
color: #fff;
font-family: var(--sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
::selection { background: var(--acento); color: #fff; }
:focus-visible {
outline: 2px solid var(--acento-claro);
outline-offset: 3px;
border-radius: 4px;
}
.saltar {
position: fixed;
left: 12px;
top: 12px;
z-index: 200;
padding: 13px 22px;
background: var(--negro);
color: #fff;
font-weight: 700;
border: 2px solid var(--acento);
border-radius: 10px;
transform: translateY(-160%);
transition: transform .25s var(--curva);
}
.saltar:focus { transform: none; }
.contenedor {
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: var(--margen);
position: relative;
z-index: 2;
}
.centro { text-align: center; }
/* ══════════════════ UTILIDADES DE TEXTO ══════════════════ */
/* degradado naranja → blanco (títulos sobre fondo oscuro) */
.grad-claro {
background-image: linear-gradient(90deg, #FFBF00 0%, #FFD24D 40%, #fff 70%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* degradado naranja → negro (título sobre fondo claro) */
.grad-oscuro {
background-image: linear-gradient(90deg, #FFBF00 0%, #FFD24D 40%, var(--negro) 70%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* degradado naranja pleno */
.grad-naranja {
background-image: linear-gradient(90deg, #FFD24D 0%, #FFBF00 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.fino { font-weight: 300; color: var(--tinta); }
.negra { font-weight: 900; }
.negrita { font-weight: 700; }
.blanca { color: #fff; }
.media { font-weight: 500; font-size: .9167em; }
.destacado { color: var(--acento-claro); }
/* ══════════════════ TÍTULOS DE SECCIÓN ══════════════════ */
.titulo {
font-family: var(--display);
font-weight: 500;
text-transform: uppercase;
letter-spacing: -.0345em;
line-height: 1.05;
width: fit-content;
max-width: 100%;
}
.titulo--58 { font-size: clamp(30px, 4.531vw, 58px); }
.titulo--48 { font-size: clamp(28px, 3.75vw, 48px); }
.titulo--32 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.15; }
.titulo--doble { display: flex; flex-direction: column; line-height: 1.15; }
.titulo.centro { margin-inline: auto; text-align: center; }
.subtitulo {
margin-top: var(--gap-sub);
font-size: clamp(16px, 1.5625vw, 20px);
line-height: 1.65;
color: var(--texto-suave);
}
.subtitulo--oscuro { color: var(--tinta-suave); }
h1 + .subtitulo { margin-top: 18px; }
/* ══════════════════ SECCIONES Y FONDOS ══════════════════ */
.seccion {
position: relative;
padding-top: var(--pad-sec-sup);
padding-bottom: var(--pad-sec-inf);
isolation: isolate;
}
.seccion--oscura { background: var(--negro); color: #fff; }
.redes { padding-bottom: 36px; }
.seccion--clara { background: var(--claro); color: var(--tinta); }
/* grano sobre las secciones oscuras */
.ruido {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url('../assets/img/ruido.webp') center / cover no-repeat;
opacity: .16;
mix-blend-mode: color-burn;
}
/* trama diagonal de las secciones claras */
.trama {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.trama--diagonal {
background: url('../assets/img/textura-diagonal.webp') center / cover no-repeat;
opacity: .72;
}
.trama--rejilla {
background: url('../assets/img/textura-grid.webp') center bottom / 1110px auto no-repeat;
opacity: .49;
}
/* resplandor naranja en el borde superior de las secciones claras */
.resplandor {
position: absolute;
left: 50%;
top: 0;
z-index: 1;
width: 100%;
height: 200px;
transform: translateX(-50%);
pointer-events: none;
background:
radial-gradient(58% 100% at 62% 0%, rgba(255, 210, 77, .58) 0%, rgba(255, 210, 77, 0) 72%),
radial-gradient(52% 100% at 40% 0%, rgba(253, 229, 152, .42) 0%, rgba(253, 229, 152, 0) 70%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}
/* ══════════════════ SUPERFICIES DE VIDRIO ══════════════════ */
.vidrio {
position: relative;
border: 1.102px solid var(--borde-calido);
border-radius: var(--radio);
box-shadow: var(--sombra);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .05) 2.885%,
rgba(255, 210, 77, .05) 69.716%,
rgba(255, 191, 0, .05) 100%);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
.vidrio-claro {
position: relative;
border: 1.102px solid var(--borde-calido);
border-radius: var(--radio);
box-shadow: var(--sombra);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .55) 2.885%,
rgba(255, 210, 77, .07) 69.716%,
rgba(255, 191, 0, .09) 100%);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
/* ══════════════════ BOTONES ══════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9.345px;
min-height: 58.059px;
padding: 8px 32.706px;
border-radius: 49.059px;
font-size: 15.185px;
font-weight: 700;
letter-spacing: .9111px;
line-height: 1.25;
text-transform: uppercase;
text-align: center;
transition: transform .35s var(--curva), box-shadow .35s var(--curva),
background-image .35s var(--curva), color .35s var(--curva);
will-change: transform;
}
.btn .flecha { font-style: normal; font-size: 24px; line-height: 1; transition: transform .35s var(--curva); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .flecha { transform: translateX(4px); }
.btn:active { transform: translateY(0); }
.btn--claro {
color: var(--rojo-boton);
background-image: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(233, 233, 233, .94));
}
.btn--claro:hover {
background-image: linear-gradient(90deg, #fff, #ededed);
box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
.btn--fantasma {
color: rgba(255, 255, 255, .9);
font-weight: 500;
padding-inline: 32.707px;
border-radius: 53.732px;
background-image: linear-gradient(90deg, rgba(255, 191, 0, .2), rgba(255, 210, 77, .2));
}
.btn--fantasma:hover {
color: #fff;
background-image: linear-gradient(90deg, rgba(255, 191, 0, .45), rgba(255, 210, 77, .45));
}
.btn--naranja {
color: #fff;
background-image: linear-gradient(90deg, rgba(255, 210, 77, .5), rgba(255, 191, 0, .5));
}
.btn--naranja:hover {
background-image: linear-gradient(90deg, #FFD24D, #FFBF00);
box-shadow: 0 12px 30px rgba(255, 191, 0, .3);
}
/* pastillas (botones dentro de tarjetas) */
.pastilla {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 41px;
padding: 6px 16px;
white-space: nowrap;
border-radius: 65px;
font-size: 19.636px;
font-weight: 700;
line-height: 1.375;
color: #fff;
background-image: linear-gradient(90deg, rgba(255, 210, 77, .5), rgba(255, 191, 0, .5));
transition: transform .35s var(--curva), box-shadow .35s var(--curva), background-image .35s var(--curva);
}
.pastilla--ancha { width: 100%; }
.pastilla--cta {
width: calc(100% - 16px);
margin-inline: auto;
border-radius: 90px;
background-image: linear-gradient(90deg, #FFD24D, #FFBF00);
}
.pastilla--cta:hover { background-image: linear-gradient(90deg, #e6ac00, #cc9900); }
.pastilla:hover {
background-image: linear-gradient(90deg, #FFD24D, #FFBF00);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(255, 191, 0, .28);
}
.pastilla:hover .flecha-diag { transform: translate(3px, -3px); }
/* flecha diagonal ↗ */
.flecha-diag {
flex: none;
width: 12px;
height: 12px;
background: currentColor;
transition: transform .35s var(--curva);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* ══════════════════ NAVEGACIÓN ══════════════════ */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: 60px;
background: rgba(10, 10, 10, .3);
border-bottom: 1.111px solid rgba(255, 255, 255, .05);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: background .4s var(--curva), border-color .4s var(--curva);
}
.nav.nav--fija {
background: rgba(10, 10, 10, .88);
border-bottom-color: rgba(255, 255, 255, .1);
}
.nav__inner {
height: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: max(20px, 6.25vw);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.nav__marca {
font-family: var(--display);
font-size: 20px;
font-weight: 700;
letter-spacing: -.42px;
color: #fff;
white-space: nowrap;
padding-block: 8px;
transition: color .3s var(--curva);
}
.nav__marca:hover { color: var(--acento-claro); }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a {
position: relative;
font-size: 12px;
font-weight: 500;
letter-spacing: .48px;
line-height: 1.5;
text-transform: uppercase;
color: rgba(255, 255, 255, .82);
white-space: nowrap;
transition: color .3s var(--curva);
}
.nav__links a::after {
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 1.5px;
background: var(--acento);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s var(--curva);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__burger {
display: none;
width: 44px;
height: 44px;
margin-right: -10px;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.nav__burger span {
display: block;
width: 22px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: transform .35s var(--curva), opacity .25s var(--curva);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ══════════════════ 1 · HERO ══════════════════ */
.hero {
position: relative;
min-height: 831px;
padding-top: 110px;
padding-bottom: 130px;
display: flex;
align-items: flex-start;
overflow: hidden;
isolation: isolate;
background: #140f00;
}
.hero__fondo { position: absolute; inset: 0; z-index: 0; }
.hero__fondo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 26% center;
}
.hero__velo {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(16, 15, 14, .34) 0%, rgba(16, 15, 14, .1) 40%, rgba(16, 15, 14, 0) 62%);
}
.hero__desvanecido {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
z-index: 2;
background: linear-gradient(180deg, rgba(16, 15, 14, 0) 0%, var(--negro) 88%);
}
.hero__contenido { width: 100%; position: relative; z-index: 3; }
.hero__titulo {
display: flex;
flex-direction: column;
font-family: var(--display);
font-size: clamp(46px, 10.11vw, 129px);
line-height: .88;
letter-spacing: -.04em;
text-transform: uppercase;
margin-bottom: 8px;
}
.hero__nombre { font-weight: 700; color: #fff; }
.hero__apellido { font-weight: 300; width: fit-content; }
.hero__rol {
max-width: 497px;
margin-top: 0;
font-size: clamp(20px, 2.344vw, 30px);
font-weight: 700;
line-height: 1.1;
color: rgba(255, 255, 255, .8);
}
.hero__texto {
max-width: 617px;
margin-top: 24px;
font-size: clamp(16px, 1.719vw, 22px);
line-height: 1.5;
color: var(--texto-cuerpo);
text-wrap: pretty;
}
.hero__texto p + p { margin-top: 14px; }
.hero__texto b { font-weight: 700; color: #fff; }
.hero__acciones {
display: flex;
flex-wrap: wrap;
gap: 22px;
margin-top: 31px;
}
.hero__acciones .btn { white-space: nowrap; }
/* ══════════════════ 2 · QUIÉN ES MELISA ══════════════════ */
.quien { padding-top: 78px; padding-bottom: 91px; }
.quien__rejilla {
display: grid;
grid-template-columns: minmax(0, 385fr) minmax(0, 618fr);
gap: clamp(30px, 6.44%, 69px);
align-items: start;
}
.quien__retrato {
border-radius: 17px;
overflow: hidden;
border: 1px solid #4a3a10;
box-shadow: 6px 6px 21.6px rgba(0, 0, 0, .4);
aspect-ratio: 380 / 568;
max-width: 380px;
}
.quien__retrato { position: relative; }
.quien__retrato img {
position: absolute;
left: -16.87%;
top: -14.08%;
width: 131.89%;
height: 132.57%;
max-width: none;
object-fit: cover;
}
.cita {
position: relative;
margin-top: 30px;
padding: 30px 30px 24px;
border: 1px solid rgba(255, 210, 77, .45);
border-radius: 20px;
background:
linear-gradient(135deg, rgba(255, 191, 0, .18) 0%, rgba(255, 210, 77, .08) 48%, rgba(255, 255, 255, .035) 100%);
box-shadow: 0 14px 34px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .07);
overflow: hidden;
}
.cita::after { /* brillo cálido en la esquina superior */
content: '';
position: absolute;
inset: -60% 40% 55% -30%;
background: radial-gradient(closest-side, rgba(255, 210, 77, .35), transparent 100%);
pointer-events: none;
}
.cita__comilla {
position: relative;
display: block;
margin-bottom: 2px;
font-size: 60px;
line-height: .62;
font-weight: 700;
color: rgba(255, 210, 77, .55);
pointer-events: none;
}
.cita__texto {
position: relative;
font-size: clamp(17px, 1.5625vw, 20px);
font-weight: 700;
line-height: 1.5;
color: #ffe29a;
text-wrap: pretty;
}
.cita__firma {
position: relative;
margin-top: 16px;
font-size: 13px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--texto-tenue);
}
.quien__nota {
margin-top: 20px;
font-size: 15px;
line-height: 1.7;
color: var(--texto-suave);
}
.quien__nota p + p { margin-top: 10px; }
.quien__nota b { font-weight: 700; color: #fff; }
.quien__cuerpo {
margin-top: 9px;
font-size: clamp(16px, 1.5625vw, 20px);
line-height: 1.65;
color: var(--texto-cuerpo);
max-width: 62ch;
}
.quien__cuerpo p + p { margin-top: 1.15em; }
.quien__cuerpo b { font-weight: 700; color: #fff; }
.quien__cuerpo .destacado { color: var(--acento-claro); }
.quien__mas { margin-top: 1.15em; overflow: hidden; }
.quien__boton-mas { display: none; }
/* el bloque final de la biografía se colapsa solo cuando la rejilla
pasa a una sola columna (≤1023px): en escritorio se lee completo */
@media (max-width: 1023px) {
.quien__mas {
max-height: 0;
transition: max-height .5s var(--curva);
}
.quien__mas.abierto { max-height: 2400px; }
.quien__boton-mas {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 22px;
padding: 4px 0;
font-family: var(--display);
font-size: 15px;
font-weight: 700;
letter-spacing: .02em;
color: var(--acento-claro);
cursor: pointer;
background: none;
border: 0;
}
.quien__boton-mas .flecha {
font-style: normal;
font-size: 15px;
transition: transform .35s var(--curva);
}
.quien__boton-mas:hover { color: #fff; }
.quien__boton-mas[aria-expanded="true"] .flecha { transform: rotate(180deg); }
}
.quien__barra {
height: 9px;
margin-top: 15px;
background-image: linear-gradient(90deg, #FFBF00 0%, #FFD24D 40%, #fff 70%);
}
/* ══════════════════ 3 · TRAYECTORIA EN CIFRAS ══════════════════ */
.cifras__rejilla {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(121.264px, auto));
gap: 18px;
margin-top: var(--gap-bloque);
}
.cifra {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
padding: 20px 24px;
border: 1.102px solid var(--borde-calido);
border-radius: var(--radio);
box-shadow: var(--sombra);
color: var(--negro);
transition: transform .4s var(--curva), box-shadow .4s var(--curva);
}
.cifra:hover { transform: translateY(-3px); box-shadow: 6px 8px 22px rgba(0, 0, 0, .3); }
.cifra--alta { grid-row: span 2; align-items: flex-end; }
.cifra--alta .cifra__icono { align-self: flex-start; }
.cifra--naranja {
background-image: linear-gradient(90deg,
rgba(255, 255, 255, .9) 2.885%,
rgba(255, 210, 77, .9) 69.716%,
rgba(255, 191, 0, .9) 100%);
align-items: center;
}
.cifra--foto { background: rgba(255, 255, 255, .25); align-items: center; }
.cifra__foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.cifra__foto img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 46%;
filter: blur(26px) saturate(.85);
transform: scale(1.25);
}
.cifra__foto--baja img { object-position: 50% 52%; }
.cifra__foto::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(120% 150% at 12% 105%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .16) 100%);
}
.cifra__cuerpo { position: relative; z-index: 1; }
.cifra__numero {
font-family: var(--pixel);
font-size: clamp(34px, 3.75vw, 48px);
line-height: 1.05;
letter-spacing: -.56px;
color: var(--acento);
}
.cifra__pie {
margin-top: 8px;
font-size: 14px;
line-height: 1.32;
color: rgba(16, 15, 14, .82);
max-width: 26em;
}
.cifra__pie b { font-weight: 700; }
.cifra__icono {
position: relative;
z-index: 1;
flex: none;
width: 74px;
height: auto;
color: #fff;
opacity: .95;
}
.cifra__icono--vistas { width: 62px; }
/* iconos vectoriales: en las tarjetas claras van en naranja de marca */
svg.cifra__icono { width: 64px; height: 64px; }
.cifra__icono--marca { color: var(--acento); opacity: .92; }
/* ══════════════════ REJILLAS DE TARJETAS ══════════════════ */
.rejilla-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 47px;
margin-top: var(--gap-bloque);
align-items: stretch;
}
.rejilla-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 29px;
margin-top: var(--gap-bloque);
align-items: stretch;
}
.tarjeta {
display: flex;
flex-direction: column;
padding: 16px;
transition: transform .4s var(--curva), box-shadow .4s var(--curva), border-color .4s var(--curva);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: 6px 10px 26px rgba(0, 0, 0, .38); border-color: #b8940a; }
.medios .tarjeta { min-height: 432px; }
.articulos .tarjeta { min-height: 338px; }
.tarjeta__medio {
position: relative;
border-radius: var(--radio-foto);
overflow: hidden;
aspect-ratio: 292 / 164;
background: #1a1512;
}
.tarjeta__medio img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.tarjeta:hover .tarjeta__medio img { transform: scale(1.05); }
.tarjeta__play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 59px;
height: 59px;
color: #fff;
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5));
transition: transform .4s var(--curva);
}
.tarjeta__play svg { width: 100%; height: 100%; }
.tarjeta:hover .tarjeta__play { transform: translate(-50%, -50%) scale(1.08); }
.tarjeta__kicker {
margin-top: 16px;
font-size: 16px;
line-height: 1.2;
letter-spacing: .02em;
color: var(--acento-claro);
}
.tarjeta__titulo {
font-family: var(--display);
margin-top: 12px;
font-size: 23.6px;
font-weight: 700;
line-height: 1.375;
color: #fff;
text-wrap: balance;
}
.tarjeta__titulo--art { margin-top: 22px; font-size: 18.9px; line-height: 1.393; }
.tarjeta__texto {
margin-top: 7px;
font-size: 16px;
line-height: 1.55;
color: var(--texto-suave);
text-wrap: pretty;
}
.tarjeta__pie { margin-top: auto; padding-top: 12px; }
.tarjeta__pie--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tarjeta__pie--doble .pastilla { padding-inline: 10px; min-width: 0; }
.tarjeta--enlace { cursor: pointer; }
.tarjeta__leer {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 18px;
font-size: 15px;
font-weight: 700;
letter-spacing: .02em;
color: var(--acento-claro);
transition: gap .3s var(--curva);
}
.tarjeta__leer .flecha-diag { width: 11px; height: 11px; }
.tarjeta--enlace:hover .tarjeta__leer { gap: 12px; color: #ffd24d; }
/* ══════════════════ 5 · PROGRAMAS ══════════════════ */
.programa {
position: relative;
display: flex;
flex-direction: column;
min-height: 442px;
padding: 42px 38px 30px;
color: var(--tinta);
transition: transform .4s var(--curva), box-shadow .4s var(--curva);
}
.programa:hover { transform: translateY(-4px); box-shadow: 6px 10px 26px rgba(0, 0, 0, .22); }
.programa__chip {
position: absolute;
top: 15px;
right: 0;
display: inline-flex;
align-items: center;
height: 27px;
padding: 0 14px;
border-radius: 31px 0 0 31px;
background: var(--acento);
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.programa__titulo {
font-family: var(--display);
font-size: clamp(26px, 2.5vw, 32px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -.0717em;
text-transform: uppercase;
width: fit-content;
max-width: 100%;
}
.programa__bajada {
margin-top: 14px;
max-width: 400px;
font-size: clamp(17px, 1.5625vw, 20px);
line-height: 1.35;
color: var(--tinta-cuerpo);
}
.programa__lista {
margin-top: 23px;
display: flex;
flex-direction: column;
gap: 14px;
}
.programa__lista li {
position: relative;
padding-left: 25px;
max-width: 429px;
font-size: clamp(16px, 1.5625vw, 20px);
line-height: 1.35;
color: var(--tinta-suave);
}
.programa__lista li::before {
content: '';
position: absolute;
left: 0;
top: .62em;
width: 16.5px;
height: 16.5px;
transform: translateY(-50%) rotate(45deg);
background: var(--acento);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.programa__nota {
align-self: flex-start;
margin-top: 22px;
padding: 8px 16px;
border: 1px solid rgba(255, 191, 0, .3);
border-radius: 999px;
background: rgba(255, 191, 0, .09);
font-size: clamp(15px, 1.406vw, 18px);
font-weight: 500;
line-height: 1.3;
color: #8a6a10;
}
.programa .pastilla--cta { margin-top: auto; }
.programa__nota + .pastilla--cta { margin-top: 25px; }
/* ══════════════════ 6 · ARTÍCULOS ══════════════════ */
.articulos .centro { margin-top: 54px; }
/* ══════════════════ 7 · PREGUNTAS FRECUENTES ══════════════════ */
.faq { padding-bottom: 112px; }
.faq__lista {
max-width: 701px;
margin: 46px auto 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.faq__item { overflow: hidden; transition: box-shadow .4s var(--curva); }
.faq__item h3 { font: inherit; margin: 0; }
.faq__boton {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
min-height: 77.8px;
padding: 14px 27px 14px 23px;
cursor: pointer;
text-align: left;
font-family: var(--display);
font-size: clamp(19px, 2.031vw, 26px);
font-weight: 500;
line-height: 1.25;
letter-spacing: -.038em;
color: var(--negro);
transition: color .3s var(--curva);
}
.faq__boton:hover { color: var(--acento); }
.mas { position: relative; flex: none; width: 32px; height: 32px; }
.mas::before, .mas::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
background: var(--acento);
border-radius: 2px;
transition: transform .4s var(--curva), opacity .3s var(--curva);
}
.mas::before { width: 24px; height: 2.67px; transform: translate(-50%, -50%); }
.mas::after { width: 2.67px; height: 24px; transform: translate(-50%, -50%); }
.faq__boton[aria-expanded="true"] .mas::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__panel {
overflow: hidden;
transition: height .42s var(--curva);
}
.faq__cuerpo {
padding: 0 62px 24px 23px;
margin-top: -6px;
font-size: clamp(16px, 1.5625vw, 20px);
line-height: 1.6;
letter-spacing: -.03em;
color: var(--negro);
text-wrap: pretty;
}
.faq__cuerpo p + p { margin-top: 12px; }
.faq__cuerpo b { font-weight: 700; }
.faq__cuerpo a {
color: var(--acento);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
overflow-wrap: anywhere;
}
.faq__cuerpo a:hover { color: #cc9900; }
/* ══════════════════ 8 · REDES Y PIE ══════════════════ */
.redes__rejilla {
display: grid;
grid-template-columns: repeat(3, minmax(0, 312px));
gap: 18px;
margin-top: var(--gap-bloque);
justify-content: start;
}
.red {
display: flex;
align-items: center;
gap: 12px;
min-height: 80px;
padding: 12px 14px 12px 18px;
transition: transform .35s var(--curva), border-color .35s var(--curva), box-shadow .35s var(--curva);
}
.red:hover { transform: translateY(-3px); border-color: #b8940a; box-shadow: 6px 8px 20px rgba(0, 0, 0, .35); }
.red__icono { flex: none; width: 30px; height: 30px; color: var(--acento); }
.red__icono--yt { width: 34px; }
.red__texto {
font-family: var(--display);
font-size: clamp(19px, 2.089vw, 26.743px);
font-weight: 700;
line-height: 1.2;
color: #fff;
white-space: nowrap;
}
.colabs {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 28px;
margin-top: 62px;
}
.colabs__correo {
display: inline-block;
margin-top: 10px;
padding-block: 9px;
font-family: var(--display);
font-size: clamp(19px, 2.089vw, 26.743px);
font-weight: 700;
line-height: 1.3;
color: #fff;
overflow-wrap: anywhere;
transition: color .3s var(--curva);
}
.colabs__correo:hover { color: var(--acento-claro); }
.btn--kit { max-width: 100%; }
.linea-pie {
height: 1px;
margin: 58px calc(var(--margen) * -1) 0;
background-image: linear-gradient(90deg, #4a3a10 2%, #666 98%);
}
.copyright {
margin-top: 44px;
text-align: center;
font-size: clamp(15px, 1.5625vw, 20px);
line-height: 1.65;
color: var(--texto-tenue);
}
/* ══════════════════ ANIMACIONES DE ENTRADA ══════════════════ */
.js .reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .75s var(--curva), transform .75s var(--curva);
transition-delay: calc(var(--retardo, 0) * 90ms);
}
.js .reveal.visible { opacity: 1; transform: none; }
/* ═══════════════════════════════════════════════════════════════
ADAPTACIÓN · ESCRITORIO PEQUEÑO (1200 px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
.quien__rejilla { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 48px; }
.rejilla-3 { gap: 32px; }
.programa { padding: 42px 32px 28px; }
.tarjeta__titulo { font-size: 22px; }
.redes__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ═══════════════════════════════════════════════════════════════
ADAPTACIÓN · TABLETA (1024 px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
:root { --pad-sec-sup: 76px; --pad-sec-inf: 72px; --gap-bloque: 40px; }
.hero { min-height: 0; padding-top: 128px; padding-bottom: 110px; }
.hero__velo {
background:
linear-gradient(90deg, rgba(16, 15, 14, .58) 0%, rgba(16, 15, 14, .3) 46%, rgba(16, 15, 14, .04) 72%),
linear-gradient(180deg, rgba(16, 15, 14, .18) 0%, rgba(16, 15, 14, 0) 34%);
}
.hero__titulo { font-size: clamp(49px, 11vw, 106px); }
.hero__rol { max-width: 62%; }
.hero__texto { max-width: 66%; }
.quien { padding-top: 64px; padding-bottom: 76px; }
.quien__rejilla { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.quien__principal { order: 1; }
.quien__lateral {
order: 2;
display: flex;
align-items: center;
gap: 34px;
}
.quien__retrato { flex: 0 0 min(300px, 42%); margin: 0; }
.quien__aparte { flex: 1 1 auto; min-width: 0; }
.cita { margin-top: 0; }
.quien__barra { margin-top: 32px; }
.rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.rejilla-2 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.medios .tarjeta, .articulos .tarjeta, .programa { min-height: 0; }
.cifras__rejilla { grid-template-rows: auto; }
.trama--rejilla { background-size: 760px auto; opacity: .34; }
.cifra { min-height: 121px; }
.cifra--alta { grid-row: span 2; min-height: 260px; }
.redes__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq { padding-bottom: 84px; }
}
/* ═══════════════════════════════════════════════════════════════
ADAPTACIÓN · MENÚ MÓVIL (900 px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
.nav__burger { display: flex; }
.nav__links {
position: fixed;
left: 0;
right: 0;
top: 60px;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 8px max(20px, 6.25vw) 20px;
background: rgba(10, 10, 10, .97);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255, 255, 255, .08);
transform: translateY(-12px);
opacity: 0;
visibility: hidden;
transition: opacity .3s var(--curva), transform .3s var(--curva), visibility .3s;
}
.nav__links.abierto { opacity: 1; visibility: visible; transform: none; }
.nav__links a {
padding: 15px 4px;
font-size: 14px;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.nav__links a:last-child { border-bottom: 0; }
.nav__links a::after { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
ADAPTACIÓN · MÓVIL (760 px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 759px) {
:root { --pad-sec-sup: 62px; --pad-sec-inf: 60px; --gap-bloque: 32px; --gap-sub: 12px; }
html { scroll-padding-top: 70px; }
.hero {
padding-top: 118px;
padding-bottom: 90px;
}
.hero__fondo img { object-position: 74% 18%; }
.hero__velo {
background:
linear-gradient(180deg, rgba(16, 15, 14, .3) 0%, rgba(16, 15, 14, .45) 42%, rgba(16, 15, 14, .82) 74%, rgba(16, 15, 14, .95) 100%),
linear-gradient(90deg, rgba(16, 15, 14, .5) 0%, rgba(16, 15, 14, .18) 55%, rgba(16, 15, 14, .1) 100%);
}
.hero__desvanecido { height: 130px; }
.hero__titulo { font-size: clamp(40px, 13.38vw, 81px); margin-bottom: 6px; }
.hero__rol { max-width: none; margin-top: 14px; font-size: clamp(19px, 5.1vw, 26px); }
.hero__texto { max-width: none; margin-top: 20px; font-size: clamp(15.5px, 4.2vw, 19px); }
.hero__texto p + p { margin-top: 14px; }
.hero__acciones { gap: 14px; margin-top: 28px; }
.hero__acciones .btn { width: 100%; white-space: normal; }
.quien__lateral { flex-direction: column; align-items: stretch; gap: 26px; }
.quien__retrato { flex: none; }
.quien__retrato { max-width: 420px; }
.cita { padding: 24px 22px 20px; }
.cita__comilla { font-size: 50px; }
.quien__cuerpo p + p { margin-top: 20px; }
.quien__mas { margin-top: 20px; }
.trama--rejilla { background-size: 560px auto; opacity: .26; }
.cifras__rejilla { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cifra, .cifra--alta { grid-row: auto; min-height: 118px; }
.cifra--alta { min-height: 150px; align-items: center; }
.cifra--alta .cifra__icono { align-self: center; }
.cifra { align-items: center; padding: 18px 20px; }
.cifra__icono { width: 58px; }
.cifra__icono--vistas { width: 50px; }
.rejilla-3 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.tarjeta__titulo { font-size: 21px; }
.tarjeta__pie { padding-top: 20px; }
.tarjeta__pie--doble .pastilla { flex: 1 1 100%; }
.programa { padding: 40px 22px 26px; }
.programa__chip { font-size: 17px; height: 25px; padding: 0 12px; }
.programa__bajada, .programa__lista li, .programa__nota { max-width: none; }
.pastilla--cta { width: 100%; }
.faq__boton { min-height: 68px; padding: 14px 18px; gap: 12px; }
.mas { width: 26px; height: 26px; }
.mas::before { width: 20px; height: 2.4px; }
.mas::after { width: 2.4px; height: 20px; }
.faq__cuerpo { padding: 0 18px 20px; }
.redes__rejilla { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.red { min-height: 72px; padding: 12px 18px; }
.colabs { margin-top: 46px; gap: 22px; }
.colabs > * { width: 100%; }
.btn--kit { width: 100%; }
.linea-pie { margin-top: 44px; }
.copyright { margin-top: 32px; }
}
/* ══════════════════ MOVIMIENTO REDUCIDO ══════════════════ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
.js .reveal { opacity: 1; transform: none; }
}
/* ══════════════════ IMPRESIÓN ══════════════════ */
@media print {
.nav, .ruido, .trama, .resplandor, .hero__velo, .hero__desvanecido { display: none !important; }
body { background: #fff; color: #000; }
}