/* ══════════════════════════════════════════════════════════════════
   FERRETERÍA EL PEÑÓN · Puente Alto — CristalWeb
   Demo sin encargo. Construida el 06-09-2026.

   DIRECCIÓN — «EL ESTANTE DE FIERRO»
   La pared de herramientas colgadas: gris galvanizado, blanco de
   etiqueta y un verde de máquina como único acento. El orden de un
   catálogo industrial —una idea por pantalla, cifras grandes, cero
   ruido— porque lo que vende esta ferretería es que alguien sabe qué
   falta. Portada oscura (el fierro y el aceite), el resto claro.

   DESLINDE DE PALETA — el verde es OLIVA-LIMA, no de bosque
   Los verdes del registro son todos azulados, entre 150° y 160° de
   tono: `#1B6A4B`, `#1F6B48`, `#25704A`, `#1E6B45`, aprobado `#237A2A`.
   El de acá es `#4C7A16`, tono 82°: verde de esmalte de herramienta
   eléctrica, con amarillo adentro. El único vecino en tono es el
   `#4A6B12` de la 71 (láser de alineadora), y allá es una LÍNEA
   luminosa sobre grafito, no la identidad de una página clara.
   Deslinde con las otras dos ferreterías de la tanda: la 18 es azul
   obrero y zinc, la 23 es negro, zinc y rojo de tope. Ni naranja ni
   amarillo: los naranjas están repetidos y el amarillo a rayas es de
   la 209.

   TRÍO
   · Display: Gemunu Libre — 0 usos en el registro. Condensada y de
     trazo grueso en 700/800: letra de rótulo de ferretería, sin ser
     una display de póster.
   · Cuerpo: Host Grotesk ×1 (111-cdt-animal-health, otro rubro y otra
     región). Neutra y angosta: aguanta listas largas.
   · Dato: Victor Mono ×3 (veterinaria Temuco, barbería Pucón,
     restaurante Niebla). Las monos se acabaron el 26-08-2026; ésta es
     la primera vez en ferretería y en Santiago.

   ESCENA: las herramientas se cuelgan — ocho herramientas entran de
   arriba al panel perforado, con stagger de 80 ms y un balanceo corto
   de asentamiento. Sin reposo: una herramienta colgada no se mueve.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --papel:   #F4F5F4;   /* fondo */
  --papel-2: #E7EAE9;   /* paneles */
  --zinc:    #CBD1D0;   /* líneas */
  --fierro:  #1E2523;   /* texto  14,8:1 sobre papel */
  --medio:   #545F5C;   /* secundario  6,1:1 sobre papel-2 */
  --verde:   #43700F;   /* texto de acento  5,3:1 sobre papel */
  --verde-o: #6DA81F;   /* objetos y filetes, nunca texto chico */
  --verde-cl:#DDECC4;   /* rellenos; encima va SIEMPRE --fierro */
  --verde-t: #22380A;   /* paneles oscuros  blanco 12,6:1 */
  --noche:   #14191A;   /* portada y bandas de fierro */

  --display: "Gemunu Libre", "Arial Narrow", sans-serif;
  --cuerpo:  "Host Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono:    "Victor Mono", "Consolas", monospace;

  --p--1: clamp(.78rem, .74rem + .2vw, .86rem);
  --p-0:  clamp(1rem, .96rem + .2vw, 1.08rem);
  --p-1:  clamp(1.18rem, 1.08rem + .5vw, 1.4rem);
  --p-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --p-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --p-4:  clamp(2.8rem, 2rem + 3.8vw, 5.2rem);

  --ancho: min(1180px, 92vw);
  --aire:  clamp(3rem, 2rem + 5vw, 6rem);
  --muelle: linear(0, .32 14%, .68 26%, .92 38%, 1.04 50%, 1.01 64%, .99 78%, 1);
  --sale: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--papel); color: var(--fierro);
  font-family: var(--cuerpo); font-size: var(--p-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
p { text-wrap: pretty; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0 0 .6rem; letter-spacing: -.005em; }
h2 { font-size: var(--p-3); }
h3 { font-size: var(--p-1); }
.ancho { width: var(--ancho); margin-inline: auto; }

a { color: var(--verde); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--verde-o); outline-offset: 3px; border-radius: 4px; }

.sobre { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .14em; text-transform: uppercase; color: var(--verde); margin: 0 0 .8rem; }
.sobre--claro { color: var(--verde-cl); }
.entradilla { font-size: var(--p-1); color: var(--medio); max-width: 62ch; margin: 0 0 1.6rem; }
.nota { font-size: var(--p--1); color: var(--medio); }

