/* ============================================================================
   GERO JOYERO — Hoja de estilos
   ----------------------------------------------------------------------------
   Paleta única en todo el sitio: la misma de la portada. Negro cálido de taller,
   texto en hueso y un solo acento, el oro 18k.

   Orden del archivo:
   1. Tokens (colores, tipografía, medidas)   6. Cards de pieza
   2. Base y utilidades                        7. Página de detalle
   3. Navegación                               8. Pie de página
   4. Inicio (hero + destacadas)               9. Responsive
   5. Catálogo (tabs, atajos, filtros)
   ========================================================================== */

/* ============================================================ 1. TOKENS === */
:root {
  /* Fondos: el negro del banco y dos superficies apenas más claras
     para separar cards, paneles y atajos sin usar bordes gruesos. */
  --fondo:         #14110D;
  --superficie:    #1E1913;
  --superficie-2:  #272018;

  /* Texto */
  --texto:         #EDEBE5;
  --texto-medio:   rgba(237, 235, 229, .68);
  --texto-suave:   rgba(237, 235, 229, .46);

  /* Acento: oro 18k. Dos valores, uno para texto y otro para brillos. */
  --oro:           #C9A45C;
  --oro-luz:       #E2C68D;

  /* Estados */
  --verde:         #2F6444;   /* sobre fondo claro (pastillas) */
  --verde-luz:     #7FC095;   /* sobre fondo oscuro */
  --rosa:          #A84E68;   /* etiqueta "Ideal para compromiso" */
  --rosa-fondo:    #F4DDE3;

  /* Líneas: siempre oro muy diluido, nunca gris */
  --linea:         rgba(201, 164, 92, .16);
  --linea-fuerte:  rgba(201, 164, 92, .34);

  /* Tipografía: Fraunces (display, su eje SOFT viene de las letras cortadas
     a mano) + Archivo para interfaz y datos. */
  --display: 'Fraunces', Georgia, serif;
  --ui:      'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Medidas */
  /* Ancho máximo del contenido. Antes 1180px dejaba mucho margen vacío en
     pantallas anchas; con esto la sidebar de filtros queda más a la
     izquierda y entran 3 piezas por fila sin achicarlas (ver .grilla, que
     sigue usando minmax(270px, 1fr): las piezas no se achican, se reparte
     el espacio de más entre las que entran). */
  --ancho:    1440px;
  --gutter:   clamp(20px, 5vw, 56px);
  --radio:    3px;
  --alto-nav: 82px;

  --transicion: 380ms cubic-bezier(.22, .61, .36, 1);
}

/* ====================================================== 2. BASE Y UTILES === */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 90;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Eyebrow: etiqueta chica en versalitas. Clasifica, no decora. */
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 18px;
}

.seccion { padding-block: clamp(56px, 8vw, 110px); }
.seccion__titulo { font-size: clamp(30px, 5vw, 46px); }
.texto-medio { color: var(--texto-medio); }

/* ---------------------------------------------------------- Botones ------ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 15px 28px;
  border: 1px solid var(--oro);
  border-radius: 999px;
  background: var(--oro);
  color: var(--fondo);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion);
}
.boton:hover { background: transparent; color: var(--oro-luz); border-color: var(--oro-luz); }

/* Secundario: solo contorno */
.boton--linea, .boton--oro {
  background: transparent;
  color: var(--oro-luz);
  border-color: var(--linea-fuerte);
}
.boton--linea:hover, .boton--oro:hover { background: var(--oro); color: var(--fondo); border-color: var(--oro); }

.boton--wpp { background: var(--verde-luz); border-color: var(--verde-luz); color: #10241A; }
.boton--wpp:hover { background: transparent; color: var(--verde-luz); }
.boton--ancho { width: 100%; }

/* ------------------------------------------- Estados y etiquetas --------- */
/* Sobre fondo oscuro (ficha de detalle): punto + versalitas. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado--stock  { color: var(--verde-luz); }
.estado--pedido { color: var(--texto-suave); }

/* Sobre la foto: pastillas claras, siempre legibles caiga donde caiga la luz. */
.pastillas {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  pointer-events: none;
}
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(243, 241, 236, .94);
  backdrop-filter: blur(8px);
  color: #1C1A16;
  white-space: nowrap;
}
.pastilla--estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pastilla--stock  { color: var(--verde); }
.pastilla--pedido { color: #55504A; }
.pastilla--compromiso { background: var(--rosa-fondo); color: var(--rosa); }

/* La misma etiqueta rosa, para usar suelta fuera de una foto */
.tag-compromiso {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rosa);
  background: var(--rosa-fondo);
  border-radius: 999px;
  padding: 6px 13px;
}

