@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

@charset "UTF-8";
/* CSS Document */

:root {
  scroll-behavior: auto;
  --negro: #333333;
  --blanco: #ffffff;
  --grisc: #f2f2f2;
  --verde: #84764D;
  --verdeo: #2C5234;
  --verde-op: rgba(132, 118, 77, 0.3);
}  

.negro { color: var(--negro); }
.blanco { color: var(--blanco); }
.grisc { color: var(--grisc); }
.verde { color: var(--verde); }
.verdeo { color: var(--verdeo); }
.verde-op { color: var(--verde-op); }
.bg-negro { background-color: var(--negro); }
.bg-blanco { background-color: var(--blanco); }
.bg-grisc { background-color: var(--grisc); }
.bg-verde { background-color: var(--verde); }
.bg-verdeo { background-color: var(--verdeo); }
 
.fs-xs{ font-size: clamp(0.75rem, 1vw, 0.875rem); }
.fs-sm{ font-size: clamp(0.875rem, 1.2vw, 1rem); }
.fs-md{ font-size: clamp(1.125rem, 2vw, 1.5rem); }
.fs-lg{ font-size: clamp(1.5rem, 3vw, 2rem); }
.fs-xl{ font-size: clamp(2rem, 5vw, 3rem); }
.fs-40{ font-size: clamp(1.75rem, 3vw, 2rem); }
.fs-20{ font-size: clamp(1rem, 1.5vw, 1.125rem); }

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #121212;
	line-height: 150%;
    background-color: #F3F1ED;
}

p { line-height: 150%; }

h1 { font-family: "Libre Caslon Text", serif; line-height: 120%; }
h2, h3, h4 { font-family: "Libre Caslon Text", serif; line-height: 140%; }
h1 { font-size: clamp(48px, 5vw, 60px); }
h2 { font-size: clamp(32px, 4vw, 48px); }
h3 { font-size: clamp(24px, 3vw, 40px); }
h4 { font-size: 32px; }

img { max-width: 100%; height: auto; }

.libre-caslon { font-family: "Libre Caslon Text", serif; }

html,
body {
    overflow-x: hidden;
}

main {
    /* Importante: NO poner overflow:hidden aquí. Cualquier valor de
       overflow distinto de "visible" en un ancestro rompe
       position:sticky en sus descendientes, confinándolo en vez
       de pegarlo a la ventana real. */
}

.container { max-width: 1200px; }
.container-small { max-width: 795px; margin: auto; }

.btn-primary {
    position: relative;
    padding: 12px 32px;
    line-height: 150%;
    letter-spacing: 0.8px;
    border-radius: 999px;
    border: 0;
    background-color: #2C5234;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
}

.btn-primary.arrow {
    display: inline-flex;
    align-items: center;
    padding: 12px 56px 12px 32px;
}

