/* =============================================================================
   FEDBEC — HOJA DE ESTILOS
   =============================================================================
   Orden del archivo:

     1. Variables (colores, medidas)     8. Galería y visor de fotos
     2. Base y utilidades                9. Contacto y formulario
     3. Botones                         10. Catálogo y ventana de detalle
     4. Encabezado y menú                11. Pie y botones flotantes
     5. Portada (hero)                   12. Animaciones de aparición
     6. Rubros y carrusel                13. Pantallas chicas (celular)
     7. Ventajas                         14. Menos animaciones

   Para cambiar los colores de TODA la página, tocá solo el bloque 1.
============================================================================= */


/* -----------------------------------------------------------------------------
   1. VARIABLES
----------------------------------------------------------------------------- */
:root {
  /* Colores de la marca, sacados del logo */
  --naranja:        #e45e2a;
  --naranja-claro:  #ff7d4d;
  --bordo:          #8c141b;

  /* Escala de grises del fondo, del más oscuro al más claro */
  --fondo:          #0b0b0c;   /* fondo general de la página */
  --fondo-alt:      #101012;   /* secciones alternadas */
  --superficie:     #151518;   /* tarjetas */
  --superficie-2:   #1d1d21;   /* tarjetas levantadas / hover */
  --linea:          rgba(255,255,255,.09);
  --linea-fuerte:   rgba(255,255,255,.16);

  /* Textos */
  --texto:          #f4f4f5;
  --texto-suave:    #a5a5ad;
  --texto-tenue:    #6f6f78;

  /* WhatsApp */
  --wa:             #25d366;
  --wa-oscuro:      #1da851;

  /* Medidas */
  --radio:          14px;
  --radio-chico:    10px;
  --radio-grande:   22px;
  --alto-header:    84px;
  --ancho:          1180px;
  --ancho-max:      1500px;
  /* Margen a los costados: 18px en celular, hasta 48px en pantalla grande */
  --gutter:         clamp(18px, 4vw, 48px);

  /* Sombras */
  --sombra:         0 4px 24px rgba(0,0,0,.4);
  --sombra-alta:    0 24px 60px rgba(0,0,0,.55);

  /* Tipografías. Si Google Fonts no carga, usa las del sistema. */
  --fuente-titulo:  "Archivo", "Segoe UI", system-ui, sans-serif;
  --fuente-texto:   "Inter", "Segoe UI", system-ui, sans-serif;

  /* Curva de las animaciones: arranca rápido y frena suave */
  --curva:          cubic-bezier(.16,1,.3,1);
}


/* -----------------------------------------------------------------------------
   2. BASE Y UTILIDADES
----------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Que los anclas no queden tapadas por el encabezado fijo */
  scroll-padding-top: calc(var(--alto-header) + 20px);
}

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

/* Cuando hay una ventana abierta, el fondo no se mueve */
body.sin-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }

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

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }

p { margin: 0; }

/* Marca de foco: se ve solo cuando se navega con teclado */
:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.contenedor-ancho { max-width: var(--ancho-max); }

/* Salto de teclado al contenido */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  background: var(--naranja);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radio-chico);
  font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* Barrita de progreso de lectura */
.progreso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--bordo), var(--naranja));
  z-index: 120;
  transition: width .1s linear;
}

/* Las páginas: solo una visible por vez */
.pagina[hidden] { display: none; }
.pagina {
  animation: entraPagina .5s var(--curva) both;
}
@keyframes entraPagina {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Espaciado vertical de las secciones */
.seccion { padding: clamp(64px, 9vw, 120px) 0; }
.seccion-alt {
  background: var(--fondo-alt);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

/* Encabezado de sección */
.seccion-head {
  max-width: 640px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.seccion-bajada {
  color: var(--texto-suave);
  margin-top: 14px;
  font-size: 1.05rem;
}

/* La etiqueta chiquita naranja que va arriba de los títulos */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-titulo);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--naranja);
  flex: none;
}


