/* ═══════════════════════════════════════════════════════════════════════════════════════ PALMETTO — molde de taller. Mundo: el rotulero de carretera de Florida. ⛔ NADA DE CAJAS. El tipo va SOBRE la pelicula. La version de paneles de cristal la mato Alex entera ("esto es una mierda") y tenia razon: eran seis losas apiladas que tapaban justo lo que se habia pagado por generar. La referencia es `ascenta-parfum`, que lo lleva escrito en su propio CSS: *scenes: transparent (the film shows through)* y *reveal primitives (mask lines + rise) — no boxes*. ⭐ ENTONCES, ¿QUE SOSTIENE EL TEXTO? Un ETALONAJE fijo y direccional (`.grado`): oscurece la banda izquierda, que es donde vive toda la copy, y deja limpia la derecha, que es donde vive la imagen. Es lo que hace un director de fotografia para meter un titulo en un plano. Se mide, como todo lo demas. ⭐ TODA LA TIPOGRAFIA SALE DE UN SOLO FICHERO, por sus dos ejes: el NOMBRE → wdth 118 · wght 800 letra de rotulo, pintada a pincel los TITULOS → wdth 108 · wght 400 ligeros y grandes: lo que lee moderno las ETIQUETAS → wdth 62 · wght 500 · 0,4em apretadas, de plantilla Lo que hacia viejo el diseno anterior no era el color: era TODO a peso 800. ⛔ Sin `scroll-behavior: smooth` y sin Lenis: `film.js` ya suaviza el scrub por tiempo, y encadenar dos suavizados da arrastre gomoso. ═══════════════════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Archivo'; src: url('../fonts/archivo-var.woff2') format('woff2-variations'); font-weight: 400 800; font-stretch: 62% 125%; /* Ley 10 · CLS 0: `optional` no reflowea nunca. */ font-display: optional; } :root { --esmalte: #080706; --bone: #efe9dd; /* subido desde #e6ded0: sin caja debajo hace falta mas blanco */ --bone-medio: #d2c9b8; /* subido de #c4bba9: el texto secundario fallaba a 2,76:1 */ --oro: #e9b75e; --oro-hi: #f6d89a; --linea: rgba(239, 233, 221, 0.16); --paso: clamp(1.4rem, 1rem + 3.4vw, 6rem); --expo: cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { background: var(--esmalte); -webkit-text-size-adjust: 100%; } body { background: var(--esmalte); color: var(--bone); font-family: 'Archivo', system-ui, sans-serif; font-variation-settings: 'wdth' 100, 'wght' 400; font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.18rem); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ::selection { background: var(--oro); color: var(--esmalte); } :focus-visible { outline: 2px solid var(--oro); outline-offset: 5px; } html { scrollbar-color: rgba(233, 183, 94, 0.5) var(--esmalte); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--esmalte); } ::-webkit-scrollbar-thumb { background: rgba(233, 183, 94, 0.5); } /* Modo grabacion (`?grabar=1`, ver el ``): puesta como ventana-app a media pantalla, la barra de scroll es lo unico que queda que delate un navegador. */ html.grabar { scrollbar-width: none; } html.grabar::-webkit-scrollbar { width: 0; height: 0; } .saltar { position: fixed; left: -9999px; top: 0; z-index: 90; background: var(--esmalte); color: var(--bone); padding: 0.9rem 1.3rem; } .saltar:focus { left: 0; } /* ══ LA PELICULA ═══════════════════════════════════════════════════════════════════════ */ #film { position: fixed; inset: 0; width: 100%; /* ⛔ `100lvh`, no `100%`: en movil la barra de URL anima el viewport de layout y una caja al 100% estira el backing store a media animacion — se ve la pelicula estrecharse. El viewport LARGE es constante, asi que el lienzo no cambia mientras la barra se desliza. */ height: 100lvh; display: block; z-index: 0; background: var(--esmalte); pointer-events: none; } .film-alt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── El etalonaje: lo unico que sostiene la legibilidad ────────────────────────────── Direccional a proposito. Oscurece la izquierda (la copy) y deja la derecha para la imagen — el motor no se tapa, se enmarca. Y una elevacion por abajo, que es el canto donde el ojo pierde el texto. */ .grado { position: fixed; inset: 0; z-index: 1; pointer-events: none; /* ⛔ ESTAS PARADAS SALEN DE UN CALCULO, NO DE MIRAR CAPTURAS. Afinarlas contra capturas es perseguirse la cola: cada cambio de altura de la pagina hace que el muestreo caiga en otros fotogramas y aparecen fallos nuevos donde antes no los habia — me paso tres rondas. El calculo (`calcula_grado.py`, sobre los 388 fotogramas, p90 por banda vertical): la bobina llega a sRGB ~253, casi blanco, en PRACTICAMENTE TODAS las bandas — son los brillos del metal mojado. La opacidad minima para que el texto pase su umbral es: bone #EFE9DD pequeno (4,5:1) → 0,59 grande (3:1) → 0,48 bone-medio pequeno (4,5:1) → 0,68 oro pequeno (4,5:1) → 0,71 Y donde vive cada cosa: el texto apagado no pasa del 44% del ancho, el bone pequeno del 48%, y el rotulo grande llega al 63%. ⭐ Lo interesante: el resultado es un etalonaje MAS PLANO Y MAS ANCHO, no mas oscuro. El 0,96 que tenia en el borde izquierdo era gratis — sobra con 0,82 — asi que la version medida deja ver MAS pelicula en el canto izquierdo que la version que hice a ojo. */ background: linear-gradient(97deg, rgba(6, 5, 4, 0.82) 0%, rgba(6, 5, 4, 0.80) 34%, rgba(6, 5, 4, 0.74) 48%, rgba(6, 5, 4, 0.52) 62%, rgba(6, 5, 4, 0.18) 74%, transparent 84%), linear-gradient(0deg, rgba(6, 5, 4, 0.62), transparent 26%); } /* ── Filete de progreso: la bobina que queda ────────────────────────────────────────── */ .progreso { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 50; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(233, 183, 94, 0.35), var(--oro-hi)); } /* ══ LA CHAPA fija ═════════════════════════════════════════════════════════════════════ ⛔ Es lo UNICO de la web que lleva desenfoque, y por eso se apaga en tactil: un `backdrop-filter` en un elemento FIJO sobre un canvas que repinta obliga a iOS a rehacer el desenfoque de esa franja 60 veces por segundo, todo el rato. Un tinte mas hondo lee igual; el desenfoque solo se echa de menos con el fotograma quieto. */ .chapa { position: fixed; top: clamp(1rem, 2.4vh, 1.6rem); left: 50%; transform: translateX(-50%); z-index: 46; display: flex; align-items: center; gap: clamp(0.7rem, 1.6vw, 1.3rem); max-width: calc(100vw - 1.6rem); padding: 0.5rem 0.5rem 0.5rem 1.3rem; background: rgba(10, 8, 7, 0.5); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--linea); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .chapa-nombre { font-variation-settings: 'wdth' 112, 'wght' 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; } .chapa-punto { width: 3px; height: 3px; background: var(--oro); flex: none; } .chapa-nav { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.5rem); list-style: none; } .chapa-nav a { font-variation-settings: 'wdth' 66, 'wght' 500; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone-medio); white-space: nowrap; transition: color 280ms; } .chapa-nav a:hover { color: var(--bone); } /* Por debajo de esto la chapa se queda con el nombre y el telefono: los enlaces se apilarian o desbordarian, y en una pagina de una sola pantalla por seccion el scroll ya navega. */ @media (max-width: 1080px) { .chapa-nav, .chapa-punto { display: none; } } .chapa-tel { padding: 0.55rem 1.1rem; background: var(--oro); color: var(--esmalte); font-variation-settings: 'wdth' 100, 'wght' 700; font-size: 0.72rem; letter-spacing: 0.06em; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color 320ms var(--expo); } .chapa-tel:hover { background: var(--oro-hi); } /* ══ LAS ESCENAS — transparentes, el film se ve a traves ═══════════════════════════════ */ main { position: relative; z-index: 2; } .escena { position: relative; min-height: 100svh; display: flex; align-items: center; /* El relleno vertical no es decorativo: sin el, una escena mas alta que la ventana (los 8 servicios en un portatil) desborda por arriba y por abajo a la vez, y se pierde la cejilla. Con relleno, la escena crece en vez de recortarse. */ padding: clamp(5rem, 12vh, 8rem) var(--paso); } .col { width: min(40rem, 88vw); } .col-ancha { width: min(52rem, 88vw); } /* El filete del rotulista: 58 px de oro y nada mas. Es toda la decoracion que hay. */ .filete { display: block; width: 58px; height: 1px; background: var(--oro); margin-bottom: 1.6rem; } /* ── Tipografia compartida ─────────────────────────────────────────────────────────── */ /* La sombra de titulo de cine. Un rotulo sobre imagen SIEMPRE la lleva: no se ve como sombra, se ve como que la letra esta delante. Es margen de seguridad por encima del etalonaje, no el arreglo — el arreglo es que el fondo ya pase medido sin ella. */ .col :is(h1, h2, p, li, a, span, ul) { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.72); } .filete { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); } .cejilla { font-variation-settings: 'wdth' 62, 'wght' 500; font-size: 0.64rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--oro); margin-bottom: 1.3rem; } .display { /* ⭐ PESO 400, NO 800. Grande y ligero es lo que lee moderno; grande y negro lee a folleto de taller. El nombre del negocio si va pesado — ese es el rotulo. */ font-variation-settings: 'wdth' 108, 'wght' 400; font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1.06; letter-spacing: -0.02em; } .display em { font-style: normal; color: var(--oro); font-variation-settings: 'wdth' 108, 'wght' 700; } .display .oro { color: var(--oro); } .cuerpo { margin-top: 1.5rem; max-width: 34em; color: var(--bone-medio); font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem); } /* ── Apariciones: LINEAS QUE SUBEN DETRAS DE SU MASCARA ──────────────────────────────── Es la primitiva de la del perfume y es la diferencia entre "moderno" y "plantilla": el texto no se desvanece, ENTRA — cada linea sube desde detras de su propio canto. ⛔ Solo con `.js` (ver el ``): sin JS no puede quedar texto escondido. */ /* ⛔ `overflow: hidden` recorta en LOS DOS EJES. Dos consecuencias que ya han mordido: · la linea no puede ser mas ancha que su columna o se come letras — el rotulo salio "PALMET" porque el nombre a 180 px de cuerpo mide mas que los 40rem de `.col`. · y se lleva por delante los descendentes de la ultima linea. El relleno de abajo les da sitio y el margen negativo lo descuenta, asi que la maqueta no se mueve. */ .ln { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; } /* ⛔ `nowrap` es OBLIGATORIO, no un detalle de maqueta: si la linea rompe dentro de su mascara, la segunda mitad se queda escondida para siempre. Aqui es imposible que rompa, y por debajo de 700 px el recorte se apaga entero. */ .ln > i { white-space: nowrap; } .js .ln > i { display: block; font-style: inherit; transform: translateY(112%); transition: transform 1.15s var(--expo) var(--d, 0s); } .js .dentro .ln > i { transform: none; } .js .rise { opacity: 0; transform: translateY(18px); transition: opacity 1s ease var(--d, 0.06s), transform 1.1s var(--expo) var(--d, 0.06s); } .js .dentro .rise { opacity: 1; transform: none; } /* Las etiquetas del rotulo aparecen al cargar y se van EN CUANTO scrolleas: una pista de scroll que sigue ahi cuando ya has scrolleado es ruido. */ .js .hint { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--expo) var(--d, 0.6s), transform 1s var(--expo) var(--d, 0.6s); } .js .dentro .hint { opacity: 1; transform: none; } .js .movida .hint { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.45s ease, transform 0.45s ease; } /* ── El rotulo ─────────────────────────────────────────────────────────────────────── */ /* El nombre necesita su propia columna: es el elemento mas ancho de la web con diferencia y no cabe en la medida de lectura del resto. */ .rotulo .col { width: min(76rem, 92vw); } .rotulo .nombre { font-variation-settings: 'wdth' 118, 'wght' 800; font-size: clamp(3rem, 9.4vw, 8.4rem); line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; } .rotulo .nombre .oro { font-variation-settings: 'wdth' 86, 'wght' 700; font-size: 0.54em; letter-spacing: 0.01em; } .entrada { margin-top: 1.6rem; font-variation-settings: 'wdth' 100, 'wght' 400; font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--bone); max-width: 24em; } .pie-escena, .pista { position: absolute; bottom: clamp(1.4rem, 4vh, 2.4rem); font-variation-settings: 'wdth' 62, 'wght' 500; font-size: 0.58rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bone-medio); } .pie-escena { left: var(--paso); } .pista { right: var(--paso); display: flex; align-items: center; gap: 0.6rem; } .pista i { width: 1px; height: 34px; background: linear-gradient(var(--oro), transparent); animation: cae 2.4s var(--expo) infinite; } @keyframes cae { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ── Los cuatro pasos de una visita ───────────────────────────────────────────────── Numerados con cifras de verdad: es una SECUENCIA, y una secuencia se numera. Sin caja: la linea de arriba y la sangria de la cifra bastan para agruparlo. */ .pasos { list-style: none; margin-top: 2rem; border-top: 1px solid var(--linea); } .pasos li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.2rem 1.4rem; padding: clamp(1.1rem, 2.2vh, 1.7rem) 0; border-bottom: 1px solid var(--linea); } .p-n { grid-row: span 2; font-variation-settings: 'wdth' 62, 'wght' 500; font-size: 0.62rem; letter-spacing: 0.24em; /* Oro CLARO: con este cuerpo el umbral es 4,5:1 y el oro normal se quedaba en 4,18:1 sobre la parte mas iluminada del motor. Era la unica medida que fallaba de 271. */ color: var(--oro-hi); font-variant-numeric: tabular-nums; padding-top: 0.55em; } .p-t { font-variation-settings: 'wdth' 104, 'wght' 500; font-size: clamp(1.1rem, 1.9vw, 1.5rem); line-height: 1.2; } .p-d { color: var(--bone-medio); font-size: 0.98rem; line-height: 1.6; /* 40ch, no 46: la linea larga se estiraba hasta donde el etalonaje ya se ha abierto y caia a 3,20:1. Acortarla la devuelve a la banda oscura — y 40ch se lee mejor que 46. */ max-width: 40ch; } /* ── Servicios agrupados por sistema ──────────────────────────────────────────────── ⛔ Nada de tarjetas con icono. Tres columnas de lista con su encabezado, que es como un mecanico agrupa el trabajo — y el mecanico es la audiencia nº1 del molde. */ .grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: clamp(1.6rem, 3vw, 3rem); margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); } .grupo h3 { font-variation-settings: 'wdth' 64, 'wght' 600; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--oro-hi); margin-bottom: 1rem; } .grupo ul { list-style: none; } .grupo li { padding: 0.42rem 0; font-variation-settings: 'wdth' 100, 'wght' 400; font-size: clamp(0.98rem, 1.2vw, 1.1rem); line-height: 1.4; } .nota { margin-top: 2rem; color: var(--bone-medio); font-size: 0.98rem; max-width: 46ch; } /* ── Preguntas ────────────────────────────────────────────────────────────────────── Van abiertas, no en acordeon: son cinco, caben, y un acordeon obliga a hacer clic para leer lo unico que quita el miedo a llamar. */ .preguntas { margin-top: 2rem; border-top: 1px solid var(--linea); } .qa { padding: clamp(1rem, 2vh, 1.5rem) 0; border-bottom: 1px solid var(--linea); } .qa dt { font-variation-settings: 'wdth' 104, 'wght' 500; font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.3; } .qa dd { margin-top: 0.5rem; color: var(--bone-medio); font-size: 0.98rem; line-height: 1.6; /* Mismo caso que `.p-d`: a 52ch caia a 3,25:1 sobre el motor iluminado. */ max-width: 44ch; } .acciones { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: center; } /* ── El telefono: la unica accion, y lo unico macizo ───────────────────────────────── */ .tel { display: inline-flex; flex-direction: column; gap: 0.3rem; margin-top: 2.2rem; padding: 1rem 2rem; background: var(--oro); color: var(--esmalte); transition: background-color 320ms var(--expo), transform 260ms var(--expo); } .tel-etq { font-variation-settings: 'wdth' 62, 'wght' 600; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.72; } .tel-num { font-variation-settings: 'wdth' 108, 'wght' 700; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; /* un telefono no debe bailar */ } .tel:hover { background: var(--oro-hi); transform: translateY(-2px); } .tel:active { transform: translateY(0); } .enlace { display: inline-block; margin-top: 1.8rem; padding-bottom: 5px; border-bottom: 1px solid rgba(233, 183, 94, 0.55); font-variation-settings: 'wdth' 68, 'wght' 600; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--oro); transition: color 300ms, border-color 300ms; } .enlace:hover { color: var(--oro-hi); border-color: var(--oro-hi); } /* ── El pie: aqui la pelicula se resuelve en negro y la web aterriza ─────────────────── */ .pie { position: relative; min-height: 82svh; display: flex; align-items: flex-end; padding: 0 var(--paso) clamp(2rem, 5vh, 3.2rem); background: linear-gradient(to bottom, transparent 0%, rgba(8, 7, 6, 0.7) 22%, rgba(8, 7, 6, 0.96) 46%, var(--esmalte) 68%); } .pie-in { width: 100%; max-width: 74rem; } .pie-nombre { font-variation-settings: 'wdth' 116, 'wght' 800; font-size: clamp(1.6rem, 3.6vw, 3rem); letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; } .pie-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(1.8rem, 4vw, 3.5rem); margin-top: 2rem; padding: 1.8rem 0 2.2rem; border-top: 1px solid var(--linea); } .pie-lema { color: var(--bone-medio); font-size: 0.94rem; line-height: 1.7; max-width: 34ch; } /* La especificidad importa: `.pie-col > a` pinta los enlaces de columna en bone y le ganaba a `.pie-tel`, asi que el telefono del pie salia blanco en vez de oro. */ .pie-col > a.pie-tel { display: inline-block; margin-top: 1.2rem; color: var(--oro-hi); opacity: 1; font-variation-settings: 'wdth' 108, 'wght' 700; font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .pie-col h4 { font-variation-settings: 'wdth' 64, 'wght' 600; font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--oro-hi); margin-bottom: 1.1rem; } .pie-col address { font-style: normal; color: var(--bone-medio); font-size: 0.92rem; line-height: 1.7; } .pie-col > a { display: block; padding: 0.3rem 0; font-size: 0.92rem; color: var(--bone); opacity: 0.82; transition: color 300ms, opacity 300ms; } .pie-col > a:hover { color: var(--oro-hi); opacity: 1; } .pie-mapa { margin-top: 0.8rem; color: var(--oro) !important; opacity: 1 !important; } .pie-barra { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--linea); } .pie-copia, .pie-firma { font-variation-settings: 'wdth' 70, 'wght' 500; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(196, 187, 169, 0.8); } .pie-firma a { color: var(--oro-hi); } @media (max-width: 900px) { .pie-cols { grid-template-columns: 1fr 1fr; } .pie-col-ancha { grid-column: 1 / -1; } } /* ── Barra de llamada permanente, solo en tactil ────────────────────────────────────── */ .barra-llamar { display: none; } @media (pointer: coarse) { .barra-llamar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; /* ⛔ Solida, sin desenfoque: ver el porque en `.chapa`. */ background: var(--oro); color: var(--esmalte); padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); text-align: center; font-variation-settings: 'wdth' 104, 'wght' 800; font-size: 1.08rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } /* La chapa fija sobra en movil: el telefono ya vive abajo, fijo y a pantalla completa. */ .chapa { display: none; } .pista { display: none; } .pie { padding-bottom: calc(clamp(2rem, 5vh, 3.2rem) + 4.4rem); } /* La copy ocupa toda la pantalla estrecha, asi que el etalonaje se vuelve vertical: en vertical no hay "banda de la copy", la copy es todo el ancho. */ .grado { background: linear-gradient(180deg, rgba(6, 5, 4, 0.74) 0%, rgba(6, 5, 4, 0.34) 26%, rgba(6, 5, 4, 0.34) 60%, rgba(6, 5, 4, 0.86) 100%); } } @media (max-width: 700px) { /* ⛔ A partir de aqui los titulos PUEDEN romper en dos lineas dentro de su mascara, y una mascara con dos lineas dentro esconde la segunda para siempre. Se quita el recorte: la aparicion degrada a un fundido, que es menos bonito pero legible. Legible gana. */ .ln { overflow: visible; } .js .ln > i { transform: translateY(18px); opacity: 0; transition: transform 0.9s var(--expo) var(--d, 0s), opacity 0.8s ease var(--d, 0s); } .js .dentro .ln > i { transform: none; opacity: 1; } .display { font-size: clamp(2rem, 7.6vw, 2.9rem); } .rotulo .nombre { font-size: clamp(2.8rem, 13vw, 4.4rem); } } /* ── ULTRAPANORAMICO ──────────────────────────────────────────────────────────────── ⛔ El monitor de referencia es 5120×1440 y una demo NO esta verificada hasta verla ahi. Sin esto pasa lo que ya paso en Meridian: la copy se queda en una franja estrecha a la izquierda y el resto es negro muerto — *"el hero en 32:9 era medio pantalla vacia"*. Con los topes de 1080p, el rotulo sale a 134 px sobre un cuadro de 5120: es un pie de foto. Los anchos se quedan DENTRO de la banda etalonada a proposito: la columna llega al 44% y el rotulo a ~27% del cuadro, donde el degradado aun da 0,78 — muy por encima del 0,68 que pide el texto apagado y del 0,48 del texto grande. */ @media (min-width: 2200px) { .col { width: min(58rem, 42vw); } .col-ancha { width: min(76rem, 54vw); } .rotulo .col { width: min(104rem, 62vw); } .rotulo .nombre { font-size: clamp(8.4rem, 4.4vw, 14rem); } .display { font-size: clamp(4.2rem, 3.4vw, 6.4rem); } .entrada { font-size: 1.6rem; } .cejilla { font-size: 0.78rem; } .p-t, .qa dt { font-size: 1.8rem; } .p-d, .qa dd, .cuerpo, .nota { font-size: 1.22rem; } .grupo li { font-size: 1.24rem; } .grupo h3 { font-size: 0.74rem; } .pasos li { grid-template-columns: 5rem minmax(0, 1fr); } .pie-nombre { font-size: 4.4rem; } } @media (prefers-reduced-motion: reduce) { .js .ln > i, .js .rise, .js .hint { opacity: 1; transform: none; transition: none; } .js .movida .hint { opacity: 1; transform: none; } .pista i { animation: none; } .tel, .chapa-tel { transition: none; } }