/* ══════════════════════════════════════════════════════════════════
   BAZAR JULY · IMPRESIONES Y FOTOCOPIAS — Santiago Centro — demo CristalWeb
   ------------------------------------------------------------------
   DIRECCIÓN: «BOND Y MAGENTA DE PROCESO». Papel bond blanco, negro de
   tinta, y como único acento el magenta de cuatricromía —el de la tira
   de control que sale en el borde de todo pliego— con los otros tres
   (cian, amarillo, negro) presentes SÓLO como firma gráfica: cuatro
   cuadraditos juntos, chicos, junto a cada rótulo. Transmite oficio de
   imprenta sin disfraz de agencia: el color acá es un dato técnico.

   Deslinde escrito (registro de 240 filas, mirado entero):
     · No hay magenta en el registro (0 filas). El «magenta neón solo»
       de la 19 no se construyó; y de todos modos el de acá es de
       PROCESO (#C4006E, oscurecido para llegar a 5,9:1 sobre blanco),
       no un neón.
     · La 209 lleva amarillo a rayas; acá el amarillo aparece sólo en
       un cuadradito de 8 px dentro de la tira CMYK, nunca como acento.
     · Papel blanco + tinta negra existe en las cuatro monocromas del
       registro (71-ahorro-led, etc.); ésta NO es monocroma: tiene un
       acento, y el acento tiene nombre de imprenta.

   TRÍO
     Display · Libre Bodoni — 0 usos. La didona de las portadas
       impresas: contraste alto, remates finos, olor a tipografía de
       plomo. Va grande y en peso 400; en 700 sólo el nombre.
     Cuerpo  · Albert Sans — tercera aparición, lejos en rubro.
       Geométrica clara, sin ruido junto a una Bodoni.
     Dato    · Xanh Mono — sexta aparición, ninguna de imprenta. Es la
       única mono con SERIFAS del catálogo: la tira de control, las
       cantidades y los plazos se leen como impresos, no como código.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --bond:      #FFFFFF;
  --bond-2:    #F3F2EE;
  --tinta:     #141414;
  --medio:     #56544F;   /* 6,9:1 sobre bond */
  --linea:     rgba(20,20,20,.14);
  --magenta:   #C4006E;   /* único acento — 5,9:1 sobre bond */
  --magenta-o: #A3005C;   /* hover */
  --magenta-l: #FF8AC8;   /* sobre tinta: 8,1:1 */
  --magenta-s: #FBE6F1;   /* fondo suave */
  /* La tira de control. Sólo dentro de .cmyk y en los puntos de la
     escena; nunca como color de texto ni de fondo. */
  --cian:      #00AEEF;
  --amarillo:  #FFE800;
  --negro:     #141414;

  --display: 'Libre Bodoni', 'Bodoni MT', 'Didot', 'Georgia', serif;
  --cuerpo:  'Albert Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:    'Xanh Mono', 'Courier New', ui-monospace, monospace;

  --p--1: clamp(.8rem, .77rem + .12vw, .88rem);
  --p-0:  clamp(1rem, .96rem + .2vw, 1.1rem);
  --p-1:  clamp(1.15rem, 1.08rem + .3vw, 1.35rem);
  --p-2:  clamp(1.5rem, 1.3rem + .8vw, 2.1rem);
  --p-3:  clamp(1.9rem, 1.5rem + 1.7vw, 3.1rem);
  --p-4:  clamp(2.5rem, 1.7rem + 3.6vw, 5rem);

  --aire:  clamp(4rem, 2.4rem + 5.5vw, 7.5rem);
  --ancho: min(100% - 2.5rem, 1120px);
  --sale:   cubic-bezier(.16, 1, .3, 1);
  --sale-2: cubic-bezier(.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--bond); color: var(--tinta); font-family: var(--cuerpo); font-size: var(--p-0); line-height: 1.66; }
