html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:"Helvetica Neue", Arial, sans-serif;
  background:#f8f7f5;
  color:#1f1f1f;
  font-size:18px;
  line-height:1.5;
  overflow-x:hidden;
}

/* OCULTAR */

.oculto{
  display:none !important;
}
/* TOPBAR */

.topbar{
  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:999;

  display:flex;
  justify-content:center;
  align-items:center;

  padding-top:22px;

  pointer-events:none;
}

.top-logo{
  width:210px;
  display:block;

  filter:drop-shadow(
    0 2px 10px rgba(0,0,0,.18)
  );
}
/* HERO */



.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:black;
}

/* HERO IMAGE */

.hero-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* OVERLAY */

.hero-overlay{
  position:absolute;
  inset:0;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;

  padding:20px;

  background:rgba(0,0,0,.25);
}

.hero-overlay h1{
  margin:0;

  color:white;

  font-family:Georgia, serif;
  font-size:74px;
  font-weight:400;
}

.hero-overlay p{
  margin-top:14px;

  max-width:520px;

  color:white;

  font-size:22px;
  line-height:1.4;
}

.hero-btn{
  margin-top:40px;

  color:white;
  text-decoration:none;

  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;

  border-bottom:1px solid white;

  padding-bottom:6px;

  transition:.25s ease;
}

.hero-btn:hover{
  opacity:.7;
}

/* PANTALLAS */

.pantalla{
  max-width:1400px;
  margin:auto;
  padding:30px 40px;

  animation:fade .5s cubic-bezier(.22,.61,.36,1);
}

/* ANIMACION */

@keyframes fade{

  from{
    opacity:0;
    transform:translateY(14px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

/* HEADER */

.header{
  text-align:center;
  padding:20px 0 10px;
}

.header h2{
  margin:0;

  font-family:Georgia, serif;
  font-size:48px;
  font-weight:400;
}

.header p{
  margin-top:16px;

  color:#777;

  font-size:18px;
  line-height:1.6;
}

/* GRID COLECCIONES */

.colecciones-grid{
  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:12px;

  margin-top:40px;
}

.coleccion-card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
}

.coleccion-card img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;

  transition:transform 1s ease;
}

.coleccion-card:hover img{
  transform:scale(1.04);
}

.coleccion-card span{
  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%, -50%);

  color:white;

  font-family:Georgia, serif;
  font-size:34px;
  font-weight:400;

  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
/* FILA INFERIOR */

.coleccion-card:nth-child(4){
  grid-column:1 / 2;
}

.coleccion-card:nth-child(5){
  grid-column:2 / 4;
}

/* EDITORIAL */

.editorial{
  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:0;

  margin-top:80px;
}

.editorial-full{
  width:100vw;

  margin-left:calc(50% - 50vw);

  margin-top:80px;
}

.editorial-card{
  position:relative;

  overflow:hidden;

  height:420px;

  cursor:pointer;

  line-height:0;
}

.editorial-card img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:transform 1.2s ease;
}

.editorial-card:hover img{
  transform:scale(1.05);
}

.editorial-overlay{
  position:absolute;
  inset:0;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;

  background:rgba(0,0,0,.18);
}

.editorial-overlay h3{
  margin:0;

  color:white;

  font-family:Georgia, serif;
  font-size:42px;
  font-weight:400;

  text-shadow:0 2px 10px rgba(0,0,0,.25);
}

.editorial-overlay span{
  margin-top:32px;

  color:white;

  font-size:16px;

  letter-spacing:2px;
}

/* FOOTER */

footer{
  text-align:center;

  padding:20px 0 10px;
}

.contacto{
  display:inline-block;

  text-decoration:none;

  color:#fff;
  background:#1f1f1f;

  padding:18px 30px;

  border-radius:2px;

  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;

  transition:.25s ease;
}

.contacto:hover{
  opacity:.85;
}

.extra-links{
  margin-top:10px;
}

.extra-links a{
  font-size:13px;
  color:#777;
  text-decoration:none;
  cursor:pointer;
  transition:.25s ease;
}

.extra-links a:hover{
  opacity:.6;
}

/* TITULO */

.titulo{
  text-align:center;

  font-family:Georgia, serif;

  font-size:42px;
  font-weight:400;

  margin:10px 0 40px;
}

/* GRID */

.grid{
  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:50px 20px;
}

/* CARD */

.card{
  overflow:hidden;
}

.card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;

  transition:transform 1s ease;
}

.card:hover img{
  transform:scale(1.03);
}

/* INFO */

.info{
  padding:16px 0;
}

.info h3{
  margin:0;

  font-size:22px;
  font-weight:400;
}

/* META */

.meta{
  margin-top:12px;
}

.meta p{
  margin:4px 0;

  font-size:13px;
  color:#777;

  letter-spacing:.5px;
}

/* MEDIDAS */

.medidas{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin-top:12px;
}

.medidas span{
  border:1px solid #ddd;

  padding:6px 10px;

  font-size:11px;
  letter-spacing:1px;

  color:#555;

  background:white;
}

/* PRECIO */

.precio{
  margin:14px 0;

  font-size:18px;
  letter-spacing:1px;

  color:#111;
}

/* BOTON */

.btn{
  display:inline-block;

  margin-top:10px;

  text-decoration:none;

  color:#1f1f1f;

  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;

  border-bottom:1px solid #1f1f1f;

  padding-bottom:4px;

  transition:.25s ease;
}

.btn:hover{
  opacity:.6;
}

/* VOLVER */

.volver{
  display:inline-block;

  margin-bottom:20px;

  text-decoration:none;

  color:#777;

  font-size:14px;

  transition:.25s ease;
}

.volver:hover{
  opacity:.6;
}

/* SKELETON */

.skeleton-card{
  width:100%;
  height:260px;

  background:linear-gradient(
    90deg,
    #f2f2f2 25%,
    #e8e8e8 50%,
    #f2f2f2 75%
  );

  background-size:200% 100%;

  animation:skeleton 1.2s infinite;

  border-radius:2px;
}

@keyframes skeleton{

  0%{
    background-position:200% 0;
  }

  100%{
    background-position:-200% 0;
  }

}

/* UBICACION */

.ubicacion-info{
  margin-bottom:30px;
}

.ubicacion-info p{
  margin:8px 0;
  font-size:16px;
}

.mapa{
  width:100%;
  height:340px;
  border:none;

  filter:grayscale(100%);
}

/* MAPS BTN */

.maps-btn{
  display:inline-block;

  margin-top:20px;

  text-decoration:none;

  color:#1f1f1f;

  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;

  border-bottom:1px solid #1f1f1f;

  padding-bottom:4px;

  transition:.25s ease;
}

.maps-btn:hover{
  opacity:.6;
}

/* FOOTER FINAL */

.footer-final{
  margin-top:10px;

  padding:80px 20px 60px;

  text-align:center;

  border-top:1px solid #e7e1db;
}

.footer-logo{
  width:140px;

  opacity:.9;
}

.footer-final p{
  margin-top:20px;

  color:#777;

  font-size:15px;
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:30px;

  margin-top:24px;
}

.footer-links a{
  text-decoration:none;

  color:#1f1f1f;

  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;

  cursor:pointer;

  transition:.25s ease;
}

.footer-links a:hover{
  opacity:.6;
}

.footer-final span{
  display:block;

  margin-top:40px;

  color:#999;

  font-size:12px;
}

/* RESPONSIVE */

@media(max-width:700px){
  .editorial{
  grid-template-columns:1fr;

  margin-top:50px;
}

.editorial-card{
  height:320px;
}

.editorial-overlay h3{
  font-size:34px;
}
  body{
    font-size:16px;
  }

  .hero{
    height:85vh;
  }

  .top-logo{
    width:200px;
  }

  .hero-overlay h1{
    font-size:54px;
  }

  .hero-overlay p{
    font-size:18px;
  }

  .pantalla{
    padding:20px;
  }

  .header h2{
    font-size:38px;
  }

  .header p{
    font-size:16px;
  }

  /* COLECCIONES MOBILE */

  .colecciones-grid{
    grid-template-columns:1fr 1fr;
  }

  .coleccion-card:nth-child(4){
    grid-column:auto;
  }

  .coleccion-card:nth-child(5){
    grid-column:1 / -1;
  }

  .coleccion-card img{
    height:190px;
  }

  .coleccion-card span{
    font-size:28px;
  }

  .grid{
    grid-template-columns:1fr 1fr;
    gap:30px 14px;
  }

  .card img{
    height:170px;
  }

  .titulo{
    font-size:34px;
  }

}

/* AJUSTES MÍNIMOS PARA VARIANTES — CONSERVA EL DISEÑO ORIGINAL */

.descripcion-producto{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:10px 0 14px !important;
  color:#777;
  font-size:13px !important;
  line-height:1.5;
  letter-spacing:0 !important;
}

.medida-label{
  display:block;
  margin-top:14px;
  margin-bottom:6px;
  color:#777;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.selector-medida{
  width:100%;
  padding:10px 34px 10px 10px;
  border:1px solid #ddd;
  border-radius:0;
  background:#fff;
  color:#1f1f1f;
  font-family:inherit;
  font-size:12px;
  outline:none;
  cursor:pointer;
}

.selector-medida:focus{
  border-color:#777;
}

.mensaje-productos{
  grid-column:1 / -1;
  text-align:center;
  color:#777;
  font-size:16px;
}

/* CATÁLOGO COMPLETO: 11 CATEGORÍAS */

.colecciones-grid .coleccion-card:nth-child(4),
.colecciones-grid .coleccion-card:nth-child(5){
  grid-column:auto;
}

.colecciones-grid .coleccion-card:nth-child(11){
  grid-column:2 / 4;
}

/* COLORES Y VARIANTES VISUALES */

.colores-producto{
  margin-top:16px;
}

.colores-titulo{
  display:block;
  margin-bottom:8px;
  color:#777;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.colores-lista{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.color-circulo{
  position:relative;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.18);
  background:var(--color-producto);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
  color:#333;
  font-size:8px;
  font-weight:600;
  line-height:1;
  cursor:help;
}

.color-circulo-numerado{
  background:#ebe8e3;
}

@media(max-width:700px){

  .colecciones-grid .coleccion-card:nth-child(11){
    grid-column:1 / -1;
  }

  .color-circulo{
    width:20px;
    height:20px;
    flex-basis:20px;
  }

}

/* VISTA INDIVIDUAL DE PRODUCTO */

.card-interactiva{
  cursor:pointer;
  outline:none;
}

.card-interactiva:focus-visible{
  outline:1px solid #777;
  outline-offset:6px;
}

.detalle-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(340px, .9fr);
  gap:70px;
  align-items:start;
  margin-top:20px;
}

.detalle-imagen-wrap{
  position:sticky;
  top:30px;
  overflow:hidden;
  background:#efede9;
}

.detalle-imagen{
  display:block;
  width:100%;
  min-height:620px;
  max-height:760px;
  object-fit:cover;
}

.detalle-contenido{
  padding:30px 0 20px;
}

.detalle-familia{
  display:block;
  margin-bottom:16px;
  color:#8a8a8a;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
}

.detalle-titulo{
  margin:0;
  font-family:Georgia, serif;
  font-size:48px;
  font-weight:400;
  line-height:1.12;
}

.detalle-descripcion{
  margin:26px 0 34px;
  color:#666;
  font-size:16px;
  line-height:1.8;
}

.detalle-seccion{
  margin-top:26px;
}

.detalle-label{
  display:block;
  margin-bottom:10px;
  color:#777;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.detalle-selector{
  width:100%;
  padding:15px 42px 15px 14px;
  border:1px solid #d8d4cf;
  border-radius:0;
  background:#fff;
  color:#1f1f1f;
  font:inherit;
  font-size:14px;
  cursor:pointer;
  outline:none;
}

.detalle-selector:focus{
  border-color:#777;
}

.detalle-datos-principales{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  padding:24px 0;
  border-bottom:1px solid #e4dfda;
}

.detalle-codigo{
  margin:0;
  color:#777;
  font-size:13px;
}

.detalle-precio{
  margin:0;
  color:#111;
  font-family:Georgia, serif;
  font-size:30px;
}

.detalle-colores{
  margin-top:24px;
}

.detalle-colores .colores-titulo{
  margin-bottom:12px;
}

.detalle-colores .color-circulo{
  width:28px;
  height:28px;
  flex-basis:28px;
}

.detalle-whatsapp{
  display:block;
  margin-top:34px;
  padding:18px 24px;
  background:#1f1f1f;
  color:#fff;
  text-align:center;
  text-decoration:none;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  transition:.25s ease;
}

.detalle-whatsapp:hover{
  opacity:.85;
}

.detalle-acordeones{
  margin-top:34px;
  border-top:1px solid #e4dfda;
}

.detalle-acordeon{
  border-bottom:1px solid #e4dfda;
}

.detalle-acordeon summary{
  position:relative;
  padding:20px 30px 20px 0;
  list-style:none;
  cursor:pointer;
  color:#1f1f1f;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.detalle-acordeon summary::-webkit-details-marker{
  display:none;
}

.detalle-acordeon summary::after{
  content:"+";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  color:#777;
  font-size:20px;
  font-weight:300;
}

.detalle-acordeon[open] summary::after{
  content:"−";
}

.detalle-acordeon p{
  margin:0;
  padding:0 0 22px;
  color:#666;
  font-size:14px;
  line-height:1.7;
  white-space:pre-line;
}

@media(max-width:900px){

  .detalle-layout{
    grid-template-columns:1fr;
    gap:24px;
  }

  .detalle-imagen-wrap{
    position:relative;
    top:auto;
  }

  .detalle-imagen{
    min-height:440px;
    max-height:620px;
  }

}

@media(max-width:700px){

  .detalle-layout{
    margin-top:10px;
  }

  .detalle-imagen{
    min-height:360px;
    max-height:500px;
  }

  .detalle-contenido{
    padding-top:10px;
  }

  .detalle-titulo{
    font-size:38px;
  }

  .detalle-descripcion{
    font-size:15px;
    line-height:1.7;
  }

  .detalle-datos-principales{
    align-items:center;
  }

  .detalle-precio{
    font-size:25px;
  }

}

/* NAVEGACIÓN EDITORIAL FUNCIONAL */

.editorial-enlace{
  outline:none;
}

.editorial-enlace:focus-visible{
  outline:1px solid rgba(255,255,255,.9);
  outline-offset:-8px;
}

.editorial-enlace .editorial-overlay span{
  position:relative;
  padding-bottom:5px;
}

.editorial-enlace .editorial-overlay span::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}

.editorial-enlace:hover .editorial-overlay span::after,
.editorial-enlace:focus-visible .editorial-overlay span::after{
  transform:scaleX(1);
}

.mensaje-editorial-vacio{
  grid-column:1 / -1;
  max-width:620px;
  margin:70px auto;
  padding:65px 35px;
  text-align:center;
  border-top:1px solid #ddd7d1;
  border-bottom:1px solid #ddd7d1;
}

.mensaje-editorial-vacio span{
  color:#999;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
}

.mensaje-editorial-vacio h3{
  margin:15px 0 14px;
  font-family:Georgia, serif;
  font-size:38px;
  font-weight:400;
}

.mensaje-editorial-vacio p{
  margin:0;
  color:#777;
  font-size:15px;
  line-height:1.7;
}

@media(max-width:700px){

  .mensaje-editorial-vacio{
    margin:40px auto;
    padding:45px 20px;
  }

  .mensaje-editorial-vacio h3{
    font-size:31px;
  }

}

/* SELECCIÓN INTERACTIVA DE COLOR */

.color-circulo{
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    outline-color .2s ease;
}

.color-circulo:hover{
  transform:scale(1.08);
}

.color-circulo.seleccionado{
  outline:2px solid #1f1f1f;
  outline-offset:3px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.65),
    0 0 0 1px rgba(255,255,255,.9);
}

.color-circulo:focus-visible{
  outline:2px solid #1f1f1f;
  outline-offset:3px;
}

.color-seleccionado-texto{
  margin:10px 0 0 !important;
  color:#777 !important;
  font-size:11px !important;
  letter-spacing:.4px !important;
}

.color-seleccionado-texto strong{
  color:#1f1f1f;
  font-weight:400;
}

.detalle-colores .color-seleccionado-texto{
  margin-top:14px !important;
  font-size:12px !important;
}

/* CORRECCIÓN: EVITAR QUE EL BORDE DEL PRIMER COLOR SE RECORTE */

.colores-lista{
  padding:4px 4px 4px 5px;
  margin-left:-5px;
  overflow:visible;
}

.colores-producto{
  overflow:visible;
}

.detalle-colores{
  overflow:visible;
}

/* GALERÍA DE MÚLTIPLES IMÁGENES */

.detalle-imagen{
  transition:opacity .22s ease;
}

.detalle-imagen.cambiando{
  opacity:.25;
}

.detalle-miniaturas{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}

.detalle-miniatura{
  display:block;
  width:100%;
  padding:0;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:0;
  background:none;
  cursor:pointer;
  opacity:.72;
  transition:
    opacity .2s ease,
    border-color .2s ease;
}

.detalle-miniatura:hover,
.detalle-miniatura:focus-visible{
  opacity:1;
}

.detalle-miniatura.activa{
  border-color:#1f1f1f;
  opacity:1;
}

.detalle-miniatura img{
  display:block;
  width:100%;
  height:110px;
  object-fit:cover;
}

@media(max-width:900px){

  .detalle-miniaturas{
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }

  .detalle-miniatura img{
    height:90px;
  }

}

@media(max-width:700px){

  .detalle-miniaturas{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:5px;
    scroll-snap-type:x proximity;
  }

  .detalle-miniatura{
    min-width:82px;
    flex:0 0 82px;
    scroll-snap-align:start;
  }

  .detalle-miniatura img{
    height:82px;
  }

}

/* GALERÍA REACTIVA AL COLOR */

.detalle-miniaturas{
  transition:opacity .2s ease;
}

.detalle-miniatura{
  position:relative;
}

/* FOTOS REALES EN LA PANTALLA PRINCIPAL */

.coleccion-card img,
.editorial-card img{
  transition:
    transform .6s ease,
    opacity .25s ease;
}

.coleccion-card img.imagen-portada-cambiando,
.editorial-card img.imagen-portada-cambiando{
  opacity:.55;
}

.coleccion-card img.imagen-portada-real,
.editorial-card img.imagen-portada-real{
  opacity:1;
}

/* LOGO DE RESPALDO — APARECE SOLO SI logo.png NO EXISTE */

.top-logo-fallback{
  display:none;
  color:#fff;
  text-align:center;
  line-height:.92;
  letter-spacing:4px;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}

.top-logo-fallback span,
.top-logo-fallback strong{
  display:block;
}

.top-logo-fallback span{
  font-size:11px;
  font-weight:300;
  letter-spacing:5px;
}

.top-logo-fallback strong{
  margin-top:5px;
  font-family:Georgia, serif;
  font-size:34px;
  font-weight:400;
  letter-spacing:7px;
}

.footer-logo-fallback{
  display:none;
  margin:0 auto;
  color:#1f1f1f;
  text-align:center;
  line-height:.95;
}

.footer-logo-fallback span,
.footer-logo-fallback strong{
  display:block;
}

.footer-logo-fallback span{
  font-size:9px;
  letter-spacing:4px;
}

.footer-logo-fallback strong{
  margin-top:4px;
  font-family:Georgia, serif;
  font-size:27px;
  font-weight:400;
  letter-spacing:6px;
}

/* HERO Y FOTOS DE PORTADA */

.hero-image{
  background:#ddd8d2;
}

@media(max-width:700px){

  .top-logo-fallback strong{
    font-size:30px;
  }

}

/* =========================================================
   TARJETAS SIMPLIFICADAS
   ========================================================= */

.card .info{
  display:flex;
  flex-direction:column;
}

.card .info h3{
  margin-bottom:8px;
}

.card .precio{
  margin:0 0 16px;
  font-size:20px;
  line-height:1.2;
}

.card .meta{
  margin-top:0;
}

.card .medida-label{
  display:block;
  margin-bottom:7px;
}

.card .selector-medida{
  margin-bottom:16px;
}

.card .colores-producto{
  margin-top:0;
}

.card .btn{
  margin-top:20px;
}

/* =========================================================
   DETALLE: PRIMERO LO IMPORTANTE PARA COMPRAR
   ========================================================= */

.detalle-titulo{
  margin-bottom:12px;
}

.detalle-precio-principal{
  margin:0 0 28px !important;
  font-size:30px !important;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.4px;
}

.detalle-compra-seccion{
  margin-bottom:24px;
}

.detalle-colores{
  margin-bottom:26px;
}

