/* ═══════════ HOME ═══════════ */

/* botón compartido del home: sólido y con línea, mismo lenguaje que la ficha */
.mp-home__boton{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.6rem; background:var(--mp-tinta); color:var(--mp-papel);
  font-size:.8125rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; transition:background-color var(--mp-rapido) var(--mp-easing);
}
.mp-home__boton:hover{ background:var(--mp-vino); color:var(--mp-papel) }
.mp-home__boton--linea{
  background:transparent; color:var(--mp-tinta); border:1px solid var(--mp-tinta);
}
.mp-home__boton--linea:hover{ background:var(--mp-tinta); color:var(--mp-papel) }

.mp-home__eti{ color:var(--mp-vino); display:block; margin-bottom:.9rem }
.mp-home__link{ color:var(--mp-vino); text-decoration:underline; text-underline-offset:3px; font-size:.875rem }

/* ── hero a sangre (referencia Raindoor) ── */
.mp-hero{
  position:relative; isolation:isolate;
  min-height:clamp(520px, 88vh, 940px);
  display:grid; align-items:center;
  background:var(--mp-tinta);
}
.mp-hero__foto{ position:absolute; inset:0; z-index:-2; display:block }
.mp-hero__foto img{ width:100%; height:100%; object-fit:cover; object-position:center }
/* la foto es clara (cielo blanco): sin este velo el titular blanco no se lee */
.mp-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,18,17,.52) 0%, rgba(20,18,17,.34) 45%, rgba(20,18,17,.58) 100%);
}

.mp-hero__texto{
  position:relative;
  padding-top:var(--mp-cab-alto);
  padding-bottom:var(--mp-e5);
  text-align:center; color:var(--mp-papel);
  display:flex; flex-direction:column; align-items:center;
}
.mp-hero__tit{
  font-size:clamp(2.1rem, 7.5vw, 5.25rem);
  font-weight:500; line-height:1.02;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--mp-papel);
  text-wrap:balance;
}
.mp-hero__bajada{
  margin-top:1.1rem; max-width:46ch;
  font-size:clamp(.9375rem, 1.6vw, 1.0625rem); line-height:1.6;
  color:rgba(251,250,247,.88);
}
.mp-hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:2rem }
.mp-hero__boton{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.9rem;
  background:var(--mp-papel); color:var(--mp-tinta);
  font-size:.8125rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  transition:background-color var(--mp-rapido) var(--mp-easing), color var(--mp-rapido) var(--mp-easing);
}
.mp-hero__boton:hover{ background:var(--mp-vino); color:var(--mp-papel) }
.mp-hero__boton--linea{ background:transparent; color:var(--mp-papel); border:1px solid rgba(251,250,247,.75) }
.mp-hero__boton--linea:hover{ background:var(--mp-papel); color:var(--mp-tinta); border-color:var(--mp-papel) }

/* ── categorías ── */
.mp-home__categorias{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--mp-e3) var(--mp-e2);
}
@media (min-width:640px){ .mp-home__categorias{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--mp-e3) } }

/*
 * El nombre va DENTRO de la foto, no debajo.
 * Con el rótulo afuera, cuatro fotos de distinto origen se leían como una carpeta de
 * archivos; con el nombre encima y todas al mismo 2:3 —el formato que entregan las
 * fotos de categoría que producimos— la fila se lee como una vitrina.
 */
.mp-home__cat{ position:relative; display:block; overflow:hidden; background:var(--mp-lino) }
.mp-home__cat-foto{ display:block; aspect-ratio:2/3; overflow:hidden }
.mp-home__cat-foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--mp-easing);
}
.mp-home__cat:hover .mp-home__cat-foto img{ transform:scale(1.045) }

/* velo sólo en el tercio inferior: el nombre tiene que leerse sobre un vestido claro
   o sobre uno negro sin oscurecer la foto entera */
.mp-home__cat::after{
  content:""; position:absolute; inset:auto 0 0 0; height:42%;
  background:linear-gradient(to top, rgba(30,27,25,.62), rgba(30,27,25,.18) 48%, transparent);
  pointer-events:none;
}
.mp-home__cat-nom{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1rem .9rem;
  color:var(--mp-papel);
  font-size:.75rem; letter-spacing:.18em;
}
@media (min-width:640px){
  .mp-home__cat-nom{ padding:1.25rem 1.15rem; font-size:.8125rem }
}

/* ── selección: encabezado con link a la derecha ── */
.mp-seccion__cab .mp-home__ver-todo{
  font-size:.8125rem; letter-spacing:.04em; color:var(--mp-vino);
  text-decoration:underline; text-underline-offset:3px; white-space:nowrap;
}

/* ── marca ── */
.mp-home__marca{ background:var(--mp-lino) }
.mp-home__marca-int{ display:flex; justify-content:center }
.mp-home__marca-texto{ max-width:var(--mp-ancho-tx); text-align:center }
.mp-home__marca-texto p{ margin-top:1.1rem; color:var(--mp-tinta-2); line-height:1.75 }
.mp-home__marca-texto .mp-home__link{ display:inline-block; margin-top:1.3rem }
.mp-home__marca-texto .mp-home__eti{ text-align:center }

