/* Miami Label — inicio (portada hecha en Elementor, página ID 147)
   Carrusel del hero, hover de tarjetas y cambio de foto en "Explora por tipología".
   Los [data-id] son los IDs de los elementos de Elementor; si se reconstruye una
   sección en Elementor hay que actualizarlos. */

:root { --ml-ease: cubic-bezier(0.25, 0.1, 0.25, 1); }

/* ---------- Hero: carrusel con disolución cruzada ---------- */
.ml-hero > img, .ml-hero > video { transition: opacity 1200ms var(--ml-ease); }
.ml-hero > img.ml-off, .ml-hero > video.ml-off { opacity: 0 !important; }
.ml-hero > video.ml-on { opacity: 1 !important; }
.ml-hero > img.ml-on  { opacity: 1 !important; animation: mlKen 9000ms var(--ml-ease) both; }
@keyframes mlKen { from { transform: scale(1.045); } to { transform: scale(1); } }

.ml-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #F8F6F2; opacity: 0.6;
  filter: drop-shadow(0 1px 5px rgba(37, 37, 37, 0.5));
  transition: opacity 180ms var(--ml-ease), transform 180ms var(--ml-ease);
}
.ml-hero__arrow:hover, .ml-hero__arrow:focus-visible { opacity: 1; }
.ml-hero__arrow:focus-visible { outline: 2px solid #F8F6F2; outline-offset: 2px; }
.ml-hero__arrow svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ml-hero__arrow--prev { left: 16px; }
.ml-hero__arrow--prev svg { transform: rotate(180deg); }
.ml-hero__arrow--next { right: 16px; }
.ml-hero__arrow--prev:hover { transform: translateY(-50%) translateX(-4px); }
.ml-hero__arrow--next:hover { transform: translateY(-50%) translateX(4px); }

.ml-hero__dots { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 4; display: flex; gap: 16px; }
.ml-hero__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(248, 246, 242, 0.72); cursor: pointer;
  transition: background-color 180ms var(--ml-ease), transform 180ms var(--ml-ease);
}
.ml-hero__dot:hover { background: #F8F6F2; }
.ml-hero__dot.is-active { background: #F8F6F2; transform: scale(1.35); }
.ml-hero__dot:focus-visible { outline: 2px solid #F8F6F2; outline-offset: 3px; }

/* "Desliza" a la izquierda (como el diseño original) para dejar libre el centro a los puntos */
[data-id="7a7c4a81"] { left: max(64px, calc((100vw - 1280px) / 2 + 64px)) !important; transform: none !important; }

@media (max-width: 767px) {
  .ml-hero__arrow { display: none; }          /* en móvil: swipe + puntos */
  [data-id="7a7c4a81"] { left: 24px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-hero > img { transition: none; }
  .ml-hero > img.ml-on { animation: none; }
}

/* ---------- Curaduría: hover de tarjeta ---------- */
[data-id="8b9bb71"], [data-id="1b67e384"], [data-id="71c85fb8"] { text-decoration: none; color: inherit; }
[data-id="21fd8c5a"], [data-id="34a8912e"], [data-id="4a528873"] { position: relative; }
[data-id="6e017724"], [data-id="1946a30b"], [data-id="3b7a0b65"] { transition: transform 440ms var(--ml-ease); }
[data-id="21fd8c5a"]::after, [data-id="34a8912e"]::after, [data-id="4a528873"]::after {
  content: "Ver pieza  \2192";
  position: absolute; left: 24px; bottom: 24px;
  font: 500 11px/1 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: #F8F6F2; text-shadow: 0 0 14px rgba(37, 37, 37, 0.5);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 440ms var(--ml-ease), transform 440ms var(--ml-ease);
}
[data-id="8b9bb71"]:hover [data-id="21fd8c5a"]::after,
[data-id="1b67e384"]:hover [data-id="34a8912e"]::after,
[data-id="71c85fb8"]:hover [data-id="4a528873"]::after { opacity: 1; transform: none; }
[data-id="8b9bb71"]:hover [data-id="6e017724"],
[data-id="1b67e384"]:hover [data-id="1946a30b"],
[data-id="71c85fb8"]:hover [data-id="3b7a0b65"] { transform: scale(1.03); }

/* ---------- Explora por tipología: foto que cambia con el hover ---------- */
[data-id="7acd4ec6"], [data-id="1d8555f7"], [data-id="7e16edaf"], [data-id="5b60d4f8"], [data-id="2bac7c2f"] { transition: opacity 440ms var(--ml-ease); }
[data-id="1b96de5e"]:has([data-id="6025b00f"]:hover, [data-id="604323f9"]:hover, [data-id="1ceee729"]:hover, [data-id="672c2636"]:hover) [data-id="7acd4ec6"] { opacity: 0; }
[data-id="1b96de5e"]:has([data-id="6025b00f"]:hover) [data-id="1d8555f7"] { opacity: 1; }
[data-id="1b96de5e"]:has([data-id="604323f9"]:hover) [data-id="7e16edaf"] { opacity: 1; }
[data-id="1b96de5e"]:has([data-id="1ceee729"]:hover) [data-id="5b60d4f8"] { opacity: 1; }
[data-id="1b96de5e"]:has([data-id="672c2636"]:hover) [data-id="2bac7c2f"] { opacity: 1; }
[data-id="a39b36d"], [data-id="6025b00f"], [data-id="604323f9"], [data-id="1ceee729"], [data-id="672c2636"] { position: relative; transition: padding-left 180ms var(--ml-ease); }
[data-id="a39b36d"]::before, [data-id="6025b00f"]::before, [data-id="604323f9"]::before, [data-id="1ceee729"]::before, [data-id="672c2636"]::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: #7F8D82;
  transition: width 440ms var(--ml-ease);
}
[data-id="a39b36d"]::before,
[data-id="6025b00f"]:hover::before, [data-id="604323f9"]:hover::before,
[data-id="1ceee729"]:hover::before, [data-id="672c2636"]:hover::before { width: 16px; }
[data-id="6025b00f"]:hover [data-id="298f48a4"], [data-id="604323f9"]:hover [data-id="4e460c33"],
[data-id="1ceee729"]:hover [data-id="735ea34c"], [data-id="672c2636"]:hover [data-id="6261297b"] { color: #7F8D82; }
[data-id="1b96de5e"]:has([data-id="6025b00f"]:hover, [data-id="604323f9"]:hover, [data-id="1ceee729"]:hover, [data-id="672c2636"]:hover) [data-id="a39b36d"] { padding-left: 0; }
[data-id="1b96de5e"]:has([data-id="6025b00f"]:hover, [data-id="604323f9"]:hover, [data-id="1ceee729"]:hover, [data-id="672c2636"]:hover) [data-id="a39b36d"]::before { width: 0; }
[data-id="1b96de5e"]:has([data-id="6025b00f"]:hover, [data-id="604323f9"]:hover, [data-id="1ceee729"]:hover, [data-id="672c2636"]:hover) [data-id="1dad1642"] { color: #252525; }

/* ---------- Portada: sin hueco antes del footer ---------- */
.page-front .site-footer { margin-top: 0; }

/* ---------- Portada: header transparente sobre el hero (diseño original) ---------- */
.page-front [data-id="bbe8b71"] { min-height: 100svh !important; }

/* Velo superior: legibilidad sobre cualquier foto; se desvanece cuando el header tiene fondo */
.page-front .site-header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 176px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(37, 37, 37, 0.44) 0%, rgba(37, 37, 37, 0.18) 46%, rgba(37, 37, 37, 0) 100%);
  transition: opacity 300ms var(--ml-ease);
}
.page-front .site-header.is-scrolled::before,
.page-front .site-header.is-menu-open::before,
.page-front .site-header.has-mega-open::before { opacity: 0; }

/* Estado transparente: nav e iconos en Marfil con sombra suave; el isotipo blanco ya lo gestiona base.css */
.page-front .site-header:not(.is-scrolled):not(.has-mega-open):not(.is-menu-open) :is(.primary-nav__link, .utility-nav :is(a, button), .nav-toggle) {
  color: #F8F6F2;
  filter: drop-shadow(0 1px 3px rgba(37, 37, 37, 0.38));
}
.page-front .site-header:not(.is-scrolled):not(.has-mega-open):not(.is-menu-open) :is(.primary-nav__link, .utility-nav :is(a, button)):hover { color: #DDD2C3; }
.page-front .site-header:not(.is-scrolled):not(.has-mega-open):not(.is-menu-open) .nav-toggle__bar { background: #F8F6F2; }
.page-front .site-header:not(.is-scrolled):not(.has-mega-open):not(.is-menu-open) .brand__iso--light { filter: drop-shadow(0 1px 6px rgba(37, 37, 37, 0.45)); }

/* Con el mega-menú o el menú móvil abierto sobre el hero, el header toma fondo Marfil (isotipo y texto oscuros) */
.page-front .site-header.has-mega-open,
.page-front .site-header.is-menu-open { background: #F8F6F2; box-shadow: 0 1px 0 rgba(37, 37, 37, 0.08); }

/* Móvil: sobre el hero el isotipo va en blanco (base.css lo fuerza oscuro en móvil) */
@media (max-width: 900px) {
  .page-front .site-header:not(.is-scrolled):not(.has-mega-open):not(.is-menu-open) .brand__iso--light { display: block !important; }
  .page-front .site-header:not(.is-scrolled):not(.has-mega-open):not(.is-menu-open) .brand__iso--dark { display: none !important; }
}

/* ---------- Opiniones: carrusel deslizable en móvil ----------
   Se usa !important porque los estilos locales de Elementor se cargan después y, con más
   especificidad, pisarían estas reglas. */
.ml-dots { display: none; }
@media (max-width: 767px) {
  [data-id="9beb12b"] {
    display: flex !important; flex-wrap: nowrap !important; gap: 16px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch;
    width: auto !important; max-width: none !important;
    margin-inline: -24px !important; padding-inline: 24px !important; scroll-padding-inline: 24px !important;
    scrollbar-width: none; overscroll-behavior-x: contain;
    grid-template-columns: none !important;
  }
  [data-id="9beb12b"]::-webkit-scrollbar { display: none; }
  [data-id="54ed15e8"], [data-id="2707f0e5"], [data-id="2b292443"] {
    flex: 0 0 84% !important; min-width: 0 !important; scroll-snap-align: start !important; box-sizing: border-box !important;
    padding: 24px !important; border: 1px solid #DDD2C3 !important; background: #F8F6F2 !important;
  }
  .ml-dots { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
  .ml-dots__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #B7B2AA; opacity: 0.6; cursor: pointer; transition: opacity 180ms var(--ml-ease), transform 180ms var(--ml-ease); }
  .ml-dots__dot.is-active { background: #7F8D82; opacity: 1; transform: scale(1.35); }
  .ml-dots__dot:focus-visible { outline: 2px solid #252525; outline-offset: 3px; }
}

/* ---------- Movimiento de la portada (lo activa home-motion.js; sin JS o con "reducir movimiento" todo queda visible) ---------- */
/* Imágenes que se revelan con una máscara que se abre; la foto interior se asienta con un leve zoom-out */
html.ml-motion [data-ml-rv] { transition: clip-path 1400ms var(--ml-ease); }
html.ml-motion [data-ml-rv="up"]    { clip-path: inset(100% 0 0 0); }
html.ml-motion [data-ml-rv="left"]  { clip-path: inset(0 100% 0 0); }
html.ml-motion [data-ml-rv="right"] { clip-path: inset(0 0 0 100%); }
html.ml-motion [data-ml-rv].ml-in   { clip-path: inset(0 0 0 0); }
html.ml-motion [data-ml-rv]:not(img) img { scale: 1.16; transition: scale 2000ms var(--ml-ease); }
html.ml-motion [data-ml-rv].ml-in:not(img) img { scale: 1; }

/* Etiquetas (eyebrows): el espaciado de letra se cierra al aparecer */
html.ml-motion .ml-eye { letter-spacing: 0.34em !important; transition: letter-spacing 1400ms var(--ml-ease); }
html.ml-motion .ml-eye.ml-in { letter-spacing: 0.15em !important; }

/* El hero se desplaza un poco más lento que la página (translate es independiente del zoom del carrusel) */
.ml-hero > img, .ml-hero > video { will-change: translate; }

/* Hero en móvil: la modelo está en el tercio derecho de la foto, se encuadra hacia allí */
@media (max-width: 767px) {
  [data-id="53f34e06"], [data-id="3d6b3aea"], [data-id="62074ae9"] { object-position: 80% 50% !important; }
}

/* Video del primer slide: mismo encuadre que las fotos (modelo hacia la derecha) */
.ml-hero > video.ml-hero__video { object-fit: cover; object-position: 70% 50%; }
@media (max-width: 767px) { .ml-hero > video.ml-hero__video { object-position: 78% 50% !important; } }

/* ---------- Testimonios: banda suave, tarjetas con estrellas y calificación destacada ---------- */
[data-id="707ed631"] { background-color: #F8F6F2 !important; }
/* Estrellas de cada tarjeta y cita en Cormorant */
[data-id="54ed15e8"]::before, [data-id="2707f0e5"]::before, [data-id="2b292443"]::before {
  content: "\2605\2605\2605\2605\2605"; display: block; position: static !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #7F8D82; font-size: 15px; letter-spacing: 5px; line-height: 1;
}
[data-id="b4c2b54"], [data-id="6874a703"], [data-id="15faf986"] {
  font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-weight: 400 !important;
  font-size: 24px !important; line-height: 1.32 !important; color: #252525 !important; margin: 0 !important;
}
[data-id="181d05b1"], [data-id="5cdef77f"], [data-id="51062a10"] {
  font: 500 12px/1 'Inter', sans-serif !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #7F8D82 !important;
}
/* Calificación */
[data-id="42902ae2"] { color: #7F8D82 !important; font-size: 18px !important; letter-spacing: 6px !important; margin: 0 !important; line-height: 1 !important; }
[data-id="4ba35a17"] { font-family: 'Cormorant Garamond', serif !important; font-weight: 400 !important; font-size: 72px !important; line-height: 0.95 !important; color: #252525 !important; margin: 6px 0 4px !important; }
[data-id="61052a8c"] { font: 400 13px/1.4 'Inter', sans-serif !important; color: #6b6760 !important; margin: 0 !important; }

@media (min-width: 768px) {
  [data-id="5c3ce133"] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: flex-end !important; gap: 32px !important; padding-bottom: 36px !important; margin-bottom: 44px !important; border-bottom: 1px solid #B7B2AA !important; }
  [data-id="2afcc469"] { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  [data-id="5c7451d"] { flex: 0 0 auto !important; width: auto !important; display: grid !important; gap: 2px !important; justify-items: end !important; text-align: right !important; padding: 0 !important; border: 0 !important; }
  [data-id="9beb12b"] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; align-items: stretch !important; }
  [data-id="54ed15e8"], [data-id="2707f0e5"], [data-id="2b292443"] { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 22px !important; padding: 36px 34px 30px !important; background: #F8F6F2 !important; border: 1px solid #DDD2C3 !important; border-top: 3px solid #7F8D82 !important; }
  [data-id="181d05b1"], [data-id="5cdef77f"], [data-id="51062a10"] { margin: auto 0 0 !important; padding-top: 18px !important; border-top: 1px solid #DDD2C3 !important; }
  [data-id="7c8ff481"] { margin-top: 32px !important; }
}
@media (max-width: 767px) {
  [data-id="54ed15e8"], [data-id="2707f0e5"], [data-id="2b292443"] { border-top: 3px solid #7F8D82 !important; }
  [data-id="b4c2b54"], [data-id="6874a703"], [data-id="15faf986"] { font-size: 21px !important; }
  [data-id="4ba35a17"] { font-size: 56px !important; }
}