.elementor-kit-11{--e-global-color-primary:#E6E7E2;--e-global-color-secondary:#33604B;--e-global-color-text:#6F766D;--e-global-color-accent:#141E19;--e-global-color-823be4b:#33604B;--e-global-color-63cf026:#A8894F;--e-global-typography-primary-font-family:"Instrument Serif";--e-global-typography-primary-font-size:46px;--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Instrument Serif";--e-global-typography-secondary-font-size:30px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-size:11px;--e-global-typography-accent-font-weight:400;color:#6F766D;}.elementor-kit-11 a{color:#141E19;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1180px;}.e-con{--container-max-width:1180px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   MUSEO DE APEROS — hoja de estilos  (v2, portada del wireframe)
   Pegar completo en:  Elementor > Ajustes del sitio > CSS personalizado
   Paleta: Verde paramo (opcion B del sistema visual)

   NOTA SOBRE LOS GANCHOS
   Elementor 4 (elementos atomicos) NO permite anadir clases CSS arbitrarias:
   el atributo class se descarta al renderizar. Lo verificamos en el editor.
   Por eso todo el CSS cuelga de atributos  data-mus="..."  , que Elementor si
   permite como atributo personalizado y que en CSS funcionan igual que una
   clase. Los ID (galeria, p1..p6) se ponen con el campo ID CSS.
   ========================================================================== */

:root{
  --bruma:#E6E7E2;      /* fondo */
  --liquen:#D2D6CD;     /* menu, hover, marcador de imagen */
  --ceniza:#6F766D;     /* texto secundario */
  --sombra:#141E19;     /* titulos y texto principal */
  --paramo:#33604B;     /* acento unico */
  --laton:#A8894F;      /* opcional */
  --hair:rgba(20,30,25,.14);
  --hair-15:rgba(20,30,25,.15);
  --ease:cubic-bezier(.22,1,.36,1);
}

html{ scroll-behavior:smooth; }
body{
  background:var(--bruma);
  color:var(--sombra);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Un solo peso en todo el sitio: 400. La jerarquia se hace con tamano y color.
   Archivo es variable y por defecto entra en 600: hay que forzarlo. */
body, body p, body li, body dt, body dd,
.elementor-widget-e-paragraph, .elementor-widget-text-editor{
  font-weight:400!important;
}
h1,h2,h3,h4,
.elementor-widget-e-heading h1, .elementor-widget-e-heading h2,
.elementor-widget-e-heading h3, .elementor-widget-e-heading h4{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400!important;
  letter-spacing:-.01em;
  margin:0;
}

/* Elementor mete relleno por defecto en los contenedores. Lo neutralizamos
   donde marcamos con data-mus, para controlar el espaciado nosotros. */
[data-mus="full"]{ padding-left:0!important; padding-right:0!important; }

/* Los contenedores atomicos de Elementor entran en FILA por defecto; en este
   diseno casi todos apilan en vertical. Esta regla va deliberadamente aqui
   arriba: las excepciones (dock, portada, acordeon, rejillas) repiten la
   propiedad con !important mas abajo y ganan por orden de cascada, porque
   [data-mus] y [data-mus="x"] tienen la misma especificidad. */
[data-mus]{ flex-direction:column!important; }


/* ==========================================================================
   1. MENU FLOTANTE (dock)
   ========================================================================== */

[data-mus="dock"]{
  position:fixed!important;
  left:50%!important;
  bottom:30px!important;
  top:auto!important;
  transform:translateX(-50%);
  z-index:600;
  width:auto!important;
  /* con !important: Elementor fija su propio max-width en el contenedor y
     sin esto la barra se estiraba de borde a borde en el telefono */
  max-width:calc(100vw - 32px)!important;
  display:flex!important;
  flex-direction:row!important;
  /* Sin gap ni relleno propio: cada nombre aporta el suyo y asi el filete
     del activo llega hasta el borde superior de la barra, como una pestana. */
  gap:0!important;
  align-items:stretch!important;
  padding:0!important;
  border-radius:0!important;
  /* Rectangulo oscuro y translucido. El 68% no es arbitrario: la barra deja
     pasar una pagina clara, asi que cuanto mas baja la opacidad mas claro
     queda el fondo real y menos contrasta el texto. Por debajo de .65 el
     texto Liquen deja de cumplir el minimo de 4.5:1 a 12.5 px. */
  background:rgba(20,30,25,.68)!important;
  -webkit-backdrop-filter:saturate(170%) blur(22px);
  backdrop-filter:saturate(170%) blur(22px);
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:none!important;
  transition:transform .55s var(--ease), opacity .45s var(--ease);
  overflow-x:auto;
  scrollbar-width:none;
}
[data-mus="dock"]::-webkit-scrollbar{ display:none; }

/* estado oculto: lo activa el JS al entrar en la galeria */
[data-mus="dock"].mus-oculto{
  transform:translateX(-50%) translateY(150%);
  opacity:0;
  pointer-events:none;
}

/* Todos los nombres llevan un filete superior transparente del mismo grosor
   que el del activo. Asi al cambiar de seccion solo se enciende el color:
   no cambia ninguna medida y la barra no se mueve ni un pixel.
   Tamano 12.5 px y espaciado .02em, que es lo que fija tu matriz
   tipografica para los nombres del menu. */
[data-mus="dock"] a{
  font-family:"Archivo",sans-serif;
  font-size:12.5px!important;
  font-weight:400!important;
  letter-spacing:.02em;
  line-height:1.25;
  color:var(--liquen)!important;
  text-decoration:none;
  white-space:nowrap;
  display:block;
  padding:14px 18px!important;
  border-radius:0!important;
  background:none!important;
  border-top:2px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
[data-mus="dock"] a:hover{
  color:var(--bruma)!important;
  background:none!important;
  border-top-color:rgba(255,255,255,.28);
}

/* Seccion activa: filete arriba y el nombre en Bruma. El filete va en Laton
   y no en Paramo: sobre la barra oscura el verde queda oscuro sobre oscuro
   y practicamente desaparece. De paso el Laton vuelve a la pagina. */
[data-mus="dock"] a.mus-activo,
[data-mus="dock"] .mus-activo a{
  background:none!important;
  color:var(--bruma)!important;
  border-top-color:var(--laton);
}
[data-mus="dock"] a:focus-visible{ outline:1.5px solid var(--bruma); outline-offset:-3px; }
/* El widget de titulo aporta altura propia (margenes e interlineado del tema)
   y engordaba la pildora hasta 71 px. Aqui se aplana a la altura del texto. */
[data-mus="dock"] .elementor-widget,
[data-mus="dock"] .elementor-widget-container,
[data-mus="dock"] .elementor-heading-title{
  margin:0!important;
  padding:0!important;
  line-height:1.25!important;
  font-size:14px!important;
}
[data-mus="dock"] .elementor-widget{ width:auto!important; }


/* ==========================================================================
   2. ETIQUETAS Y FILETES  (versalitas del sistema visual)
   ========================================================================== */

[data-mus="etiqueta"], .mus-etiqueta,
[data-mus="etiqueta"] p, .mus-etiqueta p{
  font-family:"Archivo",sans-serif!important;
  font-size:11px!important;
  font-weight:400!important;
  letter-spacing:.18em!important;
  line-height:1.6;
  text-transform:uppercase;
  color:var(--ceniza)!important;
  margin:0;
}
/* alineacion a la derecha del rotulo de la galeria */
.mus-derecha, .mus-derecha p{ text-align:right; }

/* Mostrar u ocultar por dispositivo. Se usa para el aviso de la galeria:
   en escritorio se pasa el cursor, en tactil se desliza. No es el mismo
   gesto, asi que no puede ser el mismo texto. */
.mus-solo-movil{ display:none!important; }

[data-mus="filete"], .mus-filete{
  display:inline-block; width:38px; height:1px;
  background:var(--paramo); border:0;
}


/* ==========================================================================
   3. PORTADA
   ========================================================================== */

/* caja de contenido centrada, equivalente a .wrap del wireframe */
[data-mus="wrap"]{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:0 32px!important;
}

[data-mus="portada"]{
  min-height:100vh;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  padding:0!important;
}
[data-mus="portada"] [data-mus="wrap"]{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  position:relative;
  z-index:1;
}

/* Fondo de portada (biblioteca de medios: hero3.webp, ID 386, 1535x1024).
   Va acompanado de un velo en Bruma: el titular es Sombra #141E19 y sobre
   la foto desnuda no se leeria. El velo es fuerte a la izquierda, donde
   esta el texto, y se abre hacia la derecha para dejar ver la imagen. */
[data-mus="portada"]{
  background-image:
    linear-gradient(100deg,
      rgba(230,231,226,.97) 0%,
      rgba(230,231,226,.92) 32%,
      rgba(230,231,226,.58) 62%,
      rgba(230,231,226,.32) 100%),
    url("https://museocaballocriollo.ec/wp-content/uploads/2026/08/hero3.webp");
  background-repeat:no-repeat, no-repeat;
  background-size:cover, cover;
  background-position:center center, right center;
}

/* En movil el texto ocupa todo el ancho, asi que el velo pasa a vertical:
   opaco arriba, donde cae el titular, y abierto abajo. */
@media (max-width:767px){
  [data-mus="portada"]{
    background-image:
      linear-gradient(180deg,
        rgba(230,231,226,.96) 0%,
        rgba(230,231,226,.90) 48%,
        rgba(230,231,226,.52) 100%),
      /* en movil basta la version de 1024 px: pesa mucho menos y a 3x de
         densidad en una pantalla de 390 px sigue viendose nitida */
      url("https://museocaballocriollo.ec/wp-content/uploads/2026/08/hero3-1024x683.webp");
    background-position:center center, center center;
  }
}
[data-mus="portada"] h1{
  font-size:clamp(46px,8vw,104px)!important;
  line-height:.98!important;
  max-width:11ch;
  color:var(--sombra)!important;
  margin:26px 0 0;
}
[data-mus="portada"] h1 em,
[data-mus="portada"] h1 i{ font-style:italic; }

[data-mus="bajada"], .mus-bajada,
[data-mus="bajada"] p, .mus-bajada p{
  font-family:"Archivo",sans-serif!important;
  font-size:16px!important;
  font-weight:400!important;
  line-height:1.65;
  color:var(--ceniza)!important;
  max-width:38ch;
  margin:30px 0 0;
}

/* marca fija arriba a la izquierda */
[data-mus="marca"], .mus-marca{
  position:fixed!important;
  top:34px!important; left:32px!important;
  z-index:500;
  width:auto!important;
}


/* ==========================================================================
   4. HISTORIA
   ========================================================================== */

[data-mus="historia"]{
  padding:130px 0 150px!important;
  border-top:1px solid var(--hair);
}
[data-mus="historia-g"]{
  display:grid!important;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:70px;
  align-items:start;
}
[data-mus="historia"] h2{
  font-size:clamp(30px,4vw,46px)!important;
  line-height:1.08!important;
  max-width:14ch;
  color:var(--sombra)!important;
  margin-top:18px;
}
[data-mus="historia-der"] p, .mus-cuerpo-historia p{
  margin:0 0 22px;
  color:var(--ceniza)!important;
  max-width:60ch;
}
/* primer parrafo destacado: 18 px y color de titulo */
[data-mus="historia-der"] .elementor-widget-e-paragraph:first-of-type p,
[data-mus="destacado"] p, .mus-destacado p, .mus-destacado{
  color:var(--sombra)!important;
  font-size:18px!important;
}


/* ==========================================================================
   5. GALERIA EN ACORDEON
   ========================================================================== */

#galeria{
  border-top:1px solid var(--hair);
  padding:0!important;
}
[data-mus="galeria-head"]{
  padding:46px 0 26px!important;
  display:flex!important;
  flex-direction:row!important;
  justify-content:space-between!important;
  align-items:baseline!important;
  gap:20px;
}
[data-mus="galeria-head"] h2{
  font-size:clamp(26px,3.4vw,38px)!important;
  line-height:1.08!important;
  color:var(--sombra)!important;
  margin-top:12px;
}

[data-mus="acordeon"]{
  display:flex!important;
  flex-direction:row!important;
  gap:6px!important;
  height:74vh;
  min-height:430px;
  padding:0 32px 46px!important;
  flex-wrap:nowrap!important;
  width:100%!important;
}

[data-mus="tira"]{
  flex:1 1 0!important;
  min-width:0!important;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  padding:0!important;
  background:var(--liquen);
  transition:flex .8s var(--ease);
}
/* al entrar el cursor al acordeon, las no senaladas se encogen */
[data-mus="acordeon"]:hover [data-mus="tira"]{ flex:.72 1 0!important; }
/* la senalada se expande */
[data-mus="acordeon"] [data-mus="tira"]:hover,
[data-mus="acordeon"] [data-mus="tira"]:focus-within{ flex:3.6 1 0!important; }
[data-mus="tira"]:focus-visible{ outline:2px solid var(--sombra); outline-offset:3px; }

/* la imagen de fondo de cada tira ocupa toda la tira */
[data-mus="tira"] > .e-con-inner{ height:100%; padding:0!important; }
[data-mus="tira"] .elementor-widget-e-image,
[data-mus="tira"] .elementor-widget-image{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
}
[data-mus="tira"] img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:object-position .8s var(--ease);
}

/* ENCUADRE POR PIEZA
   Cinco de las seis fotos son apaisadas (3:2) y la tira en reposo es muy
   estrecha: con object-fit:cover solo se ve el 24% del ancho. Estos valores
   salen de medir en que columna de cada foto hay mas objeto, para que la
   franja no caiga en un vacio. Betas es el caso evidente: la soga forma un
   aro y el centro esta hueco, por eso su encuadre se va al extremo. */
[data-ir="#p1"] img{ object-position:42% center; }   /* Monturas */
[data-ir="#p2"] img{ object-position:43% center; }   /* Bocados  */
[data-ir="#p3"] img{ object-position:22% center; }   /* Espuelas */
[data-ir="#p4"] img{ object-position:2%  center; }   /* Betas    */
[data-ir="#p5"] img{ object-position:44% center; }   /* Peyones  */
[data-ir="#p6"] img{ object-position:50% center; }   /* Zamarros, la unica vertical */

/* Al expandirse, la tira ya muestra el 71% del ancho: se recentra para que
   se vea la pieza entera. La transicion hace de ese reencuadre parte del
   propio movimiento de apertura. */
[data-mus="tira"]:hover img,
[data-mus="tira"]:focus-within img{ object-position:50% center; }

/* rotulo de la tira */
[data-mus="rotulo"]{
  position:absolute!important;
  left:18px; bottom:18px; right:18px;
  z-index:2;
  width:auto!important;
  padding:0!important;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .45s var(--ease) .18s, transform .45s var(--ease) .18s;
  pointer-events:none;
}
[data-mus="tira"]:hover [data-mus="rotulo"],
[data-mus="tira"]:focus-within [data-mus="rotulo"]{ opacity:1; transform:none; }

[data-mus="rotulo"] [data-mus="etiqueta"],
[data-mus="rotulo"] [data-mus="etiqueta"] p{
  letter-spacing:.12em!important;
}
[data-mus="rotulo"] h3,
[data-mus="rotulo"] .mus-nombre-tira,
[data-mus="rotulo"] .mus-nombre-tira div{
  font-family:"Instrument Serif",Georgia,serif!important;
  font-size:24px!important;
  font-weight:400!important;
  line-height:1.2;
  white-space:nowrap;
  margin:0;
}

/* velo para que el rotulo se lea sobre cualquier foto */
[data-mus="tira"]::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(to top, rgba(20,30,25,.45), transparent);
  opacity:0; transition:opacity .45s var(--ease);
  pointer-events:none; z-index:1;
}
[data-mus="tira"]:hover::after,
[data-mus="tira"]:focus-within::after{ opacity:1; }
[data-mus="tira"]:hover [data-mus="rotulo"] *{ color:#EAEBE6!important; }


/* ==========================================================================
   6. FICHAS DE PIEZA
   ========================================================================== */

[data-mus="pieza"]{
  padding:120px 0!important;
  border-top:1px solid var(--hair);
}
[data-mus="pieza-g"]{
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:70px;
  align-items:start;
}
/* alterna el lado de la imagen en las piezas pares */
[data-mus="pieza"][data-invertida] [data-mus="pieza-g"]{ direction:rtl; }
[data-mus="pieza"][data-invertida] [data-mus="pieza-g"] > *{ direction:ltr; }

[data-mus="pieza"] h2{
  font-size:clamp(28px,3.6vw,42px)!important;
  line-height:1.08!important;
  margin:14px 0 26px!important;
  max-width:13ch;
  color:var(--sombra)!important;
}
[data-mus="cuerpo"] p, .mus-cuerpo p, .mus-cuerpo{
  color:var(--ceniza)!important;
  margin:0 0 34px;
  max-width:52ch;
}

/* ficha tecnica */
[data-mus="datos"], .mus-datos{
  border-top:1px solid var(--hair);
  padding-top:20px!important;
  display:grid!important;
  gap:11px;
}
[data-mus="datos"] .elementor-icon-list-item,
.mus-datos .elementor-icon-list-item{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:13px;
  border:0;
  padding:0;
  margin:0;
}
[data-mus="dato"]{
  display:flex!important;
  flex-direction:row!important;
  justify-content:space-between!important;
  gap:20px;
  width:100%!important;
  padding:0!important;
}
[data-mus="dato-et"], .mus-dato-et, .mus-dato-et p,
[data-mus="dato-et"] p{
  font-size:13px!important;
  letter-spacing:.06em;
  color:var(--ceniza)!important;
  margin:0;
}
[data-mus="dato-val"], .mus-dato-val, .mus-dato-val p,
[data-mus="dato-val"] p{
  font-size:13px!important;
  color:var(--sombra)!important;
  text-align:right;
  margin:0;
}

/* ==========================================================================
   MOSAICO SOBRE EL WIDGET "GALERIA BASICA"
   Cada ficha lleva UNA galeria con todas las fotos de su familia. Se ven
   las tres primeras con la maqueta del wireframe; el resto queda oculto
   pero dentro del documento, asi que el visor nativo las recorre igual.

   Se usa la Galeria basica y no la de Pro por dos razones medidas:
   1. La de Pro pinta las fotos como background-image de un div. Los
      navegadores moviles no guardan el mapa de bits de un fondo CSS como
      si hacen con una imagen real, asi que al volver a entrar en pantalla
      la re-rasterizan: eso es el parpadeo al subir y bajar.
   2. La de Pro precarga por JavaScript TODAS las fotos de la galeria para
      calcular su rejilla, ignorando display:none. Se descargaban 210
      imagenes para ensenar 18. La basica usa <img loading="lazy">, que el
      navegador no pide si el elemento esta oculto.
   ========================================================================== */

[data-mus="mosaico"] > .mus-galeria,
.mus-mosaico > .mus-galeria{
  grid-column:1 / -1!important;
  width:100%!important;
}

.mus-galeria .gallery{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin:0!important;
}
/* WordPress reparte las columnas con anchos en porcentaje y float: se anula */
.mus-galeria .gallery-item{
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  float:none!important;
  padding:0!important;
  position:relative;
  overflow:hidden;
  background:var(--liquen);
}
.mus-galeria .gallery-item:nth-child(1){ grid-column:1 / 3; aspect-ratio:16/10; }
.mus-galeria .gallery-item:nth-child(2),
.mus-galeria .gallery-item:nth-child(3){ aspect-ratio:4/3; }
/* de la cuarta en adelante: fuera de la vista, dentro del visor */
.mus-galeria .gallery-item:nth-child(n+4){ display:none!important; }

.mus-galeria .gallery-icon{ height:100%; margin:0!important; padding:0!important; }
.mus-galeria .gallery-icon a{ display:block; height:100%; }
.mus-galeria img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block;
  border:0!important;
  padding:0!important;
  max-width:none!important;
}
.mus-galeria .gallery-caption{ display:none!important; }