/* ── visita / whatsapp ── */
.mp-home__visita{ border-top:1px solid var(--mp-hilo) }
.mp-home__visita-int{
  display:flex; flex-direction:column; gap:1.5rem;
  justify-content:space-between; align-items:flex-start;
}
@media (min-width:640px){
  .mp-home__visita-int{ flex-direction:row; align-items:center }
}
.mp-home__visita-int h2{ margin-top:.3rem }
.mp-home__visita-int p{ margin-top:.4rem }
.mp-home__visita-cta{ display:flex; flex-wrap:wrap; gap:.75rem; flex-shrink:0 }

/* ── Instagram ──
   Una fila corrida de publicaciones cuadradas. En pantallas anchas caben las
   ocho de un viaje; más abajo se van apilando, y en el teléfono se vuelve un
   carrusel que se arrastra con el dedo. */
.mp-ig__rejilla{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--mp-e2);
}
@media (min-width:700px){ .mp-ig__rejilla{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
@media (min-width:1000px){ .mp-ig__rejilla{ grid-template-columns:repeat(5, minmax(0,1fr)) } }

.mp-ig__item{ margin:0 }

/* 4:5 y no 1:1. Seis de cada ocho publicaciones son reels verticales 9:16: el cuadrado
   les cortaba la cabeza y los pies. El 4:5 es el recorte que menos daño les hace y de
   paso da una franja editorial en vez de una fila de miniaturas. */
.mp-ig__enlace{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/5; background:var(--mp-lino);
}
.mp-ig__enlace img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--mp-easing);
}
.mp-ig__enlace:hover img,
.mp-ig__enlace:focus-visible img{ transform:scale(1.05) }

/* el pie se asoma desde abajo al pasar el cursor, sobre un degradado que lo hace
   legible en cualquier foto sin oscurecer la imagen entera */
/*
 * El pie se corta por ALTO exacto y la última línea se desvanece.
 *
 * Acá había un `-webkit-line-clamp`, pero este navegador se come el `display:-webkit-box`
 * —lo computa `flow-root`— y el recorte nunca se aplicaba: quedaba una cuarta línea
 * partida a media letra. Es el mismo problema ya documentado en los títulos de producto
 * (tienda.css) y se resuelve igual: alto fijo en múltiplos exactos de línea, para que el
 * corte caiga siempre entre renglones, y una máscara que apaga la última línea para que
 * se entienda que el texto sigue.
 *
 * El degradado oscuro vive en el contenedor y el texto en `.mp-ig__pie-txt`: así se
 * desvanece la letra y no el fondo, que es lo que la hace legible sobre la foto.
 */
.mp-ig__pie{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:2.5rem .8rem .75rem;
  color:var(--mp-papel); font-size:.75rem; line-height:1.4;
  background:linear-gradient(to top, rgba(20,18,17,.82), rgba(20,18,17,.55) 55%, rgba(20,18,17,0));
  opacity:0; transform:translateY(6px);
  transition:opacity var(--mp-medio) var(--mp-easing), transform var(--mp-medio) var(--mp-easing);
}
.mp-ig__pie-txt{
  display:block; overflow:hidden;
  max-height:calc(3 * 1.4em);
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(3 * 1.4em - 1.1em), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(3 * 1.4em - 1.1em), transparent);
}
.mp-ig__enlace:hover .mp-ig__pie,
.mp-ig__enlace:focus-visible .mp-ig__pie{ opacity:1; transform:none }

/* el triángulo de los reels, sobre un velo para que se lea en cualquier foto */
.mp-ig__reel{
  position:absolute; top:.5rem; right:.5rem; z-index:3;
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; color:var(--mp-papel);
  filter:drop-shadow(0 1px 3px rgba(20,18,17,.55));
  pointer-events:none;
}

/* teléfono: carrusel. `scroll-padding-inline` NO es opcional: `scroll-snap-align:start`
   alinea contra el borde del scrollport e ignora el padding, así que sin esto la
   primera foto queda pegada al canto de la pantalla. */
@media (max-width:639px){
  .mp-ig__rejilla{
    display:flex; gap:.6rem; position:relative;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-inline:var(--mp-gutter);
    scroll-padding-inline:var(--mp-gutter);
    margin-inline:calc(-1 * var(--mp-gutter));
    scrollbar-width:none;
  }
  .mp-ig__rejilla::-webkit-scrollbar{ display:none }
  .mp-ig__item{ flex:0 0 58vw; scroll-snap-align:start }
  /* en el teléfono no hay cursor: el pie va siempre visible o no se ve nunca.
     Dos líneas y no tres: siempre visible, tres tapan demasiada foto. */
  .mp-ig__pie{ opacity:1; transform:none; padding-top:1.8rem }
  .mp-ig__pie-txt{
    max-height:calc(2 * 1.4em);
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(2 * 1.4em - 1.1em), transparent);
            mask-image:linear-gradient(to bottom, #000 calc(2 * 1.4em - 1.1em), transparent);
  }
}

@media (prefers-reduced-motion:reduce){
  .mp-ig__enlace img, .mp-ig__pie{ transition:none }
  .mp-ig__enlace:hover img{ transform:none }
}

/* el encabezado de esta sección lleva etiqueta + título a la izquierda */
.mp-ig .mp-seccion__cab .mp-home__eti{ margin-bottom:.35rem }