/*
Theme Name:  Querer San Martín — Astra Child
Theme URI:   https://querersanmartin.com.ar
Description: Tema hijo de Astra para la Home de Querer San Martín. Reproduce la Home v2 aprobada.
Author:      Querer San Martín
Template:    astra
Version:     1.0.5
Text Domain: qsm
*/

/* ============================================================================
   QUERER SAN MARTÍN — Home v2
   Hoja de estilos del tema hijo

   Todos los valores provienen de la Home v2 aprobada. No hay decisiones de
   diseño nuevas en este archivo.

   ÍNDICE
   01 · Tokens y globales
   02 · Tipografía
   03 · Header
   04 · Hero
   05 · Qué es Querer San Martín
   06 · Problemas
   07 · Propuestas
   08 · Katopozos
   09 · Participá
   10 · Quiénes somos
   11 · Footer
   12 · Responsive
   13 · Accesibilidad y estados de foco
   AP · Bloque temporal de revisión (borrar antes de publicar)

   ALCANCE
   Todo está acotado a `.qsm`. Esa clase se aplica en Elementor a cuatro
   contenedores raíz y a ningún otro lugar:

     qsm qsm-nav      → container raíz del template Header
     qsm qsm-drawer   → container del panel de menú mobile
     qsm qsm-page     → container raíz de la Home
     qsm qsm-foot     → container raíz del template Footer

   Dentro de esos cuatro, el marcado usa los mismos nombres de clase que el
   prototipo, de modo que los bloques HTML se pegan sin modificar.

   EJES VARIABLES
   La tipografía display NO usa `font-stretch`. Usa `font-variation-settings`
   con los ejes `wght` y `wdth` declarados de forma explícita en cada elemento.
   `font-variation-settings` no se hereda de forma acumulativa: cada regla
   declara los dos ejes completos. El `font-weight` que acompaña a cada regla
   existe solo para la pila de respaldo (Helvetica/Arial), por si Archivo no
   carga.
   ============================================================================ */


/* ============================================================================
   01 · TOKENS Y GLOBALES

   Los tokens se declaran en :root, no en .qsm. Las custom properties no pintan
   nada por sí mismas, así que no contaminan el resto del sitio, y de este modo
   quedan disponibles para elementos que viven fuera del árbol de .qsm: popups
   de Elementor, plantillas futuras y el chip de revisión.
   ============================================================================ */

:root{
  /* --- Fondos --- */
  --asfalto:#0A0A0C;
  --asfalto-2:#141418;
  --asfalto-3:#1E1E24;
  --cal:#F2F1EC;
  --cal-2:#E6E4DC;
  --cal-hover:#EAE8E1;
  --tiza:#FFFFFF;
  --negro-foot:#060608;

  /* --- Acento: amarillo de señalización vial --- */
  --senal:#FFD400;
  --senal-hover:#FFE04D;
  --senal-soft:rgba(255,212,0,.14);
  --senal-deep:#7A6600;

  /* --- Neutrales --- */
  --gris-claro:#9B9A93;
  --gris-oscuro:#6E6C64;
  --txt-cal:#3A3A38;
  --txt-tarjeta:#4B4A47;

  /* --- Líneas --- */
  --line-dark:rgba(255,255,255,.12);
  --line-light:rgba(10,10,12,.14);

  /* --- Métrica --- */
  --maxw:1280px;
  --gut:clamp(20px,5vw,64px);
  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s4:40px;
  --s5:64px;
  --s7:140px;

  /* --- Familias --- */
  --display:"Archivo","Archivo Black",Helvetica,Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* --- Ejes variables de Archivo --- */
  --wdth-hero:112;
  --wdth-wide:125;   /* la palabra «queremos» */
  --wdth-sec:104;
  --wdth-mark:108;
  --wdth-drawer:106;
  --wdth-prob:102;
  --wdth-foot:114;
  --wdth-base:100;
}

/* --- Base --- */
.qsm,
.qsm *,
.qsm *::before,
.qsm *::after{ box-sizing:border-box; }

.qsm{
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  color:var(--tiza);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.qsm-page{ background:var(--asfalto); }

/* --- Contexto de página ---------------------------------------------------
   Reproduce lo que el prototipo declaraba en `body`: sin margen, fondo asfalto
   detrás de todo (evita el destello blanco al hacer overscroll) y sin desborde
   lateral por las capas del Hero.

   Se apunta a la página que REALMENTE contiene el bloque, no a la portada.
   Antes esto era `body.qsm-home`, y como functions.php agrega esa clase a
   cualquier portada, la regla caía sobre la Home de Katopozos y le ponía fondo
   negro. El selector de abajo solo puede coincidir donde existe .qsm-page.
   -------------------------------------------------------------------------- */
body:has(.qsm-page){
  margin:0;
  background:#0A0A0C;
  overflow-x:hidden;
}

/* El scroll suave vive en <html>, fuera del alcance de una clase de body. */
html:has(.qsm-page){ scroll-behavior:auto; }

.qsm img,
.qsm svg,
.qsm canvas,
.qsm video{ display:block; max-width:100%; }

.qsm a{ color:inherit; text-decoration:none; }

.qsm button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer;
}