/* -----------------------------------------------------------------------------
   3. BOTONES
----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--fuente-titulo);
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--curva), background .2s, box-shadow .2s, border-color .2s;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primario {
  background: var(--naranja);
  color: #fff;
  box-shadow: 0 6px 20px rgba(228,94,42,.28);
}
.btn-primario:hover {
  background: var(--naranja-claro);
  box-shadow: 0 10px 28px rgba(228,94,42,.4);
}

.btn-wa {
  background: var(--wa);
  color: #07220f;
  box-shadow: 0 6px 20px rgba(37,211,102,.24);
}
.btn-wa:hover {
  background: #34e07a;
  box-shadow: 0 10px 28px rgba(37,211,102,.36);
}

.btn-borde {
  background: transparent;
  color: var(--texto);
  border-color: var(--linea-fuerte);
}
.btn-borde:hover { border-color: var(--naranja); color: var(--naranja); }

.btn-sm { padding: 10px 18px; font-size: .88rem; }
.btn-bloque { width: 100%; }

/* Íconos dentro de los botones */
.ico-wa { width: 19px; height: 19px; fill: currentColor; flex: none; }
.ico-flecha {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--curva);
}
.btn:hover .ico-flecha { transform: translateX(4px); }


/* -----------------------------------------------------------------------------
   4. ENCABEZADO Y MENÚ
----------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--alto-header);
  z-index: 100;
  display: flex;
  align-items: center;
  /* Arranca transparente sobre la portada y se vuelve sólido al bajar */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
.header.solido {
  background: rgba(11,11,12,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
}

.header-inner {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  margin-right: auto;
}
/* El logo es un "lockup" vertical (la puerta arriba, FEDBEC abajo), así que
   necesita alto para que la palabra se lea. De ahí el header de 84px.

   El "brightness" es un parche: la mitad "BEC" del logo es bordó oscuro
   (#8c141b) y sobre fondo negro casi no se lee. Subirle el brillo la hace
   visible sin cambiar la forma. Lo ideal sería tener una versión del logo
   pensada para fondos oscuros; cuando la tengan, se saca esta línea. */
.marca img,
.footer-logo {
  filter: brightness(1.45) saturate(1.05);
}

.marca img { height: 54px; width: auto; flex: none; object-fit: contain; }

/* Separador finito entre el logo y el rubro */
.marca-texto {
  padding-left: 14px;
  border-left: 1px solid var(--linea-fuerte);
  font-size: .74rem;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.nav { display: flex; gap: 4px; }

.nav-link {
  position: relative;
  padding: 9px 15px;
  border-radius: 100px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--texto-suave);
  transition: color .2s, background .2s;
}
.nav-link:hover { color: var(--texto); background: rgba(255,255,255,.05); }

/* Subrayado naranja de la sección donde estás parado */
.nav-link.activo { color: var(--texto); }
.nav-link.activo::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--naranja);
}

.header-acciones { display: flex; align-items: center; gap: 12px; flex: none; }

/* Botón de las tres rayitas (solo en celular) */
.hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  width: 18px; height: 2px;
  margin: 0 auto;
  background: var(--texto);
  border-radius: 2px;
  transition: transform .3s var(--curva), opacity .2s;
}
/* Las rayitas se cruzan formando una X cuando el menú está abierto */
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú desplegable de celular */
.menu-movil {
  position: fixed;
  top: var(--alto-header); left: 0; right: 0;
  z-index: 99;
  background: rgba(11,11,12,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linea);
  padding: 20px 24px 28px;
  animation: bajaMenu .3s var(--curva) both;
}
.menu-movil[hidden] { display: none; }
@keyframes bajaMenu {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
.menu-movil nav { display: flex; flex-direction: column; margin-bottom: 20px; }
.mm-link {
  padding: 15px 4px;
  border-bottom: 1px solid var(--linea);
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  font-weight: 600;
}
.mm-link.activo { color: var(--naranja); }


/* -----------------------------------------------------------------------------
   5. PORTADA (HERO)
----------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--alto-header) + 48px) 0 88px;
  overflow: hidden;
}

/* Resplandor naranja + trama de líneas, para que el negro no quede plano */
.hero-fondo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 78% 8%,  rgba(228,94,42,.16), transparent 62%),
    radial-gradient(700px 480px at 8% 92%,  rgba(140,20,27,.16),  transparent 60%),
    linear-gradient(180deg, #0b0b0c 0%, #0e0e10 100%);
}
.hero-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  /* se desvanece hacia abajo para que no compita con el texto */
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 100%);
}

/* La portada usa un contenedor más ancho que el resto: necesita aire para
   que el collage de fotos tenga peso frente al título. */
.hero-inner {
  position: relative;
  max-width: var(--ancho-max);   /* alineado con el logo del encabezado */
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}

.hero-texto { max-width: 620px; }