.ej { border-bottom: 2px dotted var(--verde-o); }
ul.ej { border: 0; border-left: 3px dotted var(--verde-o); padding-left: 1rem; }
span.ej[data-ejemplo] {
  border: 0; font-family: var(--mono); font-size: .72em; letter-spacing: .1em;
  text-transform: uppercase; color: var(--verde); background: var(--verde-cl);
  padding: .12em .5em; border-radius: 4px; white-space: nowrap;
}

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.5rem; border-radius: 6px;
  background: var(--verde); color: #FFFFFF; text-decoration: none;
  font-weight: 600; border: 2px solid var(--verde); font-family: var(--cuerpo);
  transition: transform .25s var(--sale), background-color .25s ease;
}
.boton:hover { background: var(--verde-t); border-color: var(--verde-t); transform: translateY(-2px); }
.boton--linea { background: transparent; color: var(--verde); }
.boton--linea:hover { background: var(--verde-cl); border-color: var(--verde-t); color: var(--verde-t); }
.boton--chico { min-height: 44px; padding: .5rem 1.1rem; font-size: var(--p--1); }

.flecha { display: inline-flex; gap: .4rem; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; }
.flecha:hover span { transform: translateX(4px); }
.flecha span { transition: transform .25s var(--sale); }
.flecha--claro { color: var(--verde-cl); }