.detalle-whatsapp{
  margin-top:0;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.detalle-codigo-secundario{
  margin:14px 0 0 !important;
  color:#777;
  font-size:12px;
}

.detalle-acordeones{
  margin-top:30px;
}

.detalle-acordeon .detalle-descripcion{
  margin:0;
}

@media(max-width:700px){

  .card .precio{
    font-size:19px;
  }

  .detalle-precio-principal{
    font-size:28px !important;
    margin-bottom:24px !important;
  }

}



/* CAMBIO DE FOTO POR COLOR */
.card > img,
.detalle-imagen{
  transition: opacity .18s ease;
}

/* IMAGEN NEUTRA PARA PRODUCTOS SIN FOTOGRAFÍA */
.card img,
.detalle-imagen,
.coleccion-card img{
  background:#eeeae5;
}

/* =========================================================
   BLANCOS LOLITA — AJUSTE MINIMALISTA Y REDONDEADO
   Solo apariencia. No modifica imágenes ni lógica.
   ========================================================= */

/* Fondo general ligeramente más suave */
body{
  background:#faf8f5;
}

/* Contenedores principales con más aire */
.pantalla{
  padding-left:clamp(18px, 4vw, 56px);
  padding-right:clamp(18px, 4vw, 56px);
}

/* Tarjetas de categorías */
.coleccion-card{
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 28px rgba(30,25,20,.06);
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.coleccion-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 34px rgba(30,25,20,.09);
}

.coleccion-card img{
  border-radius:20px;
}

/* Tarjetas editoriales */
.editorial-card{
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 8px 28px rgba(30,25,20,.06);
}

.editorial-card img{
  border-radius:22px;
}

/* Tarjetas de producto */
.card{
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(35,30,25,.07);
  box-shadow:0 8px 26px rgba(30,25,20,.055);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(30,25,20,.085);
  border-color:rgba(35,30,25,.10);
}

.card > img{
  border-radius:20px 20px 0 0;
}

.card .info{
  padding:20px;
}

.card .info h3{
  margin-top:0;
  margin-bottom:10px;
  line-height:1.25;
}

.card .precio{
  margin-top:0;
  margin-bottom:16px;
}

/* Selectores */
.selector-medida,
.detalle-selector{
  min-height:50px;
  padding:0 44px 0 15px;
  border:1px solid rgba(40,35,30,.14);
  border-radius:12px;
  background:#fff;
  box-shadow:none;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.selector-medida:hover,
.detalle-selector:hover{
  border-color:rgba(40,35,30,.25);
}

.selector-medida:focus,
.detalle-selector:focus{
  border-color:#1f1f1f;
  box-shadow:0 0 0 3px rgba(31,31,31,.06);
}

/* Colores */
.color-circulo{
  border-radius:50%;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.65),
    0 1px 2px rgba(0,0,0,.08);
}

.color-circulo.seleccionado{
  outline:2px solid #1f1f1f;
  outline-offset:3px;
}

/* Botones de tarjeta */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border-radius:12px;
  border:1px solid #1f1f1f;
  background:#fff;
  color:#1f1f1f;
  text-decoration:none;
  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease;
}

.btn:hover{
  background:#1f1f1f;
  color:#fff;
  transform:translateY(-1px);
}

/* Vista individual */
.detalle-layout{
  gap:clamp(28px, 5vw, 70px);
}

.detalle-imagen-wrap{
  overflow:visible;
  background:transparent;
}

.detalle-imagen{
  border-radius:22px;
  box-shadow:0 14px 42px rgba(30,25,20,.08);
}

.detalle-miniaturas{
  gap:10px;
  margin-top:14px;
}

.detalle-miniatura{
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(40,35,30,.10);
  background:#fff;
}

.detalle-miniatura.activa{
  border-color:#1f1f1f;
  box-shadow:0 0 0 2px rgba(31,31,31,.06);
}

.detalle-miniatura img{
  border-radius:9px;
}

/* CTA principal */
.detalle-whatsapp{
  min-height:54px;
  border-radius:14px;
  background:#1f1f1f;
  color:#fff;
  border:none;
  box-shadow:0 8px 22px rgba(31,31,31,.12);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    opacity .22s ease;
}

.detalle-whatsapp:hover{
  transform:translateY(-1px);
  box-shadow:0 11px 28px rgba(31,31,31,.16);
  opacity:1;
}

/* Acordeones */
.detalle-acordeones{
  border-top:none;
  margin-top:30px;
}

.detalle-acordeon{
  margin-bottom:10px;
  border:1px solid rgba(40,35,30,.09);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.detalle-acordeon summary{
  padding:18px 44px 18px 18px;
}

.detalle-acordeon p{
  padding:0 18px 18px;
}

/* Volver */
.volver{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 14px;
  border-radius:10px;
  transition:background .2s ease;
}

.volver:hover{
  background:rgba(31,31,31,.05);
}

/* Ubicación */
.ubicacion-info,
.mapa{
  border-radius:18px;
}

.maps-btn{
  border-radius:12px;
}

/* Footer */
footer{
  border-top:1px solid rgba(35,30,25,.08);
}

/* Móvil */
@media(max-width:700px){

  .coleccion-card,
  .coleccion-card img,
  .editorial-card,
  .editorial-card img{
    border-radius:16px;
  }

  .card{
    border-radius:16px;
  }

  .card > img{
    border-radius:16px 16px 0 0;
  }

  .card .info{
    padding:16px;
  }

  .detalle-imagen{
    border-radius:16px;
  }

  .detalle-whatsapp{
    border-radius:12px;
  }

  .selector-medida,
  .detalle-selector{
    border-radius:10px;
  }

}

/* =========================================================
   MÓVIL — TARJETAS DE PRODUCTO MÁS COMPACTAS
   Conserva el diseño actual, pero reduce altura y espacios.
   ========================================================= */

@media(max-width:700px){

  /* Más productos visibles por pantalla */
  #grid-productos{
    gap:12px;
  }

  .card{
    border-radius:14px;
    box-shadow:0 5px 16px rgba(30,25,20,.05);
  }

  /* Imagen algo más contenida */
  .card > img{
    width:100%;
    aspect-ratio:1 / .82;
    object-fit:cover;
    object-position:center;
    border-radius:14px 14px 0 0;
  }

  .card .info{
    padding:12px 13px 13px;
  }

  .card .info h3{
    margin:0 0 5px;
    font-size:16px;
    line-height:1.18;
  }

  .card .precio{
    margin:0 0 9px;
    font-size:18px;
    line-height:1.1;
  }

  .card .meta{
    margin:0;
  }

  .card .medida-label,
  .card .colores-titulo{
    margin-bottom:4px;
    font-size:9px;
    letter-spacing:.9px;
  }

  .card .selector-medida{
    min-height:40px;
    height:40px;
    margin-bottom:9px;
    padding:0 32px 0 10px;
    border-radius:9px;
    font-size:12px;
  }

  .card .colores-producto{
    margin:0;
  }

  .card .colores-lista{
    gap:6px;
    padding-top:2px;
    padding-bottom:2px;
  }

  .card .color-circulo{
    width:18px;
    height:18px;
    flex-basis:18px;
    outline-offset:2px;
  }

  .card .color-seleccionado-texto{
    margin-top:6px !important;
    font-size:10px !important;
    line-height:1.25;
  }

  .card .btn{
    min-height:40px;
    margin-top:11px;
    padding:0 12px;
    border-radius:9px;
    font-size:10px;
    letter-spacing:1.2px;
    text-align:center;
  }

  /* Título de la categoría más cercano al grid */
  #productos .titulo{
    margin-bottom:18px;
  }

  /* Evitar demasiado espacio arriba/abajo */
  #productos.pantalla{
    padding-top:18px;
    padding-bottom:30px;
  }

}

/* Móviles muy angostos */
@media(max-width:420px){

  #grid-productos{
    gap:10px;
  }

  .card .info{
    padding:10px 11px 11px;
  }

  .card .info h3{
    font-size:15px;
  }

  .card .precio{
    font-size:17px;
  }

  .card .selector-medida{
    min-height:38px;
    height:38px;
  }

  .card .btn{
    min-height:38px;
    font-size:9px;
    letter-spacing:1px;
  }

}

/* =========================================================
   MÓVIL — CARDS AÚN MÁS COMPACTAS
   Los colores en la card son solo informativos.
   ========================================================= */

.color-circulo-vista{
  cursor:default !important;
  outline:none !important;
  transform:none !important;
}

.color-circulo-vista:hover{
  transform:none !important;
}

.colores-producto-vista .color-seleccionado-texto{
  display:none !important;
}

@media(max-width:700px){

  #grid-productos{
    gap:9px;
  }

  .card{
    border-radius:12px;
  }

  .card > img{
    aspect-ratio:1 / .70;
    border-radius:12px 12px 0 0;
  }

  .card .info{
    padding:9px 10px 10px;
  }

  .card .info h3{
    margin-bottom:4px;
    font-size:14px;
    line-height:1.12;
  }

  .card .precio{
    margin-bottom:7px;
    font-size:16px;
  }

  .card .medida-label,
  .card .colores-titulo{
    margin-bottom:3px;
    font-size:8px;
    letter-spacing:.8px;
  }

  .card .selector-medida{
    min-height:34px;
    height:34px;
    margin-bottom:7px;
    padding:0 28px 0 8px;
    border-radius:8px;
    font-size:11px;
  }

  .card .colores-lista{
    gap:5px;
    padding:1px 0;
  }

  .card .color-circulo{
    width:15px;
    height:15px;
    flex-basis:15px;
    border-width:1px;
    box-shadow:none;
  }

  .card .btn{
    min-height:34px;
    margin-top:8px;
    padding:0 9px;
    border-radius:8px;
    font-size:8px;
    letter-spacing:.9px;
  }

  #productos .titulo{
    margin-bottom:14px;
  }

  #productos.pantalla{
    padding-top:14px;
    padding-bottom:24px;
  }

}

@media(max-width:420px){

  #grid-productos{
    gap:8px;
  }

  .card .info{
    padding:8px 9px 9px;
  }

  .card .info h3{
    font-size:13px;
  }

  .card .precio{
    font-size:15px;
  }

  .card .selector-medida{
    min-height:32px;
    height:32px;
  }

  .card .btn{
    min-height:32px;
    font-size:7.5px;
  }

}

/* =========================================================
   CARDS INFORMATIVAS — SIN SELECCIÓN DE MEDIDA
   ========================================================= */

.tamanos-card{
  margin:0 0 8px;
}

.tamanos-card-label{
  display:block;
  margin-bottom:3px;
  color:#777;
  font-size:8px;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.tamanos-card-lista{
  margin:0;
  color:#333;
  font-size:10px;
  line-height:1.35;
}

@media(max-width:700px){

  .card .meta{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .tamanos-card{
    margin:0;
  }

  .tamanos-card-lista{
    font-size:9.5px;
    line-height:1.25;
  }

  .card .colores-producto{
    margin:0;
  }

  .card .btn{
    margin-top:7px;
  }

}

@media(max-width:420px){

  .tamanos-card-lista{
    font-size:9px;
  }

}

/* =========================================================
   DESKTOP / PANTALLAS GRANDES — 4 PRODUCTOS POR FILA
   ========================================================= */

@media(min-width:1100px){

  #grid-productos{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:22px;
  }

}

/* Tablet / laptop intermedia */
@media(min-width:701px) and (max-width:1099px){

  #grid-productos{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
  }

}



/* =========================================================
   TABLET GRANDE / LAPTOP / PC — 4 PRODUCTOS POR FILA
   ========================================================= */

@media(min-width:701px){

  #grid-productos{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px;
  }

}

@media(min-width:1100px){

  #grid-productos{
    gap:22px;
  }

}


/* =========================================================
   BANNER PRINCIPAL
   ========================================================= */

.hero{
  overflow:hidden;
}

.hero-image{
  object-fit:cover;
  object-position:center center;
}

@media(max-width:700px){
  .hero-image{
    object-position:62% center;
  }
}

/* =========================================================
   HERO BLANCOS LOLITA — ACCESOS DE CATEGORÍA
   ========================================================= */

.hero{
  position:relative;
  overflow:hidden;
  min-height:clamp(480px, 68vh, 720px);
}

.hero-image{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  object-position:center center;
}

.hero-overlay.hero-overlay-accesos{
  position:absolute !important;
  inset:0 !important;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 !important;
  background:
    linear-gradient(
      180deg,
      rgba(250,248,245,0) 0%,
      rgba(250,248,245,.02) 48%,
      rgba(250,248,245,.58) 78%,
      rgba(250,248,245,.94) 100%
    ) !important;
}

.hero-accesos{
  width:min(860px, calc(100% - 40px));
  margin:0 auto 28px;
  color:#39322c;
  text-align:center;
}

.hero-marca{
  margin-bottom:20px;
}

.hero-marca-linea{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#514940;
  font-size:12px;
  font-weight:500;
  letter-spacing:3px;
}

.hero-marca-linea i{
  font-style:normal;
  opacity:.55;
}

.hero-frase{
  margin:14px 0 0 !important;
  color:#5b5249 !important;
  font-family:Georgia, "Times New Roman", serif;
  font-size:17px !important;
  font-style:italic;
  line-height:1.42 !important;
  text-shadow:none !important;
}

