/* ============================================================= FONTAMADRID · 8-bit / 16-bit retro system 1. Tokens · 2. Reset · 3. Utilities · 4. Typography 5. Components · 6. Sections · 7. Hero · 8. Effects 9. Responsive · 10. Reduced-motion ============================================================= */ /* ============ 1. TOKENS ============ */ :root{ --blue:#2a5fd6; --blue-deep:#173a94; --navy:#0e1c4f; --ink:#081026; --red:#e23a2c; --red-deep:#b3241a; --orange:#f6941e; --orange-hot:#ff7a1a; --green:#3fae4f; --green-deep:#2b8039; --cream:#fdf1d6; --paper:#f7eccf; --bg:#0b1330; --panel:#14224f; --panel-2:#1b2e63; --pixel:"Press Start 2P", "Courier New", monospace; --body:"VT323", "Courier New", monospace; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --gutter: clamp(1.1rem, 4vw, 3rem); --maxw: 1180px; --shadow-hard: 8px 8px 0 rgba(0,0,0,.42); } /* ============ 2. RESET ============ */ *,*::before,*::after{ box-sizing:border-box; margin:0; } /* Listas usadas como componentes (rejillas de servicios, tienda, reels, cromos, datos, menú, pie): fuera el relleno de 40px que el navegador pone a la izquierda de las listas. Desplazaba todo ese contenido a la derecha. :where() = sin prioridad, para que .nav-list móvil conserve su relleno; las listas sin clase (texto normal, aviso legal) no se tocan. */ :where(ul[class], ol[class]){ padding:0; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ font-family:var(--body); font-size:20px; line-height:1.45; color:var(--cream); background:var(--bg); /* Ojo: no poner overflow-x aquí. Un overflow en rompe el position:fixed que ScrollTrigger usa para fijar la portada. */ overscroll-behavior-y:none; -webkit-font-smoothing:antialiased; } img,svg{ display:block; max-width:100%; } img{ height:auto; } button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; } a{ color:inherit; text-decoration:none; } p{ text-wrap:pretty; } ::selection{ background:var(--orange); color:var(--navy); } :focus-visible{ outline:3px solid var(--orange); outline-offset:3px; } /* ============ 3. UTILITIES ============ */ .wrap{ width:min(100% - var(--gutter)*2, var(--maxw)); margin-inline:auto; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link{ position:fixed; top:-120px; left:1rem; z-index:9999; background:var(--orange); color:var(--navy); font-family:var(--pixel); font-size:.6rem; padding:.8rem 1rem; box-shadow:var(--shadow-hard); transition:top .2s var(--ease-out); } .skip-link:focus{ top:1rem; } [hidden]{ display:none !important; } .eyebrow{ font-family:var(--pixel); font-size:.55rem; letter-spacing:.06em; color:var(--orange); text-transform:uppercase; margin-bottom:1rem; } .accent-orange{ color:var(--orange); } /* ============ 4. TYPOGRAPHY ============ */ .h-pixel{ font-family:var(--pixel); font-weight:400; line-height:1.25; font-size:clamp(1.15rem, 4.4vw, 2.4rem); color:var(--cream); text-shadow:4px 4px 0 var(--navy), 8px 8px 0 rgba(0,0,0,.25); letter-spacing:.01em; } .h-pixel--sm{ font-size:clamp(.85rem, 2.8vw, 1.3rem); text-shadow:3px 3px 0 var(--navy); } .section__lead{ font-size:1.25rem; color:#cdd7f5; max-width:52ch; margin-top:1rem; } strong{ color:#fff; } /* ============ 5. COMPONENTS ============ */ .btn{ --btn-bg:var(--red); --btn-bg-hover:var(--red-deep); display:inline-flex; align-items:center; gap:.6em; font-family:var(--pixel); font-size:.62rem; line-height:1; text-transform:uppercase; color:var(--cream); background:var(--btn-bg); padding:1em 1.2em; border:3px solid var(--navy); box-shadow:5px 5px 0 var(--navy); transition:transform .12s var(--ease-out), box-shadow .12s var(--ease-out), background-color .15s var(--ease); } /* brand icons (inline SVG sprite) */ .icon-sprite{ display:none; } .ico{ width:1.3em; height:1.3em; fill:currentColor; flex:none; } .btn .btn__icon{ width:1.35em; height:1.35em; } @media (hover:hover) and (pointer:fine){ .btn:hover{ background:var(--btn-bg-hover); transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--navy); } } .btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--navy); } .btn--ig{ --btn-bg:var(--orange); --btn-bg-hover:var(--orange-hot); color:var(--navy); } .btn--wa{ --btn-bg:var(--green); --btn-bg-hover:var(--green-deep); } .btn--ghost{ --btn-bg:transparent; color:var(--cream); box-shadow:inset 0 0 0 3px var(--navy), 5px 5px 0 rgba(0,0,0,.3); } @media (hover:hover) and (pointer:fine){ .btn--ghost:hover{ background:rgba(255,255,255,.08); } } .btn--xl{ font-size:.72rem; padding:1.15em 1.5em; } .btn--sm{ font-size:.5rem; padding:.9em 1.05em; box-shadow:4px 4px 0 var(--navy); } @media (hover:hover) and (pointer:fine){ .btn--sm:hover{ box-shadow:5px 5px 0 var(--navy); } } .btn--sm:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--navy); } .btn[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:5px 5px 0 var(--navy); transform:none; } /* pixel panel frame */ .panel, .mission, .powerup__link, .podcast-card, .quote, .frame-tv{ border:4px solid var(--navy); box-shadow:0 0 0 4px rgba(253,241,214,.85), 0 0 0 8px var(--navy), var(--shadow-hard); } /* ============ 6. HEADER ============ */ .site-header{ /* fixed (no sticky): así se superpone a la portada en vez de empujarla 74px hacia abajo, que era lo que dejaba los pies fuera de pantalla. */ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem var(--gutter); background:rgba(10,18,44,.86); border-bottom:4px solid var(--navy); box-shadow:0 4px 0 rgba(0,0,0,.35); backdrop-filter:blur(6px); } .brand{ display:flex; align-items:center; gap:.7rem; } .brand__logo{ width:52px; height:52px; image-rendering:pixelated; filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4)); } .brand__name{ font-family:var(--pixel); font-size:.72rem; color:var(--cream); text-shadow:2px 2px 0 var(--navy); } .brand__name-accent{ color:var(--orange); } .site-nav{ display:flex; align-items:center; } .nav-list{ list-style:none; display:flex; align-items:center; gap:1.15rem; } /* 8 enlaces: separación algo menor */ .nav-list a{ font-family:var(--pixel); font-size:.56rem; color:#cdd7f5; transition:color .15s var(--ease); } @media (hover:hover){ .nav-list a:hover{ color:var(--orange); } } .nav-cta{ display:inline-flex; align-items:center; gap:.5em; color:var(--navy) !important; background:var(--orange); padding:.85em 1em; border:3px solid var(--navy); box-shadow:3px 3px 0 var(--navy); } .nav-toggle{ display:none; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after{ content:""; display:block; width:26px; height:4px; background:var(--cream); box-shadow:0 0 0 2px var(--navy); } .nav-toggle__bars{ position:relative; } .nav-toggle__bars::before{ position:absolute; top:-9px; } .nav-toggle__bars::after{ position:absolute; top:9px; } /* ============ 7. HERO ============ */ .hero{ position:relative; min-height:100vh; overflow:hidden; min-height:100svh; /* móvil: altura sin la barra del navegador, para no cortar los pies */ background:linear-gradient(180deg,#0b1330, #0b1330 40%, transparent), url("assets/img/bg-bano.jpg") center 30%/cover no-repeat, #16204a; image-rendering:pixelated; } .hero::after{ /* scanlines */ content:""; position:absolute; inset:0; pointer-events:none; z-index:4; opacity:.22; background:repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px); mix-blend-mode:multiply; } .hero__scene{ position:absolute; inset:0; z-index:2; } /* La escena escala junta: la tubería mide ~1,35 veces el alto H del fontanero, así "meterse en la tubería" encaja en cualquier pantalla. Móvil H=180 (aquí) · tablet ≥600px H=240 · escritorio ≥960px H=310. */ .hero__pipe{ position:absolute; right:4%; bottom:15%; width:243px; height:auto; image-rendering:pixelated; filter:drop-shadow(6px 8px 0 rgba(0,0,0,.35)); z-index:2; } .hero__char{ position:absolute; left:16%; bottom:14.5%; z-index:3; width:0; /* children are absolutely sized */ will-change:transform; } .char{ position:absolute; left:0; bottom:0; max-width:none; transform:translateX(-50%); image-rendering:pixelated; filter:drop-shadow(4px 6px 0 rgba(0,0,0,.3)); } /* Escala común: todos los sprites están procesados a la misma densidad de pixel-art, así que comparten un único factor s = H / 322 (alto del idle). Recortes -> idle 210x322 · crouch 258x206 · entering 202x158 · walk celda 270x317 (fotograma más erguido 315 = 98% del idle). Si se reprocesan los sprites, recalcular TODO con el nuevo s. Móvil H=180 -> s=.559 (tablet y escritorio, en el bloque responsive) */ .char--idle{ height:180px; width:auto; } /* 322*s */ .char--crouch{ height:115px; width:auto; } /* 206*s */ .char--entering{ height:88px; width:auto; left:-16.2px; } /* 158*s; left = -29*s: sus botas caen sobre las del crouch */ .char--walk{ height:177px; width:151px; /* celda 270x317 * s */ /* tira de 4 fotogramas en %: la misma animación vale para cualquier tamaño */ background:url("assets/img/hero-walk.png") 0 0 / 400% 100% no-repeat; animation:walkcycle .62s steps(4) infinite; } @keyframes walkcycle{ from{ background-position-x:0%; } to{ background-position-x:133.3333%; } } /* Solo el idle se ve de entrada (también sin JS); GSAP muestra el resto */ .char--walk, .char--crouch, .char--entering{ opacity:0; } .hero__copy{ position:relative; z-index:5; max-width:min(92%,720px); margin-inline:auto; text-align:center; padding:clamp(5.5rem,13vh,8rem) 1rem 0; } .hero__kicker{ font-family:var(--pixel); font-size:.55rem; color:var(--orange); margin-bottom:1.2rem; } .hero__title{ font-family:var(--pixel); font-weight:400; font-size:clamp(1.9rem,9vw,4.6rem); line-height:1; color:var(--cream); text-shadow:5px 5px 0 var(--red), 10px 10px 0 var(--navy); letter-spacing:.02em; } .hero__title-accent{ display:inline-block; color:var(--orange); text-shadow:5px 5px 0 var(--red-deep), 10px 10px 0 var(--navy); } .hero__sub{ font-size:1.35rem; color:#eaf0ff; margin:1.6rem auto 2rem; max-width:44ch; text-shadow:2px 2px 0 rgba(0,0,0,.5); } .hero__scrollhint{ font-family:var(--pixel); font-size:.5rem; color:#aeb9e0; margin-top:2.6rem; } .hero__scrollhint-arrow{ display:inline-block; animation:bob 1.4s var(--ease-in-out) infinite; } @keyframes bob{ 50%{ transform:translateY(6px); } } /* Máquina de escribir (JS). Las letras ocupan su hueco desde el principio (opacity, no display) para que nada se mueva mientras se escribe. */ .js .tw-pending{ opacity:0; animation:tw-failsafe 0s linear 4s forwards; } /* si el JS falla, aparece igual */ @keyframes tw-failsafe{ to{ opacity:1; } } .tw-c{ opacity:0; } .tw-c.is-on{ opacity:1; } /* inline vacío (no inline-block): así el cursor no crea puntos de corte de línea a mitad de palabra y el texto no se recoloca al avanzar */ .tw-cursor{ position:relative; } .tw-cursor::after{ content:""; position:absolute; left:.08em; top:.05em; width:.5em; height:.85em; background:currentColor; animation:tw-blink 1.06s steps(1,end) infinite; } /* 530ms on / 530ms off */ .tw-cursor.is-typing::after{ animation:none; } .hero__title .tw-cursor::after{ box-shadow:5px 5px 0 var(--navy); } @keyframes tw-blink{ 50%{ opacity:0; } } /* ============ SECTIONS ============ */ .section{ position:relative; padding:clamp(4rem,10vh,7.5rem) 0; scroll-margin-top:92px; } .section--who{ background: linear-gradient(180deg,#0b1330, #101c46); border-top:4px solid var(--navy); } .section--services{ background:#101c46; } .section--shop{ background:linear-gradient(180deg,#101c46,#0e1a40); } .section--quote{ background:#0c1538; } .section--feed{ background:#101c46; } .section--contact{ background:linear-gradient(180deg,#101c46,#0b1330); } .section__head{ margin-bottom:2.6rem; } /* Quién soy */ .who{ max-width:780px; margin-inline:auto; text-align:center; } .who__text p{ font-size:1.25rem; color:#d7def6; margin-top:1rem; } .who__text .btn{ margin-top:1.8rem; } .who__stats{ list-style:none; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:2rem 0 .5rem; } .who__stats li{ background:var(--panel); border:3px solid var(--navy); box-shadow:4px 4px 0 var(--navy); padding:.9rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; min-width:132px; } .who__stat-n{ font-family:var(--pixel); font-size:.9rem; color:var(--orange); } .who__stat-l{ font-family:var(--pixel); font-size:.44rem; color:#cdd6f2; line-height:1.5; } .apariciones{ margin-top:clamp(2.5rem,6vw,4.5rem); } .apariciones__head{ margin-bottom:1.4rem; } .podcast-card{ display:flex; gap:1.2rem; align-items:center; background:var(--panel); padding:14px; transition:transform .16s var(--ease-out); } @media (hover:hover){ .podcast-card:hover{ transform:translate(-2px,-2px); } } .podcast-card__thumb{ position:relative; flex:0 0 42%; max-width:280px; overflow:hidden; border:3px solid var(--navy); } .podcast-card__thumb img{ width:100%; aspect-ratio:16/9; object-fit:cover; } .podcast-card__play{ position:absolute; inset:0; display:grid; place-items:center; font-size:2.4rem; color:#fff; background:rgba(10,16,40,.28); text-shadow:0 0 12px rgba(0,0,0,.6); } .podcast-card__meta{ display:flex; flex-direction:column; gap:.4rem; } .podcast-card__meta strong{ font-family:var(--pixel); font-size:.7rem; color:var(--cream); } .podcast-card__meta span{ font-size:1.15rem; color:#c3ccec; } /* Servicios */ .mission-grid, .shop-grid, .feed-grid{ list-style:none; display:grid; gap:clamp(1.1rem,2.6vw,1.8rem); } .mission-grid{ grid-template-columns:1fr; gap:clamp(1.9rem,3.6vw,2.8rem); } .mission{ background:var(--panel); padding:1.8rem 1.4rem 1.6rem; text-align:center; display:flex; flex-direction:column; align-items:center; transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out); } .mission__slot{ width:128px; height:128px; margin:0 auto 1.2rem; border:3px solid var(--navy); background:#0a1024; display:grid; place-items:center; overflow:hidden; box-shadow:inset 0 0 0 3px rgba(255,255,255,.05); transition:transform .18s var(--ease-out); } .mission__slot img{ width:100%; height:100%; object-fit:cover; image-rendering:auto; transition:transform .18s var(--ease-out); } .mission__name{ font-family:var(--pixel); font-size:.8rem; color:var(--orange); margin-bottom:.8rem; transition:color .18s var(--ease); } /* Hover: la tarjeta se levanta de su sombra dura como una ficha seleccionada y el icono da un pequeño salto. Solo transform/color, y solo con ratón. */ @media (hover:hover) and (pointer:fine){ .mission:hover{ transform:translateY(-8px); box-shadow:0 0 0 4px rgba(253,241,214,.85), 0 0 0 8px var(--navy), 14px 18px 0 rgba(0,0,0,.5); } .mission:hover .mission__slot{ transform:translateY(-5px) scale(1.05); } .mission:hover .mission__slot img{ transform:scale(1.08); } .mission:hover .mission__name{ color:var(--cream); } } .mission__desc{ font-size:1.15rem; color:#cdd6f2; flex:1 1 auto; max-width:34ch; } .mission__cta{ margin-top:1.5rem; } /* Tienda */ /* Todas las tarjetas a la misma altura y con el botón en la misma línea, aunque el nombre ocupe 1 o 2 líneas (antes la camiseta quedaba más baja). */ .shop-grid > .powerup{ display:flex; } .powerup__link{ flex:1; display:flex; flex-direction:column; align-items:center; padding:1.2rem; text-align:center; background:var(--panel); transition:transform .16s var(--ease-out); } @media (hover:hover) and (pointer:fine){ .powerup__link:hover{ transform:translateY(-5px); } } .powerup__link > .powerup__cta{ margin-top:auto; } .powerup__box{ align-self:stretch; display:flex; align-items:center; justify-content:center; height:210px; margin-bottom:1.1rem; padding:16px; overflow:hidden; background:#0a1024; border:3px solid var(--navy); box-shadow:inset 0 0 0 3px rgba(255,255,255,.05); } .powerup__box img{ max-width:100%; max-height:176px; width:auto; height:auto; image-rendering:pixelated; filter:drop-shadow(3px 4px 0 rgba(0,0,0,.4)); animation:floaty 3.2s var(--ease-in-out) infinite; } @keyframes floaty{ 50%{ transform:translateY(-8px); } } .powerup__tag{ display:inline-block; font-family:var(--pixel); font-size:.44rem; color:var(--navy); background:var(--orange); padding:.5em .7em; margin-bottom:.7rem; } .powerup__name{ display:block; font-family:var(--pixel); font-size:.62rem; color:#fff; line-height:1.5; margin-bottom:.9rem; } /* En tarjetas estrechas "«AK-47»" se partía por el guion ("«AK-" / "47»"). balance reparte las líneas y el corte cae en el espacio. Solo en ese nombre: en "Llave en T «Salvavidas»" dejaba la "T" suelta en otra línea. */ .powerup__link[data-shop="ak47"] .powerup__name{ text-wrap:balance; } .powerup__cta{ font-family:var(--pixel); font-size:.5rem; color:var(--green); text-wrap:balance; } /* en tarjetas estrechas la flecha se quedaba sola en otra línea */ .powerup__link.is-disabled{ pointer-events:none; } .powerup__link.is-disabled .powerup__cta{ color:#8b96bd; } /* Presupuesto */ .quote{ background:var(--panel); padding:clamp(1.3rem,4vw,2.4rem); max-width:760px; } .quote__step{ border:0; padding:0; margin-bottom:1.6rem; } .quote__q{ font-family:var(--pixel); font-size:.72rem; color:var(--orange); margin-bottom:1rem; } .quote__opt{ color:#8b96bd; } .quote__options{ display:flex; flex-wrap:wrap; gap:.8rem; } .opt{ font-family:var(--pixel); font-size:.56rem; color:var(--cream); background:var(--panel-2); border:3px solid var(--navy); box-shadow:4px 4px 0 var(--navy); padding:1em 1.1em; transition:transform .1s var(--ease-out), background-color .15s var(--ease); } @media (hover:hover) and (pointer:fine){ .opt:hover{ background:#2a3f80; } } .opt:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--navy); } .opt.is-active{ background:var(--red); box-shadow:4px 4px 0 var(--navy); } .quote__text{ width:100%; font-family:var(--body); font-size:1.25rem; color:var(--cream); background:#0a1024; border:3px solid var(--navy); padding:.8rem; resize:vertical; } .quote__text:focus{ outline:3px solid var(--orange); outline-offset:0; } .quote__preview{ background:#0a1024; border:3px dashed #33427e; padding:1rem; font-size:1.15rem; color:#cdd6f2; margin-bottom:1.4rem; } .quote__send{ width:100%; justify-content:center; } .quote__hint{ font-family:var(--pixel); font-size:.5rem; color:#8b96bd; margin-top:.9rem; text-align:center; } /* Instagram */ .feed-grid{ grid-template-columns:repeat(2,1fr); } .feed-cell{ position:relative; display:block; overflow:hidden; border:4px solid var(--navy); box-shadow:5px 5px 0 rgba(0,0,0,.35); } .feed-cell img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .3s var(--ease-out); } .feed-cell__hover{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--pixel); font-size:.55rem; color:#fff; background:rgba(14,28,79,.78); opacity:0; transition:opacity .2s var(--ease-out); } @media (hover:hover) and (pointer:fine){ .feed-cell:hover img{ transform:scale(1.06); } .feed-cell:hover .feed-cell__hover{ opacity:1; } } .feed-cta{ margin-top:2rem; text-align:center; } /* Álbum de cromos (stickers de WhatsApp). Los PNG de Sticker.ly traen fondo blanco: en vez de recortarlo (se comería la camiseta blanca) se usa como la tarjeta de un cromo coleccionable. */ .section--stickers{ background:#0c1538; } .album{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.3rem,3.2vw,2.2rem); } @media (min-width:720px){ .album{ grid-template-columns:repeat(4,1fr); } } /* 8 cromos: 4x2 */ .cromo figure{ background:#fff; padding:10px 10px 6px; border:3px solid var(--navy); box-shadow:6px 6px 0 rgba(0,0,0,.45); rotate:var(--tilt,0deg); transition:rotate .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); } .cromo img{ display:block; width:100%; height:auto; aspect-ratio:1; } .cromo figcaption{ font-family:var(--pixel); font-size:.5rem; color:var(--navy); text-align:right; padding-top:6px; } .cromo:nth-child(4n+1){ --tilt:-4deg; } .cromo:nth-child(4n+2){ --tilt:3deg; } .cromo:nth-child(4n+3){ --tilt:-2deg; } .cromo:nth-child(4n+4){ --tilt:5deg; } /* hover: se endereza y se levanta (va en el figure, no en el li, para no pisar la animación de entrada) */ @media (hover:hover) and (pointer:fine){ .cromo figure:hover{ rotate:0deg; transform:translateY(-6px) scale(1.04); box-shadow:10px 12px 0 rgba(0,0,0,.45); } } .album__cta{ margin-top:2.6rem; text-align:center; } /* Cromos sueltos junto a algunos títulos: solo con sitio de sobra. Decorativos (aria-hidden) y colocados en la zona vacía de la cabecera: no tapan nada. */ .section__head{ position:relative; } .pegatina{ display:none; } @media (min-width:1100px){ .pegatina{ display:block; position:absolute; right:3%; top:-8px; width:128px; padding:6px; background:#fff; border:3px solid var(--navy); box-shadow:5px 5px 0 rgba(0,0,0,.4); rotate:var(--tilt,6deg); transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); } .pegatina img{ display:block; width:100%; height:auto; } .pegatina::before{ /* trozo de cinta adhesiva */ content:""; position:absolute; top:-11px; left:50%; width:56px; height:18px; translate:-50% 0; rotate:-4deg; background:rgba(253,241,214,.6); box-shadow:0 1px 0 rgba(0,0,0,.15); } /* Animación (detalle divertido que se ve pocas veces): 1) cuando aparece su título se PEGA de un manotazo: cae desde más grande y rebota un poco (rebote leve, reservado a interacciones lúdicas); 2) después se balancea muy despacio, ±1,5°, como un papel mal pegado. Usa scale/translate/rotate (propiedades sueltas) y el hover usa transform, así no se pisan. */ .js .section__head.is-in .pegatina{ animation:pegar 520ms var(--ease-out) 220ms both, balanceo 7s var(--ease-in-out) 760ms infinite; } @media (hover:hover) and (pointer:fine){ /* al pasar el ratón se levanta y deja de balancearse, como si lo cogieras */ .js .section__head.is-in .pegatina:hover{ transform:translateY(-4px) scale(1.08); box-shadow:8px 9px 0 rgba(0,0,0,.4); animation-play-state:paused; } } } @keyframes pegar{ 0% { opacity:0; scale:1.45; translate:0 -14px; } 55% { opacity:1; scale:.94; translate:0 0; } 78% { scale:1.03; } 100%{ opacity:1; scale:1; translate:0 0; } } @keyframes balanceo{ /* empieza y acaba en su inclinación: sin saltos */ 0%,100%{ rotate:var(--tilt,6deg); } 25% { rotate:calc(var(--tilt,6deg) + 1.5deg); } 75% { rotate:calc(var(--tilt,6deg) - 1.5deg); } } /* Contacto */ .contact__actions{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.5rem; } /* Botón de stickers del álbum: el texto es largo y en móvil se parte en dos líneas, de ahí el interlineado. */ .btn--sticker{ line-height:1.5; text-align:left; } /* ============ FOOTER ============ */ .site-footer{ background:var(--ink); border-top:4px solid var(--navy); padding:2.6rem 0; } .footer{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center; } .footer__logo{ width:72px; height:72px; image-rendering:pixelated; } .footer__links{ list-style:none; display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; } .footer__links a{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--pixel); font-size:.55rem; color:#cdd7f5; } @media (hover:hover){ .footer__links a:hover{ color:var(--orange); } } .footer__copy{ font-family:var(--pixel); font-size:.5rem; color:#7f8ab5; line-height:1.8; } /* ============ 8. EFFECTS (reveal) ============ */ /* Entrada al hacer scroll, escalonada por grupos: 300ms con ease-out fuerte; el escalonado (--reveal-delay) lo pone el JS. Va con `animation` + la propiedad `translate` (no transition + transform) para no pisar los hovers de las tarjetas, que sí usan transform/transition: antes .reveal.is-in{transform:none} anulaba el levantamiento de .mission:hover. */ .js .reveal{ opacity:0; } .js .reveal.is-in{ animation:reveal-in 300ms var(--ease-out) var(--reveal-delay,0ms) both; } @keyframes reveal-in{ from{ opacity:0; translate:0 24px; } to{ opacity:1; translate:0 0; } } /* ============ 9. RESPONSIVE ============ */ @media (min-width:600px){ .feed-grid{ grid-template-columns:repeat(3,1fr); } } @media (min-width:720px){ .mission-grid{ grid-template-columns:repeat(3,1fr); } /* 4 productos: 2x2 en tablet y fila de 4 en escritorio ancho; separación extra para que los marcos dobles de las tarjetas no se toquen */ .shop-grid{ grid-template-columns:repeat(2,1fr); gap:clamp(1.9rem,3.4vw,2.6rem); } } @media (min-width:1180px){ .shop-grid{ grid-template-columns:repeat(4,1fr); } } @media (min-width:600px){ /* tablet: H = 240 -> s = .7453 */ .hero__pipe{ right:6%; width:324px; } .char--idle{ height:240px; } .char--crouch{ height:154px; } .char--entering{ height:118px; left:-21.6px; } .char--walk{ height:236px; width:201px; } } @media (min-width:960px){ .hero__pipe{ right:16%; width:clamp(170px,34vw,420px); } .hero__char{ left:13%; } /* H = 310 -> s = .9627 */ .char--idle{ height:310px; } .char--crouch{ height:198px; } .char--entering{ height:152px; left:-27.9px; } .char--walk{ height:305px; width:260px; } .hero__copy{ text-align:center; } } /* Móvil: texto de portada compacto para que el personaje no lo tape. En un iPhone real la portada mide ~750px (100svh, sin la barra del navegador) y con el espaciado de escritorio el margen quedaba en ~5px; en uno pequeño (667px) el personaje tapaba el aviso de scroll. */ @media (max-width:599px){ .hero__copy{ padding-top:5rem; } /* sigue por debajo de la cabecera fija (~74px) */ .hero__sub{ margin:1rem auto 1.2rem; } .hero__scrollhint{ margin-top:1.1rem; } /* Simetría en móvil: títulos de sección centrados (como la portada y "Quién soy") y botones de contacto a ancho completo. Alineado a la izquierda, el texto corto y los botones estrechos dejaban más hueco a la derecha que a la izquierda. */ .section__head, .apariciones__head{ text-align:center; } .section__lead{ margin-inline:auto; } .contact__actions .btn{ flex:1 1 100%; justify-content:center; } .quote__q{ text-align:center; } .quote__options{ justify-content:center; } /* al partirse en filas, alineadas a la izquierda dejaban hueco a la derecha */ } /* Móvil: menos hueco entre secciones y la tienda en 2x2 (antes ocupaba casi 3 pantallas). Tarjetas más compactas para que los textos quepan. */ @media (max-width:719px){ .section{ padding:3.2rem 0; } .section__head{ margin-bottom:1.8rem; } .shop-grid{ grid-template-columns:repeat(2,1fr); gap:1.8rem 1.6rem; } .powerup__link{ padding:.8rem .7rem; } .powerup__box{ height:132px; padding:10px; margin-bottom:.8rem; } .powerup__box img{ max-height:106px; } .powerup__tag{ font-size:.38rem; } .powerup__name{ font-size:.5rem; } .powerup__cta{ font-size:.42rem; line-height:1.5; } } /* mobile nav */ @media (max-width:1140px){ /* con las 8 secciones el menú completo no cabe por debajo de ~1140px */ /* margen negativo = relleno: las rayas quedan alineadas con el borde, como el logo al otro lado, y el área para pulsar sigue siendo igual de grande */ .nav-toggle{ display:inline-flex; align-items:center; padding:.5rem; margin-right:-.5rem; } .nav-list{ position:absolute; top:100%; right:var(--gutter); flex-direction:column; align-items:flex-start; gap:1.1rem; background:var(--panel); border:4px solid var(--navy); box-shadow:var(--shadow-hard); padding:1.3rem 1.5rem; min-width:210px; transform-origin:top right; opacity:0; transform:scale(.94) translateY(-6px); pointer-events:none; transition:opacity .16s var(--ease-out), transform .16s var(--ease-out); } .nav-list.is-open{ opacity:1; transform:none; pointer-events:auto; } .js .nav-list{ opacity:0; } .js .nav-list.is-open{ opacity:1; } } /* ============ 10. REDUCED MOTION ============ */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .char--walk{ animation:none; } .hero__scrollhint-arrow, .powerup__box img{ animation:none; } .tw-cursor::after{ animation:none; } .cromo figure{ transition:none; } .cromo figure:hover{ rotate:var(--tilt,0deg); transform:none; } .js .section__head.is-in .pegatina{ animation:pegar-fade .3s ease both; } .js .section__head.is-in .pegatina:hover{ transform:none; } @keyframes pegar-fade{ from{ opacity:0; } to{ opacity:1; } } .mission, .mission__slot, .mission__slot img{ transition:none; } .mission:hover, .mission:hover .mission__slot, .mission:hover .mission__slot img{ transform:none; } /* menos y más suave, no cero: se queda el fundido, sin desplazamiento */ .js .reveal.is-in{ animation-name:reveal-fade; } @keyframes reveal-fade{ from{ opacity:0; } to{ opacity:1; } } }