/* --- Neutralización de Astra y Elementor --------------------------------
   Astra impone su tipografía y su color a títulos y párrafos, y Elementor
   agrega padding a los containers. Estas reglas devuelven el control a esta
   hoja. Si algo sigue siendo pisado, subir la prioridad del enqueue en
   functions.php de 20 a 100 antes de recurrir a !important.
   ------------------------------------------------------------------------ */
.qsm h1,.qsm h2,.qsm h3,.qsm h4,.qsm h5,.qsm h6,
.qsm p,.qsm ul,.qsm ol,.qsm li,.qsm figure,.qsm address{
  margin:0;
  padding:0;
  color:inherit;
}
/* Astra fija line-height en los encabezados. h1–h4 declaran el suyo más
   abajo; h5 y h6 no, así que sin esto heredarían el del tema. */
.qsm h5,.qsm h6{ line-height:inherit; }
.qsm ul,.qsm ol{ list-style:none; }
.qsm .e-con-inner,
.qsm.e-con > .e-con-inner{ padding:0; }
.qsm .elementor-widget:not(:last-child){ margin-block-end:0; }

/* --- Contenedor de ancho ------------------------------------------------- */
.qsm .wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* --- Sección ------------------------------------------------------------- */
.qsm .sec{
  position:relative;
  padding-block:clamp(72px,11vw,var(--s7));
  scroll-margin-top:72px;
}
.qsm .hero{ scroll-margin-top:0; }

/* --- Superficies --------------------------------------------------------- */
.qsm .on-cal{ background:var(--cal); color:var(--asfalto); }
.qsm .on-asfalto{ background:var(--asfalto); }
.qsm .on-asfalto-2{ background:var(--asfalto-2); }

/* --- Botones ------------------------------------------------------------- */
.qsm .btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:transparent;   /* el tema puede pintar .btn: se neutraliza acá */
  box-shadow:none;
  text-decoration:none;
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:17px 26px;
  border:1px solid transparent;
  border-radius:2px;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
  will-change:transform;
}
.qsm .btn:hover{ transform:translateY(-2px); }

.qsm .btn--sol{
  background:var(--senal);
  color:var(--asfalto);
  font-weight:600;
}
.qsm .btn--sol:hover{ background:var(--senal-hover); }

.qsm .btn--line{
  border-color:rgba(255,255,255,.32);
  color:var(--tiza);
}
.qsm .btn--line:hover{
  border-color:var(--senal);
  color:var(--senal);
}
.qsm .on-cal .btn--line{
  border-color:rgba(10,10,12,.28);
  color:var(--asfalto);
}
.qsm .on-cal .btn--line:hover{
  border-color:var(--asfalto);
  background:var(--asfalto);
  color:var(--cal);
}

.qsm .btn .arw{ transition:transform .22s ease; }
.qsm .btn:hover .arw{ transform:translateX(4px); }

/* --- Enlace con flecha --------------------------------------------------- */
.qsm .link-arw{
  position:relative;
  display:inline-flex;
  background:transparent;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--senal);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s,gap .2s;
}
.qsm .link-arw:hover{ border-color:var(--senal); gap:14px; }
.qsm .on-cal .link-arw{ color:var(--senal-deep); }
.qsm .on-cal .link-arw:hover{ border-color:var(--senal-deep); }

/* --- Placeholder de contenido pendiente ---------------------------------- */
.qsm .ph{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  min-height:120px;
  background-color:var(--asfalto-3);
  background-image:repeating-linear-gradient(135deg,rgba(255,212,0,.085) 0 8px,transparent 8px 18px);
  border:1px dashed rgba(255,212,0,.38);
}
.qsm .ph--cal{
  background-color:var(--cal-2);
  background-image:repeating-linear-gradient(135deg,rgba(10,10,12,.07) 0 8px,transparent 8px 18px);
  border-color:rgba(10,10,12,.24);
}
.qsm .ph__tag{
  max-width:30ch;
  padding:10px 14px;
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.5;
  text-align:center;
  text-transform:uppercase;
  color:var(--senal);
}
.qsm .ph--cal .ph__tag{ color:var(--senal-deep); }
.qsm .ph__tag b{
  display:block;
  margin-top:4px;
  font-weight:600;
  letter-spacing:.1em;
  color:rgba(255,255,255,.5);
}
.qsm .ph--cal .ph__tag b{ color:rgba(10,10,12,.45); }

/* --- Aparición al hacer scroll -------------------------------------------
   El JS agrega la clase `in` cuando el elemento entra en el viewport.
   El retardo se pasa por la variable --d en el atributo style del elemento.
   -------------------------------------------------------------------------- */
.qsm .rv{
  opacity:0;
  transform:translateY(20px);
}
.qsm .rv.in{
  opacity:1;
  transform:none;
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),
             transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms);
}


/* ============================================================================
   02 · TIPOGRAFÍA
   ============================================================================ */

.qsm h1,
.qsm h2,
.qsm h3,
.qsm h4{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:"wght" 800,"wdth" var(--wdth-base);
  line-height:.98;
  letter-spacing:-.025em;
  text-wrap:balance;
}

