:root{ --arena:#E4DDC8; --arena-clara:#EFEADD; --tinta:#1C1815; --ambar:#F1402E; --agua:#3FB0AB; --header-h:78px; --lateral:clamp(20px,4vw,56px); --hueco:clamp(10px,1.1vw,18px); --display:"Aleo",Georgia,serif; --texto:"Inter","Helvetica Neue",Arial,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--arena); color:var(--tinta); font-family:var(--texto); font-optical-sizing:auto; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; padding-top:var(--header-h); overflow-x:hidden; } a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--ambar);outline-offset:4px;border-radius:2px} .grano{ position:fixed; inset:0; z-index:3; pointer-events:none; opacity:var(--tex-fuerza,.045); background-image:var(--tex-imagen,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")); background-size:var(--tex-tam,220px 220px); mix-blend-mode:var(--tex-mezcla,normal); /* algo más densa en los bordes que en el centro: da profundidad sin verse */ -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 44%,rgba(0,0,0,.42) 0%,rgba(0,0,0,.72) 58%,rgba(0,0,0,1) 100%); mask-image:radial-gradient(ellipse 78% 72% at 50% 44%,rgba(0,0,0,.42) 0%,rgba(0,0,0,.72) 58%,rgba(0,0,0,1) 100%); } /* ---------- variantes de textura ---------- Se activan con una clase en el : tex-papel, tex-cartulina, tex-trama. También se pueden probar sin tocar el HTML añadiendo ?textura=papel a la URL. La intensidad de cada una se ajusta con --tex-fuerza. */ body.tex-papel{ --tex-fuerza:.075; --tex-mezcla:multiply; --tex-tam:170px 170px, 780px 780px; --tex-imagen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='780' height='780'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); } body.tex-cartulina{ --tex-fuerza:.12; --tex-mezcla:multiply; --tex-tam:360px 360px; --tex-imagen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32 0.55' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"); } body.tex-trama{ --tex-fuerza:.075; --tex-mezcla:multiply; --tex-tam:6px 6px, 6px 6px; --tex-imagen: radial-gradient(circle at 1px 1px, rgba(28,24,21,.9) .8px, transparent 1px), radial-gradient(circle at 4px 4px, rgba(28,24,21,.55) .6px, transparent .9px); } body.tex-nada .grano{display:none} /* ---------- CABECERA ---------- */ .cabecera{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 var(--lateral); background:var(--arena); transition:background .45s ease,box-shadow .3s ease; } .cabecera.con-sombra{box-shadow:0 1px 0 rgba(28,24,21,.12)} .cabecera.abierta{background:transparent;box-shadow:none} .marca{display:flex;align-items:center;gap:10px;line-height:1} .marca__logo{ display:block; height:clamp(22px,2.6vw,30px); width:auto; transition:filter .35s ease; } /* sobre el panel oscuro el logo pasa a blanco para no perderse */ .cabecera.abierta .marca__logo{filter:brightness(0) invert(1)} .marca__texto{ font-family:var(--display); font-weight:700; font-size:clamp(17px,2.2vw,22px); letter-spacing:-.01em; transition:color .35s ease; } .cabecera.abierta .marca__texto{color:var(--arena-clara)} .boton-menu{ display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border:1px solid var(--tinta); border-radius:999px; background:var(--tinta); color:var(--arena-clara); font:inherit; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .35s ease,color .35s ease,border-color .35s ease; } @media (hover:hover){ .boton-menu:hover{background:var(--ambar);border-color:var(--ambar)} } /* tras cerrar el menú vuelve al negro aunque el puntero siga encima */ .boton-menu.sin-hover:hover{background:var(--tinta);border-color:var(--tinta)} .cabecera.abierta .boton-menu{ background:transparent; color:var(--arena-clara); border-color:rgba(228,221,200,.45); } .boton-menu__icono{position:relative;width:20px;height:14px;flex:none} .boton-menu__icono span{ position:absolute;left:0; width:100%;height:2px; background:currentColor; transition:transform .4s cubic-bezier(.65,0,.35,1),opacity .2s ease; } .boton-menu__icono span:nth-child(1){top:0} .boton-menu__icono span:nth-child(2){top:50%;margin-top:-1px} .boton-menu__icono span:nth-child(3){bottom:0} .cabecera.abierta .boton-menu__icono span:nth-child(1){transform:translateY(6px) rotate(45deg)} .cabecera.abierta .boton-menu__icono span:nth-child(2){opacity:0;transform:scaleX(.4)} .cabecera.abierta .boton-menu__icono span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ---------- PANEL DE NAVEGACIÓN ---------- */ .panel{ position:fixed; inset:0; z-index:90; background:var(--tinta); color:var(--arena-clara); padding:calc(var(--header-h) + 24px) var(--lateral) 40px; overflow-y:auto; overscroll-behavior:contain; transform:translateY(-100%); visibility:hidden; transition:transform .6s cubic-bezier(.76,0,.24,1),visibility 0s linear .6s; } .panel.abierto{ transform:translateY(0); visibility:visible; transition:transform .6s cubic-bezier(.76,0,.24,1),visibility 0s; } .panel__lista{list-style:none;margin:0 auto;padding:0;max-width:1100px} .panel__lista li{ border-bottom:1px solid rgba(228,221,200,.14); opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; } .panel.abierto .panel__lista li{ opacity:1; transform:none; transition-delay:calc(.16s + var(--i) * .04s); } .panel__enlace{ display:flex; align-items:baseline; gap:clamp(14px,3vw,34px); padding:clamp(10px,1.6vh,18px) 0; font-family:var(--display); font-size:clamp(24px,4.7vw,52px); font-weight:600; letter-spacing:-.015em; transition:color .25s ease,padding-left .35s cubic-bezier(.65,0,.35,1); } .panel__enlace:hover,.panel__enlace:focus-visible{color:var(--ambar);padding-left:14px} .panel__num{ flex:none; font-size:clamp(11px,1.2vw,14px); font-weight:500; letter-spacing:.1em; color:rgba(228,221,200,.45); transition:color .25s ease; } .panel__enlace:hover .panel__num{color:var(--agua)} .panel__pie{max-width:1100px;margin:36px auto 0;font-size:13px;color:rgba(228,221,200,.5)} /* ---------- HERO ---------- */ .hero{ position:relative; min-height:calc(100svh - var(--header-h)); display:grid; place-items:center; padding:clamp(40px,8vh,90px) var(--lateral) clamp(120px,18vh,180px); overflow:hidden; } .hero__lineas{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .linea{ position:absolute; left:0; width:100%; height:1px; background:linear-gradient(90deg,transparent 0%,currentColor 22%,currentColor 78%,transparent 100%); color:var(--tinta); opacity:.16; transform:translate3d(-105%,0,0); animation:barrido linear infinite; } .linea--gruesa{height:2px;opacity:.13} .linea--ambar{color:var(--ambar);opacity:.85;height:2px} .linea--agua{color:var(--agua);opacity:.75;height:2px} @keyframes barrido{ 0%{transform:translate3d(-105%,0,0) scaleX(.35)} 50%{transform:translate3d(0,0,0) scaleX(1)} 100%{transform:translate3d(105%,0,0) scaleX(.35)} } .hero__contenido{ position:relative; z-index:2; text-align:center; max-width:1200px; transition:transform .65s cubic-bezier(.22,1,.36,1),filter .65s ease; } body.menu-abierto .hero__contenido{transform:scale(1.025);filter:blur(2.5px)} @keyframes entrar{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes asomar{from{opacity:0}to{opacity:1}} .hero__rol,.hero__nombre,.hero__cta{opacity:0;animation:entrar .95s cubic-bezier(.22,1,.36,1) forwards} .hero__rol{animation-delay:.15s} .hero__nombre{animation-delay:.23s} .hero__cta{display:inline-block;animation-delay:.31s} .hero__lineas{opacity:0;animation:asomar 1.2s ease .55s forwards} .hero__rol{ /* el tracking deja un hueco tras la última letra: se descuenta para centrar de verdad */ margin:0 -.12em clamp(14px,2.5vh,26px) 0; font-family:var(--display); font-size:clamp(14px,2.1vw,22px); font-weight:500; letter-spacing:.12em; color:var(--ambar); } .hero__nombre{ margin:0; font-family:var(--display); font-size:clamp(50px,11.8vw,196px); font-weight:200; line-height:.94; letter-spacing:-.03em; } #apellido, .apellido{ font-family:"Alfa Slab One",Georgia,serif; font-weight:400; font-size:.93em; letter-spacing:.1em; margin-right:-.1em; transition:color .5s ease; } #apellido.encendido{color:var(--ambar);transition:none} .hero__boton{ display:inline-block; margin-top:clamp(30px,6vh,54px); padding:17px 34px; border:1px solid var(--tinta); border-radius:999px; background:var(--tinta); color:var(--arena-clara); font-size:15px; font-weight:600; letter-spacing:.02em; transition:background .3s ease,color .3s ease,transform .3s ease; } .hero__boton:hover{background:var(--ambar);color:var(--tinta);border-color:var(--ambar);transform:translateY(-2px)} .hero__boton.golpe{ background:var(--ambar); border-color:var(--ambar); color:var(--tinta); animation:golpeBoton .5s cubic-bezier(.36,.07,.19,.97); } @keyframes golpeBoton{ 0%{transform:translate(0,0) rotate(0)} 10%{transform:translate(3px,2px) rotate(-1.4deg)} 24%{transform:translate(-3px,-2px) rotate(1.2deg)} 40%{transform:translate(2.5px,1px) rotate(-.9deg)} 58%{transform:translate(-2px,-1px) rotate(.7deg)} 76%{transform:translate(1px,.5px) rotate(-.4deg)} 100%{transform:translate(0,0) rotate(0)} } /* ---------- ESCENA DEL PERSONAJE ---------- */ .escena{position:fixed;inset:0;z-index:1;pointer-events:none;transition:opacity .4s ease} .escena svg{width:100%;height:100%;display:block} @media (max-width:720px){ :root{--header-h:66px} .boton-menu{padding:10px 14px;gap:9px;font-size:11px} .panel__enlace{padding:12px 0} .hero__rol{letter-spacing:.1em;font-size:clamp(13px,3.6vw,18px)} .hero__nombre{font-size:clamp(44px,14vw,98px);line-height:.96;letter-spacing:-.025em} } @media (max-width:380px){ .boton-menu__etiqueta{display:none} .boton-menu{padding:11px} } @media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms!important} html{scroll-behavior:auto} .linea{animation:none;transform:none;opacity:.12} .hero__rol,.hero__nombre,.hero__cta,.hero__lineas{opacity:1;animation:none} .escena{display:none} } /* ============================================================ BLOQUES DE PROYECTOS Formatos disponibles: .rejilla--a 2 grandes + 4 medianas (Proyectos) .rejilla--b 2 grandes + 3 medianas (Web & Editorial) .duo + .rejilla--cuatro imagen y texto + 4 (Podcast) .rejilla--d columna grande + 3 apiladas (Motion) .rejilla--e 2 x 2 asimétrica (Corporativo) ============================================================ */ .bloque{ position:relative; padding:clamp(26px,4vh,54px) var(--lateral); max-width:1440px; margin:0 auto; } .bloque__epigrafe{ margin:0 0 8px; font-size:12px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--ambar); } .bloque__cabecera{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(18px,2.6vh,32px); } .bloque__todo{ flex:none; display:inline-flex; align-items:center; gap:8px; padding-bottom:6px; font-size:14px; font-weight:500; color:inherit; border-bottom:1px solid currentColor; transition:color .3s ease,gap .3s cubic-bezier(.22,1,.36,1); } .bloque__todo::after{content:"\2192";font-size:15px} .bloque__todo:hover{color:var(--ambar);gap:14px} .duo__texto .bloque__todo{margin-top:22px} .bloque__titulo{ margin:0; font-family:var(--display); font-size:clamp(32px,6vw,80px); font-weight:400; line-height:.96; letter-spacing:-.02em; } .bloque__texto{ margin:0; max-width:52ch; font-size:16px; line-height:1.6; color:rgba(28,24,21,.7); } /* ---------- rejillas ---------- */ .rejilla{display:grid;gap:var(--hueco)} /* todas las piezas en 16:9; solo el podcast va en cuadrado */ .rejilla--a{grid-template-columns:repeat(4,1fr)} .rejilla--a > .pieza:nth-child(-n+2){grid-column:span 2} .rejilla--b{grid-template-columns:repeat(6,1fr)} .rejilla--b > .pieza:nth-child(-n+2){grid-column:span 3} .rejilla--b > .pieza:nth-child(n+3){grid-column:span 2} .rejilla--cuatro{grid-template-columns:repeat(4,1fr)} .rejilla--cuatro > .pieza{aspect-ratio:1/1} /* la columna ancha lleva 2 piezas y la estrecha 3: con 1.5fr / 1fr las seis mantienen prácticamente el 16:9 y las dos columnas acaban a la misma altura */ .rejilla--d{grid-template-columns:1.5fr 1fr;aspect-ratio:1.48} .rejilla--d .columna{display:grid;gap:var(--hueco);min-height:0} .rejilla--d .columna:first-child{grid-template-rows:1fr 1fr} .rejilla--d .columna:last-child{grid-template-rows:repeat(3,1fr)} .rejilla--d .pieza{aspect-ratio:auto;height:100%;min-height:0} .rejilla--e{grid-template-columns:1fr 1fr} /* imagen destacada + texto al lado */ .duo{ display:grid; grid-template-columns:minmax(260px,420px) 1fr; gap:clamp(26px,4vw,64px); align-items:start; margin-bottom:var(--hueco); } .duo .pieza{aspect-ratio:1/1} .duo__texto{padding-top:clamp(0px,2vh,24px)} .duo__texto .bloque__titulo{margin-bottom:20px} /* ---------- pieza ---------- */ .pieza{ position:relative; margin:0; aspect-ratio:16/9; overflow:hidden; border-radius:6px; background:#D6CEB6; } .pieza img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.22,1,.36,1); } .pieza[data-tipo="video"], .pieza[data-tipo="enlace"], .pieza[data-tipo="imagen"]{cursor:pointer} /* al pasar por encima crece la caja entera; se usa la propiedad scale, independiente de transform, para no pisar la animación de aparición */ .pieza{transition:scale .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease} @media (hover:hover){ .pieza[data-tipo="video"]:hover, .pieza[data-tipo="enlace"]:hover, .pieza[data-tipo="imagen"]:hover{scale:1.025;z-index:5} .pieza:hover .pieza__play i{transform:scale(1.1);background:var(--arena-clara)} } .pieza__meta{ display:block; margin-top:3px; font-size:12px; font-weight:400; letter-spacing:.01em; opacity:.6; } .pieza__nombre{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:44px 18px 15px; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--arena-clara); background:linear-gradient(transparent,rgba(10,10,12,.78)); opacity:0; transform:translateY(10px); transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1); pointer-events:none; } .pieza:hover .pieza__nombre, .pieza:focus-within .pieza__nombre, .pieza:focus-visible .pieza__nombre{opacity:1;transform:none} .pieza:focus-visible{outline:2px solid var(--ambar);outline-offset:3px} .pieza__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none} .pieza__play i{ width:62px;height:62px; border-radius:50%; background:rgba(239,234,221,.8); display:grid;place-items:center; transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s ease; } .pieza__play svg{width:20px;height:20px;fill:var(--tinta);margin-left:3px} /* ---------- modal ---------- */ .modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(16px,4vw,56px); background:rgba(12,12,14,.92); opacity:0; visibility:hidden; transition:opacity .35s ease,visibility 0s linear .35s; } .modal.abierto{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s} .modal__caja{ width:min(1200px,100%); max-height:100%; display:grid; place-items:center; transform:scale(.97); transition:transform .4s cubic-bezier(.22,1,.36,1); } .modal.abierto .modal__caja{transform:none} .modal__caja img{max-width:100%;max-height:86vh;display:block;border-radius:4px} .modal__caja iframe, .modal__caja video{width:100%;aspect-ratio:16/9;max-height:86vh;border:0;border-radius:4px;background:#000} .modal__cerrar{ position:absolute; top:clamp(12px,2.5vw,26px); right:clamp(12px,2.5vw,26px); width:46px;height:46px; border:1px solid rgba(239,234,221,.35); border-radius:50%; background:transparent; color:var(--arena-clara); font-size:22px; line-height:1; cursor:pointer; transition:background .3s ease,border-color .3s ease,color .3s ease; } .modal__cerrar:hover{background:var(--ambar);border-color:var(--ambar);color:var(--tinta)} /* ---------- móvil: todo en una columna ---------- */ @media (max-width:860px){ .rejilla--d{grid-template-columns:1fr;aspect-ratio:auto} .rejilla--d .columna{grid-template-rows:auto} .rejilla--d .pieza{height:auto;aspect-ratio:16/9} } @media (max-width:720px){ .rejilla, .rejilla--d .columna{display:block !important;aspect-ratio:auto !important} .pieza:not(.portada):not(.carrusel){ display:block !important; aspect-ratio:auto !important; height:auto !important; overflow:visible; background:none; border-radius:0; margin:0 0 30px; } .pieza:not(.portada):not(.carrusel) img{height:auto !important;aspect-ratio:16/9;border-radius:6px;transform:none !important} .rejilla--cuatro > .pieza:not(.carrusel) img, .duo .pieza:not(.carrusel) img{aspect-ratio:1/1 !important} .pieza .pieza__nombre, .duo .pieza__nombre, .rejilla .pieza__nombre{ position:static !important; display:block; opacity:1 !important; transform:none !important; background:none !important; padding:11px 2px 0; font-size:15px; font-weight:600; line-height:1.3; color:var(--tinta); } .pieza__meta{font-size:12.5px;margin-top:2px;opacity:.58} .pieza__play{inset:0 0 auto 0;height:auto;aspect-ratio:16/9} .rejilla--cuatro > .pieza .pieza__play, .duo .pieza .pieza__play{aspect-ratio:1/1} .duo__texto{margin-top:22px} /* el carrusel conserva su caja cuadrada y, en el podcast, baja debajo del texto */ .duo{display:flex !important;flex-direction:column;gap:26px;aspect-ratio:auto !important} .duo__texto{order:1} .duo .carrusel{order:2} .duo .carrusel, .carrusel{ position:relative !important; display:block !important; width:100% !important; aspect-ratio:1/1 !important; height:auto !important; overflow:hidden !important; border-radius:6px; margin:0 0 30px !important; } .duo .carrusel img, .carrusel img{ position:absolute !important; height:100% !important; width:100% !important; aspect-ratio:auto !important; border-radius:0; } } /* ============================================================ PIE — ¿Hablamos? ============================================================ */ .pie{ position:relative; background:var(--tinta); color:var(--arena-clara); padding:clamp(70px,13vh,150px) var(--lateral) clamp(30px,5vh,54px); margin-top:clamp(96px,10vh,130px); /* aire para el personaje que camina sobre el canto */ } .pie__lineas{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .pie .linea{color:var(--arena-clara);opacity:.13} .pie .linea--ambar{color:var(--ambar);opacity:.75} .pie__interior{position:relative;z-index:2;max-width:1440px;margin:0 auto} .pie__epigrafe{ margin:0 0 10px; font-size:12px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--ambar); } .pie__titulo{ margin:0 0 clamp(4px,.8vh,12px); font-family:var(--display); font-size:clamp(46px,10.8vw,166px); font-weight:800; line-height:.94; letter-spacing:-.025em; } .pie__correo{ display:inline-block; margin-top:0; font-size:clamp(21px,3.6vw,46px); font-weight:600; letter-spacing:-.03em; line-height:1.1; background-image:linear-gradient(var(--ambar),var(--ambar)); background-size:0 2px; background-position:0 100%; background-repeat:no-repeat; transition:color .35s ease,background-size .5s cubic-bezier(.22,1,.36,1); } .pie__correo:hover{color:var(--ambar);background-size:100% 2px} .pie__acciones{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,5vh,52px); } .boton-pie{ display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border:1px solid rgba(239,234,221,.32); border-radius:999px; font-size:14px; font-weight:600; letter-spacing:.02em; transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease; } .boton-pie span{opacity:.55;font-weight:400} .boton-pie:hover{background:var(--ambar);border-color:var(--ambar);color:var(--tinta);transform:translateY(-2px)} .boton-pie:hover span{opacity:.7;color:var(--tinta)} .boton-pie--relleno{background:var(--arena-clara);border-color:var(--arena-clara);color:var(--tinta)} .boton-pie--relleno:hover{background:var(--ambar);border-color:var(--ambar)} .boton-pie svg{width:17px;height:17px;fill:currentColor} .pie__legal{ display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; margin-top:clamp(46px,9vh,110px); padding-top:22px; border-top:1px solid rgba(239,234,221,.16); font-size:13px; color:rgba(239,234,221,.5); } .pie__legal a{transition:color .3s ease} .pie__legal a:hover{color:var(--ambar)} .pie__legal .separa{margin-left:auto} @media (max-width:720px){ .pie{margin-top:112px} .pie__acciones{flex-direction:column;align-items:stretch} .boton-pie{justify-content:center} .pie__legal .separa{margin-left:0} .pie__correo{background-size:100% 2px} } /* ---------- bloque a sangre en oscuro ---------- */ .bloque--oscuro{ color:var(--arena-clara); padding-top:clamp(48px,7vh,96px); padding-bottom:clamp(48px,7vh,96px); margin:clamp(28px,4vh,56px) auto; } .bloque--oscuro::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--tinta); z-index:0; } .bloque--oscuro > *{position:relative;z-index:1} .bloque--oscuro .bloque__texto{color:rgba(239,234,221,.66)} @media (max-width:720px){ .bloque--oscuro .pieza .pieza__nombre{color:var(--arena-clara)} } /* ---------- aparición al entrar en pantalla ---------- */ .revelar{ opacity:0; transform:translateY(26px); /* el retraso escalonado solo afecta a la aparición; la escala del hover va sin demora */ transition: opacity .85s cubic-bezier(.22,1,.36,1) var(--retraso,0s), transform .85s cubic-bezier(.22,1,.36,1) var(--retraso,0s), scale .55s cubic-bezier(.22,1,.36,1) 0s; } .revelar.visible{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .revelar{opacity:1;transform:none;transition:none} } /* personaje que pasea por el canto del pie: capa fija, nada lo recorta */ .pie__paseante{ position:fixed; inset:0; z-index:4; pointer-events:none; transition:opacity .3s ease; } .pie__paseante svg{width:100%;height:100%;display:block} @media (prefers-reduced-motion:reduce){ .pie__paseante{display:none} body.menu-abierto .hero__contenido{transform:none;filter:none} } /* ============================================================ TÁCTIL: sin ratón no hay hover, así que el título es siempre un pie de foto bajo la imagen. Vale para móvil y para tablet, donde la rejilla sigue teniendo varias columnas. ============================================================ */ @media (hover:none){ /* sin ratón: una columna simple, con el título como pie de foto. Se abandona el grid para que ninguna fila pueda recortar ni solapar. */ .rejilla, .rejilla--d .columna{display:block !important;aspect-ratio:auto !important} .pieza:not(.portada):not(.carrusel){ display:block !important; aspect-ratio:auto !important; height:auto !important; overflow:visible; background:none; border-radius:0; margin:0 0 30px; } .pieza:not(.portada):not(.carrusel) img{height:auto !important;aspect-ratio:16/9;border-radius:6px;transform:none !important} .rejilla--cuatro > .pieza:not(.carrusel) img, .duo .pieza:not(.carrusel) img{aspect-ratio:1/1 !important} .pieza .pieza__nombre, .duo .pieza__nombre, .rejilla .pieza__nombre{ position:static !important; display:block; opacity:1 !important; transform:none !important; background:none !important; padding:11px 2px 0; font-size:15px; font-weight:600; line-height:1.3; color:var(--tinta); } .pieza__meta{font-size:12.5px;margin-top:2px;opacity:.58} .bloque--oscuro .pieza .pieza__nombre{color:var(--arena-clara)} .pieza__play{inset:0 0 auto 0;height:auto;aspect-ratio:16/9} .rejilla--cuatro > .pieza .pieza__play, .duo .pieza .pieza__play{aspect-ratio:1/1} .duo__texto{margin-top:22px} /* el carrusel conserva su caja cuadrada y, en el podcast, baja debajo del texto */ .duo{display:flex !important;flex-direction:column;gap:26px;aspect-ratio:auto !important} .duo__texto{order:1} .duo .carrusel{order:2} .duo .carrusel, .carrusel{ position:relative !important; display:block !important; width:100% !important; aspect-ratio:1/1 !important; height:auto !important; overflow:hidden !important; border-radius:6px; margin:0 0 30px !important; } .duo .carrusel img, .carrusel img{ position:absolute !important; height:100% !important; width:100% !important; aspect-ratio:auto !important; border-radius:0; } } /* ---------- carrusel con cortinilla hacia arriba ---------- */ .carrusel{position:relative;overflow:hidden;cursor:default} .carrusel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.025); transition:opacity 1.1s ease,transform 2.4s cubic-bezier(.22,1,.36,1); } .carrusel img.visible{opacity:1;transform:scale(1)} @media (prefers-reduced-motion:reduce){ .carrusel img{transition:none} } /* ============================================================ PORTADILLA — hero corto de las páginas interiores ============================================================ */ .portadilla{ position:relative; max-width:1440px; margin:0 auto; padding:clamp(34px,7vh,78px) var(--lateral) clamp(20px,4vh,44px); text-align:center; } .portadilla__marca{ margin:0 -.12em clamp(8px,1.4vh,16px) 0; font-family:var(--display); font-weight:500; font-size:clamp(13px,1.8vw,19px); letter-spacing:.12em; color:var(--ambar); } .portadilla__titulo{ margin:0; font-family:var(--display); font-weight:400; font-size:clamp(32px,6.6vw,96px); line-height:.98; letter-spacing:-.03em; } /* ============================================================ SECCIÓN: PODCAST (body.sec-podcast) Rejilla de portadas cuadradas, sin títulos, en filas de cuatro. ============================================================ */ .portadas{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--hueco); } .portadas .portada{ position:relative; margin:0; aspect-ratio:1/1; overflow:hidden; border-radius:6px; background:#D6CEB6; cursor:pointer; } .portadas .portada img{ width:100%; height:100%; object-fit:cover; display:block; } .portadas .portada{transition:scale .55s cubic-bezier(.22,1,.36,1)} .portadas .portada::after{ content:""; position:absolute; inset:0; background:var(--tinta); opacity:0; transition:opacity .35s ease; pointer-events:none; } @media (hover:hover){ .portadas .portada:hover{scale:1.035;z-index:5} .portadas .portada:hover::after{opacity:.1} } .portadas .portada:focus-visible{outline:2px solid var(--ambar);outline-offset:3px} @media (max-width:980px){ .portadas{grid-template-columns:repeat(3,1fr)} } @media (max-width:620px){ .portadas{grid-template-columns:1fr;gap:22px} } /* ============================================================ SECCIÓN: WEB & EDITORIAL (body.sec-web) Ritmo de 2 piezas anchas + 3 medias, repetido. ============================================================ */ .rejilla--ritmo{grid-template-columns:repeat(6,1fr)} .rejilla--ritmo > .pieza:nth-child(5n+1), .rejilla--ritmo > .pieza:nth-child(5n+2){grid-column:span 3} .rejilla--ritmo > .pieza:nth-child(5n+3), .rejilla--ritmo > .pieza:nth-child(5n+4), .rejilla--ritmo > .pieza:nth-child(5n){grid-column:span 2} @media (max-width:900px){ .rejilla--ritmo{grid-template-columns:repeat(2,1fr)} .rejilla--ritmo > .pieza{grid-column:span 1 !important} } /* ============================================================ SECCIÓN: MOTION (body.sec-motion) Una tarjeta por fila a todo el ancho, con el play centrado sobre el vídeo y el título siempre debajo. ============================================================ */ .tarjetas{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(26px,3.6vh,46px) var(--hueco); } .tarjetas .pieza{ aspect-ratio:auto !important; height:auto !important; overflow:visible; background:none; border-radius:0; } .tarjetas .pieza img{ width:100%; height:auto !important; aspect-ratio:16/9; border-radius:8px; object-fit:cover; } /* el play se ciñe al vídeo, no a la tarjeta entera */ .tarjetas .pieza__play{ inset:0 0 auto 0; aspect-ratio:16/9; height:auto; } .tarjetas .pieza__play i{width:clamp(52px,5.4vw,74px);height:clamp(52px,5.4vw,74px)} .tarjetas .pieza__play svg{width:clamp(18px,1.9vw,24px);height:clamp(18px,1.9vw,24px)} /* el título va siempre debajo, nunca sobre la imagen */ .tarjetas .pieza .pieza__nombre{ position:static !important; display:block; opacity:1 !important; transform:none !important; background:none !important; padding:14px 2px 0; font-family:var(--display); font-size:clamp(18px,2.4vw,28px); font-weight:400; line-height:1.2; letter-spacing:-.01em; color:var(--tinta); } .tarjetas .pieza__meta{ font-family:var(--texto); font-size:13px; letter-spacing:.02em; margin-top:5px; opacity:.6; } @media (hover:hover){ .tarjetas .pieza:hover, .filas .pieza:hover{scale:1.02} } @media (max-width:720px){ .tarjetas{grid-template-columns:1fr;gap:32px} } /* ============================================================ SECCIÓN: CORPORATIVO (body.sec-corporativo) Filas sueltas de 2, 3 o 4 piezas: el ritmo se compone en el HTML añadiendo
con sus piezas. El título aparece sobre la imagen al pasar el ratón, como en la portada; en táctil pasa a pie de foto. ============================================================ */ .filas{display:grid;gap:var(--hueco)} /* mismo aire entre filas que entre columnas */ .fila{display:grid;gap:var(--hueco)} .fila--2{grid-template-columns:repeat(2,1fr)} .fila--3{grid-template-columns:repeat(3,1fr)} .fila--4{grid-template-columns:repeat(4,1fr)} @media (max-width:900px){ .fila--3, .fila--4{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .filas{gap:32px} .fila{grid-template-columns:1fr !important;gap:32px} } /* ============================================================ SECCIÓN: YOUTUBE (body.sec-youtube) Miniaturas 16:9 en filas de tres, sin título ni enlace. ============================================================ */ .miniaturas{grid-template-columns:repeat(3,1fr)} .miniaturas .portada{aspect-ratio:16/9} @media (max-width:900px){ .miniaturas{grid-template-columns:repeat(2,1fr)} } @media (max-width:620px){ .miniaturas{grid-template-columns:1fr;gap:20px} } /* ============================================================ SECCIÓN: SOBRE MÍ (body.sec-sobre-mi) ============================================================ */ .retrato{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(16px,3vw,40px); margin:0 0 clamp(20px,3.5vh,36px); } .retrato::before, .retrato::after{ content:""; height:1px; background:var(--tinta); opacity:.22; } .retrato img{ display:block; width:clamp(118px,17vw,186px); aspect-ratio:1; border-radius:50%; object-fit:cover; background:#D6CEB6; } .sobremi__enlaces{ margin:clamp(14px,2.2vh,22px) 0 0; font-size:14px; letter-spacing:.02em; } .sobremi__enlaces a{ border-bottom:1px solid rgba(28,24,21,.3); padding-bottom:2px; transition:color .3s ease,border-color .3s ease; } .sobremi__enlaces a:hover{color:var(--ambar);border-color:var(--ambar)} .sobremi__enlaces span{opacity:.35;margin:0 9px} .texto{ max-width:72ch; margin:0 auto; font-size:clamp(16px,1.15vw,17.5px); line-height:1.75; } .texto__lema{ margin:0 0 clamp(24px,4vh,44px); font-family:var(--display); font-weight:400; font-size:clamp(23px,3.2vw,40px); line-height:1.22; letter-spacing:-.02em; text-wrap:balance; } .texto h2{ margin:clamp(34px,5vh,56px) 0 12px; font-family:var(--display); font-weight:600; font-size:clamp(19px,2.1vw,26px); line-height:1.25; letter-spacing:-.01em; } .texto p{margin:0 0 18px;color:rgba(28,24,21,.85)} .texto strong{font-weight:600;color:var(--tinta)} .texto a{border-bottom:1px solid rgba(28,24,21,.35);transition:color .3s ease,border-color .3s ease} .texto a:hover{color:var(--ambar);border-color:var(--ambar)} .texto ul{margin:0 0 18px;padding:0;list-style:none} .texto li{ position:relative; padding-left:20px; margin-bottom:7px; color:rgba(28,24,21,.85); } .texto li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:1px; background:var(--ambar); } .texto__firma{ margin-top:clamp(30px,5vh,52px); padding-top:20px; border-top:1px solid rgba(28,24,21,.16); font-family:var(--display); font-size:17px; }