.hero h1 { margin-bottom: 22px; }

/* La segunda línea del título, en degradé naranja */
.destacado {
  display: block;
  background: linear-gradient(100deg, var(--naranja) 10%, var(--naranja-claro) 60%, #ffa878 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero-bajada {
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  color: var(--texto-suave);
  max-width: 52ch;
  margin-bottom: 34px;
}

.hero-botones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }

/* Las etiquetas de abajo del todo */
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0; margin: 0;
}
.hero-tags li {
  padding: 7px 16px;
  border: 1px solid var(--linea);
  border-radius: 100px;
  font-size: .82rem;
  color: var(--texto-suave);
  background: rgba(255,255,255,.02);
}

/* --- Collage de fotos ---
   Las fotos son verticales (3:4), así que en vez de recortarlas a apaisado
   se muestran tal cual, escalonadas una respecto de la otra. */
.hero-media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.hero-foto {
  position: relative;
  margin: 0;
  border-radius: var(--radio-grande);
  overflow: hidden;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-alta);
  aspect-ratio: 3 / 4;
  will-change: transform;
}
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-foto-a { margin-top: 42px; }
.hero-foto-b { margin-top: -14px; }

/* Recuadro naranja apenas visible atrás, para dar profundidad */
.hero-marco {
  position: absolute;
  inset: 26px -22px -26px 22px;
  border: 1px solid rgba(228,94,42,.35);
  border-radius: var(--radio-grande);
  pointer-events: none;
}

/* Flechita de "bajá" */
.hero-scroll {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.hero-scroll span {
  width: 3px; height: 8px;
  border-radius: 3px;
  background: var(--naranja);
  animation: bajaPunto 1.7s var(--curva) infinite;
}
@keyframes bajaPunto {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  60%      { transform: translateY(15px); opacity: 0; }
}


/* -----------------------------------------------------------------------------
   6. RUBROS Y CARRUSEL
----------------------------------------------------------------------------- */
.rubro {
  display: grid;
  grid-template-columns: 1fr clamp(300px, 34%, 460px);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  padding: clamp(30px, 4vw, 46px);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  margin-bottom: 28px;
}
/* La segunda fila viene dada vuelta, para que las dos no queden iguales */
.rubro-invertido { grid-template-columns: clamp(300px, 34%, 460px) 1fr; }
.rubro-invertido .rubro-texto { order: 2; }
.rubro-invertido .carrusel     { order: 1; }

.rubro-num {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--naranja);
  margin-bottom: 12px;
}
.rubro h3 { margin-bottom: 16px; }
.rubro-texto > p { color: var(--texto-suave); margin-bottom: 22px; }

.rubro-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 10px;
}
.rubro-lista li {
  position: relative;
  padding-left: 26px;
  font-size: .95rem;
  color: var(--texto-suave);
}
/* Tilde naranja dibujada con CSS, sin imágenes */
.rubro-lista li::before {
  content: "";
  position: absolute;
  left: 3px; top: .55em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--naranja);
  border-bottom: 2px solid var(--naranja);
  transform: rotate(-45deg);
}

/* --- Carrusel --- */
.carrusel {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: #0e0e10;
  border: 1px solid var(--linea);
}
.carrusel-viewport { overflow: hidden; aspect-ratio: 3 / 4; }

.carrusel-track {
  display: flex;
  height: 100%;
  transition: transform .55s var(--curva);
}
.carrusel-slide { flex: 0 0 100%; min-width: 100%; }
.carrusel-slide img { width: 100%; height: 100%; object-fit: cover; }

.carrusel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s, background .2s;
}
.carrusel:hover .carrusel-btn,
.carrusel-btn:focus-visible { opacity: 1; }
.carrusel-btn:hover { background: var(--naranja); border-color: var(--naranja); }
.carrusel-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carrusel-prev { left: 12px; }
.carrusel-next { right: 12px; }

.carrusel-dots {
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.carrusel-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: width .3s var(--curva), background .3s;
}
.carrusel-dot.activo { width: 22px; background: var(--naranja); }


/* -----------------------------------------------------------------------------
   7. VENTAJAS
----------------------------------------------------------------------------- */
.ventajas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.ventaja {
  padding: 30px 26px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: transform .3s var(--curva), border-color .3s, background .3s;
}
.ventaja:hover {
  transform: translateY(-5px);
  border-color: rgba(228,94,42,.4);
  background: var(--superficie-2);
}