/* --- Titular del Hero ---------------------------------------------------- */
.qsm .t-hero{
  font-size:clamp(2.9rem,8.4vw,7.4rem);
  font-weight:800;
  font-variation-settings:"wght" 800,"wdth" var(--wdth-hero);
  line-height:.9;
  letter-spacing:-.035em;
  text-transform:uppercase;
}

/* --- Título de sección --------------------------------------------------- */
.qsm .t-sec{
  font-size:clamp(1.9rem,3.9vw,3.05rem);
  font-weight:800;
  font-variation-settings:"wght" 800,"wdth" var(--wdth-sec);
  text-transform:uppercase;
}

/* --- Bajadas ------------------------------------------------------------- */
.qsm .lead{
  max-width:44ch;
  font-size:clamp(1.02rem,1.35vw,1.16rem);
  line-height:1.6;
  color:var(--gris-claro);
  text-wrap:pretty;
}
.qsm .on-cal .lead{ color:var(--gris-oscuro); }

/* --- Cuerpo de texto ----------------------------------------------------- */
.qsm .body-txt{ max-width:62ch; }
.qsm .body-txt p{
  margin-block-end:1.05em;
  text-wrap:pretty;
}
.qsm .body-txt p:last-child{ margin-block-end:0; }

/* --- Márgenes heredados del navegador -------------------------------------
   El prototipo no reseteaba los márgenes de <p>, así que varios elementos
   dependen del margen por defecto de 1em. Acá se declaran de forma explícita
   para que el resultado no dependa de lo que haga Astra con los párrafos.
   Cada valor equivale exactamente al que rinde la v2.
   -------------------------------------------------------------------------- */
.qsm .lead{ margin-block:1em; }
.qsm .hero__eyebrow{ margin-top:1em; }
.qsm .props-foot .nota{ margin-block:1em; }
.qsm .kato__cierre{ margin-bottom:1em; }
.qsm .foot__mark{ margin-block:1em; }
.qsm .foot__tag{ margin-bottom:1em; }

/* --- Volantín ------------------------------------------------------------ */
.qsm .eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-block-end:20px;
  font-family:var(--mono);
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--senal);
}
.qsm .eyebrow::before{
  content:"";
  flex:none;
  width:20px;
  height:2px;
  background:var(--senal);
}
.qsm .on-cal .eyebrow{ color:var(--senal-deep); }
.qsm .on-cal .eyebrow::before{ background:var(--senal-deep); }


/* ============================================================================
   03 · HEADER
   Raíz del template: class="qsm qsm-nav"
   Panel mobile:      class="qsm qsm-drawer"
   El JS agrega:      .is-solid al pasar 40px de scroll
                      body.qsm-menu-open al abrir el menú
   ============================================================================ */

.qsm-nav{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s;
}
.qsm-nav::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:transparent;
  transition:background .35s;
}
.qsm-nav.is-solid{
  background:rgba(10,10,12,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.qsm-nav.is-solid::after{ background:var(--line-dark); }

.qsm .nav__in{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:16px var(--gut);
  display:flex;
  align-items:center;
  gap:var(--s4);
}

/* --- Logotipo provisorio ------------------------------------------------- */
.qsm .mark{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--display);
  font-size:1.02rem;
  font-weight:800;
  font-variation-settings:"wght" 800,"wdth" var(--wdth-mark);
  line-height:1;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.qsm .mark .q{ color:var(--tiza); }
.qsm .mark .sm{
  color:var(--tiza);
  border-bottom:3px solid var(--senal);
  padding-bottom:3px;
}

/* --- Navegación desktop -------------------------------------------------- */
.qsm .nav__links{
  display:flex;
  align-items:center;
  gap:26px;
  margin-inline-start:auto;
}
.qsm .nav__links a{
  position:relative;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  transition:color .2s;
}
.qsm .nav__links a:hover{ color:var(--senal); }

/* Sección activa — el JS alterna la clase .active */
.qsm .nav__links a.active{ color:var(--tiza); }
.qsm .nav__links a.active::after{
  content:"";
  display:block;
  height:2px;
  margin-top:5px;
  background:var(--senal);
}
.qsm .nav__links a.nav__cta.active::after{ display:none; }

.qsm .nav__cta{
  padding:11px 18px;
  font-size:.72rem;
}

/* --- Hamburguesa --------------------------------------------------------- */
.qsm .burger{
  display:none;
  margin-inline-start:auto;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
}
.qsm .burger span{
  display:block;
  position:relative;
  width:22px;
  height:1.5px;
  background:var(--tiza);
  transition:background .2s;
}
.qsm .burger span::before,
.qsm .burger span::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:1.5px;
  background:var(--tiza);
  transition:transform .3s;
}
.qsm .burger span::before{ top:-7px; }
.qsm .burger span::after{ top:7px; }

body.qsm-menu-open .qsm .burger span{ background:transparent; }
body.qsm-menu-open .qsm .burger span::before{ transform:translateY(7px) rotate(45deg); }
body.qsm-menu-open .qsm .burger span::after{ transform:translateY(-7px) rotate(-45deg); }

/* --- Panel de menú mobile ------------------------------------------------ */
.qsm-drawer{
  position:fixed;
  inset:0;
  z-index:95;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:96px var(--gut) var(--s5);
  background:var(--asfalto);
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .45s cubic-bezier(.7,0,.2,1);
}
body.qsm-menu-open .qsm-drawer{
  transform:none;
  visibility:visible;
}
.qsm-drawer a{
  padding-block:9px;
  border-bottom:1px solid var(--line-dark);
  font-family:var(--display);
  font-size:clamp(1.6rem,7vw,2.4rem);
  font-weight:800;
  font-variation-settings:"wght" 800,"wdth" var(--wdth-drawer);
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.qsm-drawer a:last-of-type{ border-bottom:0; }


/* ============================================================================
   04 · HERO
   ============================================================================ */

.qsm .hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:var(--asfalto);
}

/* --- Capa 0: media (canvas hoy, video mañana) ---------------------------- */
.qsm .hero__media{
  position:absolute;
  inset:0;
  z-index:0;
}
.qsm .hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.qsm #gridmap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.85;
}

