/* Marea Slider - estilos */
.marea-slider-wrap{
  --ms-ink:#15130f;
  --ms-paper:#f6f2e9;
  --ms-paper-solid:#f8f5ee;
  --ms-accent:#c1462c;
  --ms-accent-2:#8a7350;
  --ms-line: rgba(21,19,15,.14);
  --ms-dim:#6b6357;
  --ms-serif:'Montserrat', sans-serif;
  --ms-sans:'Montserrat', sans-serif;
  --ms-cta-text: #ffffff;
  --ms-shade: .75; /* intensidad del oscurecido detrás del texto (0–1), se ajusta en Ajustes */
  --ms-ease: cubic-bezier(.22,1,.36,1);
  --ms-ease-soft: cubic-bezier(.16,.84,.44,1);
  /* ===== full-bleed: ignora el ancho/padding del contenedor del tema ===== */
  position:relative;
  left:50%;
  right:50%;
  width:var(--ms-vw, 100vw);
  max-width:var(--ms-vw, 100vw);
  margin-left:calc(var(--ms-vw, 100vw) / -2);
  margin-right:calc(var(--ms-vw, 100vw) / -2);
}
.marea-slider-wrap *{ margin:0; padding:0; box-sizing:border-box; }
.marea-slider-wrap{ font-family:var(--ms-sans); -webkit-font-smoothing:antialiased; }
.marea-slider-wrap a{ color:inherit; text-decoration:none; }
.marea-slider-wrap button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }
.marea-slider-wrap ::selection{ background:var(--ms-accent); color:var(--ms-paper); }

.ms-slider{ position:relative; width:100%; height:calc(100svh - var(--ms-header-h, 0px)); min-height:420px; overflow:hidden; background:var(--ms-ink);
  /* Arrastre: pan-y deja que el scroll vertical de la página siga funcionando pero entrega
     al slider los gestos horizontales (sin esto, el celular cancela el arrastre). */
  touch-action:pan-y; -webkit-user-select:none; user-select:none; cursor:grab; }
.ms-slider.is-dragging{ cursor:grabbing; }

/* ===== slides & media ===== */
.ms-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; z-index:1; }
.ms-slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; z-index:2; }
.ms-slide__media{ position:absolute; inset:0; overflow:hidden; background:var(--ms-ink); }
.ms-slide__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1); filter:saturate(1.04) contrast(1.02);
  -webkit-user-drag:none; user-drag:none;
  image-rendering:auto; backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
/* Imagen destacada para escritorio/tablet; imagen específica para móvil (si se cargó una) */
.ms-slide__media .ms-img-mobile{ display:none; }
@media (max-width:700px){
  .ms-slide__media .ms-img-desktop{ display:none; }
  .ms-slide__media .ms-img-mobile{ display:block; }
}
.ms-slide.is-active .ms-slide__media img{ animation:ms-kenburns 9.5s var(--ms-ease) forwards; }
@keyframes ms-kenburns{ from{ transform:scale(1);} to{ transform:scale(1.06);} }
/* Capa oscura ÚNICA y fija, por encima de los slides Y de las cortinas (z-index 16,
   debajo del texto y controles). Como nunca se apaga ni se reinicia al cambiar de slide,
   la imagen nueva llega ya oscurecida: sin el "pestañeo" de aparecer clara y oscurecerse
   después. Es igual para todos los slides, por eso puede ser una sola capa. */
.ms-scrim{
  position:absolute; inset:0; z-index:16; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,10,8,.42) 0%, rgba(12,10,8,0) 22%, rgba(12,10,8,0) 58%, rgba(12,10,8,.5) 100%),
    linear-gradient(90deg, rgba(12,10,8,.28) 0%, rgba(12,10,8,0) 30%, rgba(12,10,8,0) 72%, rgba(12,10,8,.25) 100%);
}
/* Oscurecido extra detrás del texto (izquierda y abajo): mejora la lectura sobre fotos
   claras. Su intensidad la controla --ms-shade (Ajustes → "Oscurecer la imagen…"). */