/* --------------------------------------------------- Accesibilidad ------- */
.salto { position: absolute; left: -9999px; background: var(--oro); color: var(--fondo); padding: 12px 20px; z-index: 999; }
.salto:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--oro-luz); outline-offset: 3px; }

/* =========================================================== 3. NAVBAR === */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--texto);
  border-bottom: 1px solid transparent;
  transition: background var(--transicion), border-color var(--transicion);
}
.nav.solido {
  background: rgba(20, 17, 13, .94);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--linea);
}
.nav__inner {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav__marca { font-family: var(--display); font-size: 21px; white-space: nowrap; }
.nav__marca small {
  display: block;
  font-family: var(--ui);
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--oro);
  margin-top: 2px;
}
.nav__links { display: flex; gap: clamp(14px, 3vw, 38px); align-items: center; }
.nav__link {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-medio);
  padding-block: 6px;
  position: relative;
  white-space: nowrap;
  transition: color var(--transicion);
}
.nav__link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--oro);
  transition: width var(--transicion);
}
.nav__link:hover { color: var(--texto); }
.nav__link:hover::after, .nav__link.activo::after { width: 100%; }
.nav__link.activo { color: var(--oro); }
.nav__corto { display: none; }   /* etiqueta abreviada, se activa en mobile */

/* ============================================================= 4. INICIO === */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
}
/* La foto de portada va acá. Sin foto, queda la luz de taller. */
.hero__fondo {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(120% 80% at 72% 18%, rgba(226, 198, 141, .20) 0%, transparent 58%),
    radial-gradient(90% 70% at 20% 92%, rgba(201, 164, 92, .13) 0%, transparent 60%),
    url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
}
/* Video de fondo, opcional: cubre todo lo visible del hero (también en
   celular, gracias al 100svh de .hero) y queda detrás del degradado oscuro
   de ::after, que sigue garantizando que el texto se lea igual con o sin
   video. Si el archivo falla, el onerror del <video> lo saca del DOM y
   queda la foto/degradado de arriba, sin ningún hueco raro. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__fondo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(20,17,13,.92) 0%, rgba(20,17,13,.72) 55%, rgba(20,17,13,.55) 100%);
}
.hero__contenido {
  position: relative;
  z-index: 2;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 140px var(--gutter) 90px;
  width: 100%;
}
.hero__titulo {
  font-size: clamp(52px, 13vw, 132px);
  line-height: .92;
  letter-spacing: -.03em;
  font-variation-settings: 'SOFT' 12, 'WONK' 1, 'opsz' 144;
  margin-bottom: 26px;
}
/* Versión más chica del título: la jerarquía ahora la lleva el texto
   destacado de abajo, no el nombre de la marca. */
.hero__titulo--chico { font-size: clamp(38px, 7vw, 84px); margin-bottom: 22px; }

/* Firma del sitio: la línea de oro se traza como un buril sobre el metal. */
.hero__linea {
  display: block;
  height: 1px;
  width: min(420px, 100%);
  background: linear-gradient(to right, var(--oro-luz), rgba(226,198,141,0));
  transform-origin: left;
  animation: trazar 1400ms cubic-bezier(.16,.84,.44,1) 240ms both;
}
@keyframes trazar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* La información más importante: una línea corta y clara, más grande que el
   texto secundario de abajo. */
.hero__destacado {
  max-width: 42ch;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(19px, 2.6vw, 27px);
  line-height: 1.4;
  color: var(--texto);
  margin: 24px 0 12px;
}

.hero__texto {
  max-width: 46ch;
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.7;
  color: var(--texto-medio);
  margin: 0 0 36px;
}

/* Las tres llamadas a la acción: catálogo completo, ir directo a lo que ya
   está listo, o conocer el taller. En celular se acomodan en dos filas. */
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.boton--doble {
  flex-direction: column;
  gap: 3px;
  line-height: 1.2;
  padding-block: 13px;
}
.boton--doble small {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .75;
}

