/*
 Theme Name: Hello Elementor Child
 Template: hello-elementor
*/
/* utilidades 煤tiles; NO repitas .elementor a{...} aqu铆 */
.link--on-dark, .link--on-dark a { color:#E1E2E1 !important; }
.link--on-light, .link--on-light a { color:#111 !important; }

/* si una secci贸n es oscura, la marcas con esta clase en Elementor */
.is-over-dark { /* solo marca el contexto, el color ya lo pone el override */ }


/** =========================================
 *  GALERIA CUADROS QUE NO SE DEFORMAN HORIZONTALMENTE
 *  ========================================= */
/* ===== Galería loop Elementor — versión segura ===== */

/* El grid se aplica al contenedor INTERNO del loop */
.artworks-carousel .e-loop__container{
  --grid-max: 1400px; --col-gap: 72px; --row-gap: 56px;
  max-width: var(--grid-max); margin-inline:auto; padding-inline:24px;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:var(--col-gap); row-gap:var(--row-gap);
}

@media (max-width:1200px){ .artworks-carousel .e-loop__container{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:900px) { .artworks-carousel .e-loop__container{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px) { .artworks-carousel .e-loop__container{ grid-template-columns:repeat(2,1fr); } }

/* Cada item del loop centra su contenido y NO fija alturas */
.artworks-carousel .e-loop-item{
  display:grid; place-items:center; min-width:0; height:auto !important;
}

/* El “tile” que envuelve la imagen destacada */
.artworks-carousel .elementor-widget-theme-post-featured-image,
.artworks-carousel figure{
  display:grid; place-items:center; height:auto !important; transform:none !important;
}

/* Clases que añadirá el JS para fijar ratio del tile */
.artworks-carousel .is-portrait  { aspect-ratio: 3 / 4; }
.artworks-carousel .is-landscape { aspect-ratio: 16 / 11; grid-column: span 2; }
@media (max-width:900px){ .artworks-carousel .is-landscape{ grid-column: span 1; } }

/* Imagen: anti-deformación en Chrome (pisamos reglas globales de Elementor) */
.artworks-carousel img{
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  object-fit:contain !important; display:block;
}
/* =========================
   VIDEO DE FONDO CONTACTO
   ========================= */
/* sección de contacto crea el contexto */
.og-contact-hero{ position:relative; z-index:0; }

/* el widget html del vídeo NO ocupa espacio y queda detrás */
.og-contact-hero .og-bg-video-widget{
  position:absolute !important;
  inset:0 !important;
 /*  z-index:0 !important;*/
  margin:0 !important;
}

/* contenido por encima */
.og-contact-hero > .elementor-container,
.og-contact-hero > .e-con,
.og-contact-hero > .e-con-inner,
.og-contact-hero > .elementor-container > .elementor-row,
.og-contact-hero > .e-con > .e-con-inner{
  position:relative;
  z-index:1;
}

/* permitir clics en el botón: NO desactivar en el contenedor */
.og-contact-hero .og-bg-video{
  width:100%; height:100%; overflow:hidden;
  /* pointer-events:none;  <-- QUITADO */
}

/* desactivar clics solo en el propio vídeo */
.og-contact-hero .og-bg-video__el{
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; /* <-- así no bloquea los clics, pero el botón sí funciona */
}

/* botón circular negro arriba derecha */
.og-contact-hero .og-mute-btn{
  position:absolute;
  z-index:5; /* más alto para ir sobre todo */
  width:56px; height:56px; aspect-ratio:1/1;
  border-radius:999px; border:0;
  background:rgba(0,0,0,.6);
  display:grid; place-items:center;
  pointer-events:auto; cursor:pointer; backdrop-filter:blur(4px);
  top: var(--btn-top, 90px);
  right: var(--btn-right, 20px);
  bottom: var(--btn-bottom, auto);
  left: var(--btn-left, auto);
}

.og-contact-hero .og-mute-btn:hover{ background:rgba(0,0,0,.72); }
.og-contact-hero .og-mute-btn:focus{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px; }

.og-contact-hero .og-mute-icon{
  width:24px; height:24px; display:block; object-fit:contain; pointer-events:none;
}

@media (max-width:1023px){ .og-contact-hero .og-mute-btn{ width:52px; height:52px; } }
@media (max-width:767px){
  .og-contact-hero .og-mute-btn{ width:46px; height:46px; }
  .og-contact-hero{
    --btn-top: calc(100px + env(safe-area-inset-top));
    --btn-right: calc(12px + env(safe-area-inset-right));
  }
}
/* =========================
   CAJA FAQ
   ========================= */
.og-faq-box h1,
.og-faq-box h2,
.og-faq-box h3,
.og-faq-box p,
.og-faq-box li,
.og-faq-box a {
  color: #ffffff !important;
}
/* =====================================================================
/* evitar rebote extra por navegador (chrome, edge, firefox, safari moderno) */
/* ===================================================================== */

html, body {
  height: 100%;
  min-height: 100%;
  overscroll-behavior-y: none;
  scroll-behavior: auto !important; /* por si algo puso smooth global */
}

/* por si el fondo negro es del body al rebotar */
body {
  background-color: #111; /* o el color de tu hero/overall, el que quieras que se vea si acaso */
}

/* mantener flechas visibles durante la cortinilla entre obras */
html.ogimg-leave .og-arrows,
html.ogimg-enter .og-arrows,
html.ogimg-enter.ogimg-ready .og-arrows {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* y por si algún otro estilo les toca los hijos */
html.ogimg-leave .og-arrow,
html.ogimg-enter .og-arrow,
html.ogimg-enter.ogimg-ready .og-arrow {
  opacity: 1 !important;
  transform: translateY(-50%) !important; /* tu posición base */
}

@media (max-width: 767px) {
  /* solo en entradas */
  body.single-post {
    overflow: hidden !important; /* el body ya no se mueve */
  }

  /* hacemos que el contenido de la entrada ocupe toda la pantalla y sea el que scrolla */
  body.single-post #content,
  body.single-post .site-main,
  body.single-post .elementor-location-single {
    position: fixed;
    inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
    overflow-y: auto;          /* aquí es donde se hace el scroll */
    -webkit-overflow-scrolling: touch;
  }
}