/* --- Capa 1: scrim ------------------------------------------------------- */
.qsm .hero__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,
      rgba(10,10,12,.80) 0%,
      rgba(10,10,12,.22) 32%,
      rgba(10,10,12,.70) 72%,
      var(--asfalto) 100%),
    radial-gradient(120% 78% at 12% 88%,
      rgba(10,10,12,.86) 0%,
      transparent 62%);
}

/* --- Capa 2: grano ------------------------------------------------------- */
.qsm .hero__grain{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:.22;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* --- Capa 3: contenido --------------------------------------------------- */
.qsm .hero__in{
  position:relative;
  z-index:3;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:96px var(--gut) clamp(56px,9vh,104px);
}

.qsm .hero__eyebrow{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:12px;
  margin-block-end:var(--s3);
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.68);
}
.qsm .hero__eyebrow i{
  flex:none;
  margin-top:.42em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--senal);
  font-style:normal;
  animation:qsm-pulse 2.6s ease-in-out infinite;
}
@keyframes qsm-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.35; transform:scale(.7); }
}

.qsm .hero h1{ max-width:none; }

/* La palabra «queremos»: mismo peso, eje de ancho más abierto */
.qsm .hero h1 .wide{
  font-variation-settings:"wght" 800,"wdth" var(--wdth-wide);
  color:var(--senal);
}

.qsm .hero__lead{
  margin:28px 0 var(--s4);
  max-width:48ch;
  font-size:clamp(1.05rem,1.85vw,1.4rem);
  line-height:1.45;
  color:rgba(255,255,255,.86);
}

.qsm .hero__acts{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* --- Pie del Hero -------------------------------------------------------- */
.qsm .hero__foot{
  position:relative;
  z-index:3;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:14px var(--gut);
  border-top:1px solid var(--line-dark);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.44);
}
.qsm .hero__foot .scroll{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.qsm .hero__foot .scroll b{
  font-weight:500;
  animation:qsm-bob 2.4s ease-in-out infinite;
}
@keyframes qsm-bob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(4px); }
}


/* ============================================================================
   05 · QUÉ ES QUERER SAN MARTÍN
   ============================================================================ */

.qsm .quees{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s5);
  align-items:start;
  padding-top:var(--s3);
  border-top:1px solid var(--line-light);
}

.qsm .quees__txt p{
  margin-block-end:1.05em;
  font-size:1.06rem;
  color:var(--txt-cal);
}
.qsm .quees__txt p:last-child{ margin-block-end:0; }

/* Tercer párrafo: remate conceptual, cambia de familia y peso */
.qsm .quees__txt p.kick{
  font-family:var(--display);
  font-size:clamp(1.2rem,2.2vw,1.55rem);
  font-weight:700;
  font-variation-settings:"wght" 700,"wdth" var(--wdth-base);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--asfalto);
}

/* --- Banda de tres fotos ------------------------------------------------- */
.qsm .fotos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:clamp(48px,5vw,72px);
}
.qsm .fotos .ph{
  aspect-ratio:5/4;
  border-radius:2px;
}
/* Al cargar las fotos reales, la imagen conserva la proporción */
.qsm .fotos img{
  width:100%;
  aspect-ratio:5/4;
  object-fit:cover;
  border-radius:2px;
}


/* ============================================================================
   06 · PROBLEMAS
   ============================================================================ */

/* --- Cabecera de sección (patrón reutilizable: Problemas, Propuestas,
       Participá). En Elementor conviene guardarla como plantilla global. --- */
.qsm .sec-head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--s4);
  align-items:start;
  padding-top:var(--s3);
  border-top:1px solid var(--line-dark);
  margin-block-end:clamp(40px,4.4vw,62px);
}
.qsm .on-cal .sec-head{ border-top-color:var(--line-light); }
.qsm .sec-head > *:first-child{ grid-column:1 / span 7; }
.qsm .sec-head > .lead{
  grid-column:9 / span 4;
  padding-top:.55em;
}