.btn-primary.arrow::after {
    content: '';
    width: 18px;
    height: 14px;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'%3E%3Cg clip-path='url(%23clip0_2313_3)'%3E%3Cpath d='M1 7H17M11 13L17 7L11 1' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2313_3'%3E%3Crect width='18' height='14' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.btn-primary:hover,
.btn-primary:focus-visible { background-color: #84764D; }

header {
    position: sticky;
    top: 0;
    z-index: 10;
    transition: all .3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

header.header-small { padding-top: .25rem !important; padding-bottom: .25rem !important; }

header a {
    color: #2C5234;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
}

#mainHeader img { height: 74px; transition: all .3s ease; }
#mainHeader.py-2 img { height: 54px; }

.banner { position: relative; }
.banner img, .banner-int img { width: 100%; display: block; }
.banner .container-b { position: absolute; inset: 0; overflow: hidden; }

.banner-c {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.banner-c div { max-width: 280px; margin: auto; }

.slider-stores .slick-track { display: flex; align-items: center; }
.slider-stores .slick-slide { margin: 0 -12px; transition: all .3s ease; }
.slider-stores .slick-slide img { width: 100%; transform: scale(.8); transition: transform .3s ease; }
.slider-stores .slick-center img { transform: scale(1); position: relative; z-index: 2; }

.newsletter-box { background: #fff; backdrop-filter: blur(6px); padding: 40px 50px; }
.newsletter h2{ font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.newsletter p{ color: #5B5B5B; }

.form-group input{
    width: 100%;
    border: 0;
    border-bottom: 1px solid #B8AE97;
    background: transparent;
    padding: 12px 15px;
    font-size: 14px;
    color: #84764D;
    box-sizing: border-box;
}

.form-group input::placeholder{ color: #84764D; }
.form-group input:focus{ outline: none; box-shadow: none; }

.form-group select{
    width: 100%;
    border: 0;
    border-bottom: 1px solid #B8AE97;
    background-color: transparent;
    border-radius: 0;
    padding: 12px 30px 12px 15px;
    font-size: 14px;
    color: #84764D;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2384764D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.form-group select:focus{ outline: none; box-shadow: none; }
.form-group select:disabled{ color: #B8AE97; cursor: not-allowed; }
.form-group select option{ color: #121212; }

footer { position: relative; background-color: #2C5234; }

footer::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 12px;
    background: linear-gradient(
        90deg,
        #AD985F 0%,
        #A28D5B 43.27%,
        #C6B571 64.9%,
        #A5905B 87.5%
    );
}

@media (min-width: 768px) { 
    .img-form img { width: 125%; max-width: 125%; margin-bottom: -6rem; }
    .slider-stores .slick-slide { margin: 0 -15px; }
    .slider-stores .slick-slide img { width: 100%; transform: scale(.8); }
    .slider-stores .center-slide img { transform: scale(1); position: relative; z-index: 2; }
}

@media (max-width: 767px) {
    .banner-c a { border-radius: 0; width: 100%; justify-content: center; }
    .newsletter-box { padding: 40px; }
}

/* =========================================================
   NUESTRAS TIENDAS - stack de 3 fotos con rotación de roles
   ========================================================= */

html.tiendas-scroll-locked,
body.tiendas-scroll-locked {
    overflow: hidden !important;
    touch-action: none;
}

.stack-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 335 / 453;
}

.stack-photo-item {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    aspect-ratio: 335 / 453;
    object-fit: cover;
    border-radius: 4px;
    transition: width .6s cubic-bezier(.65, 0, .35, 1),
                bottom .6s cubic-bezier(.65, 0, .35, 1),
                box-shadow .6s ease;
}

.stack-photo-item.stack-role-0 {
    bottom: 0;
    width: 100%;
    z-index: 3;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.stack-photo-item.stack-role-1 {
    bottom: -50px;
    width: 70%;
    z-index: 2;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.stack-photo-item.stack-role-2 {
    bottom: -100px;
    width: 50%;
    z-index: 1;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.tiendas-slider-dots {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 4;
}

.tiendas-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: background-color .3s ease, transform .3s ease;
}

.tiendas-dot.is-active {
    background: var(--blanco);
    transform: scale(1.25);
}

/* ===== APERTURAS ===== */
.aperturas-box { overflow: hidden; }
.aperturas-txt { flex: 0 0 320px; max-width: 320px; }
.aperturas-img { flex: 1; }
.aperturas-img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 767px) {
    .aperturas-txt { max-width: 100%; }
}

/* =========================================================================
   GALERÍA — marco fijo con raíles laterales (SCROLL CONGELADO + tema claro)
   ---------------------------------------------------------------------
   Mecánica (raíles, rotación/escala de fotos, animación suave con damping,
   congelamiento de scroll) idéntica a la versión anterior — ver main.js,
   no cambió nada ahí. Lo único que cambia acá es el TEMA VISUAL: en vez
   del fondo oscuro del prototipo original, usa los mismos colores/fuente
   que el resto del sitio (fondo crema, borde verde, Helvetica/Libre
   Caslon), para que se vea como el diseño anterior del "cuadro fijo".

   Por eso .galeria-inner ya NO es position:fixed (no hace falta pin: la
   sección tiene una altura fija normal, como cualquier otro módulo del
   sitio) y .galeria ya NO necesita --travel ni visibility:hidden.

   Toda la geometría interna (marco, raíles, miniaturas) sigue saliendo de
   --frame-h y del aspect ratio, sin tocar.
   ========================================================================= */
.galeria {

  /* Tema CLARO — mismos colores que el resto del sitio (ver :root arriba) */
  --bg: #F3F1ED;
  --fg: #121212;
  --fg-dim: rgba(18, 18, 18, 0.55);
  --accent: var(--verdeo);
  --line: var(--verde);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pad-x: 3.125vw;

  /* Aspect ratio del marco. Tus medidas: 482 x 495. */
  --frame-ar-w: 482;
  --frame-ar-h: 495;

  /* Tamaño real de la foto: 482 x 495px, fijo (no un cálculo de
     viewport). En mobile se limita por ancho de pantalla — ver
     el @media más abajo — para que no desborde en celulares. */
  --frame-h: 495px;
  --frame-w: calc(var(--frame-h) * var(--frame-ar-w) / var(--frame-ar-h));

  /* Miniaturas: 175 / 482 = 0.363 */
  --thumb-scale: 0.363;
  --thumb-w: calc(var(--thumb-scale) * var(--frame-w));
  --thumb-h: calc(var(--thumb-scale) * var(--frame-h));
  --thumb-gap: calc(var(--thumb-w) * 0.08);

  position: relative;
  width: 100%;
  /* El alto de toda la sección sale del alto real del marco (la
     foto), no de un porcentaje inventado de la pantalla. Se le
     suman 14px (7px arriba + 7px abajo) porque el borde decorativo
     del marco (.galeria-frame::after, inset:-7px) se extiende esos
     7px hacia afuera en cada lado — sin este margen, el
     overflow:hidden de aquí abajo se lo corta. */
  height: calc(var(--frame-h) + 14px);

  background: var(--bg);
  color: var(--fg);
  /* Tipografía del sitio, no la del prototipo original */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.galeria-inner {
  /* Ya NO position:fixed: al congelar el scroll en vez de hacer
     pin-scrub continuo, esta sección puede vivir en flujo normal,
     como cualquier otra del sitio. */
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.galeria .eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* =========================================================================
   2. El marco
   ========================================================================= */
.galeria-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--frame-w);
  height: var(--frame-h);
  transform: translate(-50%, -50%);
  cursor: pointer; /* clic = avanzar a la siguiente foto (ver main.js) */
}

.galeria-frame::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  pointer-events: none;
}

.galeria-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* El ancho lo pone el JS: 100% x número de fotos.
   Sin gap entre items: el paso del carril ES el ancho del marco. */
.galeria-track {
  position: absolute;
  display: flex;
  flex-direction: row;
  height: 100%;
  will-change: transform;
}

.galeria-item {
  position: relative;
  width: var(--frame-w);
  height: 100%;
  flex: none;
  overflow: hidden;
  border-radius: 4px;
}

/* El rotate + scale vive aquí, nunca en .galeria-item:
   el padre recorta, el hijo se mueve. */
.galeria-item-inner {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.galeria-item-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* así da igual la proporción real de cada foto */
}

/* =========================================================================
   3. Los raíles
   Son la misma lista a escala 0.363, desfasada una posición: el izquierdo
   oculta la última foto y el derecho la primera. Por eso los dos comparten
   exactamente el mismo translate y aun así uno enseña lo que ya pasó y el
   otro lo que viene.
   ========================================================================= */
.galeria-rail {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  pointer-events: none; /* el raíl en sí no recibe clics — cada .galeria-thumb sí (ver abajo) */
  width: calc((100vw - var(--frame-w)) / 2 - var(--thumb-gap) - 7px);
}

.galeria-rail.is-left {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%);
}

.galeria-rail.is-right {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 42%);
  mask-image: linear-gradient(to left, transparent 0%, #000 42%);
}

/* El ancho lo pone el JS: (n - 1) pasos, porque siempre hay una miniatura
   oculta en cada raíl. */
.galeria-rail-track {
  position: absolute;
  display: flex;
  flex-direction: row;
  height: var(--thumb-h);
  top: 50%;
  will-change: transform;
}

/* El raíl izquierdo se ancla al borde derecho de su contenedor y crece hacia
   la izquierda con translate negativo. */
.is-left .galeria-rail-track {
  left: 100%;
}
.is-left .galeria-thumb {
  margin-left: var(--thumb-gap);
}
.is-left .galeria-thumb:last-child {
  display: none;
}

.is-right .galeria-thumb {
  margin-right: var(--thumb-gap);
}
.is-right .galeria-thumb:first-child {
  display: none;
}

.galeria-thumb {
  position: relative;
  width: var(--thumb-w);
  height: var(--thumb-h);
  flex: none;
  opacity: 0.65;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;      /* clic = saltar a esa foto (ver main.js) */
  pointer-events: auto; /* habilita el clic pese a que .galeria-rail lo tiene en none */
}

.galeria-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   4. Copy y progreso
   ========================================================================= */
.galeria-copy {
  position: absolute;
  left: var(--pad-x);
  top: 50%;
  transform: translateY(-50%);
  max-width: 11ch;
  z-index: 3;
}

.galeria-copy h2 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.galeria-copy .kicker {
  display: block;
  color: var(--fg-dim);
  font-size: 0.68em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4em;
}

.galeria-progress {
  position: relative;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  margin-top: 20px;
  gap: 6px;
  z-index: 2;
  justify-content: center;
}

.galeria-progress-dot {
  width: 22px;
  height: 2px;
  background: var(--verde-op);
  transition: background-color 0.3s;
  cursor: pointer; /* clic = saltar a esa foto (ver main.js) */
}

.galeria-progress-dot.is-active {
  background: #2C5234;
}

/* =========================================================================
   5. Debug (Alt + D)
   ========================================================================= */
.galeria-debug {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 50;
  display: none;
  padding: 0.75em 1em;
  background: rgba(13, 11, 10, 0.94);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  white-space: pre;
  pointer-events: none;
}

html.galeria-debug-on .galeria-debug {
  display: block;
}
html.galeria-debug-on .galeria-frame::after {
  border-color: var(--accent);
}
html.galeria-debug-on .galeria-thumb {
  outline: 1px solid rgba(220, 80, 0, 0.6);
  outline-offset: -1px;
}

/* =========================================================================
   6. Móvil: sin raíles
   ========================================================================= */
@media (max-width: 767.98px) {
  .galeria {
    --frame-h: min(495px, 90vw);
  }
  .galeria-rail {
    display: none;
  }
  .galeria-copy {
    top: 12dvh;
    transform: none;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galeria-track,
  .galeria-rail-track,
  .galeria-item-inner {
    will-change: auto;
  }
}

/* ===== NEWSLETTER - sidebar card ===== */
.sidebar-card {
    position: relative;
    overflow: hidden;
    color: inherit;
    aspect-ratio: 4 / 5;
    display: block;
}

.sidebar-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.sidebar-card-txt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 28px 28px 0;
    z-index: 2;
}

.sidebar-card-ig-btn {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 40px);
    background: var(--blanco);
    color: var(--verdeo);
    border-radius: 999px;
    padding: 16px 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transition: background-color .3s ease;
}

.sidebar-card-ig-btn:hover { background: var(--grisc); color: var(--verdeo); }

/* =========================================================
   RESPONSIVO MOBILE (no afecta estilos de escritorio ≥768px)
   ========================================================= */
@media (max-width: 767px) {

    .ps-mobile { padding-left: 32px; }

    .stack-photo { margin-left: auto; margin-right: auto; }
    .stack-photo-item.stack-role-1 { bottom: -25px; }
    .stack-photo-item.stack-role-2 { bottom: -50px; }

    .tiendas-slider-dots {
        position: absolute;
        left: 0;
        right: 0;
        top: auto;
        bottom: -85px; /* debajo de la foto trasera (stack-role-2, bottom: -50px) */
        transform: none;
        flex-direction: row;
        justify-content: center;
    }

    .aperturas-container { padding-left: 20px !important; padding-right: 20px !important; }

    .aperturas-overlay {
        align-items: flex-start !important;
        padding-top: 32px;
        z-index: 2;
    }

}