.hero-categorias{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  width:100%;
  overflow:hidden;
  border-top:1px solid rgba(68,59,51,.14);
  border-bottom:1px solid rgba(68,59,51,.14);
  background:rgba(250,248,245,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:16px;
}

.hero-categoria{
  appearance:none;
  border:0;
  border-right:1px solid rgba(68,59,51,.14);
  background:transparent;
  min-width:0;
  padding:15px 8px 13px;
  color:#443c35;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}

.hero-categoria:last-child{
  border-right:0;
}

.hero-categoria:hover{
  background:rgba(255,255,255,.50);
}

.hero-categoria:active{
  transform:scale(.98);
}

.hero-categoria-icono{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin:0 auto 7px;
  border-radius:50%;
  background:rgba(255,255,255,.42);
}

.hero-categoria-icono svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:#514940;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hero-categoria > span:last-child{
  display:block;
  color:#453d36 !important;
  font-size:10px !important;
  font-weight:500;
  line-height:1.1;
  letter-spacing:.25px;
  text-shadow:none !important;
}

/* Tablet */
@media(max-width:900px){
  .hero{
    min-height:560px;
  }

  .hero-accesos{
    width:min(720px, calc(100% - 28px));
    margin-bottom:20px;
  }
}

/* Móvil */
@media(max-width:700px){
  .hero{
    min-height:520px;
  }

  .hero-image{
    object-position:62% center;
  }

  .hero-overlay.hero-overlay-accesos{
    align-items:flex-end;
    padding:0 !important;
    background:
      linear-gradient(
        180deg,
        rgba(250,248,245,0) 0%,
        rgba(250,248,245,.02) 42%,
        rgba(250,248,245,.54) 72%,
        rgba(250,248,245,.96) 100%
      ) !important;
  }

  .hero-accesos{
    width:calc(100% - 20px);
    margin-bottom:12px;
  }

  .hero-marca{
    margin-bottom:13px;
  }

  .hero-marca-linea{
    gap:8px;
    font-size:9px;
    letter-spacing:2px;
  }

  .hero-frase{
    margin-top:9px !important;
    font-size:14px !important;
  }

  .hero-categorias{
    border-radius:13px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .hero-categoria{
    padding:11px 3px 10px;
  }

  .hero-categoria-icono{
    width:34px;
    height:34px;
    margin-bottom:5px;
  }

  .hero-categoria-icono svg{
    width:23px;
    height:23px;
  }

  .hero-categoria > span:last-child{
    font-size:8px !important;
    letter-spacing:0;
  }
}

@media(max-width:390px){
  .hero-accesos{
    width:calc(100% - 12px);
  }

  .hero-categoria > span:last-child{
    font-size:7.3px !important;
  }
}



/* =========================================================
   HERO FINAL — IMAGEN CENTRADA, TEXTO Y ACCESOS SIN FONDO
   ========================================================= */

.hero-image{
  object-position:center center !important;
}

.hero-overlay.hero-overlay-accesos{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  background:transparent !important;
}

.hero-accesos{
  width:min(820px, calc(100% - 32px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.hero-marca{
  text-align:center !important;
}

.hero-marca-linea{
  justify-content:center !important;
  color:#403830 !important;
  text-shadow:0 1px 5px rgba(255,255,255,.95) !important;
}

.hero-frase{
  color:#403830 !important;
  text-align:center !important;
  text-shadow:
    0 1px 3px rgba(255,255,255,1),
    0 2px 10px rgba(255,255,255,.9) !important;
}

.hero-categorias{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-radius:0 !important;
  border-top:1px solid rgba(61,52,44,.28) !important;
  border-bottom:0 !important;
}

.hero-categoria{
  background:transparent !important;
}

.hero-categoria:hover{
  background:rgba(255,255,255,.16) !important;
}

.hero-categoria-icono{
  background:transparent !important;
}

.hero-categoria > span:last-child,
.hero-categoria-icono svg{
  color:#403830 !important;
  filter:drop-shadow(0 1px 3px rgba(255,255,255,.95));
}

@media(max-width:700px){
  .hero-image{
    object-position:center center !important;
  }

  .hero-overlay.hero-overlay-accesos{
    background:transparent !important;
  }

  .hero-accesos{
    width:calc(100% - 16px) !important;
    margin-bottom:10px !important;
  }
}


/* HOME FINAL: logo más abajo y categorías más visibles, sin tapar el banner */
.topbar{padding-top:42px!important}
.top-logo{width:220px!important;filter:drop-shadow(0 1px 2px rgba(255,255,255,.95)) drop-shadow(0 3px 12px rgba(45,36,28,.20))!important}
.hero-marca{margin-bottom:14px!important}
.hero-marca-linea{font-size:13px!important;font-weight:600!important;letter-spacing:3.4px!important;color:#302923!important;text-shadow:0 1px 2px #fff,0 2px 9px rgba(255,255,255,.95)!important}
.hero-categorias{border-top:1px solid rgba(48,41,35,.48)!important;border-bottom:1px solid rgba(48,41,35,.20)!important;background:transparent!important;box-shadow:none!important}
.hero-categoria{padding:14px 10px 12px!important;border-right:1px solid rgba(48,41,35,.28)!important;background:transparent!important}
.hero-categoria:last-child{border-right:0!important}
.hero-categoria-icono{width:48px!important;height:48px!important;margin-bottom:7px!important;background:rgba(255,255,255,.20)!important;border:1px solid rgba(58,49,41,.40)!important;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 10px rgba(255,255,255,.42)!important}
.hero-categoria-icono svg{width:29px!important;height:29px!important;stroke:#302923!important;stroke-width:1.7!important;filter:drop-shadow(0 1px 1px #fff) drop-shadow(0 1px 3px rgba(255,255,255,.75))!important}
.hero-categoria>span:last-child{color:#302923!important;font-size:10.5px!important;font-weight:650!important;letter-spacing:.55px!important;text-shadow:0 1px 2px #fff,0 2px 7px rgba(255,255,255,.95)!important}
.hero-categoria:hover{background:rgba(255,255,255,.12)!important}
@media(max-width:700px){.topbar{padding-top:30px!important}.top-logo{width:176px!important}.hero-marca{margin-bottom:10px!important}.hero-marca-linea{font-size:9.5px!important;letter-spacing:2.15px!important}.hero-categoria{padding:10px 3px 9px!important}.hero-categoria-icono{width:38px!important;height:38px!important;margin-bottom:5px!important}.hero-categoria-icono svg{width:24px!important;height:24px!important}.hero-categoria>span:last-child{font-size:8px!important;font-weight:650!important;letter-spacing:.05px!important}}


/* =========================================================
   HOME AESTHETIC V2
   Logo más abajo + accesos anclados al fondo del banner
   ========================================================= */

/* Logo: más abajo sin alterar el resto del header */
.topbar{
  padding-top:58px !important;
}

/* Contenido del hero ocupa toda la altura y los accesos quedan abajo */
.hero-overlay.hero-overlay-accesos{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  padding:0 !important;
  background:transparent !important;
}

.hero-accesos{
  width:min(900px, calc(100% - 40px)) !important;
  margin:0 auto 16px !important;
  text-align:center !important;
}

/* HOGAR · CONFORT · DISEÑO justo encima de los accesos */
.hero-marca{
  margin:0 0 12px !important;
}

.hero-marca-linea{
  color:#332c26 !important;
  font-size:12px !important;
  font-weight:650 !important;
  letter-spacing:3.5px !important;
  text-shadow:
    0 1px 2px rgba(255,255,255,1),
    0 2px 8px rgba(255,255,255,1),
    0 0 18px rgba(255,255,255,.9) !important;
}

/* Barra inferior ligera: no es una caja opaca y deja ver la foto */
.hero-categorias{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  overflow:hidden !important;

  border:1px solid rgba(73,62,52,.18) !important;
  border-radius:18px !important;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.38),
    rgba(250,247,242,.55)
  ) !important;

  backdrop-filter:blur(7px) saturate(.9) !important;
  -webkit-backdrop-filter:blur(7px) saturate(.9) !important;

  box-shadow:
    0 10px 28px rgba(52,43,35,.10),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
}

/* Cada categoría */
.hero-categoria{
  position:relative !important;
  min-height:92px !important;
  padding:12px 8px 10px !important;

  border:0 !important;
  border-right:1px solid rgba(70,59,49,.13) !important;

  background:transparent !important;
  color:#342d27 !important;

  transition:
    background .2s ease,
    transform .2s ease !important;
}

.hero-categoria:last-child{
  border-right:0 !important;
}

.hero-categoria:hover{
  background:rgba(255,255,255,.34) !important;
}

.hero-categoria:active{
  transform:scale(.98) !important;
}

/* Círculos de icono: más finos y premium */
.hero-categoria-icono{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:46px !important;
  height:46px !important;
  margin:0 auto 7px !important;

  border:1px solid rgba(65,54,45,.34) !important;
  border-radius:50% !important;

  background:rgba(255,255,255,.30) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 3px 10px rgba(53,44,36,.07) !important;
}

.hero-categoria-icono svg{
  width:27px !important;
  height:27px !important;
  stroke:#3a312a !important;
  stroke-width:1.55 !important;
  filter:none !important;
}

/* Nombre de categoría */
.hero-categoria > span:last-child{
  display:block !important;
  color:#342d27 !important;

  font-size:9.5px !important;
  font-weight:650 !important;
  line-height:1.1 !important;
  letter-spacing:.75px !important;

  text-shadow:0 1px 2px rgba(255,255,255,.9) !important;
}

/* Móvil: logo abajo y barra pegada al borde inferior */
@media(max-width:700px){

  .topbar{
    padding-top:42px !important;
  }

  .top-logo{
    width:180px !important;
  }

  .hero-accesos{
    width:calc(100% - 14px) !important;
    margin-bottom:7px !important;
  }

  .hero-marca{
    margin-bottom:7px !important;
  }

  .hero-marca-linea{
    font-size:8.5px !important;
    letter-spacing:2.2px !important;
  }

  .hero-categorias{
    border-radius:14px !important;
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.42),
      rgba(250,247,242,.62)
    ) !important;
    backdrop-filter:blur(6px) !important;
    -webkit-backdrop-filter:blur(6px) !important;
  }

  .hero-categoria{
    min-height:72px !important;
    padding:8px 2px 7px !important;
  }

  .hero-categoria-icono{
    width:36px !important;
    height:36px !important;
    margin-bottom:5px !important;
  }

  .hero-categoria-icono svg{
    width:22px !important;
    height:22px !important;
  }

  .hero-categoria > span:last-child{
    font-size:7.5px !important;
    font-weight:700 !important;
    letter-spacing:.12px !important;
  }
}

@media(max-width:390px){
  .topbar{
    padding-top:38px !important;
  }

  .hero-accesos{
    width:calc(100% - 8px) !important;
    margin-bottom:4px !important;
  }

  .hero-categoria{
    min-height:68px !important;
  }

  .hero-categoria-icono{
    width:34px !important;
    height:34px !important;
  }

  .hero-categoria > span:last-child{
    font-size:7px !important;
  }
}


/* =========================================================
   PORTADA FINAL — COMPOSICIÓN DE REFERENCIA
   Logo conserva su posición y baja solo ligeramente.
   ========================================================= */

.topbar{
  padding-top:48px !important;
}

/* Bloque inferior del hero */
.hero-accesos{
  width:min(940px, calc(100% - 34px)) !important;
  margin:0 auto 8px !important;
}

/* Marca justo encima del CTA */
.hero-marca{
  margin:0 0 10px !important;
}

.hero-marca-linea{
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:3.6px !important;
  color:#342d27 !important;
  text-shadow:
    0 1px 2px rgba(255,255,255,1),
    0 2px 9px rgba(255,255,255,.95) !important;
}

/* Botón antiguo Ver colección */
.hero-ver-coleccion{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-width:220px;
  min-height:43px;
  margin:0 auto 13px;
  padding:0 24px;

  border:1px solid rgba(53,45,38,.58);
  border-radius:999px;

  background:rgba(255,255,255,.16);
  color:#332c26;

  font-size:11px;
  font-weight:650;
  letter-spacing:1.7px;
  text-transform:uppercase;
  text-decoration:none;

  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 3px 12px rgba(44,36,29,.06);

  transition:
    background .2s ease,
    transform .2s ease,
    border-color .2s ease;
}

.hero-ver-coleccion:hover{
  background:rgba(255,255,255,.32);
  border-color:rgba(53,45,38,.78);
  transform:translateY(-1px);
}

.hero-ver-coleccion span{
  font-size:16px;
  line-height:1;
}

/* Categorías realmente hasta abajo */
.hero-categorias{
  border:1px solid rgba(255,255,255,.68) !important;
  border-radius:22px !important;

  background:rgba(104,83,66,.26) !important;
  backdrop-filter:blur(7px) !important;
  -webkit-backdrop-filter:blur(7px) !important;

  box-shadow:
    0 8px 26px rgba(48,37,29,.12),
    inset 0 1px 0 rgba(255,255,255,.52) !important;
}

.hero-categoria{
  min-height:94px !important;
  border-right:1px solid rgba(255,255,255,.30) !important;
}

.hero-categoria-icono{
  background:rgba(255,255,255,.30) !important;
  border:1px solid rgba(255,255,255,.70) !important;
  box-shadow:
    0 3px 12px rgba(46,37,30,.10),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.hero-categoria-icono svg{
  stroke:#302821 !important;
  stroke-width:1.7 !important;
}

.hero-categoria > span:last-child{
  color:#2f2822 !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 2px rgba(255,255,255,.9),
    0 0 7px rgba(255,255,255,.65) !important;
}

@media(max-width:700px){
  .topbar{
    padding-top:36px !important;
  }

  .hero-accesos{
    width:calc(100% - 10px) !important;
    margin-bottom:4px !important;
  }

  .hero-marca{
    margin-bottom:7px !important;
  }

  .hero-ver-coleccion{
    min-width:178px;
    min-height:38px;
    margin-bottom:8px;
    padding:0 17px;
    font-size:9px;
    letter-spacing:1.25px;
  }

  .hero-categorias{
    border-radius:15px !important;
  }

  .hero-categoria{
    min-height:70px !important;
  }
}


/* =========================================================
   AJUSTE FINO DEL LOGO — un poco más abajo y ligeramente mayor
   ========================================================= */

.topbar{
  padding-top:56px !important;
}

.top-logo{
  width:232px !important;
}

@media(max-width:700px){
  .topbar{
    padding-top:43px !important;
  }

  .top-logo{
    width:188px !important;
  }
}

@media(max-width:390px){
  .topbar{
    padding-top:41px !important;
  }

  .top-logo{
    width:184px !important;
  }
}


/* =========================================================
   AJUSTE FINAL — LOGO MAYOR + BLOQUE INFERIOR MÁS ABAJO
   ========================================================= */

/* Logo: un poco más grande, conservando su ubicación general */
.top-logo{
  width:248px !important;
}

/* Todo el conjunto HOGAR + Ver colección + categorías baja
   prácticamente hasta el límite inferior del banner */
.hero-accesos{
  margin-bottom:0 !important;
  transform:translateY(10px);
}

/* Barra de categorías un poco más protagonista */
.hero-categorias{
  min-height:102px !important;
}

.hero-categoria{
  min-height:102px !important;
}

.hero-categoria-icono{
  width:50px !important;
  height:50px !important;
}

.hero-categoria-icono svg{
  width:29px !important;
  height:29px !important;
}

/* Móvil */
@media(max-width:700px){

  .top-logo{
    width:202px !important;
  }

  .hero-accesos{
    margin-bottom:0 !important;
    transform:translateY(5px);
  }

  .hero-categorias,
  .hero-categoria{
    min-height:76px !important;
  }

  .hero-categoria-icono{
    width:39px !important;
    height:39px !important;
  }

}

/* Teléfonos angostos */
@media(max-width:390px){

  .top-logo{
    width:198px !important;
  }

  .hero-accesos{
    transform:translateY(3px);
  }

}


/* =========================================================
   AJUSTE PORTADA — BAJAR CONTROLES, LOGO SIN CAMBIOS
   ========================================================= */

/* HOGAR · CONFORT · DISEÑO + Ver colección + categorías */
.hero-accesos{
  margin-bottom:0 !important;
  transform:translateY(54px) !important;
}

/* Móvil: bajar claramente el conjunto hacia la parte inferior */
@media(max-width:700px){
  .hero-accesos{
    margin-bottom:0 !important;
    transform:translateY(48px) !important;
  }
}

@media(max-width:390px){
  .hero-accesos{
    transform:translateY(44px) !important;
  }
}


/* =========================================================
   CORRECCIÓN DEFINITIVA:
   LA BARRA QUEDA ANCLADA AL BORDE INFERIOR DEL BANNER
   ========================================================= */

.hero-overlay.hero-overlay-accesos{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  padding:0 !important;
  background:transparent !important;
}

/* Este bloque termina exactamente en bottom:0.
   Como la barra de categorías es el último elemento,
   su borde inferior coincide con el borde inferior del banner. */
.hero-accesos{
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;

  width:min(940px, calc(100% - 18px)) !important;
  margin:0 !important;

  transform:translateX(-50%) !important;
}

/* La barra no deja ningún espacio debajo */
.hero-categorias{
  margin-bottom:0 !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

/* El CTA queda inmediatamente encima de la barra */
.hero-ver-coleccion{
  margin-bottom:10px !important;
}

/* La marca queda encima del CTA */
.hero-marca{
  margin-bottom:9px !important;
}

/* En móvil también queda físicamente pegada al fondo */
@media(max-width:700px){
  .hero-accesos{
    left:50% !important;
    bottom:0 !important;
    width:calc(100% - 8px) !important;
    margin:0 !important;
    transform:translateX(-50%) !important;
  }

  .hero-categorias{
    margin-bottom:0 !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }
}

@media(max-width:390px){
  .hero-accesos{
    bottom:0 !important;
    transform:translateX(-50%) !important;
  }
}


/* =========================================================
   AJUSTE FINO — PEQUEÑO MARGEN BAJO LA BARRA
   ========================================================= */

.hero-accesos{
  bottom:12px !important;
}

.hero-categorias{
  border-bottom-left-radius:18px !important;
  border-bottom-right-radius:18px !important;
}

@media(max-width:700px){
  .hero-accesos{
    bottom:8px !important;
  }

  .hero-categorias{
    border-bottom-left-radius:14px !important;
    border-bottom-right-radius:14px !important;
  }
}

@media(max-width:390px){
  .hero-accesos{
    bottom:7px !important;
  }
}


/* =========================================================
   BLANCOS LOLITA — REFINAMIENTO AESTHETIC GLOBAL
   ========================================================= */

:root{
  --bl-bg:#f8f5f1;
  --bl-surface:#fffdfb;
  --bl-text:#2f2924;
  --bl-muted:#7d746c;
  --bl-line:rgba(59,49,41,.11);
  --bl-shadow:0 12px 36px rgba(48,39,32,.065);
  --bl-shadow-hover:0 16px 42px rgba(48,39,32,.095);
}

html{scroll-behavior:smooth}
body{background:var(--bl-bg)!important;color:var(--bl-text)}
::selection{background:#dfd5ca;color:#2f2924}

.pantalla{
  padding-top:clamp(28px,4vw,54px);
  padding-bottom:clamp(34px,5vw,70px);
}

.titulo{
  position:relative;
  margin-bottom:30px!important;
  color:var(--bl-text);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400!important;
  letter-spacing:.4px!important;
}

.titulo::after{
  content:"";
  display:block;
  width:44px;
  height:1px;
  margin:13px auto 0;
  background:rgba(54,46,39,.34);
}

.volver{
  color:#675d55!important;
  border:1px solid transparent;
}
.volver:hover{
  color:#2f2924!important;
  border-color:var(--bl-line);
  background:rgba(255,255,255,.52)!important;
}

/* Colecciones */
#colecciones{position:relative}
#colecciones::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(58,48,40,.14),transparent);
}

.coleccion-card{
  border:1px solid rgba(66,55,46,.07)!important;
  border-radius:20px!important;
  background:var(--bl-surface)!important;
  box-shadow:var(--bl-shadow)!important;
}
.coleccion-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:var(--bl-shadow-hover)!important;
}
.coleccion-card img{
  transition:transform .7s cubic-bezier(.2,.7,.2,1)!important;
}
.coleccion-card:hover img{transform:scale(1.035)}

/* Editorial */
.editorial-card{
  border:1px solid rgba(66,55,46,.07)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:var(--bl-shadow)!important;
}
.editorial-card:hover{box-shadow:var(--bl-shadow-hover)!important}
.editorial-card img{
  filter:saturate(.94) contrast(1.01);
  transition:transform .7s cubic-bezier(.2,.7,.2,1)!important;
}
.editorial-card:hover img{transform:scale(1.025)}

/* Cards de producto */
.card{
  border:1px solid rgba(60,50,42,.08)!important;
  border-radius:18px!important;
  background:var(--bl-surface)!important;
  box-shadow:0 8px 26px rgba(47,38,31,.05)!important;
}
.card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(60,50,42,.13)!important;
  box-shadow:0 14px 34px rgba(47,38,31,.085)!important;
}
.card>img{border-radius:18px 18px 0 0!important}
.card .info{
  background:linear-gradient(180deg,rgba(255,253,251,.98),rgba(250,247,243,.98));
}
.card .info h3{
  color:#2f2924!important;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400!important;
}
.card .precio{color:#2f2924!important;font-weight:500!important}
.tamanos-card-label,.colores-titulo{color:#8a8077!important;font-weight:600}
.tamanos-card-lista{color:#5e554e!important}
.color-circulo-vista{
  border:1px solid rgba(45,38,32,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 1px 3px rgba(47,38,31,.07)!important;
}
.card .btn{
  border-color:rgba(47,41,36,.78)!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#342d27!important;
}
.card .btn:hover{background:#342d27!important;color:#fff!important}

/* Detalle */
.detalle-imagen{
  border-radius:22px!important;
  box-shadow:0 14px 40px rgba(47,38,31,.075)!important;
}
.detalle-familia{
  color:#9a8f86!important;
  font-size:10px!important;
  font-weight:650;
  letter-spacing:2px!important;
  text-transform:uppercase;
}
.detalle-titulo{
  color:#2f2924!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
}
.detalle-precio{
  color:#2f2924!important;
  font-family:Georgia,"Times New Roman",serif;
}
.detalle-label{
  color:#756b63!important;
  font-size:10px!important;
  font-weight:650;
  letter-spacing:1.2px!important;
  text-transform:uppercase;
}
.detalle-selector{
  border:1px solid rgba(55,46,39,.16)!important;
  border-radius:12px!important;
  background:#fffdfb!important;
}
.detalle-selector:focus{
  border-color:rgba(55,46,39,.52)!important;
  box-shadow:0 0 0 3px rgba(55,46,39,.055)!important;
}
.detalle-whatsapp{
  border-radius:12px!important;
  background:#342d27!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(47,38,31,.12)!important;
}
.detalle-whatsapp:hover{
  background:#4a4038!important;
  box-shadow:0 11px 28px rgba(47,38,31,.16)!important;
}
.detalle-miniatura{
  border-radius:10px!important;
  border-color:rgba(58,49,41,.09)!important;
  background:#fffdfb!important;
}
.detalle-miniatura.activa{
  border-color:#4b4037!important;
  box-shadow:0 0 0 2px rgba(75,64,55,.07)!important;
}
.detalle-acordeon{
  border:1px solid rgba(59,49,41,.09)!important;
  border-radius:12px!important;
  background:rgba(255,253,251,.72)!important;
}
.detalle-acordeon[open]{background:#fffdfb!important}

/* Ubicación */
.ubicacion-info{
  padding:24px!important;
  border:1px solid rgba(59,49,41,.08);
  border-radius:18px!important;
  background:rgba(255,253,251,.76);
  box-shadow:var(--bl-shadow);
}
.mapa{
  border:1px solid rgba(59,49,41,.08);
  border-radius:18px!important;
  box-shadow:var(--bl-shadow);
}
.maps-btn{
  border-radius:11px!important;
  background:#342d27!important;
  color:#fff!important;
}

/* Footer */
footer{
  position:relative;
  background:#f0ebe5!important;
  border-top:1px solid rgba(59,49,41,.08)!important;
}
footer::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:80px;
  height:1px;
  transform:translateX(-50%);
  background:rgba(59,49,41,.34);
}
footer a{color:#675d55!important}
footer a:hover{color:#2f2924!important}

/* Móvil */
@media(max-width:700px){
  .pantalla{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .titulo{margin-bottom:20px!important}
  .titulo::after{width:34px;margin-top:9px}
  .coleccion-card,.editorial-card{border-radius:16px!important}
  .card{border-radius:14px!important}
  .card>img{border-radius:14px 14px 0 0!important}
  .detalle-imagen{border-radius:16px!important}
  .detalle-acordeon{border-radius:10px!important}
}

@media(min-width:1200px){
  #productos,#colecciones,.editorial{
    max-width:1500px;
    margin-left:auto;
    margin-right:auto;
  }
}


/* =========================================================
   BLANCOS LOLITA — LIMPIEZA HOME + ACENTO DEL LOGO #8491A2
   ========================================================= */

:root{
  --lolita-blue:#8491A2;
  --lolita-blue-soft:rgba(132,145,162,.12);
  --lolita-blue-line:rgba(132,145,162,.28);
  --lolita-blue-hover:#738195;
}

/* Se elimina visualmente el bloque editorial inferior mostrado
   (tarjetas, WhatsApp y enlace de ubicación de esa sección). */
.editorial,
.editorial-section,
#editorial,
.home-editorial,
.inspiracion,
#inspiracion{
  display:none !important;
}

/* Acento azul grisáceo MUY sutil: conserva el look crema */
.titulo::after{
  background:var(--lolita-blue) !important;
  opacity:.58;
}

#colecciones::before{
  background:linear-gradient(
    90deg,
    transparent,
    var(--lolita-blue-line),
    transparent
  ) !important;
}

.card:hover,
.coleccion-card:hover{
  border-color:var(--lolita-blue-line) !important;
}

.card .btn{
  border-color:rgba(132,145,162,.62) !important;
  color:#596575 !important;
}

.card .btn:hover{
  background:var(--lolita-blue) !important;
  border-color:var(--lolita-blue) !important;
  color:#fff !important;
}

.detalle-selector:focus{
  border-color:var(--lolita-blue) !important;
  box-shadow:0 0 0 3px var(--lolita-blue-soft) !important;
}

.detalle-miniatura.activa{
  border-color:var(--lolita-blue) !important;
  box-shadow:0 0 0 2px var(--lolita-blue-soft) !important;
}

/* WhatsApp sigue oscuro, pero con un matiz coherente al hover */
.detalle-whatsapp:hover{
  background:#596575 !important;
}

/* Links y microdetalles */
.volver:hover,
footer a:hover{
  color:#667487 !important;
}

footer::before{
  background:var(--lolita-blue) !important;
  opacity:.5;
}

/* Un pequeño acento en los accesos del hero, sin teñir el banner */
.hero-categoria:hover .hero-categoria-icono{
  border-color:rgba(132,145,162,.62) !important;
  box-shadow:
    0 3px 12px rgba(46,37,30,.08),
    0 0 0 2px rgba(132,145,162,.08),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
}

/* =========================================================
   HOME — LOGO UN POCO MÁS ABAJO + 9 ACCESOS DEL BANNER
   ========================================================= */

/* Sólo baja ligeramente el logo de inicio. */
#inicio .topbar,
.hero .topbar{
  padding-top:64px !important;
}

/* Nueve categorías: se mantienen abajo y compactas. */
.hero-categorias{
  display:grid !important;
  grid-template-columns:repeat(9,minmax(0,1fr)) !important;
}

.hero-categoria{
  min-width:0 !important;
  padding-left:4px !important;
  padding-right:4px !important;
}

.hero-categoria > span:last-child{
  white-space:normal !important;
  line-height:1.08 !important;
}

/* En móvil se permite desplazamiento horizontal para no hacer
   ilegibles los 9 accesos ni tapar demasiado el banner. */
@media(max-width:700px){
  #inicio .topbar,
  .hero .topbar{
    padding-top:49px !important;
  }

  .hero-categorias{
    display:flex !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }

  .hero-categorias::-webkit-scrollbar{display:none}

  .hero-categoria{
    flex:0 0 76px !important;
    scroll-snap-align:start;
    min-height:70px !important;
  }

  .hero-categoria-icono{
    width:35px !important;
    height:35px !important;
  }

  .hero-categoria-icono svg{
    width:21px !important;
    height:21px !important;
  }

  .hero-categoria > span:last-child{
    font-size:6.8px !important;
    letter-spacing:.05px !important;
  }
}


/* =========================================================
   HOME — BARRA MÓVIL DESPLAZABLE / ARRASTRABLE
   ========================================================= */

@media(max-width:700px){

  .hero-categorias{
    display:flex !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;

    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    scrollbar-width:none;

    touch-action:pan-x;
    cursor:grab;

    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  .hero-categorias::-webkit-scrollbar{
    display:none;
  }

  .hero-categorias.arrastrando{
    cursor:grabbing;
    scroll-snap-type:none;
    scroll-behavior:auto;
  }

  .hero-categoria{
    flex:0 0 78px !important;
    min-width:78px !important;
    scroll-snap-align:start;
    user-select:none;
    -webkit-user-select:none;
  }

}


/* =========================================================
   HOME — COLECCIONES TIPO METRO / WINDOWS 8
   ========================================================= */

/* El contenedor completo se comporta como una sola pieza */
#colecciones .colecciones-grid,
#colecciones .grid-colecciones,
#colecciones .grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;

  gap:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  border-radius:18px !important;
  border:1px solid rgba(132,145,162,.16) !important;

  box-shadow:
    0 14px 34px rgba(48,39,32,.06) !important;
}

/* Todas las piezas interiores son rectas y pegadas */
#colecciones .coleccion-card{
  margin:0 !important;
  border-radius:0 !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.22) !important;
  border-bottom:1px solid rgba(255,255,255,.22) !important;

  box-shadow:none !important;
  transform:none !important;

  min-height:270px;
}

/* Sin separación visual en imágenes */
#colecciones .coleccion-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0 !important;
}

/* Hover más tipo tile */
#colecciones .coleccion-card:hover{
  transform:none !important;
  box-shadow:none !important;
  filter:brightness(.97);
}

/* Desktop: redondeo SOLO en las esquinas externas del conjunto */
#colecciones .coleccion-card:first-child{
  border-top-left-radius:18px !important;
  overflow:hidden;
}

#colecciones .coleccion-card:nth-child(3){
  border-top-right-radius:18px !important;
  overflow:hidden;
}

#colecciones .coleccion-card:nth-last-child(3){
  border-bottom-left-radius:18px !important;
  overflow:hidden;
}

#colecciones .coleccion-card:last-child{
  border-bottom-right-radius:18px !important;
  overflow:hidden;
}

/* Móvil: 2 columnas tipo mosaico, sin gaps */
@media(max-width:700px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:0 !important;
    border-radius:14px !important;
  }

  #colecciones .coleccion-card{
    min-height:170px;
    border-radius:0 !important;
  }

  /* Limpiamos reglas de desktop */
  #colecciones .coleccion-card:first-child,
  #colecciones .coleccion-card:nth-child(3),
  #colecciones .coleccion-card:nth-last-child(3),
  #colecciones .coleccion-card:last-child{
    border-radius:0 !important;
  }

  /* Solo cuatro esquinas externas del mosaico móvil */
  #colecciones .coleccion-card:first-child{
    border-top-left-radius:14px !important;
    overflow:hidden;
  }

  #colecciones .coleccion-card:nth-child(2){
    border-top-right-radius:14px !important;
    overflow:hidden;
  }

  #colecciones .coleccion-card:nth-last-child(2){
    border-bottom-left-radius:14px !important;
    overflow:hidden;
  }

  #colecciones .coleccion-card:last-child{
    border-bottom-right-radius:14px !important;
    overflow:hidden;
  }

}