/* Aviso de cuantas fotos mas hay. El numero lo pone el JS contando los
   elementos, para que siga siendo correcto cuando suban mas. */
.mus-galeria .gallery-item[data-mas]::after{
  content:attr(data-mas);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,30,25,.52);
  color:var(--bruma);
  font-family:"Archivo",sans-serif;
  font-size:13px; font-weight:400; letter-spacing:.06em;
  pointer-events:none;
}

/* Sin efectos de aparicion. En tactil ademas sin efectos de cursor: el
   :hover se queda pegado tras un toque y obliga a repintar al desplazarse. */
.mus-galeria img,
.mus-galeria .gallery-item{
  animation:none!important;
  transition:none!important;
  transform:none!important;
}

/* En escritorio si: la foto crece un punto al pasar el cursor, que es lo
   que avisa de que se puede pulsar. Va DESPUES del bloque anterior porque
   ambos usan !important y decide el orden de la cascada. */
@media (hover:hover) and (pointer:fine){
  .mus-galeria .gallery-item{ transition:transform .5s var(--ease)!important; }
  .mus-galeria .gallery-item:hover{ transform:scale(1.025)!important; z-index:2; }
}

/* mosaico */
[data-mus="mosaico"], .mus-mosaico{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
[data-mus="mosaico"] .e-gallery-item, .mus-mosaico .e-gallery-item,
[data-mus="mosaico"] .elementor-gallery-item, .mus-mosaico .elementor-gallery-item,
[data-mus="mosaico"] .elementor-widget-e-image, .mus-mosaico .elementor-widget-e-image,
[data-mus="mosaico"] .elementor-widget-image, .mus-mosaico .elementor-widget-image{
  transition:transform .5s var(--ease);
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--liquen);
}
[data-mus="mosaico"] > .elementor-widget-e-image:first-child, .mus-mosaico > .elementor-widget-e-image:first-child,
[data-mus="mosaico"] > .elementor-widget-image:first-child, .mus-mosaico > .elementor-widget-image:first-child,
[data-mus="mosaico"] .e-gallery-item:first-child, .mus-mosaico .e-gallery-item:first-child{
  grid-column:1/3;
  aspect-ratio:16/10;
}
[data-mus="mosaico"] img, .mus-mosaico img{ width:100%; height:100%; object-fit:cover; display:block; }
[data-mus="mosaico"] .e-gallery-item:hover, .mus-mosaico .e-gallery-item:hover,
[data-mus="mosaico"] .elementor-gallery-item:hover, .mus-mosaico .elementor-gallery-item:hover,
[data-mus="mosaico"] .elementor-widget-e-image:hover, .mus-mosaico .elementor-widget-e-image:hover,
[data-mus="mosaico"] .elementor-widget-image:hover, .mus-mosaico .elementor-widget-image:hover{
  transform:scale(1.025); z-index:2; position:relative;
}
/* quitar el overlay de color que Elementor pone por defecto */
[data-mus="mosaico"] .elementor-gallery-item__overlay,
.mus-mosaico .elementor-gallery-item__overlay{ background:transparent!important; }


