/* El mostrador (DECISIONS 41; referencia en docs/referencias/2026-11-02-el-mostrador/). El sitio es la
   tienda de Dogma: cada pieza va en su soporte, en una vitrina negra con luz de arriba, y debajo su
   etiqueta con la medida, para qué sirvió y dónde vive. La portada y los casos comparten estas piezas. */
:root { --metal: linear-gradient(90deg, #333, #6f6f6c 45%, #3a3a3a); --filo: #3a3a3a; --cota: #686868; }
.seccion { margin-block: clamp(4rem, 9vw, 7rem); }
.seccion-cab { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1rem clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.seccion-cab h2 { margin-top: .5rem; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.08; }
.seccion-cab h2 em, .bloque h2 em, .obra h3 em { color: var(--muted); }
.seccion-cab > p { max-width: 42ch; color: var(--muted); }

/* La vitrina y su luz. */
.vitrina { min-width: 0; border: 1px solid var(--line); background: #000; }
.vitrina-cab { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .9rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.vitrina-cab b { color: var(--ink); font-weight: 600; }
.luz { position: relative; background: radial-gradient(55% 14% at 48% calc(100% - var(--suelo)), rgb(255 255 255 / .09), transparent 70%), radial-gradient(60% 60% at 45% 0%, rgb(255 240 220 / .07), transparent 70%); }
.luz::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: var(--suelo); height: 1px; background: var(--filo); }

/* El sitio en el mostrador: la computadora y, delante, el teléfono. */
.mostrador { --suelo: clamp(1.75rem, 3vw, 2.75rem); display: flex; align-items: flex-end; padding: clamp(2.75rem, 5vw, 3rem) clamp(1rem, 3vw, 2.5rem) var(--suelo); }
.compu { position: relative; z-index: 1; width: 78%; margin-bottom: clamp(.6rem, 1vw, .9rem); padding: 0 clamp(4px, .5vw, 6px) clamp(4px, .5vw, 6px); background: #0b0b0b; border: 1px solid var(--filo); border-radius: clamp(5px, .7vw, 8px); }
.compu::after { content: ''; position: absolute; left: -3%; right: -3%; top: 100%; height: clamp(.6rem, 1vw, .9rem); background: #161616; border-top: 1px solid var(--filo); }
.compu-url { padding: clamp(2px, .4vw, 5px) 0; color: #8a8a86; font-size: clamp(.5rem, .8vw, .7rem); text-align: center; }
.compu-pantalla { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; border-radius: 2px; }
.compu-pantalla :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compu-pantalla video { opacity: 0; transition: opacity .4s; }
.compu-pantalla.ya-corre video { opacity: 1; }
.telefono { padding: clamp(3px, .45vw, 5px); background: #0b0b0b; border: 1px solid #4a4a4a; border-radius: clamp(12px, 1.8vw, 22px); }
.telefono img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: clamp(9px, 1.4vw, 17px); }
.telefono img.entera { object-fit: contain; background: #f6f1e7; }
.mostrador .telefono { position: absolute; z-index: 2; right: clamp(1rem, 4vw, 3.25rem); bottom: var(--suelo); width: clamp(5.5rem, 22%, 11rem); }

/* La etiqueta: medida, para qué y dónde, y la acción. */
.etiqueta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; margin: 0; border-top: 1px solid var(--line); }
.etiqueta > div { padding: .75rem .9rem; border-right: 1px solid var(--line); }
.etiqueta dt { color: var(--muted); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.etiqueta dd { margin: .1rem 0 0; font-size: .9375rem; line-height: 1.4; }
.etiqueta-ir { display: flex; align-items: center; padding: .6rem .75rem; }

/* Lo que quedó en el sitio: teléfonos con el sitio real, cada uno con su línea. */
.momentos { --n: 3; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: 0; list-style: none; }
.momento-pie { --suelo: 1.4rem; display: flex; justify-content: center; padding: 1.75rem 0 var(--suelo); }
.momento-pie::after { left: 0; right: 0; }
.momento-pie .telefono { position: relative; z-index: 1; width: min(72%, 14rem); }
.momento p { margin-top: 1rem; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.momento .num { margin-top: 1rem; color: #686868; font-size: .75rem; }
.momento h3 { margin-top: .15rem; font: 600 1rem/1.4 var(--body); letter-spacing: 0; }
.momento .num + h3 + p { margin-top: .25rem; }

/* Los bloques del caso: el título a la izquierda y el texto a la derecha. */
.bloque { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 5vw, 4rem); }
.bloque h2 { margin-top: .5rem; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.1; }
.bloque .texto p { max-width: 46ch; color: var(--soft); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.65; }
.bloque .texto p + p { margin-top: .75rem; }
.bloque + .bloque { margin-top: clamp(3.5rem, 7vw, 5rem); }
.bloque + .vitrina { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* La escena: piezas de la calle y pantallas, de pie sobre su suelo. */
.escena { --suelo: clamp(1.75rem, 3.5vw, 3.1rem); display: flex; align-items: flex-end; justify-content: center; gap: clamp(.75rem, 4vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 4vw, 4rem) var(--suelo); }
.pieza { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; }
.pieza-n { margin-bottom: .4rem; padding: 0 .35rem; border: 1px solid var(--filo); color: var(--muted); font-size: .65rem; line-height: 1.5; }
.cota { display: flex; align-items: center; gap: .4rem; width: 100%; margin-bottom: .4rem; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.cota::before, .cota::after { content: ''; flex: 1; height: 9px; background: linear-gradient(var(--cota), var(--cota)) center / 100% 1px no-repeat; border-left: 1px solid var(--cota); }
.cota::after { border-left: 0; border-right: 1px solid var(--cota); }
.cara { width: 100%; padding: 3px; background: #262626; box-shadow: inset 0 0 0 1px #585855; }
.cara img { width: 100%; }
.postes { display: flex; justify-content: space-between; width: 66%; height: var(--alto, 3rem); }
.postes::before, .postes::after { content: ''; width: clamp(5px, .6vw, 8px); background: var(--metal); }
.colgada { position: relative; width: 100%; padding-top: clamp(1.75rem, 4vw, 3.75rem); }
.colgada::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: clamp(1.75rem, 4vw, 3.75rem); border-inline: 1px solid var(--cota); }
.marco { width: 100%; padding: clamp(3px, .5vw, 6px); background: #0c0c0c; border: 1px solid var(--filo); border-radius: clamp(4px, .6vw, 6px); }
.marco video, .marco img { display: block; width: 100%; height: auto; background: #111; }
.pie55 { width: clamp(8px, 1vw, 14px); height: clamp(1.75rem, 4vw, 3.5rem); background: var(--metal); }
.pie55 + span { width: 46%; height: clamp(4px, .5vw, 6px); border-radius: 3px 3px 0 0; background: var(--filo); }
.video-redes { display: block; width: 100%; text-decoration: none; }
.video-redes .telefono { display: block; }
.video-redes .telefono img { aspect-ratio: 9 / 16; object-position: center; }

/* La lista de piezas debajo de la escena. */
.piezas { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.piezas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem .75rem; padding: .75rem .9rem; border-right: 1px solid var(--line); font-size: .9375rem; line-height: 1.4; }
.piezas li:last-child { border-right: 0; }
.piezas .n { color: #686868; font-size: .75rem; padding-top: .15rem; }
.piezas small { display: block; color: var(--muted); font-size: .8125rem; }
.piezas .medida { color: var(--muted); text-align: right; white-space: nowrap; }
.piezas-uso { padding: .75rem .9rem; border-top: 1px solid var(--line); color: var(--soft); font-size: .9375rem; }

/* Las medidas de cada escena, a escala entre sus piezas. */
.momentos-4 { --n: 4; }
.piezas-1 { --n: 1; }
.piezas-1 li { grid-template-columns: auto minmax(0, 1fr) auto; }
.pz-sa { width: 44%; }
.pz-ch { width: 13.2%; }
.pz-ban { width: 9%; }
.postes-sa { --alto: clamp(2.5rem, 6vw, 4.5rem); }
.postes-ch { --alto: clamp(.8rem, 2vw, 1.5rem); }
.escena-pantallas { justify-content: space-between; }
.pz-unimall { width: 46%; align-self: flex-start; }
.pz-55 { width: 16%; }
.pz-redes { width: 12%; min-width: 2.75rem; }

/* El banderín: la tela entre los dos brazos de su asta. Gira despacio para mostrar sus dos caras. */
.banderin { position: relative; width: 100%; padding: 10px 0 0 clamp(10px, 1.4vw, 16px); }
.banderin::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(4px, .5vw, 6px); background: var(--metal); }
.banderin-tela { position: relative; perspective: 900px; }
.banderin-tela::before, .banderin-tela::after { content: ''; position: absolute; left: calc(-1 * clamp(10px, 1.4vw, 16px)); right: -3px; height: 2px; background: #4f4f4d; }
.banderin-tela::before { top: -4px; }
.banderin-tela::after { bottom: -4px; }
.banderin-giro { display: grid; transform-style: preserve-3d; }
.banderin-giro img { grid-area: 1 / 1; width: 100%; backface-visibility: hidden; }
.banderin-giro img + img { transform: rotateY(180deg); }

/* El tríptico: llega plano y se dobla en su prisma de tres caras, visto un poco desde arriba. */
.triangulo { --cara: clamp(4.5rem, 9vw, 7rem); }
.triangulo-escena { position: relative; width: calc(var(--cara) * 3); height: calc(var(--cara) * 4.3); perspective: 1600px; perspective-origin: 50% 25%; overflow: clip; }
.triangulo-camara, .triangulo-giro { position: absolute; left: 0; top: calc(var(--cara) * .3); width: 100%; height: calc(var(--cara) * 3.902); transform-style: preserve-3d; }
.triangulo-camara { transform-origin: 50% 100% calc(var(--cara) * -.2887); transform: rotateX(-13deg); }
.triangulo-giro { top: 0; transform-origin: 50% 50% calc(var(--cara) * -.2887); transform: rotateY(-45deg); }
.triangulo-cara { position: absolute; top: 0; left: var(--cara); width: var(--cara); height: 100%; backface-visibility: hidden; }
.triangulo-cara img { width: 100%; height: 100%; }
.triangulo-cara::after { content: ''; position: absolute; inset: 0; background: #000; opacity: 0; }
.triangulo-cara.cara-1 { left: 0; transform-origin: right; transform: rotateY(-120deg); }
.triangulo-cara.cara-3 { left: calc(var(--cara) * 2); transform-origin: left; transform: rotateY(120deg); }
.triangulo-cara.cara-1::after, .triangulo-cara.cara-3::after { opacity: .42; }
.triangulo-tapa { position: absolute; left: var(--cara); top: calc(var(--cara) * -.866); width: var(--cara); height: calc(var(--cara) * .866); background: #d8cdb9; clip-path: polygon(0 100%, 100% 100%, 50% 0); transform-origin: bottom; transform: rotateX(90deg); }

/* El enlace al proceso. */
.al-proceso { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; margin-top: clamp(3.5rem, 7vw, 5rem); padding-block: 1.25rem; border-block: 1px solid var(--line); }
.al-proceso p { color: var(--muted); }
.al-proceso p strong { margin-right: .5rem; color: var(--ink); font-weight: 600; }

/* La ficha del caso: el nombre, la frase de Ale y el sitio en su vitrina. */
.ficha-caso { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: 2rem clamp(2rem, 5vw, 3.5rem); align-items: end; padding-block: clamp(1.5rem, 3vw, 2rem) 0; }
.ficha-caso h1 { margin: .5rem 0 .75rem; font-size: clamp(3rem, 6vw, 4.75rem); line-height: 1; letter-spacing: -.03em; }
.ficha-caso .frase { max-width: 24ch; margin-bottom: 1.75rem; color: var(--soft); font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.45; }
.ficha-caso .back-link { margin-bottom: 2rem; }

/* La portada: el título de Ale y, al lado, la vitrina con tres piezas reales. */
.inicio { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 2.5rem clamp(2rem, 5vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.inicio h1 { margin: .75rem 0 1.1rem; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -.03em; }
.inicio h1 em { color: var(--muted); }
.inicio .lede { max-width: 32ch; margin-bottom: 1.75rem; color: var(--soft); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; }
.inicio-acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.repisa { --suelo: 0px; display: grid; grid-template-columns: 1.5fr 1fr .9fr; gap: clamp(.9rem, 2.5vw, 1.75rem); align-items: end; padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.75rem) 0; background: radial-gradient(40% 70% at 20% 0%, rgb(255 240 220 / .08), transparent 70%), radial-gradient(40% 70% at 60% 0%, rgb(255 240 220 / .06), transparent 70%), radial-gradient(40% 70% at 90% 0%, rgb(255 240 220 / .06), transparent 70%); }
.repisa::after { left: 0; right: 0; }
.repisa .pieza { height: 100%; justify-content: flex-end; }
.repisa .postes-repisa { --alto: clamp(2.5rem, 7vw, 5.5rem); }
.repisa .pieza-55 { width: 64%; justify-self: center; }
.repisa .medalla { width: 86%; margin-bottom: clamp(.75rem, 2vw, 1.5rem); }
.etiquetas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etiquetas li { padding: .7rem .85rem; border-right: 1px solid var(--line); color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.etiquetas li:last-child { border-right: 0; }
.etiquetas b { display: block; color: var(--ink); font-weight: 600; }

/* «Trabajo»: cada caso, un adelanto de su sitio (DECISIONS 42; referencia en
   docs/referencias/2026-11-03-el-adelanto/). Tres pantallas reales para hojear y la puerta al caso. */
.obra { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem clamp(2rem, 5vw, 3.5rem); align-items: end; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.obra:last-child { border-bottom: 1px solid var(--line); }
.obra-texto { padding-bottom: clamp(1rem, 4vw, 3.5rem); }
.obra h3 { margin: .35rem 0 .6rem; font: var(--display-weight) clamp(2.5rem, 4.6vw, 4rem)/1 var(--display); letter-spacing: -.025em; }
.obra-texto > p:not(.eyebrow) { max-width: 30ch; color: var(--soft); }
.obra-texto .obra-sitio { margin-top: .5rem; color: #8a8a86; font-size: .8125rem; }
.adelanto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.25rem); align-items: end; }
.adelanto-pantalla, .adelanto-ir { min-width: 0; }
.adelanto-pantalla:nth-child(odd) { translate: 0 -1.5rem; }
.adelanto-pantalla figcaption, .adelanto-pie { margin-top: .85rem; font-size: .9375rem; line-height: 1.4; }
.adelanto-pie { display: block; color: var(--muted); }
.adelanto-ir { color: var(--ink); text-decoration: none; }
.adelanto-puerta { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .9rem; aspect-ratio: 390 / 844; padding: 0 1rem; border: 1px solid var(--filo); border-radius: clamp(12px, 1.8vw, 22px); font-weight: 600; text-align: center; transition: border-color 240ms var(--ease); }
.adelanto-flecha { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--ink); color: var(--void); transition: background-color 160ms, translate 240ms var(--ease); }
.adelanto-ir:hover .adelanto-puerta { border-color: #6a6a66; }
.adelanto-ir:hover .adelanto-flecha { background: #d5d5d0; translate: .2rem 0; }
.obra-ir { display: none; gap: .75rem; }
@media (prefers-reduced-motion: no-preference) {
  .adelanto > * { transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .adelanto > :nth-child(2) { transition-delay: .12s; }
  .adelanto > :nth-child(3) { transition-delay: .24s; }
  .adelanto > :nth-child(4) { transition-delay: .36s; }
  .adelanto.por-aparecer > * { opacity: 0; transform: translateY(2.5rem); }
}

/* «Servicios»: los cuatro de Ale, con lo que ya hicimos para clientes. */
.servicios-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.servicio { display: flex; flex-direction: column; gap: .8rem; padding: 1.4rem 1.25rem 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.servicio h3 { font: var(--display-weight) clamp(1.6rem, 2.2vw, 1.9rem)/1.1 var(--display); letter-spacing: -.02em; }
.servicio > p { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.servicio-mini { display: flex; gap: .35rem; height: 3.25rem; }
.servicio-mini img { width: auto; height: 100%; border: 1px solid var(--line); background: #0b0b0b; }
.servicio-hecho { margin-top: auto; padding-top: .7rem; border-top: 1px solid #1f1f1f; color: var(--soft); font-size: .8125rem; }
.servicio-hecho span { display: block; color: var(--muted); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.servicio .button-outline { width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .banderin-giro { animation: banderin 14s var(--ease) 2s infinite; }
  .por-aparecer .banderin-giro { animation: none; }
  .triangulo-cara, .triangulo-giro, .triangulo-camara { transition: transform 1.6s var(--ease) .5s; }
  .triangulo-cara::after { transition: opacity 1.6s var(--ease) .5s; }
  .triangulo-tapa { transition: opacity .6s var(--ease) 1.8s; }
  .triangulo.por-aparecer :is(.triangulo-cara, .triangulo-giro, .triangulo-camara) { transform: none; }
  .triangulo.por-aparecer .triangulo-cara::after, .triangulo.por-aparecer .triangulo-tapa { opacity: 0; }
  .triangulo:not(.por-aparecer) .triangulo-giro { animation: triangulo 28s linear 2.1s infinite; }
  /* La luz viene de adelante a la izquierda: cada cara se aclara al mirarla y se apaga al irse. */
  .triangulo:not(.por-aparecer) .triangulo-cara::after { animation: sombra-2 28s linear 2.1s infinite; }
  .triangulo:not(.por-aparecer) .cara-1::after { animation-name: sombra-1; }
  .triangulo:not(.por-aparecer) .cara-3::after { animation-name: sombra-3; }
}
@keyframes banderin { 0%, 40% { transform: none; } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes triangulo { from { transform: rotateY(-45deg); } to { transform: rotateY(-405deg); } }
@keyframes sombra-1 { 0% { opacity: 0.42; } 37.5% { opacity: 0.42; } 39.583% { opacity: 0.4; } 41.667% { opacity: 0.35; } 43.75% { opacity: 0.29; } 45.833% { opacity: 0.24; } 47.917% { opacity: 0.19; } 50% { opacity: 0.15; } 52.083% { opacity: 0.11; } 54.167% { opacity: 0.08; } 56.25% { opacity: 0.05; } 58.333% { opacity: 0.03; } 60.417% { opacity: 0.01; } 62.5% { opacity: 0; } 64.583% { opacity: 0; } 66.667% { opacity: 0.01; } 68.75% { opacity: 0.02; } 70.833% { opacity: 0.04; } 72.917% { opacity: 0.07; } 75% { opacity: 0.1; } 77.083% { opacity: 0.14; } 79.167% { opacity: 0.18; } 81.25% { opacity: 0.23; } 83.333% { opacity: 0.28; } 85.417% { opacity: 0.33; } 87.5% { opacity: 0.38; } 89.583% { opacity: 0.42; } 100% { opacity: 0.42; } }
@keyframes sombra-2 { 0% { opacity: 0.01; } 2.083% { opacity: 0.02; } 4.167% { opacity: 0.04; } 6.25% { opacity: 0.07; } 8.333% { opacity: 0.1; } 10.417% { opacity: 0.14; } 12.5% { opacity: 0.18; } 14.583% { opacity: 0.23; } 16.667% { opacity: 0.28; } 18.75% { opacity: 0.33; } 20.833% { opacity: 0.38; } 22.917% { opacity: 0.42; } 70.833% { opacity: 0.42; } 72.917% { opacity: 0.4; } 75% { opacity: 0.35; } 77.083% { opacity: 0.29; } 79.167% { opacity: 0.24; } 81.25% { opacity: 0.19; } 83.333% { opacity: 0.15; } 85.417% { opacity: 0.11; } 87.5% { opacity: 0.08; } 89.583% { opacity: 0.05; } 91.667% { opacity: 0.03; } 93.75% { opacity: 0.01; } 95.833% { opacity: 0; } 97.917% { opacity: 0; } 100% { opacity: 0.01; } }
@keyframes sombra-3 { 0% { opacity: 0.42; } 4.167% { opacity: 0.42; } 6.25% { opacity: 0.4; } 8.333% { opacity: 0.35; } 10.417% { opacity: 0.29; } 12.5% { opacity: 0.24; } 14.583% { opacity: 0.19; } 16.667% { opacity: 0.15; } 18.75% { opacity: 0.11; } 20.833% { opacity: 0.08; } 22.917% { opacity: 0.05; } 25% { opacity: 0.03; } 27.083% { opacity: 0.01; } 29.167% { opacity: 0; } 31.25% { opacity: 0; } 33.333% { opacity: 0.01; } 35.417% { opacity: 0.02; } 37.5% { opacity: 0.04; } 39.583% { opacity: 0.07; } 41.667% { opacity: 0.1; } 43.75% { opacity: 0.14; } 45.833% { opacity: 0.18; } 47.917% { opacity: 0.23; } 50% { opacity: 0.28; } 52.083% { opacity: 0.33; } 54.167% { opacity: 0.38; } 56.25% { opacity: 0.42; } 100% { opacity: 0.42; } }

@media (max-width: 56rem) {
  .seccion-cab, .bloque, .ficha-caso, .inicio, .obra { grid-template-columns: minmax(0, 1fr); }
  .servicios-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etiqueta { grid-template-columns: minmax(0, 1fr); }
  .etiqueta > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .75rem; padding: .6rem .9rem; border-right: 0; border-bottom: 1px solid #1d1d1d; }
  .etiqueta dt { padding-top: .2rem; }
  .etiqueta dd { margin: 0; }
  .etiqueta-ir { padding: .75rem .9rem; }
  .etiqueta-ir .button-outline { width: 100%; }
  .piezas { grid-template-columns: minmax(0, 1fr); }
  .piezas li { border-right: 0; border-bottom: 1px solid #1d1d1d; }
  .piezas li:last-child { border-bottom: 0; }
}
@media (max-width: 48rem) {
  /* En el teléfono, las pantallas se deslizan de lado, con la tercera asomada, y la puerta es un botón. */
  .adelanto { display: flex; align-items: start; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc((100vw - 100%) / -2); padding-inline: calc((100vw - 100%) / 2); scrollbar-width: none; }
  .adelanto::-webkit-scrollbar { display: none; }
  .adelanto-pantalla { flex: 0 0 min(10rem, 38vw); scroll-snap-align: center; }
  .adelanto-pantalla:nth-child(odd) { translate: none; }
  .adelanto-ir { display: none; }
  .obra-texto { padding-bottom: 0; }
  .obra-ir { display: inline-flex; justify-content: space-between; width: 100%; }
  /* En el teléfono, los momentos se deslizan de lado. */
  .momentos { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc((100vw - 100%) / -2); padding-inline: calc((100vw - 100%) / 2); scrollbar-width: none; }
  .momentos::-webkit-scrollbar { display: none; }
  .momento { flex: 0 0 min(15rem, 66vw); scroll-snap-align: center; }
  .etiquetas { grid-template-columns: minmax(0, 1fr); }
  .etiquetas li { border-right: 0; border-bottom: 1px solid #1d1d1d; }
  .etiquetas li:last-child { border-bottom: 0; }
  .servicios-lista { grid-template-columns: minmax(0, 1fr); }
  .inicio-acciones > * { flex: 1; padding-inline: .9rem; white-space: nowrap; }
  .pz-sa { width: 52%; }
  .pz-ch { width: 20%; }
  .pz-ban { width: 15%; }
  .escena-pantallas { gap: .6rem; padding-inline: .9rem; }
  .pz-unimall { width: 48%; }
  .pz-55 { width: 18%; }
  .pz-redes { width: 14%; }
}