.ms-scrim::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:var(--ms-shade);
  background:
    linear-gradient(0deg, rgba(12,10,8,.55) 0%, rgba(12,10,8,.5) 28%, rgba(12,10,8,0) 68%),
    linear-gradient(90deg, rgba(12,10,8,.7) 0%, rgba(12,10,8,.3) 42%, rgba(12,10,8,0) 72%);
}

/* ===== curtains (shutter transition) ===== */
.ms-curtains{ position:absolute; inset:0; z-index:15; display:flex; pointer-events:none; }
.ms-curtain{ flex:1; background-color:var(--ms-ink); background-repeat:no-repeat; transform:scaleY(0); transform-origin:bottom; }
.ms-curtain + .ms-curtain{ border-left:1px solid rgba(246,242,233,.06); }

/* ===== decorative chrome ===== */
.ms-chrome{ position:absolute; inset:0; z-index:20; pointer-events:none; }
.ms-chrome > *{ pointer-events:auto; }

.ms-side-index{
  position:absolute; top:clamp(12px,1.8vw,22px); right:clamp(14px,2.6vw,30px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(246,242,233,.85);
}
.ms-side-index__num{ font-family:var(--ms-serif); font-size:13px; letter-spacing:.03em; }
.ms-side-index__num .now{ color:var(--ms-paper); font-weight:600; }
.ms-side-index__num .of{ color:rgba(246,242,233,.5); }
.ms-side-index__track{ width:1px; height:clamp(28px,5vh,64px); background:rgba(246,242,233,.25); position:relative; overflow:hidden; }
.ms-side-index__fill{ position:absolute; left:0; top:0; width:100%; height:0%; background:var(--ms-paper); }
.ms-side-index__label{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(246,242,233,.55);
}

.ms-auto-toggle{
  position:absolute; left:clamp(14px,2.6vw,26px); top:clamp(12px,1.8vw,22px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.ms-auto-toggle button{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:rgba(246,242,233,.72); transition:color .3s var(--ms-ease);
}
.ms-auto-toggle button:hover{ color:var(--ms-paper); }
.ms-auto-toggle__icon{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(246,242,233,.35); display:flex; align-items:center; justify-content:center; }
.ms-auto-toggle__icon svg{ width:10px; height:10px; }
.ms-auto-toggle__text{ writing-mode:vertical-rl; font-size:10px; letter-spacing:.2em; text-transform:uppercase; }

/* ===== main content ===== */
.ms-content-row{
  position:absolute; left:clamp(72px,9vw,116px); right:clamp(72px,9vw,116px);
  bottom:clamp(40px,7vh,64px); z-index:12;
  display:flex; align-items:flex-end; justify-content:space-between; gap:48px;
}

.ms-main-block{ max-width:640px; }
.ms-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  color:var(--ms-paper); margin-bottom:16px; overflow:hidden;
}
.ms-eyebrow span{ display:inline-block; }
/* Sombra fina en los textos claros. Se usa drop-shadow en el contenedor porque las líneas
   del título y el eyebrow tienen overflow:hidden (para la animación) y recortarían un text-shadow. */
.ms-eyebrow{ filter:drop-shadow(0 1px 6px rgba(12,10,8,.55)); }
.ms-eyebrow::before{ content:''; width:20px; height:1px; background:var(--ms-accent); display:inline-block; }

.ms-title{
  font-family:var(--ms-serif); font-weight:600; color:var(--ms-paper);
  font-size:clamp(32px,5.4vw,50px); line-height:1.03; letter-spacing:-.01em; margin-bottom:14px;
  filter:drop-shadow(0 2px 14px rgba(12,10,8,.45)) drop-shadow(0 1px 2px rgba(12,10,8,.3));
}
.ms-title .line{ overflow:hidden; display:block; }
.ms-title .line .w{ display:inline-block; will-change:transform; }

.ms-address{
  display:flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.05em; color:rgba(246,242,233,.94);
  text-shadow:0 1px 8px rgba(12,10,8,.6);
  margin-bottom:24px;
}
.ms-address::before{ content:''; width:16px; height:1px; background:var(--ms-accent); display:inline-block; flex:none; }

/* teléfono + correo (clicables), uno al lado del otro, debajo del título */
.ms-contact{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px;
  font-size:12px; letter-spacing:.05em; color:rgba(246,242,233,.94);
  text-shadow:0 1px 8px rgba(12,10,8,.6);
  margin-bottom:12px;
}
.ms-contact--last{ margin-bottom:24px; }
.ms-contact__link{
  display:inline-flex; align-items:center; gap:8px;
  color:inherit; transition:color .3s var(--ms-ease);
}
.ms-contact__link:hover, .ms-contact__link:focus-visible{ color:var(--ms-paper); }
.ms-contact__link:hover .ms-contact__text, .ms-contact__link:focus-visible .ms-contact__text{
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ms-accent);
}
.ms-contact__icon{ display:inline-flex; flex:none; color:var(--ms-accent); }
.ms-contact__icon svg{ width:14px; height:14px; }

.ms-row-actions{ display:flex; align-items:center; gap:14px; overflow:hidden; }
.ms-deco{
  width:48px; height:48px; border-radius:50%; flex:none;
  background:rgba(246,242,233,.12); border:1px solid rgba(246,242,233,.3);
  backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center;
  color:var(--ms-paper);
}
.ms-deco svg{ width:16px; height:16px; animation:ms-spin 20s linear infinite; }

.ms-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 12px 14px 22px; border-radius:999px;
  background:var(--ms-ink); color:var(--ms-cta-text);
  font-size:13.5px; font-weight:700; letter-spacing:.02em;
  transition:transform .4s var(--ms-ease), background .35s var(--ms-ease);
}
.ms-cta:hover{ transform:translateY(-2px); background:#231f18; }
.ms-cta--white-text{ color:#ffffff !important; }
.ms-cta__dot{ width:26px; height:26px; border-radius:50%; background:var(--ms-accent); display:flex; align-items:center; justify-content:center; }
.ms-cta__dot svg{ width:11px; height:11px; color:var(--ms-paper); }

/* right info card */
.ms-side-block{
  max-width:280px; padding:24px 26px;
  background:rgba(246,242,233,.86);
  border:1px solid rgba(255,255,255,.5);
  border-radius:20px;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  color:var(--ms-ink);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.35);
}
.ms-side-block__title{ font-family:var(--ms-serif); font-size:16.5px; font-weight:560; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.ms-side-block__title::before{ content:'—'; color:var(--ms-accent); }
.ms-side-block__desc{ font-size:12.8px; line-height:1.6; color:var(--ms-dim); margin-bottom:16px; }
.ms-plus-list{ display:flex; flex-direction:column; gap:10px; }
.ms-plus-item{ display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; }
.ms-plus-item__mark{
  width:18px; height:18px; border-radius:50%; border:1px solid var(--ms-line);
  display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--ms-accent); flex:none;
  transition:transform .3s var(--ms-ease), background .3s var(--ms-ease), color .3s var(--ms-ease);
}
.ms-plus-item:hover .ms-plus-item__mark{ background:var(--ms-ink); color:var(--ms-paper); transform:rotate(90deg); }

/* ===== rotating seal ===== */
.ms-seal{
  position:absolute; right:clamp(72px,9vw,116px); bottom:clamp(320px,44vh,410px);
  z-index:13; width:96px; height:96px;
}
.ms-seal svg{ width:100%; height:100%; animation:ms-spin 16s linear infinite; }
.ms-seal-arrow{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ms-seal-arrow svg{ width:16px; height:16px; animation:none; color:var(--ms-ink); }
.ms-seal-disc{
  position:absolute; inset:6px; border-radius:50%; background:var(--ms-paper);
  box-shadow:0 14px 40px -12px rgba(0,0,0,.5);
}
@keyframes ms-spin{ to{ transform:rotate(360deg); } }

/* ===== bottom progress edge ===== */
.ms-progress-edge{ position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ms-line); z-index:20; }
.ms-progress-edge__fill{ height:100%; width:0%; background:var(--ms-accent); }

/* ===== hover nav zones ===== */
.ms-nav-zone{ position:absolute; top:0; bottom:0; width:30%; z-index:18; display:flex; align-items:center; cursor:pointer; }
.ms-nav-zone--prev{ left:0; justify-content:flex-start; }
.ms-nav-zone--next{ right:0; justify-content:flex-end; }
.ms-nav-zone__icon{
  width:52px; height:52px; margin:0 18px; border-radius:50%;
  background: rgb(12 10 8 / 11%); border:1px solid rgba(246,242,233,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  opacity:1; transform:scale(1);
  box-shadow:0 6px 20px -8px rgba(0,0,0,.45);
  transition:background .35s var(--ms-ease), border-color .35s var(--ms-ease), transform .35s var(--ms-ease);
}
.ms-nav-zone:hover .ms-nav-zone__icon{ background:rgba(12,10,8,.55); border-color:rgba(246,242,233,.85); transform:scale(1.08); }
.ms-nav-zone__icon svg{ width:16px; height:16px; color:var(--ms-paper); }

/* ===== responsive ===== */
@media (max-width: 860px){
  .ms-side-block{ display:none; }
  .ms-seal{ display:none; }
}
@media (max-width: 700px){
  .ms-auto-toggle{ display:none; }
  .ms-side-index{ top:16px; right:16px; }
  .ms-side-index__label{ display:none; }

  /* El bloque de texto se ancla abajo, pero deja libre una franja inferior para las
     flechas. La franja se adapta al alto de la pantalla (mínimo 108px, máximo 200px)
     para que en celulares bajos el texto no suba hasta chocar con el número "01 / 04". */
  .ms-content-row{ bottom:200px; bottom:clamp(108px,30%,200px); left:20px; right:20px; }
  .ms-main-block{ max-width:100%; min-width:0; }
  .ms-eyebrow{ max-width:100%; }
  .ms-title{ font-size:clamp(28px,9vw,40px); margin-bottom:12px; overflow-wrap:break-word; }
  .ms-scrim::after{
    background:linear-gradient(0deg, rgba(12,10,8,.68) 0%, rgba(12,10,8,.55) 42%, rgba(12,10,8,0) 80%);
  }
  .ms-address{ font-size:11px; margin-bottom:18px; }
  .ms-contact{ font-size:11px; gap:6px 18px; margin-bottom:10px; }
  .ms-contact--last{ margin-bottom:18px; }
  .ms-contact__link{ min-width:0; max-width:100%; }
  .ms-contact__text{ min-width:0; overflow-wrap:anywhere; }

  /* Flechas: van juntas y centradas en horizontal, debajo del bloque de texto.
     Así los costados quedan libres (p. ej. para botones flotantes de WhatsApp).
     En móvil cada zona es solo el botón (ya no ocupa el 30% del ancho); el
     deslizamiento con el dedo sigue funcionando en todo el slider. */
  .ms-nav-zone{
    top:auto; bottom:42px; width:40px; height:40px; padding:0;
    align-items:center; justify-content:center;
  }
  .ms-nav-zone--prev{ left:calc(50% - 46px); right:auto; }
  .ms-nav-zone--next{ left:calc(50% + 6px); right:auto; }
  .ms-nav-zone__icon{ width:40px; height:40px; margin:0; }
}

/* Celulares de poca altura (o en horizontal): texto un poco más compacto */
@media (max-width: 700px) and (max-height: 620px){
  .ms-content-row{ bottom:92px; }
  .ms-title{ font-size:clamp(24px,7.5vw,32px); margin-bottom:8px; }
  .ms-eyebrow{ margin-bottom:10px; }
  .ms-address, .ms-contact--last{ margin-bottom:12px; }
  .ms-nav-zone{ bottom:28px; width:36px; height:36px; }
  .ms-nav-zone--prev{ left:calc(50% - 42px); }
  .ms-nav-zone--next{ left:calc(50% + 6px); }
  .ms-nav-zone__icon{ width:36px; height:36px; }
}
@media (max-width: 460px){
  .ms-deco{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .ms-slide.is-active .ms-slide__media img{ animation:none; transform:scale(1.02); }
  .ms-seal svg{ animation:none; }
}