img { max-width: 100%; height: auto; }
a { color: var(--magenta); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
.ancho { width: var(--ancho); margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -.005em; }
h3 { font-family: var(--cuerpo); font-weight: 600; letter-spacing: 0; line-height: 1.3; }

/* La tira de control: cian, magenta, amarillo, negro. Siempre los
   cuatro, siempre juntos, siempre chicos. */
.cmyk { display: inline-flex; gap: 2px; flex: none; }
.cmyk i { display: block; width: 10px; height: 10px; }
.cmyk i:nth-child(1) { background: var(--cian); }
.cmyk i:nth-child(2) { background: var(--magenta); }
.cmyk i:nth-child(3) { background: var(--amarillo); }
.cmyk i:nth-child(4) { background: var(--negro); }
.cmyk--chico i { width: 7px; height: 7px; }
.cab .cmyk { flex-wrap: wrap; width: 24px; gap: 2px; }
.cab .cmyk i { width: 11px; height: 11px; }

.rotulo { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .12em; text-transform: uppercase; color: var(--medio); margin: 0 0 .8rem; display: flex; align-items: center; gap: .7rem; }
.rotulo--claro { color: #B9B5AD; }
.titulo { font-size: var(--p-3); max-width: 24ch; margin-bottom: 1rem; text-wrap: balance; }
.titulo--claro { color: var(--bond); }
.entradilla { max-width: 60ch; color: var(--medio); font-size: var(--p-1); margin: 0 0 2rem; }
.entradilla b { color: var(--tinta); font-weight: 600; }
.sobre { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .1em; text-transform: uppercase; color: var(--medio); margin: 0 0 1.2rem; }

/* ── Dato de ejemplo ───────────────────────────────────────────── */
.ej { position: relative; border: 1px dashed rgba(196,0,110,.45); border-radius: 2px; }
.ej::after {
  content: attr(data-ejemplo); position: absolute; top: -.62rem; right: .6rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--magenta); background: var(--bond); padding: 0 .35rem; white-space: nowrap;
}
p.ej { padding: .45rem .7rem .35rem; margin-top: .7rem; }

/* ── Botones ───────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .85rem 1.6rem;
  border: 1px solid var(--tinta); border-radius: 2px;
  background: var(--tinta); color: var(--bond);
  font-family: var(--cuerpo); font-size: var(--p-0); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--sale), background-color .18s, border-color .18s;
}
.boton:hover { background: var(--magenta); border-color: var(--magenta); transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton--linea { background: transparent; color: var(--tinta); }
.boton--linea:hover { background: var(--magenta-s); color: var(--magenta); }
.boton--chico { min-height: 40px; padding: .5rem 1.1rem; font-size: var(--p--1); }

/* ── Propuesta ─────────────────────────────────────────────────── */
.propuesta { background: var(--tinta); color: var(--bond); padding: .85rem clamp(1.2rem, 5vw, 3rem); border-bottom: 3px solid var(--magenta); }
.propuesta__que { margin: 0 0 .3rem; font-size: var(--p--1); font-family: var(--mono); }
.propuesta__que b { color: var(--magenta-l); }
.propuesta__gancho { margin: 0; font-size: var(--p--1); color: #B9B5AD; max-width: 96ch; line-height: 1.5; }

/* ── Cabecera ──────────────────────────────────────────────────── */
.cab { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 1rem; padding: .7rem clamp(1rem, 4vw, 2.4rem); background: rgba(255,255,255,.94); border-bottom: 1px solid var(--linea); transition: box-shadow .2s, background-color .2s; }
.cab--flota { box-shadow: 0 6px 22px -16px rgba(20,20,20,.6); background: rgba(255,255,255,.99); }
.cab__marca { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--tinta); min-height: 44px; }
.cab__nombre { font-family: var(--display); font-weight: 700; font-size: var(--p-1); line-height: 1; }
.cab__sub { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--medio); margin-top: .3rem; font-weight: 400; }
.cab__nav { display: flex; gap: 1.2rem; margin-left: auto; overflow-x: auto; }
.cab__nav a { color: var(--medio); text-decoration: none; font-size: var(--p--1); white-space: nowrap; padding: .4rem 0; border-bottom: 2px solid transparent; }
.cab__nav a:hover { color: var(--magenta); border-bottom-color: var(--magenta); }
.cab__cta { margin-left: .4rem; }
@media (max-width: 1000px) { .cab__nav { display: none; } .cab__cta { margin-left: auto; min-height: 44px; } }