.ventaja-ico {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  border-radius: 12px;
  background: rgba(228,94,42,.12);
  border: 1px solid rgba(228,94,42,.24);
}
.ventaja-ico svg {
  width: 22px; height: 22px;
  fill: none; stroke: var(--naranja); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.ventaja h3 { font-size: 1.15rem; margin-bottom: 10px; }
.ventaja p  { font-size: .93rem; color: var(--texto-suave); }


/* -----------------------------------------------------------------------------
   8. GALERÍA Y VISOR DE FOTOS
----------------------------------------------------------------------------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }

.filtro {
  padding: 9px 20px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 100px;
  background: transparent;
  color: var(--texto-suave);
  font-family: var(--fuente-texto);
  font-size: .9rem;
  cursor: pointer;
  transition: all .2s;
}
.filtro:hover  { color: var(--texto); border-color: var(--texto-tenue); }
.filtro.activo {
  background: var(--naranja);
  border-color: var(--naranja);
  color: #fff;
  font-weight: 600;
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.galeria-item {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: zoom-in;
  background: var(--superficie);
  animation: apareceFoto .45s var(--curva) both;
}
.galeria-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--curva), filter .4s;
}
.galeria-item:hover img { transform: scale(1.06); filter: brightness(1.06); }

/* Velo oscuro + lupa al pasar el mouse */
.galeria-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
  opacity: 0;
  transition: opacity .3s;
}
.galeria-item:hover::after { opacity: 1; }

.galeria-tag {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s var(--curva);
}
.galeria-item:hover .galeria-tag { opacity: 1; transform: none; }

@keyframes apareceFoto {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* --- Visor a pantalla completa --- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6,6,7,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: apareceFondo .25s ease both;
}
.visor[hidden] { display: none; }

.visor-figura {
  margin: 0;
  max-width: min(92vw, 900px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: entraFoto .35s var(--curva) both;
}
.visor-figura img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.visor-figura figcaption {
  color: var(--texto-suave);
  font-size: .88rem;
  text-align: center;
  max-width: 60ch;
}
@keyframes entraFoto {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}

.visor-cerrar, .visor-nav {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.visor-cerrar:hover, .visor-nav:hover {
  background: var(--naranja);
  border-color: var(--naranja);
  transform: scale(1.08);
}
.visor-cerrar { top: 20px; right: 20px; width: 44px; height: 44px; }
.visor-nav    { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.visor-nav:hover { transform: translateY(-50%) scale(1.08); }
.visor-prev { left: 20px; }
.visor-next { right: 20px; }
.visor svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* -----------------------------------------------------------------------------
   9. CONTACTO Y FORMULARIO
----------------------------------------------------------------------------- */
.contacto-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items: start;
}

.form, .datos {
  padding: clamp(26px, 3vw, 36px);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
}

.campo { margin-bottom: 18px; }
.campo label {
  display: block;
  margin-bottom: 8px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--fondo);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: .96rem;
  transition: border-color .2s, background .2s;
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-tenue); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--naranja);
  background: #0e0e10;
}
/* Aviso cuando falta completar el nombre */
.campo.error input { border-color: #ef4444; }
.campo-error {
  display: none;
  margin-top: 6px;
  font-size: .82rem;
  color: #f87171;
}
.campo.error .campo-error { display: block; }

.form-nota {
  margin-top: 14px;
  font-size: .82rem;
  color: var(--texto-tenue);
  text-align: center;
}

/* Tarjeta con los datos del local */
.datos h3 { font-size: 1.25rem; margin-bottom: 22px; }

.dato {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--linea);
}
.dato:last-of-type { border-bottom: none; }