.hero__entrada > * { animation: subir 900ms cubic-bezier(.22,.61,.36,1) both; }
.hero__entrada > *:nth-child(1) { animation-delay: 80ms; }
.hero__entrada > *:nth-child(2) { animation-delay: 160ms; }
.hero__entrada > *:nth-child(4) { animation-delay: 460ms; }
.hero__entrada > *:nth-child(5) { animation-delay: 620ms; }
.hero__entrada > *:nth-child(6) { animation-delay: 780ms; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Franja de datos del taller: tres hechos, no tres eslóganes. */
.franja { background: var(--superficie); border-block: 1px solid var(--linea); }
.franja__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--ancho);
  margin-inline: auto;
}
.franja__item { padding: 38px var(--gutter); border-left: 1px solid var(--linea); }
.franja__item:first-child { border-left: 0; }
.franja__dato { font-family: var(--display); font-size: clamp(26px, 3.6vw, 38px); display: block; margin-bottom: 6px; color: var(--oro-luz); }
.franja__desc { font-size: 13px; color: var(--texto-medio); line-height: 1.5; margin: 0; }

/* ========================================================== 5. CATÁLOGO === */
/* Bloque de cabecera: fondo propio (superficie + resplandor cálido) que lo
   separa del área de catálogo, más oscura, que empieza en .barra-filtros. */
.cabecera-pagina {
  position: relative;
  overflow: hidden;
  padding: calc(var(--alto-nav) + 40px) 0 34px;
  background: var(--superficie);   /* fallback sólido si fondo y video fallan */
  border-bottom: 1px solid var(--linea-fuerte);
}
/* Capa de fondo: foto (y, arriba de ella, video opcional) + resplandor
   dorado + velo oscuro. Mientras no exista img/catalogo-fondo.jpg/.mp4 no
   pasa nada raro: se ve igual que siempre, solo con el velo. Para
   activarlos, subí los archivos a esas rutas (ver img/LEEME.txt). */
.cabecera-pagina__fondo {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 14% 0%, rgba(201, 164, 92, .14) 0%, transparent 55%),
    url('../img/catalogo-fondo.jpg') center / cover no-repeat,
    var(--superficie);
}
.cabecera-pagina__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cabecera-pagina__fondo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,13,.90) 0%, rgba(20,17,13,.94) 100%);
}
/* El texto va explícitamente por encima de la capa de fondo (que es
   position:absolute): sin este z-index, el fondo taparía todo. */
.cabecera-pagina > .contenedor {
  position: relative;
  z-index: 2;
}

/* Categorías: píldoras marcadas, no un texto con subrayado. La activa se
   pinta sólida en oro; el resto queda con contorno sobre el fondo cálido. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 24px;
}
.tab {
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-medio);
  background: rgba(20, 17, 13, .35);
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  padding: 13px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.tab:hover { border-color: var(--oro); color: var(--texto); }
.tab.activo {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--fondo);
}

/* Título de categoría: mismo tratamiento sans + versalitas que "Para pedir la
   mano", pero a tamaño de título. Reemplaza el serif que tenía antes. */