/* --- Grilla de cinco tarjetas -------------------------------------------- */
.qsm .probs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}

.qsm .prob{
  display:flex;
  flex-direction:column;
  padding:0 0 24px;
  background:var(--asfalto-2);
  transition:background .3s ease;
}
.qsm .prob:hover{ background:var(--asfalto-3); }

.qsm .prob__img{
  position:relative;
  aspect-ratio:4/5;
  border:0;
  border-bottom:1px solid var(--line-dark);
}
.qsm .prob__img .ph__tag{
  padding:14px;
  font-size:.55rem;
}
.qsm .prob__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.qsm .prob__body{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:10px;
  padding:22px 22px 0;
}

/* El filete amarillo mide lo mismo que el texto del título, no todo el ancho */
.qsm .prob h3{
  align-self:flex-start;
  padding-top:14px;
  border-top:2px solid var(--senal);
  font-size:1.08rem;
  font-weight:800;
  font-variation-settings:"wght" 800,"wdth" var(--wdth-prob);
  line-height:1.1;
  letter-spacing:-.005em;
  text-transform:uppercase;
}

.qsm .prob p{
  flex:1;
  font-size:.92rem;
  line-height:1.55;
  color:var(--gris-claro);
  text-wrap:pretty;
}

.qsm .prob .link-arw{
  align-self:flex-start;
  margin-top:8px;
  font-size:.68rem;
}

/* Indicador del carrusel — solo visible en el breakpoint de 640px */
.qsm .swipe-hint{ display:none; }


/* ============================================================================
   07 · PROPUESTAS
   El JS agrega .is-scrollable a .ejes cuando la barra desborda.
   ============================================================================ */

/* --- Barra de pestañas --------------------------------------------------- */
.qsm .ejes{
  display:flex;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  margin-block-end:var(--s4);
}
.qsm .ejes::-webkit-scrollbar{ display:none; }

/* Degradado de desborde: se activa solo cuando hay scroll pendiente */
.qsm .ejes.is-scrollable{
  -webkit-mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.15) 100%);
          mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.15) 100%);
}

.qsm .eje-tab{
  position:relative;
  flex:1 0 auto;
  padding:16px 20px 15px;
  text-align:left;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gris-oscuro);
  border-right:1px solid var(--line-light);
  transition:color .2s,background .2s;
}
.qsm .eje-tab:last-child{ border-right:0; }

.qsm .eje-tab::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  background:var(--senal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.qsm .eje-tab:hover{ color:var(--asfalto); }
.qsm .eje-tab[aria-selected="true"]{
  color:var(--asfalto);
  font-weight:600;
}
.qsm .eje-tab[aria-selected="true"]::before{ transform:scaleX(1); }

/* Etiqueta «Eje 01» */
.qsm .eje-tab i{
  display:block;
  margin-block-end:5px;
  font-style:normal;
  font-size:.54rem;
  letter-spacing:.16em;
  color:var(--gris-oscuro);
  opacity:.55;
}

/* --- Paneles ------------------------------------------------------------- */
.qsm .panel[hidden]{ display:none; }

.qsm .props{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-light);
  border:1px solid var(--line-light);
}

.qsm .prop{
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:var(--s4) var(--s4) calc(var(--s4) + 8px);
  background:var(--cal);
  animation:qsm-fadeup .5s cubic-bezier(.2,.7,.2,1) both;
}
.qsm .prop:nth-child(2){ animation-delay:.07s; }
.qsm .prop:nth-child(3){ animation-delay:.14s; }
@keyframes qsm-fadeup{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

/* El min-width es lo que da largo al filete: sin él mediría un dígito */
.qsm .prop__n{
  align-self:flex-start;
  min-width:32px;
  margin-block-end:5px;
  padding-bottom:11px;
  border-bottom:2px solid var(--senal);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--senal-deep);
}

.qsm .prop h4{
  font-size:1.2rem;
  font-weight:800;
  font-variation-settings:"wght" 800,"wdth" var(--wdth-base);
  line-height:1.16;
  letter-spacing:-.018em;
  text-transform:none;
  color:var(--asfalto);
  text-wrap:balance;
}

.qsm .prop p{
  font-size:.96rem;
  line-height:1.6;
  color:var(--txt-tarjeta);
  text-wrap:pretty;
}

/* --- Chip de dato pendiente de actualización -----------------------------
   No se retira hasta que se actualice la línea de base de cámaras.
   -------------------------------------------------------------------------- */
.qsm .dato-chip{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:7px;
  margin-top:2px;
  padding:5px 9px;
  border:1px solid rgba(122,102,0,.28);
  border-radius:2px;
  background:var(--senal-soft);
  font-family:var(--mono);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.11em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--senal-deep);
}

/* --- Pie de la sección --------------------------------------------------- */
.qsm .props-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  margin-top:var(--s4);
}
.qsm .props-foot .nota{
  max-width:52ch;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.09em;
  line-height:1.6;
  text-transform:uppercase;
  color:var(--gris-oscuro);
}


/* ============================================================================
   08 · KATOPOZOS
   ============================================================================ */