/* ── Portada ───────────────────────────────────────────────────── */
.portada { position: relative; isolation: isolate; min-height: min(86vh, 760px); display: flex; flex-direction: column; justify-content: center; padding: var(--aire) 0; overflow: hidden; }
.portada__foto { position: absolute; inset: 0; z-index: -2; }
.portada__foto img, .portada__video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 74% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 32%, rgba(0,0,0,.16) 50%, rgba(0,0,0,.55) 68%, #000 84%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 32%, rgba(0,0,0,.16) 50%, rgba(0,0,0,.55) 68%, #000 84%, #000 100%);
}
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
      rgba(255,255,255,1) 0%, rgba(255,255,255,1) 36%,
      rgba(255,255,255,.82) 52%, rgba(255,255,255,.45) 68%,
      rgba(255,255,255,.18) 86%, rgba(255,255,255,0) 100%);
}
@media (max-width: 760px) {
  .portada__foto img, .portada__video { object-position: 60% 40%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 66%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 66%); }
  .portada__foto::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 34%, rgba(255,255,255,1) 60%); }
  .portada { justify-content: flex-end; min-height: 0; padding-top: 44vh; }
}
.portada__cols { width: var(--ancho); margin-inline: auto; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.portada__titulo { font-size: var(--p-4); max-width: 14ch; }
.portada__titulo span { display: block; }
.portada__titulo span:nth-child(2) { color: var(--magenta); font-style: italic; }
.portada__bajada { max-width: 46ch; color: var(--medio); font-size: var(--p-1); margin: 1.4rem 0 2rem; }
.portada__bajada b { color: var(--tinta); font-weight: 600; }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* La escena: la impresora y las hojas que salen. */
.esc { justify-self: end; width: min(100%, 360px); position: relative; }
.esc__svg { display: block; width: 100%; height: auto; overflow: visible; }
.esc__hoja rect:first-child { fill: var(--bond); stroke: var(--tinta); stroke-width: 1.2; }
.esc__hoja { transform-box: fill-box; transform-origin: 50% 100%; }
.esc__hoja:nth-child(2) { transform: rotate(-1.5deg); }
.esc__hoja:nth-child(3) { transform: rotate(1deg); }
.esc__hoja:nth-child(4) { transform: rotate(-.5deg); }
.esc__hoja:nth-child(5) { transform: rotate(2deg); }
.esc__linea { fill: var(--tinta); opacity: .35; }
.esc__punto--c { fill: var(--cian); }
.esc__punto--m { fill: var(--magenta); }
.esc__punto--y { fill: var(--amarillo); }
.esc__punto--k { fill: var(--negro); }
.esc__cuerpo rect:first-child { fill: var(--tinta); }
.esc__ranura { fill: var(--bond-2); }
.esc__panel { fill: #3A3A3A; }
.esc__led { fill: var(--magenta-l); }
@media (max-width: 760px) {
  .portada__cols { grid-template-columns: 1fr; }
  .esc { justify-self: start; width: min(56%, 220px); margin-top: 1.4rem; }
}

/* ── Ambiente · la serie (movimiento-web § la serie) ───────────────
   Ocho marcas bajo la impresora que se encienden una tras otra y se
   apagan en el mismo orden: el contador de la copiadora. Sólo
   opacity. Con reduced-motion no existe. */
.amb--serie { position: absolute; left: 12.5%; right: 12.5%; bottom: -1.2rem; display: flex; justify-content: space-between; pointer-events: none; }
.amb--serie i { width: 8px; height: 8px; background: var(--magenta); opacity: .12; animation: serie 4s linear infinite; }
.amb--serie i:nth-child(1) { animation-delay: 0s; }
.amb--serie i:nth-child(2) { animation-delay: .25s; }
.amb--serie i:nth-child(3) { animation-delay: .5s; }
.amb--serie i:nth-child(4) { animation-delay: .75s; }
.amb--serie i:nth-child(5) { animation-delay: 1s; }
.amb--serie i:nth-child(6) { animation-delay: 1.25s; }
.amb--serie i:nth-child(7) { animation-delay: 1.5s; }
.amb--serie i:nth-child(8) { animation-delay: 1.75s; }
@keyframes serie { 0%, 8% { opacity: .12; } 14%, 50% { opacity: 1; } 56%, 100% { opacity: .12; } }
@media (prefers-reduced-motion: reduce) { .amb--serie { display: none; } }

/* ── Cifras ────────────────────────────────────────────────────── */
.cifras { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--bond-2); }
.cifras__lista { list-style: none; margin: 0 auto; padding: 1.6rem 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cifras__lista li { display: grid; gap: .15rem; }
.cifras__lista b { font-family: var(--display); font-weight: 400; font-size: var(--p-3); line-height: 1; color: var(--tinta); transform-origin: 0 60%; font-variant-numeric: tabular-nums; }
.cifras__lista span { font-size: var(--p--1); color: var(--medio); }

/* ── PIEZA FIRMA · cotiza sin venir ────────────────────────────── */
.cotiza { padding: var(--aire) 0; }
.cotiza__cols { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); align-items: start; margin-top: .5rem; }
@media (max-width: 860px) { .cotiza__cols { grid-template-columns: 1fr; } }
.cot { padding: clamp(1.2rem, 3vw, 2rem); background: var(--bond-2); }
.cot.ej::after { background: var(--bond-2); }
.cot__campos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cot label { display: grid; gap: .35rem; font-family: var(--mono); font-size: var(--p--1); letter-spacing: .06em; text-transform: uppercase; color: var(--medio); }
.cot input[type=text], .cot input[type=number], .cot select {
  width: 100%; min-height: 48px; padding: .6rem .8rem;
  background: var(--bond); color: var(--tinta); border: 1px solid var(--linea); border-radius: 2px;
  font-family: var(--cuerpo); font-size: var(--p-0); letter-spacing: 0; text-transform: none;
}
.cot input:focus, .cot select:focus { border-color: var(--magenta); outline: none; box-shadow: 0 0 0 3px rgba(196,0,110,.18); }
.cot input::placeholder { color: #8E8B84; }
.cot__radios { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .3rem; align-content: start; }
.cot__radios legend { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .06em; text-transform: uppercase; color: var(--medio); padding: 0; margin-bottom: .35rem; }
.cot__radios label { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-family: var(--cuerpo); font-size: var(--p-0); letter-spacing: 0; text-transform: none; color: var(--tinta); cursor: pointer; }
.cot__radios input { width: 18px; height: 18px; margin: 0; accent-color: var(--magenta); }
.cot__salida { margin: 1.2rem 0 0; font-family: var(--mono); font-size: var(--p-0); color: var(--tinta); white-space: pre-wrap; border-left: 3px solid var(--magenta); padding: .6rem .9rem; background: var(--bond); }
.cot__salida:empty { display: none; }
.cot__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.cot__nota { margin: 1rem 0 0; font-size: var(--p--1); color: var(--medio); max-width: 72ch; }
.tiempos { padding: 1.4rem; background: var(--bond); }
.tiempos__t { font-family: var(--display); font-weight: 400; font-size: var(--p-2); margin-bottom: .8rem; }
.tiempos__tabla { width: 100%; border-collapse: collapse; font-size: var(--p--1); }
.tiempos__tabla th, .tiempos__tabla td { text-align: left; padding: .6rem .2rem; border-top: 1px solid var(--linea); vertical-align: top; }
.tiempos__tabla th { font-weight: 500; color: var(--tinta); }
.tiempos__tabla td { font-family: var(--mono); color: var(--magenta); white-space: nowrap; }
.tiempos__nota { margin: 1rem 0 0; font-size: var(--p--1); color: var(--medio); }

/* ── Tajo ──────────────────────────────────────────────────────── */
.tajo { position: relative; margin: 0; isolation: isolate; min-height: min(52vh, 440px); display: flex; align-items: flex-end; overflow: hidden; }
.tajo img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.tajo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20,20,20,.94) 0%, rgba(20,20,20,.76) 36%, rgba(20,20,20,.3) 64%, rgba(20,20,20,0) 92%); }
.tajo__txt { width: var(--ancho); margin-inline: auto; padding: 2.5rem 0; }
.tajo__txt h2 { font-size: var(--p-3); max-width: 22ch; color: var(--bond); }
.tajo__txt p { max-width: 52ch; color: #C9C5BD; margin: .9rem 0 0; }

/* ── El archivo, con telón ─────────────────────────────────────── */
.archivo { padding: var(--aire) 0; background: var(--bond-2); }
.con-telon { position: relative; isolation: isolate; overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.telon img, .telon__video {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: .1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 76%, transparent 100%);
}
.reglas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: regla; }
.regla { padding: 1.3rem 1.3rem 1.3rem; background: var(--bond); border-top: 3px solid var(--tinta); }
.regla__n { display: block; font-family: var(--display); font-size: var(--p-3); line-height: 1; color: var(--magenta); margin-bottom: .6rem; }
.regla h3 { font-size: var(--p-0); margin-bottom: .4rem; }
.regla p { margin: 0; color: var(--medio); font-size: var(--p--1); }
.archivo__cierre { margin: 1.6rem 0 0; font-size: var(--p-1); color: var(--medio); max-width: 60ch; }
.archivo__cierre b { color: var(--tinta); }

