/* ============================================================ NAMI SUSHI — styles.css · piel "Blackout Neon" rebrandeada a Nami (jun 2026) MISMA estructura/animaciones/layout que la versión Oriana; SOLO cambia la piel (nombres + logo ola + paleta marina). Bloques de color full-bleed que chocan · display Anton gigante · outline text de fondo · piezas recortadas overlap · hard shadows sticker · motion con overshoot. Paleta Nami: índigo marino #0A1A2B (fondo) · azul-ola #5C9BD6 (acento 1) · verde-mar #7FC8A9 (acento 2) · dorado/arena #193E58 (acento 3) · crema #F9F1EF. ============================================================ */ :root{ /* Paleta Nami (rebrand piel jun 2026) — mismo esquema, valores marinos */ --yellow:#5C9BD6; /* dominante / fondos de impacto — azul-ola Nami */ --coral:#193E58; /* acento 3 cálido (dorado/arena Nami) — fills, no texto chico */ --coral-deep:#A87A1E; /* dorado oscurecido para superficies con texto (paper sobre el = AA) */ --lime:#7FC8A9; /* acento fresco / veggie — verde-mar sereno */ --ink:#0E0D0C; /* texto / bloques oscuros — tinta Nami */ --paper:#F9F1EF; /* respiro claro — crema Nami */ --white:#FFFFFF; /* texto */ --text:#0E0D0C; --text-on-dark:#F9F1EF; --text-muted:#5B564E; /* espaciado 8pt */ --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:160px;--space-12:200px; /* tipografia — ratio 1.5, Playfair Display serif (maximalista, peso 800/900) + Space Grotesk body */ --font-display:'Playfair Display','Cormorant Garamond',Georgia,'Times New Roman',serif; --font-body:'Space Grotesk','Hanken Grotesk',system-ui,sans-serif; --text-sm:.82rem;--text-base:1.0625rem;--text-lg:clamp(1.2rem,1.6vw,1.4rem); --text-xl:clamp(1.7rem,3vw,2.2rem);--text-2xl:clamp(2.4rem,5vw,3.4rem); --text-hero:clamp(3.2rem,13vw,9rem); /* radios / sombras pop */ --radius:14px; --radius-pill:999px; --shadow-pop:6px 6px 0 var(--ink); --shadow-pop-coral:6px 6px 0 var(--coral-deep); /* motion jugueton */ --ease-brand:cubic-bezier(.34,1.56,.64,1); --dur-s:180ms;--dur-m:380ms;--dur-l:720ms; /* ---- TOKENS NOCTURNOS · paleta "Blackout Neon — variante C+" (aprobada Director Creativo, jun 2026) ---- Se SUMAN a la paleta pop de arriba, no la reemplazan. La capa de overrides que los consume vive agrupada al final del archivo ("PALETA BLACKOUT NEON — VARIANTE C+"). */ --night:#0A1A2B; /* índigo marino muy oscuro — hero, qué-hago, opciones, cierre */ --night-lime:#0C2233; /* azul marino con tinte — cómo pedir */ --night-lime-2:#103047;/* surface más cálida marina */ --neon-y:#5C9BD6; /* azul-ola Nami — wordmark, acentos, borders (acento principal) */ --neon-l:#7FC8A9; /* verde-mar sereno — eyebrows, dashes */ --cream:#F9F1EF; /* crema Nami — body text sobre dark */ --coral-night:#193E58; /* dorado Nami — solo en ruptura */ } /* ---------- reset / base ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:var(--font-body); font-size:var(--text-base); line-height:1.55; color:var(--text); background:var(--yellow); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{font:inherit;color:inherit;cursor:pointer;background:none;border:none} /* ---------- skip link ---------- */ .skip-link{ position:fixed;top:-100px;left:var(--space-4);z-index:1000; background:var(--ink);color:var(--paper); padding:var(--space-3) var(--space-5);border-radius:var(--radius); font-weight:700;transition:top var(--dur-s) ease; } .skip-link:focus-visible{top:var(--space-4);outline:3px solid var(--coral);outline-offset:3px} /* ============================================================ NAV STICKY POP position:fixed → NO ocupa flujo → el hero conserva 100svh exacto. Arranca translúcido sobre el amarillo del hero; al scrollear se vuelve sólido (paper) con borde ink + hard-shadow sticker (.nav--scrolled, lo togglea el JS). Smooth scroll con offset por scroll-margin-top (abajo). ============================================================ */ :root{--nav-h:64px} .nav{ position:fixed;top:0;left:0;right:0;z-index:800; height:var(--nav-h); display:flex;align-items:center; background:transparent; transition:background var(--dur-m) ease,box-shadow var(--dur-m) ease,border-color var(--dur-m) ease; border-bottom:3px solid transparent; } .nav--scrolled{ background:var(--paper); border-bottom-color:var(--ink); box-shadow:0 4px 0 rgba(22,20,18,.12); } .nav__inner{display:flex;align-items:center;gap:var(--space-4);width:100%} /* wordmark izquierda */ .nav__brand{ display:inline-flex;align-items:center;gap:var(--space-2); font-family:var(--font-display);font-weight:400; font-size:1.35rem;line-height:1;letter-spacing:.02em; text-transform:uppercase;color:var(--ink); white-space:nowrap;flex:0 0 auto; } /* logo ola Nami junto al wordmark — img azul recortada (jun 2026 rebrand de piel) */ .nav__brand-mark{display:block;height:30px;width:auto;line-height:1;transform:translateY(-1px);object-fit:contain} /* "SUSHI" del wordmark sobre el nav SCROLLEADO (fondo crema #F9F1EF): índigo marino Nami #193E58 → AA holgado sobre crema (~9:1). Sobre el hero el override lo pinta azul-ola (var(--neon-y)) sobre marino oscuro, que también pasa AA. */ .nav__brand-text--2{color:#193E58;margin-left:.12em} .nav__brand:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px} /* enlaces centro */ .nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,28px);margin-inline:auto} .nav__link{ position:relative; font-family:var(--font-body);font-weight:700; font-size:.96rem;letter-spacing:.02em; color:var(--ink);padding:6px 2px; } /* subrayado pop que crece en hover/focus/activo */ .nav__link::after{ content:"";position:absolute;left:0;right:100%;bottom:-1px;height:3px; background:var(--coral);border-radius:2px; transition:right var(--dur-m) var(--ease-brand); } .nav__link:hover::after,.nav__link:focus-visible::after,.nav__link[aria-current="true"]::after{right:0} .nav__link[aria-current="true"]{color:var(--coral-deep)} .nav__link:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px} /* CTA derecha — botón pop COMPACTO de nav. ⚠️ Scope `.nav .nav__cta` (specificity 0,2,0) para GANARLE a `.btn` (0,1,0), que se define DESPUÉS en el archivo: con igual specificity ganaba `.btn` y le metía el padding 16px/40px + font 17px de CTA de hero → el botón medía 64px (toda la altura del nav) y reventaba la barra. Acá lo dejamos a tamaño de nav: chico, prolijo. */ .nav .nav__cta{ flex:0 0 auto; padding:6px 15px; /* COMPACTO (jun 2026, Director "muy grande"): alto ~30px, sticker chico */ font-size:.84rem; /* más chico que los enlaces (.96rem) → no compite, lee como pill de nav */ line-height:1; letter-spacing:.02em; border:2px solid var(--ink); border-radius:var(--radius-pill); box-shadow:2px 2px 0 var(--ink); /* sticker coral sutil, no el 6px del hero */ } .nav .nav__cta:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)} .nav .nav__cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)} /* hamburguesa (oculta en desktop) */ .nav__toggle{ display:none;flex:0 0 auto; width:46px;height:46px; align-items:center;justify-content:center;flex-direction:column;gap:5px; border:2.5px solid var(--ink);border-radius:12px; background:var(--paper);box-shadow:3px 3px 0 var(--ink); transition:transform var(--dur-s) var(--ease-brand),box-shadow var(--dur-s) var(--ease-brand); } .nav__toggle:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)} .nav__toggle:focus-visible{outline:3px solid var(--coral);outline-offset:3px} .nav__toggle-bar{display:block;width:22px;height:3px;background:var(--ink);border-radius:2px;transition:transform var(--dur-m) var(--ease-brand),opacity var(--dur-s) ease} /* X animada cuando está abierto */ .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1){transform:translateY(8px) rotate(45deg)} .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2){opacity:0} .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* MOBILE NAV ≤768: hamburguesa + drawer pop full-width */ @media (max-width:768px){ .nav__toggle{display:inline-flex} .nav .nav__cta{margin-left:auto} /* Pedí siempre accesible, a la derecha junto a la burger */ .nav__links{ position:fixed;top:var(--nav-h);left:0;right:0; flex-direction:column;align-items:stretch;gap:0;margin:0; background:var(--paper); border-bottom:3px solid var(--ink); box-shadow:0 8px 0 rgba(22,20,18,.14); padding:var(--space-3) clamp(20px,5vw,48px) var(--space-5); /* cerrado por default: clip + slide arriba, no interactivo */ transform:translateY(-12px);opacity:0;visibility:hidden; pointer-events:none; transition:transform var(--dur-m) var(--ease-brand),opacity var(--dur-s) ease,visibility 0s linear var(--dur-m); } .nav__links.is-open{ transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto; transition:transform var(--dur-m) var(--ease-brand),opacity var(--dur-s) ease,visibility 0s; } .nav__link{ font-family:var(--font-display);font-weight:400;font-size:1.5rem;letter-spacing:.02em; text-transform:uppercase; padding:var(--space-3) 0; border-bottom:2px solid rgba(22,20,18,.12); } .nav__link:last-child{border-bottom:none} .nav__link::after{display:none} .nav__link:hover,.nav__link:focus-visible,.nav__link[aria-current="true"]{color:var(--coral-deep)} /* drawer mobile siempre sólido aunque el header esté translúcido sobre el hero */ .nav{background:var(--paper);border-bottom-color:var(--ink)} } /* ---------- layout helpers ---------- */ .container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)} .container--narrow{max-width:760px} /* ---------- BLOQUES DE COLOR full-bleed que chocan ---------- */ .block{position:relative;width:100%;overflow:hidden} /* offset por el nav fixed: el smooth scroll a cada sección aterriza debajo del header */ #que-hago,#como-pedir,#opciones,#carta,#faq{scroll-margin-top:var(--nav-h)} .block--yellow{background:var(--yellow);color:var(--ink)} .block--ink{background:var(--ink);color:var(--paper)} .block--lime{background:var(--lime);color:var(--ink)} .block--paper{background:var(--paper);color:var(--ink)} .block--coral{background:var(--coral-deep);color:var(--paper)} .section{padding-block:clamp(64px,11vw,140px)} /* ---------- tipografia compartida ---------- */ .eyebrow{ font-family:var(--font-body); font-size:var(--text-sm);font-weight:700; letter-spacing:.18em;text-transform:uppercase; margin-bottom:var(--space-5); } .eyebrow--ink{color:var(--ink)} .eyebrow--paper{color:var(--paper)} .eyebrow--ink::before,.eyebrow--paper::before{content:"";display:inline-block;width:26px;height:3px;background:var(--coral);vertical-align:middle;margin-right:var(--space-3);transform:translateY(-3px)} .eyebrow--paper::before{background:var(--lime)} .section__title{ font-family:var(--font-display); font-weight:400; font-size:var(--text-2xl); line-height:.96; letter-spacing:.01em; text-transform:uppercase; text-wrap:balance; margin-bottom:var(--space-6); max-width:18ch; } .section__title--paper{color:var(--paper)} .section__body{font-size:var(--text-lg);max-width:54ch;line-height:1.5} .section__body--paper{color:var(--paper)} .section__closer{ font-size:var(--text-lg);max-width:60ch;margin-top:var(--space-8); font-weight:500; } /* ============================================================ HERO — bloque amarillo, 100svh exacto ============================================================ */ .hero{ min-height:100svh; display:flex;align-items:center; /* hero SIN subcopy (jun 2026, Director "queda cargadísimo"): eyebrow + wordmark + claim + CTA + tags. Contenido ~590px en 1440×900 → entra clavado en 100svh, flex lo centra. */ padding-block:clamp(64px,8.5vh,84px) clamp(36px,5vh,52px); } /* outline text gigante de fondo (textura) */ .hero__outline,.section__outline,.ruptura__outline,.cierre__outline{ position:absolute; font-family:var(--font-display);font-weight:400; text-transform:uppercase; line-height:.8; -webkit-text-stroke:2px rgba(22,20,18,.16); color:transparent; pointer-events:none;user-select:none; white-space:nowrap; z-index:0; } .hero__outline{ font-size:clamp(8rem,34vw,30rem); top:48%;left:50%;transform:translate(-50%,-50%); -webkit-text-stroke-color:rgba(22,20,18,.13); } .hero__inner{position:relative;z-index:2;width:100%} .hero__wordmark{ font-family:var(--font-display);font-weight:400; font-size:var(--text-hero); line-height:.97; /* aflojado: las 2 líneas (ORIANA / SUSHI) respiran, ya no se tocan */ letter-spacing:.01em; text-transform:uppercase; color:var(--ink); margin-block:var(--space-2) var(--space-4); position:relative; } .hero__word{display:block} /* "SUSHI" del wordmark GIGANTE en coral, igual que el nav (.nav__brand-text--2 = #5C9BD6). El --coral #193E58 (2.58) y --coral-deep #A87A1E (3.85) NO pasan AA sobre el amarillo #5C9BD6; #5C9BD6 da 5.22 (AA OK) manteniéndose vivo. Es el MISMO coral que el navbar → consistencia de marca: "ORIANA" ink + "SUSHI" coral, replicado del nav al hero. */ .hero__word--2{color:#5C9BD6;position:relative;margin-top:.06em} /* micro-aire entre las 2 líneas */ /* ---------- PLATO CIRCULAR, asoma del borde derecho, ROTACIÓN SCROLL-LINKED ---------- wrapper = posición + parallax leve (no rota) · img = rotación atada al scroll. REPARENTADO (jun 2026): hijo directo del HERO (antes vivía en .hero__inner y sus offsets dependían de dónde flotara la columna de texto). Ahora top/right/bottom refieren al hero full-bleed → geometría determinística en todo viewport. z1 = sobre el outline (z0) y GENUINAMENTE debajo del texto (.hero__inner z2) → nunca tapa wordmark/claim/CTA. Lienzo cuadrado 1100×1100 → el plato es un CÍRCULO perfecto (height=width). */ .hero__plato{ position:absolute; z-index:1; /* sobre el outline (z0), DEBAJO del contenido (z2) → nunca tapa texto */ /* centro del disco SIEMPRE 58px bajo el centro del hero → el arco superior del disco (diámetro 100vh) queda clavado a y=58px: bajo la franja del nav (13-48px), nunca pisado por el CTA compacto. Port exacto del look aprobado (top:55% relativo a la columna). */ top:calc(50% + 58px); left:auto; /* offset derecho portado del look aprobado (antes era relativo al .container centrado): - 1025-1296px: 48px - 13vw (gutter del container + clamp original) - 1296-1769px: 37vw - 600px (≈ -67px en 1440 — el disco asoma ~85%) - ≥1769px: 50vw - 830px (en monitores anchos el disco entra entero, con margen) max() elige el tramo correcto en cada ancho. El sobrante sale por derecha → 0 overflow-x (overflow:hidden del .block absorbe sin generar scroll). */ right:max(calc(48px - 13vw),calc(37vw - 600px),calc(50vw - 830px)); --par-y:0px; /* diámetro del disco prominente (~100vh): protagonista de la mitad derecha del hero. La img cuadrada da un círculo perfecto por alto. */ height:clamp(580px,100vh,1180px); width:auto; transform:translateY(-50%) translateY(var(--par-y)); pointer-events:none;user-select:none; filter:drop-shadow(10px 14px 18px rgba(22,20,18,.22)); } .hero__plato-img{ display:block;height:100%;width:auto; aspect-ratio:1/1; /* lienzo cuadrado → círculo perfecto, sin distorsión */ transform-origin:50% 50%; /* = centro real del disco (rosa de salmón) → gira en su lugar, sin bamboleo */ /* ROTACIÓN SCROLL-LINKED: JS (rAF-throttled) setea --plato-rot en grados. Sin animación automática: el ángulo = función del scrollY de la página. */ --plato-rot:0deg; transform:rotate(var(--plato-rot)); will-change:transform; } @keyframes platoSettle{ from{opacity:0;transform:rotate(var(--plato-rot)) scale(.8)} to {opacity:1;transform:rotate(var(--plato-rot)) scale(1)} } /* SETTLE de entrada (Director jun 2026): DISPARA cuando el loader se va (body.is-loaded) → el fade+scale del plato se VE al revelarse el hero, no tapado. `backwards` aplica el estado inicial antes de arrancar y, al terminar, vuelve a la regla base (transform:rotate(var(--plato-rot))) → la rotación con scroll NO queda congelada. */ body.is-loaded .hero__plato-img{ animation:platoSettle .95s cubic-bezier(.2,.72,.28,1) backwards; } /* hero SIN subcopy (jun 2026): el claim respira más hacia el CTA y el CTA hacia los tags — ritmo 48/48 parejo, el bloque queda compacto y aireado, sin banda muerta en el 100svh. */ .hero__claim{ font-family:var(--font-body);font-weight:700; font-size:var(--text-xl); line-height:1.04; text-transform:none; color:var(--ink); letter-spacing:-.01em; margin-bottom:var(--space-7); max-width:18ch; } .hero__cta{margin-bottom:var(--space-7)} /* ---------- botones pop ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-body);font-weight:700; font-size:1.0625rem;letter-spacing:.02em; padding:16px 40px; /* holgado: 3 palabras "Pedí por WhatsApp" */ border-radius:var(--radius-pill); border:3px solid var(--ink); transition:transform var(--dur-s) var(--ease-brand),box-shadow var(--dur-s) var(--ease-brand),background var(--dur-s) ease; will-change:transform; /* el texto NUNCA se trunca: ni "Seguime en Instagram" ni "Pedí por WhatsApp". nowrap evita el corte por shrink del flex item; el botón crece a su contenido. */ white-space:nowrap;flex:0 0 auto;max-width:100%; } .btn--coral{background:var(--coral);color:var(--ink);box-shadow:var(--shadow-pop)} .btn--coral:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)} .btn--coral:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)} .btn--lg{padding:20px 52px;font-size:1.18rem} .btn--ghost{ background:transparent;color:var(--paper);border-color:var(--paper); box-shadow:none; } .btn--ghost:hover{transform:translate(-2px,-2px);background:var(--paper);color:var(--ink)} .btn:focus-visible{outline:3px solid var(--lime);outline-offset:4px} .block--lime .btn--coral:focus-visible,.block--paper .btn--coral:focus-visible{outline-color:var(--ink)} /* ---------- tags / pills mono ---------- */ .tags{display:flex;flex-wrap:wrap;gap:var(--space-3)} .tag{ position:relative; font-family:var(--font-body); font-size:var(--text-sm);font-weight:700; letter-spacing:.1em;text-transform:uppercase; padding:8px 16px; border:2.5px solid var(--ink);border-radius:var(--radius-pill); background:var(--paper);color:var(--ink); transition:transform var(--dur-s) var(--ease-brand),background var(--dur-s) ease; } .hero__tags .tag{box-shadow:3px 3px 0 var(--ink)} .tag:hover,.tag:focus-visible{transform:translateY(-3px) rotate(-2deg);background:var(--lime)} .tag:focus-visible{outline:3px solid var(--ink);outline-offset:3px} /* tooltip de significado en hero tags */ .tag[data-tip]::after{ content:attr(data-tip); position:absolute;left:50%;bottom:calc(100% + 10px); transform:translateX(-50%) translateY(6px); background:var(--ink);color:var(--paper); font-size:.72rem;font-weight:600;letter-spacing:.01em;text-transform:none; white-space:nowrap;padding:7px 12px;border-radius:8px; opacity:0;pointer-events:none; transition:opacity var(--dur-s) ease,transform var(--dur-s) ease; z-index:20; } .tag[data-tip]:hover::after,.tag[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)} /* pill VEGGIE/SIN TACC/CLÁSICO en la card: ÚNICO rótulo (jun 2026, Director — se volaron los títulos Anton duplicados). Ritmo parejo: 24px desde la imagen (16 del media + 8 del pill) y 24px hacia la descripción. inline-block → los márgenes NO colapsan, suman. */ .tag--on-card{display:inline-block;box-shadow:3px 3px 0 var(--ink);margin-top:var(--space-2);margin-bottom:var(--space-5)} .tag--lime{background:var(--lime)} .tag--coral{background:var(--coral);color:var(--ink)} /* ============================================================ 2 — QUÉ HAGO (ink) split ============================================================ */ .section__outline{ font-size:clamp(5rem,20vw,16rem); top:50%;right:-2%;transform:translateY(-50%); -webkit-text-stroke-color:rgba(249,241,239,.10); } .split{ display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px); align-items:center;position:relative;z-index:2; } .split__media{position:relative;min-height:clamp(280px,38vw,460px)} /* piezas recortadas limpias: sombra suave difusa (no hard-shadow negro, que se leía como halo gris al lado del recorte). Pieza recorta limpio, sin overlay de color encima. */ .piece{filter:drop-shadow(0 8px 14px rgba(0,0,0,.20))} .piece--makis{ position:absolute;width:clamp(180px,28vw,330px); top:0;left:6%;transform:rotate(-6deg);z-index:2; } .piece--uramaki2{ position:absolute;width:clamp(170px,26vw,300px); bottom:-4%;right:4%;transform:rotate(8deg);z-index:1; } /* ============================================================ 3 — CÓMO ES PEDIR (lime) — pasos ============================================================ */ .steps{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px);margin-top:var(--space-7); } .step{ background:var(--paper); border:3px solid var(--ink);border-radius:var(--radius); box-shadow:var(--shadow-pop); padding:clamp(24px,3vw,36px); transition:transform var(--dur-m) var(--ease-brand); } .step:nth-child(2){transform:rotate(-1.2deg)} .step:nth-child(3){transform:rotate(1deg)} .step:hover{transform:translateY(-4px) rotate(0deg)} .step__num{ display:block;font-family:var(--font-display);font-weight:400; font-size:clamp(3rem,7vw,5.2rem);line-height:.85; color:var(--coral-deep);margin-bottom:var(--space-3); } .step__title{ font-family:var(--font-display);font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem);line-height:1; text-transform:uppercase;letter-spacing:.01em; margin-bottom:var(--space-3); } .step__body{font-size:var(--text-base);line-height:1.5} /* ============================================================ 4 — LAS OPCIONES (paper) — cards ============================================================ */ .cards{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px);margin-top:var(--space-7); } .card{ position:relative; border:3px solid var(--ink);border-radius:var(--radius); box-shadow:var(--shadow-pop); padding:clamp(20px,2.4vw,28px); background:var(--white); transition:transform var(--dur-m) var(--ease-brand),box-shadow var(--dur-m) var(--ease-brand); } .card--rot-l{transform:rotate(-1.4deg)} .card--rot-r{transform:rotate(1.4deg)} .card:hover{transform:translateY(-6px) rotate(0deg);box-shadow:10px 12px 0 var(--ink)} .card__media{ height:clamp(140px,16vw,190px); display:flex;align-items:center;justify-content:center; background:var(--yellow); border:2.5px solid var(--ink);border-radius:10px; margin-bottom:var(--space-4);overflow:hidden; } .card:nth-child(2) .card__media{background:var(--lime)} .card:nth-child(3) .card__media{background:var(--coral)} /* pieza recortada limpia sobre el bloque de color: sombra suave y difusa (NO hard-shadow negro tipo sticker, que junto al recorte se leía como halo gris feo). Sin background ni overlay encima de la foto: el color vive en .card__media, la pieza recorta limpio arriba. */ /* height:100% + object-fit:contain hace que la pieza ocupe la altura del media-box (que tiene height fija via clamp) desde el primer frame — evita el colapso a 0x0 / FOUC que pasaba con width:auto+height:auto sin dimension reservada. max-width:100% para que no desborde en piezas anchas; contain mantiene el aspect-ratio real sin deformar. */ .card__media .piece{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))} /* .card__title ELIMINADO (jun 2026): duplicaba palabra por palabra la pill de arriba. La jerarquía la lleva la pill sticker; la card queda pieza → pill → descripción. */ .card__body{font-size:var(--text-base);line-height:1.5;color:var(--text)} /* ============================================================ 5 — RUPTURA (coral) — frase gigante ============================================================ */ .ruptura{ min-height:clamp(360px,52vh,620px); display:flex;align-items:center;justify-content:center; text-align:center;padding-block:clamp(64px,10vw,120px); overflow:hidden; } .ruptura__outline{ font-size:clamp(7rem,28vw,24rem); top:50%;left:50%;transform:translate(-50%,-50%); -webkit-text-stroke-color:rgba(249,241,239,.16); } @media(max-width:600px){ /* FRESCO mobile: 33.5vw → ancho del texto Anton ≈ 90.8% del viewport (ratio medido ancho≈font×2.709). Entra completo y centrado en 320/360/375/390/414px con margen lateral seguro; bien más grande que el original (clamp daba ~112px; ahora ~131px en 390px). overflow:hidden de .ruptura se mantiene para contener las decoraciones flotantes deco--rup-1/2. */ .ruptura__outline{font-size:33.5vw;} } .ruptura__line{ position:relative;z-index:2; font-family:var(--font-display);font-weight:400; font-size:clamp(3rem,11vw,8rem); line-height:.9;text-transform:uppercase; color:var(--paper);letter-spacing:.01em; text-wrap:balance; } /* ============================================================ 6 — FAQ (paper) — acordeon accesible ============================================================ */ .faq{margin-top:var(--space-7);border-top:3px solid var(--ink)} .faq__item{border-bottom:3px solid var(--ink)} .faq__h{margin:0} .faq__btn{ width:100%;display:flex;align-items:center;justify-content:space-between; gap:var(--space-4); padding:var(--space-5) var(--space-2); text-align:left; font-family:var(--font-body);font-weight:700; font-size:var(--text-lg);line-height:1.25;color:var(--ink); transition:color var(--dur-s) ease; } .faq__q{flex:1} .faq__btn:hover{color:var(--coral-deep)} .faq__btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:6px} .faq__icon{ position:relative;flex:0 0 24px;width:24px;height:24px; } .faq__icon::before,.faq__icon::after{ content:"";position:absolute;top:50%;left:50%; background:var(--ink);border-radius:2px; transform:translate(-50%,-50%); transition:transform var(--dur-m) var(--ease-brand),opacity var(--dur-s) ease; } .faq__icon::before{width:18px;height:3.5px} .faq__icon::after{width:3.5px;height:18px} .faq__btn[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0} .faq__btn[aria-expanded="true"] .faq__icon::before{background:var(--coral-deep)} .faq__panel{padding:0 var(--space-2) var(--space-6)} .faq__panel p{font-size:var(--text-base);line-height:1.6;max-width:62ch} /* ============================================================ 7 — CIERRE (ink) ============================================================ */ /* "PEDÍ" como textura de fondo — debe verse la palabra ENTERA y NO quedar tapada por el título / sub / botones del cierre (que viven left-aligned en el container, z-index:2). FIX (jun 2026, Director "hoy queda tapado → a la derecha, completo, sin tapar"): el outline vive en la BANDA VERTICAL MEDIA-DERECHA de la sección, en el vacío a la derecha del contenido (el sub termina en ~x=850, los botones en ~x=710 en 1440; toda la mitad derecha-media es aire). Antes estaba en la esquina inferior-derecha (bottom) → coincidía en eje vertical con la fila de botones y se leía pisado. Ahora se ancla por TOP en el centro vertical de la sección y a la derecha → cae en zona libre, "PEDÍ" entero y legible como textura, sin tocar texto/botones. right con inset chico (no negativo) + tamaño acotado → 5 glifos completos y 0 overflow-x. */ .cierre__outline{ font-size:clamp(3.2rem,10vw,8rem); left:auto; right:clamp(12px,3vw,56px); top:50%; bottom:auto; transform:translateY(-50%); max-width:none; text-align:right; -webkit-text-stroke-color:rgba(249,241,239,.14); } .cierre .container{position:relative;z-index:2} .cierre__title{ font-family:var(--font-display);font-weight:400; font-size:clamp(2.6rem,8vw,6rem);line-height:.92; text-transform:uppercase;color:var(--paper); text-wrap:balance;margin-bottom:var(--space-5); } /* copy del cierre: nunca truncado. wrap normal + sin overflow:hidden propio. */ .cierre__sub{font-size:var(--text-lg);max-width:48ch;color:var(--paper);margin-bottom:var(--space-7);overflow-wrap:break-word;white-space:normal} .cierre__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);max-width:100%} /* ============================================================ FOOTER ============================================================ */ .footer{padding-block:var(--space-8)} .footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);align-items:center} .footer__brand{font-size:var(--text-sm);color:var(--paper);font-weight:600;letter-spacing:.02em} .footer__credit{font-size:var(--text-sm);color:var(--paper)} .footer__credit a{color:var(--lime);font-weight:700;text-decoration:underline;text-underline-offset:3px} .footer__credit a:hover{color:var(--paper)} .footer__credit a:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px} /* ============================================================ FAB WhatsApp persistente ============================================================ */ .fab{ position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px); z-index:900; width:62px;height:62px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:#25D366;color:#fff; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); transition:transform var(--dur-s) var(--ease-brand),box-shadow var(--dur-s) var(--ease-brand); } .fab:hover{transform:translate(-2px,-2px) scale(1.04);box-shadow:6px 6px 0 var(--ink)} .fab:active{transform:translate(2px,2px)} .fab:focus-visible{outline:3px solid var(--lime);outline-offset:3px} /* ============================================================ PIEZAS DECORATIVAS — "sitio lleno de sushi" con movimiento Sembradas en margenes/esquinas, detras del contenido (z-index bajo), nunca tapan texto (pointer-events:none, aria-hidden, opacidades suaves). Movimiento GPU-only (transform/opacity): wobble/tilt sutil (±7°, NO giro 360°) + float suave. GUARDS: reduced-motion -> quietas (NO desaparecen). coarse -> alivia carga. ============================================================ */ .deco{ position:absolute; z-index:1; /* debajo del contenido (.container z-index:2) */ pointer-events:none;user-select:none; width:var(--deco-size,120px);height:auto; filter:drop-shadow(0 5px 9px rgba(0,0,0,.16)); /* sombra suave difusa, no hard-shadow (evita halo gris) */ opacity:0; /* entra con el reveal de la seccion */ will-change:transform,opacity; transform:translateY(28px) scale(.9); transition:opacity var(--dur-l) ease,transform var(--dur-l) var(--ease-brand); } /* la pieza decorativa entra (rebote) cuando su seccion se revela */ .reveal.is-visible .deco{opacity:var(--deco-opacity,.92);transform:none} /* 3 capas para que NUNCA peleen por la misma propiedad transform: .deco (entrada/reveal) > .deco__float (sube-baja) > .deco__spin (wobble/tilt sutil). NO hay giro 360°: un PNG plano 2D girando entero se ve cutre. En su lugar, un balanceo ±7° de ida y vuelta (wobble) que se siente vivo y elegante, no mareante. */ .deco__float{display:block;width:100%;height:auto} .deco__spin{display:block;width:100%;height:auto;transform-origin:50% 50%} /* WOBBLE/TILT leve — amplitudes/velocidades variadas, suaves (no marean, no giran entero) */ .deco--spinA .deco__spin{animation:decoWobble 6.5s ease-in-out infinite} .deco--spinB .deco__spin{animation:decoWobble 8s ease-in-out infinite reverse} .deco--spinC .deco__spin{animation:decoWobbleSoft 7s ease-in-out infinite} .deco--spinD .deco__spin{animation:decoWobbleSoft 9s ease-in-out infinite reverse} /* float sube-baja suave (capa intermedia, no choca con el wobble ni con la entrada) */ .deco--floatA .deco__float{animation:decoFloat 5s ease-in-out infinite} .deco--floatB .deco__float{animation:decoFloat 6.5s ease-in-out infinite .8s} .deco--floatC .deco__float{animation:decoFloat 5.8s ease-in-out infinite .4s} /* wobble = balanceo de ida y vuelta, NUNCA giro completo (±7° / ±5°) */ @keyframes decoWobble{ 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} } @keyframes decoWobbleSoft{ 0%,100%{transform:rotate(5deg)} 50%{transform:rotate(-5deg)} } @keyframes decoFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} } /* RECOMPOSICIÓN CURADA (jun 2026) — menos y mejor ubicadas, balance diagonal. Criterio: cada deco vive en una esquina/borde que respira, NUNCA sobre texto/CTA. Peso visual balanceado en diagonal (una grande arriba ↔ una chica abajo opuesta). Tamaños jerarquizan: hero/que-hago llevan la pieza más grande (entrada), el resto puntúa. Cada deco contrapesa la miscelánea de fondo de su sección (ej: pedir-1 abajo-izq vs polka arriba-der). El nav fixed (top:0, 64px) → las decos top bajan a ~6-8% para no quedar bajo el header. */ /* HERO — SOLO el nigiri2 chico abajo-izquierda (contrapeso del plato, que domina la derecha). El maki arriba-derecha (.deco--hero-1) se ELIMINÓ (jun 2026, Director): caía dentro del área del plato giratorio y quedaba atrás/superpuesto al disco. */ .deco--hero-2{--deco-size:clamp(48px,5vw,76px);bottom:8%;left:4%;--deco-opacity:.5} /* QUÉ HAGO (ink) — una sola, grande, arriba-derecha; el split-media vive abajo-derecha → no chocan */ .deco--que-1{--deco-size:clamp(62px,7vw,108px);top:9%;right:5%;--deco-opacity:.85} /* CÓMO PEDIR — uramaki con sésamo (cut-uramaki2) BAJADO desde "Qué hago" (Director jun 2026): pieza decorativa DESTACADA de esta sección, abajo-izquierda. Más grande que una deco común (es protagonista, el Director lo quiere ver). Visible en TODOS los viewports (override mobile abajo). */ .deco--pedir-2{--deco-size:clamp(96px,12vw,158px);bottom:7%;left:3%;--deco-opacity:.95} /* CÓMO PEDIR (lime) — abajo-izquierda: contrapeso de la polka (arriba-derecha) y lejos de las cards */ .deco--pedir-1{--deco-size:clamp(54px,5.6vw,90px);bottom:9%;left:4%;--deco-opacity:.78} /* RUPTURA (coral) — dos esquinas OPUESTAS, frase centrada con mucho aire entre medio */ .deco--rup-1{--deco-size:clamp(56px,5.8vw,94px);top:12%;left:6%;--deco-opacity:.46} .deco--rup-2{--deco-size:clamp(50px,5.4vw,82px);bottom:14%;right:7%;--deco-opacity:.42} /* CIERRE (ink) — una a la izquierda (el outline "PEDÍ" gigante vive a la derecha → no chocan) */ .deco--cierre-1{--deco-size:clamp(54px,5.6vw,90px);bottom:14%;left:5%;--deco-opacity:.48} /* CONTROL RESPONSIVE DE DECORACIONES — la legibilidad MANDA. En viewports angostos el contenido llena el ancho y desaparece el gutter vacio, asi que reducimos/ocultamos las piezas que invadirian texto. ≥1100px: set completo (verificado sin overlap). */ @media (max-width:1099px){ /* tablet: ocultar las que colisionan al colapsar el layout a 1-2 columnas; conservar hero + ruptura + cierre (zonas con esquinas siempre vacias) */ .deco--que-1,.deco--pedir-1{display:none} /* deco--que-2 (el sushi que bajó del hero) SÍ se mantiene visible — Director jun 2026: "ojo con mobile, quiero que se vea". Posición específica por viewport más abajo. */ } @media (max-width:700px){ /* mobile: solo decoracion en ruptura (texto centrado, esquinas vacias). HERO mobile: sin piezas flotantes (el nigiri2 se oculta; el maki ya no existe en ningún viewport — jun 2026). El protagonista del hero mobile es el PLATO asomando desde abajo. En desktop (≥701) el nigiri2 abajo-izq se mantiene. */ .deco--cierre-1,.deco--hero-2{display:none} .deco--rup-1{top:6%;left:4%;--deco-size:clamp(48px,12vw,72px)} .deco--rup-2{bottom:7%;right:4%;--deco-size:clamp(46px,11vw,68px)} } /* hero plato: la ROTACIÓN SCROLL-LINKED vive en .hero__plato-img (--plato-rot, lo setea el JS rAF-throttled); el parallax leve (--par-y) vive en el wrapper .hero__plato → nunca pelean por la misma capa de transform. */ /* las cards reaccionan: la pieza gira/escala al pasar el mouse */ /* zoom LENTO y limpio de la foto al hover (Director jun 2026): scale suave, sin rotate, contenido por el overflow:hidden del media-box → la comida "respira" hacia el visitante. */ .card__media .piece{transition:transform 620ms cubic-bezier(.2,.7,.3,1)} .card:hover .card__media .piece{transform:scale(1.06)} /* coarse pointer (touch): aliviar carga — sin spin/float continuos ni parallax en las decoraciones (quedan visibles y quietas). El PLATO sí mantiene la rotación scroll-linked (no es auto-motion molesta; el JS aplica throttle generoso en touch). */ @media (pointer:coarse){ .deco__spin,.deco__float{animation:none !important} } /* ============================================================ REVEALS — TRIPLE SEGURIDAD TWL estado oculto -> .is-visible anima con overshoot. reduced-motion: fade 300ms, NUNCA transition:none ni estatico. ============================================================ */ [data-rv],[data-step]{ opacity:0;transform:translateY(34px); transition:opacity var(--dur-l) ease,transform var(--dur-l) var(--ease-brand); } .reveal.is-visible [data-rv], .reveal.is-visible [data-step]{opacity:1;transform:none} /* stagger por orden */ .reveal.is-visible [data-rv="1"]{transition-delay:.02s} .reveal.is-visible [data-rv="2"]{transition-delay:.10s} .reveal.is-visible [data-rv="3"]{transition-delay:.18s} .reveal.is-visible [data-rv="4"]{transition-delay:.26s} .reveal.is-visible [data-rv="5"]{transition-delay:.34s} .reveal.is-visible [data-rv="6"]{transition-delay:.42s} .reveal.is-visible .step:nth-child(1), .reveal.is-visible .card:nth-child(1){transition-delay:.08s} .reveal.is-visible .step:nth-child(2), .reveal.is-visible .card:nth-child(2){transition-delay:.20s} .reveal.is-visible .step:nth-child(3), .reveal.is-visible .card:nth-child(3){transition-delay:.32s} /* CSS fallback (CAPA 1): si el JS no corre, todo aparece a 1.2s */ @keyframes rvFallback{to{opacity:1;transform:none}} .reveal:not(.is-visible) [data-rv], .reveal:not(.is-visible) [data-step]{ animation:rvFallback .6s ease 1.2s forwards; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms !important;animation-iteration-count:1 !important} /* fade simple, NUNCA contenido estatico ni transition:none */ [data-rv],[data-step]{ opacity:0;transform:none; transition:opacity 300ms ease; } .reveal.is-visible [data-rv], .reveal.is-visible [data-step]{opacity:1;transition-delay:0s !important} .reveal:not(.is-visible) [data-rv], .reveal:not(.is-visible) [data-step]{animation:rvFallback .3s ease 1.2s forwards} .btn,.tag,.step,.card,.fab{transition:opacity 300ms ease,background 200ms ease !important} /* la rotacion sticker se mantiene estatica (no es movimiento), pero los hover-transform se calman */ .card--rot-l,.card--rot-r,.step:nth-child(2),.step:nth-child(3){transition:none} /* PIEZAS DECORATIVAS: se DESACTIVA todo el movimiento (spin/float/parallax/hover), quedan QUIETAS y VISIBLES — nunca desaparecen ni marean. */ .deco__spin,.deco__float{ animation:none !important; } .deco{ opacity:var(--deco-opacity,.9) !important; transform:none !important; transition:opacity 300ms ease !important; } /* PLATO: rotación CONGELADA en un ángulo constante (visible, sin girar con scroll). El JS no actualiza --plato-rot bajo reduced-motion → queda en 0deg fijo. */ .hero__plato-img{ --plato-rot:0deg !important; transform:rotate(0deg) !important; animation:none !important; /* sin settle bajo reduced-motion: el plato aparece directo, visible */ } /* el wrapper mantiene su posicionamiento responsive (desktop translateY(-50%), mobile bottom); el parallax JS no corre bajo reduced-motion, así que --par-y=0 → sin movimiento. */ .card:hover .card__media .piece{transform:none !important} /* NAV: sin overshoot ni slide del drawer — fade simple, nunca off total */ .nav,.nav__link::after,.nav__toggle,.nav__toggle-bar,.nav__cta{transition:background 200ms ease,opacity 200ms ease,color 200ms ease !important} .nav__links{transition:opacity 200ms ease,visibility 0s !important} .nav__links:not(.is-open){transform:none} } /* ============================================================ RESPONSIVE ============================================================ */ /* VIEWPORTS BAJOS (ej. 1024×768) — el hero debe entrar en 100svh. Achicamos contenido (clamp + padding/margins), nunca el contenedor. */ @media (max-height:820px) and (min-width:641px){ .hero{padding-block:clamp(56px,9vh,84px) clamp(32px,5vh,52px)} .hero__wordmark{font-size:clamp(3rem,10.5vw,7.2rem);line-height:.92;margin-block:var(--space-1) var(--space-3)} .hero__claim{font-size:clamp(1.45rem,2.4vw,1.85rem);margin-bottom:var(--space-5)} .hero__cta{margin-bottom:var(--space-5)} .eyebrow{margin-bottom:var(--space-4)} } /* TABLET ≤1024 */ @media (max-width:1024px){ .split{grid-template-columns:1fr;gap:var(--space-8)} .split__media{min-height:clamp(300px,52vw,420px)} .steps{grid-template-columns:1fr} .step:nth-child(2),.step:nth-child(3){transform:none} .cards{grid-template-columns:1fr 1fr} .cards .card:nth-child(3){grid-column:1 / -1;max-width:520px;margin-inline:auto} /* plato tablet: prominente pero en el gutter derecho, sin tocar el texto. Offsets portados al nuevo containing block (hero full-bleed, jun 2026): max() reproduce el look anterior (gutter del container + clamp original). */ .hero__plato{ height:clamp(420px,66vh,640px); right:max(calc(5vw - 260px),-27vw); top:50%; } } /* MOBILE ≤640 */ @media (max-width:640px){ /* HERO mobile (jun 2026, Director — puntos 2+3): sin deco flotante arriba (la volamos), el contenido sube y respira en el 100svh SIN hueco muerto y SIN pegarse al nav. - align-items:flex-start + justify-content:center → el bloque (eyebrow→tags) se centra como grupo dentro del área de contenido, en vez de centrarse sobre todo el svh dejando un void arriba. - padding-top = nav (64px) + aire cómodo (~28→44px según alto de device) → el copy arranca con respiro del navbar fixed, nunca tapado/pegado. - padding-bottom holgado: reserva la banda inferior para el PLATO (media bandeja asomando desde abajo, regla aparte) + FAB. El texto nunca baja a esa banda. */ .hero{ align-items:flex-start; justify-content:center; flex-direction:column; /* plato ENTERO que CAE sobre la sección 2 (Director jun 2026): el hero deja salir el disco hacia abajo (overflow-y visible) → el plato completo asoma sobre #que-hago, sin cortarse. overflow-x clip mata el scroll horizontal. padding-bottom empuja el texto arriba para que NO baje a la zona del plato. */ padding-block:calc(var(--nav-h) + clamp(24px,3.5vh,38px)) max(300px,36svh); overflow-x:clip; overflow-y:visible; } .hero__inner{margin-block:auto} /* centra el grupo de texto en el aire restante → mata el void de arriba */ /* plato mobile PROTAGONISTA (jun 2026, Director "que se vea más, no un gajito"): MEDIA BANDEJA asomando desde abajo, centrada — como un sol que sube del borde inferior. Aprovecha el espacio que liberó la subcopy eliminada. - diámetro full-bleed: 100vw en 390 (toca ambos bordes) → cero overflow-x exacto. - bottom:calc(195px - diámetro) → asoman SIEMPRE 195px (en 390 = media bandeja clavada), anclado al borde real del hero (reparentado, ya no depende de la columna de texto). - rotación scroll-linked intacta (vive en la img); z1 < texto z2 → no tapa nada. */ /* plato mobile ENTERO + OVERLAP sobre sección 2 (jun 2026, Director "ponelo entero y que caiga un poco a la segunda sección"): el disco completo, MÁS grande, anclado con bottom NEGATIVO → su arco inferior cae sobre el inicio de #que-hago, pero el plato se ve entero (el hero tiene overflow-y visible). z-index alto → cae ENCIMA de la sección 2. rotación scroll-linked intacta (vive en la img). */ .hero__plato{ --plato-d:clamp(310px,93vw,375px); top:auto;left:50%;right:auto; bottom:-70px; /* negativo → el disco (más grande) cae ~70px sobre la sección 2, entero */ height:var(--plato-d); width:var(--plato-d); /* explícito: con left:50% el shrink-to-fit capearía a medio viewport */ transform:translateX(-50%); /* centrado horizontal; sin translateY (anclado por bottom) */ z-index:5; /* cae ENCIMA del bloque siguiente */ } /* la sección 2 queda DEBAJO del plato que cae sobre ella (mobile) */ .block--ink#que-hago{position:relative;z-index:1} /* outline "SUSHI" de fondo REUBICADO en mobile (Director jun 2026): hace ECO detrás del wordmark (efecto profundidad), liberando el CTA/claim. Su centro vertical queda ALINEADO con el del wordmark "ORIANA SUSHI" (Director: "alineada al oriana sushi"). */ .hero__outline{top:26%;} /* EYEBROW mobile (jun 2026, Director — "en una sola línea en mobile"): "SUSHI POR ENCARGO · BUENOS AIRES" (~32 chars) en 320px se partía en 2 líneas. Ancho útil 320px ≈ 320 − 40 (pad) − ~30 (barrita+margin) ≈ 250px. Con .82rem + .18em no entra. Fix: nowrap + bajar font-size/letter-spacing lo JUSTO (font computado final ≥ ~10.5px, legible) + achicar la barrita ::before para ganar ancho sin tocar más el texto. Solo ≤640, desktop intacto. */ .eyebrow{ white-space:nowrap; font-size:.68rem; letter-spacing:.1em; } .eyebrow--ink::before,.eyebrow--paper::before{ width:18px;margin-right:var(--space-2); } .cards{grid-template-columns:1fr} .cards .card:nth-child(3){max-width:none} .card--rot-l,.card--rot-r{transform:none} .cierre__cta{flex-direction:column;align-items:stretch} .cierre__cta .btn{width:100%} .footer__inner{flex-direction:column;align-items:flex-start} /* banda vacía bajo los botones del cierre → ahí vive el outline "PEDÍ" sin tocar nada */ .cierre{padding-bottom:clamp(120px,28vw,180px)} /* "A MANO" mobile (punto 6, Director "está muy arriba/mal → bajalo un poquito"): base top:50% lo dejaba apretado contra el párrafo y cortado por la derecha. Lo BAJAMOS a ~64% → queda como textura limpia en el aire entre el texto y las imágenes de sushi, más chico para que no se corte feo. right:-4% deja asomar el borde sin overflow (el .block tiene overflow:hidden). */ .section__outline{ top:64%;right:2%; font-size:clamp(3rem,14vw,5rem); } /* "PEDÍ" cierre mobile (punto 7, mismo bug del outline tapado): en desktop vive a media altura derecha; en mobile el contenido es full-width y ocupa esa banda, así que lo mandamos a la BANDA VACÍA bajo los botones (creada con el padding-bottom de .cierre), alineado a la derecha → zona libre, palabra ENTERA, sin tapar botones. */ .cierre__outline{ top:auto; bottom:clamp(28px,8vw,56px); right:clamp(14px,5vw,28px); left:auto; transform:none; text-align:right; font-size:clamp(2.6rem,14vw,4rem); } /* ≤390 — el plato hereda de ≤640 (media bandeja centrada desde abajo: el clamp del diámetro ya escala solo). Acá solo ajustes finos de outline + piezas de "qué hago". */ @media (max-width:390px){ .hero__outline{-webkit-text-stroke-color:rgba(22,20,18,.09)} /* piezas "qué hago" SIN DEFORMAR (jun 2026, Director "quedaron estiradas"): como flex items, el align-items:stretch default las estiraba a la altura de la fila (la más baja se deformaba). align-items:center + height:auto → cada img conserva su aspect real. */ .split__media{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-4);min-height:auto;margin-top:var(--space-5)} .piece--makis,.piece--uramaki2{ position:relative;display:block;width:46%;height:auto;align-self:center; top:auto;left:auto;right:auto;bottom:auto;transform:rotate(-4deg) } } } /* ↑ cierre del @media (max-width:640px) — el bloque ≤390 vive ANIDADO adentro (válido CSS; antes faltaba esta llave y el parser auto-cerraba al EOF — jun 2026 se dejó explícito). */ /* ============================================================ PALETA BLACKOUT NEON — VARIANTE C+ (aprobada Director Creativo, jun 2026) ------------------------------------------------------------ Capa de TEMA NOCTURNO que reviste la dirección Pop con clave nocturna. Tokens en :root (--night, --neon-y, --neon-l, --cream, etc). Por qué vive AGRUPADA al final y no inline por sección: 1. Es una capa cohesiva de tema; conviene leerla/mantenerla como unidad. 2. Al estar DESPUÉS de las reglas base, gana los empates de specificity por orden de cascada (ver .fab y .skip-link, que empatan 0,1,0 con su base). Es el mismo efecto que el