.qsm .kato{
  position:relative;
  overflow:hidden;
  background:var(--asfalto-2);
}
/* Retícula vertical apenas perceptible */
.qsm .kato::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 92px);
}

.qsm .kato__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s5);
  align-items:center;
}

/* --- Marco del mapa ------------------------------------------------------ */
.qsm .kato__mapa{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line-dark);
  border-radius:3px;
  background:var(--asfalto);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.qsm .kato__bar{
  display:flex;
  align-items:center;
  gap:7px;
  padding:11px 14px;
  border-bottom:1px solid var(--line-dark);
  background:rgba(255,255,255,.03);
}
.qsm .kato__bar u{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  text-decoration:none;
}
.qsm .kato__bar span{
  margin-inline-start:8px;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:lowercase;
  color:rgba(255,255,255,.42);
}
.qsm .kato__mapa .ph{
  aspect-ratio:4/3;
  min-height:0;
  border:0;
}
/* Al cargar la captura real */
.qsm .kato__mapa img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

.qsm .kato h2 .amar{ color:var(--senal); }

/* --- Las tres acciones --------------------------------------------------- */
.qsm .pasos{
  display:flex;
  flex-direction:column;
  margin:var(--s4) 0 calc(var(--s4) + 8px);
}
.qsm .pasos li{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:16px;
  padding-block:17px;
  border-top:1px solid var(--line-dark);
}
.qsm .pasos li:last-child{ border-bottom:1px solid var(--line-dark); }

.qsm .pasos .n{
  padding-top:4px;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--senal);
}
.qsm .pasos h4{
  margin-block-end:5px;
  font-size:1.1rem;
  font-weight:800;
  font-variation-settings:"wght" 800,"wdth" var(--wdth-base);
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.qsm .pasos p{
  max-width:44ch;
  font-size:.94rem;
  line-height:1.55;
  color:var(--gris-claro);
}

/* --- Frase de cierre ----------------------------------------------------- */
.qsm .kato__cierre{
  max-width:46ch;
  margin-top:calc(var(--s4) + 8px);
  padding:var(--s3) 0 0;
  border-top:2px solid var(--senal);
  font-family:var(--display);
  font-size:clamp(1.02rem,1.7vw,1.24rem);
  font-weight:600;
  font-variation-settings:"wght" 600,"wdth" var(--wdth-base);
  line-height:1.3;
  letter-spacing:-.015em;
  color:rgba(255,255,255,.9);
}


/* ============================================================================
   09 · PARTICIPÁ
   Los formularios no se conectan en esta etapa.
   ============================================================================ */

.qsm .parts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line-light);
  border:1px solid var(--line-light);
}

.qsm .part{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:var(--s4) var(--s4) calc(var(--s4) + 8px);
  background:var(--cal);
  transition:background .3s;
}
.qsm .part:hover{ background:var(--cal-hover); }

.qsm .part__ic{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  margin-block-end:6px;
  border:1px solid rgba(10,10,12,.2);
  border-radius:2px;
}
.qsm .part__ic svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:var(--asfalto);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.qsm .part h3{
  font-size:1.16rem;
  font-weight:800;
  font-variation-settings:"wght" 800,"wdth" var(--wdth-base);
  line-height:1.12;
  letter-spacing:-.008em;
  text-transform:uppercase;
  color:var(--asfalto);
  text-wrap:balance;
}
.qsm .part p{
  flex:1;
  max-width:34ch;
  font-size:.96rem;
  line-height:1.6;
  color:var(--txt-tarjeta);
  text-wrap:pretty;
}
.qsm .part .btn{
  align-self:flex-start;
  margin-top:10px;
}

/* --- Redes: Instagram, Facebook y X. Sin YouTube. ------------------------ */
.qsm .redes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  margin-top:clamp(48px,6vw,80px);
  padding-top:var(--s3);
  border-top:1px solid var(--line-light);
}
.qsm .redes__lab{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gris-oscuro);
}
.qsm .redes__set{
  display:flex;
  gap:10px;
}
.qsm .red{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:transparent;
  box-shadow:none;
  padding:11px 16px;
  border:1px solid rgba(10,10,12,.2);
  border-radius:2px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background .22s,color .22s,border-color .22s;
}
.qsm .red svg{
  width:15px;
  height:15px;
  fill:currentColor;
}
.qsm .red:hover{
  background:var(--asfalto);
  color:var(--cal);
  border-color:var(--asfalto);
}


/* ============================================================================
   10 · QUIÉNES SOMOS
   Sección deliberadamente vacía. Solo el título y el espacio reservado.
   ============================================================================ */

.qsm .quienes{
  position:relative;
  overflow:hidden;
  padding-block:clamp(56px,7.5vw,100px);
  background:var(--asfalto);
}
.qsm .quienes__in{
  display:flex;
  flex-direction:column;
  gap:clamp(36px,4vw,56px);
  padding-top:var(--s3);
  border-top:1px solid var(--line-dark);
}
.qsm .quienes .ph{
  aspect-ratio:auto;
  min-height:clamp(200px,26vh,300px);
  border-radius:3px;
}


