/* ============================================================
   MERVIL Perfumería y Belleza · estilos
   Paleta oficial: Índigo Noche #211c35 · Nude Rubor #ead8d3
   Plata Cálida #d2cfcb · Blanco Crema #fcfafb
   ============================================================ */
:root {
  --indigo: #211c35;
  --indigo-2: #2c2644;
  --nude: #ead8d3;
  --nude-soft: #f4ebe8;
  --plata: #d2cfcb;
  --crema: #fcfafb;
  --texto: #211c35;
  --texto-2: #3d3752;
  --texto-3: #5b5470;
  --linea: #e7e3e0;
  --wa: #12804a;
  --wa-oscuro: #0f6b3e;
  --ok-bg: #e6f0ea; --ok-fg: #1f4d34; --ok-dot: #2f7a50;
  --low-bg: #fbeedc; --low-fg: #6e4210; --low-dot: #c47d1e;
  --out-bg: #ecebee; --out-fg: #3d3752; --out-dot: #8d889b;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radio: 18px;
  --ancho: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--texto); background: var(--crema); line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: var(--indigo); }
a:hover { color: #4a4366; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--ancho); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
@media (max-width: 640px) { .wrap { padding-left: 16px; padding-right: 16px; } }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* ---------- Tipografía ---------- */
.eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--texto-3); }
.h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 6vw, 64px); line-height: 1.06; margin: 0; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 42px); line-height: 1.12; margin: 0; }
.lead { font-size: 17px; line-height: 1.65; color: var(--texto-2); margin: 0; }
.muted { color: var(--texto-3); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 0; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--indigo); color: var(--crema); }
.btn-primary:hover { background: #352e52; color: var(--crema); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-oscuro); color: #fff; }
.btn-outline { background: transparent; color: var(--indigo); border: 1px solid var(--indigo); }
.btn-outline:hover { background: var(--nude-soft); }
.btn-wa-outline { background: transparent; color: var(--wa-oscuro); border: 1.5px solid var(--wa); }
.btn-wa-outline:hover { background: #eef7f1; color: var(--wa-oscuro); }
.btn-light { background: var(--crema); color: var(--indigo); }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn svg { flex: none; }

/* ---------- Anuncio y cabecera ---------- */
.anuncio { background: var(--indigo); color: var(--crema); font-size: 13px; letter-spacing: .04em; padding: 10px 16px; text-align: center; }
.anuncio span + span::before { content: '·'; color: var(--plata); margin: 0 14px; }
@media (max-width: 640px) { .anuncio span:not(:first-child) { display: none; } }
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(252, 250, 251, .97); border-bottom: 1px solid var(--linea); backdrop-filter: saturate(1.2) blur(6px); }
.cabecera .wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.logo img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; flex: 1; font-size: 14px; font-weight: 500; }
.nav > a, .nav-productos > button { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer; font-weight: 500; font-size: 14px; color: var(--indigo); }
.nav .activo { font-weight: 700; }
.nav-productos { position: relative; }
.menu-productos { position: absolute; top: 100%; left: -28px; width: min(760px, calc(100vw - 32px)); background: var(--crema); border: 1px solid var(--linea); border-radius: 20px; box-shadow: 0 24px 50px rgba(33, 28, 53, .14); padding: 28px; display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; z-index: 60; }
.nav-productos.abierto .menu-productos { display: grid; }
.menu-productos .cat > a { font-family: var(--serif); font-size: 19px; text-decoration: none; display: block; margin-bottom: 6px; }
.menu-productos .cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.menu-productos .cat li a { font-size: 14px; color: var(--texto-2); text-decoration: none; }
.menu-productos .cat li a:hover, .menu-productos .cat > a:hover { text-decoration: underline; }
.menu-productos .menu-pie { grid-column: 1 / -1; border-top: 1px solid var(--linea); padding-top: 16px; font-weight: 600; font-size: 14px; }
.acciones { display: flex; align-items: center; gap: 10px; }
.buscador { display: flex; align-items: center; gap: 8px; border: 1px solid var(--plata); border-radius: 999px; padding: 0 16px; height: 44px; background: #fff; }
.buscador input { border: 0; outline: 0; font: inherit; font-size: 14px; width: 200px; background: transparent; color: var(--indigo); }
.btn-pedido { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--indigo); background: var(--crema); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.btn-pedido .num { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--indigo); color: var(--crema); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.btn-menu { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 1020px) {
  .nav, .buscador { display: none; }
  .btn-menu { display: inline-flex; }
  .cabecera .wrap { gap: 8px; justify-content: space-between; min-height: 64px; }
  .logo img { height: 36px; }
  .btn-pedido .txt { display: none; }
  .btn-pedido { padding: 0 12px; }
}

/* Menú móvil */
.menu-movil { position: fixed; inset: 0; z-index: 90; display: none; }
.menu-movil.abierto { display: block; }
.menu-movil .velo { position: absolute; inset: 0; background: rgba(33, 28, 53, .45); }
.menu-movil .panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(360px, 88vw); background: var(--crema); padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.menu-movil .panel .buscador { display: flex; }
.menu-movil .panel .buscador input { width: 100%; }
.menu-movil details { border-bottom: 1px solid var(--linea); padding: 6px 0; }
.menu-movil summary { font-family: var(--serif); font-size: 20px; cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil details ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 4px; display: grid; gap: 4px; }
.menu-movil details li a { display: block; padding: 8px 0; text-decoration: none; color: var(--texto-2); }
.menu-movil .links a { display: flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--linea); }