/* =========================================================
   FOOTER BLANCOS LOLITA — NUEVO
   ========================================================= */

.footer-lolita{
  margin-top:54px;
  padding:42px 24px 26px;

  background:
    linear-gradient(
      180deg,
      rgba(132,145,162,.08),
      rgba(132,145,162,.13)
    );

  border-top:1px solid rgba(132,145,162,.18);
}

.footer-lolita-inner{
  max-width:1320px;
  margin:0 auto;

  display:grid;
  grid-template-columns:1.3fr .9fr auto;
  gap:36px;
  align-items:start;
}

.footer-lolita-logo{
  width:165px;
  max-width:100%;
  height:auto;
  opacity:.92;
}

.footer-lolita-brand p{
  max-width:390px;
  margin:15px 0 0;

  color:#6e747c;
  font-size:13px;
  line-height:1.6;
}

.footer-lolita-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-lolita-links a,
.footer-lolita-links button{
  appearance:none;
  border:0;
  padding:0;

  background:none;

  color:#596575 !important;

  font:inherit;
  font-size:12px;
  letter-spacing:.5px;

  text-align:left;
  text-decoration:none;
  cursor:pointer;
}

.footer-lolita-links a:hover,
.footer-lolita-links button:hover{
  color:#35404e !important;
}

.footer-lolita-meta{
  display:flex;
  flex-direction:column;
  gap:8px;

  color:#89919a;
  font-size:11px;
  text-align:right;
}

@media(max-width:700px){

  .footer-lolita{
    margin-top:34px;
    padding:30px 18px 22px;
  }

  .footer-lolita-inner{
    grid-template-columns:1fr;
    gap:24px;
  }

  .footer-lolita-logo{
    width:145px;
  }

  .footer-lolita-meta{
    padding-top:18px;
    border-top:1px solid rgba(132,145,162,.18);
    text-align:left;
  }

}


/* =========================================================
   MOSAICO METRO V2
   Divisiones #8491A2 + relleno geométrico + 4 columnas PC
   ========================================================= */

/* El fondo del gran contenedor ES el color de marca.
   Con gap:1px, ese fondo se convierte en la línea divisora. */
#colecciones .colecciones-grid,
#colecciones .grid-colecciones,
#colecciones .grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;

  gap:1px !important;
  padding:1px !important;

  background:#8491A2 !important;

  border:0 !important;
  border-radius:18px !important;
  overflow:hidden !important;

  box-shadow:
    0 14px 34px rgba(48,39,32,.06) !important;
}

/* Cada tile queda totalmente pegado al siguiente.
   Ya no usamos líneas blancas propias. */
#colecciones .coleccion-card{
  margin:0 !important;

  border:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
  overflow:hidden !important;

  background:#f8f5f1 !important;

  min-height:250px;
}

/* Las fotos llenan completamente cada celda */
#colecciones .coleccion-card img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:0 !important;
}

/* ---------------------------------------------------------
   PC / LAPTOP GRANDE
   4 columnas y patrón que cierra exactamente un rectángulo.
   Hay 10 categorías = 12 unidades:
   Colchas ocupa 2 + Frazadas ocupa 2.
   --------------------------------------------------------- */
@media(min-width:900px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  /* 1. COLCHAS: ocupa dos cuadros */
  #colecciones .coleccion-card:nth-child(1){
    grid-column:span 2 !important;
  }

  /* 10. FRAZADAS: ocupa los dos últimos cuadros */
  #colecciones .coleccion-card:nth-child(10){
    grid-column:span 2 !important;
  }

  /* Redondeo ÚNICAMENTE en las 4 esquinas exteriores */
  #colecciones .coleccion-card:first-child{
    border-top-left-radius:17px !important;
  }

  /* Sábanas termina la primera fila */
  #colecciones .coleccion-card:nth-child(3){
    border-top-right-radius:17px !important;
  }

  /* Cubre colchones abre la última fila */
  #colecciones .coleccion-card:nth-child(8){
    border-bottom-left-radius:17px !important;
  }

  #colecciones .coleccion-card:last-child{
    border-bottom-right-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(1),
  #colecciones .coleccion-card:nth-child(10){
    min-height:250px;
  }
}

/* ---------------------------------------------------------
   TABLET: 3 columnas, adaptación automática.
   --------------------------------------------------------- */
@media(min-width:701px) and (max-width:899px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  #colecciones .coleccion-card{
    grid-column:span 1 !important;
  }

  /* 10 items en 3 columnas dejarían 2 huecos.
     La última categoría ocupa 3 espacios para cerrar el mosaico. */
  #colecciones .coleccion-card:last-child{
    grid-column:span 3 !important;
  }
}

/* ---------------------------------------------------------
   MÓVIL: 2 columnas; 10 categorías llenan 5 filas exactas.
   No hace falta ningún tile doble.
   --------------------------------------------------------- */
@media(max-width:700px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:1px !important;
    padding:1px !important;
    background:#8491A2 !important;
    border-radius:14px !important;
  }

  #colecciones .coleccion-card{
    grid-column:span 1 !important;
    min-height:165px !important;
    border-radius:0 !important;
  }

  /* Solamente esquinas del rectángulo exterior */
  #colecciones .coleccion-card:first-child{
    border-top-left-radius:13px !important;
  }

  #colecciones .coleccion-card:nth-child(2){
    border-top-right-radius:13px !important;
  }

  #colecciones .coleccion-card:nth-child(9){
    border-bottom-left-radius:13px !important;
  }

  #colecciones .coleccion-card:last-child{
    border-bottom-right-radius:13px !important;
  }
}


/* =========================================================
   MOSAICO METRO V3 — RELLENO EQUILIBRADO
   Sólo crecen tiles cuando hace falta cerrar la última fila.
   ========================================================= */

/* PC / laptop / tablet grande: 4 columnas */
@media(min-width:701px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  /* Todas las categorías vuelven a tamaño normal */
  #colecciones .coleccion-card{
    grid-column:span 1 !important;
  }

  /* Con 10 categorías:
     - primeras 8 = 2 filas completas
     - últimas 2 = última fila, cada una ocupa 2 columnas
     Así sólo crecen las que realmente hace falta. */
  #colecciones .coleccion-card:nth-child(9),
  #colecciones .coleccion-card:nth-child(10){
    grid-column:span 2 !important;
  }

  /* Esquinas externas correctas del mosaico */
  #colecciones .coleccion-card:first-child{
    border-top-left-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(4){
    border-top-right-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(9){
    border-bottom-left-radius:17px !important;
  }

  #colecciones .coleccion-card:last-child{
    border-bottom-right-radius:17px !important;
  }
}

/* Móvil: 2 columnas exactas, ninguna tile crece */
@media(max-width:700px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #colecciones .coleccion-card,
  #colecciones .coleccion-card:nth-child(9),
  #colecciones .coleccion-card:nth-child(10){
    grid-column:span 1 !important;
  }

  #colecciones .coleccion-card:first-child{
    border-top-left-radius:13px !important;
  }

  #colecciones .coleccion-card:nth-child(2){
    border-top-right-radius:13px !important;
  }

  #colecciones .coleccion-card:nth-child(9){
    border-bottom-left-radius:13px !important;
  }

  #colecciones .coleccion-card:last-child{
    border-bottom-right-radius:13px !important;
  }
}



/* =========================================================
   MOSAICO METRO FINAL — 4 + 4 + 2 EN PC
   ========================================================= */

@media(min-width:701px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
  }

  /* TODOS normales por defecto */
  #colecciones .coleccion-card{
    grid-column:span 1 !important;
  }

  /* Solo los dos últimos rellenan la tercera fila */
  #colecciones .coleccion-card:nth-child(9),
  #colecciones .coleccion-card:nth-child(10){
    grid-column:span 2 !important;
  }

  /* Esquinas exteriores correctas para patrón 4 / 4 / 2 */
  #colecciones .coleccion-card:first-child{
    border-top-left-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(4){
    border-top-right-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(9){
    border-bottom-left-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(10){
    border-bottom-right-radius:17px !important;
  }

}

/* Móvil: 2 columnas, sin alargar ninguna */
@media(max-width:700px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #colecciones .coleccion-card,
  #colecciones .coleccion-card:nth-child(9),
  #colecciones .coleccion-card:nth-child(10){
    grid-column:span 1 !important;
  }

}


/* =========================================================
   FOOTER FINAL — BLOQUE REDONDEADO #8491A2
   ========================================================= */

.footer-lolita{
  width:calc(100% - 32px) !important;
  max-width:1500px !important;

  margin:38px auto 16px !important;
  padding:38px 28px 24px !important;

  border:0 !important;
  border-radius:22px !important;

  background:#8491A2 !important;

  box-shadow:
    0 14px 34px rgba(55,65,78,.16) !important;

  overflow:hidden;
}

/* Quitamos cualquier línea decorativa heredada */
.footer-lolita::before,
.footer-lolita::after{
  display:none !important;
}

/* Logo y textos más limpios sobre el azul grisáceo */
.footer-lolita-logo{
  filter:brightness(0) invert(1);
  opacity:.96 !important;
}

.footer-lolita-brand p{
  color:rgba(255,255,255,.82) !important;
}

.footer-lolita-links a,
.footer-lolita-links button{
  color:#fff !important;
}

.footer-lolita-links a:hover,
.footer-lolita-links button:hover{
  color:rgba(255,255,255,.72) !important;
}

.footer-lolita-meta{
  color:rgba(255,255,255,.72) !important;
}

@media(max-width:700px){

  .footer-lolita{
    width:calc(100% - 16px) !important;
    margin:24px auto 8px !important;
    padding:28px 20px 20px !important;
    border-radius:16px !important;
  }

  .footer-lolita-meta{
    border-top:1px solid rgba(255,255,255,.20) !important;
  }

}


/* =========================================================
   MOSAICO METRO — PROPORCIÓN CORRECTA
   Todos los tiles son cuadrados pequeños.
   Sólo los dos últimos son doble de anchos, con la MISMA altura.
   ========================================================= */

@media(min-width:701px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-rows:auto !important;
    align-items:stretch !important;
  }

  /* Todos normales: 1 columna y proporción cuadrada */
  #colecciones .coleccion-card{
    grid-column:span 1 !important;
    aspect-ratio:1 / 1 !important;
    min-height:0 !important;
    height:auto !important;
  }

  /* Los dos últimos: doble ancho pero MISMA altura de fila */
  #colecciones .coleccion-card:nth-child(9),
  #colecciones .coleccion-card:nth-child(10){
    grid-column:span 2 !important;
    aspect-ratio:2 / 1 !important;
    min-height:0 !important;
    height:auto !important;
  }

  /* La imagen siempre rellena el tile sin cambiar su altura */
  #colecciones .coleccion-card img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  /* Esquinas exteriores del bloque 4 + 4 + 2 */
  #colecciones .coleccion-card:first-child{
    border-top-left-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(4){
    border-top-right-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(9){
    border-bottom-left-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(10){
    border-bottom-right-radius:17px !important;
  }
}

/* Móvil: todos siguen cuadrados, 2 por fila */
@media(max-width:700px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #colecciones .coleccion-card,
  #colecciones .coleccion-card:nth-child(9),
  #colecciones .coleccion-card:nth-child(10){
    grid-column:span 1 !important;
    aspect-ratio:1 / 1 !important;
    min-height:0 !important;
    height:auto !important;
  }

  #colecciones .coleccion-card img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}


/* =========================================================
   MOSAICO METRO V4 — COMPACTO Y SIN HUECOS
   PC: 4 + 4 + 2
   Los 8 primeros son pequeños y uniformes.
   Los 2 últimos sólo se ensanchan para cerrar la fila.
   ========================================================= */

@media(min-width:701px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;

    /* La altura ya NO depende del ancho de cada imagen/card */
    grid-auto-rows:clamp(145px,15vw,205px) !important;

    grid-auto-flow:row !important;
    align-items:stretch !important;

    gap:1px !important;
    padding:1px !important;
    background:#8491A2 !important;
  }

  /* 8 primeros: exactamente un cuadrito de la retícula */
  #colecciones .coleccion-card{
    grid-column:span 1 !important;

    width:auto !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;

    aspect-ratio:auto !important;

    margin:0 !important;
    padding:0 !important;
  }

  /* Últimos dos: sólo DOBLE ANCHO.
     Conservan exactamente la misma altura de fila. */
  #colecciones .coleccion-card:nth-child(9),
  #colecciones .coleccion-card:nth-child(10){
    grid-column:span 2 !important;

    width:auto !important;
    height:100% !important;
    min-height:0 !important;

    aspect-ratio:auto !important;
  }

  /* La foto rellena la celda completa: cero franjas o huecos */
  #colecciones .coleccion-card img{
    position:absolute !important;
    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center !important;

    margin:0 !important;
    padding:0 !important;
  }

  #colecciones .coleccion-card{
    position:relative !important;
    overflow:hidden !important;
  }

  /* Si hay capas/texto, permanecen sobre la foto */
  #colecciones .coleccion-card > *:not(img){
    position:relative;
    z-index:2;
  }

  /* 4 + 4 + 2: esquinas únicamente en el perímetro */
  #colecciones .coleccion-card:first-child{
    border-top-left-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(4){
    border-top-right-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(9){
    border-bottom-left-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(10){
    border-bottom-right-radius:17px !important;
  }
}


/* MÓVIL — 2 columnas compactas, 5 filas, sin huecos */
@media(max-width:700px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:145px !important;
    gap:1px !important;
    padding:1px !important;
    background:#8491A2 !important;
  }

  #colecciones .coleccion-card,
  #colecciones .coleccion-card:nth-child(9),
  #colecciones .coleccion-card:nth-child(10){
    position:relative !important;

    grid-column:span 1 !important;

    width:auto !important;
    height:100% !important;
    min-height:0 !important;

    aspect-ratio:auto !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
  }

  #colecciones .coleccion-card img{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center !important;

    margin:0 !important;
    padding:0 !important;
  }

  #colecciones .coleccion-card > *:not(img){
    position:relative;
    z-index:2;
  }
}



/* =========================================================
   ORDEN FINAL DEL MOSAICO — SOLO PC
   Cobertores | Colchas | Sábanas | Edredones
   Cojines | Pies de cama | Toallas | Cubre colchones
   Almohadas | Frazadas
   ========================================================= */
@media(min-width:701px){

  #colecciones .colecciones-grid,
  #colecciones .grid-colecciones,
  #colecciones .grid{
    grid-auto-flow:row !important;
  }

  /* Cobertores primero, Colchas segundo */
  #colecciones .coleccion-card:nth-child(2){ order:1 !important; }
  #colecciones .coleccion-card:nth-child(1){ order:2 !important; }

  #colecciones .coleccion-card:nth-child(3){ order:3 !important; }
  #colecciones .coleccion-card:nth-child(4){ order:4 !important; }
  #colecciones .coleccion-card:nth-child(5){ order:5 !important; }
  #colecciones .coleccion-card:nth-child(6){ order:6 !important; }
  #colecciones .coleccion-card:nth-child(7){ order:7 !important; }
  #colecciones .coleccion-card:nth-child(8){ order:8 !important; }

  /* Tercera fila: Almohadas + Frazadas */
  #colecciones .coleccion-card:nth-child(9){
    order:9 !important;
    grid-column:span 2 !important;
  }

  #colecciones .coleccion-card:nth-child(10){
    order:10 !important;
    grid-column:span 2 !important;
  }

  /* Corregir esquinas exteriores tras el cambio de orden */
  #colecciones .coleccion-card{
    border-radius:0 !important;
  }

  #colecciones .coleccion-card:nth-child(2){
    border-top-left-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(4){
    border-top-right-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(9){
    border-bottom-left-radius:17px !important;
  }

  #colecciones .coleccion-card:nth-child(10){
    border-bottom-right-radius:17px !important;
  }
}


/* =========================================================
   CORRECCIÓN: ALMOHADAS NO SE MUEVE.
   SOLO FRAZADAS VA A SU DERECHA Y OCUPA UN CUADRO.
   ========================================================= */
@media(min-width:701px){

  /* Almohadas conserva su posición/tamaño normal */
  #colecciones .coleccion-card:nth-child(9){
    order:9 !important;
    grid-column:span 1 !important;
    width:auto !important;
    height:100% !important;
    aspect-ratio:auto !important;
  }

  /* Frazadas: inmediatamente a la derecha, un solo cuadrito */
  #colecciones .coleccion-card:nth-child(10){
    order:10 !important;
    grid-column:span 1 !important;
    width:auto !important;
    height:100% !important;
    aspect-ratio:auto !important;
  }

  /* Ya no son esquinas inferiores forzadas de un bloque ancho */
  #colecciones .coleccion-card:nth-child(9),
  #colecciones .coleccion-card:nth-child(10){
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }
}


/* =========================================================
   AJUSTE FINAL PC
   Frazadas ocupa los 2 espacios restantes horizontalmente.
   Almohadas y todo lo demás permanecen exactamente igual.
   ========================================================= */
@media(min-width:701px){

  #colecciones .coleccion-card:nth-child(10){
    order:10 !important;
    grid-column:span 2 !important;
    width:auto !important;
    height:100% !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    border-bottom-right-radius:17px !important;
  }

}


/* =========================================================
   BLANCOS LOLITA — ACABADO VISUAL BASADO EN LA REFERENCIA
   Mantiene la estructura y funcionamiento existentes.
   ========================================================= */