.cabecera-pagina__titulo {
  font-family: var(--ui);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* Bajada: al tamaño de la letra chica de los atajos, no de un párrafo normal. */
.cabecera-pagina__bajada {
  max-width: 56ch;
  color: var(--texto-medio);
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .01em;
  line-height: 1.6;
}

/* Barra de filtros: aparece cuando empezás a bajar. */
/* Fila fija (no depende del scroll): va entre las categorías y los atajos. */
.barra-filtros {
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
.barra-filtros__inner {
  padding-block: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.barra-filtros__inner::-webkit-scrollbar { display: none; }
.barra-filtros__conteo {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}

.chip {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-medio);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.chip:hover { color: var(--texto); border-color: var(--oro); }
.chip.activo { background: var(--oro); color: var(--fondo); border-color: var(--oro); }
.chip__x { margin-left: 8px; opacity: .75; }

/* Atajos destacados: compactos, siempre uno al lado del otro. */
/* Aviso de cotización personalizada: para quien no encuentra lo que busca
   tal cual en el catálogo. Mismo acento (borde dorado a la izquierda) que
   el recuadro de personalización de cada pieza, para que se lea como
   "parte de la familia" y no como un banner de publicidad. */
.cotiza-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding: 18px 22px;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-left: 2px solid var(--oro);
  border-radius: var(--radio);
}
.cotiza-callout__titulo { font-family: var(--display); font-size: 19px; color: var(--texto); margin: 0 0 4px; }
.cotiza-callout__texto { font-size: 13px; color: var(--texto-medio); margin: 0; }

.atajos[hidden] { display: none; }
.atajos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-block: 26px 30px;
}
.atajo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  cursor: pointer;
  text-align: left;
  font-family: var(--ui);
  color: var(--texto);
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.atajo:hover { border-color: var(--oro); }
.atajo.activo { background: var(--oro); color: var(--fondo); border-color: var(--oro); }

/* Mismo tratamiento sans + versalitas que el pie ("Para pedir la mano"),
   ya no el serif de los títulos. */
.atajo__nombre {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: .01em;
  line-height: 1.28;
}
.atajo__pie { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .65; line-height: 1.4; }

/* Los dos atajos comparten el mismo tono dorado, apenas insinuado sobre el
   fondo oscuro; al activarse se pintan sólidos en oro. */
.atajo--compromiso,
.atajo--stock {
  background: linear-gradient(rgba(201, 164, 92, .13), rgba(201, 164, 92, .13)), var(--superficie);
  border-color: rgba(201, 164, 92, .40);
}
.atajo--compromiso:hover,
.atajo--stock:hover { border-color: var(--oro); }
.atajo--compromiso.activo,
.atajo--stock.activo { background: var(--oro); border-color: var(--oro); }

/* Layout del catálogo: en celular todo apilado (el panel flota encima como
   modal); en escritorio se abre en dos columnas, con los filtros siempre
   desplegados a la izquierda. Ver el bloque "sidebar en escritorio" más abajo. */
.catalogo-layout { display: block; }
.catalogo-principal { min-width: 0; }   /* así la grilla no empuja el ancho */

/* Panel de filtros */
.panel { position: fixed; inset: 0; z-index: 200; display: none; }
.panel.abierto { display: block; }
.panel__fondo { position: absolute; inset: 0; background: rgba(8, 6, 4, .7); }
.panel__caja {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--superficie);
  border-left: 1px solid var(--linea);
  padding: 26px var(--gutter);
  overflow-y: auto;
  animation: entrar-derecha 360ms cubic-bezier(.22,.61,.36,1);
}
@keyframes entrar-derecha { from { transform: translateX(100%); } to { transform: none; } }
.panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.panel__head h2 { font-size: 26px; }
.panel__cerrar { background: none; border: 0; font-size: 28px; cursor: pointer; line-height: 1; color: var(--texto); }
.grupo-filtro { padding-block: 20px; border-top: 1px solid var(--linea); }
.grupo-filtro__titulo { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin: 0 0 14px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.panel__acciones { display: flex; gap: 10px; margin-top: 26px; }

/* Sidebar en escritorio: el mismo panel deja de ser un modal deslizable y
   pasa a ser una columna fija, siempre abierta, a la izquierda de la grilla. */
@media (min-width: 901px) {
  .catalogo-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 44px;
    align-items: start;
  }
  #btnFiltros { display: none; }   /* ya no hace falta: los filtros están siempre visibles */

  .panel {
    position: static;
    display: block;
    z-index: auto;
  }
  .panel__fondo { display: none; }
  .panel__caja {
    position: sticky;
    top: calc(var(--alto-nav) + 20px);
    width: auto;
    max-height: calc(100svh - var(--alto-nav) - 40px);
    background: transparent;
    border-left: 0;
    padding: 0;
    animation: none;
  }
  .panel__head { margin-bottom: 18px; }
  .panel__cerrar { display: none; }   /* no hay nada que cerrar */
  .panel__acciones { margin-top: 22px; }
  #btnAplicar { display: none; }      /* "ver resultados" no aplica: ya se ven en vivo */
  #btnLimpiar { flex: 1; justify-content: center; }
}