/* ============================================================================
   11 · FOOTER
   Raíz del template: class="qsm qsm-foot"
   ============================================================================ */

.qsm-foot{
  padding:var(--s5) 0 var(--s3);
  background:var(--negro-foot);
  border-top:1px solid var(--line-dark);
}

.qsm .foot__top{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--s4);
  padding-block-end:var(--s5);
}

.qsm .foot__mark{
  font-family:var(--display);
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  font-weight:800;
  font-variation-settings:"wght" 800,"wdth" var(--wdth-foot);
  line-height:.94;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.qsm .foot__mark span{ display:block; }
.qsm .foot__mark span:last-child{ color:var(--senal); }

.qsm .foot__tag{
  max-width:34ch;
  margin-top:14px;
  font-size:.92rem;
  color:var(--gris-oscuro);
}

.qsm-foot h5{
  margin:0 0 18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line-dark);
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.38);
}

.qsm-foot ul{
  display:flex;
  flex-direction:column;
  gap:9px;
}

/* --- Navegación del footer ------------------------------------------------
   Una sola columna de siete ítems, que es como rinde la Home v2 aprobada.

   NOTA: el documento de especificación decía «dos columnas». Es un error de
   ese documento: la regla `columns:2` existía en el prototipo pero nunca se
   aplicó, porque `.foot ul{display:flex}` la ganaba por especificidad. Lo que
   se aprobó visualmente es esta columna única.

   Si preferís las dos columnas, es un cambio de tres líneas —descomentar el
   bloque de abajo— pero es una decisión de diseño, no de implementación.
   -------------------------------------------------------------------------- */
.qsm .foot__nav li{ margin-block-end:11px; }   /* se suma al gap de 9px del flex */

/*
.qsm .foot__nav{ display:block; columns:2; column-gap:var(--s3); }
.qsm .foot__nav li{ break-inside:avoid; margin-block-end:11px; }
@media (max-width:540px){ .qsm .foot__nav{ columns:1; } }
*/

.qsm-foot ul a,
.qsm-foot address a{
  font-size:.94rem;
  color:rgba(255,255,255,.72);
  transition:color .2s;
}
.qsm-foot ul a:hover,
.qsm-foot address a:hover{ color:var(--senal); }

.qsm-foot address{
  font-style:normal;
  font-size:.94rem;
  line-height:1.8;
  color:rgba(255,255,255,.72);
  overflow-wrap:anywhere;
}

.qsm .foot__bot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--s2) var(--s3);
  padding-top:var(--s3);
  border-top:1px solid var(--line-dark);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.34);
}


/* ============================================================================
   12 · RESPONSIVE

   Los nueve cortes de la Home v2, en orden descendente para que el más chico
   gane siempre en la cascada. No modificar el orden.

   Ninguno de estos valores coincide con los breakpoints de Elementor: por eso
   viven acá y no en el panel responsive del editor.

     1100  Problemas 5 → 3 columnas
     1080  Navegación desktop → hamburguesa
      960  Cabecera de sección y Katopozos se apilan
      900  Propuestas y Participá → 1 columna · Footer → 2 columnas
      860  Qué es se apila · fotos 3 → 2 · Problemas 3 → 2 columnas
      768  (min-width) reserva del pie del Hero para el chip de revisión
      767  Se oculta «Scrolleá ↓»
      640  Problemas → carrusel con snap + indicador
      540  Footer → 1 columna
     alto 560  Reducción tipográfica del Hero
   ============================================================================ */

/* --- 1100 ---------------------------------------------------------------- */
@media (max-width:1100px){
  .qsm .probs{ grid-template-columns:repeat(3,1fr); }
}

/* --- 1080 ---------------------------------------------------------------- */
@media (max-width:1080px){
  .qsm .nav__links{ display:none; }
  .qsm .burger{ display:flex; }
}

/* --- 960 ----------------------------------------------------------------- */
@media (max-width:960px){
  .qsm .sec-head{
    grid-template-columns:1fr;
    gap:var(--s2);
  }
  .qsm .sec-head > *:first-child,
  .qsm .sec-head > .lead{
    grid-column:auto;
    padding-top:0;
  }
  .qsm .kato__grid{
    grid-template-columns:1fr;
    gap:var(--s4);
  }
}

/* --- 900 ----------------------------------------------------------------- */
@media (max-width:900px){
  .qsm .props{ grid-template-columns:1fr; }
  .qsm .eje-tab{ flex:0 0 auto; }
  .qsm .parts{ grid-template-columns:1fr; }
  .qsm .foot__top{
    grid-template-columns:1fr 1fr;
    gap:var(--s4);
  }
  .qsm .foot__mark{ grid-column:span 2; }
}

/* --- 860 ----------------------------------------------------------------- */
@media (max-width:860px){
  .qsm .quees{
    grid-template-columns:1fr;
    gap:var(--s3);
  }
  .qsm .fotos{ grid-template-columns:1fr 1fr; }
  .qsm .fotos .f3{ grid-column:span 2; }
  .qsm .probs{ grid-template-columns:repeat(2,1fr); }
}