#colecciones{
  max-width:1500px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#colecciones .header{
  text-align:center !important;
  padding:38px 16px 28px !important;
}
#colecciones .header h2{
  margin:0 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(32px,4vw,54px) !important;
  font-weight:400 !important;
  letter-spacing:-.6px !important;
  color:#363330 !important;
}
#colecciones .header p{
  margin:9px 0 0 !important;
  color:#817b75 !important;
  font-size:clamp(13px,1.3vw,18px) !important;
}

/* Marco general del mosaico */
#colecciones .colecciones-grid{
  background:#8491A2 !important;
  padding:6px !important;
  gap:3px !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 14px 34px rgba(57,62,70,.10) !important;
}

/* Tarjetas */
#colecciones .coleccion-card{
  position:relative !important;
  overflow:hidden !important;
  background:#8491A2 !important;
  isolation:isolate;
}
#colecciones .coleccion-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(20,24,28,.01) 22%,
    rgba(20,24,28,.12) 50%,
    rgba(20,24,28,.68) 100%
  );
  pointer-events:none;
}
#colecciones .coleccion-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events:none;
}
#colecciones .coleccion-card img{
  z-index:0 !important;
  transition:transform .35s ease,filter .35s ease !important;
}
#colecciones .coleccion-card:hover img{
  transform:scale(1.025) !important;
  filter:saturate(.94) contrast(1.02) !important;
}

/* Texto e icono perfectamente centrados */
#colecciones .coleccion-card .coleccion-card-label{
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
  padding:20px 10px 18px !important;
  text-align:center !important;
  color:#fff !important;
  pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.48) !important;
}
#colecciones .coleccion-card .coleccion-card-label b{
  display:block;
  max-width:95%;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(15px,1.45vw,23px) !important;
  line-height:1.08 !important;
  font-weight:400 !important;
  letter-spacing:.05px !important;
  color:#fff !important;
}
#colecciones .coleccion-card-icono{
  display:grid !important;
  place-items:center !important;
  width:38px !important;
  height:38px !important;
  color:#fff !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.30));
}
#colecciones .coleccion-card-icono svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#colecciones .coleccion-card .coleccion-card-label em{
  display:block;
  width:30px;
  height:2px;
  margin-top:2px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* Footer: exactamente el mismo ancho visual que el mosaico */
.footer-lolita{
  box-sizing:border-box !important;
  width:calc(100% - 32px) !important;
  max-width:1500px !important;
  margin:22px auto 16px !important;
  padding:38px 38px 28px !important;
  border-radius:18px !important;
  background:#8491A2 !important;
  border:0 !important;
  box-shadow:0 14px 34px rgba(57,62,70,.12) !important;
}
.footer-lolita-inner{
  max-width:none !important;
  width:100% !important;
}
.footer-lolita-brand p,
.footer-lolita-meta{
  color:rgba(255,255,255,.78) !important;
}
.footer-lolita-links a,
.footer-lolita-links button{
  color:#fff !important;
}
.footer-lolita-logo{
  filter:brightness(0) invert(1);
  opacity:.96 !important;
}

/* En móvil: misma lectura, sin cubrir demasiado la imagen */
@media(max-width:700px){
  #colecciones .header{
    padding:28px 12px 20px !important;
  }
  #colecciones .colecciones-grid{
    padding:3px !important;
    gap:2px !important;
    border-radius:14px !important;
  }
  #colecciones .coleccion-card .coleccion-card-label{
    padding:12px 6px 11px !important;
    gap:4px !important;
  }
  #colecciones .coleccion-card-icono{
    width:27px !important;
    height:27px !important;
  }
  #colecciones .coleccion-card .coleccion-card-label b{
    font-size:14px !important;
  }
  #colecciones .coleccion-card .coleccion-card-label em{
    width:22px;
  }
  .footer-lolita{
    width:calc(100% - 16px) !important;
    margin:16px auto 8px !important;
    padding:28px 20px 20px !important;
    border-radius:14px !important;
  }
}

/* =========================================================
   CORRECCIÓN DE CENTRADO — ICONOS Y TEXTOS DE CATEGORÍAS
   El conjunto completo queda centrado dentro de cada tile.
   ========================================================= */
#colecciones .coleccion-card .coleccion-card-label{
  box-sizing:border-box !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  padding:12px !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  transform:none !important;
  overflow:visible !important;
}
#colecciones .coleccion-card .coleccion-card-label b{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 4px !important;
  box-sizing:border-box !important;
  text-align:center !important;
  overflow:visible !important;
  white-space:normal !important;
  word-break:normal !important;
}
#colecciones .coleccion-card-icono{
  flex:0 0 auto !important;
  margin:0 auto !important;
  overflow:visible !important;
}
#colecciones .coleccion-card-icono svg{
  display:block !important;
  overflow:visible !important;
}
#colecciones .coleccion-card .coleccion-card-label em{
  flex:0 0 auto !important;
  margin:2px auto 0 !important;
}

@media(max-width:700px){
  #colecciones .coleccion-card .coleccion-card-label{
    padding:8px !important;
    gap:5px !important;
  }
  #colecciones .coleccion-card .coleccion-card-label b{
    font-size:13px !important;
    line-height:1.05 !important;
  }
}


/* =========================================================
   MODAL DE PRODUCTO
   ========================================================= */

body.modal-producto-abierto{
  overflow:hidden;
}

.detalle-modal{
  position:fixed;
  inset:0;
  z-index:5000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:28px;

  background:rgba(36,32,29,.34);

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.detalle-modal.oculto{
  display:none !important;
}

.detalle-modal-card{
  position:relative;

  width:min(1120px, 100%);
  max-height:90vh;

  overflow:auto;
  overscroll-behavior:contain;

  padding:26px;

  border:1px solid rgba(132,145,162,.20);
  border-radius:22px;

  background:#fbf8f4;

  box-shadow:
    0 26px 80px rgba(35,29,24,.24);

  animation:detalleModalEntrada .20s ease-out;
}

@keyframes detalleModalEntrada{
  from{
    opacity:0;
    transform:translateY(10px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.detalle-modal-cerrar{
  position:sticky;
  top:0;
  float:right;
  z-index:20;

  display:grid;
  place-items:center;

  width:42px;
  height:42px;

  margin:0 0 -42px auto;

  border:1px solid rgba(132,145,162,.28);
  border-radius:50%;

  background:rgba(251,248,244,.92);
  color:#4f5967;

  font-size:26px;
  font-weight:300;
  line-height:1;

  cursor:pointer;

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.detalle-modal-cerrar:hover{
  transform:scale(1.05);
  background:#fff;
  border-color:#8491A2;
}

.detalle-modal .detalle-layout{
  grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);
  gap:42px;

  margin-top:0;
}

.detalle-modal .detalle-imagen-wrap{
  position:relative;
  top:auto;

  overflow:hidden;

  border-radius:18px;
  background:#efede9;
}

.detalle-modal .detalle-imagen{
  min-height:480px;
  max-height:650px;

  border-radius:18px;

  object-fit:cover;
}

.detalle-modal .detalle-contenido{
  padding:18px 8px 14px 0;
}

.detalle-modal .detalle-titulo{
  padding-right:48px;
  font-size:clamp(34px,3vw,46px);
}

.detalle-modal .detalle-selector{
  border-radius:10px;
}

.detalle-modal .detalle-whatsapp{
  border-radius:12px;
  background:#8491A2;
}

.detalle-modal .detalle-whatsapp:hover{
  opacity:1;
  background:#738195;
}

.detalle-modal .detalle-acordeon{
  border-color:rgba(132,145,162,.20);
}


/* Tablet */
@media(max-width:900px){

  .detalle-modal{
    padding:18px;
  }

  .detalle-modal-card{
    max-height:92vh;
    padding:20px;
    border-radius:18px;
  }

  .detalle-modal .detalle-layout{
    grid-template-columns:1fr;
    gap:20px;
  }

  .detalle-modal .detalle-imagen{
    min-height:360px;
    max-height:520px;
  }

}


/* Móvil */
@media(max-width:700px){

  .detalle-modal{
    align-items:flex-end;

    padding:8px;

    background:rgba(36,32,29,.30);
  }

  .detalle-modal-card{
    width:100%;
    max-height:94vh;

    padding:14px;

    border-radius:20px 20px 14px 14px;
  }

  .detalle-modal-cerrar{
    width:40px;
    height:40px;

    font-size:24px;
  }

  .detalle-modal .detalle-layout{
    gap:14px;
  }

  .detalle-modal .detalle-imagen{
    min-height:280px;
    max-height:390px;

    border-radius:14px;
  }

  .detalle-modal .detalle-imagen-wrap{
    border-radius:14px;
  }

  .detalle-modal .detalle-contenido{
    padding:4px 2px 8px;
  }

  .detalle-modal .detalle-familia{
    margin-bottom:8px;
  }

  .detalle-modal .detalle-titulo{
    padding-right:42px;

    font-size:30px;
  }

  .detalle-modal .detalle-whatsapp{
    position:sticky;
    bottom:0;

    z-index:10;

    box-shadow:
      0 -8px 24px rgba(251,248,244,.88),
      0 6px 18px rgba(132,145,162,.18);
  }

}


/* =========================================================
   CARRITO FLOTANTE
   ========================================================= */

.carrito-flotante{
  position:fixed;
  left:50%;
  bottom:0;
  z-index:4200;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-width:172px;
  min-height:52px;

  padding:8px 19px 10px;

  transform:translateX(-50%);

  border:1px solid rgba(255,255,255,.55);
  border-bottom:0;
  border-radius:26px 26px 0 0;

  background:#8491A2;
  color:#fff;

  box-shadow:
    0 -8px 26px rgba(74,85,101,.18),
    inset 0 1px 0 rgba(255,255,255,.24);

  cursor:pointer;

  transition:
    transform .20s ease,
    background .20s ease,
    min-width .20s ease;
}

.carrito-flotante:hover{
  background:#758296;
  transform:translateX(-50%) translateY(-2px);
}

.carrito-flotante-icono{
  display:grid;
  place-items:center;

  width:24px;
  height:24px;
}

.carrito-flotante-icono svg{
  width:22px;
  height:22px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.carrito-flotante-texto{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.carrito-contador{
  display:grid;
  place-items:center;

  min-width:22px;
  height:22px;

  padding:0 6px;

  border-radius:999px;

  background:#fff;
  color:#667386;

  font-size:11px;
  font-weight:800;
}

.carrito-contador:not(.visible){
  display:none;
}

@keyframes carritoPulso{
  0%{
    transform:translateX(-50%) scale(1);
  }
  50%{
    transform:translateX(-50%) scale(1.08);
  }
  100%{
    transform:translateX(-50%) scale(1);
  }
}

.carrito-flotante.carrito-pulso{
  animation:carritoPulso .42s ease;
}


/* =========================================================
   BOTÓN AÑADIR EN MODAL
   ========================================================= */

.detalle-agregar-carrito{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:52px;

  margin:20px 0 8px;
  padding:0 20px;

  border:1px solid #8491A2;
  border-radius:12px;

  background:#8491A2;
  color:#fff;

  font:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;

  cursor:pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.detalle-agregar-carrito:hover{
  background:#738195;
  border-color:#738195;
  transform:translateY(-1px);
}

.detalle-carrito-feedback{
  min-height:18px;

  margin:0 0 4px;

  color:#667386;

  font-size:12px;
  font-weight:600;
  text-align:center;

  opacity:0;
  transform:translateY(-3px);

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.detalle-carrito-feedback.visible{
  opacity:1;
  transform:translateY(0);
}


/* =========================================================
   PANEL / BOTTOM SHEET
   ========================================================= */

body.carrito-abierto{
  overflow:hidden;
}

.carrito-overlay{
  position:fixed;
  inset:0;
  z-index:6000;

  display:flex;
  align-items:flex-end;
  justify-content:center;

  background:rgba(35,31,28,0);

  transition:background .22s ease;
}

.carrito-overlay.oculto{
  display:none !important;
}

.carrito-overlay.abierto{
  background:rgba(35,31,28,.34);
}

.carrito-panel{
  width:min(760px, calc(100% - 24px));
  max-height:min(82vh, 820px);

  overflow:hidden;

  transform:translateY(102%);

  border:1px solid rgba(132,145,162,.20);
  border-bottom:0;
  border-radius:26px 26px 0 0;

  background:#fbf8f4;

  box-shadow:
    0 -22px 70px rgba(35,29,24,.22);

  transition:transform .26s cubic-bezier(.2,.75,.2,1);
}

.carrito-overlay.abierto .carrito-panel{
  transform:translateY(0);
}

.carrito-handle{
  width:42px;
  height:4px;

  margin:10px auto 0;

  border-radius:999px;

  background:rgba(132,145,162,.42);
}

.carrito-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;

  padding:16px 24px 18px;

  border-bottom:1px solid rgba(132,145,162,.16);
}

.carrito-kicker{
  display:block;

  margin-bottom:4px;

  color:#8491A2;

  font-size:9px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.carrito-header h2{
  margin:0;

  font-family:Georgia,"Times New Roman",serif;
  font-size:32px;
  font-weight:400;
  color:#332e2a;
}

.carrito-cerrar{
  display:grid;
  place-items:center;

  width:40px;
  height:40px;

  border:1px solid rgba(132,145,162,.22);
  border-radius:50%;

  background:#fff;
  color:#657184;

  font-size:25px;

  cursor:pointer;
}

.carrito-lista{
  max-height:48vh;
  overflow:auto;

  padding:8px 24px;
}

.carrito-item{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:14px;

  padding:16px 0;

  border-bottom:1px solid rgba(132,145,162,.14);
}

.carrito-item:last-child{
  border-bottom:0;
}

.carrito-item-imagen{
  width:96px;
  height:96px;

  object-fit:cover;

  border-radius:13px;

  background:#efebe6;
}

.carrito-item-info{
  min-width:0;
}

.carrito-item-cabecera{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.carrito-item h3{
  margin:1px 0 0;

  color:#38322d;

  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  font-weight:400;
  line-height:1.2;
}

.carrito-item-eliminar{
  flex:0 0 auto;

  width:28px;
  height:28px;

  border:0;
  background:transparent;
  color:#98918b;

  font-size:22px;

  cursor:pointer;
}

.carrito-item-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 9px;

  margin-top:7px;

  color:#85807a;

  font-size:10px;
  letter-spacing:.2px;
}

.carrito-item-meta span:not(:last-child)::after{
  content:"·";
  margin-left:9px;
}

.carrito-item-pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  margin-top:13px;
}

.carrito-item-pie strong{
  color:#423b35;

  font-size:15px;
}

.carrito-cantidad{
  display:inline-grid;
  grid-template-columns:32px 34px 32px;
  align-items:center;

  overflow:hidden;

  border:1px solid rgba(132,145,162,.24);
  border-radius:999px;

  background:#fff;
}

.carrito-cantidad button{
  height:32px;

  border:0;

  background:transparent;
  color:#687587;

  font-size:18px;

  cursor:pointer;
}

.carrito-cantidad span{
  text-align:center;

  color:#4c4742;

  font-size:12px;
  font-weight:700;
}

.carrito-resumen{
  padding:18px 24px 24px;

  border-top:1px solid rgba(132,145,162,.16);

  background:rgba(255,255,255,.48);
}

.carrito-total-linea{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:16px;
}

.carrito-total-linea span{
  color:#6f6963;

  font-size:13px;
}

.carrito-total-linea strong{
  color:#342f2a;

  font-family:Georgia,"Times New Roman",serif;
  font-size:26px;
  font-weight:400;
}

.carrito-whatsapp{
  width:100%;
  min-height:52px;

  border:0;
  border-radius:12px;

  background:#8491A2;
  color:#fff;

  font:inherit;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;

  cursor:pointer;
}

.carrito-whatsapp:hover{
  background:#738195;
}

.carrito-whatsapp:disabled{
  opacity:.42;
  cursor:not-allowed;
}

.carrito-vaciar{
  display:block;

  margin:13px auto 0;
  padding:5px 8px;

  border:0;

  background:transparent;
  color:#908a84;

  font:inherit;
  font-size:10px;
  letter-spacing:.8px;
  text-transform:uppercase;

  cursor:pointer;
}

.carrito-vacio{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  min-height:260px;

  padding:35px 20px;

  text-align:center;
}

.carrito-vacio-icono{
  display:grid;
  place-items:center;

  width:54px;
  height:54px;

  margin-bottom:13px;

  border:1px solid rgba(132,145,162,.24);
  border-radius:50%;

  color:#8491A2;

  font-size:24px;
}

.carrito-vacio strong{
  color:#48413b;

  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  font-weight:400;
}

.carrito-vacio p{
  max-width:280px;

  margin:8px 0 0;

  color:#918a84;

  font-size:12px;
  line-height:1.5;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media(max-width:700px){

  .carrito-flotante{
    min-width:154px;
    min-height:48px;

    padding:7px 16px 9px;

    border-radius:24px 24px 0 0;
  }

  .carrito-flotante-texto{
    font-size:10px;
  }

  .carrito-panel{
    width:calc(100% - 8px);
    max-height:91vh;

    border-radius:22px 22px 0 0;
  }

  .carrito-header{
    padding:13px 16px 14px;
  }

  .carrito-header h2{
    font-size:28px;
  }

  .carrito-lista{
    max-height:56vh;

    padding:4px 16px;
  }

  .carrito-item{
    grid-template-columns:78px 1fr;

    gap:11px;

    padding:13px 0;
  }

  .carrito-item-imagen{
    width:78px;
    height:78px;

    border-radius:11px;
  }

  .carrito-item h3{
    font-size:15px;
  }

  .carrito-item-meta{
    margin-top:5px;

    font-size:9px;
  }

  .carrito-item-pie{
    margin-top:9px;
  }

  .carrito-resumen{
    padding:15px 16px 18px;
  }

  .carrito-total-linea{
    margin-bottom:12px;
  }

  .detalle-modal .detalle-whatsapp{
    position:static !important;
    box-shadow:none !important;
  }

}



/* =========================================================
   LOGO / HEADER EN CATEGORÍAS — ESTÁTICO, NO STICKY
   La portada principal conserva su comportamiento actual.
   ========================================================= */

/* Cuando se muestra la pantalla de productos, el header/logo
   debe permanecer en el flujo normal del documento y subir
   naturalmente al hacer scroll. */
body:has(#productos:not(.oculto)) .topbar,
body:has(#detalle-producto:not(.oculto)) .topbar{
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;

  transform:none !important;

  z-index:auto !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  box-shadow:none !important;
}

/* Si alguna regla previa convierte el logo en fixed/sticky,
   se neutraliza únicamente fuera de la pantalla principal. */
body:has(#productos:not(.oculto)) .top-logo,
body:has(#detalle-producto:not(.oculto)) .top-logo,
body:has(#productos:not(.oculto)) .top-logo-fallback,
body:has(#detalle-producto:not(.oculto)) .top-logo-fallback{
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;

  transform:none !important;
}

/* Evita reservar un espacio extra pensado para headers sticky. */
body:has(#productos:not(.oculto)) #productos,
body:has(#detalle-producto:not(.oculto)) #detalle-producto{
  scroll-margin-top:0 !important;
}



/* =========================================================
   HEADER COMPACTO EN CATEGORÍAS
   Logo y "Volver" comparten la misma franja visual.
   ========================================================= */

body:has(#productos:not(.oculto)) .topbar{
  position:absolute !important;
  top:18px !important;
  left:50% !important;
  right:auto !important;
  width:auto !important;
  height:auto !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  padding:0 !important;
  z-index:20 !important;
}

body:has(#productos:not(.oculto)) #productos{
  position:relative;
  padding-top:18px !important;
}

/* El botón Volver queda en la misma línea que el logo */
body:has(#productos:not(.oculto)) #productos > .volver{
  display:flex !important;
  align-items:center !important;
  min-height:54px !important;
  margin:0 0 16px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* Eliminamos cualquier reserva vertical heredada del header anterior */
body:has(#productos:not(.oculto)) .pantalla{
  margin-top:0 !important;
}

@media(max-width:700px){

  body:has(#productos:not(.oculto)) .topbar{
    top:12px !important;
  }

  body:has(#productos:not(.oculto)) #productos{
    padding-top:12px !important;
  }

  body:has(#productos:not(.oculto)) #productos > .volver{
    min-height:48px !important;
    margin-bottom:12px !important;
  }

}



/* =========================================================
   CARDS — BOTÓN SIEMPRE AL FONDO
   ========================================================= */

.card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}

.card .info{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}

.card .meta{
  flex:0 0 auto;
}

/* Empuja el CTA al fondo aunque falte contenido */
.card .btn{
  margin-top:auto !important;
}

/* Un poco de aire antes del botón para que no quede pegado */
.card .meta + .btn,
.card .colores-producto + .btn,
.card .tamanos-card + .btn{
  padding-top:10px;
}

/* =========================================================
   MODAL — INFORMACIÓN MÁS EQUILIBRADA
   ========================================================= */

/* Ocultar tiempo de entrega si quedó algún residuo */
#detalle-entrega-bloque,
.detalle-entrega,
[data-detalle="tiempo-entrega"]{
  display:none !important;
}

/* Rejilla de acordeones: 2 columnas en escritorio */
.detalle-modal .detalle-acordeones{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:22px !important;
}

/* Cada bloque ocupa su propia tarjeta */
.detalle-modal .detalle-acordeon{
  margin:0 !important;
  align-self:start !important;
}

/* Descripción puede ocupar ancho completo si existe */
.detalle-modal #detalle-descripcion-bloque{
  grid-column:1 / -1 !important;
}

/* Lavado y piezas incluidas quedan uno junto al otro */
.detalle-modal #detalle-lavado-bloque,
.detalle-modal #detalle-piezas-bloque{
  grid-column:auto !important;
}

/* Si solo queda un bloque en la última fila, ocupa las dos columnas */
.detalle-modal .detalle-acordeon:last-child:nth-child(odd){
  grid-column:1 / -1;
}

/* Ajuste de contenido para que el lado derecho no crezca tanto */
.detalle-modal .detalle-contenido{
  display:flex;
  flex-direction:column;
}

/* En escritorio, los acordeones se sienten como parte de la ficha
   y no como una lista interminable */
@media(min-width:901px){

  .detalle-modal-card{
    padding-bottom:24px !important;
  }

  .detalle-modal .detalle-acordeones{
    width:100%;
  }

}

/* Tablet/móvil: volvemos a una columna para legibilidad */
@media(max-width:900px){

  .detalle-modal .detalle-acordeones{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .detalle-modal #detalle-descripcion-bloque,
  .detalle-modal #detalle-lavado-bloque,
  .detalle-modal #detalle-piezas-bloque{
    grid-column:1 !important;
  }

}



@media(min-width:701px){
  #grid-productos .card .info{
    min-height:260px;
  }
}

@media(max-width:700px){
  #grid-productos .card .info{
    min-height:0;
  }
}



/* =========================================================
   ACCIONES COMPACTAS EN CARDS
   ========================================================= */

.card .card-acciones{
  display:grid;
  grid-template-columns:minmax(0,1fr) 40px;
  gap:7px;
  align-items:stretch;

  margin-top:auto !important;
  padding-top:10px;
}

.card .card-acciones .btn{
  margin-top:0 !important;
}

.card .card-info-btn{
  min-height:40px !important;
  height:40px !important;
  padding:0 10px !important;

  display:flex !important;
  align-items:center;
  justify-content:center;

  border-radius:9px !important;

  font-size:9px !important;
  line-height:1 !important;
  letter-spacing:.65px !important;
}

.card-carrito-btn{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  padding:0;

  border:1px solid #8491A2;
  border-radius:9px;

  background:#8491A2;
  color:#fff;

  cursor:pointer;

  transition:
    background .18s ease,
    transform .18s ease;
}

.card-carrito-btn:hover{
  background:#738195;
  transform:translateY(-1px);
}

.card-carrito-btn svg{
  width:20px;
  height:20px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:700px){

  .card .card-acciones{
    grid-template-columns:minmax(0,1fr) 36px;
    gap:6px;
    padding-top:8px;
  }

  .card .card-info-btn{
    min-height:36px !important;
    height:36px !important;
    padding:0 7px !important;

    font-size:8px !important;
    letter-spacing:.4px !important;
  }

  .card-carrito-btn{
    width:36px;
    height:36px;

    border-radius:8px;
  }

  .card-carrito-btn svg{
    width:18px;
    height:18px;
  }

}



/* =========================================================
   CARDS — SOLO SOLICITAR INFORMACIÓN
   Colores únicamente informativos, sin selección.
   ========================================================= */

.card .card-acciones{
  display:block !important;
}

.card .card-info-btn{
  width:100% !important;
}

.card .color-circulo,
.card .color-circulo-vista{
  pointer-events:none !important;
  cursor:default !important;
}

/* El botón de carrito de card queda deshabilitado/eliminado.
   El carrito flotante y el botón dentro del modal siguen intactos. */
.card-carrito-btn{
  display:none !important;
}



/* =========================================================
   MODAL — PRODUCTOS CON UNA SOLA FOTO
   La información complementaria aprovecha la columna izquierda.
   ========================================================= */

@media(min-width:901px){

  .detalle-modal .detalle-imagen-wrap{
    align-self:start;
  }

  .detalle-modal .detalle-imagen-wrap
  > .detalle-acordeones.acordeones-bajo-imagen{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;

    width:100% !important;

    margin:14px 0 0 !important;
    padding:0 !important;
  }

  .detalle-modal .detalle-imagen-wrap
  > .detalle-acordeones.acordeones-bajo-imagen
  #detalle-descripcion-bloque{
    grid-column:1 / -1 !important;
  }

  .detalle-modal .detalle-imagen-wrap
  > .detalle-acordeones.acordeones-bajo-imagen
  #detalle-piezas-bloque,
  .detalle-modal .detalle-imagen-wrap
  > .detalle-acordeones.acordeones-bajo-imagen
  #detalle-lavado-bloque{
    grid-column:auto !important;
  }

  .detalle-modal .detalle-imagen-wrap
  > .detalle-acordeones.acordeones-bajo-imagen
  .detalle-acordeon{
    width:100% !important;
    margin:0 !important;

    background:rgba(255,253,251,.90) !important;
  }

}

/* En tablet/móvil nunca se meten debajo de la foto */
@media(max-width:900px){

  .detalle-modal .detalle-acordeones{
    width:100% !important;
  }

}



/* =========================================================
   AJUSTE FINAL CARDS — CTA MÁS FINO
   ========================================================= */

.card .card-acciones{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;

  width:100% !important;

  margin-top:auto !important;
  padding:12px 12px 2px !important;
  box-sizing:border-box !important;
}

.card .card-info-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:auto !important;
  min-width:0 !important;
  max-width:82% !important;

  height:34px !important;
  min-height:34px !important;

  margin:0 auto !important;
  padding:0 18px !important;

  border:1px solid rgba(132,145,162,.58) !important;
  border-radius:999px !important;

  background:rgba(255,255,255,.48) !important;
  color:#657184 !important;

  font-size:9px !important;
  font-weight:650 !important;
  letter-spacing:.8px !important;
  line-height:1 !important;

  white-space:nowrap !important;

  box-shadow:none !important;
}

.card .card-info-btn:hover{
  background:#8491A2 !important;
  border-color:#8491A2 !important;
  color:#fff !important;
}

@media(max-width:700px){

  .card .card-acciones{
    padding:10px 8px 1px !important;
  }

  .card .card-info-btn{
    max-width:86% !important;

    height:32px !important;
    min-height:32px !important;

    padding:0 12px !important;

    font-size:7.7px !important;
    letter-spacing:.5px !important;
  }

}


/* =========================================================
   MODAL — INFO DEBAJO DE LA FOTO, FUERA DEL CARD DE IMAGEN
   ========================================================= */

.detalle-modal .detalle-columna-izquierda{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.detalle-modal .detalle-imagen-wrap{
  position:relative !important;
  overflow:hidden !important;

  border-radius:18px !important;
  background:#efede9 !important;
}

/* Zona separada del contenedor de la foto */
.detalle-modal .detalle-info-bajo-foto{
  display:none;

  width:100%;

  margin-top:14px;
}

.detalle-modal .detalle-info-bajo-foto.visible{
  display:block;
}

@media(min-width:901px){

  .detalle-modal .detalle-info-bajo-foto
  > .detalle-acordeones.acordeones-bajo-imagen{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;
  }

  .detalle-modal .detalle-info-bajo-foto
  > .detalle-acordeones.acordeones-bajo-imagen
  #detalle-descripcion-bloque{
    grid-column:1 / -1 !important;
  }

  .detalle-modal .detalle-info-bajo-foto
  > .detalle-acordeones.acordeones-bajo-imagen
  #detalle-piezas-bloque,
  .detalle-modal .detalle-info-bajo-foto
  > .detalle-acordeones.acordeones-bajo-imagen
  #detalle-lavado-bloque{
    grid-column:auto !important;
  }

  .detalle-modal .detalle-info-bajo-foto
  > .detalle-acordeones.acordeones-bajo-imagen
  .detalle-acordeon{
    margin:0 !important;

    border:1px solid rgba(132,145,162,.16) !important;
    border-radius:12px !important;

    background:#fffdfb !important;

    box-shadow:0 5px 16px rgba(48,39,32,.035) !important;
  }

}

/* En móvil/tablet siempre vuelven a la columna derecha */
@media(max-width:900px){

  .detalle-modal .detalle-info-bajo-foto{
    display:none !important;
  }

}



/* PORTADA — logo un poco más abajo; categorías intactas */
body:has(#menu:not(.oculto)) .topbar{
  top:44px !important;
}

@media(max-width:700px){
  body:has(#menu:not(.oculto)) .topbar{
    top:38px !important;
  }
}


/* =========================================================
   COJÍN CUADRADO — GALERÍA POR COLOR
   ========================================================= */

#detalle-producto .detalle-colores .color-circulo{
  cursor:pointer;
}

#detalle-producto .detalle-colores .color-circulo.seleccionado{
  outline:2px solid #8491A2 !important;
  outline-offset:3px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.95),
    0 3px 10px rgba(70,80,95,.12) !important;
}

#detalle-producto .detalle-miniaturas{
  transition:opacity .16s ease;
}



/* =========================================================
   COJÍN CUADRADO — CADA FOTO ES UN COLOR/VARIANTE
   ========================================================= */

.cojin-colores-visuales{
  margin-top:16px;
}

.cojin-colores-visuales .colores-titulo{
  display:block;

  margin-bottom:10px;

  color:#6f6964;

  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}

.cojin-colores-lista{
  display:flex;
  flex-wrap:wrap;
  gap:9px;

  max-width:100%;
}

.cojin-color-swatch{
  width:34px;
  height:34px;

  padding:2px;

  border:1px solid rgba(132,145,162,.38);
  border-radius:50%;

  background:#fff;

  cursor:pointer;

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.cojin-color-swatch:hover{
  transform:scale(1.08);
}

.cojin-color-swatch.seleccionado{
  border-color:#8491A2;

  box-shadow:
    0 0 0 2px #fbf8f4,
    0 0 0 4px #8491A2;
}

.cojin-color-swatch-muestra{
  display:block;

  width:100%;
  height:100%;

  border-radius:50%;

  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.cojin-color-seleccionado{
  margin-top:12px;

  color:#7e7771;

  font-size:10px;
}

.cojin-color-seleccionado strong{
  color:#504a45;
  font-weight:600;
}

@media(max-width:700px){

  .cojin-colores-lista{
    gap:8px;
  }

  .cojin-color-swatch{
    width:32px;
    height:32px;
  }

}



/* =========================================================
   COJÍN CUADRADO — SWATCHES COMO MUESTRAS DE TEXTURA
   ========================================================= */

.cojin-color-swatch{
  overflow:hidden;
}

.cojin-color-swatch-muestra{
  display:block;

  width:100%;
  height:100%;

  border-radius:50%;

  /* Zoom para que el círculo se lea como textura/tela,
     no como miniatura del cojín completo. */
  background-size:360% 360% !important;
  background-position:50% 50% !important;
  background-repeat:no-repeat !important;

  transform:scale(1.08);

  filter:
    saturate(.96)
    contrast(1.04);
}

/* Pequeño brillo interior para dar apariencia de muestra textil */
.cojin-color-swatch::after{
  content:"";
  position:absolute;
  inset:3px;

  border-radius:50%;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    inset 0 3px 8px rgba(255,255,255,.08);

  pointer-events:none;
}

.cojin-color-swatch.seleccionado .cojin-color-swatch-muestra{
  transform:scale(1.12);
}



/* =========================================================
   COJÍN CUADRADO / RECTANGULAR — SWATCHES EN CARDS
   ========================================================= */

.card .cojin-card-swatches{
  margin-top:8px;
}

.card .cojin-card-swatches-lista{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}

.card .cojin-card-swatch{
  position:relative;

  display:inline-block;

  width:22px;
  height:22px;

  padding:2px;

  border:1px solid rgba(132,145,162,.34);
  border-radius:50%;

  background:#fff;

  overflow:hidden;
}

.card .cojin-card-swatch-muestra{
  display:block;

  width:100%;
  height:100%;

  border-radius:50%;

  /* zoom fuerte = textura en vez de foto completa */
  background-size:360% 360%;
  background-position:50% 50%;
  background-repeat:no-repeat;

  transform:scale(1.08);

  filter:
    saturate(.96)
    contrast(1.04);
}

.card .cojin-card-swatches-mas{
  display:grid;
  place-items:center;

  min-width:24px;
  height:22px;

  padding:0 5px;

  border-radius:999px;

  background:rgba(132,145,162,.12);
  color:#667386;

  font-size:8px;
  font-weight:700;
}

@media(max-width:700px){

  .card .cojin-card-swatches-lista{
    gap:5px;
  }

  .card .cojin-card-swatch{
    width:20px;
    height:20px;
  }

  .card .cojin-card-swatches-mas{
    min-width:22px;
    height:20px;

    font-size:7px;
  }

}

/* =========================================================
   MODAL — TEXTURAS PARA CUADRADO Y RECTANGULAR
   ========================================================= */

.cojin-color-swatch-muestra{
  background-size:360% 360% !important;
  background-position:50% 50% !important;
  background-repeat:no-repeat !important;
}



/* =========================================================
   FIX DEFINITIVO — CÍRCULO GIGANTE EN MODAL DE COJINES
   ========================================================= */

#detalle-producto .cojin-colores-visuales{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}

#detalle-producto .cojin-colores-lista{
  position:relative !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:9px !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
}

/* Cada swatch tiene dimensiones cerradas e inamovibles */
#detalle-producto .cojin-color-swatch{
  position:relative !important;
  display:inline-block !important;
  flex:0 0 34px !important;

  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;

  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;

  aspect-ratio:1 / 1 !important;

  margin:0 !important;
  padding:2px !important;

  overflow:hidden !important;
  border-radius:50% !important;

  isolation:isolate !important;
  box-sizing:border-box !important;
}

/* La textura tampoco puede exceder el swatch */
#detalle-producto .cojin-color-swatch-muestra{
  position:absolute !important;
  inset:2px !important;

  display:block !important;

  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;

  border-radius:50% !important;

  background-size:360% 360% !important;
  background-position:50% 50% !important;
  background-repeat:no-repeat !important;

  transform:none !important;
  z-index:1 !important;
}

/* Eliminamos el pseudo-elemento que podía desbordarse.
   El borde seleccionado ya da suficiente acabado visual. */
#detalle-producto .cojin-color-swatch::before,
#detalle-producto .cojin-color-swatch::after,
#detalle-producto .cojin-colores-visuales::before,
#detalle-producto .cojin-colores-visuales::after,
#detalle-producto .cojin-colores-lista::before,
#detalle-producto .cojin-colores-lista::after{
  content:none !important;
  display:none !important;
}

/* El seleccionado conserva solo anillos exteriores controlados */
#detalle-producto .cojin-color-swatch.seleccionado{
  outline:2px solid #8491A2 !important;
  outline-offset:2px !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.95) !important;
}

@media(max-width:700px){

  #detalle-producto .cojin-color-swatch{
    flex-basis:32px !important;

    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;

    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }

}



/* =========================================================
   AVISO — COLOR SIN FOTOGRAFÍA
   ========================================================= */

.aviso-sin-imagen-color{
  position:absolute;
  left:50%;
  bottom:22px;
  z-index:8;

  transform:translateX(-50%);

  padding:10px 18px;

  border-radius:999px;

  background:rgba(132,145,162,.94);
  color:#fff;

  font-size:10px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  white-space:nowrap;

  box-shadow:0 6px 20px rgba(60,70,80,.15);

  pointer-events:none;
}

/* El contenedor de imagen necesita ser referencia del aviso */
.detalle-imagen-wrap,
.detalle-imagen-contenedor,
.detalle-galeria-principal{
  position:relative;
}

@media(max-width:700px){
  .aviso-sin-imagen-color{
    bottom:14px;
    padding:9px 14px;
    font-size:9px;
  }
}



/* =========================================================
   COBERTOR PELUCHE — MISMO SISTEMA VISUAL QUE COJINES
   ========================================================= */

#detalle-producto .cojin-colores-visuales{
  margin-top:16px;
}

#detalle-producto .cojin-color-swatch{
  cursor:pointer !important;
}

/* Las muestras de Cobertor Peluche usan el mismo zoom de textura */
#detalle-producto .cojin-color-swatch-muestra,
.card .cojin-card-swatch-muestra{
  background-size:360% 360% !important;
  background-position:50% 50% !important;
  background-repeat:no-repeat !important;
}

/* Estado sin imagen: el placeholder reemplaza por completo la imagen anterior */
#detalle-producto .detalle-imagen[src^="data:image/svg+xml"]{
  object-fit:cover !important;
  background:#f5f2ee !important;
}



/* Versión del proyecto debajo del logo del footer */
.footer-project-version{
  margin-top:7px;
  font-size:8px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.45px;
  color:rgba(255,255,255,.62);
  text-align:center;
  white-space:nowrap;
}

@media(max-width:700px){
  .footer-project-version{
    margin-top:6px;
    font-size:7px;
    letter-spacing:.3px;
  }
}


/* Acceso discreto al admin desde la versión del proyecto */
.footer-admin-link{display:inline-block;text-decoration:none;cursor:default;}
.footer-admin-link:hover{color:rgba(255,255,255,.86);}


/* =========================================================
   v0.93 — RENDERIZADO SUAVE DE IMÁGENES
   Reduce bordes dentados al escalar fotografías en cards,
   modales, miniaturas y panel de administración.
   ========================================================= */

img {
  image-rendering: auto !important;
  -ms-interpolation-mode: bicubic;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.product-card img,
.product-image,
.product-main-image,
.modal-product img,
.modal img,
.card img,
.preview-main-image,
.preview-thumbs img,
.image-admin-card > img,
.image-product-thumb,
.product-thumb,
.gallery img,
.gallery-image,
.thumbnail img,
.thumb img {
  image-rendering: auto !important;
  object-fit: cover;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Las miniaturas conservan suavizado aun cuando el navegador
   las reduce considerablemente. */
.preview-thumbs img,
.thumbnail img,
.thumb img,
.image-admin-card img {
  image-rendering: auto !important;
}

/* Evita que reglas antiguas de pixelado se apliquen a fotos. */
img:not(.pixel-art):not([data-pixel-art="true"]) {
  image-rendering: auto !important;
}



/* =========================================================
   V0.94 — BOTONES PRINCIPALES CON COLOR SECUNDARIO
   ========================================================= */

/* Botón principal "Ver colección" */
.hero-cta,
.ver-coleccion,
a[href="#colecciones"].hero-cta,
button.hero-cta{
  background:#8491A2 !important;
  color:#ffffff !important;
  border-color:#8491A2 !important;

  box-shadow:
    0 8px 22px rgba(94,108,126,.18) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.hero-cta:hover,
.ver-coleccion:hover,
a[href="#colecciones"].hero-cta:hover,
button.hero-cta:hover{
  background:#748195 !important;
  border-color:#748195 !important;
  color:#ffffff !important;
}

/* Barra de categorías del banner */
.hero-categoria{
  background:#8491A2 !important;
  color:#ffffff !important;
  border-color:#8491A2 !important;

  box-shadow:
    0 6px 18px rgba(94,108,126,.14) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.hero-categoria:hover{
  background:#748195 !important;
  border-color:#748195 !important;
  color:#ffffff !important;
}

.hero-categoria span,
.hero-categoria svg{
  color:#ffffff !important;
  stroke:#ffffff !important;
}

/* Mantener un poco de separación visual entre botones */
.hero-categorias{
  gap:8px !important;
}

@media(max-width:700px){
  .hero-categoria{
    min-height:44px;
  }
}



/* =========================================================
   V0.94 — TEXTO BLANCO EN BOTONES DEL HERO / BARRA
   ========================================================= */

.hero-cta,
.hero-cta *,
.ver-coleccion,
.ver-coleccion *,
.hero-categoria,
.hero-categoria *,
.hero-categorias a,
.hero-categorias a *,
.hero-categorias button,
.hero-categorias button *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

.hero-cta svg,
.ver-coleccion svg,
.hero-categoria svg,
.hero-categorias svg{
  stroke:#ffffff !important;
  fill:none;
}

/* Mantener el texto blanco también al pasar el cursor */
.hero-cta:hover,
.hero-cta:hover *,
.ver-coleccion:hover,
.ver-coleccion:hover *,
.hero-categoria:hover,
.hero-categoria:hover *,
.hero-categorias a:hover,
.hero-categorias a:hover *,
.hero-categorias button:hover,
.hero-categorias button:hover *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}



/* =========================================================
   V0.94 — TEXTO BLANCO LIMPIO, SIN BRILLO NI SOMBRA
   ========================================================= */

.hero-cta,
.hero-cta *,
.ver-coleccion,
.ver-coleccion *,
.hero-categoria,
.hero-categoria *,
.hero-categorias a,
.hero-categorias a *,
.hero-categorias button,
.hero-categorias button *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;

  text-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

.hero-cta::before,
.hero-cta::after,
.ver-coleccion::before,
.ver-coleccion::after,
.hero-categoria::before,
.hero-categoria::after,
.hero-categorias a::before,
.hero-categorias a::after,
.hero-categorias button::before,
.hero-categorias button::after{
  text-shadow:none !important;
  filter:none !important;
}

/* También durante hover/focus */
.hero-cta:hover,
.hero-cta:hover *,
.hero-cta:focus,
.hero-cta:focus *,
.ver-coleccion:hover,
.ver-coleccion:hover *,
.ver-coleccion:focus,
.ver-coleccion:focus *,
.hero-categoria:hover,
.hero-categoria:hover *,
.hero-categoria:focus,
.hero-categoria:focus *,
.hero-categorias a:hover,
.hero-categorias a:hover *,
.hero-categorias button:hover,
.hero-categorias button:hover *{
  text-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}



/* =========================================================
   V0.94 — CORRECCIÓN DEFINITIVA: TEXTO NÍTIDO SIN AURA
   ========================================================= */

.hero-cta,
.hero-cta *,
.ver-coleccion,
.ver-coleccion *,
.hero-categoria,
.hero-categoria *,
.hero-categorias a,
.hero-categorias a *,
.hero-categorias button,
.hero-categorias button * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  text-stroke: 0 transparent !important;

  filter: none !important;
  -webkit-filter: none !important;

  box-shadow: none;
}

/* El fondo del botón conserva el color secundario y su sombra exterior,
   pero la sombra NO se aplica al texto. */
.hero-cta,
.ver-coleccion,
.hero-categoria,
.hero-categorias a,
.hero-categorias button {
  background: #8491A2 !important;
  border-color: #8491A2 !important;
  color: #fff !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Neutraliza pseudo-elementos que pudieran duplicar o iluminar el texto. */
.hero-cta::before,
.hero-cta::after,
.ver-coleccion::before,
.ver-coleccion::after,
.hero-categoria::before,
.hero-categoria::after,
.hero-categorias a::before,
.hero-categorias a::after,
.hero-categorias button::before,
.hero-categorias button::after {
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Mismo tratamiento en hover/focus/active */
.hero-cta:hover,
.hero-cta:focus,
.hero-cta:active,
.ver-coleccion:hover,
.ver-coleccion:focus,
.ver-coleccion:active,
.hero-categoria:hover,
.hero-categoria:focus,
.hero-categoria:active,
.hero-categorias a:hover,
.hero-categorias a:focus,
.hero-categorias a:active,
.hero-categorias button:hover,
.hero-categorias button:focus,
.hero-categorias button:active {
  background: #748195 !important;
  color: #fff !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.hero-cta:hover *,
.hero-cta:focus *,
.hero-cta:active *,
.ver-coleccion:hover *,
.ver-coleccion:focus *,
.ver-coleccion:active *,
.hero-categoria:hover *,
.hero-categoria:focus *,
.hero-categoria:active *,
.hero-categorias a:hover *,
.hero-categorias a:focus *,
.hero-categorias a:active *,
.hero-categorias button:hover *,
.hero-categorias button:focus *,
.hero-categorias button:active * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  filter: none !important;
  -webkit-filter: none !important;
}



/* =========================================================
   v0.97 · Observaciones de catálogo y facilidad de uso
   ========================================================= */

/* Cabecera fija y muy clara dentro del producto */
.detalle-modal-nav{
  position:sticky;
  top:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:-26px -26px 12px;
  padding:12px 14px;
  background:rgba(250,248,245,.97);
  border-bottom:1px solid rgba(132,145,162,.16);
  backdrop-filter:blur(9px);
}

.detalle-volver-productos{
  min-height:44px;
  padding:0 15px;
  border:1px solid rgba(132,145,162,.28);
  border-radius:999px;
  background:#fff;
  color:#596577;
  font:inherit;
  font-size:11px;
  font-weight:750;
  cursor:pointer;
}

.detalle-modal-nav .detalle-modal-cerrar{
  position:static !important;
  flex:0 0 44px;
  width:44px !important;
  height:44px !important;
  min-width:44px;
  min-height:44px;
  border-radius:50% !important;
  background:#8491A2 !important;
  color:#fff !important;
  font-size:25px !important;
  line-height:1 !important;
  box-shadow:none !important;
}

/* Medidas: más visibles porque son un diferenciador del negocio */
.detalle-compra-seccion{
  padding:14px;
  border:1px solid rgba(132,145,162,.18);
  border-radius:12px;
  background:rgba(132,145,162,.055);
}

.detalle-compra-seccion .detalle-label{
  display:block;
  margin-bottom:8px;
  color:#4f5d6d;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.7px;
  text-transform:uppercase;
}

.detalle-compra-seccion .detalle-selector{
  min-height:50px !important;
  font-size:14px !important;
  font-weight:650;
  background:#fff !important;
}

/* Confirmación de carrito mucho más visible */
.detalle-carrito-feedback{
  min-height:0 !important;
  margin:8px 0 10px !important;
  padding:0 !important;
  border-radius:12px;
  font-size:13px !important;
  line-height:1.45;
  opacity:0;
  overflow:hidden;
}
.detalle-carrito-feedback.visible{
  padding:13px 15px !important;
  background:#eef2ed;
  border:1px solid rgba(100,126,103,.18);
  color:#526557 !important;
  opacity:1;
}

/* Carrito más visible permanentemente */
.carrito-flotante{
  min-width:205px !important;
  min-height:58px !important;
  padding-left:22px !important;
  padding-right:22px !important;
}
.carrito-flotante-texto{
  font-size:12px !important;
}

/* Recordatorio no invasivo */
.recordatorio-carrito{
  position:fixed;
  left:50%;
  bottom:72px;
  z-index:4190;
  max-width:min(92vw,420px);
  padding:0 16px;
  border-radius:13px;
  background:#fff;
  color:#59616a;
  box-shadow:0 12px 38px rgba(50,57,65,.16);
  border:1px solid rgba(132,145,162,.18);
  font-size:12px;
  line-height:1.45;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,10px);
  transition:.2s ease;
}
.recordatorio-carrito.visible{
  padding-top:13px;
  padding-bottom:13px;
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.recordatorio-carrito button{
  margin-left:8px;
  border:0;
  background:transparent;
  color:#667386;
  font:inherit;
  font-weight:800;
  text-decoration:underline;
  cursor:pointer;
}

@media(max-width:700px){
  .detalle-modal-nav{
    margin:-14px -14px 10px;
    padding:10px 10px;
  }
  .detalle-volver-productos{
    min-height:44px;
    font-size:10px;
  }
  .carrito-flotante{
    min-width:190px !important;
    min-height:56px !important;
  }
}



/* =========================================================
   v1.00 · Ajuste puntual del botón VER COLECCIÓN
   - centrado
   - totalmente opaco
   - sin transparencias, brillos, glow ni reflejos
   ========================================================= */

.hero .hero-cta,
.hero .hero-btn,
.hero .hero-button,
.hero .btn-hero,
.hero a[href="#colecciones"]{
  display:flex !important;
  width:max-content !important;
  max-width:calc(100% - 32px);
  margin-left:auto !important;
  margin-right:auto !important;
  background:#8491A2 !important;
  background-image:none !important;
  color:#fff !important;
  opacity:1 !important;
  border:1px solid #8491A2 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none;
}

.hero .hero-cta::before,
.hero .hero-cta::after,
.hero .hero-btn::before,
.hero .hero-btn::after,
.hero .hero-button::before,
.hero .hero-button::after,
.hero .btn-hero::before,
.hero .btn-hero::after,
.hero a[href="#colecciones"]::before,
.hero a[href="#colecciones"]::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

.hero .hero-cta:hover,
.hero .hero-btn:hover,
.hero .hero-button:hover,
.hero .btn-hero:hover,
.hero a[href="#colecciones"]:hover{
  background:#748195 !important;
  background-image:none !important;
  color:#fff !important;
  opacity:1 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}



/* =========================================================
   v1.01 · VER COLECCIÓN centrado verticalmente en el banner
   ========================================================= */

.hero{
  position:relative !important;
}

.hero .hero-cta,
.hero .hero-btn,
.hero .hero-button,
.hero .btn-hero,
.hero a[href="#colecciones"]{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  z-index:20 !important;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
}

/* Mantener exactamente el mismo centro también al pasar el cursor */
.hero .hero-cta:hover,
.hero .hero-btn:hover,
.hero .hero-button:hover,
.hero .btn-hero:hover,
.hero a[href="#colecciones"]:hover{
  transform:translate(-50%,-50%) !important;
}



/* =========================================================
   v1.02 · Corrección real del CTA del hero
   La clase correcta del botón es .hero-ver-coleccion.
   ========================================================= */

.hero{
  position:relative !important;
}

/* El contenedor deja de estar anclado al fondo */
.hero-overlay.hero-overlay-accesos{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}

/* Centrado real del bloque que contiene el botón */
.hero-accesos{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  bottom:auto !important;
  width:auto !important;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important;
}

/* El botón real */
.hero-ver-coleccion{
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:220px !important;
  min-height:46px !important;
  margin:0 !important;
  padding:0 24px !important;
  transform:none !important;

  background:#8491A2 !important;
  background-image:none !important;
  color:#fff !important;
  opacity:1 !important;
  border:1px solid #8491A2 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.hero-ver-coleccion:hover{
  background:#748195 !important;
  border-color:#748195 !important;
  transform:none !important;
  box-shadow:none !important;
}

/* Quitamos HOGAR · CONFORT · DISEÑO del flujo para que el botón
   quede matemáticamente en el centro del banner. */
.hero-marca{
  position:absolute !important;
  left:50% !important;
  top:calc(50% - 48px) !important;
  width:max-content !important;
  max-width:90vw !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
}

@media(max-width:700px){
  .hero-accesos{
    left:50% !important;
    top:50% !important;
    bottom:auto !important;
    width:auto !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
  }

  .hero-ver-coleccion{
    min-width:190px !important;
    margin:0 !important;
  }

  .hero-marca{
    top:calc(50% - 44px) !important;
  }
}


/* =========================================================
   v1.03 · CTA principal más protagonista
   ========================================================= */
.hero-ver-coleccion{
  min-width:270px !important;
  min-height:58px !important;
  padding:0 34px !important;

  background:#000 !important;
  background-image:none !important;
  border:1px solid #000 !important;
  border-radius:3px !important;

  color:#fff !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;

  opacity:1 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}

.hero-ver-coleccion:hover{
  background:#171717 !important;
  border-color:#171717 !important;
  color:#fff !important;
  box-shadow:none !important;
  transform:none !important;
}

@media(max-width:700px){
  .hero-ver-coleccion{
    min-width:235px !important;
    min-height:54px !important;
    padding:0 28px !important;
    border-radius:3px !important;
    font-size:12px !important;
  }
}


/* =========================================================
   v1.04 · CTA refinado
   Azul grisáceo oscuro, ligeramente bajo el centro,
   tipografía mucho más visible y limpia.
   ========================================================= */

.hero-accesos{
  top:58% !important;
}

.hero-ver-coleccion{
  min-width:255px !important;
  min-height:55px !important;
  padding:0 34px !important;

  background:#657181 !important;
  background-image:none !important;
  border:1px solid #657181 !important;
  border-radius:2px !important;

  color:#fff !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;

  opacity:1 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.hero-ver-coleccion:hover{
  background:#596574 !important;
  border-color:#596574 !important;
  color:#fff !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transform:none !important;
}

@media(max-width:700px){
  .hero-accesos{
    top:58% !important;
  }

  .hero-ver-coleccion{
    min-width:225px !important;
    min-height:53px !important;
    padding:0 26px !important;
    border-radius:2px !important;
    font-size:15px !important;
    font-weight:800 !important;
    letter-spacing:.07em !important;
  }
}


/* v1.05 · CTA negro, conservando tamaño, tipografía y posición de v1.04 */
.hero-ver-coleccion{
  background:#000 !important;
  background-image:none !important;
  border-color:#000 !important;
  color:#fff !important;
}

.hero-ver-coleccion:hover{
  background:#161616 !important;
  border-color:#161616 !important;
  color:#fff !important;
}


/* =========================================================
   v1.07 · VER COLECCIÓN como enlace editorial
   Sin cuadro, sin fondo, texto negro y subrayado.
   ========================================================= */

.hero-ver-coleccion,
.hero-ver-coleccion:link,
.hero-ver-coleccion:visited{
  min-width:0 !important;
  min-height:0 !important;
  width:auto !important;
  height:auto !important;
  padding:7px 2px 6px !important;
  margin:0 !important;

  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;

  color:#000 !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  letter-spacing:.10em !important;

  text-decoration:none !important;
  opacity:1 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  position:relative !important;
}

/* Subrayado limpio, separado ligeramente de las letras */
.hero-ver-coleccion::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:2px !important;
  background:#000 !important;
  box-shadow:none !important;
}

.hero-ver-coleccion::before{
  content:none !important;
  display:none !important;
}

.hero-ver-coleccion:hover{
  background:transparent !important;
  color:#000 !important;
  border:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transform:none !important;
}

.hero-ver-coleccion:hover::after{
  height:3px !important;
}

@media(max-width:700px){
  .hero-ver-coleccion,
  .hero-ver-coleccion:link,
  .hero-ver-coleccion:visited{
    min-width:0 !important;
    min-height:0 !important;
    padding:7px 1px 6px !important;
    font-size:17px !important;
    font-weight:800 !important;
    letter-spacing:.09em !important;
  }
}


/* =========================================================
   v1.09 · Banner principal proporcionado por el usuario
   ========================================================= */
.hero{
  background-image:url("assets/banner-principal-blancos-lolita.png") !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}

/* Banner limpio: sin velos, degradados ni overlays visuales */
.hero::before,
.hero::after{
  background:none !important;
  background-image:none !important;
  opacity:0 !important;
  box-shadow:none !important;
}

@media(max-width:700px){
  .hero{
    background-position:center center !important;
    background-size:cover !important;
  }
}


/* =========================================================
   v1.10 · Corrección del banner real
   El hero de esta página usa <img id="hero-principal-img">.
   ========================================================= */
.hero{
  background-image:none !important;
}

#hero-principal-img.hero-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}


/* v1.11 · Logo arriba, conservando un margen elegante */
body:has(#menu:not(.oculto)) .topbar{
  top:0 !important;
  padding-top:16px !important;
}
body:has(#menu:not(.oculto)) .top-logo{
  margin-top:0 !important;
}
@media(max-width:700px){
  body:has(#menu:not(.oculto)) .topbar{
    top:0 !important;
    padding-top:13px !important;
  }
}


/* =========================================================
   v1.13 · Botón VOLVER compacto en vista de colección
   Evita que el área táctil ocupe una franja gigantesca.
   ========================================================= */

#productos .volver,
#productos .btn-volver,
#productos .productos-volver,
#productos [class*="volver"]{
  display:inline-flex !important;
  width:auto !important;
  max-width:max-content !important;
  min-width:0 !important;
  min-height:40px !important;
  height:auto !important;
  padding:9px 14px !important;
  margin-right:auto !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:flex-start !important;
  box-sizing:border-box !important;
}

/* Si está dentro de una cabecera flex/grid, no permitir que se estire */
#productos .productos-header > [class*="volver"],
#productos .catalogo-header > [class*="volver"],
#productos .categoria-header > [class*="volver"]{
  justify-self:start !important;
  flex-grow:0 !important;
  flex-shrink:0 !important;
}

@media(max-width:700px){
  #productos .volver,
  #productos .btn-volver,
  #productos .productos-volver,
  #productos [class*="volver"]{
    width:auto !important;
    max-width:max-content !important;
    min-height:42px !important;
    padding:9px 13px !important;
  }
}


/* =========================================================
   v1.17 · Marco azul REAL en cada card de producto
   Clase real renderizada por app.js: .card.card-interactiva
   ========================================================= */
#productos .card.card-interactiva{
  background:#8491A2 !important;
  padding:5px !important;
  border-radius:22px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Mantiene todo el contenido original dentro de una tarjeta blanca */
#productos .card.card-interactiva > img{
  border-radius:17px 17px 0 0 !important;
}

#productos .card.card-interactiva > .info{
  background:#fff !important;
  padding:16px 20px 22px !important;
  border-radius:0 0 17px 17px !important;
  min-height:calc(100% - 220px);
  box-sizing:border-box !important;
}

@media(max-width:700px){
  #productos .card.card-interactiva{
    padding:4px !important;
    border-radius:18px !important;
  }
  #productos .card.card-interactiva > img{
    border-radius:14px 14px 0 0 !important;
  }
  #productos .card.card-interactiva > .info{
    border-radius:0 0 14px 14px !important;
    padding:14px 14px 18px !important;
  }
}


/* =========================================================
   v1.18 · Marco azul más fino + imagen estable al hover
   ========================================================= */
#productos .card.card-interactiva{
  padding:2px !important;
}

/* La fotografía no crece ni hace zoom al pasar el ratón */
#productos .card.card-interactiva:hover > img,
#productos .card.card-interactiva > img:hover,
#productos .card.card-interactiva:hover .card-img,
#productos .card.card-interactiva:hover .producto-imagen{
  transform:none !important;
  scale:1 !important;
}

/* Neutraliza transiciones de zoom de la foto, sin afectar la card */
#productos .card.card-interactiva > img{
  transform:none !important;
  scale:1 !important;
  transition:none !important;
}

@media(max-width:700px){
  #productos .card.card-interactiva{
    padding:2px !important;
  }
}


/* =========================================================
   v1.20 · Footer corregido sobre la estructura REAL
   ========================================================= */
.footer-negro-real{
  background:#000 !important;
  color:#fff !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:34px 20px 22px !important;
}

.footer-negro-real *{
  color:#fff !important;
}

.footer-negro-real img{
  display:block !important;
  margin:0 auto !important;
}

.footer-negro-real .footer-version-real{
  display:block !important;
  margin-top:10px !important;
  color:rgba(255,255,255,.55) !important;
  font-size:11px !important;
  line-height:1.2 !important;
  text-align:center !important;
  width:100% !important;
}

.footer-negro-real a{
  text-decoration:none !important;
}

/* Si el enlace de versión contiene el span, mantenlo siempre debajo */
.footer-negro-real a:has(.footer-version-real){
  display:block !important;
  width:100% !important;
  margin-top:0 !important;
  text-align:center !important;
}


/* =========================================================
   v1.21 · Footer móvil: Colecciones · Ubicación · WhatsApp
   en un solo renglón
   ========================================================= */
@media(max-width:700px){
  .footer-negro-real .footer-lolita-links{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:18px !important;
  }

  .footer-negro-real .footer-lolita-links a,
  .footer-negro-real .footer-lolita-links button{
    display:inline-flex !important;
    width:auto !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
    background:none !important;
    border:0 !important;
    color:#fff !important;
    font:inherit !important;
    line-height:1.2 !important;
  }
}

@media(max-width:390px){
  .footer-negro-real .footer-lolita-links{
    gap:12px !important;
  }
  .footer-negro-real .footer-lolita-links a,
  .footer-negro-real .footer-lolita-links button{
    font-size:13px !important;
  }
}


/* =========================================================
   v1.23 · Logo de INICIO 3×; footer vuelve a tamaño normal
   ========================================================= */

/* Logo superior de la página de inicio: 3 veces el tamaño original */
body:has(#menu:not(.oculto)) .topbar .top-logo,
.topbar .top-logo{
  width:630px !important;
  max-width:88vw !important;
  height:auto !important;
}

/* El logo del footer NO se triplica: conserva su escala normal */
.footer-negro-real .footer-lolita-logo,
.footer-lolita .footer-lolita-logo{
  width:210px !important;
  max-width:70vw !important;
  height:auto !important;
}

/* Versión una sola vez y debajo del logo del footer */
.footer-lolita-brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}
.footer-lolita-brand .footer-project-version{
  display:block !important;
  margin:8px auto 0 !important;
  width:auto !important;
  text-align:center !important;
}