/* Grilla del catálogo */
.grilla[hidden] { display: none; }
.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(26px, 3vw, 40px) clamp(16px, 2.4vw, 30px);
}
.vacio { padding: 70px 0; text-align: center; color: var(--texto-medio); }
.vacio h3 { font-size: 26px; margin-bottom: 10px; }

/* ============================================================= 6. CARDS === */
.card {
  position: relative;
  background: var(--superficie-2);
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  overflow: hidden;   /* la foto queda encajada dentro del mismo marco */
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .65);
  transition: border-color var(--transicion), transform var(--transicion);
}
.card:hover { border-color: var(--oro); }
.card__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  background: var(--superficie);
  overflow: hidden;
}
/* Placeholder: mientras no haya foto real se ve el monograma, no un ícono roto */
.card__foto::before,
.detalle__foto::before {
  content: 'GJ';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 44px;
  color: rgba(201, 164, 92, .18);
  background: linear-gradient(150deg, rgba(201,164,92,.08), transparent 62%), var(--superficie);
}
.card__foto img, .detalle__foto img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(.22,.61,.36,1);
}
.card__foto img.sin-imagen, .detalle__foto img.sin-imagen { display: none; }

/* Video de la pieza en movimiento. Aparece encima de la foto al pasar el mouse
   (o cuando la pieza queda a la vista, en celular). Solo se muestra cuando ya
   cargó, para que nunca se vea un cuadro negro. */
.card__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.card:hover .card__video.listo,
.card:focus-within .card__video.listo { opacity: 1; }

/* En celular no hay hover: el video se ve cuando está reproduciéndose. */
@media (hover: none) {
  .card__video.listo { opacity: 1; }
}

/* Video en la galería del detalle */
.detalle__video {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--fondo);
}
.detalle__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--oro-luz);
  background: rgba(16, 13, 10, .48);
}
.card:hover .card__foto img { transform: scale(1.03); }

/* "Ver detalle": pastilla oscura con oro, centrada sobre la foto.
   Si lo preferís abajo en vez de al medio, cambiá estas dos líneas por
   left: 12px; bottom: 12px; y sacá el translate del transform. */
.card__ver {
  position: absolute;
  left: 50%; bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(16, 13, 10, .82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 198, 141, .45);
  color: var(--oro-luz);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity var(--transicion), transform var(--transicion),
              background var(--transicion), color var(--transicion);
}
.card:hover .card__ver,
.card:focus-within .card__ver { opacity: 1; transform: translate(-50%, 0); }
.card__ver:hover { background: var(--oro); color: var(--fondo); border-color: var(--oro); }

/* En touch no hay hover: el botón queda siempre visible. */
@media (hover: none) {
  .card__ver { opacity: 1; transform: translate(-50%, 0); }
}

/* Pie de la card: vive dentro del mismo recuadro que la foto, con su propio
   padding interno (la foto llega hasta el borde, el texto no). */
.card__info { padding: 14px 16px 18px; }
.card__material {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 7px;
}
.card__nombre { font-family: var(--display); font-size: 21px; line-height: 1.18; margin: 0 0 8px; }
/* El precio es el dato que más importa en la card: se separa con una línea
   fina, se centra y se agranda bastante más que el resto del texto. */
.card__precio {
  text-align: center;
  margin: 10px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
}
.card__precio small {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 4px;
}
.card__precio strong {
  display: block;
  font-size: 23px;
  font-weight: 700;
  color: var(--oro-luz);
  font-variant-numeric: tabular-nums;
}

/* ============================================================ 7. DETALLE === */
.detalle { padding-top: var(--alto-nav); }
.miga { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); padding-block: 24px 18px; margin: 0; }
.miga a { color: var(--oro); }

.detalle__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-bottom: clamp(56px, 8vw, 100px);
}
.detalle__galeria { position: sticky; top: calc(var(--alto-nav) + 20px); }
.detalle__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  margin: 0;
}
.detalle__miniaturas { display: flex; gap: 10px; margin-top: 10px; }
.detalle__miniatura {
  position: relative;      /* ancla el ícono de play a la miniatura */
  width: 74px; height: 74px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: 0; cursor: pointer; overflow: hidden;
  transition: border-color var(--transicion);
}
.detalle__miniatura.activa { border-color: var(--oro); }
.detalle__miniatura img { width: 100%; height: 100%; object-fit: cover; }