/* ---------- Secciones ---------- */
.seccion { padding: 72px 0; }
.seccion-nude { background: var(--nude-soft); }
.seccion-indigo { background: var(--indigo); color: var(--crema); }
.seccion-indigo .eyebrow { color: var(--plata); }
.titulo-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.titulo-fila .ver { font-size: 14px; font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 640px) { .seccion { padding: 52px 0; } }

/* Hero */
.hero { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding: 64px 0 56px; }
.hero-texto { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero-texto .lead { max-width: 500px; }
.hero-img { flex: 1 1 420px; min-width: 0; }
.hero-img .marco { background: var(--nude); border-radius: 28px; aspect-ratio: 5 / 6; max-height: 540px; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero-img .marco img.foto { width: 100%; height: 100%; object-fit: cover; }
.hero-img .marco img.marca-agua { width: 34%; opacity: .85; }
.botones { display: flex; gap: 12px; flex-wrap: wrap; }
.confianza { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.confianza span { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) { .hero { padding: 32px 0 40px; gap: 28px; } .hero-img { order: -1; } .hero-img .marco { aspect-ratio: 4 / 3; } }

/* ---------- Grilla de productos ---------- */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
@media (max-width: 640px) { .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid #ebe6e3; border-radius: var(--radio); overflow: hidden; min-width: 0; }
.card .img { position: relative; aspect-ratio: 1 / 1; background: var(--nude-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card .img img.foto { width: 100%; height: 100%; object-fit: cover; }
.card .img img.ph { width: 52px; opacity: .18; }
.card.agotado .img { background: #efedf0; }
.card.agotado .img img.foto { opacity: .55; filter: grayscale(.4); }
.card .badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.card .cuerpo { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card .marca { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--texto-3); }
.card .nombre { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.25; margin: 0; }
.card .nombre a { color: inherit; text-decoration: none; }
.card .nombre a::after { content: ''; position: absolute; inset: 0; }
.card { position: relative; }
.card .pres { font-size: 13px; color: var(--texto-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.para { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); border: 1px solid #cfc9d6; border-radius: 999px; padding: 2px 9px; line-height: 1.5; }
.card.agotado .nombre, .card.agotado .precio { color: var(--texto-3); }
.card .precios { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.precio { font-size: 19px; font-weight: 700; }
.precio-antes { font-size: 13px; color: #6b6580; text-decoration: line-through; }
.card .accion { position: relative; z-index: 2; padding-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.card .nota-agotado { font-size: 12px; line-height: 1.5; color: var(--texto-2); }
@media (max-width: 640px) {
  .card .cuerpo { padding: 12px; gap: 5px; }
  .card .nombre { font-size: 15px; }
  .precio { font-size: 16px; }
  .card .btn { font-size: 13px; padding: 0 10px; }
  .card .badges { top: 8px; left: 8px; }
}

/* Etiquetas de stock */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill-ok::before { background: var(--ok-dot); }
.pill-low { background: var(--low-bg); color: var(--low-fg); }
.pill-low::before { background: var(--low-dot); }
.pill-out { background: var(--indigo); color: var(--crema); }
.pill-out::before { display: none; }
.pill-oferta { background: var(--nude); color: var(--indigo); font-weight: 700; }
.pill-oferta::before { display: none; }

/* Circulitos de tono */
.tonos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tono { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(33, 28, 53, .2); position: relative; flex: none; }
.tono.sin-stock { opacity: .45; }
.tono.sin-stock::after { content: ''; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 2px; background: var(--crema); transform: rotate(45deg); }
.tonos .cuantos { font-size: 12px; color: var(--texto-3); margin-left: 2px; }

/* Categorías */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.cat-tile { text-decoration: none; background: var(--crema); border-radius: var(--radio); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 140px; border: 1px solid #e7dcd8; transition: border-color .15s; }
.cat-tile:hover { border-color: var(--indigo); }
.cat-tile .n { font-family: var(--serif); font-size: 23px; color: var(--indigo); }
.cat-tile .v { font-size: 13px; color: var(--texto-2); display: flex; justify-content: space-between; }
@media (max-width: 640px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cat-tile { min-height: 110px; gap: 24px; padding: 16px; } .cat-tile .n { font-size: 19px; } }

/* Ofertas compactas */
.ofertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.oferta { position: relative; display: flex; gap: 16px; background: #fff; border: 1px solid #ebe6e3; border-radius: var(--radio); padding: 14px; align-items: center; }
.oferta .mini { width: 96px; height: 96px; border-radius: 12px; background: var(--nude-soft); flex: none; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.oferta .mini img.foto { width: 100%; height: 100%; object-fit: cover; }
.oferta .mini img.ph { width: 34px; opacity: .2; }
.oferta .mini .pill { position: absolute; top: 6px; left: 6px; padding: 3px 7px; font-size: 11px; }
.oferta .info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oferta .nombre { font-family: var(--serif); font-size: 17px; line-height: 1.25; }
.oferta a.cubre { position: absolute; inset: 0; }
.oferta .incluye { font-size: 13px; color: var(--texto-2); }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.pasos li { display: flex; gap: 18px; align-items: flex-start; }
.pasos .n { font-family: var(--serif); font-size: 28px; width: 44px; flex: none; }
.pasos .t { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.pasos .d { font-size: 15px; line-height: 1.6; color: var(--texto-2); }

/* Dos columnas genérico */
.dos { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.dos > * { flex: 1 1 420px; min-width: 0; }
.foto-marco { background: var(--nude); border-radius: 28px; aspect-ratio: 4 / 3; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.foto-marco img.foto { width: 100%; height: 100%; object-fit: cover; }
.foto-marco img.ph { width: 90px; opacity: .85; }
.sello { position: absolute; right: 18px; bottom: 18px; width: 92px; height: 92px; border-radius: 50%; background: var(--indigo); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(33, 28, 53, .25); }
.sello img { width: 44px; }

/* Chips */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--plata); background: #fff; text-decoration: none; font-size: 14px; cursor: pointer; }
.chip.serif { font-family: var(--serif); font-size: 17px; }
.chip[aria-pressed="true"], .chip.activo { background: var(--indigo); color: var(--crema); border-color: var(--indigo); font-weight: 600; }

/* Tiendas */
.tiendas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.tienda { background: var(--crema); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 12px; border: 1px solid #e7dcd8; }
.tienda h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0; }
.tienda .linea { font-size: 15px; color: var(--texto-2); display: flex; gap: 8px; align-items: center; }
@media (max-width: 640px) { .tiendas { grid-template-columns: 1fr; } }

/* Pie */
.pie { background: var(--indigo); color: var(--crema); padding: 64px 0 28px; }
.pie .cols { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.pie .marca-pie { flex: 1 1 300px; display: flex; flex-direction: column; gap: 18px; }
.pie .marca-pie img { width: 230px; }
.pie p { font-size: 14px; line-height: 1.7; color: #d9d5df; margin: 0; max-width: 320px; }
.pie nav, .pie .contacto { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pie .tit { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--plata); font-weight: 600; margin-bottom: 4px; }
.pie a { color: var(--crema); text-decoration: none; }
.pie a:hover { text-decoration: underline; color: var(--crema); }
.pie .legal { border-top: 1px solid #3a3355; margin-top: 40px; padding-top: 20px; font-size: 13px; color: #b9b3c6; }
@media (max-width: 640px) { .pie { padding-bottom: 110px; } }

/* WhatsApp flotante */
.wa-flotante { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 24px 0 18px; border-radius: 999px; background: var(--wa); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; box-shadow: 0 12px 30px rgba(18, 128, 74, .35); }
.wa-flotante:hover { background: var(--wa-oscuro); color: #fff; }
@media (max-width: 640px) {
  .wa-flotante { left: 12px; right: 12px; bottom: 12px; justify-content: center; height: 54px; }
}

/* ---------- Página de productos ---------- */
.migas { font-size: 13px; color: var(--texto-3); }
.migas a { color: var(--texto-3); }
.catalogo { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
.filtros { flex: 1 1 250px; max-width: 290px; display: flex; flex-direction: column; gap: 26px; }
.resultados { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.caja-stock { background: var(--nude-soft); border-radius: var(--radio); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; border: 0; background: transparent; padding: 0; font-weight: 600; font-size: 15px; cursor: pointer; text-align: left; }
.switch .riel { width: 46px; height: 26px; border-radius: 999px; background: var(--plata); position: relative; flex: none; transition: background .15s; }
.switch .riel::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--crema); transition: left .15s; }
.switch[aria-pressed="true"] .riel { background: var(--indigo); }
.switch[aria-pressed="true"] .riel::after { left: 23px; }
.grupo-filtro { display: flex; flex-direction: column; gap: 10px; }
.grupo-filtro .chips { gap: 8px; }
.grupo-filtro .chip { min-height: 38px; padding: 0 14px; font-size: 13px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; min-height: 32px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--indigo); }
.caja-ayuda { background: var(--indigo); color: var(--crema); border-radius: var(--radio); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.caja-ayuda .t { font-family: var(--serif); font-size: 21px; }
.caja-ayuda p { font-size: 13px; line-height: 1.55; color: #d9d5df; margin: 0; }
.barra-res { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--texto-2); }
.barra-res select { height: 42px; border-radius: 10px; border: 1px solid var(--plata); background: #fff; font: inherit; font-size: 14px; padding: 0 10px; color: var(--indigo); }
.btn-filtros { display: none; }
.vacio { text-align: center; padding: 60px 20px; background: var(--nude-soft); border-radius: var(--radio); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.vacio .t { font-family: var(--serif); font-size: 26px; }
.cargando { padding: 40px 0; text-align: center; color: var(--texto-3); }
.mas { display: flex; justify-content: center; padding-top: 10px; }
@media (max-width: 860px) {
  .filtros { max-width: none; flex-basis: 100%; display: none; }
  .filtros.abierto { display: flex; }
  .btn-filtros { display: inline-flex; }
}

/* ---------- Ficha de producto ---------- */
.ficha { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; padding: 24px 0 64px; }
.ficha .galeria { flex: 1 1 440px; min-width: 0; }
.ficha .galeria .principal { background: var(--nude-soft); border-radius: 28px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.ficha .galeria .principal img.foto { width: 100%; height: 100%; object-fit: cover; }
.ficha .galeria .principal .muestra { width: 46%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 20px 50px rgba(33, 28, 53, .18); }
.ficha .galeria .principal .pill { position: absolute; top: 18px; left: 18px; font-size: 13px; padding: 8px 14px; }
.ficha .info { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ficha h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 0; }
.ficha .precios { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ficha .precio { font-size: 28px; }
.bloque-tonos { border-top: 1px solid var(--linea); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.bloque-tonos .cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.selector-tonos { display: flex; gap: 10px; flex-wrap: wrap; }
.selector-tonos button { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(33, 28, 53, .2); }
.selector-tonos button.sin-color { width: auto; border-radius: 999px; padding: 0 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--plata); font-size: 13px; font-weight: 500; }
.selector-tonos button[aria-checked="true"] { box-shadow: 0 0 0 3px var(--crema), 0 0 0 5px var(--indigo); }
.selector-tonos button.sin-color[aria-checked="true"] { background: var(--indigo); color: var(--crema); }
.selector-tonos button.sin-stock { opacity: .5; }
.selector-tonos button.sin-stock:not(.sin-color)::after { content: ''; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 3px; margin-left: -1.5px; background: var(--crema); transform: rotate(45deg); border-radius: 2px; }
.selector-tonos button.sin-color.sin-stock { text-decoration: line-through; }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--plata); border-radius: 999px; height: 52px; }
.cantidad button { width: 48px; height: 50px; border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.cantidad span { min-width: 28px; text-align: center; font-weight: 600; }
.fila-compra { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fila-compra .btn { flex: 1 1 200px; min-height: 52px; }
.aviso-agotado { background: var(--nude-soft); border-radius: var(--radio); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.aviso-agotado .t { font-weight: 600; }
.aviso-agotado p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-2); }
.etiquetas { display: flex; gap: 10px; flex-wrap: wrap; }
.etiquetas span { background: var(--nude-soft); border-radius: 999px; padding: 8px 14px; font-size: 13px; }

/* ---------- Catálogos de marcas ---------- */
.catalogos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.catalogo-card { display: flex; flex-direction: column; gap: 14px; }
.portada { aspect-ratio: 3 / 4; border-radius: var(--radio); display: flex; flex-direction: column; justify-content: space-between; padding: 22px; box-shadow: 0 14px 30px rgba(33, 28, 53, .10); text-decoration: none; }
.portada.con-foto { padding: 0; overflow: hidden; background: #fff; }
.portada.con-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portada .t1 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; opacity: .85; }
.portada .t2 { font-family: var(--serif); font-size: 34px; line-height: 1; }
.pasos-cat { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.pasos-cat li { display: flex; gap: 16px; align-items: flex-start; border: 1px solid #ebe6e3; border-radius: var(--radio); padding: 20px; background: #fff; }
.pasos-cat .n { font-family: var(--serif); font-size: 28px; flex: none; }
@media (max-width: 640px) { .catalogos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .portada .t2 { font-size: 24px; } .portada { padding: 14px; } }

/* ---------- Tu pedido (panel lateral) ---------- */
.pedido { position: fixed; inset: 0; z-index: 100; display: none; }
.pedido.abierto { display: block; }
.pedido .velo { position: absolute; inset: 0; background: rgba(33, 28, 53, .45); }
.pedido .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--crema); display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(33, 28, 53, .2); }
.pedido .cab { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--linea); }
.pedido .cab h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0; }
.cerrar { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cerrar:hover { background: var(--nude-soft); }
.pedido .cuerpo { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.item { display: flex; gap: 12px; align-items: center; }
.item .mini { width: 56px; height: 56px; border-radius: 10px; background: var(--nude-soft); flex: none; overflow: hidden; }
.item .mini img { width: 100%; height: 100%; object-fit: cover; }
.item .txt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
.item .txt .n { font-weight: 600; }
.item .txt .s { color: var(--texto-3); }
.item .ctl { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.item .ctl button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--plata); background: #fff; cursor: pointer; }
.item .ctl .quitar { width: auto; border: 0; background: none; text-decoration: underline; font-size: 12px; color: var(--texto-3); margin-left: 8px; padding: 0 4px; }
.item .monto { font-weight: 600; font-size: 14px; white-space: nowrap; }
.pedido .pie-pedido { border-top: 1px solid var(--linea); padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.campo input { height: 44px; border-radius: 10px; border: 1px solid var(--plata); padding: 0 12px; font: inherit; font-size: 15px; font-weight: 400; background: #fff; }
.opciones { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.opciones legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; }
.nota { font-size: 12px; line-height: 1.5; color: var(--texto-3); text-align: center; margin: 0; }
.aviso-error { font-size: 13px; color: #8e1b2c; }

/* Aviso breve */
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px); background: var(--indigo); color: var(--crema); padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .2s; z-index: 120; }
.toast.ver { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }