:root{ --bg:#ffffff; --panel:#f7f7f9; --text:#1c1c1e; --muted:#6b7280; --line:#e5e7eb; -radius:20px; --accent:#e8a6c3; }
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{width:90%;maxwidth:1200px;margin:auto}

.header{
  position:fixed;
  top:0;left:0;
  width:100%;
  background:#ffffff;
  border-bottom:1px solid var(--line);
  z-index:1000;
}
.header__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
  gap:16px;
}
.brand{letter-spacing:.3em;font-weight:700;texttransform:uppercase}
.brand span{font-weight:300;color:var(--muted)}
.nav a{
  margin:0 18px;
  color:#1c1c1e;
  font-weight:500;
  font-size:0.95rem;
}
.nav a:hover{ color:var(--accent); }
main{padding-top:86px}

.hero{
  height:45vh;
  background:#ffffff url("../img/hero.jpg") center/contain no-repeat;
  border-bottom:1px solid var(--line);
}
.hero__overlay{ display:none; }
.hero__content{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  padding-left:160px; /* ≈ 2 tabs visuales */
  padding-bottom:32px;
}
.hero h1{margin:0 0 14px;font-size:clamp(2rem,4vw,3.2rem)}
.hero p{margin:0;color:var(--muted)}

.section{padding:70px 0}
.center{text-align:center}
.muted{color:var(--muted)}
.tiny{font-size:.9rem}

.novedades__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  alignitems:center;
}
.novedades__img{
  width:100%;
  border-radius:var(--radius);
  border:1px solid var(--line);
  display:block;
}

.filters{text-align:center;margin:26px 0 20px}
.filters button{
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  padding:10px 16px;
  margin:6px;
  borderradius:999px;
  cursor:pointer;
}
.filters button.active, .filters button:hover{
  border-color:var(--accent);
  color:var(-accent);
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px;
}
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(255,255,255,.03);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 60px rgba(0,0,0,.45)}
.card img{
  width:100%;
  display:block;
  aspect-ratio:4/5;
  object-fit:cover;
}
.card__body{ padding:12px 12px 14px; text-align:center; }
.pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  fontsize:.82rem;
  margin:6px 4px 0;
}
.footer{
  border-top:1px solid var(--line);
  padding:40px 0;
  text-align:center;
  color:var(-muted);
}

@media(max-width:820px){
  .novedades__inner{
    grid-template-columns:1fr;
    gap:18px;
  }
  /* Reels: 3 videos en la misma fila */
  .novedades__inner.reels{
    display:grid;
    grid-template-columns: repeat(1, 1fr);
    gap:15px;
  }
  .novedades__video{
    width: 100%;
    aspect-ratio: 9 / 16; /* Mantiene la proporción de video vertical tipo Reel/TikTok */
    height: auto; /* Elimina el alto fijo que causa la desproporción */
    object-fit: cover;
    border-radius: 14px;
    background: #000;
  }
  /* Texto de Novedades centrado y con respiración */
  .novedades__copy{
    max-width: 100%;
    padding: 0 15px;
  }
  .novedades__copy h2{
    font-size: 1.8rem;
    line-height: 1.2;
  }
  .novedades__copy p{ margin:0; }
}

.header-grid{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
}
.center-nav{ justify-self:center; }
.socials a{
  margin-left:14px;
  font-size:.9rem;
  color:var(--muted);
}
.socials a:hover{ color:var(--accent); }

.hero__content h1{
  font-weight:700;
  letter-spacing:.02em;
  opacity:0.9;
}
.hero__content p{ font-size:1.1rem; }

.section{ padding:70px 0; }

.brand{
  font-weight:700;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:#1c1c1e;
  font-size:1rem;
  text-decoration:none;
}
.hero__content h1{
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom:8px;
}
.hero__content p{
  font-size:0.95rem;
  color:var(--muted);
}
.novedades__inner{ grid-template-columns:1fr 1fr 1fr; }
.novedades__video{
  width:100%;
  border-radius:var(--radius);
  border:1px solid var(-line);
  object-fit:cover;
}

/* Ajuste específico para Novedades */
.section.novedades{
  padding-top:40px; /* antes heredaba 70px */
  padding-bottom:50px;
}
.novedades__copy p{ margin-bottom:10px; }

.header__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
}
/* Navegación izquierda */
.nav-left{ justify-self:start; }
/* Logo centrado */
.brand-center{
  justify-self:center;
  font-size:1.05rem;
  fontweight:700;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:#1c1c1e;
}
/* Spacer derecho (para balance visual) */
.header-spacer{ width:40px; }

.header__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
}
/* Navegación izquierda */
.nav-left{ justify-self:start; }
/* Logo centrado y protagonista */
.brand-center{
  justify-self:center;
  font-weight:700;
  letter-spacing:0.4em;
  text-transform:uppercase;
  font-size:1.25rem; /* MÁS GRANDE */
  color:#1c1c1e;
}
/* Redes sociales derecha */
.socials{ justify-self:end; }
.socials a{
  margin-left:14px;
  font-size:0.9rem;
  color:var(--muted);
}
.socials a:hover{ color:var(--accent); }
.socials{
  display:flex;
  align-items:center;
  gap:16px;
}
.socials a{
  color:#1c1c1e;
  display:flex;
  align-items:center;
}
.socials a:hover{ color:var(--accent); }

/* Hero copy discreto, abajo a la izquierda */
.hero__content{
  justify-content:flex-end;
  align-items:flex-start;
  text-align:left;
  padding-bottom:32px;
}
.hero__content h1{
  font-size:1.4rem;
  margin:0;
}
.hero__content p{
  display:none; /* quitamos subtítulo si no lo quieres */
}
.hero__content h1{
  font-weight:500; /* antes muy gruesa */
  letter-spacing:0.08em; /* más editorial */
  font-size:1.25rem; /* más sutil */
  text-transform:uppercase;/* look marca */
  color:#1c1c1e;
}

/* Imágenes del catálogo más naturales en móvil */
@media (max-width: 768px){
  .card img{
    aspect-ratio: auto;
    height: auto;
    object-fit: cover;
  }
}
@media (max-width: 768px){
  .novedades__copy{
    max-width:320px;
    margin:0 auto;
    text-align:center;
    padding:0 12px;
  }
  .novedades__copy h2{ margin-bottom:6px; }
  .novedades__copy p{ margin:0; }
}
@media (max-width: 768px){
  .nav a{ margin-right: 14px; padding: 6px 0; }
}
@media (max-width: 768px){
  .nav a{ font-size: 0.9rem; letter-spacing: 0.05em; }
}
@media (max-width: 768px){
  .hero__content{ padding-left: 48px; /* antes 48px */ }
}

/* Videos uniformes */
.novedades__video{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* En móvil */
@media (max-width: 768px){


  /* Oculta todos menos el primero */
  .novedades__video:nth-of-type(n+2){
    display: none;
  }

  .novedades__video{
    aspect-ratio: 1 / 1;
    width:100%;
    height:60vh; /* look reel */
    object-fit:cover;
    border-radius:12px
  }
}

/* MENÚ HEADER – MOBILE */
@media (max-width: 768px){
  .nav-left{
    display:flex;
    gap:16px; /* separación real entre botones */
  }
  .nav-left a{
    font-size:0.9rem;
    padding:6px 0;
    white-space:nowrap; /* evita que se rompan */
  }
}
@media (max-width: 768px){
  .hero__content{
    padding-left:20px;
    padding-right:20px;
  }
}

.view-toggle{
  display:none;
  justify-content:center;
  gap:12px;
  margin:14px 0 10px;
}
.view-toggle button{
  background:transparent;
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
}
.view-toggle button.active{
  border-color:#fff;
  color:#f
}
/* Solo móvil */
@media (max-width: 768px){
  .view-toggle{ display:flex; }
}
@media (max-width: 768px){
  .grid.list-view{ grid-template-columns:1fr; }
  .grid.list-view .card img{ aspect-ratio:3 / 4; }
}
@media (max-width: 820px){
  .view-toggle{ margin-top:8px; }
}

/* ======================= HEADER – SOLO MÓVIL ======================= */
@media (max-width: 820px){
  /* 1. Limpiamos por completo el encabezado superior */
  header, .header__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 10px !important;
    gap: 15px !important;
    box-sizing: border-box !important;
  }

  /* 2. Forzamos a la caja interna a estirarse y centrar sus elementos */
  .nav--left {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ajustamos el tamaño de los dos textos */
  .nav--left a, .nav--left span {
    font-size: 0.95rem !important;
    flex: 1 !important;
    text-align: center !important;
  }

  /* 3. Sacamos al Logo del flujo y lo clavamos en el centro absoluto con coordenadas */
  .brand {
    position: absolute !important;
    left: 50% !important;
    top: 15px !important;
    transform: translateX(-50%) !important;
    font-size: 1.25rem !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999 !important;
  }

  /* 4. Las redes sociales abajo en el centro */
  .socials {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 25px !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 5px !important;
  }
  .socials a, .socials img, .socials svg {
    width: 20px !important;
    height: 20px !important;
  }
}