/* ============================================================ LA ESQUINA VENEZOLANA Sistema visual: cartel callejero / street poster Los tokens de :root los escribe `python crear-sitio.py` desde marca.json (colores y tipografía). Todo lo demás es la hoja de estilo de la plantilla: se edita en plantilla/sitio/css/style.css. ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ /* superficies */ --ink: #0B0A09; --ink-2: #121110; --ink-3: #1A1817; --ink-4: #242120; --line: rgba(245,239,230,.11); --line-2: rgba(245,239,230,.06); /* marca */ --yellow: #FFC627; --yellow-2: #FFD95C; --yellow-deep:#C79300; --red: #CE1126; --red-2: #F0263C; --red-deep: #8C0B19; /* El azul de la bandera. La paleta tenía amarillo y rojo —los dos colores de cualquier casa de hamburguesas— y sin el azul el sitio nunca terminaba de leerse venezolano. --blue es el de la tela; --blue-2 el que sí se lee sobre el negro, para texto e iconos. */ --blue: #0033A0; --blue-2: #4B86F0; --blue-deep: #001E63; --wa: #25D366; /* bandera: los tres colores del trazo de la portada. Sin datos propios en marca.json son los de la casa; una cocina con bandera que reivindicar pone acá la suya. */ --flag-1: #FFC627; --flag-2: #0033A0; --flag-3: #CE1126; /* Los dos usos del tricolor, para no reescribir el degradado en veinte reglas. --tricolor es la REGLA: acostada, marca dónde empieza algo (el rótulo de una sección, el canto de una tarjeta, el pie). --bandera es la BANDERA de verdad: bandas horizontales apiladas, y solo se usa donde se lee como tal, en formato de banderita. */ --tricolor: linear-gradient(90deg, var(--flag-1) 0 33.33%, var(--flag-2) 33.33% 66.66%, var(--flag-3) 66.66% 100%); --bandera: linear-gradient(180deg, var(--flag-1) 0 33.33%, var(--flag-2) 33.33% 66.66%, var(--flag-3) 66.66% 100%); /* texto */ --cream: #F6F1E7; --muted: #A39A8F; --muted-2: #6E665D; /* tipografía --headline es la voz de la marca en la portada y en los botones: una grotesca de rango ancho (300 a 800) que permite jerarquía por peso en vez de por color. --marker es la brocha del titular de la portada, gorda y de trazo sucio, y no sale de ahí. --brush es el pincel, elegante pero con textura, y va SOLO en palabras sueltas. --display (condensada de cartel) se queda en los encabezados de sección. */ --headline:'Archivo', 'Barlow', -apple-system, sans-serif; --marker: 'Permanent Marker', 'Kaushan Script', 'Archivo', sans-serif; --display: 'Bebas Neue', 'Barlow Condensed', Impact, sans-serif; --brush: 'Kaushan Script', 'Barlow', cursive; --cond: 'Barlow Condensed', 'Barlow', sans-serif; --body: 'Barlow', -apple-system, sans-serif; --mono: 'Courier Prime', 'Courier New', monospace; /* medidas */ --wrap: 1220px; --pad: clamp(1.05rem, 3.2vw, 2.6rem); --r: 3px; /* movimiento */ --e: cubic-bezier(.22,1,.36,1); --e2: cubic-bezier(.65,0,.35,1); } /* ---------- 2. RESET ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; /* Lo que se pega arriba tapa lo que se ancla: la barra siempre, y en teléfono también la tira de categorías. --nav-h la mide app.js. */ scroll-padding-top:calc(var(--nav-h, 62px) + 16px); -webkit-text-size-adjust:100%; /* El recuadro gris que pinta el navegador al tocar sobra: cada cosa que se toca ya tiene su propio :active, y el recuadro se sale de las esquinas redondeadas de los botones. */ -webkit-tap-highlight-color:transparent; } body{ background:var(--ink); color:var(--cream); font-family:var(--body); /* 1rem y no 16px: son lo mismo por defecto, pero en píxeles se ignora el tamaño de letra que la persona tenga puesto en su navegador. El resto del sitio ya está en rem y sí crecía, así que los titulares subían y el texto corrido se quedaba clavado en 16. */ font-size:1rem; line-height:1.65; /* Las dos líneas son a propósito. `hidden` convierte al body en contenedor de scroll y eso rompe todo `position:sticky` que cuelgue de él —la tira de categorías se quedaba quieta—. `clip` recorta igual pero sin crear el contenedor, así que lo pegajoso vuelve a pegarse. Los navegadores que no entienden `clip` se quedan con `hidden`: recortan igual y lo único que pierden es que la tira se pegue. */ overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.is-locked{ overflow:hidden; } img,video,iframe{ display:block; max-width:100%; } img{ height:auto; } a{ color:inherit; text-decoration:none; } button,input,textarea{ font:inherit; color:inherit; } button{ background:none; border:0; cursor:pointer; } ul{ list-style:none; } ::selection{ background:var(--yellow); color:var(--ink); } /* scrollbar */ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:var(--ink-2); } ::-webkit-scrollbar-thumb{ background:var(--ink-4); border-radius:0; } ::-webkit-scrollbar-thumb:hover{ background:var(--yellow-deep); } :focus-visible{ outline:2.5px solid var(--yellow); outline-offset:3px; } /* ---------- 3. UTILIDADES ---------- */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); } .section{ padding-block:clamp(2.75rem, 5vw, 5.25rem); position:relative; } /* `text-transform:none` porque la cifra hereda las versalitas de donde caiga —un rótulo, un botón, una tira— y la k de "$30k" es una unidad, no una palabra: en mayúscula deja de leerse como mil. */ .price{ font-family:var(--mono); font-weight:700; letter-spacing:-.02em; text-transform:none; } .linkish{ color:var(--yellow); font-weight:700; border-bottom:1.5px solid currentColor; padding-bottom:1px; transition:opacity .2s; } .linkish:hover{ opacity:.7; } /* Texto que solo existe para quien no ve la página: el nombre de la casa dentro del titular de la portada, que a la vista lo pone el logotipo de la barra. Ni display:none ni visibility:hidden, que lo sacarían también del lector de pantalla. */ .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* ---------- ICONOS ---------- */ .sprite{ display:none; } .ico{ width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.125em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .ico--fill{ fill:currentColor; stroke:none; } /* grano global */ .grain{ position:fixed; inset:-50%; z-index:9998; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainShift 8s steps(6) infinite; } @keyframes grainShift{ 0%,100%{ transform:translate(0,0) } 20%{ transform:translate(-4%,3%) } 40%{ transform:translate(3%,-4%) } 60%{ transform:translate(-2%,-3%) } 80%{ transform:translate(4%,2%) } } /* barra de progreso de lectura. Va con scaleX en vez de width: el ancho fuerza recálculo de layout en cada frame y esto se toca en cada scroll. */ .progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:930; pointer-events:none; background:rgba(245,239,230,.05); } .progress span{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg, var(--yellow), var(--red-2)); box-shadow:0 0 12px rgba(245,197,24,.55); } /* reveal on scroll. La variante base entra desde abajo; las otras tres existen para que no todo el sitio aparezca con el mismo gesto: las tarjetas crecen, y lo que va en pareja (las dos sedes) entra desde su propio lado. */ .reveal{ opacity:0; transform:translateY(26px); } /* El recorrido lateral es exactamente el margen lateral de la página, ni un píxel más. Con los 38 px fijos que había antes, el elemento arrancaba fuera de la ventana en todo ancho menor a ~1190 px —que es donde el margen aún no llega a 38— y ensanchaba la página mientras no se hubiera revelado. Se veía como un tirón horizontal al bajar por "Nosotros" y por las sedes. Atado al margen, el elemento arranca pegado al canto y nunca lo pasa. */ .reveal--izq{ transform:translateX(calc(var(--pad) * -1)); } .reveal--der{ transform:translateX(var(--pad)); } .reveal--zoom{ transform:scale(.93); } /* Los renglones de la carta entran con la mitad de recorrido que una sección: son muchos y seguidos, y a 26 px la lista se lee como un oleaje. */ .mitem.reveal{ transform:translateY(14px); } .reveal.is-in{ opacity:1; transform:none; transition:opacity .8s var(--e) var(--d,0s), transform .8s var(--e) var(--d,0s); } /* Paralaje del hero: el arte sube más despacio que la página y el bloque de texto se va con un poco de deriva. Los valores los pone app.js en --par y --drift; sin JS las variables no existen y todo se queda quieto. */ .hero__content{ transform:translateY(var(--drift, 0px)); } /* ---------- 4. LOADER ---------- */ .loader{ position:fixed; inset:0; z-index:10000; background:var(--ink); display:grid; place-content:center; justify-items:center; gap:clamp(1.1rem, 2.5vw, 1.6rem); transition:opacity .5s var(--e), visibility .5s var(--e); } .loader.is-done{ opacity:0; visibility:hidden; } /* al salir, el conjunto se va un pelo hacia arriba: da sensación de "cortina que sube" en vez de un corte seco */ .loader.is-done .loader__stage, .loader.is-done .loader__words, .loader.is-done .loader__bar{ transform:translateY(-10px); transition:transform .5s var(--e); } /* --- Logo + resplandor + icono --- El logo real es el sello circular de la marca (1:1), no el apaisado con el que nació la plantilla: el escenario baja de ancho para que a igual alto ocupe lo mismo, y el resplandor vuelve a ser un círculo parejo. --- */ .loader__stage{ position:relative; display:grid; place-items:center; width:clamp(150px, 36vw, 210px); } .loader__glow{ position:absolute; inset:-26%; border-radius:50%; pointer-events:none; background:radial-gradient(circle at center, rgba(245,197,24,.3), rgba(245,197,24,.07) 46%, transparent 70%); filter:blur(12px); animation:loader-glow 2.2s var(--e2) infinite alternate; } @keyframes loader-glow{ from{ opacity:.35; transform:scale(.88) } to{ opacity:1; transform:scale(1.06) } } /* Ya no hace falta mix-blend-mode:lighten para tapar el cuadro negro: el logo trae canal alfa de verdad, así que el resplandor se ve por detrás sin que la mezcla altere el amarillo. */ .loader__logo{ position:relative; width:100%; height:auto; animation:loader-logo 2.2s var(--e2) infinite alternate; } @keyframes loader-logo{ from{ transform:scale(.975) } to{ transform:scale(1) } } /* top va en % del alto del escenario, que ahora es cuadrado: con -42% el icono se despegaba el doble de lo previsto. */ .loader__ico{ position:absolute; top:-22%; left:50%; z-index:2; width:clamp(34px, 7.5vw, 46px); height:auto; fill:none; stroke:var(--yellow); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transform-origin:50% 60%; animation:loader-flip 2.6s var(--e2) infinite; } /* la hamburguesa flota y da un giro completo cada vuelta */ @keyframes loader-flip{ 0% { transform:translate(-50%, 0) rotate(0deg) } 35% { transform:translate(-50%, -14px) rotate(180deg) } 70% { transform:translate(-50%, 0) rotate(360deg) } 100% { transform:translate(-50%, 0) rotate(360deg) } } /* --- Frases rotativas --- Cuatro turnos de 1,5s dentro de un ciclo de 6s. Cada una entra desde abajo, aguanta y sale hacia arriba. --- */ .loader__words{ position:relative; height:1.5rem; width:min(320px, 78vw); } .loader__words span{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--cond); font-weight:600; font-size:.86rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); opacity:0; animation:loader-word 6s var(--e) infinite; } .loader__words span:nth-child(2){ animation-delay:1.5s; } .loader__words span:nth-child(3){ animation-delay:3s; } .loader__words span:nth-child(4){ animation-delay:4.5s; } @keyframes loader-word{ 0% { opacity:0; transform:translateY(9px) } 5% { opacity:1; transform:translateY(0) } 20% { opacity:1; transform:translateY(0) } 25% { opacity:0; transform:translateY(-9px) } 100% { opacity:0; transform:translateY(-9px) } } /* --- Barra de progreso --- */ .loader__bar{ width:min(200px,42vw); height:2px; background:var(--ink-4); overflow:hidden; border-radius:2px; } .loader__bar span{ display:block; height:100%; width:40%; background:var(--tricolor); border-radius:2px; box-shadow:0 0 10px rgba(245,197,24,.55); animation:slide 1.1s var(--e2) infinite; } @keyframes slide{ from{ transform:translateX(-110%) } to{ transform:translateX(360%) } } /* ---------- 5. TOPBAR ---------- */ .topbar{ background:var(--yellow); color:var(--ink); overflow:hidden; border-bottom:2px solid var(--ink); position:relative; z-index:60; } .topbar__track{ display:flex; align-items:center; gap:1.5rem; white-space:nowrap; font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.12em; padding-block:.34rem; width:max-content; animation:marquee 42s linear infinite; } /* El separador es un punto dibujado, no el carácter ● : ese lo pintan como emoji a color varios Android y quedaba un topo azul entre frase y frase. */ .topbar .dot{ display:inline-block; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; vertical-align:middle; } @keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } } /* ---------- 6. NAV ---------- */ .nav{ position:sticky; top:0; z-index:900; background:rgba(11,10,9,.78); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line); transition:background .35s, border-color .35s, padding .35s; } .nav.is-stuck{ background:rgba(11,10,9,.96); border-color:var(--line); } .nav__inner{ max-width:var(--wrap); margin-inline:auto; padding:.55rem var(--pad); display:flex; align-items:center; gap:1.1rem; } /* El logo ya trae dentro el nombre completo: repetirlo al lado en texto duplicaba la marca y obligaba a dejar la imagen chiquita para que cupieran las dos cosas. Ahora manda la imagen sola y puede ir grande. */ .nav__logo{ display:flex; align-items:center; gap:.65rem; flex-shrink:0; } .nav__logo img{ height:50px; width:auto; } /* El nombre escrito al lado del sello. Antes lo ponía el logotipo grande del centro de la portada; desde que ahí manda el titular a brocha, la marca se lee acá y no en ningún otro sitio de la primera pantalla. */ .nav__wordmark{ font-family:var(--brush); font-size:1.3rem; line-height:1; color:var(--cream); white-space:nowrap; padding-bottom:.14em; } .nav__links{ display:flex; gap:.3rem; margin-left:auto; } .nav__links a{ font-family:var(--cond); font-weight:600; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:.42rem .62rem; position:relative; transition:color .25s; } .nav__links a::after{ content:''; position:absolute; left:.62rem; right:.62rem; bottom:.22rem; height:2px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .34s var(--e); } .nav__links a:hover{ color:var(--cream); } .nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); } .nav__links a.is-active{ color:var(--yellow); } .nav__actions{ display:flex; align-items:center; gap:.6rem; } /* estado abierto/cerrado */ .status{ display:inline-flex; align-items:center; gap:.42rem; font-family:var(--cond); font-size:.73rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); padding:.3rem .6rem; border:1px solid var(--line); border-radius:2px; } .status__dot{ width:7px; height:7px; border-radius:50%; background:var(--muted-2); flex-shrink:0; } .status.is-open{ color:var(--wa); border-color:rgba(37,211,102,.3); } .status.is-open .status__dot{ background:var(--wa); box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:ping 2s infinite; } .status.is-closed{ color:var(--red-2); border-color:rgba(255,59,48,.28); } .status.is-closed .status__dot{ background:var(--red-2); } @keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5) } 70%{ box-shadow:0 0 0 7px rgba(37,211,102,0) } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) } } .status--inline{ margin-top:.7rem; align-self:flex-start; } /* burger móvil */ .burger{ display:none; flex-direction:column; gap:5px; padding:.5rem .25rem; } .burger span{ display:block; width:24px; height:2px; background:var(--cream); transition:transform .35s var(--e), opacity .2s; } .burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger.is-open span:nth-child(2){ opacity:0; } .burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ---------- 7. BOTONES ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; /* misma grotesca del titular: los botones son parte de la voz de marca, no un componente de sistema aparte */ font-family:var(--headline); font-weight:600; font-size:.86rem; letter-spacing:.11em; text-transform:uppercase; padding:.6rem 1.05rem; border-radius:var(--r); transition:transform .22s var(--e), background .25s, color .25s, box-shadow .25s; position:relative; white-space:nowrap; } .btn:active{ transform:translateY(1px) scale(.985); } /* Los grandes son los de llamada a la acción: van solos, a todo el ancho en teléfono y con las etiquetas más largas del sitio. A diferencia del resto se les deja romper en dos líneas: con `nowrap`, "Cómo pedir a domicilio" se salía de su propia caja en cuanto el navegador subía el tamaño de letra o la pantalla era muy angosta. Romper es feo; desbordar es un error. */ .btn--lg{ padding:.8rem 1.4rem; font-size:.95rem; white-space:normal; text-wrap:balance; } .btn--block{ width:100%; } .btn--primary{ background:var(--yellow); color:var(--ink); box-shadow:0 0 0 0 rgba(245,197,24,.42); } .btn--primary:hover{ background:var(--yellow-2); box-shadow:0 8px 26px -6px rgba(245,197,24,.5); transform:translateY(-2px); } .btn--ghost{ border:2px solid var(--line); color:var(--cream); background:rgba(255,255,255,.03); } /* amarillo y no verde: el verde de WhatsApp quedó de cuando este botón llevaba al chat, y desde que las llamadas a pedir van a la carta era el único color ajeno a la paleta que seguía apareciendo al pasar por encima */ .btn--ghost:hover{ border-color:var(--yellow); color:var(--yellow); transform:translateY(-2px); } .btn--wa{ background:var(--wa); color:#04220F; } .btn--wa:hover{ background:#1FBF5B; transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(37,211,102,.5); } .btn--cart{ background:var(--ink-3); border:1px solid var(--line); color:var(--cream); padding:.6rem .95rem; } .btn--cart:hover{ background:var(--ink-4); border-color:var(--yellow); color:var(--yellow); } .cart-count{ min-width:20px; height:20px; padding:0 5px; border-radius:20px; background:var(--red); color:#fff; font-family:var(--mono); font-size:.72rem; font-weight:700; display:grid; place-content:center; line-height:1; transition:transform .3s var(--e); } .cart-count.bump{ animation:bump .42s var(--e); } @keyframes bump{ 0%,100%{ transform:scale(1) } 40%{ transform:scale(1.45) } } /* Disco que vuela del plato al carrito. El recorrido lo arma el JS con las posiciones reales del clic; acá solo va la pinta. */ .fly{ position:fixed; left:0; top:0; z-index:9500; pointer-events:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--yellow); color:var(--ink); box-shadow:0 14px 28px -10px rgba(0,0,0,.8), inset 0 0 0 1px rgba(11,10,9,.22); will-change:transform, opacity; } .fly .ico{ width:1.5rem; height:1.5rem; stroke-width:1.8; } /* El carrito acusa el golpe justo cuando el disco aterriza */ .btn--cart.is-hit{ animation:cartHit .56s var(--e); } @keyframes cartHit{ 0%{ transform:scale(1); } 30%{ transform:scale(1.11); background:var(--yellow); border-color:var(--yellow); color:var(--ink); box-shadow:0 0 0 6px rgba(245,197,24,.2); } 100%{ transform:scale(1); box-shadow:0 0 0 13px rgba(245,197,24,0); } } .btn--ver{ background:transparent; border:2px solid var(--yellow); color:var(--yellow); padding:.6rem 1.05rem; font-size:.85rem; width:100%; } .btn--ver:hover{ background:var(--yellow); color:var(--ink); } /* ---------- 8. HERO ---------- */ /* La portada va partida en dos: a la izquierda el titular a brocha, la bajada y los botones; a la derecha la foto del plato, a sangre hasta el borde. Antes era una composición central con el logotipo plantado sobre el fondo, y ese logotipo terminaba diciendo lo mismo que la barra de arriba. Lo que junta las dos mitades no es una caja ni un borde: es la propia foto, que se apaga hacia la izquierda con una máscara y entra en el negro justo donde arranca el texto. */ .hero{ position:relative; overflow:hidden; isolation:isolate; min-height:min(94svh, 840px); display:flex; flex-direction:column; justify-content:center; background:var(--ink); border-bottom:2px solid var(--ink-4); } /* La foto arranca pasada la mitad y se difumina por su canto izquierdo con una máscara. Un degradado encima no sirve: el velo que apagara la foto apagaría también el titular, que va delante. La máscara va en el contenedor y no en la imagen para que se lleve por delante también la trama de impresión. */ .hero__media{ position:absolute; inset:0 0 0 30%; z-index:0; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 26%); mask-image:linear-gradient(90deg, transparent 0, #000 26%); } .hero__video{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; /* la escala de más es el margen que se come el paralaje: sin ella, al desplazar la foto asomaría el fondo negro por el canto de arriba */ transform:translateY(calc(var(--par, 0px) * .4)) scale(1.05); filter:saturate(1.08) contrast(1.04) brightness(1.07); will-change:transform; } /* Textura de impresión: la misma trama fina del resto del sitio, la que hace que el fondo se lea como cartel y no como una foto pegada. */ .hero__media::after{ content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); opacity:.28; mix-blend-mode:multiply; } /* Dos halos: el amarillo levanta el plato del fondo —la foto viene de estudio y sin él la mitad derecha se apaga contra el negro— y el rojo al pie cose la portada con la franja de platos y le devuelve el rojo de marca. */ .hero__glow{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(ellipse 42% 58% at 74% 46%, rgba(245,197,24,.17), transparent 72%), radial-gradient(ellipse 66% 46% at 56% 112%, rgba(224,35,28,.32), transparent 74%); } /* Dos velos. El diagonal es el que hace legible la columna de texto: apaga el video por su lado izquierdo hasta el negro pleno y llega a transparente antes del canto derecho, así el último cuarto de la portada se ve tal cual. El vertical hunde cabecera y pie para coser el hero con la barra de arriba y con la franja de abajo; en medio se queda muy bajo a propósito, que es donde se mira el video. */ .hero__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(96deg, var(--ink) 0 26%, rgba(11,10,9,.84) 40%, rgba(11,10,9,.34) 56%, rgba(11,10,9,.06) 76%, transparent 100%), linear-gradient(to bottom, rgba(11,10,9,.82) 0%, rgba(11,10,9,.12) 24%, rgba(11,10,9,.18) 58%, rgba(11,10,9,.78) 88%, rgba(11,10,9,.95) 100%); } /* Dos columnas: el bloque de texto y, al lado, la frase escrita a mano sobre la foto. La rejilla se queda dentro del ancho del sitio; la foto, no. */ .hero__content{ position:relative; z-index:3; width:100%; max-width:var(--wrap); margin-inline:auto; flex:1; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); align-items:center; gap:clamp(1rem, 3vw, 2.4rem); padding:clamp(2.2rem, 5.5vh, 3.6rem) var(--pad) clamp(1.3rem, 3vh, 2rem); } /* Línea de ubicación: se baja el tono. Antes era amarillo pleno y competía con el titular; ahora el amarillo se queda solo en la regla. */ .eyebrow{ display:flex; align-items:center; gap:.85rem; font-family:var(--headline); font-weight:500; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(245,239,230,.62); margin-bottom:1.5rem; } .eyebrow__line{ display:block; width:40px; height:3px; background:var(--tricolor); flex-shrink:0; } /* --- Crédito de la casa ---------------------------------------------------- Ubicación y firma del chef en una sola línea por encima del titular. Va en amarillo, pequeña y muy espaciada —el registro de la letra chica de un cartel— para que acredite sin competir con la marca ni con el botón. La regla que la cierra es lo que la ata al titular de abajo. */ .hero__credit{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem clamp(.7rem, 1.8vw, 1.2rem); font-family:var(--headline); font-weight:500; font-size:clamp(.6rem, 1.05vw, .72rem); letter-spacing:.3em; text-transform:uppercase; color:var(--yellow); text-shadow:0 2px 14px rgba(0,0,0,.85); margin-bottom:clamp(.9rem, 2.2vh, 1.35rem); } .hero__credit::after{ content:''; flex:1 1 40px; max-width:180px; height:1px; background:linear-gradient(90deg, rgba(245,197,24,.55), transparent); } /* Rombo dibujado, no el carácter ✦: ese dingbat lo resuelve cada sistema con la fuente que tenga a mano y en Android salía como un asterisco de emoji. */ .hero__credit-sep{ display:inline-block; width:5px; height:5px; flex:none; background:rgba(245,197,24,.55); transform:rotate(45deg); } .hero__credit a{ position:relative; display:inline-flex; align-items:center; gap:.45rem; color:var(--yellow); border-bottom:1px solid rgba(245,197,24,.35); padding-bottom:2px; transition:color .25s, border-color .25s; } /* Un renglón de letra chica mide 18 px de alto: como enlace es imposible de acertar con el dedo. Se le agranda el área que responde, no el texto —con padding, el subrayado se despegaría siete píxeles de las letras. */ .hero__credit a::after{ content:''; position:absolute; inset:-13px -10px; } .hero__credit a:hover{ color:var(--yellow-2); border-color:var(--yellow-2); } .hero__credit a svg{ opacity:.75; flex:none; } /* --- Titular --------------------------------------------------------------- Dos palabras a brocha, la segunda en amarillo: el mismo gesto de los carteles pintados a mano de cualquier esquina de comida. La palabra resaltada va en y no en un span con clase, que es como el resto del sitio marca lo destacado dentro de un título. */ .hero__mark{ font-family:var(--marker); font-weight:400; font-size:clamp(2.6rem, 6.6vw, 6rem); line-height:.98; letter-spacing:.005em; text-transform:uppercase; color:var(--cream); text-shadow:0 8px 34px rgba(0,0,0,.8), 0 2px 3px rgba(0,0,0,.55); } .hero__mark em{ font-style:normal; color:var(--yellow); display:inline-block; } /* Trazo con los colores de la bandera. El sesgo es lo que lo saca de "barra de tres colores" y lo mete en "pincelada". */ .hero__flag{ display:block; width:clamp(132px, 19vw, 232px); height:clamp(7px, 1vw, 10px); margin:clamp(.65rem, 1.6vh, 1rem) 0 clamp(1.05rem, 2.5vh, 1.5rem); background:linear-gradient(90deg, var(--flag-1) 0 34%, var(--flag-2) 34% 67%, var(--flag-3) 67% 100%); transform:skewX(-16deg); box-shadow:0 8px 24px -10px rgba(0,0,0,.95); } .hero__sub{ font-size:clamp(.94rem, 1.3vw, 1.02rem); color:rgba(245,239,230,.8); max-width:44ch; margin:0 0 clamp(1.5rem, 3.2vh, 2rem); font-weight:400; line-height:1.7; text-shadow:0 2px 16px rgba(0,0,0,.85); /* reparte los renglones para que el último no quede con una palabra suelta debajo del bloque; donde no esté soportado, se ignora y no pasa nada */ text-wrap:balance; } /* Igual que en la bajada de la carta: lo destacado sube a crema plena en vez de cambiar de color. Son dos palabras, no cuatro; en cuanto se marcan más la línea deja de leerse de corrido. */ .hero__sub strong{ color:var(--cream); font-weight:600; } .hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; } /* El botón fantasma nació para fondo negro plano: sobre la foto se quedaba sin canto en cuanto el fondo aclaraba. Dentro del hero lleva fondo propio y desenfoque detrás, así siempre se lee como botón. */ .hero__cta .btn--ghost{ background:rgba(11,10,9,.45); border-color:rgba(245,239,230,.3); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); } .hero__cta .btn--ghost:hover{ background:rgba(11,10,9,.62); } /* --- Frase de la casa ------------------------------------------------------ Escrita a mano en la esquina de la foto y girada, como puesta con plantilla sobre el papel del cartel. La curva de abajo es el remate del trazo: dos radios distintos en el borde inferior, no una imagen. */ .hero__note{ justify-self:end; align-self:start; max-width:14ch; margin-top:clamp(0rem, 3vh, 2rem); font-family:var(--brush); font-weight:400; font-size:clamp(1rem, 1.85vw, 1.7rem); line-height:1.32; color:var(--yellow); text-align:right; transform:rotate(-4.5deg); text-shadow:0 4px 20px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,.7); } .hero__note::after{ content:''; display:block; width:62%; height:.42em; margin:.2em 0 0 auto; border-bottom:2px solid rgba(245,197,24,.6); border-radius:0 0 46% 46% / 0 0 100% 100%; } /* --- Promesas de la casa --------------------------------------------------- Cuatro renglones al pie de la portada, separados por filetes: de dónde sale la comida, cómo se hace y cuándo. Icono a la izquierda, título y detalle apilados a la derecha, con la misma anatomía que las fichas de la cabecera de la carta. */ .hero__marks{ position:relative; z-index:3; width:100%; max-width:var(--wrap); margin-inline:auto; padding:0 var(--pad) clamp(1.2rem, 3vh, 1.9rem); display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(.9rem, 2.2vw, 1.8rem); } .hmark{ position:relative; display:grid; align-items:center; grid-template-columns:auto 1fr; column-gap:.75rem; grid-template-areas:"ico titulo" "ico detalle"; } /* El filete cae a media canaleta, así que se sitúa con el mismo hueco de la rejilla; sin líneas sueltas en los extremos. */ .hmark + .hmark::before{ content:''; position:absolute; top:.1rem; bottom:.1rem; left:calc(clamp(.9rem, 2.2vw, 1.8rem) / -2); width:1px; background:var(--line); } .hmark__ico{ grid-area:ico; display:flex; color:var(--yellow); font-size:clamp(1.5rem, 2.3vw, 1.95rem); } .hmark__ico .ico{ stroke-width:1.6; } .hmark b{ grid-area:titulo; font-family:var(--cond); font-weight:700; font-size:clamp(.82rem, 1.1vw, .95rem); letter-spacing:.09em; text-transform:uppercase; line-height:1.2; } .hmark > span:last-child{ grid-area:detalle; color:var(--muted); font-size:.76rem; line-height:1.36; } /* --- Franja de platos ------------------------------------------------------ Ocupa el pie del hero de lado a lado, con el filo superior rasgado como un cartel arrancado. Cada chip es un ancla al plato dentro de la carta; el activo se pinta de amarillo. */ .hero__strip{ position:relative; z-index:2; width:100%; background:linear-gradient(180deg, var(--red) 0%, #B3150F 100%); box-shadow:0 -14px 40px -20px rgba(224,35,28,.8); clip-path:polygon( 0 7px, 7% 1px, 15% 8px, 24% 2px, 34% 9px, 45% 2px, 56% 8px, 67% 1px, 78% 8px, 89% 2px, 96% 7px, 100% 2px, 100% 100%, 0 100%); } .hero__strip-track{ display:flex; align-items:stretch; /* algo más ancho que el resto del sitio: con 7 chips, ceñirla a --wrap dejaba dos franjas rojas vacías a los lados en monitores grandes */ max-width:min(1560px, 100%); margin-inline:auto; padding-inline:calc(var(--pad) - .75rem); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x proximity; } .hero__strip-track::-webkit-scrollbar{ display:none; } .dchip{ position:relative; flex:1 0 auto; scroll-snap-align:center; display:flex; align-items:center; justify-content:center; gap:.48rem; padding:.78rem .85rem .8rem; white-space:nowrap; font-family:var(--cond); font-weight:700; font-size:.79rem; letter-spacing:.07em; text-transform:uppercase; color:#fff; /* blanco puro: sobre el rojo de marca da 4,75:1 y cumple AA */ transition:background .22s var(--e), color .22s var(--e); } .dchip .ico{ width:17px; height:17px; stroke-width:1.7; opacity:.92; } /* separador entre chips, sin líneas sueltas en los extremos */ .dchip + .dchip::before{ content:''; position:absolute; left:0; top:.6rem; bottom:.6rem; width:1px; background:rgba(0,0,0,.22); } .dchip:hover{ background:rgba(0,0,0,.24); color:#fff; } .dchip.is-active{ background:var(--yellow); color:var(--ink); } .dchip.is-active .ico{ opacity:1; stroke-width:2; } .dchip.is-active + .dchip::before, .dchip.is-active::before{ opacity:0; } /* Plato al que apunta un chip: se enmarca en amarillo al llegar y se apaga solo. Sin esto, en una carta de 18 platos no se sabe a cuál bajaste. */ .mitem.is-target{ animation:dishPing 2.4s var(--e); } @keyframes dishPing{ 0%, 55%{ box-shadow:0 0 0 2px var(--yellow), 0 0 34px -4px rgba(245,197,24,.55); background:rgba(245,197,24,.1); } 100%{ box-shadow:0 0 0 2px rgba(245,197,24,0), 0 0 34px -4px rgba(245,197,24,0); background:transparent; } } /* ---------- 10. ENCABEZADOS DE SECCIÓN ---------- */ .shead{ margin-bottom:clamp(1.75rem, 3vw, 2.75rem); max-width:62ch; } .shead--center{ margin-inline:auto; text-align:center; } .shead__kicker{ display:inline-block; font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--yellow); margin-bottom:.9rem; padding-left:2.6rem; position:relative; } /* La regla del rótulo lleva los tres colores. Es el gesto que más veces se repite en la página —hay uno por sección— así que es el que hace el trabajo de que el sitio se lea venezolano sin gritar. */ .shead__kicker::before{ content:''; position:absolute; left:0; top:50%; width:34px; height:3px; background:var(--tricolor); transform:translateY(-50%); transform-origin:left center; } /* Se dibuja de izquierda a derecha cuando el encabezado entra en pantalla. Es el mismo gesto de una brocha y ata la bandera al movimiento de la página, en vez de dejarla como un adorno quieto. Solo se anima si el encabezado participa del reveal: si no, la regla está puesta desde el principio. */ .reveal .shead__kicker::before, .shead__kicker.reveal::before{ transform:translateY(-50%) scaleX(0); transition:transform .75s var(--e) .12s; } .reveal.is-in .shead__kicker::before, .shead__kicker.reveal.is-in::before{ transform:translateY(-50%) scaleX(1); } .reveal .eyebrow__line, .eyebrow.reveal .eyebrow__line{ transform:scaleX(0); transform-origin:left center; transition:transform .7s var(--e) .1s; } .reveal.is-in .eyebrow__line, .eyebrow.reveal.is-in .eyebrow__line{ transform:scaleX(1); } .shead--center .shead__kicker{ padding-left:0; } .shead--center .shead__kicker::before{ display:none; } .shead__title{ font-family:var(--display); font-weight:400; font-size:clamp(1.8rem, 3.9vw, 3.1rem); line-height:.94; letter-spacing:-.01em; text-transform:uppercase; margin-bottom:1rem; } .shead__title em{ font-style:normal; color:var(--yellow); } .shead__desc{ color:var(--muted); font-size:.94rem; max-width:56ch; } .shead--center .shead__desc{ margin-inline:auto; } /* ---------- 11. DESTACADOS ---------- */ .featured{ background:var(--ink); } /* Cuatro tarjetas idénticas en una sola fila. Columnas explícitas (y no auto-fit) para que ningún ancho intermedio deje una tarjeta huérfana colgando sola en la segunda fila. */ .fgrid{ display:grid; gap:.85rem; grid-template-columns:repeat(4, 1fr); align-items:stretch; } /* La rejilla de 4x2 se reparte a propósito para que el tamaño diga lo mismo que la carta: la insignia se lleva cuatro celdas, la segunda hamburguesa dos, y el dog y el bowl una cada uno. Seis de las ocho celdas son hamburguesa. Las cuentas cuadran exactas, así que no quedan huecos. */ .fcard--xl{ grid-column:span 2; grid-row:span 2; } .fcard--wide{ grid-column:span 2; } /* En la grande la foto deja de tener proporción fija y se come todo el alto sobrante: con 4/3 quedaba una franja muerta debajo del botón. */ .fcard--xl .fcard__img{ aspect-ratio:auto; flex:1 1 auto; min-height:260px; } .fcard--wide .fcard__img{ aspect-ratio:16 / 9; } /* El titular de la grande sube de cuerpo: si se queda igual que el de una tarjeta normal, el tamaño de la foto no se lee como jerarquía sino como un descuadre. */ .fcard--xl .fcard__top h3{ font-size:clamp(1.5rem, 2.8vw, 2.2rem); } .fcard--xl .fcard__body{ padding:1.1rem 1.3rem 1.25rem; } .fcard--xl .fcard__body p{ font-size:.9rem; max-width:52ch; } .fcard{ position:relative; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; height:100%; transition:transform .45s var(--e), border-color .35s, box-shadow .45s; } .fcard:hover{ transform:translateY(-6px); border-color:rgba(245,197,24,.45); box-shadow:0 26px 60px -22px rgba(0,0,0,.9); } /* La foto manda su propia altura por relación de aspecto: así todas se recortan igual sin importar el tamaño original del archivo. */ .fcard__img{ position:relative; overflow:hidden; background:var(--ink-3); flex:0 0 auto; aspect-ratio:4 / 3; } .fcard__img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .8s var(--e), filter .5s; filter:saturate(1.05); } .fcard:hover .fcard__img img{ transform:scale(1.07); } .fcard__img::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(11,10,9,.9) 0%, transparent 55%); } .tag{ position:absolute; top:.85rem; left:.85rem; z-index:3; font-family:var(--cond); font-weight:700; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding:.3rem .6rem; border-radius:2px; } .tag--star{ background:var(--yellow); color:var(--ink); display:inline-flex; align-items:center; gap:.3rem; } .tag--insignia{ background:var(--red); color:#fff; } .fcard__body{ padding:.9rem 1rem 1.05rem; position:relative; z-index:2; margin-top:-2.2rem; flex:1 1 auto; display:flex; flex-direction:column; } .fcard__top{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; margin-bottom:.5rem; } .fcard__top h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.1rem, 1.9vw, 1.45rem); letter-spacing:.005em; text-transform:uppercase; line-height:1; } .fcard__top .price{ font-size:1.06rem; color:var(--yellow); flex-shrink:0; } .fcard__body p{ color:var(--muted); font-size:.83rem; line-height:1.5; margin-bottom:.8rem; } /* Descripciones de distinto largo: el botón se empuja al fondo para que todos queden a la misma altura dentro de la fila. */ .fcard__body .btn--ver{ margin-top:auto; } /* --- La tarjeta chica ------------------------------------------------------- El cuerpo de la letra no lo decide el ancho de la PANTALLA sino el de la TARJETA: la misma pantalla de 430 px tiene tarjetas de fila entera y tarjetas de media fila, y solo las segundas van apretadas. Con una consulta por ancho de pantalla había que adivinar el punto de corte —lo probé a 420 y a 430 px ya se salía otra vez—; midiendo la tarjeta, el corte es el que es. El white-space va aparte y siempre: .btn viene con nowrap para que una llamada a la acción no se parta en dos, y en media tarjeta eso no se desbordaba con elegancia, se desbordaba y ya. Acá el rótulo puede partirse, que además es la red para el navegador que no entienda @container. */ .fcard{ container-type:inline-size; } .fcard__body .btn--ver{ white-space:normal; } @container (max-width: 210px){ .fcard__body{ padding:.8rem .75rem .85rem; } .fcard__top{ gap:.4rem; margin-bottom:.4rem; } .fcard__top h3{ font-size:1rem; } .fcard__top .price{ font-size:.95rem; } .fcard__body p{ font-size:.78rem; margin-bottom:.7rem; } .fcard__body .btn--ver{ font-size:.71rem; letter-spacing:.05em; padding:.55rem .4rem; gap:.3rem; } } /* Y en la tarjeta de un teléfono de 360, que baja de 160 px, la flecha es lo que hace que el rótulo no entre de un renglón. Se va ella: el botón sigue diciendo a dónde lleva, y dos renglones en una llamada a la acción del tamaño de un sello se leen como un descuadre. */ @container (max-width: 170px){ .fcard__body .btn--ver .ico--fin{ display:none; } } /* ---------- 12. MENÚ ---------- */ .menu{ background:var(--ink-2); border-block:1px solid var(--line); } .menu::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.45; background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%); } .menu > .wrap{ position:relative; z-index:1; } .tabs{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-bottom:clamp(1.4rem, 2.5vw, 2.2rem); } .tab{ font-family:var(--cond); font-weight:700; font-size:.83rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:.48rem .95rem; border:1.5px solid var(--line); border-radius:var(--r); transition:all .25s var(--e); } .tab:hover{ color:var(--cream); border-color:var(--muted-2); } .tab.is-active{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); } /* --- Pistas de deslizamiento ------------------------------------------------ Una tira que se corta puede leerse como "hay más" o como un error de maquetación. El fundido en el canto lo deja claro, y solo aparece del lado que todavía tiene contenido: si ya llegaste al final, el canto se ve limpio. Las clases las pone initTiras() escuchando el scroll de la propia tira. --- */ .tira--desliza{ --corte-l:0px; --corte-r:0px; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--corte-l), #000 calc(100% - var(--corte-r)), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 var(--corte-l), #000 calc(100% - var(--corte-r)), transparent 100%); transition:none; } .tira--desliza.tira--izq{ --corte-l:2.2rem; } .tira--desliza.tira--der{ --corte-r:2.2rem; } .menu__root{ display:flex; flex-direction:column; gap:clamp(1.75rem, 3vw, 3rem); } .mcat{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem, 3vw, 2.6rem); } .mcat[hidden]{ display:none; } /* etiqueta vertical (firma del menú impreso) */ .mcat__label{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--display); font-weight:400; font-size:clamp(1.15rem, 2.2vw, 1.9rem); line-height:.9; letter-spacing:.01em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1.6px rgba(245,239,230,.28); align-self:start; position:sticky; top:110px; transition:-webkit-text-stroke-color .4s; user-select:none; } .mcat--burgers .mcat__label{ -webkit-text-stroke-color:rgba(224,35,28,.6); } .mcat--especiales .mcat__label{ -webkit-text-stroke-color:rgba(245,197,24,.55); } .mcat--dogs .mcat__label{ -webkit-text-stroke-color:rgba(245,239,230,.3); } .mcat--bowls .mcat__label{ -webkit-text-stroke-color:rgba(245,197,24,.45); } .mcat__items{ display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:.55rem; align-content:start; } .mitem{ position:relative; background:rgba(255,255,255,.018); border:1px solid var(--line-2); border-left:3px solid transparent; border-radius:var(--r); padding:.8rem .9rem; display:flex; flex-direction:column; gap:.3rem; transition:background .3s, border-color .3s, transform .3s var(--e); } .mitem:hover{ background:rgba(255,255,255,.045); border-left-color:var(--yellow); transform:translateX(3px); } .mitem--hot{ background:rgba(245,197,24,.07); border-color:rgba(245,197,24,.24); } .mitem--hot:hover{ background:rgba(245,197,24,.12); } /* Miniatura del plato. No todos los platos tienen foto, así que la variante es opcional: sin ella el renglón se queda como estaba —nombre, puntos y precio— y con ella el bloque pasa a dos columnas, con la foto a la izquierda ocupando el alto entero. Las tres partes del renglón (cabeza, descripción y pie) caen solas en la segunda columna. */ .mitem--foto{ display:grid; grid-template-columns:96px minmax(0, 1fr); gap:.3rem .9rem; align-items:start; } .mitem--foto > :not(.mitem__pic){ grid-column:2; } .mitem__pic{ grid-column:1; grid-row:1 / span 3; align-self:center; width:96px; height:96px; object-fit:cover; border-radius:calc(var(--r) - 5px); border:1px solid var(--line-2); background:var(--ink-3); transition:transform .4s var(--e); } .mitem:hover .mitem__pic{ transform:scale(1.04); } .mitem__head{ display:flex; align-items:baseline; gap:.6rem; } .mitem__name{ font-family:var(--cond); font-weight:700; font-size:1.02rem; letter-spacing:.045em; text-transform:uppercase; line-height:1.15; } .mitem__dots{ flex:1; border-bottom:1.5px dotted var(--muted-2); opacity:.55; transform:translateY(-4px); min-width:14px; } .mitem__price{ font-size:.95rem; color:var(--yellow); flex-shrink:0; } .mitem__desc{ font-size:.79rem; color:var(--muted); line-height:1.45; } /* wrap: con la miniatura al lado la columna de texto se angosta, y en telefono el trio favorito + insignia + boton se salia de la tarjeta. */ .mitem__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.35rem; } .mitem__star{ display:inline-flex; align-items:center; gap:.28rem; font-size:.66rem; font-family:var(--cond); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); border:1px solid rgba(245,197,24,.35); border-radius:2px; padding:.14rem .42rem; } .mitem__insignia{ font-size:.66rem; font-family:var(--cond); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--red); border-radius:2px; padding:.16rem .44rem; } .mitem__btn{ margin-left:auto; display:inline-flex; align-items:center; gap:.3rem; font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); background:var(--yellow); border-radius:2px; padding:.4rem .75rem; transition:background .22s, transform .22s var(--e); } .mitem__btn:hover{ background:var(--yellow-2); transform:scale(1.05); } .mitem__btn.added{ background:var(--wa); color:#04220F; } /* agranda tu pedido */ .upsize{ margin-top:clamp(1.75rem, 3vw, 2.75rem); background:linear-gradient(100deg, var(--red-deep), var(--red) 62%, #FF4A3D); border-radius:var(--r); padding:clamp(1.15rem, 2.4vw, 1.75rem); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; position:relative; overflow:hidden; } .upsize::before{ content:''; position:absolute; inset:0; opacity:.13; background-image:repeating-linear-gradient(-45deg, #000 0 12px, transparent 12px 24px); } .upsize__left{ position:relative; z-index:1; max-width:44ch; } .upsize__kicker{ display:block; font-family:var(--cond); font-weight:700; font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:var(--yellow); margin-bottom:.45rem; } .upsize__left h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.2rem, 2.3vw, 1.75rem); text-transform:uppercase; line-height:1; color:#fff; margin-bottom:.5rem; } .upsize__left p{ color:rgba(255,255,255,.86); font-size:.92rem; } .upsize__opts{ display:flex; gap:.75rem; position:relative; z-index:1; flex-wrap:wrap; } .upsize__opt{ background:rgba(11,10,9,.7); backdrop-filter:blur(6px); border:1.5px solid rgba(255,255,255,.16); border-radius:var(--r); padding:1rem 1.3rem; text-align:center; min-width:132px; transition:transform .3s var(--e), border-color .3s; } .upsize__opt:hover{ transform:translateY(-4px); border-color:var(--yellow); } .upsize__ico{ display:block; font-size:2.1rem; margin-bottom:.3rem; color:var(--yellow); line-height:1; } .upsize__ico .ico{ stroke-width:1.5; } .upsize__opt b{ display:block; font-family:var(--cond); font-weight:700; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.25rem; } .upsize__opt .price{ font-size:1.45rem; color:var(--yellow); } .upsize__opt--xl{ border-color:rgba(245,197,24,.45); } .menu__note{ text-align:center; margin-top:2rem; color:var(--muted-2); font-size:.86rem; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; align-items:center; } /* ---------- 12b. PUERTA AL MENÚ (index.html) ---------- La carta completa vive en menu.html. En la portada queda solo la entrada: qué categorías hay, desde cuánto, y que el domicilio se pide desde ahí. Hereda el fondo y la trama de .menu para que siga leyéndose como "la zona del menú" y el salto a la otra página no se sienta como otro sitio. */ .menucta{ background:var(--ink-2); border-block:1px solid var(--line); } .menucta::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.45; background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%); } .menucta > .wrap{ position:relative; z-index:1; } .menucta__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.7rem; } .mcard{ display:flex; flex-direction:column; gap:.3rem; background:rgba(255,255,255,.022); border:1px solid var(--line-2); border-top:3px solid transparent; border-radius:var(--r); padding:1.2rem 1.1rem 1rem; transition:background .3s, border-color .3s, transform .3s var(--e); } .mcard{ position:relative; } /* El filo superior es la bandera, no una línea amarilla: entra de izquierda a derecha al pasar por encima. El borde de 3px que ya existía sigue ahí reservando el sitio, así que la tarjeta no salta de alto. */ .mcard::before{ content:''; position:absolute; left:0; right:0; top:-3px; height:3px; background:var(--tricolor); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--e); } .mcard:hover::before{ transform:scaleX(1); } .mcard:hover{ background:rgba(255,255,255,.05); transform:translateY(-4px); } .mcard__ico{ color:var(--yellow); font-size:1.95rem; line-height:1; margin-bottom:.35rem; } .mcard__ico .ico{ stroke-width:1.5; } .mcard h3{ font-family:var(--cond); font-weight:700; font-size:1.16rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.1; } .mcard__meta{ font-size:.8rem; color:var(--muted); } .mcard__meta .price{ color:var(--yellow); font-size:.86rem; } /* Las dos de hamburguesa se llevan la fila de arriba entera y llevan el amarillo puesto, no solo al pasar por encima: son la mitad de la carta y lo que la gente viene a buscar. */ .mcard--destacada{ grid-column:span 2; background:linear-gradient(150deg, rgba(245,197,24,.1), rgba(245,197,24,.02) 60%); border-color:rgba(245,197,24,.24); } /* Las destacadas llevan la bandera puesta desde el principio. */ .mcard--destacada::before{ transform:scaleX(1); } .mcard--destacada:hover{ background:linear-gradient(150deg, rgba(245,197,24,.16), rgba(245,197,24,.04) 60%); } .mcard--destacada .mcard__ico{ font-size:2.4rem; } .mcard--destacada h3{ font-size:1.5rem; } .mcard--destacada .mcard__meta{ font-size:.88rem; color:var(--cream); } .mcard--destacada .mcard__go{ color:var(--yellow); } /* la insignia de la casa: un sello chico, no otro botón */ .mcard__tag{ align-self:flex-start; margin-top:.45rem; font-family:var(--cond); font-weight:700; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; background:var(--red); color:#fff; padding:.24rem .55rem; border-radius:2px; } /* al fondo de la tarjeta: si un "N platos · desde $X" se parte en dos renglones, los "Ver →" de la fila siguen alineados entre sí */ .mcard__go{ margin-top:auto; padding-top:.75rem; display:inline-flex; align-items:center; gap:.35rem; font-family:var(--cond); font-weight:700; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); transition:color .25s, gap .25s var(--e); } .mcard__go .ico{ width:15px; height:15px; } .mcard:hover .mcard__go{ color:var(--yellow); gap:.62rem; } .menucta__panel{ margin-top:clamp(1.1rem, 2.4vw, 1.75rem); position:relative; overflow:hidden; background:var(--ink-3); border:1px solid var(--line); border-left:3px solid var(--yellow); border-radius:var(--r); padding:clamp(1.15rem, 2.4vw, 1.75rem); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; } .menucta__panel::before{ content:''; position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:min(420px, 60%); aspect-ratio:1; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(245,197,24,.15), transparent 65%); } .menucta__copy{ position:relative; z-index:1; max-width:54ch; } .menucta__kicker{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--cond); font-weight:700; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); margin-bottom:.5rem; } .menucta__kicker .ico{ width:18px; height:18px; } .menucta__copy h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.4rem, 2.8vw, 2.1rem); line-height:.95; text-transform:uppercase; margin-bottom:.55rem; } .menucta__copy p{ color:var(--muted); font-size:.93rem; } .menucta__actions{ display:flex; flex-wrap:wrap; gap:.7rem; position:relative; z-index:1; flex-shrink:0; } /* ---------- 12c. CABECERA DE LA CARTA (menu.html) ---------- Una banda, no una portada. Acá había un .mhero de pantalla completa con foto y dos botones —uno de ellos para bajar hasta la carta que estaba justo debajo—: media pantalla de scroll para llegar a lo único que esta página tiene que enseñar. Quien entra al menú ya decidió comer acá; no hay nada que venderle, hay que enseñarle los platos. Queda lo que sí hace falta: de qué página se trata (el h1, que también es el título para el buscador) y las tres cosas que hay que saber ANTES de armarse un pedido de $80.000 —que hay domicilio, que se puede recoger y hasta qué hora—. En pantalla ancha esas tres van al lado del título y no debajo, que es lo que mantiene la banda en una sola altura de vistazo. El .mhero de abajo no se toca: reservar.html lo sigue usando. */ .mtop{ padding-block:clamp(1.5rem, 3vw, 2.4rem); border-bottom:1px solid var(--line); background: radial-gradient(120% 140% at 12% 0%, rgba(245,197,24,.07), transparent 62%), var(--ink); } .mtop .crumb{ margin-bottom:.9rem; } .mtop__row{ display:grid; gap:clamp(1rem, 2.6vw, 2rem); align-items:center; grid-template-columns:minmax(0, 1fr); } @media (min-width:900px){ .mtop__row{ grid-template-columns:minmax(0, 1fr) auto; } } .mtop__id{ min-width:0; } .mtop .eyebrow{ margin-bottom:.5rem; } .mtop__title{ font-family:var(--headline); font-weight:800; font-size:clamp(1.75rem, 4.2vw, 2.7rem); line-height:1; letter-spacing:-.02em; text-transform:uppercase; margin-bottom:.55rem; } /* El nombre de la marca sigue a pincel: es medio segundo de personalidad y no cuesta una línea más, porque va en el mismo renglón del título. */ .mtop__title i{ font-family:var(--brush); font-weight:400; font-style:normal; font-size:1.15em; text-transform:none; letter-spacing:0; color:var(--yellow); } .mtop__sub{ color:var(--muted); font-size:.92rem; line-height:1.6; max-width:56ch; } .mtop__sub strong{ color:var(--cream); font-weight:600; } .mtop__sub a{ color:var(--yellow); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; transition:color .25s; } .mtop__sub a:hover{ color:var(--cream); } /* Sin icono. Una moto, una tienda y un reloj amarillos apilados pesaban más que las tres palabras que tenían al lado, y ninguno decía nada que "Domicilio", "Recoger" y la hora no dijeran ya. Queda el dato pelado, que es lo que se venía a leer. */ .mtop__facts{ display:flex; flex-wrap:wrap; gap:.5rem; } .mtop__facts li{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:.5rem .85rem; } .mtop__facts b{ display:block; font-family:var(--cond); font-weight:700; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; color:var(--yellow); } .mtop__facts li > span{ display:block; font-size:.72rem; color:var(--muted); line-height:1.3; } /* En pantalla ancha la columna de la derecha es una pila de tres y no una fila: al lado del título, tres cajas en línea no caben sin apretar. */ @media (min-width:900px){ .mtop__facts{ flex-direction:column; gap:.45rem; min-width:14rem; } } /* La carta arranca enseguida: sin encabezado de sección propio, el aire de arriba puede ser el de una continuación y no el de una sección nueva. */ .menu--directo{ padding-top:clamp(1.5rem, 3vw, 2.4rem); } /* ---------- 12d. CABECERA DE LA RESERVA (reservar.html) ---------- La misma banda con foto que tenía el menú, que allá sí gana: la reserva es una decisión que se toma con la imagen del salón delante. */ .mhero{ position:relative; overflow:hidden; padding-block:clamp(2.4rem, 5.5vw, 4.5rem); border-bottom:1px solid var(--line); } .mhero__bg{ position:absolute; inset:0; z-index:0; } .mhero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; scale:1.08; translate:0 var(--par, 0px); filter:saturate(.85) contrast(1.06); } .mhero__scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(100deg, var(--ink) 0%, rgba(11,10,9,.94) 40%, rgba(11,10,9,.6) 72%, rgba(11,10,9,.78) 100%), linear-gradient(to bottom, rgba(11,10,9,.72), transparent 38%, rgba(11,10,9,.92)); } .mhero__inner{ position:relative; z-index:2; } .crumb{ display:flex; align-items:center; gap:.5rem; margin-bottom:1.25rem; font-family:var(--cond); font-weight:600; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); } .crumb a{ color:var(--muted); transition:color .25s; } .crumb a:hover{ color:var(--yellow); } .crumb b{ color:var(--cream); font-weight:600; } .mhero__title{ font-family:var(--headline); font-weight:800; font-size:clamp(2rem, 5.6vw, 3.3rem); line-height:.98; letter-spacing:-.02em; text-transform:uppercase; margin-bottom:1rem; text-shadow:0 2px 20px rgba(0,0,0,.7); } .mhero__title span{ display:block; } .mhero__brush{ font-family:var(--brush); font-weight:400; font-size:1.18em; text-transform:none; letter-spacing:0; color:var(--yellow); line-height:1.1; margin-top:-.04em; } .mhero__brush i{ font-style:normal; } .mhero__sub{ color:var(--muted); font-size:clamp(.95rem, 1.6vw, 1.05rem); max-width:58ch; margin-bottom:1.5rem; text-shadow:0 2px 16px rgba(0,0,0,.65); } .mhero__sub strong{ color:var(--cream); font-weight:600; } /* icono a la izquierda, título y detalle apilados a la derecha */ .mhero__facts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.6rem; } .mhero__facts li{ display:grid; column-gap:.65rem; align-items:center; grid-template-columns:auto 1fr; grid-template-areas:"ico titulo" "ico detalle"; background:rgba(11,10,9,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--r); padding:.6rem .95rem; } .mhero__ico{ grid-area:ico; display:flex; color:var(--yellow); font-size:1.35rem; } .mhero__ico .ico{ stroke-width:1.7; } .mhero__facts b{ grid-area:titulo; font-family:var(--cond); font-weight:700; font-size:.92rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; } .mhero__facts li > span:last-child{ grid-area:detalle; font-size:.74rem; color:var(--muted); line-height:1.3; } .mhero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; } /* ---------- 12e. CÓMO PEDIR A DOMICILIO (menu.html) ---------- */ .howto{ background:var(--ink); } .steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.85rem; } .step{ position:relative; overflow:hidden; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem 1.25rem 1.35rem; display:flex; flex-direction:column; gap:.45rem; transition:transform .3s var(--e), border-color .3s, background .3s; } .step:hover{ transform:translateY(-4px); border-color:rgba(245,197,24,.4); background:var(--ink-3); } .step__num{ position:absolute; top:.35rem; right:.95rem; pointer-events:none; user-select:none; font-family:var(--display); font-weight:400; font-size:3.6rem; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(245,197,24,.28); } .step__ico{ color:var(--yellow); font-size:1.9rem; line-height:1; margin-bottom:.2rem; } .step__ico .ico{ stroke-width:1.5; } .step h3{ font-family:var(--cond); font-weight:700; font-size:1.14rem; letter-spacing:.05em; text-transform:uppercase; line-height:1.15; } .step p{ color:var(--muted); font-size:.86rem; line-height:1.5; } .step strong{ color:var(--cream); font-weight:600; } .howto .soon{ margin-top:clamp(1.1rem, 2.4vw, 1.6rem); } .howto__cards{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.85rem; margin-top:.85rem; } /* ---------- 13. GALERÍA ---------- */ .gallery{ background:var(--ink); } .ggrid{ display:grid; gap:16px; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:220px; } .gitem{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--ink-3); cursor:zoom-in; border:1px solid var(--line-2); } /* Bento de 3 columnas. Cada pieza va con fila y columna explícitas, no con span: con span, el auto-placement dejaba libre la celda inferior derecha (6 fotos contra 12 celdas) y ahí salía el hueco. Así la grilla queda exacta —2+1+1+1+1+6 = 12 celdas— y el borde inferior sale a ras. La banda de abajo se lleva "la mesa completa", que es la toma más ancha, y ocupa dos filas: a una sola quedaba un recorte de 5:1, casi un friso. */ .gitem--a{ grid-column:1; grid-row:1 / span 2; } .gitem--b{ grid-column:2; grid-row:1; } .gitem--c{ grid-column:3; grid-row:1; } .gitem--d{ grid-column:2; grid-row:2; } .gitem--f{ grid-column:3; grid-row:2; } .gitem--e{ grid-column:1 / -1; grid-row:3 / span 2; } /* La foto se mueve más despacio que la página: --par se lo escribe el bucle de scroll, frame a frame. Van en las propiedades sueltas `scale` y `translate` y no en un `transform` con las dos cosas adentro a propósito: la transición es SOLO del zoom. Si el paralaje entrara en la misma declaración, heredaría esa transición de .9s y la foto iría siempre nueve décimas por detrás del dedo. El zoom base es lo que da margen para moverse sin descubrir el borde. */ .gitem img{ width:100%; height:100%; object-fit:cover; scale:var(--zoom, 1.08); translate:0 var(--par, 0px); transition:scale .9s var(--e), filter .5s; filter:saturate(.92) contrast(1.03); } .gitem:hover img{ --zoom:1.14; filter:saturate(1.15) contrast(1.06); } .gitem::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(11,10,9,.88), transparent 52%); opacity:.85; transition:opacity .4s; } .gitem:hover::after{ opacity:.6; } .gitem figcaption{ position:absolute; left:0; bottom:0; z-index:2; padding:.85rem 1rem; font-family:var(--cond); font-weight:700; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); transform:translateY(4px); opacity:.9; transition:transform .4s var(--e), opacity .3s; } .gitem:hover figcaption{ transform:translateY(0); opacity:1; color:var(--yellow); } /* ---------- 14. NOSOTROS ---------- Dos columnas: el equipo a la izquierda y todo el texto a la derecha. El celular es la pieza más alta de la fila, así que manda el alto de la sección: por eso su ancho lleva tope contra el viewport (ver .phone) y la columna de texto se centra contra él. */ .about{ background:var(--ink-2); border-block:1px solid var(--line); position:relative; } /* La columna de texto se tapa en 640px (por encima, los renglones pasan de 80 caracteres) y el par se centra en la fila: así no queda un hueco muerto a la derecha en pantallas anchas. */ .about__grid{ display:grid; grid-template-columns:auto minmax(0, 640px); justify-content:center; gap:clamp(1.5rem, 4.5vw, 4rem); align-items:center; } .about__video{ position:relative; display:flex; justify-content:center; } /* ---------- 14b. MOCKUP iPHONE 17 PRO ---------- Todo se deriva de --phone-w para poder escalarlo en un solo sitio. Las proporciones salen del equipo real: pantalla 9:19.5, isla al 32% del ancho y radio de esquina ~15,5%. */ .phone{ /* El alto sale del ancho (9:19.5), así que un ancho suelto se desborda de la pantalla enseguida: a 360px el equipo mide 780px de alto. Por eso el ancho va acotado también contra la altura del viewport — 36vh equivale a ~78vh de mockup — y la sección entra completa sin pisar el header. */ --phone-w:min(clamp(280px, 22vw, 360px), 36vh); --phone-r:calc(var(--phone-w) * .155); --phone-pad:calc(var(--phone-w) * .033); /* grosor de los botones laterales: a este tamaño 2px fijos se perdían */ --phone-btn:max(2px, calc(var(--phone-w) * .0072)); position:relative; width:var(--phone-w); flex:none; padding:var(--phone-pad); border-radius:var(--phone-r); /* riel de titanio: el degradado imita el reflejo del canto pulido */ background: linear-gradient(160deg, #6d6a64 0%, #2a2825 16%, #57534c 34%, #1c1a18 52%, #4c4842 70%, #232120 86%, #6a6760 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.16), 0 56px 110px -38px rgba(0,0,0,.95), 0 18px 44px -22px rgba(0,0,0,.82); } /* halo cálido detrás del equipo, reemplaza al marco amarillo anterior. Va en el contenedor y no en .phone: un ::after con z-index negativo se pinta encima del fondo del propio elemento, no detrás. */ .about__video::before{ content:''; position:absolute; z-index:0; left:50%; top:8%; width:min(150%, 520px); height:86%; transform:translateX(-50%); background:radial-gradient(ellipse at center, rgba(240,185,26,.17), transparent 66%); filter:blur(22px); pointer-events:none; } .about__video .phone{ z-index:1; } /* Botones laterales. El del lado izquierdo se repite con box-shadow (acción + volumen) para no meter tres elementos vacíos más. */ .phone__side{ position:absolute; width:var(--phone-btn); border-radius:2px; background:linear-gradient(90deg, #7d7972, #35322e); } .phone__side--l{ left:calc(var(--phone-btn) * -1); top:19%; height:5.5%; } .phone__side--l::before, .phone__side--l::after{ content:''; position:absolute; left:0; width:100%; border-radius:2px; background:inherit; } .phone__side--l::before{ top:210%; height:170%; } .phone__side--l::after{ top:420%; height:170%; } .phone__side--r{ right:calc(var(--phone-btn) * -1); top:27%; height:11%; } .phone__screen{ position:relative; overflow:hidden; border-radius:calc(var(--phone-r) - var(--phone-pad)); aspect-ratio:9/19.5; background:#000; box-shadow:inset 0 0 0 1px rgba(0,0,0,.9); } .phone__screen video{ width:100%; height:100%; object-fit:cover; display:block; } .phone__island{ position:absolute; top:2.6%; left:50%; transform:translateX(-50%); width:32%; height:calc(var(--phone-w) * .092); background:#000; border-radius:100px; z-index:3; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } /* lente frontal dentro de la isla */ .phone__island::after{ content:''; position:absolute; right:16%; top:50%; transform:translateY(-50%); width:26%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 34% 30%, #24304a 0%, #0b0d14 60%, #000 100%); } .phone__home{ position:absolute; bottom:1.1%; left:50%; transform:translateX(-50%); width:34%; height:clamp(3px, calc(var(--phone-w) * .011), 4.5px); border-radius:5px; background:rgba(255,255,255,.75); z-index:4; pointer-events:none; } .about__vlabel{ position:absolute; top:calc(var(--phone-w) * .155); left:0; z-index:4; background:var(--yellow); color:var(--ink); font-family:var(--cond); font-weight:700; font-size:clamp(.62rem, calc(var(--phone-w) * .032), .8rem); letter-spacing:.12em; text-transform:uppercase; padding:.3rem .56rem .3rem .62rem; border-radius:0 2px 2px 0; pointer-events:none; } /* Controles propios: los nativos de