.dato-ico {
  flex: none;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(228,94,42,.1);
  border: 1px solid rgba(228,94,42,.2);
}
.dato-ico svg {
  width: 17px; height: 17px;
  fill: none; stroke: var(--naranja); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.dato-texto { min-width: 0; }
.dato-texto span {
  display: block;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 2px;
}
.dato-texto strong, .dato-texto a {
  font-size: .98rem;
  font-weight: 500;
  color: var(--texto);
  word-break: break-word;
}
.dato-texto a:hover { color: var(--naranja); }


/* -----------------------------------------------------------------------------
   10. CATÁLOGO Y VENTANA DE DETALLE
----------------------------------------------------------------------------- */
.cat-hero {
  position: relative;
  padding: calc(var(--alto-header) + 60px) 0 48px;
  background:
    radial-gradient(760px 400px at 15% 0%, rgba(228,94,42,.14), transparent 62%),
    var(--fondo-alt);
  border-bottom: 1px solid var(--linea);
  margin-bottom: 40px;
}
.cat-bajada {
  color: var(--texto-suave);
  max-width: 56ch;
  margin-top: 16px;
}

/* Migas de pan */
.miga {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .85rem;
  color: var(--texto-tenue);
  margin-bottom: 22px;
}
.miga a:hover { color: var(--naranja); }
.miga b { color: var(--texto-suave); font-weight: 500; }

/* Barra con el buscador y el conteo */
.cat-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.buscador {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 260px;
  max-width: 380px;
  padding: 11px 16px;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: 100px;
  transition: border-color .2s;
}
.buscador:focus-within { border-color: var(--naranja); }
.buscador svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: var(--texto-tenue); stroke-width: 2;
  stroke-linecap: round;
}
.buscador input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: .93rem;
}
.buscador input::placeholder { color: var(--texto-tenue); }
/* Saca la crucecita gris fea que Chrome pone en los input de búsqueda */
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; }

.cat-conteo { font-size: .88rem; color: var(--texto-tenue); }

.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: transform .3s var(--curva), border-color .3s, box-shadow .3s;
  animation: apareceFoto .4s var(--curva) both;
}
.tarjeta:hover {
  transform: translateY(-6px);
  border-color: rgba(228,94,42,.45);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.tarjeta-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0e0e10;
}
.tarjeta-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--curva);
}
.tarjeta:hover .tarjeta-media img { transform: scale(1.07); }

/* Chapita con la cantidad de modelos */
.tarjeta-chip {
  position: absolute;
  top: 12px; right: 12px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--linea-fuerte);
  font-size: .73rem;
  font-weight: 600;
  color: #fff;
}

.tarjeta-info {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tarjeta-info h3 {
  font-size: 1.12rem;
  margin-bottom: 7px;
  color: var(--texto);
  transition: color .2s;
}
.tarjeta:hover .tarjeta-info h3 { color: var(--naranja); }
.tarjeta-info p {
  font-size: .89rem;
  color: var(--texto-suave);
  margin-bottom: 16px;
  flex: 1;
}

.tarjeta-cta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fuente-titulo);
  font-size: .84rem;
  font-weight: 600;
  color: var(--naranja);
}
.tarjeta-cta svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--curva);
}
.tarjeta:hover .tarjeta-cta svg { transform: translateX(4px); }

/* Sello para las fotos que NO son trabajos de Fedbec (bancos de imágenes).
   Va discreto pero legible: la idea es que nadie confunda una foto de
   catálogo con una obra hecha por ellos. */
.sello-ilustrativa {
  position: absolute;
  left: 10px; bottom: 10px;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--linea-fuerte);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--texto-suave);
}

.modal-aviso-foto {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--linea-fuerte);
  font-size: .72rem;
  color: var(--texto-suave);
}
.modal-aviso-foto[hidden] { display: none; }

/* Recuadro de "no hay resultados" */
.vacio {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--texto-suave);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
}
.vacio strong { display: block; color: var(--texto); margin-bottom: 6px; font-size: 1.1rem; }

/* Botón de volver del sub-catálogo */
.volver {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 60px;
  padding: 12px 22px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 100px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--texto-suave);
  transition: all .2s;
}
.volver:hover { color: var(--texto); border-color: var(--naranja); }
.volver svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--curva);
}
.volver:hover svg { transform: translateX(-4px); }

/* --- Ventana de detalle --- */
.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6,6,7,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: apareceFondo .28s ease both;
  overflow-y: auto;
}
.modal-fondo[hidden] { display: none; }

@keyframes apareceFondo {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* La ventana no scrollea: el que scrollea es .modal-cuerpo. Así el botón de
   cerrar queda siempre visible en la esquina, aunque la ficha sea larga. */
.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 940px;
  max-height: 90vh;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-alta);
  animation: entraModal .45s var(--curva) both;
}
/* La ventana sube desde abajo, se pasa 10px y cae en su lugar.
   El rebote es solo vertical: si además creciera de tamaño, en celular
   se cortaría contra los bordes de la pantalla. */