@media(max-width:700px){
  body:has(#menu:not(.oculto)) .topbar .top-logo,
  .topbar .top-logo{
    width:630px !important;
    max-width:90vw !important;
  }

  .footer-negro-real .footer-lolita-logo,
  .footer-lolita .footer-lolita-logo{
    width:210px !important;
    max-width:62vw !important;
  }
}


/* =========================================================
   v1.24 · Logo 3× EXCLUSIVAMENTE en la pantalla de inicio
   En colecciones/productos vuelve exactamente a 210px.
   ========================================================= */

/* Estado normal fuera del inicio */
.topbar .top-logo{
  width:210px !important;
  max-width:none !important;
  height:auto !important;
}

/* Solo mientras la pantalla principal/menu está visible */
body:has(#menu:not(.oculto)):not(:has(#productos:not(.oculto))) .topbar .top-logo{
  width:630px !important;
  max-width:88vw !important;
  height:auto !important;
}

@media(max-width:700px){
  .topbar .top-logo{
    width:210px !important;
    max-width:none !important;
  }

  body:has(#menu:not(.oculto)):not(:has(#productos:not(.oculto))) .topbar .top-logo{
    width:630px !important;
    max-width:90vw !important;
  }
}


/* =========================================================
   v1.25 · Footer blanco para mostrar correctamente el logo
   ========================================================= */
.footer-negro-real,
.footer-lolita{
  background:#fff !important;
  color:#111 !important;
}

/* Textos y controles del footer sobre fondo blanco */
.footer-negro-real .footer-lolita-links a,
.footer-negro-real .footer-lolita-links button,
.footer-negro-real .footer-lolita-meta,
.footer-negro-real .footer-lolita-meta span,
.footer-lolita .footer-lolita-links a,
.footer-lolita .footer-lolita-links button,
.footer-lolita .footer-lolita-meta,
.footer-lolita .footer-lolita-meta span{
  color:#111 !important;
}

/* La versión permanece discreta debajo del logo */
.footer-negro-real .footer-project-version,
.footer-lolita .footer-project-version{
  color:rgba(0,0,0,.48) !important;
}

/* El logo conserva su tamaño normal del footer */
.footer-negro-real .footer-lolita-logo,
.footer-lolita .footer-lolita-logo{
  width:210px !important;
  max-width:70vw !important;
  height:auto !important;
}

@media(max-width:700px){
  .footer-negro-real .footer-lolita-links a,
  .footer-negro-real .footer-lolita-links button,
  .footer-lolita .footer-lolita-links a,
  .footer-lolita .footer-lolita-links button{
    color:#111 !important;
  }
}


/* =========================================================
   v1.26 · Footer blanco: mostrar el logo ORIGINAL
   Mantiene exactamente la misma dimensión del footer.
   ========================================================= */
.footer-negro-real .footer-lolita-logo,
.footer-lolita .footer-lolita-logo{
  width:210px !important;
  max-width:70vw !important;
  height:auto !important;
  filter:none !important;
  opacity:1 !important;
}


/* =========================================================
   v1.27 · Botón VER COLECCIÓN sobre el banner de inicio
   ========================================================= */
.hero{
  position:relative !important;
}

.hero-ver-coleccion-v127{
  position:absolute !important;
  left:50% !important;
  top:57% !important;
  transform:translate(-50%,-50%) !important;
  z-index:20 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:34px !important;

  min-width:320px !important;
  padding:18px 30px !important;
  border:0 !important;
  border-radius:12px !important;
  background:#8491A2 !important;
  color:#fff !important;
  box-shadow:0 5px 16px rgba(0,0,0,.16) !important;

  font-family:Georgia, "Times New Roman", serif !important;
  font-size:22px !important;
  font-weight:400 !important;
  letter-spacing:.12em !important;
  line-height:1 !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}

.hero-ver-coleccion-v127 .hero-ver-coleccion-flecha{
  font-family:Arial, sans-serif !important;
  font-size:30px !important;
  font-weight:300 !important;
  letter-spacing:0 !important;
  line-height:.7 !important;
}

.hero-ver-coleccion-v127:hover{
  background:#748296 !important;
}

@media(max-width:700px){
  .hero-ver-coleccion-v127{
    top:59% !important;
    min-width:0 !important;
    width:auto !important;
    max-width:82vw !important;
    gap:20px !important;
    padding:14px 21px !important;
    border-radius:10px !important;
    font-size:16px !important;
    letter-spacing:.1em !important;
  }

  .hero-ver-coleccion-v127 .hero-ver-coleccion-flecha{
    font-size:23px !important;
  }
}


/* =========================================================
   v1.28 · VER COLECCIÓN con mayor presencia sin perder estilo
   ========================================================= */
.hero-ver-coleccion-v127{
  background:#718196 !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:
    0 5px 16px rgba(0,0,0,.25),
    0 1px 3px rgba(0,0,0,.12) !important;
}

.hero-ver-coleccion-v127:hover{
  background:#64758b !important;
  border-color:#fff !important;
  box-shadow:
    0 7px 18px rgba(0,0,0,.28),
    0 1px 3px rgba(0,0,0,.14) !important;
}


/* =========================================================
   v1.31 · Quitar "Solicitar información" de cards de producto
   ========================================================= */
#productos .card.card-interactiva .card-info-btn{
  display:none !important;
}


/* =========================================================
   v1.33 · FICHA DE PRODUCTO RECONSTRUIDA
   ========================================================= */
#detalle-producto.detalle-v133{
  padding:24px !important;
  background:rgba(30,28,26,.48) !important;
}
#detalle-producto.detalle-v133 .detalle-modal-card{
  width:min(1180px,100%) !important;
  max-height:94vh !important;
  padding:22px 26px 28px !important;
  border-radius:20px !important;
  background:#fff !important;
  border:0 !important;
}
#detalle-producto.detalle-v133 .detalle-modal-nav{
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  min-height:52px !important;
  margin:-4px 0 16px !important;
  background:rgba(255,255,255,.96) !important;
}
#detalle-producto.detalle-v133 .detalle-volver-productos{
  display:inline-flex !important;
  align-items:center !important;
  min-height:44px !important;
  padding:0 12px !important;
  border:0 !important;
  background:transparent !important;
  color:#394352 !important;
  font-size:14px !important;
  font-weight:700 !important;
  cursor:pointer !important;
}
#detalle-producto.detalle-v133 .detalle-modal-cerrar{
  position:static !important;
  float:none !important;
  flex:0 0 46px !important;
  width:46px !important;
  height:46px !important;
  margin:0 !important;
  border:1px solid #d8dde4 !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#3f4854 !important;
  font-size:28px !important;
  box-shadow:0 2px 10px rgba(0,0,0,.07) !important;
}
#detalle-producto.detalle-v133 .detalle-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1.12fr) minmax(350px,.88fr) !important;
  gap:54px !important;
  align-items:start !important;
}
#detalle-producto.detalle-v133 .detalle-imagen-wrap{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
  overflow:hidden !important;
  border-radius:16px !important;
  background:#f2f0ed !important;
}
#detalle-producto.detalle-v133 .detalle-imagen{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:cover !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#detalle-producto.detalle-v133 .detalle-miniaturas{
  display:flex !important;
  gap:10px !important;
  margin-top:12px !important;
  overflow-x:auto !important;
  padding:2px 1px 5px !important;
}
#detalle-producto.detalle-v133 .detalle-miniatura{
  flex:0 0 76px !important;
  width:76px !important;
  height:76px !important;
  border:1px solid #dedede !important;
  border-radius:9px !important;
  background:#fff !important;
}
#detalle-producto.detalle-v133 .detalle-miniatura.activa{
  border:2px solid #718196 !important;
}
#detalle-producto.detalle-v133 .detalle-miniatura img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:7px !important;
}
#detalle-producto.detalle-v133 .detalle-contenido{
  display:flex !important;
  flex-direction:column !important;
  padding:8px 0 20px !important;
}
#detalle-producto.detalle-v133 .detalle-familia{
  margin:0 0 8px !important;
  color:#8491A2 !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}
#detalle-producto.detalle-v133 .detalle-titulo{
  margin:0 !important;
  padding:0 !important;
  color:#25282c !important;
  font-size:clamp(30px,3vw,43px) !important;
  line-height:1.06 !important;
}
#detalle-producto.detalle-v133 .detalle-precio-principal{
  margin:13px 0 27px !important;
  color:#25282c !important;
  font-size:29px !important;
  font-weight:700 !important;
}
#detalle-producto.detalle-v133 .detalle-paso{
  padding:18px 0 !important;
  border-top:1px solid #e8e8e8 !important;
}
#detalle-producto.detalle-v133 .detalle-paso-cabecera{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:12px !important;
}
#detalle-producto.detalle-v133 .detalle-paso-numero{
  display:grid !important;
  place-items:center !important;
  width:25px !important;
  height:25px !important;
  border-radius:50% !important;
  background:#718196 !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:700 !important;
}
#detalle-producto.detalle-v133 .detalle-label{
  margin:0 !important;
  color:#30343a !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
#detalle-producto.detalle-v133 .detalle-selector{
  width:100% !important;
  min-height:56px !important;
  padding:0 16px !important;
  border:2px solid #718196 !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#25282c !important;
  font-size:16px !important;
  font-weight:600 !important;
}
#detalle-producto.detalle-v133 .detalle-ayuda-medida{
  margin:8px 2px 0 !important;
  color:#7c7c7c !important;
  font-size:12px !important;
}
#detalle-producto.detalle-v133 .detalle-colores{
  margin:0 !important;
}
#detalle-producto.detalle-v133 .cojin-colores-visuales{
  margin-top:0 !important;
}
#detalle-producto.detalle-v133 .colores-titulo{
  display:none !important;
}
/* Preserve strict swatch sizing and prevent the historical giant-circle bug. */
#detalle-producto.detalle-v133 .cojin-color-swatch{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  max-width:38px !important;
  max-height:38px !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
#detalle-producto.detalle-v133 .cojin-color-swatch-muestra{
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}
#detalle-producto.detalle-v133 .cojin-color-swatch::before,
#detalle-producto.detalle-v133 .cojin-color-swatch::after,
#detalle-producto.detalle-v133 .cojin-color-swatch-muestra::before,
#detalle-producto.detalle-v133 .cojin-color-swatch-muestra::after{
  display:none !important;
  content:none !important;
}
#detalle-producto.detalle-v133 .detalle-incluye{
  display:block;
  margin:8px 0 18px !important;
  padding:15px 17px !important;
  border:1px solid #e1e5ea !important;
  border-radius:10px !important;
  background:#f7f8fa !important;
}
#detalle-producto.detalle-v133 .detalle-incluye.oculto{
  display:none !important;
}
#detalle-producto.detalle-v133 .detalle-incluye-titulo{
  display:block !important;
  margin-bottom:5px !important;
  color:#718196 !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
}
#detalle-producto.detalle-v133 #detalle-piezas{
  margin:0 !important;
  color:#333 !important;
  font-size:14px !important;
  line-height:1.45 !important;
}
#detalle-producto.detalle-v133 .detalle-agregar-carrito{
  width:100% !important;
  min-height:60px !important;
  margin:0 0 9px !important;
  border:0 !important;
  border-radius:10px !important;
  background:#718196 !important;
  color:#fff !important;
  box-shadow:0 7px 18px rgba(74,88,107,.18) !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:.09em !important;
}
#detalle-producto.detalle-v133 .detalle-agregar-carrito:hover{
  background:#64758b !important;
}
#detalle-producto.detalle-v133 .detalle-whatsapp{
  position:static !important;
  width:100% !important;
  min-height:48px !important;
  margin:0 !important;
  border:1px solid #cad0d7 !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#586575 !important;
  box-shadow:none !important;
  font-size:13px !important;
  font-weight:700 !important;
}
#detalle-producto.detalle-v133 .detalle-codigo-secundario{
  margin:12px 0 0 !important;
  text-align:center !important;
}
#detalle-producto.detalle-v133 .detalle-acordeones{
  margin-top:22px !important;
  border-top:1px solid #e8e8e8 !important;
}
#detalle-producto.detalle-v133 .detalle-acordeon{
  margin:0 !important;
  border:0 !important;
  border-bottom:1px solid #e8e8e8 !important;
  border-radius:0 !important;
  background:transparent !important;
}
#detalle-producto.detalle-v133 .detalle-acordeon summary{
  padding:15px 2px !important;
  font-weight:700 !important;
}
#detalle-producto.detalle-v133 .detalle-info-bajo-foto{
  display:none !important;
}

@media(max-width:900px){
  #detalle-producto.detalle-v133{
    padding:10px !important;
    align-items:flex-start !important;
  }
  #detalle-producto.detalle-v133 .detalle-modal-card{
    width:100% !important;
    max-height:97vh !important;
    padding:12px 14px 24px !important;
    border-radius:16px !important;
  }
  #detalle-producto.detalle-v133 .detalle-modal-nav{
    margin:0 0 10px !important;
  }
  #detalle-producto.detalle-v133 .detalle-layout{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  #detalle-producto.detalle-v133 .detalle-imagen-wrap{
    aspect-ratio:4 / 3 !important;
  }
  #detalle-producto.detalle-v133 .detalle-contenido{
    padding:0 2px 12px !important;
  }
}
@media(max-width:700px){
  #detalle-producto.detalle-v133{
    padding:0 !important;
    background:#fff !important;
  }
  #detalle-producto.detalle-v133 .detalle-modal-card{
    max-height:100vh !important;
    min-height:100vh !important;
    padding:8px 14px 28px !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  #detalle-producto.detalle-v133 .detalle-modal-nav{
    top:-8px !important;
    min-height:56px !important;
    margin:0 -2px 8px !important;
  }
  #detalle-producto.detalle-v133 .detalle-volver-productos{
    font-size:14px !important;
  }
  #detalle-producto.detalle-v133 .detalle-modal-cerrar{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
  }
  #detalle-producto.detalle-v133 .detalle-imagen-wrap{
    aspect-ratio:1 / 1 !important;
    border-radius:12px !important;
  }
  #detalle-producto.detalle-v133 .detalle-miniatura{
    flex-basis:64px !important;
    width:64px !important;
    height:64px !important;
  }
  #detalle-producto.detalle-v133 .detalle-titulo{
    font-size:29px !important;
  }
  #detalle-producto.detalle-v133 .detalle-precio-principal{
    margin-bottom:20px !important;
    font-size:26px !important;
  }
  #detalle-producto.detalle-v133 .detalle-selector{
    min-height:58px !important;
    font-size:16px !important;
  }
  #detalle-producto.detalle-v133 .detalle-agregar-carrito{
    min-height:62px !important;
    font-size:15px !important;
  }
}


/* =========================================================
   v1.34 · Navegación de detalle sin barra blanca fija
   ========================================================= */
#detalle-producto.detalle-v133 .detalle-modal-nav{
  position:relative !important;
  top:auto !important;
  z-index:20 !important;
  min-height:48px !important;
  margin:0 0 12px !important;
  padding:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}

/* Botones independientes; al hacer scroll se van con el contenido */
#detalle-producto.detalle-v133 .detalle-volver-productos{
  background:transparent !important;
}
#detalle-producto.detalle-v133 .detalle-modal-cerrar{
  background:#fff !important;
}

@media(max-width:700px){
  #detalle-producto.detalle-v133 .detalle-modal-nav{
    position:relative !important;
    top:auto !important;
    margin:0 0 8px !important;
    background:transparent !important;
  }
}

/* v1.58 — suscripción elegante */
.suscriptor-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(30,35,39,.46);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.25s ease}
.suscriptor-overlay.visible{opacity:1;visibility:visible}.suscriptor-card{position:relative;width:min(520px,100%);padding:36px 38px 28px;background:#fff;border:1px solid rgba(70,86,101,.14);border-radius:18px;text-align:center;box-shadow:0 24px 70px rgba(26,33,40,.22);transform:translateY(10px);transition:.25s ease}
.suscriptor-overlay.visible .suscriptor-card{transform:none}.suscriptor-logo{display:block;width:min(210px,55%);height:auto;margin:0 auto 18px}.suscriptor-eyebrow{display:block;margin-bottom:11px;color:#718095;font-size:10px;font-weight:800;letter-spacing:1.45px}.suscriptor-card h2{margin:0;color:#35485e;font-family:Georgia,'Times New Roman',serif;font-size:34px;line-height:1.08;font-weight:500}.suscriptor-card>p{max-width:410px;margin:15px auto 23px;color:#606a75;font-size:14px;line-height:1.55}.suscriptor-card label{display:block;margin:0 0 7px;text-align:left;color:#4c5865;font-size:11px;font-weight:750}.suscriptor-campo{display:grid;grid-template-columns:1fr auto;gap:8px}.suscriptor-campo input{min-width:0;height:47px;padding:0 14px;border:1px solid #cbd3dc;border-radius:9px;background:#fff;color:#303841;font:inherit;outline:none}.suscriptor-campo input:focus{border-color:#607b98;box-shadow:0 0 0 3px rgba(83,107,134,.14)}.suscriptor-campo button{min-height:47px;padding:0 17px;border:0;border-radius:9px;background:#536b86;color:#fff;font-size:11px;font-weight:800;cursor:pointer}.suscriptor-campo button:hover{background:#40566f}.suscriptor-campo button:disabled{opacity:.65;cursor:wait}.suscriptor-ahora-no{margin:13px auto 7px;padding:4px 8px;border:0;background:transparent;color:#687481;text-decoration:underline;text-underline-offset:3px;font-size:11px;cursor:pointer}.suscriptor-card small{display:block;max-width:390px;margin:5px auto 0;color:#8a929b;font-size:9px;line-height:1.45}.suscriptor-cerrar{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f3f5;color:#59636e;font-size:24px;line-height:1;cursor:pointer}.suscriptor-cerrar:hover{background:#e5e9ed;color:#35485e}.suscriptor-mensaje{min-height:17px;margin-top:8px;color:#687481;font-size:10px}.suscriptor-mensaje.ok{color:#287a50;font-weight:750}.suscriptor-mensaje.error{color:#a92f3b;font-weight:750}
@media(max-width:620px){.suscriptor-card{padding:30px 20px 24px;border-radius:15px}.suscriptor-card h2{font-size:29px}.suscriptor-campo{grid-template-columns:1fr}.suscriptor-campo button{width:100%}}

/* v1.60 · Evita descargar el antiguo fondo duplicado del hero. */
.hero{background-image:none !important;}

/* v1.62 · Medidas comerciales visibles */
.detalle-especificacion-medida{margin:9px 0 16px;padding:12px 14px;border:1px solid #d7dfe7;border-radius:10px;background:#f7f9fb;color:#34475b;line-height:1.42}
.detalle-especificacion-medida span{display:block;margin-bottom:5px;color:#718095;font-size:9px;font-weight:900;letter-spacing:1px}
.detalle-especificacion-medida strong{display:block;font-size:13px;font-weight:750}
.detalle-especificacion-medida.oculto{display:none}
@media(max-width:620px){.detalle-especificacion-medida{padding:11px 12px}.detalle-especificacion-medida strong{font-size:12px}}

/* v1.63 · Promoción contextual de cojines: solo vive dentro del carrito */
.promo-cojines-carrito{margin:0 18px 14px;padding:15px;border:1px solid #d9c9ba;border-radius:14px;background:linear-gradient(135deg,#fffaf5,#f7f1ea);box-shadow:0 8px 24px rgba(66,52,42,.08)}
.promo-cojines-carrito.oculto{display:none!important}.promo-cojines-badge{display:inline-flex;align-items:center;gap:5px;margin-bottom:7px;padding:4px 8px;border-radius:999px;background:#7d3140;color:#fff;font-size:9px;font-weight:900;letter-spacing:.7px;text-transform:uppercase}.promo-cojines-carrito h3{margin:0 0 5px;color:#35485e;font-family:Georgia,'Times New Roman',serif;font-size:18px;font-weight:500}.promo-cojines-carrito p{margin:0 0 11px;color:#68717a;font-size:11px;line-height:1.45}.promo-cojines-accion{display:flex;align-items:center;justify-content:space-between;gap:12px}.promo-cojines-precio{color:#35485e;font-size:16px;font-weight:850}.promo-cojines-agregar{min-height:38px;padding:0 13px;border:0;border-radius:9px;background:#536b86;color:#fff;font-size:10px;font-weight:850;cursor:pointer}.promo-cojines-agregar:hover{background:#40566f}.promo-cojines-agregar:disabled{opacity:.6;cursor:wait}
@media(max-width:480px){.promo-cojines-carrito{margin:0 12px 12px;padding:13px}.promo-cojines-accion{align-items:stretch;flex-direction:column}.promo-cojines-agregar{width:100%}}


/* v1.67 · Checkout Shopify híbrido */
.carrito-shopify-checkout{width:100%;min-height:50px;margin:0 0 10px;padding:0 16px;border:0;border-radius:10px;background:#1f2933;color:#fff;font-size:12px;font-weight:850;letter-spacing:.15px;cursor:pointer;transition:.18s ease}
.carrito-shopify-checkout:hover:not(:disabled){transform:translateY(-1px);background:#111820}
.carrito-shopify-checkout:disabled{opacity:.45;cursor:not-allowed;transform:none}