/* ── Qué imprimimos ────────────────────────────────────────────── */
.imprimimos { padding: var(--aire) 0; }
.fam { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border-top: 1px solid var(--linea); }
.fam__i { padding: 1.6rem 1.2rem 1.6rem 0; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: 3rem 1fr; gap: .2rem 1rem; align-content: start; }
.fam__n { grid-row: 1 / 3; font-family: var(--mono); font-size: var(--p--1); color: var(--magenta); padding-top: .35rem; }
.fam__i h3 { font-size: var(--p-1); font-family: var(--display); font-weight: 400; }
.fam__i p { margin: 0; font-size: var(--p--1); color: var(--medio); max-width: 46ch; }
.fam__i p.ej { margin-top: .6rem; }
.bazar { margin-top: 2rem; padding: 1.4rem 1.6rem; background: var(--magenta-s); }
.bazar.ej::after { background: var(--magenta-s); }
.bazar__t { font-family: var(--display); font-weight: 400; font-size: var(--p-2); margin-bottom: .4rem; }
.bazar p { margin: 0; color: var(--medio); max-width: 70ch; }

/* ── Mitades · dónde ───────────────────────────────────────────── */
.mitades { display: grid; grid-template-columns: 1fr 1fr; min-height: 66vh; background: var(--bond-2); }
.mitades__foto { overflow: hidden; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.mitades__txt { padding: var(--aire) clamp(1.25rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; }
.mitades__txt > p { color: var(--medio); max-width: 50ch; margin: 0 0 1.4rem; }
.mitades__nota { font-size: var(--p--1) !important; }
.horario { margin: 0 0 1.2rem; display: grid; }
.horario > div { display: grid; grid-template-columns: 1fr auto; gap: .6rem; padding: .55rem .4rem; border-top: 1px solid var(--linea); font-size: var(--p--1); }
.horario dt { color: var(--medio); }
.horario dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta); }
.horario > div.ej { border-top: 0; margin-top: .5rem; padding: .65rem .6rem .45rem; }
.horario > div.ej::after { background: var(--bond-2); }
@media (max-width: 760px) { .mitades { grid-template-columns: 1fr; } .mitades__foto img { aspect-ratio: 4 / 3; height: auto; } }
.flecha { display: inline-flex; align-items: center; min-height: 44px; color: var(--magenta); text-decoration: none; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: .05rem; }
.flecha--claro { color: var(--magenta-l); }