/* ==========================================================================
   7. LIGHTBOX
   ========================================================================== */

.elementor-lightbox{ background:rgba(20,30,25,.93)!important; }
.elementor-lightbox .elementor-lightbox-item{ padding:60px 32px; }
.dialog-lightbox-close-button,
.elementor-swiper-button{ color:rgba(234,235,230,.65)!important; }
.dialog-lightbox-close-button:hover,
.elementor-swiper-button:hover{ color:#EAEBE6!important; }


/* ==========================================================================
   8. PIE
   ========================================================================== */

[data-mus="pie"]{
  padding:100px 0 150px!important;
  border-top:1px solid var(--hair);
  text-align:center;
  align-items:center!important;
}
[data-mus="pie"] p{
  color:var(--ceniza)!important;
  font-size:12px!important;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0;
}


/* ==========================================================================
   9. MOVIL Y TABLET
   ========================================================================== */

@media (max-width:1024px){
  .mus-solo-escritorio{ display:none!important; }
  .mus-solo-movil{ display:block!important; }

  /* El encabezado de la galeria no cabe en dos columnas en un telefono:
     el titular y el aviso quedaban partidos en 2 y 3 lineas compitiendo. */
  [data-mus="galeria-head"]{
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:12px;
    padding:44px 0 22px!important;
  }
  .mus-derecha, .mus-derecha p{ text-align:left; }

  [data-mus="historia"] > .e-con-inner,
  [data-mus="historia-g"],
  [data-mus="pieza"] > .e-con-inner,
  [data-mus="pieza-g"]{ grid-template-columns:1fr; gap:34px; }
  [data-mus="pieza"][data-invertida] > .e-con-inner,
  [data-mus="pieza"][data-invertida] [data-mus="pieza-g"]{ direction:ltr; }

  [data-mus="acordeon"]{
    height:62vh; min-height:360px; overflow-x:auto;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:0 22px 40px!important;
    /* sin barra de desplazamiento visible: asomaba una barra gris del sistema */
    scrollbar-width:none; -ms-overflow-style:none;
  }
  [data-mus="acordeon"]::-webkit-scrollbar{ display:none; }
  [data-mus="acordeon"] [data-mus="tira"]{ flex:0 0 68%!important; scroll-snap-align:center; }
  [data-mus="acordeon"]:hover [data-mus="tira"]{ flex:0 0 68%!important; }
  [data-mus="acordeon"] [data-mus="tira"]:hover{ flex:0 0 68%!important; }
  [data-mus="rotulo"]{ opacity:1; transform:none; }
  [data-mus="tira"]::after{ opacity:1; }
  [data-mus="tira"] [data-mus="rotulo"] *{ color:#EAEBE6!important; }
}

@media (max-width:767px){
  /* En movil no caben seis capsulas: la barra se desliza en horizontal y el
     JS centra la seccion activa, asi que el desplazamiento es intencionado
     y no algo que el usuario tenga que descubrir. Se estrecha el relleno
     para que quepan mas nombres de una vez. */
  /* SIN DESENFOQUE EN MOVIL
     El dock va fijo sobre contenido que se desplaza. Con backdrop-filter la
     GPU tiene que rehacer el desenfoque de todo lo que hay detras en cada
     fotograma, y en un telefono real eso se ve como parpadeo al hacer
     scroll. Se cambia por un fondo mas opaco: mismo contraste, sin coste. */
  [data-mus="dock"]{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background:rgba(20,30,25,.88)!important;
  }

  /* Mosaico a una columna: en dos, los detalles quedaban en 140x105 px.
     Ademas sale de los margenes de la caja de contenido y ocupa el ancho
     completo de la pantalla: en un telefono cada pixel cuenta. */
  [data-mus="mosaico"]{
    margin-left:-32px!important;
    margin-right:-32px!important;
    width:calc(100% + 64px)!important;
  }
  .mus-galeria .gallery{ grid-template-columns:1fr!important; gap:6px!important; }
  .mus-galeria .gallery-item:nth-child(1){ grid-column:1 / -1!important; aspect-ratio:16/10; }
  .mus-galeria .gallery-item:nth-child(2),
  .mus-galeria .gallery-item:nth-child(3){ aspect-ratio:4/3; }

  /* En movil los seis nombres se reparten el ancho a partes iguales, como
     una barra de pestanas. Asi siempre caben los seis, no hay que deslizar
     y el filete del activo ocupa toda su columna. */
  [data-mus="dock"]{
    bottom:14px;
    gap:0!important;
    padding:0!important;
    justify-content:stretch!important;
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    overflow-x:visible;
  }
  [data-mus="dock"] .elementor-widget{ flex:1 1 0!important; min-width:0!important; }
  [data-mus="dock"] a{
    font-size:11px!important;
    letter-spacing:.01em;
    padding:13px 2px!important;
    text-align:center;
  }
  [data-mus="dock"] .elementor-widget,
  [data-mus="dock"] .elementor-widget-container,
  [data-mus="dock"] .elementor-heading-title{ font-size:11px!important; }
  [data-mus="marca"], .mus-marca{ top:24px!important; left:22px!important; }
  [data-mus="historia"]{ padding:90px 0 100px!important; }
  [data-mus="pieza"]{ padding:80px 0!important; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  [data-mus="tira"], [data-mus="dock"], [data-mus="rotulo"],
  [data-mus="mosaico"] .e-gallery-item, .mus-mosaico .e-gallery-item{ transition-duration:.01ms!important; }
}/* End custom CSS */