/* Charms Studio — sistema de diseño */

/* Tokens */
:root {
  --naranja: #FF5A1F;
  --naranja-hondo: #D93B0B;
  --rosa: #F32D88;
  --cian: #08B8D4;
  --amarillo: #FFD322;
  --tinta: #151515;
  --papel: #FFFAF2;
  --blanco: #FFFFFF;
  --apagado: #706B65;
  --linea: #DED8CF;
  --verde: #19733E;
  --rojo: #A33A2C;

  --ancho: 1240px;
  --header-h: 76px;

  --display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t: .18s ease;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--texto); font-size: 16px; line-height: 1.55;
  color: var(--tinta); background: var(--papel);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.bloqueado { overflow: hidden; }
img, svg, video, iframe { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0; line-height: .98; }
section[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 8px); }
:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
::selection { background: var(--amarillo); color: var(--tinta); }

/* Utilidades */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 24px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oculto { display: none !important; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 999; padding: 11px 16px; background: var(--tinta); color: #fff; font-weight: 700; transition: top var(--t); }
.skip-link:focus { top: 16px; }
@media (max-width: 1080px) { .oculto-movil { display: none !important; } }

/* Iconos */
.ico { width: 20px; height: 20px; flex: none; stroke-width: 2; }
.ico-lleno { fill: currentColor; stroke: none; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 4px;
  font-weight: 800; font-size: .94rem; white-space: nowrap; cursor: pointer;
  transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .ico { width: 18px; height: 18px; }

.btn-primario { background: var(--naranja); color: #fff; }
.btn-primario:hover { background: var(--naranja-hondo); }
.btn-oscuro { background: var(--tinta); color: #fff; }
.btn-oscuro:hover { background: #000; }
.btn-linea { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.btn-linea:hover { background: var(--tinta); color: #fff; }
.btn-blanco { background: #fff; color: var(--tinta); }
.btn-wa { background: var(--verde); color: #fff; }
.btn-wa:hover { background: #12592f; }
.btn-fantasma { background: transparent; color: var(--apagado); min-height: 40px; padding: 0 12px; font-weight: 700; }
.btn-fantasma:hover { color: var(--naranja-hondo); }
.btn-bloque { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 15px; font-size: .86rem; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.icono-btn {
  width: 42px; height: 42px; border-radius: 50%; position: relative;
  display: grid; place-items: center; color: var(--tinta); transition: background var(--t), color var(--t), transform var(--t);
}
.icono-btn:hover { background: rgba(21,21,21,.07); transform: translateY(-2px); }
.icono-btn .ico { width: 20px; height: 20px; }
.icono-btn.inverso { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.icono-btn.inverso:hover { background: rgba(255,255,255,.14); }

.globo {
  position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--rosa); color: #fff;
  font-size: .66rem; font-weight: 800; line-height: 19px; text-align: center;
}
.globo[data-n="0"] { display: none; }

/* Chips y etiquetas */
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px;
  border-radius: 20px; border: 1px solid var(--linea); background: var(--papel);
  font-weight: 700; font-size: .86rem; cursor: pointer; transition: all var(--t); white-space: nowrap;
}
.chip:hover { border-color: var(--tinta); }
.chip[aria-pressed="true"], .chip.activo { background: var(--rosa); border-color: var(--rosa); color: #fff; }

.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 3px;
  background: var(--amarillo); color: var(--tinta);
  font-size: .64rem; font-weight: 900; letter-spacing: .9px; text-transform: uppercase;
}
.tag-rosa { background: var(--rosa); color: #fff; }
.tag-cian { background: var(--cian); color: var(--tinta); }
.tag-ok { background: #DFF3E6; color: var(--verde); }
.tag-alerta { background: #FBE4E0; color: var(--rojo); }
.tag-aviso { background: #FFF0CC; color: #8A6100; }
.tag-tinta { background: var(--tinta); color: #fff; }

/* Cabecera */
.header {
  position: sticky; top: 0; z-index: 200; height: var(--header-h);
  background: rgba(255,250,242,.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(21,21,21,.18);
}
.header-barra { height: 100%; display: flex; align-items: center; gap: 26px; }

.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo-marca { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover; }
.logo-texto { font: 22px/.82 var(--display); display: block; }
.logo-texto b { font-weight: 400; display: block; }
.logo-texto span { display: block; font-size: 22px; }

.nav { display: flex; align-items: center; gap: 30px; font-weight: 700; font-size: .875rem; margin-left: 12px; }
.nav a { position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--naranja); transition: right var(--t); }
.nav a:hover::after, .nav a.activo::after { right: 0; }

.header-acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.btn-menu { display: none; }

.header-buscar { flex: 1; max-width: 320px; position: relative; display: flex; align-items: center; margin-left: auto; }
.header-buscar input {
  width: 100%; height: 44px; padding: 0 14px 0 42px;
  border: 2px solid var(--tinta); border-radius: 3px; background: #fff; font-size: .9rem;
}
.header-buscar input:focus { outline: none; box-shadow: 4px 4px 0 var(--cian); }
.header-buscar .lupa { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--apagado); pointer-events: none; }
.header-buscar + .header-acciones { margin-left: 14px; }

/* Menú móvil */
.movil-panel {
  position: fixed; inset: 0; z-index: 400; background: var(--papel);
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
.movil-panel.abierto { transform: none; }
.movil-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 2px solid var(--tinta); }
.movil-nav { padding: 8px 18px; display: flex; flex-direction: column; }
.movil-nav a { display: flex; align-items: center; gap: 13px; padding: 16px 4px; border-bottom: 1px solid var(--linea); font-weight: 700; font-size: 1.05rem; }
.movil-nav a .ico { color: var(--naranja); }
.movil-nav a:hover, .movil-nav a.activo { color: var(--naranja-hondo); }
.movil-pie { margin-top: auto; padding: 22px 18px 30px; display: grid; gap: 12px; }
.movil-redes { display: flex; gap: 10px; justify-content: center; }

/* Autocompletado */
.autocompletar {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 2px solid var(--tinta); box-shadow: 7px 7px 0 var(--tinta);
  max-height: 420px; overflow-y: auto;
}
.ac-grupo + .ac-grupo { border-top: 1px solid var(--linea); }
.ac-titulo { padding: 10px 16px 4px; font-size: .64rem; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--apagado); }
.ac-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 16px; text-align: left; cursor: pointer; transition: background var(--t); }
.ac-item:hover, .ac-item.marcado { background: var(--papel); }
.ac-item img, .ac-item .ac-ico { width: 44px; height: 44px; object-fit: cover; flex: none; border-radius: 3px; background: var(--papel); display: grid; place-items: center; color: var(--naranja); }
.ac-txt { flex: 1; min-width: 0; }
.ac-txt b { display: block; font-size: .9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-txt small { color: var(--apagado); font-size: .78rem; }
.ac-precio { font-family: var(--display); font-size: .95rem; color: var(--naranja-hondo); }

/* Hero */
.hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: min(720px, calc(100vh - var(--header-h)));
  background: var(--naranja); color: #fff;
}
.hero-foto { position: absolute; inset: 0; background: url("../img/hero.png") center/cover no-repeat; }
.hero-sombra { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,13,11,.82) 0%, rgba(15,13,11,.5) 40%, rgba(15,13,11,0) 68%); }
.hero-grid { position: relative; z-index: 2; width: 100%; }
.hero-texto { width: min(620px, 56%); padding: 60px 0 74px; }

.hero-eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 15px;
  font-size: .72rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
}
.hero-eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--amarillo); flex: none; }

/* Bloques con fondo naranja: acentos e invertidos */
.sobre-naranja { background: var(--naranja); color: #fff; }
.sobre-naranja .sec-cab p { color: rgba(255,255,255,.9); }
.sobre-naranja .perso-pasos, .sobre-naranja .paso { border-color: rgba(255,255,255,.35); }
.sobre-naranja .paso-n { color: var(--amarillo); }
.sobre-naranja .paso p { color: rgba(255,255,255,.85); }
.sobre-naranja .btn-linea { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.sobre-naranja .btn-linea:hover { background: #fff; color: var(--tinta); }

.hero h1 { font-size: clamp(52px, 7.4vw, 104px); margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--amarillo); }
.punto { color: var(--rosa); }
.hero .bajada { max-width: 520px; margin-bottom: 26px; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.4; font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero .btn-linea { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.hero .btn-linea:hover { background: #fff; color: var(--tinta); }

.hero-datos { display: flex; flex-wrap: wrap; gap: 30px; }
.hero-dato b { display: block; font-family: var(--display); font-size: 1.7rem; line-height: 1; }
.hero-dato span { font-size: .68rem; font-weight: 800; letter-spacing: 1.2px; opacity: .85; }

.hero-sello {
  position: absolute; right: 4vw; bottom: 130px; z-index: 3;
  width: 122px; height: 122px; border-radius: 50%;
  background: var(--cian); color: var(--tinta); border: 3px solid var(--tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(7deg); box-shadow: 6px 6px 0 var(--tinta);
}
.hero-sello strong { font: 28px var(--display); font-weight: 400; }
.hero-sello span { font-size: .6rem; font-weight: 800; letter-spacing: 1px; }

/* Buscador principal */
.buscador-hero { position: relative; z-index: 4; margin-top: 4px; }
.titulo-buscar { display: none; }
.buscar-caja { display: flex; gap: 12px; max-width: 620px; }
.buscar-campo { position: relative; flex: 1; display: grid; grid-template-columns: 52px 1fr; align-items: center; height: 62px; background: #fff; color: var(--tinta); border: 3px solid var(--tinta); box-shadow: 7px 7px 0 var(--cian); }
.buscar-campo > .ico { margin-left: 17px; width: 21px; height: 21px; color: var(--apagado); }
.buscar-campo input { height: 100%; padding: 0 12px 0 4px; border: 0; outline: 0; background: transparent; font-size: 1rem; min-width: 0; }
.buscar-caja .btn { height: 62px; min-height: 62px; flex: none; }

.buscar-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.buscar-sugerencias .lbl { font-size: .78rem; font-weight: 700; opacity: .8; }
.sug {
  padding: 7px 13px; border-radius: 18px; border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.12); color: inherit; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: all var(--t); backdrop-filter: blur(4px);
}
.sug:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.sug b { color: var(--amarillo); }
.sug:hover b { color: var(--naranja-hondo); }

/* Secciones */
.seccion { padding: 88px 0; }
.seccion-compacta { padding: 54px 0; }
.seccion-crema { background: var(--papel); }
.seccion-blanca { background: #fff; }

.sec-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 34px; flex-wrap: wrap; }
.sec-cab .txt { max-width: 780px; }
.sec-cab h2 { font-size: clamp(32px, 4vw, 56px); }
.sec-cab p { max-width: 420px; margin-top: 10px; color: var(--apagado); }
.sec-cab .btn { flex: none; }

.enlace-texto {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
  font-weight: 800; border-bottom: 2px solid var(--naranja); cursor: pointer;
}
.enlace-texto:hover { color: var(--naranja-hondo); }

/* Categorías */
.cats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cat-card {
  min-height: 118px; padding: 14px 10px; border: 1px solid var(--linea); border-radius: 6px;
  background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; font-weight: 800; transition: all var(--t);
}
.cat-card:hover { background: var(--cian); border-color: var(--tinta); box-shadow: 4px 4px 0 var(--tinta); transform: translate(-2px, -2px); }
.cat-ico { color: var(--naranja); }
.cat-ico .ico { width: 26px; height: 26px; }
.cat-card:hover .cat-ico { color: var(--tinta); }
.cat-card b { font-size: .92rem; font-weight: 800; }
.cat-card small { color: var(--apagado); font-size: .74rem; font-weight: 600; }
.cat-card:hover small { color: rgba(21,21,21,.7); }

/* Fandoms */
.fandom-fila { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fandom-fila::-webkit-scrollbar { display: none; }
.fandom-card {
  flex: none; width: 152px; scroll-snap-align: start; padding: 18px 14px; text-align: center;
  background: #fff; border: 1px solid var(--linea); border-radius: 6px; transition: all var(--t);
}
.fandom-card:hover { border-color: var(--tinta); box-shadow: 5px 5px 0 var(--rosa); transform: translate(-2px, -2px); }
.f-ico { width: 52px; height: 52px; margin: 0 auto 11px; border-radius: 50%; display: grid; place-items: center; background: var(--papel); color: var(--naranja); }
.f-ico .ico { width: 25px; height: 25px; }
.fandom-card b { display: block; font-size: .9rem; font-weight: 800; }
.fandom-card small { color: var(--apagado); font-size: .74rem; }

/* Tarjetas de producto */
.productos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.productos-grid.compacta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.p-card {
  position: relative; min-width: 0; background: #fff; border: 1px solid var(--linea);
  border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.p-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(28,20,13,.12); }

.p-media { position: relative; display: block; aspect-ratio: 1.12; overflow: hidden; background: var(--papel); }
.p-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.p-card:hover .p-media img { transform: scale(1.05); }
.p-media::after {
  content: "Ver detalle"; position: absolute; right: 12px; bottom: 12px;
  padding: 8px 10px; background: #fff; color: var(--tinta); border-radius: 3px;
  font-size: .7rem; font-weight: 800; opacity: 0; transform: translateY(5px); transition: var(--t);
}
.p-card:hover .p-media::after { opacity: 1; transform: none; }

.p-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.p-fav {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--tinta); display: grid; place-items: center; transition: var(--t);
}
.p-fav:hover { transform: scale(1.08); }
.p-fav[aria-pressed="true"] { background: var(--rosa); color: #fff; }
.p-fav[aria-pressed="true"] .ico { fill: currentColor; }
.p-fav .ico { width: 18px; height: 18px; }
.p-video-flag {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 3px; background: rgba(21,21,21,.82); color: #fff; font-size: .66rem; font-weight: 800;
}
.p-video-flag .ico { width: 12px; height: 12px; }
.p-agotado-capa { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(255,250,242,.72); }
.p-agotado-capa span { padding: 8px 16px; background: var(--tinta); color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: 1px; }

.p-cuerpo { padding: 17px; display: flex; flex-direction: column; flex: 1; }
.p-ruta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: var(--apagado); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.p-ruta .disp-ok { color: var(--verde); }
.p-ruta .disp-no { color: var(--rojo); }
.p-nombre { font-family: var(--texto); font-weight: 700; font-size: 1.06rem; line-height: 1.25; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-nombre a:hover { color: var(--naranja-hondo); }
.p-personajes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.p-personajes .mini { padding: 3px 8px; border: 1px solid var(--linea); border-radius: 3px; font-size: .68rem; font-weight: 700; color: var(--apagado); }
.p-pie { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.p-precio { font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.p-precio small { display: block; margin-top: 3px; font-family: var(--texto); font-size: .72rem; font-weight: 600; color: var(--apagado); text-decoration: line-through; }
.p-add { min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; background: var(--tinta); color: #fff; border-radius: 3px; font-size: .8rem; font-weight: 800; transition: background var(--t); }
.p-add:hover { background: var(--naranja); }
.p-add .ico { width: 16px; height: 16px; }

/* Carrusel */
.carrusel-envoltura { position: relative; }
.carrusel { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 6px; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { flex: none; scroll-snap-align: start; }
.car-nav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; display: grid; place-items: center; transition: var(--t); }
.car-nav:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.car-nav[disabled] { opacity: .3; pointer-events: none; }
.carrusel-nav { display: flex; gap: 8px; }

/* Stock semanal */
.stock-banda { background: var(--tinta); color: #fff; overflow: hidden; }
.stock-banda .sec-cab p { color: rgba(255,255,255,.65); }
.stock-titulo-pill { display: block; font-family: var(--display); font-size: clamp(32px, 4vw, 56px); }

.video-card { position: relative; width: min(360px, 75vw); aspect-ratio: 4/5; border-radius: 6px; overflow: hidden; display: flex; align-items: flex-end; color: #fff; }
.video-marco { position: absolute; inset: 0; }
.video-marco img { width: 100%; height: 100%; object-fit: cover; }
.video-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.video-play { position: absolute; z-index: 3; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--tinta); display: grid; place-items: center; transition: transform var(--t); }
.video-card:hover .video-play { transform: scale(1.1); }
.video-play .ico { width: 19px; height: 19px; }
.video-info { position: relative; z-index: 2; padding: 22px; }
.video-info small { font-size: .68rem; font-weight: 900; letter-spacing: 1.2px; color: var(--amarillo); }
.video-info b { display: block; margin-top: 5px; font: 24px/1.05 var(--display); font-weight: 400; }

/* Catálogo */
.catalogo-cab { padding: 34px 0 26px; border-bottom: 1px solid var(--linea); background: #fff; }
.miga { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; font-size: .8rem; font-weight: 600; color: var(--apagado); }
.miga a:hover { color: var(--naranja-hondo); }
.miga .sep { opacity: .5; }

.catalogo-layout { display: grid; grid-template-columns: 264px 1fr; gap: 32px; align-items: start; padding: 30px 0 88px; }

.filtros { position: sticky; top: calc(var(--header-h) + 16px); background: #fff; border: 1px solid var(--linea); border-radius: 6px; padding: 4px 18px 16px; max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; }
.filtro-grupo { border-bottom: 1px solid var(--linea); padding: 14px 0; }
.filtro-grupo:last-child { border-bottom: 0; }
.filtro-cab { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 3px 0; font-weight: 800; font-size: .92rem; text-transform: uppercase; letter-spacing: .5px; }
.filtro-cab .ico { width: 16px; height: 16px; color: var(--apagado); transition: transform var(--t); }
.filtro-cab[aria-expanded="false"] .ico { transform: rotate(-90deg); }
.filtro-cuerpo { padding-top: 11px; display: grid; gap: 3px; }
.filtro-cab[aria-expanded="false"] + .filtro-cuerpo { display: none; }

.opcion { display: flex; align-items: center; gap: 10px; padding: 7px 8px; cursor: pointer; font-size: .89rem; transition: background var(--t); }
.opcion:hover { background: var(--papel); }
.opcion input { appearance: none; width: 18px; height: 18px; flex: none; border: 2px solid var(--tinta); background: #fff; position: relative; cursor: pointer; }
.opcion input:checked { background: var(--naranja); border-color: var(--naranja); }
.opcion input:checked::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(43deg); }
.opcion .n { margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--apagado); }
.opcion.deshabilitada { opacity: .38; pointer-events: none; }

.campo-linea { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 3px; background: var(--papel); font-size: .88rem; }
.campo-linea:focus { outline: none; border-color: var(--tinta); }
.rango-precio { display: flex; gap: 9px; align-items: center; }

.barra-resultados { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 56px; margin-bottom: 12px; }
.barra-resultados .conteo { font-size: .88rem; color: var(--apagado); }
.barra-resultados .conteo b { font-family: var(--display); font-size: 1.05rem; color: var(--tinta); }
.orden-select, .select-lindo {
  height: 46px; padding: 0 34px 0 13px; border: 1px solid var(--linea); border-radius: 3px; background: #fff;
  appearance: none; font-size: .87rem; font-weight: 600; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23706B65' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.orden-select:focus, .select-lindo:focus { outline: none; border-color: var(--tinta); }

.filtros-activos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.f-activo { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 13px; border: 1px solid var(--tinta); border-radius: 3px; background: #fff; font-size: .8rem; font-weight: 700; }
.f-activo button { width: 18px; height: 18px; display: grid; place-items: center; background: var(--papel); font-size: .68rem; }
.f-activo button:hover { background: var(--rojo); color: #fff; }

.btn-filtros-movil, .filtros-cerrar-movil { display: none; }

.vacio { padding: 70px 20px; text-align: center; border: 1px dashed var(--linea); background: #fff; }
.vacio .vacio-ico { color: var(--naranja); display: flex; justify-content: center; margin-bottom: 12px; }
.vacio .vacio-ico .ico { width: 40px; height: 40px; }
.vacio h3 { font-size: 1.5rem; margin-bottom: 8px; }
.vacio p { max-width: 46ch; margin: 0 auto 20px; color: var(--apagado); }

.paginacion { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 40px; }
.pag-btn { min-width: 44px; height: 44px; padding: 0 13px; display: grid; place-items: center; border: 1px solid var(--linea); background: #fff; font-weight: 800; font-size: .88rem; transition: var(--t); }
.pag-btn:hover { border-color: var(--tinta); }
.pag-btn.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.pag-btn[disabled] { opacity: .35; pointer-events: none; }

.esqueleto { background: linear-gradient(100deg, var(--linea) 25%, #F3EEE7 50%, var(--linea) 75%); background-size: 240% 100%; animation: brillo 1.3s infinite; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -60% 0; } }

/* Ficha de producto */
.ficha { padding: 30px 0 88px; }
.ficha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

.galeria-principal { position: relative; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--tinta); box-shadow: 12px 12px 0 var(--cian); background: var(--papel); }
.galeria-principal img, .galeria-principal video { width: 100%; height: 100%; object-fit: cover; }
.galeria-miniaturas { display: flex; gap: 10px; margin-top: 22px; overflow-x: auto; scrollbar-width: none; }
.galeria-miniaturas::-webkit-scrollbar { display: none; }
.mini-thumb { position: relative; width: 76px; height: 76px; flex: none; overflow: hidden; border: 2px solid var(--linea); background: var(--papel); transition: var(--t); }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-thumb.activa { border-color: var(--tinta); }
.mini-thumb:hover { border-color: var(--naranja); }
.mini-thumb .ico-video { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.4); color: #fff; }

.ficha-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.ficha-info h1 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 16px; }
.ficha-precio-fila { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.ficha-precio { font-family: var(--display); font-size: 2.4rem; color: var(--naranja-hondo); line-height: 1; }
.ficha-precio-antes { font-size: 1.05rem; color: var(--apagado); text-decoration: line-through; font-weight: 600; }
.ficha-desc { color: var(--apagado); line-height: 1.6; margin-bottom: 24px; }

.ficha-atributos { margin-bottom: 26px; border-top: 1px solid var(--linea); }
.atributo { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: .92rem; }
.atributo small { color: var(--apagado); font-weight: 600; }
.atributo b { font-weight: 700; text-align: right; }
.atributo a:hover { color: var(--naranja-hondo); text-decoration: underline; }

.ficha-acciones { display: grid; gap: 10px; margin-bottom: 26px; }
.ficha-acciones .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.confianza { display: grid; gap: 14px; padding: 22px; background: #fff; border: 1px solid var(--linea); }
.confianza .item { display: flex; gap: 13px; align-items: flex-start; font-size: .89rem; }
.confianza .item .ico { color: var(--naranja); margin-top: 2px; }
.confianza .item b { display: block; }
.confianza .item span { color: var(--apagado); }
.confianza .item a { color: var(--naranja-hondo); font-weight: 700; }

/* Personalizados */
.perso-hero { padding: 70px 0; background: var(--naranja); color: #fff; }
.perso-hero .miga { color: rgba(255,255,255,.75); }
.perso-hero h1 { font-size: clamp(38px, 5.4vw, 74px); margin-bottom: 18px; }
.perso-hero h1 span { color: var(--amarillo); }
.perso-hero p { max-width: 620px; font-size: 1.08rem; line-height: 1.6; margin-bottom: 28px; }
.perso-hero .btn-linea { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.perso-hero .btn-linea:hover { background: #fff; color: var(--tinta); }

.perso-pasos { border-top: 1px solid var(--linea); }
.paso { display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.paso-n { font: 26px var(--display); font-weight: 400; color: var(--naranja); }
.paso h3 { font-family: var(--texto); font-weight: 700; font-size: 1.1rem; margin-bottom: 5px; }
.paso p { color: var(--apagado); font-size: .93rem; }

/* Pasos en línea de tiempo, con riel de progreso y visual fijo */
.pasos-escena { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: start; }

.pasos-lista { position: relative; padding-left: 62px; }
.pasos-riel { position: absolute; left: 21px; top: 26px; bottom: 26px; width: 3px; background: var(--linea); }
.pasos-riel i { display: block; width: 100%; height: 0; background: var(--naranja); transition: height .45s cubic-bezier(.3, .8, .3, 1); }

.paso-t { position: relative; padding: 26px 0 26px 4px; border-bottom: 1px solid var(--linea); cursor: pointer; }
.paso-t:last-child { border-bottom: 0; }
.paso-t-n {
  position: absolute; left: -62px; top: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papel); border: 3px solid var(--linea); color: var(--apagado);
  font: 15px var(--display); font-weight: 400;
  transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s cubic-bezier(.34, 1.4, .64, 1);
}
.paso-t h3 { font-family: var(--texto); font-weight: 800; font-size: 1.22rem; margin-bottom: 6px; transition: color .3s ease; }
.paso-t p { color: var(--apagado); font-size: .96rem; max-width: 52ch; }
.paso-t .paso-t-extra {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .4s ease, opacity .35s ease, margin-top .4s ease;
  margin-top: 0;
}
.paso-t .paso-t-extra > span {
  display: flex; align-items: center; gap: 7px; min-height: 0; overflow: hidden;
  font-size: .87rem; font-weight: 700; color: var(--naranja-hondo);
}
.paso-t .paso-t-extra .ico { width: 15px; height: 15px; flex: none; }

.paso-t.activo .paso-t-n { background: var(--naranja); border-color: var(--naranja); color: #fff; transform: scale(1.14); }
.paso-t.activo h3 { color: var(--naranja-hondo); }
.paso-t.activo .paso-t-extra { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }

.pasos-visual { position: sticky; top: calc(var(--header-h) + 34px); }
.pasos-marco {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 8px solid #fff; background: var(--cian);
  box-shadow: 14px 14px 0 var(--tinta);
}
.pasos-marco img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06) translateX(28px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.pasos-marco img.activa { opacity: 1; transform: none; }
.pasos-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; font-size: .82rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
.pasos-pie span { color: var(--apagado); }
.pasos-pie b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; }

.precios-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.precio-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px; background: #fff; border: 1px solid var(--linea); border-radius: 6px; transition: var(--t); }
.precio-card:hover { border-color: var(--tinta); box-shadow: 7px 7px 0 var(--tinta); transform: translate(-3px, -3px); }
.precio-card.destacada { border: 2px solid var(--tinta); box-shadow: 7px 7px 0 var(--rosa); }
.precio-card .cinta { position: absolute; top: -12px; left: 24px; padding: 5px 12px; background: var(--rosa); color: #fff; font-size: .64rem; font-weight: 900; letter-spacing: 1px; }
.pc-ico { color: var(--naranja); margin-bottom: 12px; }
.pc-ico .ico { width: 32px; height: 32px; }
.precio-card h3 { font-family: var(--texto); font-weight: 800; font-size: 1.15rem; margin-bottom: 8px; }
.pc-desde { font-family: var(--display); font-size: 2rem; color: var(--naranja-hondo); margin-bottom: 16px; }
.pc-desde small { font-family: var(--texto); font-size: .8rem; font-weight: 600; color: var(--apagado); }
.precio-card ul { display: grid; gap: 9px; margin-bottom: 22px; }
.precio-card li { display: flex; gap: 9px; align-items: flex-start; font-size: .89rem; color: var(--apagado); }
.precio-card li::before { content: "✓"; color: var(--verde); font-weight: 900; flex: none; }
.precio-card .btn { margin-top: auto; }

.galeria-perso { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gp-item { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--linea); }
.gp-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gp-item:hover img { transform: scale(1.06); }
.gp-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.82)); color: #fff; font-size: .84rem; font-weight: 800; }

/* FAQ */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--linea); }
.faq-item { border-bottom: 1px solid var(--linea); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 20px 4px; text-align: left; font-weight: 800; font-size: 1.02rem; }
.faq-q .ico { color: var(--naranja); transition: transform .2s ease; }
.faq-q[aria-expanded="true"] .ico { transform: rotate(45deg); }
.faq-a { padding: 0 4px 20px; color: var(--apagado); line-height: 1.6; }
.faq-q[aria-expanded="false"] + .faq-a { display: none; }

/* Sección "Lo creamos" */
.creamos { position: relative; overflow: hidden; padding-top: 0; }

.marquesina { padding: 15px 0; margin-bottom: 68px; background: var(--tinta); overflow: hidden; }
.marquesina-pista {
  display: flex; width: max-content; will-change: transform;
  animation: correr 30s linear infinite;
}
.marquesina-pista > span { display: flex; align-items: center; gap: 38px; padding-right: 38px; white-space: nowrap; }
.marquesina-pista b { font: 21px var(--display); font-weight: 400; color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.marquesina-pista i { width: 10px; height: 10px; background: var(--amarillo); transform: rotate(45deg); flex: none; }
/* La pista lleva el contenido duplicado, así que -50% cierra el bucle sin salto */
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.creamos-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 58px; align-items: center; }
.creamos-texto h2 { font-size: clamp(36px, 4.6vw, 64px); margin-bottom: 18px; }
.creamos-bajada { max-width: 520px; margin-bottom: 26px; font-size: 1.06rem; line-height: 1.55; color: rgba(255,255,255,.9); }
.creamos-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.creamos-visual { position: relative; width: min(430px, 100%); margin-inline: auto; }
.creamos-marco {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 10px solid #fff; background: var(--cian);
  box-shadow: 18px 18px 0 var(--tinta); transform: rotate(3deg);
}
.creamos-marco img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: translateX(46px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.creamos-marco img.activa { opacity: 1; transform: none; }
.creamos-marco img.saliendo { opacity: 0; transform: translateX(-46px); }

.creamos-sello {
  position: absolute; left: -6%; bottom: -5%; z-index: 3;
  width: 148px; height: 148px; border-radius: 50%;
  background: var(--amarillo); color: var(--tinta); border: 3px solid var(--tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-8deg); box-shadow: 6px 6px 0 var(--tinta);
}
.creamos-sello span { font-size: .8rem; font-weight: 700; }
.creamos-sello strong { font: 42px/1 var(--display); font-weight: 400; }
.creamos-sello small { max-width: 104px; text-align: center; font-size: .66rem; line-height: 1.25; }

.creamos-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.creamos-puntos button { width: 30px; height: 5px; background: rgba(255,255,255,.4); transition: background var(--t); }
.creamos-puntos button[aria-current="true"] { background: var(--amarillo); }

/* Entradas laterales al hacer scroll */
.revelar { opacity: 0; transform: translateX(-38px); transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.revelar-der { transform: translateX(38px); }
.revelar.visible { opacity: 1; transform: none; }

/* Beneficios */
.franja-beneficios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.beneficio { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: #fff; border: 1px solid var(--linea); border-radius: 6px; transition: var(--t); }
.beneficio:hover { border-color: var(--tinta); box-shadow: 5px 5px 0 var(--amarillo); transform: translate(-2px, -2px); }
.b-ico { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--papel); color: var(--naranja); display: grid; place-items: center; }
.b-ico .ico { width: 22px; height: 22px; }
.beneficio b { display: block; font-size: .96rem; margin-bottom: 2px; }
.beneficio span span { color: var(--apagado); font-size: .87rem; }

/* Redes */
.redes-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.red-card {
  display: flex; flex-direction: column; gap: 12px; padding: 26px 22px;
  background: #fff; border: 1px solid var(--linea); transition: var(--t);
}
.red-card:hover { border-color: var(--tinta); box-shadow: 7px 7px 0 var(--tono, var(--naranja)); transform: translate(-3px, -3px); }
.red-card .r-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--tono, var(--naranja)); color: #fff; }
.red-card .r-ico .ico { width: 22px; height: 22px; }
.red-card b { font-size: 1.05rem; }
.red-card small { color: var(--apagado); font-size: .86rem; }
.red-card .r-ir { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 800; }
.red-card .r-ir .ico { width: 15px; height: 15px; transition: transform var(--t); }
.red-card:hover .r-ir .ico { transform: translateX(4px); }

/* Visítanos */
.visita { display: grid; grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); gap: 60px; align-items: center; }
.visita h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 12px; }
.visita > div > p { color: var(--apagado); line-height: 1.6; }
.visita-datos { margin: 26px 0; border-top: 1px solid var(--linea); }
.visita-datos > div { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; min-height: 66px; border-bottom: 1px solid var(--linea); }
.visita-datos .ico { color: var(--naranja); }
.visita-datos small { display: block; color: var(--apagado); font-size: .8rem; }
.visita-datos strong { font-weight: 700; }
.mini-mapa { position: relative; height: 390px; overflow: hidden; border: 2px solid var(--tinta); border-radius: 8px; box-shadow: 9px 9px 0 var(--cian); background: #E8E4DC; }
.mini-mapa iframe { width: 100%; height: 100%; border: 0; }
.mapa-etiqueta { position: absolute; left: 14px; bottom: 14px; display: grid; grid-template-columns: 12px 1fr; column-gap: 9px; min-width: 190px; padding: 10px 13px; border: 1px solid var(--tinta); background: #fff; box-shadow: 4px 4px 0 var(--tinta); }
.mapa-etiqueta .punto-verde { grid-row: 1 / 3; align-self: center; }
.mapa-etiqueta small { color: var(--apagado); font-size: .78rem; }
.punto-verde { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(25,115,62,.18); }
.punto-estado { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; }
.punto-estado i { width: 9px; height: 9px; border-radius: 50%; background: #37D07A; box-shadow: 0 0 0 3px rgba(55,208,122,.22); }
.punto-estado.off i { background: #FF7B6B; box-shadow: 0 0 0 3px rgba(255,123,107,.22); }

/* Llamado WhatsApp */
.cta-wa { display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: center; padding: 46px; background: var(--tinta); color: #fff; }
.cta-wa h2 { font-size: clamp(28px, 3.4vw, 46px); margin-bottom: 12px; }
.cta-wa p { max-width: 56ch; color: rgba(255,255,255,.72); }
.cta-wa .acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-wa .btn-linea { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.cta-wa .btn-linea:hover { background: #fff; color: var(--tinta); }

/* Pie */
.footer { padding: 68px 0 26px; background: #090909; color: #C9C9C9; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: 48px; }
.footer-logo { width: 70px; height: 70px; border-radius: 50%; margin-bottom: 16px; object-fit: cover; }
.footer .logo-texto { color: #fff; font-size: 34px; }
.footer .logo-texto span { font-size: 34px; }
.footer .desc { margin: 18px 0; max-width: 38ch; color: #AAA; font-size: .92rem; }
.footer h4 { margin-bottom: 14px; color: var(--amarillo); font-size: .7rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.footer .f-links { display: grid; gap: 10px; font-size: .92rem; }
.footer a:hover { color: #fff; }
.footer .contacto-item { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; font-size: .89rem; }
.footer .contacto-item .ico { color: var(--naranja); flex: none; margin-top: 2px; width: 18px; height: 18px; }
.redes { display: flex; gap: 9px; flex-wrap: wrap; }
.red-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: var(--t); }
.red-btn:hover { transform: translateY(-3px); }
.red-btn.ig:hover { background: linear-gradient(45deg, #F09433, #DC2743, #BC1888); }
.red-btn.wa:hover { background: #25D366; }
.red-btn.tt:hover { background: #000; box-shadow: inset 0 0 0 2px #25F4EE; }
.red-btn.mp:hover { background: #4285F4; }
.footer-abajo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 40px; padding-top: 22px; border-top: 1px solid #333; color: #777; font-size: .8rem; }
.footer-abajo a { text-decoration: underline; text-underline-offset: 3px; }

/* Velo, drawer y modales */
.velo { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.68); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.velo.visible { opacity: 1; pointer-events: auto; }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 510; width: min(430px, 100%); background: var(--papel); transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; }
.drawer.abierto { transform: none; }
.drawer-cab { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 2px solid var(--tinta); }
.drawer-cab h3 { font-size: 1.3rem; }
.drawer-cuerpo { flex: 1; overflow-y: auto; padding: 8px 22px; }
.drawer-pie { display: grid; gap: 11px; padding: 18px 22px 24px; border-top: 1px solid var(--linea); background: #fff; }
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; }
.drawer-total span { color: var(--apagado); font-weight: 600; }
.drawer-total b { font-family: var(--display); font-size: 1.7rem; color: var(--naranja-hondo); }

.linea-pedido { display: grid; grid-template-columns: 70px 1fr auto; gap: 13px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.linea-pedido img { width: 70px; height: 70px; object-fit: cover; border-radius: 3px; background: #fff; }
.lp-info { min-width: 0; }
.lp-info b { display: block; font-size: .92rem; line-height: 1.3; }
.lp-info small { color: var(--apagado); font-size: .77rem; }
.lp-precio { display: block; margin-top: 3px; font-family: var(--display); font-size: 1rem; color: var(--naranja-hondo); }
.cant { display: inline-flex; align-items: center; margin-top: 7px; border: 1px solid var(--linea); background: #fff; }
.cant button { width: 28px; height: 28px; display: grid; place-items: center; font-weight: 800; }
.cant button:hover { background: var(--papel); color: var(--naranja-hondo); }
.cant span { min-width: 28px; text-align: center; font-weight: 700; font-size: .88rem; }
.lp-quitar { align-self: flex-start; padding: 5px; color: var(--apagado); }
.lp-quitar:hover { color: var(--rojo); }
.lp-quitar .ico { width: 17px; height: 17px; }

.modal { position: fixed; inset: 0; z-index: 520; display: none; place-items: center; padding: 20px; }
.modal.abierto { display: grid; }
.modal-caja { position: relative; width: min(760px, 100%); max-height: 90vh; overflow-y: auto; background: #fff; border: 2px solid var(--tinta); box-shadow: 12px 12px 0 var(--tinta); }
.modal-cerrar { position: absolute; top: 12px; right: 12px; z-index: 4; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--linea); display: grid; place-items: center; }
.modal-cerrar:hover { background: var(--rojo); color: #fff; }
.modal-video { background: #000; }
.modal-video video { width: 100%; max-height: 78vh; }

/* Avisos */
.toasts { position: fixed; left: 22px; bottom: 22px; z-index: 600; display: grid; gap: 10px; }
.toast { display: flex; align-items: center; gap: 12px; max-width: 340px; padding: 14px 18px; background: var(--tinta); color: #fff; box-shadow: 6px 6px 0 rgba(0,0,0,.25); font-size: .9rem; font-weight: 700; animation: entrar .25s ease; }
.toast.ok { background: var(--verde); }
.toast.err { background: var(--rojo); }
.toast .ico { width: 19px; height: 19px; }
@keyframes entrar { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.toast.saliendo { animation: salir .2s ease forwards; }
@keyframes salir { to { opacity: 0; transform: translateX(-20px); } }

/* Chat */
.chat-lanzador {
  position: fixed; right: 22px; bottom: 22px; z-index: 450;
  height: 54px; padding: 0 19px; display: flex; align-items: center; gap: 9px;
  border: 2px solid #fff; border-radius: 28px; background: var(--rosa); color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.25); font-weight: 800; font-size: .88rem;
}
.chat-lanzador:hover { transform: translateY(-2px); }
.chat-lanzador .ico { width: 22px; height: 22px; }
.chat-lanzador.abierto span { display: none; }
.chat-lanzador .globo { top: -4px; right: -4px; background: var(--amarillo); color: var(--tinta); }

.chat-invite { display: none; position: fixed; right: 22px; bottom: 88px; z-index: 449; width: 240px; padding: 14px 16px; background: #fff; border: 2px solid var(--tinta); box-shadow: 6px 6px 0 var(--tinta); font-size: .86rem; font-weight: 600; }
.chat-invite.visible { display: block; }
.chat-invite button { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; font-size: .7rem; }

.chat-panel {
  position: fixed; right: 22px; bottom: 88px; z-index: 460;
  width: min(390px, calc(100vw - 28px)); height: min(580px, calc(100vh - 120px));
  background: #fff; border: 2px solid var(--tinta); box-shadow: 9px 9px 0 var(--tinta);
  display: grid; grid-template-rows: auto 1fr auto auto auto; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; transition: .2s ease;
}
.chat-panel.abierto { opacity: 1; transform: none; pointer-events: auto; }
.chat-cab { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 12px 14px; background: var(--amarillo); color: var(--tinta); }
.chat-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--tinta); color: var(--amarillo); display: grid; place-items: center; font-family: var(--display); }
.chat-cab .info { flex: 1; min-width: 0; }
.chat-cab .info b { display: block; font-size: 1rem; }
.chat-cab .info span { display: flex; align-items: center; gap: 7px; font-size: .76rem; }
.chat-cab button:hover { background: rgba(0,0,0,.1); }

.chat-mensajes { padding: 16px; overflow-y: auto; background: var(--papel); display: flex; flex-direction: column; gap: 11px; }
.msj { display: flex; gap: 9px; max-width: 92%; }
.msj.bot { align-self: flex-start; }
.msj.yo { align-self: flex-end; flex-direction: row-reverse; }
.msj .burbuja { padding: 11px 13px; border-radius: 7px; font-size: .88rem; line-height: 1.45; }
.msj.bot .burbuja { background: #fff; border: 1px solid var(--linea); }
.msj.yo .burbuja { background: var(--tinta); color: #fff; }
.msj .burbuja a { color: var(--naranja-hondo); font-weight: 800; text-decoration: underline; }
.msj.yo .burbuja a { color: var(--amarillo); }
.msj .burbuja ul { display: grid; gap: 5px; margin-top: 7px; }
.msj .burbuja li { display: flex; gap: 7px; }
.msj .burbuja li::before { content: "•"; color: var(--naranja); font-weight: 900; }
.msj-ava { width: 28px; height: 28px; flex: none; align-self: flex-end; border-radius: 50%; background: var(--rosa); color: #fff; display: grid; place-items: center; font-size: .8rem; font-family: var(--display); }

.chat-productos { display: grid; gap: 7px; margin-top: 9px; }
.chat-p { display: flex; gap: 10px; align-items: center; width: 100%; padding: 7px; background: #fff; border: 1px solid var(--linea); text-align: left; transition: var(--t); }
.chat-p:hover { border-color: var(--tinta); }
.chat-p img { width: 46px; height: 46px; flex: none; object-fit: cover; }
.cp-t { flex: 1; min-width: 0; }
.cp-t b { display: block; font-size: .83rem; line-height: 1.3; }
.cp-t small { font-size: .72rem; color: var(--apagado); }
.cp-pr { font-family: var(--display); font-size: .88rem; color: var(--naranja-hondo); }

.chat-rapidas { display: flex; gap: 6px; padding: 9px 12px; overflow-x: auto; border-top: 1px solid var(--linea); background: #fff; scrollbar-width: none; }
.chat-rapidas::-webkit-scrollbar { display: none; }
.chat-rapidas button { flex: none; padding: 7px 11px; border: 1px solid var(--tinta); border-radius: 16px; background: #fff; font-size: .76rem; font-weight: 700; transition: var(--t); }
.chat-rapidas button:hover { background: var(--tinta); color: #fff; }

.chat-entrada { display: grid; grid-template-columns: 1fr 45px; gap: 7px; padding: 10px; border-top: 1px solid var(--linea); background: #fff; align-items: end; }
.chat-entrada textarea { resize: none; max-height: 90px; padding: 11px 12px; border: 1px solid var(--linea); background: var(--papel); font-size: .9rem; line-height: 1.4; }
.chat-entrada textarea:focus { outline: none; border-color: var(--tinta); }
.chat-enviar { width: 45px; height: 45px; background: var(--naranja); color: #fff; display: grid; place-items: center; }
.chat-enviar:hover { background: var(--naranja-hondo); }

.escribiendo { display: flex; gap: 4px; padding: 14px 16px !important; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--apagado); animation: puntear 1.3s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .17s; }
.escribiendo i:nth-child(3) { animation-delay: .34s; }
@keyframes puntear { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-6px); opacity: 1; } }

.chat-pie-nota { padding: 0 12px 9px; background: #fff; color: var(--apagado); font-size: .66rem; text-align: center; }

body.chat-abierto .chat-invite { display: none; }

/* Responsive */
@media (max-width: 1080px) {
  .header-buscar { display: none; }
  .cats-grid { grid-template-columns: repeat(4, 1fr); }
  .productos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .productos-grid.compacta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .precios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .redes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos-escena { grid-template-columns: 1fr; gap: 40px; }
  .pasos-visual { position: static; max-width: 380px; margin-inline: auto; }
  .galeria-perso { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalogo-layout { grid-template-columns: 1fr; }
  .ficha-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .franja-beneficios { grid-template-columns: repeat(2, 1fr); }
  .visita { grid-template-columns: 1fr; gap: 34px; }
  .hero-texto { width: 66%; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .btn-menu { display: grid; }
  .cta-wa { grid-template-columns: 1fr; padding: 34px 26px; }
  .filtros {
    position: fixed; inset: auto 0 0 0; top: auto; z-index: 505;
    max-height: 84vh; border: 0; border-top: 2px solid var(--tinta); border-radius: 0;
    transform: translateY(100%); transition: transform .25s ease; padding-bottom: 80px;
  }
  .filtros.abierto { transform: none; }
  .btn-filtros-movil { display: inline-flex; }
  .filtros-cerrar-movil { display: flex; align-items: center; justify-content: space-between; }
}

@media (max-width: 720px) {
  :root { --header-h: 66px; }
  .contenedor { padding-inline: 16px; }
  .seccion { padding: 60px 0; }
  .seccion-compacta { padding: 40px 0; }
  .logo-texto, .logo-texto span { font-size: 17px; }
  .logo-marca { font-size: 24px; }

  .hero { align-items: flex-end; min-height: 700px; }
  .hero-foto { background-position: 62% center; }
  .hero-sombra { background: linear-gradient(0deg, rgba(15,13,11,.92) 0%, rgba(15,13,11,.45) 62%, rgba(15,13,11,.15) 100%); }
  .hero-texto { width: 100%; padding: 250px 0 34px; }
  .hero h1 { font-size: clamp(46px, 15vw, 70px); }
  .hero-datos { gap: 20px; }
  .hero-dato b { font-size: 1.35rem; }
  .hero-sello { width: 88px; height: 88px; right: 16px; bottom: auto; top: 180px; }
  .hero-sello strong { font-size: 20px; }
  .hero-sello span { font-size: .52rem; }
  .buscar-caja { flex-direction: column; }
  .buscar-campo { height: 56px; box-shadow: 5px 5px 0 var(--cian); }
  .buscar-caja .btn { height: 50px; min-height: 50px; width: 100%; }

  .sec-cab { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sec-cab h2 { font-size: 34px; }
  .cats-grid { grid-template-columns: repeat(2, 1fr); }
  .productos-grid, .productos-grid.compacta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .p-cuerpo { padding: 13px; }
  .p-nombre { font-size: .94rem; }
  .p-precio { font-size: 1.2rem; }
  .p-add { padding: 0 10px; font-size: 0; gap: 0; }
  .p-add .ico { width: 18px; height: 18px; }
  .p-media::after { display: none; }
  .precios-grid, .galeria-perso, .franja-beneficios, .redes-grid { grid-template-columns: 1fr; }
  .redes-grid { grid-template-columns: repeat(2, 1fr); }
  .galeria-perso { grid-template-columns: repeat(2, 1fr); }
  .paso { grid-template-columns: 44px 1fr; }
  .pasos-lista { padding-left: 48px; }
  .pasos-riel { left: 16px; }
  .paso-t-n { left: -48px; width: 34px; height: 34px; font-size: 12px; border-width: 2px; }
  .paso-t { padding: 20px 0; }
  .paso-t h3 { font-size: 1.08rem; }
  .creamos-grid { grid-template-columns: 1fr; gap: 46px; }
  .marquesina { margin-bottom: 44px; }
  .marquesina-pista b { font-size: 16px; }
  .creamos-visual { width: min(320px, 82%); }
  .creamos-sello { width: 108px; height: 108px; left: -4%; }
  .creamos-sello strong { font-size: 30px; }
  .creamos-sello small { max-width: 78px; font-size: .58rem; }
  .ficha-acciones .fila { grid-template-columns: 1fr; }
  .galeria-principal { box-shadow: 7px 7px 0 var(--cian); }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .video-card { width: 82vw; }
  .toasts { left: 12px; right: 12px; bottom: 84px; }
  .toast { max-width: none; }
  .chat-lanzador { width: 54px; padding: 0; justify-content: center; }
  .chat-lanzador span { display: none; }
  .chat-panel { right: 10px; left: 10px; width: auto; bottom: 84px; height: min(76vh, calc(100vh - 108px)); }
  .chat-invite { display: none !important; }
  .chat-lanzador { right: 16px; bottom: 16px; }
  .mini-mapa { height: 320px; box-shadow: 6px 6px 0 var(--cian); }
}

@media (max-width: 400px) {
  .productos-grid, .productos-grid.compacta, .galeria-perso { grid-template-columns: 1fr; }
  .chat-panel { right: 8px; left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .marquesina-pista { animation: none; }
  .revelar, .creamos-marco img, .pasos-marco img { opacity: 1; transform: none; }
  .paso-t .paso-t-extra { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
}

@media print {
  .header, .footer, .chat-panel, .chat-lanzador, .filtros, .chat-invite, .velo { display: none !important; }
}