/* ── Cita ──────────────────────────────────────────────────────── */
.cita { position: relative; margin: 0; isolation: isolate; min-height: min(50vh, 400px); display: grid; place-items: center; overflow: hidden; }
.cita img, .cita__video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.cita::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20,20,20,.8); }
.cita__txt { margin: 0; width: var(--ancho); padding: 3rem 0; }
.cita__txt p { font-family: var(--display); font-size: var(--p-3); color: var(--bond); max-width: 28ch; margin: 0 auto; text-align: center; line-height: 1.25; font-style: italic; }

/* ── Mosaico ───────────────────────────────────────────────────── */
.mos { padding: var(--aire) 0; }
.mos__grilla { display: grid; gap: 4px; grid-template-columns: repeat(3, 1fr); width: var(--ancho); margin: 1rem auto 0; overflow: hidden; }
.mos__p { margin: 0; overflow: hidden; background: var(--bond-2); }
.mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
.mos__p img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--sale); }
.mos__p:hover img { transform: scale(1.05); }
@media (max-width: 640px) { .mos__grilla { grid-template-columns: repeat(2, 1fr); } }

/* ── Contacto ──────────────────────────────────────────────────── */
.contacto { padding: var(--aire) 0; background: var(--bond-2); }
.contacto__cols { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.datos { margin: 0; display: grid; }
.datos > div { display: grid; grid-template-columns: 7rem 1fr; gap: .6rem; padding: .6rem .4rem; border-top: 1px solid var(--linea); align-items: center; }
.datos dt { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .06em; text-transform: uppercase; color: var(--medio); }
.datos dd { margin: 0; }
.datos dd a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 480px) { .datos > div { grid-template-columns: 1fr; gap: .1rem; } }
.pedir { background: var(--bond); border: 1px solid var(--linea); padding: clamp(1.2rem, 3vw, 2rem); }
.pedir__t { font-size: var(--p-2); font-family: var(--display); font-weight: 400; margin-bottom: 1rem; }
.pasos { margin: 0 0 1.2rem; padding-left: 1.2rem; display: grid; gap: .7rem; color: var(--medio); }
.pasos b { color: var(--tinta); }