.detalle__titulo { font-size: clamp(32px, 5vw, 52px); margin-bottom: 16px; }
.detalle__titulo span { display: block; font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); margin-bottom: 14px; }
.detalle__estado { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.detalle__plazo { font-size: 12px; color: var(--texto-suave); }
.detalle__desc { color: var(--texto-medio); max-width: 56ch; }

/* Personalización: lo que el cliente puede elegir. En las piezas por pedido
   es el argumento de venta principal, así que va antes de la ficha técnica. */
.personalizacion {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-left: 2px solid var(--oro);
  border-radius: var(--radio);
}
.personalizacion__titulo {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 12px;
}
.personalizacion p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--texto-medio); }
.personalizacion p:last-child { margin-bottom: 0; }
.personalizacion__dato { color: var(--texto) !important; }
.personalizacion__dato strong { font-weight: 600; }

/* Muestras de los colores de oro */
.muestras { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.muestra {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-medio);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 6px 12px 6px 7px;
}
.muestra__punto {
  width: 14px; height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 -3px 5px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.10);
}

/* Ficha técnica: la pieza leída como orden de trabajo. */
.ficha { border-top: 1px solid var(--linea-fuerte); margin-top: 30px; }
.ficha__fila {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 14px;
}
.ficha__etiqueta { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); padding-top: 3px; }
.ficha__valor { font-variant-numeric: tabular-nums; }

/* Escalera de precios por piedra: es la decisión real del cliente,
   así que es el centro de la página. */
.escalera { margin-top: 38px; }
.escalera__titulo { font-size: 22px; margin-bottom: 6px; }
.escalera__aclaracion { font-size: 12.5px; color: var(--texto-suave); margin: 0 0 16px; }
.escalera__fila { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px solid var(--linea); }
.escalera__fila:last-child { border-bottom: 1px solid var(--linea); }
.escalera__piedra { font-size: 15px; }
.escalera__guia {
  flex: 1; height: 1px;
  background: repeating-linear-gradient(to right, var(--linea-fuerte) 0 3px, transparent 3px 7px);
  transform: translateY(-4px);
}
.escalera__precio { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--oro-luz); }
.escalera__precio.consultar { font-weight: 500; font-size: 12.5px; color: var(--texto-suave); letter-spacing: .1em; text-transform: uppercase; }

.detalle__cta { margin-top: 32px; }
.detalle__cta-botones { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.detalle__nota { font-size: 12px; color: var(--texto-suave); margin-top: 12px; }

.relacionadas { border-top: 1px solid var(--linea); }

/* Página "próximamente" */
.proximamente { min-height: 74svh; display: grid; place-items: center; text-align: center; padding: calc(var(--alto-nav) + 50px) var(--gutter) 80px; }
.proximamente h1 { font-size: clamp(34px, 6vw, 58px); margin-bottom: 18px; }
.proximamente p { max-width: 48ch; color: var(--texto-medio); margin-inline: auto; }

/* ====================================================== 7bis. PÁGINAS DE APOYO
   "Conocé tu medida" y "Cotizá tu pieza personalizada". */

/* Cabecera simple: mismo lenguaje que la del catálogo (breadcrumb + título +
   bajada) pero sin foto/video de fondo — son páginas de contenido, no de
   listado, así que no hace falta esa capa. */
.cabecera-simple { padding: calc(var(--alto-nav) + 40px) 0 8px; }
.cabecera-simple__titulo {
  font-family: var(--ui);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 10px 0 16px;
}
.cabecera-simple__bajada { max-width: 56ch; color: var(--texto-medio); margin: 0; font-size: 15px; line-height: 1.65; }

/* Método de medida: foto de un lado, texto del otro; se alternan a mano en
   el HTML (método 1 foto-izquierda, método 2 foto-derecha), no hace falta
   ninguna clase de "invertir": los divs ya van en el orden que corresponde. */
.metodo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.metodo__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--superficie-2);
  border: 1px solid var(--linea-fuerte);
}
.metodo__foto::before {
  content: 'GJ';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 44px;
  color: rgba(201, 164, 92, .18);
  background: linear-gradient(150deg, rgba(201,164,92,.08), transparent 62%), var(--superficie-2);
}
.metodo__foto img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.metodo__foto img.sin-imagen { display: none; }
.metodo__texto h2 { font-size: clamp(22px, 3vw, 30px); margin: 8px 0 20px; }
.metodo__pasos {
  list-style: none;
  counter-reset: paso;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.metodo__pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto-medio);
}
.metodo__pasos li::before {
  content: counter(paso);
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  color: var(--oro-luz);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  display: grid; place-items: center;
}