/* ── Banda de propuesta ─────────────────────────────────────────── */
.propuesta { background: var(--verde-t); color: #EFF6E4; padding: .9rem 0; }
.propuesta p { width: var(--ancho); margin: 0 auto; }
.propuesta__que { font-family: var(--mono); font-size: var(--p--1); }
.propuesta__que b { color: var(--verde-cl); font-weight: 400; }
.propuesta__gancho { margin-top: .3rem; font-size: var(--p--1); color: #D2E4B7; }

/* ── Cabecera ───────────────────────────────────────────────────── */
.cab {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.2rem;
  width: 100%; padding: .7rem max(4vw, calc((100vw - var(--ancho)) / 2));
  background: rgba(244,245,244,.88); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease;
}
.cab--flota { border-bottom-color: var(--zinc); box-shadow: 0 6px 22px rgba(30,37,35,.08); }
.cab__marca { display: flex; align-items: center; gap: .6rem; min-height: 44px; text-decoration: none; color: var(--fierro); margin-right: auto; }
.cab__sello svg { display: block; width: 30px; height: 30px; fill: none; stroke: var(--verde-o); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cab__nombre { font-family: var(--display); font-weight: 700; font-size: var(--p-1); line-height: 1.02; }
.cab__sub { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--medio); font-weight: 400; }
.cab__nav { display: flex; gap: 1.3rem; }
.cab__nav a { color: var(--medio); text-decoration: none; font-size: var(--p--1); min-height: 44px; display: inline-flex; align-items: center; }
.cab__nav a:hover { color: var(--verde); }
@media (max-width: 980px) { .cab__nav { display: none; } }

/* ── Portada (oscura) ───────────────────────────────────────────── */
.portada {
  position: relative; isolation: isolate; overflow: hidden; background: var(--noche);
  min-height: min(86vh, 740px); display: flex; flex-direction: column; justify-content: center;
  padding: var(--aire) 0; color: #F1F3F1;
}
.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: 62% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, rgba(0,0,0,.3) 36%, rgba(0,0,0,.85) 60%, #000 78%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, rgba(0,0,0,.3) 36%, rgba(0,0,0,.85) 60%, #000 78%, #000 100%);
}
/* Velo del color DE la portada. El titular queda sobre #14191A casi
   puro: 13,9:1 con el blanco de la letra pase lo que pase con la foto. */
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
      rgba(20,25,26,1) 0%, rgba(20,25,26,1) 28%,
      rgba(20,25,26,.82) 46%, rgba(20,25,26,.46) 66%,
      rgba(20,25,26,.16) 84%, rgba(20,25,26,0) 97%);
}
.portada__cols {
  width: var(--ancho); margin-inline: auto; position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.portada .sobre { color: #A9CE6E; }
.portada__titulo { font-size: var(--p-4); max-width: 12ch; color: #FFFFFF; font-weight: 800; }
.portada__titulo span { display: block; }
.portada__titulo span:last-child { color: #A9CE6E; }
.portada__bajada { font-size: var(--p-1); color: #C3CBC8; max-width: 44ch; }
.portada__bajada b { color: #FFFFFF; font-weight: 600; }
.portada__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.portada .boton--linea { color: #A9CE6E; border-color: #A9CE6E; }
.portada .boton--linea:hover { background: rgba(169,206,110,.16); color: #FFFFFF; border-color: #FFFFFF; }

.js .portada__texto > * { opacity: 0; transform: translateY(14px); }
.portada__texto.ok > * { animation: entra .6s var(--muelle) forwards; }
.portada__texto.ok > *:nth-child(2) { animation-delay: .07s; }
.portada__texto.ok > *:nth-child(3) { animation-delay: .14s; }
.portada__texto.ok > *:nth-child(4) { animation-delay: .21s; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* ── Escena · las herramientas se cuelgan ───────────────────────── */
.escena--panel { justify-self: end; width: min(100%, 330px); text-align: center; }
.panel__svg { display: block; width: 100%; height: auto; }
.panel__tabla { fill: rgba(109,168,31,.06); stroke: rgba(169,206,110,.45); stroke-width: 2; }
.panel__hoyos circle { fill: rgba(169,206,110,.3); }
.herr { fill: none; stroke: #C9D6BE; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.herr rect { fill: rgba(201,214,190,.18); }
.js .herr { opacity: 0; transform: translateY(-24px); }
.escena--panel.ok .herr { animation: cuelga .4s var(--sale) forwards, asienta .3s var(--sale) .4s forwards; }
.escena--panel.ok .h1 { animation-delay: 0s, .4s; }
.escena--panel.ok .h2 { animation-delay: .08s, .48s; }
.escena--panel.ok .h3 { animation-delay: .16s, .56s; }
.escena--panel.ok .h4 { animation-delay: .24s, .64s; }
.escena--panel.ok .h5 { animation-delay: .32s, .72s; }
.escena--panel.ok .h6 { animation-delay: .40s, .80s; }
.escena--panel.ok .h7 { animation-delay: .48s, .88s; }
.escena--panel.ok .h8 { animation-delay: .56s, .96s; }
@keyframes cuelga { to { opacity: 1; transform: translateY(0) rotate(3deg); } }
@keyframes asienta { to { transform: translateY(0) rotate(0); } }
/* El pie de la escena cae sobre la zona NÍTIDA de la foto, donde el
   velo ya no llega: el auditor lo da por bueno (fondo transparente) pero
   en el peor caso —el destello del metal— quedaba en 2,1:1. Va con su
   propia placa oscura, medida a mano: #C9D6BE sobre rgba(20,25,26,.72)
   mezclado con el destello da 6,4:1. */
.escena__pie { display: inline-block; margin: .5rem 0 0; padding: .25rem .6rem; border-radius: 4px; background: rgba(20,25,26,.72); font-family: var(--mono); font-size: var(--p--1); letter-spacing: .1em; text-transform: uppercase; color: #C9D6BE; }

@media (prefers-reduced-motion: reduce) {
  .js .herr { opacity: 1; transform: none; }
  .escena--panel.ok .herr { animation: none; }
}

@media (max-width: 760px) {
  .portada { min-height: 0; padding-top: 2rem; }
  .portada__cols { grid-template-columns: 1fr; }
  .portada__foto img, .portada__video { object-position: 55% 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 32%, #000 62%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 32%, #000 62%); }
  .portada__foto::after { background: linear-gradient(180deg, rgba(20,25,26,1) 0%, rgba(20,25,26,.88) 38%, rgba(20,25,26,.5) 72%, rgba(20,25,26,.2) 100%); }
  .escena--panel { justify-self: start; width: min(70%, 260px); margin-top: 1.4rem; }
}

/* ── Cifras ─────────────────────────────────────────────────────── */
.cifras { background: var(--verde-t); color: #EFF6E4; padding: clamp(2rem, 4vw, 3rem) 0; }
.cifras__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.cifras__lista li { text-align: center; }
.cifras__lista b { display: block; font-family: var(--display); font-weight: 800; font-size: var(--p-3); line-height: 1; color: #FFFFFF; }
.cifras__lista span { display: block; margin-top: .4rem; font-size: var(--p--1); color: #C6DCA4; }
@media (max-width: 700px) { .cifras__lista { grid-template-columns: repeat(2, 1fr); } }

/* ── Pieza firma · las listas ───────────────────────────────────── */
.pegas { padding: var(--aire) 0; }
.pega__lista { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; border: 0; }
.pega { background: var(--papel-2); border: 1px solid var(--zinc); border-left: 4px solid var(--verde-o); border-radius: 8px; padding: 1.3rem; }
.pega h3 { margin-bottom: .7rem; }
.pega ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.pega li { padding-left: 1.2rem; position: relative; font-size: var(--p--1); color: var(--medio); }
.pega li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--verde-o); }
.pega__boton {
  font: inherit; font-size: var(--p--1); font-weight: 600; cursor: pointer;
  min-height: 44px; padding: .5rem 1rem; border-radius: 6px;
  background: transparent; color: var(--verde); border: 2px solid var(--verde);
  transition: background-color .2s ease, color .2s ease;
}
.pega__boton:hover, .pega__boton[aria-pressed="true"] { background: var(--verde); color: #FFFFFF; }
@media (max-width: 900px) { .pega__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pega__lista { grid-template-columns: 1fr; } }

.salida { margin: 2rem 0 0; padding: 1rem; background: var(--verde-cl); border-radius: 8px; font-family: var(--mono); font-size: var(--p--1); color: var(--fierro); word-break: break-word; }
.salida__rotulo { color: var(--verde); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.salida__ir { margin: 1rem 0 .6rem; }

/* ── Tajo ───────────────────────────────────────────────────────── */
.tajo { position: relative; isolation: isolate; }
.tajo img { display: block; width: 100%; height: clamp(240px, 40vw, 400px); object-fit: cover; object-position: 50% 60%; }
.tajo__txt { position: absolute; inset: auto 0 0 0; padding: var(--aire) 0 1.6rem; background: linear-gradient(180deg, rgba(20,25,26,0) 0%, rgba(20,25,26,.8) 60%, rgba(20,25,26,.95) 100%); }
.tajo__txt p { width: var(--ancho); margin: 0 auto; color: #FFFFFF; font-family: var(--display); font-weight: 700; font-size: var(--p-2); max-width: 26ch; }

/* ── Familias ───────────────────────────────────────────────────── */
.familias { padding: var(--aire) 0; background: var(--papel-2); }
.fam__grilla { list-style: none; margin: 2rem 0 1rem; padding: 0 0 0 1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.fam__grilla li { background: var(--papel); border: 1px solid var(--zinc); border-radius: 8px; padding: 1.1rem; }
.fam__grilla h3 { font-size: var(--p-0); margin-bottom: .3rem; }
.fam__grilla p { margin: 0; font-size: var(--p--1); color: var(--medio); }
@media (max-width: 900px) { .fam__grilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fam__grilla { grid-template-columns: 1fr; } }

/* ── Cita (con video) ───────────────────────────────────────────── */
.cita { position: relative; isolation: isolate; overflow: hidden; }
.cita img, .cita__video { display: block; width: 100%; height: clamp(300px, 50vw, 500px); object-fit: cover; object-position: 50% 50%; }
.cita::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,25,26,.93) 0%, rgba(20,25,26,.72) 44%, rgba(20,25,26,.28) 78%, rgba(20,25,26,.12) 100%); }
.cita__txt { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; margin: 0; }
.cita__txt p { width: var(--ancho); margin-inline: auto; color: #FFFFFF; font-family: var(--display); font-weight: 700; font-size: var(--p-2); max-width: 26ch; }

/* ── Para el maestro, con telón ─────────────────────────────────── */
.maestro { position: relative; isolation: isolate; padding: var(--aire) 0; color: #EFF6E4; background: var(--verde-t); overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; }
.telon img, .telon__video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.telon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,56,10,.88) 0%, rgba(34,56,10,.95) 100%); }
.maestro h2 { color: #FFFFFF; }
.maestro .sobre { color: var(--verde-cl); }
.maestro .entradilla { color: #CFE2B0; }
.fichas { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.ficha { background: rgba(244,245,244,.07); border: 1px solid rgba(221,236,196,.28); border-radius: 8px; padding: 1.2rem; }
.ficha h3 { color: #FFFFFF; font-size: var(--p-0); }
.ficha p { margin: 0 0 .6rem; color: #CBDFAB; font-size: var(--p--1); }
.ficha__dato { font-family: var(--mono); font-size: var(--p--1); color: var(--verde-cl); }
@media (max-width: 900px) { .fichas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fichas { grid-template-columns: 1fr; } }

/* ── Mitades ────────────────────────────────────────────────────── */
.mit { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.mit__foto img { display: block; width: 100%; height: 100%; min-height: 320px; max-height: 560px; object-fit: cover; }
.mit__txt { padding: var(--aire) clamp(1.5rem, 5vw, 4rem); }
.mit__txt p { color: var(--medio); max-width: 46ch; }
@media (max-width: 800px) { .mit { grid-template-columns: 1fr; } }

/* ── Mosaico ────────────────────────────────────────────────────── */
.mos { padding: var(--aire) 0; }
.mos__grilla { list-style: none; margin: 2rem 0 0; padding: 0 max(4vw, calc((100vw - var(--ancho)) / 2)); display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.mos__grilla img { display: block; width: 100%; height: clamp(150px, 20vw, 240px); object-fit: cover; border-radius: 6px; }
@media (max-width: 760px) { .mos__grilla { grid-template-columns: repeat(2, 1fr); } }

/* ── Contacto ───────────────────────────────────────────────────── */
.contacto { padding: var(--aire) 0; background: var(--papel-2); }
.contacto__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.contacto p { color: var(--medio); max-width: 46ch; }
.contacto__ir { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.datos { margin: 0; display: grid; gap: .9rem; }
.datos > div { display: grid; grid-template-columns: 11rem 1fr; gap: .6rem; padding-bottom: .8rem; border-bottom: 1px solid var(--zinc); }
.datos dt { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .06em; text-transform: uppercase; color: var(--medio); }
.datos dd { margin: 0; color: var(--fierro); }
.datos dd a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 800px) { .contacto__cols { grid-template-columns: 1fr; } .datos > div { grid-template-columns: 1fr; gap: .1rem; } }

/* ── Para el dueño ──────────────────────────────────────────────── */
.dueno { padding: var(--aire) 0; background: var(--noche); color: #E7EAE9; }
.dueno h2 { color: #FFFFFF; }
.dueno__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 1.6rem; }
.dueno h3 { color: #A9CE6E; font-size: var(--p-0); font-family: var(--mono); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.dueno p { color: #BFC7C4; font-size: var(--p--1); }
.dueno b { color: #FFFFFF; }
.dueno .sobre--claro { color: #A9CE6E; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2rem; }
.dueno .flecha--claro { color: #A9CE6E; }
@media (max-width: 800px) { .dueno__cols { grid-template-columns: 1fr; } }

/* ── Pie ────────────────────────────────────────────────────────── */
.pie { background: #0E1213; color: #9AA5A1; padding: 2rem 0; }
.pie p { width: var(--ancho); margin: 0 auto; font-size: var(--p--1); max-width: 80ch; }

/* ── Apariciones ────────────────────────────────────────────────── */
.js .rev { opacity: 0; transform: translateY(16px); }
.rev.ok { opacity: 1; transform: none; transition: opacity .3s ease, transform .6s var(--sale); }

/* ══════════════════════════════════════════════════════════════════
   VIDEO DE FONDO — la foto es la base y el clip se funde encima.
   ══════════════════════════════════════════════════════════════════ */
.portada__video, .cita__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; }

@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;
    }
    @keyframes portada-se-va {
      to { filter: blur(7px); transform: scale(1.06); opacity: .5; }
    }
    .cita {
      animation: cita-enfoca linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 95%;
    }
    @keyframes cita-enfoca {
      from { filter: blur(9px); }
      to   { filter: blur(0); }
    }
  }
}

/* ── SIN BOTON DE WHATSAPP, A PROPOSITO ──────────────────────────
   El Penon solo publica un fijo: (2) 2874 3926. WhatsApp no funciona
   en numeros fijos: el boton abriria la aplicacion y no encontraria la
   cuenta. Peor que no tenerlo. Cuando la ferreteria confirme un movil,
   se pone con demos\poner-wapp.ps1. */

/* ── MAPA DE UBICACIÓN ──────────────────────────────────────────────
   Imagen propia con mosaicos de OpenStreetMap pegados: la CSP prohíbe
   pedir nada a un tercero, así que un iframe de Google Maps quedaría en
   blanco sin dar un solo error. La atribución a OSM es obligatoria por
   licencia (ODbL) y por eso va visible, no en un comentario.
   Acá el mapa es de COMUNA, no de puerta: la dirección exacta no está
   confirmada y el pie lo dice en vez de fingir un punto. */
.mapa { margin: 1.6rem 0 0; border: 1px solid var(--zinc); border-radius: 10px; overflow: hidden; background: var(--papel-2); }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__pie {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .7rem .9rem;
  font-size: var(--p--1); line-height: 1.45;
  color: var(--medio); background: var(--papel);
  border-top: 1px solid var(--zinc);
}
.mapa__pie b { color: var(--fierro); }
.mapa__cred { font-family: var(--mono, ui-monospace, monospace); opacity: .85; }
.mapa__pie a { color: var(--verde); }