/* --- 768 (min-width) ------------------------------------------------------
   Reserva a la derecha del pie del Hero para que el chip de revisión no lo
   tape. Cuando se borre el chip (ver apéndice) esta regla puede eliminarse.
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  .qsm .hero__foot{ padding-right:calc(var(--gut) + 200px); }
}

/* --- 767 ----------------------------------------------------------------- */
@media (max-width:767px){
  .qsm .hero__foot .scroll{ display:none; }
}

/* --- 640 · carrusel de Problemas ----------------------------------------- */
@media (max-width:640px){
  .qsm .probs{
    display:flex;
    gap:1px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .qsm .probs::-webkit-scrollbar{ display:none; }

  .qsm .prob{
    flex:0 0 78%;
    scroll-snap-align:start;
  }
  .qsm .prob__img{ aspect-ratio:4/3; }

  .qsm .swipe-hint{
    display:block;
    margin:16px 0 0;
    font-family:var(--mono);
    font-size:.6rem;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gris-oscuro);
  }
}

/* --- 540 ----------------------------------------------------------------- */
@media (max-width:540px){
  .qsm .foot__top{ grid-template-columns:1fr; }
  .qsm .foot__mark{ grid-column:span 1; }
}

/* --- Alto de viewport ≤560px ---------------------------------------------
   Celular apaisado y ventanas de escritorio bajas. Sin esta regla el titular
   del Hero queda debajo del header. Es una consulta por ALTO: Elementor no
   puede generarla desde su panel.
   -------------------------------------------------------------------------- */
@media (max-height:560px){
  .qsm .t-hero{ font-size:clamp(1.9rem,5.6vw,2.8rem); }
  .qsm .hero__lead{
    margin:16px 0 22px;
    max-width:44ch;
    font-size:1rem;
  }
  .qsm .hero__eyebrow{ margin-block-end:14px; }
  .qsm .hero__in{
    padding-top:84px;
    padding-bottom:36px;
  }
}


/* ============================================================================
   13 · ACCESIBILIDAD Y ESTADOS DE FOCO
   ============================================================================ */

/* --- Anillo de foco ------------------------------------------------------
   Astra y Elementor a veces anulan el outline. Esta regla lo restituye.
   No suprimirla ni reemplazarla por `outline:none`.
   -------------------------------------------------------------------------- */
.qsm :focus-visible{
  outline:3px solid var(--senal);
  outline-offset:3px;
}

/* --- Enlace de salto ------------------------------------------------------
   Va como primer elemento del template Header, apuntando a #quees.
   Invisible hasta recibir foco por teclado.
   -------------------------------------------------------------------------- */
.qsm .skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  padding:12px 18px;
  border-radius:2px;
  background:var(--senal);
  color:var(--asfalto);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.qsm .skip:focus{
  left:12px;
  top:12px;
}

/* --- Áreas táctiles de 44px ----------------------------------------------
   Los enlaces de navegación miden 18px y los «Conocé el problema →» 20px.
   Estos pseudo-elementos amplían el área clickeable sin mover el layout.
   Conservar ambos.
   -------------------------------------------------------------------------- */
.qsm .nav__links a:not(.nav__cta)::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-14px;
  bottom:-14px;
}
.qsm .link-arw::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  bottom:-12px;
}

/* --- Elementos todavía sin destino ---------------------------------------
   Los nueve enlaces pendientes —tres formularios, seis redes— y el botón
   «Ver todas las propuestas». El JS agrega aria-disabled y anula el clic.
   Al conectarlos hay que quitar el atributo, no esta regla.
   -------------------------------------------------------------------------- */
.qsm a[aria-disabled="true"]{ cursor:default; }

/* --- Movimiento reducido -------------------------------------------------
   Va al final para que gane sobre todas las animaciones declaradas arriba.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html:has(.qsm-page){ scroll-behavior:auto; }

  .qsm .rv{
    opacity:1;
    transform:none;
  }
  .qsm .btn:hover{ transform:none; }
  .qsm .hero__eyebrow i{ animation:none; }
  .qsm .hero__foot .scroll b{ animation:none; }
  .qsm .prop{ animation:none; }

  .qsm *,
  .qsm *::before,
  .qsm *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ============================================================================
   AP · RESTOS DEL BLOQUE DE REVISIÓN
   ────────────────────────────────────────────────────────────────────────────
   La capa visual de revisión (contornos punteados, etiquetas, chip flotante)
   se eliminó en la versión 1.0.2.

   Quedan solo dos reglas invisibles, a propósito:
     · position:relative sobre [data-pending] — se conserva para no alterar el
       contexto de apilamiento de esos elementos respecto de la versión
       aprobada. No pinta nada.
     · display:none sobre .hero__phtag — la etiqueta del placeholder del video
       sigue en el marcado como recordatorio, pero nunca se ve.

   Los atributos data-pending del marcado se mantienen: son la lista de trabajo
   de lo que falta definir. No se muestran al visitante.
   ============================================================================ */

.qsm [data-pending]{ position:relative; }
.qsm .hero__phtag{ display:none; }

/* ====================== FIN DE LA HOJA ==================================== */