/* Callout del regalo: la línea que separa un método del otro, tratada como
   una pausa dentro de la página, no como un título más. */
.metodo__callout {
  padding-block: 6px 6px !important;
  text-align: center;
}
.metodo__callout h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2.8vw, 28px);
  color: var(--oro-luz);
  max-width: 46ch;
  margin-inline: auto;
  line-height: 1.4;
}

.metodo__video-titulo { font-size: clamp(22px, 3vw, 30px); margin: 8px 0 22px; }
.medida__video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 760px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--superficie-2);
  border: 1px solid var(--linea-fuerte);
}
.medida__video { width: 100%; height: 100%; object-fit: cover; background: var(--fondo); }
.medida__video-placeholder {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.medida__video-wrap.sin-video .medida__video { display: none; }
.medida__video-wrap.sin-video .medida__video-placeholder { display: flex; }

/* Formulario de cotización */
.form-cotiza {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
  max-width: 760px;
}
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
}
.campo input,
.campo select,
.campo textarea {
  font-family: var(--ui);
  font-size: 15px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: 4px;
  padding: 13px 14px;
  transition: border-color var(--transicion);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--oro); outline: none; }
.campo textarea { resize: vertical; min-height: 110px; font-family: var(--ui); line-height: 1.5; }
.campo select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23C9A45C'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23C9A45C' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.form-cotiza .boton { margin-top: 4px; }

/* ---------------------------------------------- "Conocé más de nosotros" -- */

/* Intro: foto grande del taller a un lado, el relato al otro. Es lo primero
   que se ve, así que la foto pesa tanto como el texto. */
.intro-nosotros { padding: calc(var(--alto-nav) + 44px) 0 clamp(48px, 7vw, 80px); }
.intro-nosotros__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.intro-nosotros__foto {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--superficie-2);
  border: 1px solid var(--linea-fuerte);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .85);
}
.intro-nosotros__foto::before {
  content: 'GJ';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 64px;
  color: rgba(201, 164, 92, .18);
  background: linear-gradient(150deg, rgba(201,164,92,.10), transparent 62%), var(--superficie-2);
}
.intro-nosotros__foto img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.intro-nosotros__foto img.sin-imagen { display: none; }

.intro-nosotros__titulo {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.06;
  margin: 6px 0 22px;
}
.intro-nosotros__texto p {
  color: var(--texto-medio);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0 0 16px;
  max-width: 54ch;
}
/* La frase que cierra el relato ("hoy somos tres...") se destaca apenas. */
.intro-nosotros__texto p:last-child { color: var(--texto); }

/* Dos tarjetas con lo que nos diferencia. Ícono en círculo + título + texto. */
.valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 30px;
}
.valor {
  padding: 20px;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  transition: border-color var(--transicion);
}
.valor:hover { border-color: var(--oro); }
.valor__icono {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(201, 164, 92, .12);
  border: 1px solid rgba(201, 164, 92, .30);
  margin-bottom: 14px;
}
.valor__icono svg { width: 19px; height: 19px; fill: none; stroke: var(--oro-luz); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.valor__titulo {
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--texto);
  margin: 0 0 10px;
}
.valor p { font-size: 13.5px; line-height: 1.6; color: var(--texto-medio); margin: 0; }

/* Equipo: tres tarjetas iguales, foto arriba y datos abajo — mismo lenguaje
   que las cards del catálogo, para que el sitio se sienta uno solo. */
