@import url("sitio.css"); @import url("acordeon.css"); /* ═══ LA WEB COMPLETA — I AM READY TO BLOOM ════════════════════════════════ Las 10 secciones de INICIO en el orden que ella escribió (ESTRUCTURA_Y_COPY.md), con su copy sin tocar. Esta pasada arma la ESTRUCTURA; el wow y el movimiento entran después, sección por sección. ── LA CORRECCIÓN DE MARCA ─────────────────────────────────────────────── Medido en su nicho real (papier · intelligentchange · ban.do · happyplanner): · display serif LIGERO y aireado (Canela Light 300, interlineado 1.5) · píldoras y radios grandes (34 / 50 / 100 px), NO hairlines de 0-2px · un solo acento saturado · etiquetas de categoría dentro de una píldora de color Lo que llevábamos era una web de Caliber —esquinas duras, grotesca 500— con sus colores. Aquí entra su idioma: · Gambetta 300 = el "Times New Roman" que ella pidió como ACENTO, subido de nivel. NO sustituye a los títulos: Lemon Milk (hoy Cabinet Grotesk) sigue siendo el título. La serif es la voz, no el letrero. · todo lo que se toca es píldora · las etiquetas de sección viven en una píldora de su paleta — que es literalmente cómo su moodboard dibuja el tono de marca */ :root{ --serif:'Gambetta',Georgia,serif; --radio:1.625rem; /* tarjetas y placas */ --radio-chico:1rem; --pildora:999px; --hueco:clamp(4.5rem,9vw,8.25rem); /* el aire entre secciones */ } /* ── piezas compartidas ──────────────────────────────────────────────────── */ .seccion{padding:var(--hueco) var(--margen)} /* La columna en rem: a 16 px de raíz son los mismos 1280 de siempre, y en una laptop baja sola para devolverle el aire a los lados. */ .ancho{max-width:80rem;margin-inline:auto} /* La etiqueta en píldora: el puente entre su moodboard y su categoría. */ .etiqueta{display:inline-block;padding:0.5rem 1.125rem;border-radius:var(--pildora); font:600 0.75rem/1 var(--cuerpo);letter-spacing:.14em;text-transform:uppercase; background:var(--tono,var(--lima));color:var(--carbon)} /* El titular de sección. Serif ligera, aire de 1.18, NADA de tracking negativo: el peso ligero ABRE, no cierra. */ /* 🔴 LA ESCALA. Medido antes de tocarla: SEIS titulares clavados en 60px y el máximo del sitio era 76. Graza corre a 120. El sitio era educado; ellos toman partido, y es lo que más se nota de todo lo que separa un sitio wow de uno correcto — más que cualquier animación, y cuesta cero. Con peso 300 el tracking ABRE, no cierra: a este tamaño un negativo pega las palabras. Y la medida baja a 14ch — un renglón de 20ch a 96px no se lee. */ .titular{font-family:var(--serif);font-weight:300; font-size:clamp(2.375rem,6.6vw,6.125rem);line-height:1.08;letter-spacing:-.012em; max-width:14ch;margin-top:1.625rem} /* Dentro de una franja de dos columnas el titular NO puede ir a 98: comparte el ancho con la foto. Ahí manda la columna, no la escala. */ .franja .titular{font-size:clamp(2.125rem,4.2vw,3.625rem);line-height:1.14;max-width:16ch} .titular em{font-style:italic} .bajada{margin-top:1.25rem;font-size:1.1875rem;line-height:1.62; color:rgba(44,44,44,.72);max-width:52ch} .franja{background:var(--tono);border-radius:var(--radio); padding:clamp(2.5rem,5vw,4.75rem)} /* ── SUS ELEMENTOS GRÁFICOS ──────────────────────────────────────────────── */ /* Las 16 piezas de `01_ASSETS/refs/sistema-grafico-iartb/`, redibujadas de su moodboard con sus hex. Las reglas son de su propia GUIA.md y no se rompen: 1 · todo plano — cero sombra, cero degradado, cero contorno. Son recortes de papel, así vienen en el moodboard. 2 · UNA pieza por sección, no tres. Son puntuación; amontonadas se vuelven confeti, y ella pidió evitar "que se vea muy AI o como muy típico". 3 · el coral NUNCA va de adorno: es el color de acción y no compite consigo mismo. Por eso los adornos corren en menta / oliva / lila / lima. 4 · nunca encima de una foto de producto — el color de producto vive dentro de la foto, el adorno vive fuera. Se INCRUSTAN, no se cargan como : un SVG cargado como imagen es un documento aparte y no hereda `color` — salen todas negras. */ /* 🔴 UNA PEGATINA NO VA AL 34% DE OPACIDAD. Los elementos planos pedían transparencia para no gritar; un troquel a media tinta se lee a impresión descolorida. Con el sticker se invierte: opacidad casi entera y TAMAÑO chico. La discreción la da la escala, no la transparencia. */ .adorno-sec{position:absolute;z-index:0;pointer-events:none;opacity:.95; width:clamp(66px,6.4vw,104px);height:auto; right:var(--margen);top:calc(var(--hueco) * .55)} .seccion{position:relative} .seccion>.ancho{position:relative;z-index:1} /* Las masas (blob-gota, blob-nube) piden más cuerpo que las líneas: a .34 sobre arena se leían a mancha gris descolorida en vez de a color. */ /* (§7 ya no lleva pegatina: la hoja de la biblioteca se apoya sobre la acuarela y una masa de color encima era la tercera capa de fondo en el mismo sitio.) */ .voces .adorno-sec{top:calc(var(--hueco) * .4)} /* La luna del cierre se define entera en §10 (ahora es una capa, no un adorno). Esta regla se queda solo como reposo por si el bloque de la noche no carga. */ .adorno-cierre{display:block;width:62px;height:auto;margin:0 auto 1.625rem} /* ── LA TEXTURA — no un patrón ───────────────────────────────────────────── */ /* 🔴 Se QUITARON los dos patrones de fondo (puntitos detrás de la tienda, botánica en la franja del Planner). Razón medida, no gusto: de las cinco tiendas de su categoría que sí cargaron, NINGUNA corre un patrón repetido de fondo. Papier —que literalmente vende papel estampado— tiene el fondo liso. Los estampados de su moodboard son para la PASTA de un journal, no para el muro detrás del texto: ahí solo compiten con la lectura y leen a plantilla. Lo que sí queda es TEXTURA, que es otra cosa: su moodboard trae cuatro papeles, y uno de ellos es papel con fibra. Un grano finísimo da la sensación de papel sin dibujar nada. Va en el , se genera en el navegador y pesa cero. Los patrones siguen en assets/grafico/ para superficies chicas —el forro de una tarjeta, el fondo de una insignia—, que es donde funcionan. */ body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; opacity:.5;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='.14'/%3E%3C/svg%3E")} body>*{position:relative;z-index:1} /* ── el encabezado ───────────────────────────────────────────────────────── */ .nav{position:sticky;top:0;z-index:80;background:rgba(246,244,235,.86); backdrop-filter:blur(14px); display:flex;align-items:center;justify-content:space-between;gap:1.5rem; padding:0.875rem var(--margen)} /* Sin `transition` en el alto: lo mueve `--n` con el scroll. Una transición encima correría a su propio tiempo y despegaría la marca del dedo. */ .nav .firma-nav{color:var(--coral)} .nav ul{display:flex;gap:1.625rem;list-style:none} /* El renglón de menú no cambia de color y ya: le crece un trazo desde el centro. Es el mismo gesto que el botón secundario —el trazo que crece— y por eso la barra se siente parte del sitio y no una pieza aparte. Va por `background-size`, no por un pseudo con `width`: un pseudo animando ancho reflowa; el gradiente no toca layout. */ .nav a{position:relative;font:500 0.9062rem/1 var(--cuerpo);color:rgba(44,44,44,.72); padding:0.5rem 2px;transition:color .3s var(--curva)} .nav nav a{background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat;background-position:50% calc(100% - 1px); background-size:0 1px; transition:color .3s var(--curva),background-size .38s var(--curva)} .nav a:hover,.nav a:focus-visible{color:var(--carbon)} .nav nav a:hover,.nav nav a:focus-visible{background-size:100% 1px} .nav a:focus-visible{outline:3px solid var(--carbon);outline-offset:3px; border-radius:0.25rem} .nav .acciones{display:flex;align-items:center;gap:0.375rem} .nav .carro{display:flex;align-items:center;gap:0.5rem;padding:0.6875rem 1.25rem; /* 🔴 v2 — ERA NEGRO Y ELLA LO SEÑALÓ POR NOMBRE: "el color negro del branding usarlo únicamente en typos, no en botones ni en detalles, entonces el botón de arriba que no sea negro por favor, puede ser el verde olivo". Y tenía toda la razón: era la píldora más repetida del sitio —está en las siete páginas, arriba a la derecha— o sea le habíamos dado al negro el botón más visible de su marca. Va a su olivo, pero HONDO. Su #A5AD58 tal cual no se puede: con blanco da 2.41 y reprueba, y contra la barra de papel se separa apenas 2.19 — dejaría de leerse como botón. Bajado en luminosidad (51% -> 28%) conserva su matiz (65.6 -> 70.8, cinco grados) y pasa a 5.83 con blanco y 5.29 de separación contra la barra. Es su verde, con el volumen que necesita para ser un botón. */ border-radius:var(--pildora);background:var(--oliva-hondo);color:var(--blanco); font:500 0.8438rem/1 var(--cuerpo);letter-spacing:.005em;margin-left:0.375rem; transition:background-color .34s var(--curva),transform .34s var(--curva), box-shadow .34s var(--curva)} .nav .carro:hover,.nav .carro:focus-visible{ background:color-mix(in oklch,var(--oliva-hondo) 86%,var(--carbon)); transform:translateY(-1px);box-shadow:0 8px 18px -12px rgba(44,44,44,.8)} .nav .carro:active{transform:translateY(0) scale(.975);transition-duration:.11s} .nav .carro:focus-visible{outline:3px solid var(--carbon);outline-offset:3px} .ico-btn:focus-visible{outline:3px solid var(--carbon);outline-offset:2px} .ico-btn:active{transform:scale(.92);transition-duration:.11s} .nav .menu-movil{display:none} /* ── los íconos ──────────────────────────────────────────────────────────── */ .ico{width:20px;height:20px;display:block;color:inherit} .ico-btn{display:grid;place-items:center;width:40px;height:40px;padding:0; border:0;background:none;border-radius:var(--pildora);cursor:pointer; color:rgba(44,44,44,.8);transition:.28s var(--curva)} .ico-btn:hover{background:rgba(44,44,44,.07);color:var(--carbon)} /* ── el menú de celular ──────────────────────────────────────────────────── */ .tapa{position:fixed;inset:0;z-index:90;background:rgba(44,44,44,.42); opacity:0;transition:opacity .32s var(--curva)} .tapa.abierta{opacity:1} .panel-movil{position:fixed;z-index:91;top:0;right:0;bottom:0; width:min(86vw,380px);background:var(--sup); padding:1.375rem 1.625rem 2.125rem;overflow-y:auto; display:flex;flex-direction:column; translate:100% 0;transition:translate .38s var(--curva)} .panel-movil.abierto{translate:0 0} .panel-movil .cerrar{align-self:flex-end} .panel-movil ul{list-style:none;margin-top:1.125rem} .panel-movil li{display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:1.125rem 0;border-bottom:1px solid rgba(44,44,44,.12)} .panel-movil li .ico{color:var(--tx-3)} .panel-movil a{font-family:var(--serif);font-weight:300;font-size:1.5rem;line-height:1.2} .lema-panel{margin-top:auto;padding-top:1.875rem;font-family:var(--serif); font-weight:300;font-size:1.1875rem;line-height:1.4;var(--tx-3)} /* Con el panel abierto la página de atrás NO se desplaza. */ body.trabado{overflow:hidden} /* ── §2.5 · ¿TE SUENA? — propuesta nuestra, no de ella ───────────────────── */ /* Va marcada en el HTML para que en la revisión se sepa qué es de ella y qué no. */ .suena{text-align:center} .suena .cita{font-family:var(--serif);font-weight:300;font-style:italic; font-size:clamp(1.75rem,5vw,4.5rem);line-height:1.16;letter-spacing:-.01em; max-width:16ch;margin:1.875rem auto 0} .suena .quien{margin-top:1.625rem;font:500 0.875rem/1 var(--cuerpo); letter-spacing:.1em;text-transform:uppercase;var(--tx-3)} /* ── §3 · ELIGE TU CAMINO — traído al idioma nuevo ───────────────────────── */ /* El acordeón (D5) se queda: cinco visibles, uno abierto, el color barriendo desde la izquierda. Lo que cambia es el REGISTRO — era el único bloque que seguía hablando en grotesca apretada mientras el resto de la web ya habla en serif ligera. Un sitio con dos idiomas se lee a dos sitios. */ .elige .cabeza{padding-top:calc(var(--hueco) * .55)} /* la marea ya dio el aire */ .elige .q{display:inline-block;padding:0.5rem 1.125rem;border-radius:var(--pildora); background:var(--menta);color:var(--carbon); font:600 0.75rem/1 var(--cuerpo);letter-spacing:.14em;text-transform:uppercase} .elige .lead{font-family:var(--serif);font-weight:300; font-size:clamp(1.875rem,5.4vw,5rem);line-height:1.08;letter-spacing:-.012em; max-width:15ch} .via .nombre{font-family:var(--serif);font-weight:300;letter-spacing:0} /* ── §4 · EL PLANNER 2027 ────────────────────────────────────────────────── */ /* 🔴 ELEGIR UN COLOR REPINTA LA SECCIÓN ENTERA, no cambia una foto. Lo que había medía así: la tira de arriba en rgb(221,222,188) y esta franja en rgb(223,230,187) —2/8/1 de diferencia por canal, CONTRASTE 1.06— o sea 900 px de una sola masa verde pálido, con una placa crema dentro a 1.21. Tres tonos pálidos seguidos y ni un punto oscuro: eso es lo que aplana, no la falta de animación. La salida sale de su propia referencia: Mar Cosmetics mete el color por BLOQUE ENTERO de sección. Aquí se lleva a su conclusión — cada variante es un mundo tonal completo (fondo, tinta, acento, placa y botón), y tres de los cuatro son OSCUROS. Así esta sección deja de ser otra franja pálida y se vuelve el punto de peso del tramo, sin robarle el pico al valle en carbón (aquel es de sitio completo; este vive dentro de su tarjeta). */ /* 🔴 EL MUNDO SE DECLARA EN LA SECCIÓN, no en la tarjeta. Estaba en `.franja` y funcionaba, pero el papel de atrás también tiene que cambiar de tono y un descendiente no puede pintar a su ancestro. Subirlo un nivel evita tener que resolverlo con `:has()`, que en este archivo ya nos ha costado una vuelta (el ancestro gana y el estado de reposo se queda puesto). */ /* El padding de `.seccion` se queda como está: un absoluto con `inset:0` se posiciona contra la CAJA DE RELLENO, así que el papel sale a todo lo ancho sin necesidad de quitárselo — y quitárselo le encogía el contenido 192 px. */ /* 🔴 LOS VALORES POR OMISIÓN VIVEN AQUÍ, no en la tarjeta. Los tenía declarados en `.franja` y eso ROMPÍA el sistema en silencio: una propiedad personalizada declarada en el propio elemento gana contra la heredada, así que la tarjeta se quedaba en el mundo lima en los cuatro casos mientras el papel de atrás sí cambiaba. Sin error de consola y con la sección "funcionando" a medias. Regla: la variable se declara UNA vez, donde vive el estado; los descendientes solo la consumen. */ .planner{position:relative; /* v3 — la tarjeta y la tinta ya NO dependen del mundo: son blancas y carbón siempre. Lo único que cambia por variante es el acento (ver más abajo). */ --fondo:var(--blanco); --tinta:var(--carbon); --acento:var(--cobalto); --acento-tx:var(--blanco); --acento-tinta:var(--cobalto); /* El lecho de la foto en crema: es la única superficie de la tarjeta que no es blanca, y por eso el objeto se apoya en algo en vez de flotar en un vacío. */ --placa:var(--papel); /* 🔴 EL BOTÓN ES SU NARANJA #B93D0A, el que dio por hex en el portal, no el coral. Medido: blanco sobre naranja da 5.62 y pasa; sobre el coral #FD7855 da 2.63 y no. El coral se queda donde ella lo mandó — en el logotipo. */ --btn:var(--naranja); --btn-tx:var(--blanco); --hoja:var(--papel); /* 🔴 El reposo es ASENTADO (--p:1), no "por asentar". Con `--p:0` por omisión, quien tenga movimiento reducido —donde vida.js no corre— se quedaba con la tarjeta 22 px arriba y sin sombra para siempre: el estado de a medias, congelado. La regla del sitio es que sin JS todo se ve COMPLETO y el estado intermedio solo existe mientras hay algo que lo va a resolver. */ --p:1} .planner > .ancho{position:relative;z-index:1} /* ── EL PAPEL: una hoja RASGADA por los dos cantos ───────────────────────── */ /* Medido antes: la sección era `transparent` y la tarjeta oscura simplemente APARECÍA sobre 129 px de arena vacía arriba y 130 abajo. Y seis de las doce secciones del sitio entran con `.troquel` —el canto de papel— así que ésta era la que hablaba otro idioma justo donde más se nota el cambio de tono. La hoja va DENTRO de la sección, no como fondo de la sección: así `#tienda` conserva su propia costura y no hay que tocar a los vecinos. */ /* `isolation:isolate` NO es decorativo: sin él, el `multiply` de la fibra saldría del papel y se mezclaría con todo lo que hay debajo en la página. Con el contexto propio, la fibra solo multiplica contra el tono de ESTA hoja. */ .planner .papel{position:absolute;inset:0;z-index:0;overflow:hidden; isolation:isolate; /* ⚠️ v2 — esta variable se llamaba `--papel` y CHOCABA con el token global del suelo del sitio que entró con la v2. Dentro de .planner ganaba la local, así que la costura de abajo —que tiene que ser el color de ALREDEDOR— se habría pintado del mismo tono que la hoja que muerde, o sea invisible, y sin un solo error en consola. Se llama `--hoja` porque eso es: la hoja de ESTE mundo de color, no el papel del sitio. 🔴 v2 — Y ADEMÁS SE APAGÓ. Tintaba la página con un 15-72% del color del mundo, o sea el fondo se ponía azul pálido, verde pálido o rosa pálido según el color elegido. Ella, textual: "no me gustan los fondos amarillos, verdes o azules pálidos". Era el caso exacto. El tinte existía para compensar algo que ya no pasa: con el lima viejo (#C7D68A, lavado) la tarjeta clara contra el papel medía 1.00 y desaparecía, así que había que teñir el papel de oliva para darle sobre qué apoyarse. Con el lima REAL del producto (#90B424) esa misma medición da 2.18: la saturación resolvió sola lo que el tinte estaba tapando. El color ahora lo pone la tarjeta, que es de donde debía salir. */ /* 🔴🔴 LA LUZ Y EL GRANO ENTRAN AQUÍ (16-ago) — la capa que le faltaba a §4. Nueve de las trece secciones del home llevan el material del sitio; ésta era una de las cuatro que no, y se veía: la hoja tenía color y fibra pero `background-image: none` y `--luz` SIN DEFINIR, o sea un campo plano donde no se puede señalar de dónde viene la luz. Es la contradicción que más pesaba en esta sección: al producto se le dio sombra de contacto, halo y una sombra que se mueve en contra al girar — y la MESA sobre la que se apoya seguía sin iluminar. Objeto con luz, superficie sin ella. Por qué aquí y no en la sección: `background-blend-mode` mezcla contra el color de fondo del PROPIO elemento, y `.planner` es `transparent`. La hoja sí tiene color, así que es donde el multiply tiene contra qué multiplicar. El comentario de más abajo ya lo anticipaba —"planner además ya tiene su propia hoja"—: era la pista de dónde iba, no una razón para dejarlo fuera. `background` (atajo) NO servía: resetea `background-image` en cada declaración, así que la luz y el grano se habrían borrado solos. Va desglosado. */ /* 🔴🔴 LA LUZ SE SALIÓ DE AQUÍ Y AHORA VIAJA (capa 1 del rediseño de fondo). Estaba clavada: `--luz` fija en `20% -8%`, o sea una FOTOGRAFÍA de luz. La mesa tenía un reflejo pintado, no iluminación. Ahora la fuente recorre la hoja mientras la sección pasa por la pantalla — ver `.planner .luz` más abajo. POR QUÉ SALIÓ DEL `background-image`: mover la luz aquí significaba animar la posición del gradiente, y eso REPINTA los ~1300×1200 px de la hoja en cada cuadro. Como capa propia se mueve con `transform`, que va en la GPU y no repinta nada. Aquí se queda solo el grano, que sí es fijo. */ background-color:var(--hoja); background-image:url("grafico/grano.svg"); background-size:200px 200px; background-position:center; background-repeat:repeat; background-blend-mode:multiply; transition:background-color .62s var(--curva)} /* ── LA LUZ QUE VIAJA ──────────────────────────────────────────────────────── La fuente está casi clavada al MUNDO, no a la sección: conforme la página sube, la luz baja sobre la hoja, como el sol de una ventana mientras caminas por el cuarto. Casi — va al ~55% de ese recorrido, no al 100%. A 1:1 el efecto se lee como "hay un foco pegado a mi pantalla"; a media velocidad se lee como profundidad, que es lo que se buscaba. Va con `--q` y no con `--p`: `--p` llega a 1 en el primer 62% de la pantalla y ahí se congela —es el número de la tarjeta asentándose— así que la luz habría barrido durante la entrada y se habría quedado quieta justo durante todo el rato que estás leyendo la ficha. `--q` es la travesía completa. 🔴 EL FOCO SE APRETÓ, Y ESO LO DECIDIÓ LA MEDICIÓN. El primer intento conservó el radio de la luz fija —92% × 112% de la sección— y solo lo puso a viajar. Medido comparando el mismo encuadre en los dos extremos del recorrido: diferencia máxima 5 niveles ← imperceptible diferencia media 1.43 niveles O sea nada, y repartido a lo largo de todo el scroll son fracciones de nivel por cuadro. La causa no es el recorrido: es que una luz que cubre TODA la superficie no es una fuente, es una exposición — al moverse, cada punto sigue estando bajo la misma parte del degradado. Se aprieta a ~55% × 62% de la sección y el recorrido vertical sube a ±25%. Ahora sí es un foco que pasa. La caja va SOBREDIMENSIONADA (140% × 170%) para que el borde del degradado nunca entre en cuadro: el recorrido máximo es ±14.7% de la caja contra un margen del 35%. Los radios y el centro están expresados contra esa caja mayor — el punto de reposo sigue siendo el `20% -8%` de siempre, que aquí cae en `28.6% 15.9%`. Sin `--q` (sin JS o con movimiento reducido) vale .5: la luz en su sitio de siempre, la sección COMPLETA. Nunca un estado a medias congelado. */ .planner .luz{position:absolute;inset:-35% -20%;z-index:0;pointer-events:none; mix-blend-mode:multiply; background:radial-gradient(39.3% 36.5% at 28.6% 15.9%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 34%, rgba(150,126,74,calc(var(--luz-caida,.13) * .42)) 68%, rgba(150,126,74,var(--luz-caida,.13)) 100%); translate:calc((var(--q,.5) - .5) * 8.6%) calc((var(--q,.5) - .5) * 29.4%)} /* 🔴 LA FIBRA VA EN GRIS, y esto se decidió midiendo cuatro versiones. La receta de §2.5 (multiply .24 en color, sobre arena) aquí no sirve: sobre un tono medio no se veía —stddev 2.33 → 2.42, o sea NADA, que es justo la trampa de hornear una textura al 10%. Pero al subirla en color pasó lo contrario y peor: a .78 el croma de la lámina se desploma de **29.4 a 7.2** —la foto es cálida y al multiplicar arrastra el tono— y el papel azul se vuelve un muro de concreto gris. `soft-light` fue peor todavía: lava la media +25 niveles y textura menos. La salida es `grayscale(1)`: una capa sin color solo toca la LUMINANCIA, así que la fibra se ve y el tinte del mundo sobrevive entero. Medido a .55 — croma 29.4 (intacto), media −0.1 (intacta), rango 9 → 43 niveles. Va volteada y a otra escala que la de §2.5 para que no se lea como la misma toma. */ .planner .fibra{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;pointer-events:none;z-index:1; opacity:.55;mix-blend-mode:multiply; filter:grayscale(1) contrast(1.15) brightness(1.12); transform:scaleY(-1) scale(1.18)} /* 🔴 LOS DOS CANTOS SUBEN A z-index:2, y esto era un bug de antes. Los tres iban con `z-index:auto`, así que se apilaban por ORDEN DE ÁRBOL: `::before` → `.fibra` → `::after`. O sea la fibra multiplicaba sobre el canto de ARRIBA y no sobre el de abajo: la misma hoja, dos tratamientos distintos, y sin un solo error en consola. Con la luz entrando como segunda capa el desajuste se habría duplicado. Y va en 2 a propósito: el canto tiene que ser el color de ALREDEDOR —es el hueco que muerde la hoja— así que ni la fibra ni la luz deben teñirlo. */ .planner .papel::before, .planner .papel::after{content:"";position:absolute;left:0;right:0;height:18px; background:var(--papel);pointer-events:none;z-index:2; -webkit-mask:url("grafico/troquel.svg") repeat-x center/auto 100%; mask:url("grafico/troquel.svg") repeat-x center/auto 100%} .planner .papel::before{top:-1px} /* El canto de abajo es el mismo dibujo VOLTEADO. Una sola pieza para los dos cantos: si fueran dos archivos distintos se notaría que no son la misma hoja. */ .planner .papel::after{bottom:-1px;transform:scaleY(-1)} .planner .franja{ background:var(--fondo);color:var(--tinta); display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem); align-items:center; /* Las variables no se animan solas: lo que transiciona son las PROPIEDADES que las consumen. Por eso van nombradas una por una. */ transition:background-color .62s var(--curva), color .62s var(--curva); /* ── EL PESO ──────────────────────────────────────────────────────────── La tarjeta no tenía sombra: era un rectángulo pintado, no una lámina apoyada. Y la sombra NO es fija — se asienta con el scroll. `--p` va de 0 a 1 mientras la sección entra (lo escribe vida.js con el mismo mecanismo determinista del valle), así que la hoja baja los últimos 22 px y su sombra abre al mismo tiempo. Una sombra que responde al scroll se siente física; una fija se siente pegada. Se anima `translate`, no `top`: `top` recalcula la caja en cada cuadro. */ --a:calc(1 - var(--p)); translate:0 calc(var(--a) * -22px); box-shadow:0 calc(10px + var(--p) * 26px) calc(24px + var(--p) * 44px) rgba(44,44,44,calc(.05 + var(--p) * .13))} /* 🔴 LA PLACA SE QUEDA CLARA EN LOS CUATRO MUNDOS, y es una decisión, no una herencia. El primer intento le dio a cada mundo una placa de su propio tono (un escalón más claro que la franja): medía 1.23-1.25, o sea el mismo rectángulo invisible de antes con otro color. Y peor — el PNG del producto trae una sombra BLANCA horneada de 6,016 píxeles a alfa 255, que sobre una placa oscura se ve como una mancha. Con la placa clara las dos cosas se arreglan de una: la sombra horneada se integra como sombra de verdad, y la placa deja de ser un sobrante para volverse lo que debía ser desde el principio —una ventana de luz dentro de la franja, con el objeto apoyado en ella. Es el mismo recurso que usa cualquier vitrina. */ /* `--papel` es la hoja de atrás: la arena TINTADA del mundo. Va bajita a propósito —es la antesala, no el evento— pero tiene que separarse de la arena lo suficiente para que el canto rasgado exista. 🔴 SE MEZCLA EN OKLCH, NO EN SRGB, y esto no es preferencia. Medido: la arena sola tiene croma 17; metiéndole 13% de cobalto **en srgb** el resultado baja a croma 5 — sale GRIS SUCIO, más apagado que el punto de partida, y en pantalla se lee a error de render, no a papel tintado. La misma mezcla en oklch da croma 27: un azul pálido de verdad. Interpolar colores oscuros y saturados dentro de claros y lavados atraviesa el centro desaturado del cubo sRGB; oklch va por el arco de croma y no se cae. */ /* 🔴🔴 v3 — LA TARJETA SE VA A BLANCO Y EL COLOR BAJA A DETALLE. Es literal lo que ella escribió del Planner en el portal: "la quiero super limpia, no azul, nuevamente ese color es solo para detalles, así como le pusiste a una palabra en un título". Lo que había era exactamente lo contrario — medido, 1066×802 px de cobalto sólido, el campo de color más grande de todo el inicio. Así que se invierte el sistema, no se apaga: la tarjeta es blanca y con tinta carbón en los cuatro mundos, y el color del planner elegido vive ahora en la etiqueta, en la palabra acentuada del titular, en el anillo de la muestra y en el canto del lecho de la foto. Sigue habiendo cuatro mundos; lo que cambió es la DOSIS. Dos medidas que obligan a que no sea un simple buscar-y-reemplazar: · Lima como TEXTO da 2.40 sobre blanco — reprobado. Por eso el mundo lima escribe con `--oliva-hondo` (5.83), que además es el verde olivo que ella pidió por nombre. La etiqueta sí puede ser lima porque ahí es FONDO, con carbón encima: 5.81. · El lecho de la foto queda en crema y mide 1.10 contra la tarjeta blanca: no alcanza para leerse como superficie. Lo resuelve el canto en el color del mundo, que es la misma idea de "color como detalle" aplicada a un borde. */ .planner[data-color=cobalto] {--acento:var(--cobalto); --acento-tx:var(--blanco); --acento-tinta:var(--cobalto)} .planner[data-color=orquidea] {--acento:var(--orquidea); --acento-tx:var(--blanco); --acento-tinta:var(--orquidea)} .planner[data-color=lima] {--acento:var(--lima); --acento-tx:var(--carbon); --acento-tinta:var(--oliva-hondo)} /* 🟠 Terracota #A83C0C es vecina del naranja #B93D0A que ahora llevan todos los botones: juntos leen a error de impresión, no a decisión — están a 16/1/2 por canal. Antes se resolvía mandando el botón a carbón, y eso ya no se puede: ella pidió que el negro viva "únicamente en typos, no en botones". Así que en ESTE mundo el botón se va a su verde olivo (5.83 con blanco), que es de los tres colores que dijo querer usar más. Sigue siendo su paleta, y ella misma autorizó la variedad: "no tienes que hacer todos los botones exactamente del mismo color, puedes jugar". */ .planner[data-color=terracota]{--acento:var(--terracota); --acento-tx:var(--blanco); --acento-tinta:var(--terracota); --btn:var(--oliva-hondo); --btn-tx:var(--blanco)} /* v2 — LA ETIQUETA ES SIEMPRE EL OPUESTO DE LA TARJETA. Con los colores reales del producto, el acento de antes dejó de funcionar: lima sobre orquídea daba 2.40 de separación y amarillo sobre terracota 4.00, o sea la etiqueta se diluía en la tarjeta. Invertirla la resuelve de una y para los cuatro mundos: papel sobre las tres oscuras (5.24 / 5.75 / 10.85) y carbón sobre la lima clara (5.81). El texto queda en 12.67 en los cuatro, contra 5.81-13.05 antes. */ .planner .etiqueta{background:var(--acento); color:var(--acento-tx,var(--carbon));transition:background-color .62s var(--curva)} /* 🔴 EL SALTO DE COLOR — lo que hacía que el cambio de variante se sintiera barato. Medido con `transitionDuration` en cada pieza: el libro giraba en 500 ms mientras CINCO cosas cambiaban de color en **0 ms** — el acento del titular, el nombre de la variante, el canto del lecho, y los rótulos de la ficha. Un movimiento cuidado rodeado de saltos instantáneos no se lee a "casi bien": se lee a roto, porque el ojo cree lo más rápido que ve. Ahora todo lo que cuelga de `--acento` viaja junto y con la misma curva. Se nombran las propiedades una por una: `all` metería en la transición el layout y cualquier cosa que se toque después. ⚠️ La etiqueta llevaba su `background-color .62s` desde antes y NO bastaba: otra regla más abajo le puso `transition:opacity,translate` para su entrada y la pisó entera. Por eso la suya se repite aquí. */ .planner .etiqueta, .planner .titular .ac, .planner .muestras .nombre-color, .planner .specs dt, .planner .nota-ficha, .planner .bajada{ transition:color .52s cubic-bezier(.16,.68,.43,.99), background-color .52s cubic-bezier(.16,.68,.43,.99)} /* ⚠️ Aquí iba una transición para el canto del lecho y NO SE ESCRIBE: ese canto dejó de existir cuando el lecho pasó de caja con borde a halo + sombra de contacto. Medido antes de darlo por bueno: `.foto` computa `box-shadow: none`. Una transición sobre una propiedad que nadie declara es el mismo código muerto que las pegatinas de esta sección — el archivo describiendo algo que no está. Lo que sí existe es el halo, y va aquí abajo. */ /* 🔴 LA ETIQUETA LA PISABA EL REVEAL. `.js-rev [data-rev]` (0,2,0) declara `transition:opacity,translate` para la entrada de la sección, empata en especificidad con `.planner .etiqueta` y va MÁS ABAJO en el archivo, así que ganaba y borraba el `background-color` de la lista: el bloque de color saltaba de golpe mientras todo lo demás viajaba medio segundo. Cuarta colisión de este tipo hoy. Se sube a (0,3,0) y se REPONEN las dos propiedades del reveal — pisarlas habría arreglado el color rompiendo la entrada. */ .planner .etiqueta[data-rev]{ transition:opacity .85s var(--curva), translate .85s var(--curva), background-color .52s cubic-bezier(.16,.68,.43,.99), color .52s cubic-bezier(.16,.68,.43,.99)} /* 🔴 EL HALO NO PODÍA INTERPOLAR, y no era culpa de ningún selector: `background-image` NO es animable entre dos gradientes. Medido — a mitad de transición el halo ya estaba en el color de destino, o sea saltaba. La salida es registrar el color como PROPIEDAD: con `@property` y `syntax:''` el navegador sabe que eso es un color y lo interpola. Sin el registro una variable es texto, y el texto no se puede promediar. */ @property --tinte-halo{syntax:'';inherits:true;initial-value:transparent} .planner{--tinte-halo:color-mix(in oklch, var(--acento) 13%, var(--placa)); transition:--tinte-halo .52s cubic-bezier(.16,.68,.43,.99)} .planner .foto::before{ background: radial-gradient(58% 46% at 44% 40%, var(--tinte-halo), transparent 72%), radial-gradient(30% 5.5% at 50% 92%, rgba(44,44,44,.30), transparent 70%)} /* 🔴 Los porcentajes de tinta se fijaron MIDIENDO los cuatro mundos, no a ojo. Con los primeros valores (76 / 58 / 68) el rótulo de la ficha caía a 3.14 en lima y 3.28 en terracota, y el renglón de prosa a 3.99 y 3.95: reprobados los dos. La trampa es que en cobalto —donde uno mira mientras trabaja— el mismo porcentaje daba 4.67 y 5.85 y todo parecía bien. Cuatro fondos = cuatro mediciones, no una. */ .planner .bajada{color:color-mix(in srgb, var(--tinta) 84%, transparent)} /* El nombre del producto es un RÓTULO, no un titular: identifica el objeto y cede el peso al registro emocional que va debajo. Versalitas con tracking abierto — el mismo recurso que ya usan los rótulos de la ficha, para que se lea como parte del mismo aparato y no como un tercer tamaño suelto. */ .planner .nombre-prod{margin:1.125rem 0 0.375rem; font:600 0.8125rem/1 var(--cuerpo);letter-spacing:.15em;text-transform:uppercase; color:color-mix(in srgb, var(--tinta) 62%, transparent)} /* `--fondo-btn` es lo que toma la flecha cuando el pozo se invierte: tiene que seguir al fondo del botón, no quedarse en el coral de la regla base. */ .planner .btn.primario{--fondo-btn:var(--btn); background:var(--btn);color:var(--btn-tx)} .planner .btn.secundario{color:var(--tinta)} /* La placa medía 1.21 contra la franja vieja: un rectángulo crema que no era ni fondo ni objeto, solo un sobrante. Medida contra el tono nuevo daría 1.25 —el mismo problema con otro color— así que no se resuelve subiendo el tono: se resuelve dándole DIRECCIÓN. Un charco de luz arriba-izquierda convierte el rectángulo en una superficie iluminada, que es donde un objeto puede apoyarse. Es la variable 1 del oficio: si no puedes señalar de dónde viene la luz, no hay luz, hay exposición. */ /* v3 — el canto en el color del mundo. Sobre la tarjeta blanca el lecho crema mide 1.10 y solo, no se lee como superficie; el canto lo define sin volver a meter un campo de color. Va en `box-shadow` y no en `border` para no alterar la caja ni la relación 4/5. */ /* 🔴🔴 EL OBJETO ROMPE SU MARCO — y esto sustituye a las pegatinas, no las repite. El archivo traía 30 líneas para tres pegatinas que CRUZAN la tarjeta ("es la pieza que hace el truco", decía el comentario del HTML). Medido en el DOM: `.pegado` = 0 elementos. Nunca se montaron, y no se pueden montar: ella pidió por escrito "fuera todos los iconos dibujados". Ese CSS era residuo de antes de esa orden y se borra más abajo. Pero el diagnóstico que lo motivaba seguía siendo cierto: sin nada que pase por delante, esto es un rectángulo blanco con una foto dentro. La oclusión es lo único que el ojo lee como "esto está más cerca" — el paralaje solo lee como cosas moviéndose. La salida no era adornos cruzando: es que CRUCE EL PRODUCTO. El libro sale de su lecho por arriba y se monta sobre el canto de la tarjeta. Ocluye el protagonista, no un sticker — y de paso el objeto crece, que es lo que pedía la comparación con Intelligent Change (su producto ocupa el 83% del alto de la pantalla; el nuestro cabía entero dentro de una caja con 8% de aire). */ /* 🔴 EL LECHO SE VUELVE REPISA. Con el libro creciendo hasta salirse, el rectángulo crema de 4/5 quedaba casi todo tapado y lo que asomaba era un marco corrido detrás del objeto: se leía a error de maquetación, no a superficie. Un objeto no se apoya en un marco, se apoya en un SUELO. Así que la caja sigue marcando el sitio (4/5, para que la columna no cambie de alto) pero lo que se PINTA es solo la mitad de abajo. El libro entra en ella por su base, que es exactamente lo que hace un bodegón: producto de pie sobre una superficie, no producto dentro de un cuadro. */ .planner .foto{aspect-ratio:4/5;position:relative;padding:8% 8% 7%; /* `overflow` NO puede ser hidden: es justo lo que recortaría al libro. */ overflow:visible} /* 🔴 Y LA REPISA DEJA DE SER UNA CAJA. Con el rectángulo redondeado y su canto de color quedaban TRES marcos anidados —tarjeta blanca › lecho crema con borde › libro— que es el anti-patrón de tarjetas dentro de tarjetas, y además el borde asomaba por detrás del objeto como un cuadro mal colgado. Lo que hace que un objeto se vea apoyado no es un marco: es un HALO de luz detrás y una SOMBRA DE CONTACTO debajo. Dos elipses, cero cajas. El color del mundo sigue presente —tiñe el halo— pero como atmósfera, que es la dosis que ella pidió: "ese color es solo para detalles". */ .planner .foto::before{content:"";position:absolute;inset:0;z-index:0; background: /* el halo: el aire teñido detrás del objeto, con la luz entrando por arriba-izq */ radial-gradient(58% 46% at 44% 40%, color-mix(in oklch, var(--acento) 13%, var(--placa)), transparent 72%), /* la sombra de contacto: aplastada y baja, justo donde el libro toca */ radial-gradient(30% 5.5% at 50% 92%, rgba(44,44,44,.30), transparent 70%); transition:background .62s var(--curva)} /* El libro mide 116% del alto del lecho y se apoya en su base: el 16% que sobra sale por arriba. Se ancla ABAJO (`place-items:end`) a propósito — un objeto que sobresale por arriba pero se apoya abajo se lee como puesto sobre una repisa; centrado se leería como flotando, que es el defecto que ya tenía. */ /* ⚠️ `object-fit:contain` NO sirve para sacar al objeto de la caja: si el ancho es lo que limita —y aquí lo es, el libro es 0.70 de proporción dentro de un lecho 4/5— agrandar el alto de la caja no agranda al objeto ni un píxel, solo añade vacío. Se dimensiona por ANCHO y el alto sale solo de la proporción del archivo, que es idéntica en las cuatro variantes justo porque comparten lienzo. */ /* 🔴 `max-width:none` es obligatorio, no cosmético: el reseteo del sitio pone `img{max-width:100%}` y con él el `width:112%` se recortaba de vuelta a 100% —medido: 369 px, exactamente el ancho de la caja— así que el objeto NO salía y no había ningún error que lo delatara. */ /* 🔴 Y va FUERA DEL FLUJO, no como hijo de rejilla. Con `display:grid` + `align-self:end` el objeto seguía empezando en el borde de arriba: cuando el contenido no cabe, la fila de la rejilla CRECE hasta él y ya no queda espacio libre que repartir, así que el desborde sale por ABAJO —justo al revés de lo que se busca— y `end` deja de tener efecto. Medido: 587 px de libro dentro de 476 de área, y el borde superior clavado en el padding. Anclado abajo en absoluto, el sobrante sale por arriba, que es donde tiene que salir. El centrado va con `margin-left:-56%` (la mitad de 112%) y no con `translate` porque `translate` lo necesita el movimiento del puntero. */ /* ⚠️ En absoluto el % se mide contra el PADDING-BOX del lecho, no contra su área de contenido: el mismo `112%` pasó de 369 px a 492 y el libro se salía 26 px por cada costado, dejando el lecho como una tira detrás. 97% lo mantiene dentro a lo ancho y le da 99 px de sobrante por arriba, de los cuales 36 quedan fuera de la tarjeta: suficiente para que ocluya, lejos de parecer un error de maquetación. */ .planner .foto img{width:97%;max-width:none;height:auto; position:absolute;left:50%;margin-left:-48.5%;bottom:7%;z-index:2; /* La sombra propia del objeto. La foto trae una sombra de contacto horneada muy tenue; ésta la continúa hacia abajo para que el libro pese sobre el lecho en vez de estar pegado encima. Va en `filter` y no en `box-shadow` porque tiene que seguir la SILUETA del recorte, no su caja rectangular. */ /* La sombra se desplaza en CONTRA del giro (`--ry * -1.15`): con una luz fija, un objeto que gira a la derecha tira su sombra a la izquierda. Es el detalle que separa "una imagen con un efecto" de "un objeto con luz encima". */ filter:drop-shadow(calc(var(--ry, 0) * -1.15px) calc(6px + var(--p,1) * 10px) calc(12px + var(--p,1) * 16px) rgba(44,44,44,.20)); /* ── EL OBJETO RESPONDE AL PUNTERO ────────────────────────────────────── `--rx`/`--ry` las escribe planner.js desde la posición del cursor dentro del lecho. Reposo en 0: sin JS —o con movimiento reducido— el libro se queda recto y completo, nunca a medias. El giro es CORTO a propósito (±5°): un objeto real de 326 páginas no se bambolea. Lo que vende el peso no es la amplitud, es que la sombra se mueva en CONTRA, que es lo que hace una luz fija cuando el objeto gira. El origen va abajo (50% 88%) porque el libro está apoyado: si girara desde su centro se vería levitando, que es justo el defecto que acabamos de quitar. */ transform:perspective(1100px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)); transform-origin:50% 88%; /* La curva es la de intelligentchange.com, medida en vivo: es el líder de su nicho exacto —mismo producto, mismo público— y su salida es larga y suave. */ transition:opacity .3s var(--curva), transform .5s cubic-bezier(.16,.68,.43,.99), filter .5s cubic-bezier(.16,.68,.43,.99)} /* Mientras el dedo/cursor está encima, el seguimiento tiene que ser INMEDIATO: con los 500 ms de la salida, el libro iba siempre medio segundo detrás del puntero y se sentía a elástico, no a objeto. Rápido al seguir, lento al volver. */ .planner .foto[data-toca] img{transition:opacity .3s var(--curva), transform .09s linear} /* ⚠️ …pero el relevo de variante NO puede heredar esos 90 ms: si se cambia de color con el cursor encima del lecho —que es el caso normal, la muestra está al lado— el giro se atropellaba en un décimo de segundo y se veía a parpadeo. */ .planner .foto[data-toca] img.cambiando{ transition:opacity .3s var(--curva), transform .5s cubic-bezier(.16,.68,.43,.99)} /* El cambio de variante deja de ser un fundido: el libro GIRA. Es el mismo gesto de quien voltea un objeto en la mano para enseñar otro, y convierte el clic en la muestra —el gesto más muerto de la sección, según su propio comentario— en el momento con más vida del bloque. */ .planner .foto img.cambiando{opacity:0; transform:perspective(1100px) rotateY(-16deg) scale(.965)} /* ── LA VISTA DE DENTRO ──────────────────────────────────────────────────── La foto del interior es APAISADA (16:10) y el lecho es vertical: no se mete a la fuerza en la misma caja. Va como una LÁMINA centrada, más chica, con su propio canto y su sombra — el gesto de poner una foto encima de la mesa, no el de sustituir un cuadro por otro. Las dos fotos comparten el mismo hueco y se turnan por opacidad, así que la columna no cambia de alto al conmutar. */ /* 🔴 El botón que conmuta CAMBIA DE TEXTO, y "Ver la portada" es mucho más corto que "Ver todo lo que trae dentro": la fila de botones se recomponía y la sección brincaba 54 px al pulsar — medido, 954 → 900. Un control que mueve la página al usarse es peor que uno mudo. Se le fija el ancho del texto LARGO, así la caja no depende de en qué estado esté. */ /* ⚠️ Y el `min-width` hay que MEDIRLO, no estimarlo: puesto en 16.5rem computaba 220 px cuando el texto largo mide 272, o sea quedaba por debajo del contenido y no sujetaba nada — el salto seguía igual. `min()` para que en móvil no desborde. */ #btn-dentro{min-width:min(20.75rem, 100%)} /* En celular el ancho lo manda la columna (261 px), así que el texto largo cae a DOS renglones y el corto a uno: 52 px contra 39, y la sección volvía a brincar —13. Sujetar el ancho no basta cuando lo que cambia es el ALTO. Se reserva el alto de los dos renglones y el botón deja de depender de qué dice. */ @media (max-width:860px){ #btn-dentro{min-height:52px} } /* 🔴 Va con `img.dentro-foto` y no con `.dentro-foto` a secas. Tercera vez hoy con la misma trampa: `.planner .foto img` pesa (0,2,1) y le ganaba a (0,2,0), así que la lámina heredaba el `width:97%`, el `margin-left:-48.5%` y el `bottom:7%` de la PORTADA — medido, 426 px de ancho y 207 px fuera del lecho por la izquierda. Y hay que ANULAR expresamente lo heredado: subir la especificidad no borra las otras declaraciones, solo gana en las que se repiten. */ .planner .foto img.dentro-foto{position:absolute;left:50%;top:50%;bottom:auto; margin-left:0;z-index:3; /* Con la portada apagada del todo, la lámina puede ocupar el hueco de verdad: a 80% quedaba una estampita en medio de un lecho vacío. El anillo blanco de 6 px va POR FUERA de la caja, así que 93% es lo que cabe sin tocar el borde. */ width:93%;max-width:none;height:auto; translate:-50% -50%; border-radius:calc(var(--radio) * .62); box-shadow:0 18px 40px rgba(44,44,44,.20), 0 0 0 6px var(--blanco); opacity:0;scale:.965;pointer-events:none; transition:opacity .42s var(--curva), scale .42s var(--curva)} .planner .foto[data-vista=dentro] img.dentro-foto{opacity:1;scale:1} /* 🔴 La portada se va a CERO, no a un 12% "de recuerdo": al 12% quedaba un fantasma azul pálido detrás de la lámina que se leía a fallo de render — y azul pálido es literalmente uno de los fondos que ella pidió no ver. Un elemento a medio apagar no es una transparencia elegante, es basura visual. No se oculta con `display:none` porque entonces perdería su sitio; se va en opacidad y sigue reservando la altura del lecho. */ .planner .foto[data-vista=dentro] #foto-planner{opacity:0} /* Y con el libro fuera, su sombra de contacto tiene que irse con él: una sombra sin objeto que la proyecte es el detalle que delata una composición armada. Queda solo el halo, que es aire teñido y sí puede existir solo. */ .planner .foto[data-vista=dentro]::before{ background:radial-gradient(58% 46% at 44% 40%, color-mix(in oklch, var(--acento) 13%, var(--placa)), transparent 72%)} #foto-planner{transition:opacity .42s var(--curva)} @media (prefers-reduced-motion:reduce){ .planner .dentro-foto{transition:opacity .2s linear;scale:1} } /* El estado de entrada: al otro lado y SIN transición, para que el salto al punto de partida no se vea. Dura un cuadro. */ .planner .foto img.entra{opacity:0;transition:none; transform:perspective(1100px) rotateY(16deg) scale(.965)} @media (prefers-reduced-motion:reduce){ .planner .foto img,.planner .foto[data-toca] img{transform:none;transition:opacity .3s linear} .planner .foto img.cambiando{transform:none} } .planner .precio{margin-top:0.5rem;font-family:var(--serif);font-weight:300; font-size:2.125rem} .muestras{display:flex;gap:0.75rem;margin-top:1.625rem;list-style:none} .muestras{gap:1.0625rem} .muestras button{width:42px;height:42px;border-radius:50%;border:0; cursor:pointer;outline-offset:6px; transition:transform .3s var(--curva), box-shadow .3s var(--curva)} /* 🔴 EL ANILLO ES UNO SOLO Y VIAJA (16-ago). Antes cada disco tenía el suyo: el del que dejabas se apagaba y el del nuevo aparecía, o sea dos animaciones que se cruzan en el aire y ninguna dice de dónde a dónde fuiste. Un indicador que se DESPLAZA sí lo dice, y es lo que separa un selector de catálogo de uno cuidado. Va en un pseudo de la lista, no en un elemento nuevo: `