/* ── Para la dueña ─────────────────────────────────────────────── */
.dueno { padding: var(--aire) 0; background: var(--tinta); color: var(--bond); }
.dueno__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1rem; }
.dueno__cols h3 { font-size: var(--p-1); color: var(--magenta-l); margin-bottom: .5rem; font-family: var(--display); font-weight: 400; }
.dueno__cols p { margin: 0; color: #B9B5AD; font-size: var(--p--1); }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 2.5rem 0 0; }

/* ── Pie ───────────────────────────────────────────────────────── */
.pie { background: #0B0B0B; color: #8E8B84; padding: 2rem clamp(1.2rem, 5vw, 3rem); }
.pie p { margin: 0; font-size: var(--p--1); max-width: 92ch; }

/* ══ Animación (reglas atómicas: opacidad corta, transform largo) ═══ */
.js .rev { opacity: 0; transform: translateY(22px); }
.js .rev.ok { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .6s var(--sale); }
.js .portada__texto > * { animation: entra .8s var(--sale) both; }
.js .sobre           { animation-delay: .05s; }
.js .portada__titulo { animation-delay: .14s; }
.js .portada__bajada { animation-delay: .26s; }
.js .acciones        { animation-delay: .36s; }
@keyframes entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* La escena «llega»: cinco hojas salen de la ranura (translateY 90 px
   → 0 + opacity, .5 s, --sale, stagger 140 ms) y quedan un poco
   desalineadas; en la última aparecen los cuatro puntos (scale,
   stagger 60 ms). Sin reposo. Cada hoja conserva su giro final. */
.js .esc__hoja { opacity: 0; animation: sale-hoja .55s var(--muelle) forwards; }
.js .esc__hoja:nth-child(1) { --rot: 0deg;    animation-delay: .3s; }
.js .esc__hoja:nth-child(2) { --rot: -1.5deg; animation-delay: .44s; }
.js .esc__hoja:nth-child(3) { --rot: 1deg;    animation-delay: .58s; }
.js .esc__hoja:nth-child(4) { --rot: -.5deg;  animation-delay: .72s; }
.js .esc__hoja:nth-child(5) { --rot: 2deg;    animation-delay: .86s; }
@keyframes sale-hoja { from { opacity: 0; transform: translateY(90px) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); } }
.js .esc__punto { transform: scale(0); transform-box: fill-box; transform-origin: center; animation: punto .3s var(--sale) forwards; }
.js .esc__punto--c { animation-delay: 1.45s; }
.js .esc__punto--m { animation-delay: 1.51s; }
.js .esc__punto--y { animation-delay: 1.57s; }
.js .esc__punto--k { animation-delay: 1.63s; }
@keyframes punto { to { transform: scale(1); } }

/* Cascadas por contenedor: 60 ms de stagger. */
.js .reglas.rev, .js .fam.rev, .js .mos__grilla.rev, .js .cifras__lista.rev { opacity: 1; transform: none; transition: none; }
.js .reglas.rev > *, .js .fam.rev > *, .js .mos__grilla.rev > *, .js .cifras__lista.rev > * { opacity: 0; transform: translateY(24px); }
.js .reglas.rev.ok > *, .js .fam.rev.ok > *, .js .mos__grilla.rev.ok > *, .js .cifras__lista.rev.ok > * {
  opacity: 1; transform: none;
  transition: opacity .3s ease-out, transform .6s var(--sale);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.reglas > :nth-child(1), .fam > :nth-child(1), .mos__grilla > :nth-child(1), .cifras__lista > :nth-child(1) { --i: 0; }
.reglas > :nth-child(2), .fam > :nth-child(2), .mos__grilla > :nth-child(2), .cifras__lista > :nth-child(2) { --i: 1; }
.reglas > :nth-child(3), .fam > :nth-child(3), .mos__grilla > :nth-child(3), .cifras__lista > :nth-child(3) { --i: 2; }
.reglas > :nth-child(4), .fam > :nth-child(4), .mos__grilla > :nth-child(4), .cifras__lista > :nth-child(4) { --i: 3; }
.reglas > :nth-child(5), .fam > :nth-child(5), .mos__grilla > :nth-child(5) { --i: 4; }
.fam > :nth-child(6), .mos__grilla > :nth-child(6) { --i: 5; }

@media (prefers-reduced-motion: reduce) {
  .js .portada__texto > * { animation: none; }
  .js .esc__hoja, .js .esc__punto { animation: none; opacity: 1; }
  .js .esc__punto { transform: scale(1); }
  .js .esc__hoja:nth-child(1) { transform: none; }
  .js .esc__hoja:nth-child(2) { transform: rotate(-1.5deg); }
  .js .esc__hoja:nth-child(3) { transform: rotate(1deg); }
  .js .esc__hoja:nth-child(4) { transform: rotate(-.5deg); }
  .js .esc__hoja:nth-child(5) { transform: rotate(2deg); }
  .mos__p:hover img { transform: none; }
  .js .rev, .js .reglas.rev > *, .js .fam.rev > *, .js .mos__grilla.rev > *, .js .cifras__lista.rev > * { opacity: 1; transform: none; }
  .boton:hover { transform: none; }
}

/* ══ Video de fondo (05-09-2026) ══════════════════════════════════
   La foto de portada sigue siendo la base: se carga siempre y es lo
   que ve quien pidió menos movimiento, quien ahorra datos o quien no
   tiene JS. El video va ENCIMA, con la misma máscara y el mismo
   encuadre (comparte el selector de la foto), y sólo aparece cuando
   ya puede reproducirse: la foto cobra vida en un fundido de 1,4 s.
   Presupuesto de la casa: portada ≤ 1,8 MB, banda ≤ 1,2 MB, 720p H.264
   sin audio, dos clips por página. Origen y licencia en imagenes/FUENTES.txt. */
.portada__video, .cita__video, .telon__video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.portada__video.video--ver, .cita__video.video--ver { opacity: 1; }
.telon__video.video--ver { opacity: .14; }

/* Difuminado al hacer scroll (scroll-driven animations, Baseline 2026):
   la portada se desenfoca a medida que se deja atrás y la cita entra
   desenfocada y se enfoca al llegar a la vista. Sin JS. Sólo en
   escritorio y sin reduced-motion; donde el navegador no lo soporte,
   no pasa nada: @supports lo deja fuera entero. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .portada__foto { animation: portada-se-va linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
    .cita { animation: cita-enfoca linear both; animation-timeline: view(block); animation-range: entry 0% entry 95%; }
  }
}
@keyframes portada-se-va { to { filter: blur(14px) brightness(.8); transform: scale(1.06); } }
@keyframes cita-enfoca { from { filter: blur(16px); } to { filter: blur(0); } }

/* ══ Mejoras 05-09-2026 (Baseline 2026, sin cambiar el diseño) ══
   text-wrap: pretty evita las viudas en los párrafos; --muelle es una
   curva linear() con rebote corto para las entradas de la portada. */
p { text-wrap: pretty; }
:root { --muelle: linear(0, .32 14%, .68 26%, .92 38%, 1.04 50%, 1.01 64%, .99 78%, 1); }
.js .portada__texto > * { animation-timing-function: var(--muelle); }

/* ── WHATSAPP FLOTANTE ──────────────────────────────────────────────
   56 px de alto, por encima del minimo tactil de 44. Verde de WhatsApp
   a proposito: se reconoce sin leerlo, y eso es lo que hace que se toque.
   Se ve SIEMPRE por defecto; el JS solo lo aparta sobre la portada. Al
   reves, un fallo del script se llevaria el CTA principal. */
.wapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex; align-items: center; gap: .55rem;
  height: 56px; padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  background: #25D366; color: #07310F;
  text-decoration: none;
  font-family: var(--cuerpo, system-ui, sans-serif);
  font-size: .95rem; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26), 0 2px 6px rgba(0, 0, 0, .16);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.wapp__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.wapp:hover, .wapp:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.js .wapp--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }

@media (max-width: 520px) {
  .wapp { width: 56px; padding: 0; justify-content: center; }
  .wapp__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .wapp { transition: opacity .28s ease; }
  .wapp:hover, .wapp:focus-visible { transform: none; }
  .js .wapp--arriba { transform: none; }
}
/* ── MAPA DE UBICACIÓN ──────────────────────────────────────────────
   El geocodificador encontró el local por su nombre, así que el punto es
   la puerta y no una aproximación de la cuadra.
   Imagen propia con mosaicos de OpenStreetMap: la CSP prohíbe pedir nada
   a un tercero y un iframe de Google Maps quedaría en blanco sin dar un
   solo error. El «Cómo llegar» sí es un enlace, y un enlace pasa.
   La atribución a OSM la exige su licencia (ODbL). */
.mapa { margin: 1.4rem 0 0; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: var(--bond); }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .7rem .9rem;
  font-size: var(--p--1); line-height: 1.45;
  color: var(--medio); border-top: 1px solid var(--linea);
}
.mapa__pie b { color: var(--tinta); }
.mapa__ir { color: var(--magenta); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.mapa__ir:hover, .mapa__ir:focus-visible { color: var(--magenta-o); text-decoration: underline; }
.mapa__cred { width: 100%; font-size: .8em; opacity: .85; }
.mapa__cred a { color: var(--medio); }