.equipo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
  margin-top: 40px;
}
.miembro {
  background: var(--superficie-2);
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .7);
  transition: border-color var(--transicion);
}
.miembro:hover { border-color: var(--oro); }
.miembro__foto {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--superficie);
}
.miembro__foto::before {
  content: 'GJ';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 46px;
  color: rgba(201, 164, 92, .18);
  background: linear-gradient(150deg, rgba(201,164,92,.08), transparent 62%), var(--superficie);
}
.miembro__foto img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.miembro__foto img.sin-imagen { display: none; }
.miembro__info { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.miembro__rol {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 7px;
}
.miembro__nombre { font-family: var(--display); font-size: 24px; line-height: 1.15; margin: 0 0 12px; }
.miembro__bio { font-size: 13.5px; line-height: 1.65; color: var(--texto-medio); margin: 0 0 16px; flex: 1; }

/* Enlace a la red: pastilla con el ícono. */
.red {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--oro-luz);
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.red:hover { background: var(--oro); border-color: var(--oro); color: var(--fondo); }
.red__icono { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.red__icono .red__punto { fill: currentColor; stroke: none; }

.cierre__acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ================================================================ 8. PIE === */
.pie { background: var(--superficie); border-top: 1px solid var(--linea); color: var(--texto-medio); padding-block: clamp(44px, 7vw, 72px); }
.pie__grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
.pie__marca { font-family: var(--display); font-size: 30px; color: var(--texto); margin: 0; }
.pie__links { display: flex; flex-direction: column; gap: 10px; }
.pie__links a { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.pie__links a:hover { color: var(--oro-luz); }
.pie__legal { border-top: 1px solid var(--linea); margin-top: 36px; padding-top: 20px; font-size: 11.5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--texto-suave); }

/* ======================================================== 9. RESPONSIVE === */
@media (max-width: 900px) {
  .detalle__grid { grid-template-columns: 1fr; }
  .detalle__galeria { position: static; }
  .franja__grid { grid-template-columns: 1fr; }
  .franja__item { border-left: 0; border-top: 1px solid var(--linea); padding-block: 26px; }
  .franja__item:first-child { border-top: 0; }
  .metodo__grid { grid-template-columns: 1fr; }
  .form-cotiza { grid-template-columns: 1fr; }
  .campo { grid-column: 1 / -1; }
  /* Nosotros: foto arriba, texto abajo; y el equipo en dos columnas. */
  .intro-nosotros__grid { grid-template-columns: 1fr; }
  /* Sin el tope, la foto cuadrada ocupa toda la pantalla y empuja el relato
     abajo del todo. */
  .intro-nosotros__foto { max-width: 480px; }
  .equipo { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  :root { --alto-nav: 56px; }

  /* Navegación: marca más chica y la tercera sección abreviada,
     así entra todo sin cortarse ni desbordar. */
  .nav__inner { padding-block: 13px; gap: 12px; }
  .nav__marca { font-size: 17px; }
  .nav__marca small { display: none; }
  .nav__links { gap: 15px; }
  .nav__link { font-size: 10px; letter-spacing: .1em; }
  .nav__largo { display: none; }
  .cotiza-callout { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
  .cotiza-callout .boton { width: 100%; justify-content: center; }
  .valores { grid-template-columns: 1fr; }
  .equipo { grid-template-columns: 1fr; }
  .nav__corto { display: inline; }

  .hero__contenido { padding-top: 110px; }
  .hero__acciones { flex-direction: column; }
  .hero__acciones .boton { width: 100%; }

  /* Una pieza por vez: la foto ocupa todo el ancho. */
  .grilla { grid-template-columns: 1fr; gap: 40px; }
  .card__foto { aspect-ratio: 1 / 1; }
  .card__nombre { font-size: 26px; }

  /* Atajos: los dos en la misma fila, chicos. */
  .atajos { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-block: 20px 26px; }
  .atajo { padding: 11px 12px; gap: 2px; }
  .atajo__nombre { font-size: 14px; }
  .atajo__pie { font-size: 8.5px; letter-spacing: .1em; }

  .pastilla { font-size: 8.5px; padding: 6px 11px; letter-spacing: .1em; }
  .pastillas { top: 10px; left: 10px; right: 10px; gap: 5px; }
  .card__ver { font-size: 8.5px; padding: 7px 14px; }

  .detalle__cta .boton { width: 100%; }
  .panel__caja { padding-inline: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Con esta preferencia no autoreproducimos los videos: queda la foto fija. */
  .hero__video, .cabecera-pagina__video { display: none; }
}