@keyframes entraModal {
  0%   { opacity: 0; transform: translateY(60px) scale(.94); }
  60%  { opacity: 1; transform: translateY(-10px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-cerrar {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.modal-cerrar:hover { background: var(--naranja); transform: rotate(90deg); }
.modal-cerrar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.modal-cuerpo {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  overflow-y: auto;
  flex: 1;
  min-height: 0;   /* sin esto, un hijo flex no deja que aparezca el scroll */
}

.modal-media { position: relative; background: #0e0e10; }
/* La foto se estira hasta el alto de la columna de texto, recortando lo que
   sobra. Sin height:100% quedaba una franja negra debajo de la imagen. */
.modal-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Alto mínimo de la columna de la foto, por si el texto es muy corto */
.modal-media::before {
  content: "";
  display: block;
  padding-top: 118%;
}

/* Miniaturas, solo si el producto tiene más de una foto */
.modal-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  overflow-x: auto;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
}
.modal-thumbs:empty { display: none; }
.modal-thumbs button {
  flex: none;
  width: 52px; height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: .6;
  transition: opacity .2s, border-color .2s;
}
.modal-thumbs button:hover  { opacity: 1; }
.modal-thumbs button.activo { opacity: 1; border-color: var(--naranja); }
.modal-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.modal-info { padding: clamp(26px, 3vw, 38px); }
.modal-info h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 12px; }
.modal-desc { color: var(--texto-suave); margin-bottom: 24px; }

.modal-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 9px;
}
.modal-lista li {
  position: relative;
  padding-left: 24px;
  font-size: .93rem;
}
.modal-lista li::before {
  content: "";
  position: absolute;
  left: 2px; top: .55em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--naranja);
  border-bottom: 2px solid var(--naranja);
  transform: rotate(-45deg);
}

/* Tabla de datos técnicos */
.modal-specs {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 26px;
  font-size: .9rem;
}
.modal-specs:empty { display: none; }
.modal-specs td {
  padding: 11px 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.modal-specs td:first-child {
  color: var(--texto-tenue);
  width: 40%;
  padding-right: 16px;
}
.modal-specs tr:last-child td { border-bottom: none; }


/* -----------------------------------------------------------------------------
   11. PIE Y BOTONES FLOTANTES
----------------------------------------------------------------------------- */
.footer {
  background: #070708;
  border-top: 1px solid var(--linea);
  padding-top: clamp(48px, 6vw, 72px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 {
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 4px;
}
.footer-col a {
  font-size: .93rem;
  color: var(--texto-suave);
  transition: color .2s, transform .2s;
}
.footer-col a:hover { color: var(--naranja); transform: translateX(3px); }

/* align-self es imprescindible: .footer-col es un flex en columna y, por
   defecto, estira sus hijos a todo el ancho (align-items: stretch). Eso
   deformaba el logo a ~460px de ancho contra 52px de alto. Con flex-start
   la imagen conserva su tamaño natural y el width:auto vuelve a mandar. */
/* Tres defensas contra el estirado, porque .footer-col es un flex en columna
   y por defecto estira sus hijos a todo el ancho (align-items: stretch):
     align-self  -> le dice que NO se estire
     flex: none  -> que no crezca ni se encoja
     object-fit  -> y si algo igual le forzara un ancho, la imagen se ajusta
                    adentro sin deformarse (deja aire, nunca aplasta)
   Con las tres, el logo no puede salir deformado en ningún escenario. */
.footer-logo {
  align-self: flex-start;
  flex: none;
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 6px;
}
.footer-desc {
  font-size: .92rem;
  color: var(--texto-suave);
  max-width: 42ch;
}

.footer-dato { font-size: .93rem; color: var(--texto-suave); }
.footer-dato b { display: block; color: var(--texto-tenue); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }

.footer-base {
  border-top: 1px solid var(--linea);
  padding: 22px 0;
  font-size: .85rem;
  color: var(--texto-tenue);
  text-align: center;
}

/* --- Botón flotante de WhatsApp --- */
.fab-wa {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0;
  height: 58px;
  padding: 0 18px;
  border-radius: 100px;
  background: var(--wa);
  color: #06210e;
  box-shadow: 0 10px 30px rgba(37,211,102,.34);
  transition: gap .35s var(--curva), padding .35s var(--curva), transform .25s var(--curva), box-shadow .25s;
}
.fab-wa svg { width: 27px; height: 27px; fill: currentColor; flex: none; }
.fab-wa:hover { transform: scale(1.04); box-shadow: 0 14px 38px rgba(37,211,102,.5); }

/* El texto aparece deslizándose al pasar el mouse */
.fab-texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: .95rem;
  opacity: 0;
  transition: max-width .35s var(--curva), opacity .25s, margin-left .35s var(--curva);
}
.fab-wa:hover .fab-texto,
.fab-wa:focus-visible .fab-texto { max-width: 140px; opacity: 1; margin-left: 10px; }

/* Anillo que late alrededor del botón para llamar la atención */
.fab-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100px;
  border: 2px solid var(--wa);
  animation: latido 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes latido {
  0%        { transform: scale(1);    opacity: .6; }
  70%, 100% { transform: scale(1.28); opacity: 0; }
}

/* --- Botón de volver arriba --- */
.fab-top {
  position: fixed;
  right: 26px; bottom: 92px;
  z-index: 89;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  background: rgba(21,21,24,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--texto);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, visibility .3s, transform .3s var(--curva), background .2s;
}
.fab-top.visible { opacity: 1; visibility: visible; transform: none; }
.fab-top:hover { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.fab-top svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* -----------------------------------------------------------------------------
   12. ANIMACIONES DE APARICIÓN
   Los bloques con la clase "reveal" arrancan invisibles y aparecen cuando
   entran en pantalla. Quien lo activa es script.js.
----------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--curva), transform .7s var(--curva);
}
.reveal.visible { opacity: 1; transform: none; }


/* -----------------------------------------------------------------------------
   13. PANTALLAS CHICAS
----------------------------------------------------------------------------- */

/* Notebooks chicas y tablets apaisadas */
@media (max-width: 1080px) {
  .nav { display: none; }
  .hamburguesa { display: flex; }

  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-texto { max-width: 100%; }
  .hero-media { max-width: 560px; }
  .hero { min-height: auto; }

  .contacto-grid { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr 1fr; }
}

/* Tablets verticales */
@media (max-width: 860px) {
  .rubro,
  .rubro-invertido { grid-template-columns: 1fr; }
  .rubro-invertido .rubro-texto { order: 1; }
  .rubro-invertido .carrusel     { order: 2; }
  /* Centrado: en una sola columna, pegado a la izquierda queda desbalanceado */
  .rubro .carrusel { max-width: 420px; width: 100%; margin-inline: auto; }

  /* En una sola columna la foto va arriba, más baja y apaisada */
  .modal-cuerpo { grid-template-columns: 1fr; }
  .modal-media::before { padding-top: 62%; }

  /* En celular las flechas del carrusel se ven siempre: no hay "pasar el mouse" */
  .carrusel-btn { opacity: 1; }
}

/* Celulares */
@media (max-width: 620px) {
  :root { --alto-header: 66px; }

  .marca img { height: 40px; }
  .marca-texto { display: none; }

  /* El botón de WhatsApp del header estorba con el menú: se ve el flotante */
  .header-acciones .btn-wa { display: none; }

  .hero { padding-bottom: 64px; }
  .hero-botones .btn { flex: 1 1 100%; }
  .hero-scroll { display: none; }

  /* El collage pasa a una sola foto: dos verticales en celular quedan diminutas */
  .hero-media { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  .hero-foto-b { display: none; }
  .hero-foto-a { margin-top: 0; }
  .hero-marco  { inset: 18px -14px -18px 14px; }

  .galeria-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .catalogo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tarjeta-info  { padding: 14px 14px 18px; }
  .tarjeta-info h3 { font-size: .98rem; }
  .tarjeta-info p  { font-size: .82rem; margin-bottom: 12px; }
  .tarjeta-cta   { font-size: .78rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  .modal-fondo { padding: 0; }
  .modal {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
  }

  .visor { padding: 12px; }
  .visor-nav { width: 40px; height: 40px; }
  .visor-prev { left: 8px; }
  .visor-next { right: 8px; }

  .fab-wa { right: 16px; bottom: 16px; height: 54px; padding: 0 15px; }
  .fab-top { right: 20px; bottom: 82px; }
}


/* -----------------------------------------------------------------------------
   14. SI EL VISITANTE PIDIÓ MENOS ANIMACIONES
   Windows, Android y iPhone tienen una opción de "reducir movimiento".
   Si está activada, mostramos todo quieto.
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  .reveal { opacity: 1; transform: none; }
}