/* Catálogo público. Todos los temas comparten los mismos elementos (ver tests/plantillas.mjs): cabecera transparente con el logo al centro,
   buscador cuadrado, menú (tres rayitas en el celular), carrusel de categorías con foto, productos, pie y páginas de texto.
   Cada tema (html[data-plantilla]) cambia colores, tipografías y proporciones desde las variables de abajo, más unos pocos ajustes. */
:root {
  --bg: #fff; --fg: #111; --muted: #6b6b70; --line: rgba(0, 0, 0, .14);
  --hdr-fg: #fff; --hdr-solid: #000; --hdr-sombra: rgba(0, 0, 0, .35);
  --busca-bg: #fff; --busca-fg: #111; --busca-r: 4px; --busca-borde: #fff;
  --banner-bg: linear-gradient(135deg, #2a2a2e, #050506);
  --btn-bg: #000; --btn-fg: #fff; --btn-r: 999px; --btn-hover: #333;
  --fab-bg: #000; --fab-fg: #fff;
  --card-bg: transparent; --card-fg: #111; --card-r: 0; --card-pad: 0;
  --img-ratio: 1 / 1; --img-fit: cover; --img-r: 0; --img-bg: #f1f1f1;
  --price: #111; --envio: #111;
  --cols: 5; --cols-md: 3; --cols-sm: 2;
  --cat-r: 14px; --cat-fg: #111; --cat-act: #000; --cat-bg: #ececec;
  --foot-bg: #000; --foot-fg: #fff;
  --panel-bg: #fff; --panel-fg: #000; --panel-line: #000; --panel-muted: #777;
  --font: Inter, system-ui, sans-serif; --font-t: Poppins, sans-serif;
  --hdr-h: 146px; --max: 1400px;
  /* Alto de la cabecera arriba de todo, con el logo grande sobre el banner. */
  --hdr-top: 190px;
}
@media (min-width: 761px) { :root { --hdr-h: 150px; --hdr-top: 222px; } }
html[data-plantilla="coeur"] {
  --bg: #51000f; --fg: #f4b6c2; --muted: #c9758a; --line: rgba(244, 182, 194, .25);
  --hdr-solid: #51000f; --busca-bg: #faf7f5; --busca-fg: #51000f; --busca-borde: #faf7f5; --busca-r: 4px;
  --banner-bg: linear-gradient(135deg, #6a0a1d, #3d000b);
  --btn-bg: #51000f; --btn-fg: #f4b6c2; --btn-hover: #6a0a1d; --fab-bg: #f4b6c2; --fab-fg: #51000f;
  --card-bg: #faf7f5; --card-fg: #51000f; --card-r: 22px; --card-pad: 12px;
  --img-ratio: 1 / 1; --img-fit: cover; --img-r: 22px; --img-bg: #fbe3e8;
  --price: #51000f; --envio: #51000f;
  --cat-r: 28px; --cat-fg: #f4b6c2; --cat-act: #f4b6c2; --cat-bg: #6a0a1d;
  --foot-bg: #3d000b; --foot-fg: #f4b6c2;
  --panel-bg: #faf7f5; --panel-fg: #51000f; --panel-line: #51000f; --panel-muted: #c9758a;
  --font: Poppins, Inter, system-ui, sans-serif; --font-t: Syne, Poppins, sans-serif;
}
html[data-plantilla="woow"] {
  --bg: #fff; --fg: #1e3a5f; --muted: #6d7c92; --line: rgba(30, 58, 95, .16);
  --hdr-solid: #235eaa; --busca-r: 6px; --busca-borde: #fff;
  --banner-bg: linear-gradient(135deg, #2f78cf, #17447e);
  --btn-bg: #eb6d3f; --btn-fg: #fff; --btn-hover: #d3562a; --fab-bg: #eb6d3f; --fab-fg: #fff;
  --card-fg: #1e3a5f; --img-ratio: 1 / 1; --img-fit: cover; --img-r: 24px; --img-bg: #eef2f9;
  --price: #1e3a5f; --envio: #235eaa; --cols: 4; --cols-md: 3;
  --cat-r: 24px; --cat-fg: #1e3a5f; --cat-act: #eb6d3f; --cat-bg: #eef2f9;
  --foot-bg: #235eaa; --foot-fg: #fff;
  --panel-bg: #fff; --panel-fg: #1e3a5f; --panel-line: #235eaa; --panel-muted: #6d7c92;
  --font: "Albert Sans", Inter, system-ui, sans-serif; --font-t: "Albert Sans", Poppins, sans-serif;
}
html[data-plantilla="triad"] {
  --bg: #000; --fg: #fff; --muted: #a9a9b0; --line: rgba(255, 255, 255, .18);
  --hdr-solid: #000; --busca-r: 0; --busca-borde: #fff;
  --banner-bg: linear-gradient(135deg, #2a2a2e, #000);
  --btn-bg: #fff; --btn-fg: #000; --btn-r: 0; --btn-hover: #d9d9d9; --fab-bg: #fff; --fab-fg: #000;
  --card-fg: #fff; --img-ratio: 1 / 1; --img-fit: cover; --img-r: 0; --img-bg: #111;
  --price: #fff; --envio: #fff; --cols: 4; --cols-md: 3;
  --cat-r: 0; --cat-fg: #fff; --cat-act: #fff; --cat-bg: #111;
  --foot-bg: #fff; --foot-fg: #000;
  --panel-bg: #000; --panel-fg: #fff; --panel-line: #55555c; --panel-muted: #a9a9b0;
  --font: Montserrat, Inter, system-ui, sans-serif; --font-t: Montserrat, Poppins, sans-serif;
}
html[data-plantilla="bloom"] {
  --bg: #fff; --fg: #3d1f2c; --muted: #9b7183; --line: rgba(232, 74, 138, .16);
  --hdr-solid: #ff5c9a; --busca-bg: #fff; --busca-fg: #3d1f2c; --busca-borde: #fff; --busca-r: 999px;
  --banner-bg: radial-gradient(80% 90% at 85% 10%, rgba(255, 255, 255, .45), transparent 60%), linear-gradient(140deg, #ff8fbc, #ff5c9a 55%, #f0418a);
  --btn-bg: #ff5c9a; --btn-fg: #fff; --btn-hover: #f0418a; --fab-bg: #ff5c9a; --fab-fg: #fff;
  --card-bg: #fff; --card-fg: #3d1f2c; --card-r: 24px; --card-pad: 8px;
  --img-ratio: 1 / 1; --img-fit: cover; --img-r: 18px; --img-bg: #fff0f6;
  --price: #e83f84; --envio: #c2457a; --cols: 4; --cols-md: 3;
  --cat-r: 50%; --cat-fg: #3d1f2c; --cat-act: #ff5c9a; --cat-bg: #ffe3ef;
  --foot-bg: #fff0f6; --foot-fg: #3d1f2c;
  --panel-bg: #fff; --panel-fg: #3d1f2c; --panel-line: #ffd0e2; --panel-muted: #9b7183;
  --rosa: #ff5c9a; --rosa-suave: #ffe3ef;
  --font: Nunito, Inter, system-ui, sans-serif; --font-t: Nunito, Poppins, sans-serif;
}
html[data-plantilla="wave"] {
  --bg: #f3f7fd; --fg: #0b2a5b; --muted: #5d769b; --line: rgba(10, 95, 208, .14);
  --hdr-solid: #0a5fd0; --hdr-sombra: rgba(8, 70, 163, .35); --busca-bg: #fff; --busca-fg: #0b2a5b; --busca-borde: #fff; --busca-r: 999px;
  --banner-bg: radial-gradient(70% 90% at 88% 0%, rgba(255, 255, 255, .28), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(0, 200, 255, .35), transparent 60%), linear-gradient(135deg, #1f7bff, #0a5fd0 55%, #0846a3);
  --btn-bg: #0a5fd0; --btn-fg: #fff; --btn-hover: #0846a3; --fab-bg: #0a5fd0; --fab-fg: #fff;
  --card-bg: #fff; --card-fg: #0b2a5b; --card-r: 22px; --card-pad: 8px;
  --img-ratio: 1 / 1; --img-fit: cover; --img-r: 16px; --img-bg: #e3edfb;
  --price: #0a5fd0; --envio: #0a8f5a; --cols: 4; --cols-md: 3;
  --cat-r: 50%; --cat-fg: #0b2a5b; --cat-act: #0a5fd0; --cat-bg: #e3edfb;
  --foot-bg: #0a5fd0; --foot-fg: #fff;
  --panel-bg: #fff; --panel-fg: #0b2a5b; --panel-line: #d3e2f7; --panel-muted: #5d769b;
  --ola: linear-gradient(120deg, #00c2ff, #1f7bff 45%, #0a5fd0);
  --font: "Exo 2", Inter, system-ui, sans-serif; --font-t: "Exo 2", Poppins, sans-serif;
}
html[data-plantilla="insane"] {
  --bg: #0a0710; --fg: #f3effa; --muted: #a59bb5; --line: #2c2140;
  --hdr-solid: rgba(10, 7, 16, .96); --busca-r: 4px; --busca-bg: #140e1d; --busca-fg: #f3effa; --busca-borde: #3a2c55;
  --banner-bg: linear-gradient(135deg, #1c1428, #0a0710);
  --btn-bg: #a64dff; --btn-fg: #fff; --btn-hover: #f2f53d; --fab-bg: #f2f53d; --fab-fg: #0a0710;
  --card-bg: #140e1d; --card-fg: #f3effa; --card-r: 14px; --img-bg: #1c1428;
  --price: #f2f53d; --envio: #3ddc84; --cols: 4; --cols-md: 3;
  --cat-r: 12px; --cat-fg: #f3effa; --cat-act: #f2f53d; --cat-bg: #1c1428;
  --foot-bg: #140e1d; --foot-fg: #f3effa;
  --panel-bg: #0a0710; --panel-fg: #f3effa; --panel-line: #3a2c55; --panel-muted: #a59bb5;
  --purple: #a64dff; --yellow: #f2f53d; --purple-glow: rgba(166, 77, 255, .45); --yellow-glow: rgba(242, 245, 61, .35);
  --f-marca: 'Rubik Wet Paint', 'Anton', Impact, sans-serif; --f-garabato: 'Permanent Marker', 'Anton', cursive; --f-titulo: 'Anton', Impact, sans-serif;
  --font-t: Anton, Impact, sans-serif;
}

html[data-plantilla="aura"] {
  --bg: #f7f2ea; --fg: #2b211a; --muted: #8a7a6a; --line: rgba(43, 33, 26, .14);
  --hdr-solid: #2b211a; --busca-bg: #fffaf3; --busca-fg: #2b211a; --busca-borde: #fffaf3; --busca-r: 999px;
  --banner-bg: radial-gradient(70% 90% at 80% 10%, rgba(214, 170, 104, .55), transparent 60%), linear-gradient(150deg, #4a3526, #2b211a 55%, #19120c);
  --btn-bg: #2b211a; --btn-fg: #f7f2ea; --btn-hover: #9a6f36; --fab-bg: #b8894a; --fab-fg: #fff;
  --card-bg: #fffaf3; --card-fg: #2b211a; --card-r: 22px; --card-pad: 10px;
  --img-ratio: 4 / 5; --img-fit: cover; --img-r: 999px 999px 16px 16px; --img-bg: #efe5d6;
  --price: #9a6f36; --envio: #66765a; --cols: 4; --cols-md: 3;
  --cat-r: 999px 999px 18px 18px; --cat-fg: #2b211a; --cat-act: #b8894a; --cat-bg: #ebe0cf;
  --foot-bg: #2b211a; --foot-fg: #efe3cf;
  --panel-bg: #fffaf3; --panel-fg: #2b211a; --panel-line: #d9cbb6; --panel-muted: #8a7a6a;
  --oro: #b8894a;
  --font: "DM Sans", Inter, system-ui, sans-serif; --font-t: "Playfair Display", Georgia, serif;
}
html[data-plantilla="nova"] {
  --bg: #070a18; --fg: #eef1ff; --muted: #9aa3c7; --line: rgba(255, 255, 255, .12);
  --hdr-solid: rgba(9, 12, 30, .86); --hdr-sombra: rgba(0, 0, 0, .5); --busca-bg: rgba(255, 255, 255, .1); --busca-fg: #fff; --busca-borde: rgba(255, 255, 255, .24); --busca-r: 14px;
  --banner-bg: radial-gradient(60% 80% at 18% 20%, rgba(34, 211, 238, .5), transparent 62%), radial-gradient(60% 85% at 85% 30%, rgba(168, 85, 247, .6), transparent 62%), linear-gradient(160deg, #0d1336, #070a18);
  --btn-bg: #8b5cf6; --btn-fg: #fff; --btn-hover: #7c3aed; --fab-bg: #22d3ee; --fab-fg: #06121a;
  --card-bg: rgba(255, 255, 255, .045); --card-fg: #eef1ff; --card-r: 20px; --card-pad: 10px;
  --img-ratio: 1 / 1; --img-fit: cover; --img-r: 14px; --img-bg: rgba(255, 255, 255, .06);
  --price: #67e8f9; --envio: #34d399; --cols: 4; --cols-md: 3;
  --cat-r: 18px; --cat-fg: #eef1ff; --cat-act: #22d3ee; --cat-bg: rgba(255, 255, 255, .07);
  --foot-bg: #050713; --foot-fg: #eef1ff;
  --panel-bg: #0d1126; --panel-fg: #eef1ff; --panel-line: #2a3160; --panel-muted: #9aa3c7;
  --neon: linear-gradient(120deg, #22d3ee, #a855f7 60%, #ec4899);
  --font: "Space Grotesk", Inter, system-ui, sans-serif; --font-t: "Space Grotesk", Poppins, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
/* Donde se puede, "clip" en vez de "hidden": corta igual lo que se sale a los costados pero sin convertir la página en una caja
   con desplazamiento propio (en iPhone eso hacía que la página quedara trabada después de mover un menú encima). */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
/* Sin el "rebote" de Safari al tirar la página hacia abajo estando arriba de todo: en el iPhone abría una franja negra
   que tapaba la barra de aviso y el logo (la cabecera queda fija y Safari pintaba la franja encima). */
html, body { overscroll-behavior-y: none; }
body { font-family: var(--font); color: var(--fg); background: var(--bg); line-height: 1.5; }
html[data-plantilla="insane"] body { background: radial-gradient(1200px 500px at 0% 0%, rgba(109, 40, 217, .16), transparent 60%), radial-gradient(900px 400px at 100% 0%, rgba(242, 245, 61, .06), transparent 60%), #0a0710; }
h1, h2, h3 { font-family: var(--font-t); }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }

/* ---------- Cabecera ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 70; color: var(--hdr-fg); transition: background-color .25s ease, box-shadow .25s ease; }
.hdr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .32), transparent); pointer-events: none; transition: opacity .25s ease; }
.hdr--solid { background: var(--hdr-solid); box-shadow: 0 4px 24px var(--hdr-sombra); }
.hdr--solid::before { opacity: 0; }
.hdr__fila, .hdr__nav { position: relative; }
.hdr__fila { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "burger logo acc" "buscar buscar buscar"; align-items: center; gap: 10px 12px; padding: 12px 16px 12px; }
.hdr__burger { grid-area: burger; justify-self: start; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -8px; border: 0; background: none; color: inherit; cursor: pointer; }
.hdr__logo { grid-area: logo; position: relative; display: flex; justify-content: center; }
.hdr__acc { grid-area: acc; justify-self: end; display: flex; align-items: center; gap: 2px; }
.hdr__buscar { grid-area: buscar; position: relative; }
.hdr__buscar input { width: 100%; height: 46px; padding: 0 46px 0 14px; border: 1px solid var(--busca-borde); border-radius: var(--busca-r); background: var(--busca-bg); color: var(--busca-fg); font: 400 16px var(--font); }
.hdr__buscar input::placeholder { color: #6b6b70; }
.hdr__buscar input:focus { outline: 2px solid var(--hdr-fg); outline-offset: 2px; }
.hdr__lupa { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #666; pointer-events: none; display: grid; }
html[data-plantilla="insane"] .hdr__lupa { color: var(--purple); }
/* Arriba de todo el logo se ve grande; al bajar (o en las páginas de texto) se achica. */
.logo-circulo { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: #111; color: #fff; font: 800 34px var(--font-t); letter-spacing: .03em; cursor: pointer; overflow: hidden; transition: width .3s ease, height .3s ease, font-size .3s ease; border: 0; box-shadow: none; }
.hdr:not(.hdr--arriba) .logo-circulo { width: 52px; height: 52px; font-size: 18px; }
.hdr__btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px; border: 0; background: none; color: inherit; font: 500 15px var(--font); cursor: pointer; white-space: nowrap; }
.hdr__btn:hover { opacity: .8; }
.hdr__t { display: none; }
.hdr__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--hdr-fg); color: var(--hdr-solid); font: 700 12px var(--font); }
html[data-plantilla="insane"] .hdr__n { background: var(--yellow); color: #0a0710; }
@keyframes cta-bump { 0% { transform: none; } 40% { transform: scale(1.35); } 100% { transform: none; } }
.hdr__n.is-bump { animation: cta-bump .32s ease; }
.hdr__nav { display: none; }

@media (min-width: 761px) {
  .hdr__fila { grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr); grid-template-areas: "buscar logo acc"; padding: 14px 28px 6px; }
  .hdr__burger { display: none; }
  .hdr__buscar { max-width: 290px; }
  .hdr__buscar input { height: 42px; font-size: 14px; }
  .logo-circulo { width: 140px; height: 140px; font-size: 44px; }
  .hdr:not(.hdr--arriba) .logo-circulo { width: 62px; height: 62px; font-size: 21px; }
  .hdr__t { display: inline; }
  .hdr__acc { gap: 14px; }
  .hdr__nav { display: flex; justify-content: center; align-items: center; gap: 34px; padding: 8px 28px 14px; font: 500 16px var(--font); }
  .hdr__nav a, .hdr__nav > .hdr__prod > button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; border-bottom: 2px solid transparent; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
  .hdr__nav a:hover, .hdr__nav button:hover { opacity: .8; }
  .hdr__nav .actual { border-bottom-color: currentColor; }
  .hdr__prod { position: relative; }
  .hdr__drop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 5; display: grid; min-width: 230px; max-height: 60vh; overflow-y: auto; margin-top: 8px; padding: 6px; background: var(--hdr-solid); color: var(--hdr-fg); border: 1px solid rgba(255, 255, 255, .22); border-radius: min(var(--busca-r), 20px); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
  .hdr__drop button { padding: 11px 14px; border: 0; background: none; color: inherit; font: 500 15px var(--font); text-align: left; cursor: pointer; border-radius: min(calc(var(--busca-r) / 2), 12px); }
  .hdr__drop button:hover, .hdr__drop button.activa { background: rgba(255, 255, 255, .14); }
}
html[data-plantilla="insane"] .hdr__drop { background: #140e1d; }

/* Menú lateral (las tres rayitas, solo en celular). */
.drawer-fondo { position: fixed; inset: 0; z-index: 105; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.drawer-fondo.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 110; width: min(86vw, 340px); overflow-y: auto; overscroll-behavior: contain; background: var(--hdr-solid); color: var(--hdr-fg); transform: translateX(-100%); visibility: hidden; transition: transform .3s cubic-bezier(.22, .9, .28, 1), visibility 0s linear .3s; }
html[data-plantilla="insane"] .drawer { background: #0a0710; }
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer__vista { padding: 64px 0 24px; }
.drawer__cerrar { position: absolute; top: 8px; right: 12px; width: 44px; height: 44px; border: 0; background: none; color: inherit; font-size: 32px; line-height: 1; cursor: pointer; }
.drawer__volver { position: absolute; top: 14px; left: 14px; border: 0; background: none; color: inherit; font: 600 16px var(--font); cursor: pointer; padding: 8px; }
.drawer__lista { display: grid; }
.drawer__lista a, .drawer__lista button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 17px 22px; border: 0; background: none; color: inherit; font: 500 18px var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.drawer__lista .actual, .drawer__lista .activa { opacity: .55; }
@media (min-width: 761px) { .drawer, .drawer-fondo { display: none; } }

/* ---------- Banner ---------- */
.banner { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: calc(var(--hdr-top) + 120px); padding: 0 16px 26px; background: var(--banner-bg); background-size: cover; background-position: center; }
@media (min-width: 761px) { .banner { min-height: 400px; padding-bottom: 40px; } }
.banner__nombre { font: 800 clamp(28px, 5vw, 56px)/1.05 var(--font-t); text-align: center; text-transform: uppercase; letter-spacing: .04em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.banner__nombre:empty { display: none; }
.banner--foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .25), transparent 45%); pointer-events: none; }
/* Sin foto de banner, la franja no se muestra: la cabecera queda con el color del tema y el contenido empieza debajo. */
html.sin-banner .banner { display: none; }
/* Foto del banner: la franja toma la proporción que eligió el comercio (panorámico, 16:9, 1:1 o 3:4). Los formatos altos se ven enteros, centrados sobre el color del tema. */
.banner--foto { background-image: var(--banner-img), var(--banner-bg); background-size: cover, cover; background-position: center; background-repeat: no-repeat; }
.banner[data-formato="horizontal"] { min-height: 0; height: min(56.25vw, 88vh); }
.banner[data-formato="cuadrado"] { min-height: 0; height: min(100vw, 88vh); background-size: contain, cover; }
/* En la computadora el banner cuadrado se ve entero (cuadrado), centrado sobre el color de la plantilla, como en la vista del recorte. */
@media (min-width: 761px) { .banner[data-formato="cuadrado"] { height: min(56.25vw, 88vh); background-size: contain, cover; } }
.banner[data-formato="vertical"] { min-height: 0; height: min(133.34vw, 88vh); background-size: contain, cover; }
html.sin-banner .cats { padding-top: 48px; }
html.sin-banner:not([data-plantilla="insane"]):not([data-pagina]) body, html.sin-banner:not([data-plantilla="insane"])[data-pagina="inicio"] body { padding-top: var(--hdr-top); }
.lapiz { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #fff; border-radius: 50%; background: #000; color: #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); z-index: 6; }
.lapiz--banner { position: absolute; right: 16px; bottom: 14px; }
.lapiz--logo { position: absolute; right: -20px; bottom: -6px; width: 32px; height: 32px; }

/* ---------- Secciones que elige el dueño: barra de aviso, portada sobre el banner, novedades y beneficios ----------
   Usan los colores de cada plantilla (variables), así que todas las plantillas las muestran con su estilo. */
.aviso-barra { position: relative; z-index: 1; padding: 8px 16px; background: var(--fab-bg); color: var(--fab-fg); font: 600 13px/1.35 var(--font); text-align: center; letter-spacing: .02em; }
/* La cinta: el texto corre hacia la izquierda sin fin (ver pintarAviso en catalogo.js) */
.aviso-barra { overflow: hidden; padding-left: 0; padding-right: 0; white-space: nowrap; }
.aviso-cinta { display: block; overflow: hidden; }
.aviso-cinta__pista { display: inline-flex; width: max-content; animation: aviso-corre var(--dur, 20s) linear infinite; will-change: transform; }
.aviso-cinta__item { padding: 0 22px; }
.aviso-cinta__item::after { content: "•"; margin-left: 44px; opacity: .55; }
.aviso-cinta__item { padding: 0 0 0 44px; }
@keyframes aviso-corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .aviso-cinta__pista { animation: none; width: 100%; justify-content: center; }
  .aviso-cinta__item:not(:first-child) { display: none; }
  .aviso-cinta__item { padding: 0 16px; } .aviso-cinta__item::after { content: none; }
}
@media (min-width: 761px) { .aviso-barra { font-size: 14px; } }
/* La barra suma alto a la cabecera: el banner y el contenido empiezan más abajo. */
html.con-aviso { --hdr-top: 226px; }
@media (min-width: 761px) { html.con-aviso { --hdr-top: 258px; } }

.portada { position: relative; z-index: 2; width: 100%; max-width: 640px; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 2px 18px rgba(0, 0, 0, .4); }
.portada__t { font: 800 clamp(30px, 6.4vw, 58px)/1.05 var(--font-t); letter-spacing: -.01em; }
.portada__x { margin-top: 12px; font: 400 clamp(15px, 1.6vw, 18px)/1.45 var(--font); opacity: .92; }
.portada__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 210px; margin-top: 20px; padding: 14px 28px; border-radius: var(--btn-r); background: var(--portada-btn-bg, #fff); color: var(--portada-btn-fg, #000);
  font: 700 15px var(--font); letter-spacing: .03em; text-decoration: none; text-shadow: none; transition: transform .2s ease, opacity .2s ease; }
.portada__btn:hover { opacity: .9; }
.portada__btn:active { transform: scale(.97); }
html[data-plantilla="coeur"] { --portada-btn-bg: #f4b6c2; --portada-btn-fg: #51000f; }
html[data-plantilla="woow"] { --portada-btn-bg: #eb6d3f; --portada-btn-fg: #fff; }
html[data-plantilla="insane"] { --portada-btn-bg: var(--yellow); --portada-btn-fg: #0a0710; }
html[data-plantilla="aura"] { --portada-btn-bg: #f7f2ea; --portada-btn-fg: #2b211a; }
html[data-plantilla="nova"] { --portada-btn-bg: var(--neon); --portada-btn-fg: #fff; }
html[data-plantilla="bloom"] { --portada-btn-bg: #fff; --portada-btn-fg: #e83f84; }
html[data-plantilla="wave"] { --portada-btn-bg: #fff; --portada-btn-fg: #0a5fd0; }
/* Con portada, el banner deja lugar al texto (debajo de la cabecera) y se oscurece un poco para que se lea. */
.banner.banner--portada { height: auto; min-height: calc(var(--hdr-top) + 250px); padding: calc(var(--hdr-top) + 12px) 16px 36px; }
@media (min-width: 761px) { .banner.banner--portada { min-height: max(560px, calc(var(--hdr-top) + 300px)); padding-bottom: 64px; } .portada { max-width: 760px; } .portada__t { font-size: clamp(36px, 4vw, 52px); } }
.banner--portada.banner--foto::after { background: linear-gradient(0deg, rgba(0, 0, 0, .38), transparent 60%); }
/* Celular: con título y botón (o en edición) el banner puede quedar más alto que la foto cuadrada o vertical; la foto lo llena entero
   (recortando un poco los costados) en vez de dejar una franja del color de la plantilla abajo. */
@media (max-width: 760px) {
  .banner.banner--portada.banner--foto[data-formato="cuadrado"], .banner.banner--portada.banner--foto[data-formato="vertical"] { background-size: cover, cover; }
}

.carrusel { position: relative; margin-bottom: 40px; }
.carrusel__riel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; }
.carrusel__riel::-webkit-scrollbar, .cats__riel::-webkit-scrollbar { display: none; }
/* Tres puntitos debajo del carrusel: el largo es dónde estás; tocarlos lleva a esa parte. */
.carrusel__puntos { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.carrusel__puntos[hidden] { display: none; }
.carrusel__puntos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--fg); opacity: .22; cursor: pointer; transition: width .35s ease, opacity .35s ease; }
.carrusel__puntos button.activo { width: 24px; opacity: .85; }
.carrusel__puntos button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.carrusel__riel .card { flex: none; width: min(44vw, 230px); scroll-snap-align: start; }
@media (min-width: 761px) { .carrusel__riel .card { width: 240px; } }
.carrusel__vacio { padding: 26px 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 14px; }
/* En Cœur las tarjetas de la grilla son filas; en los carruseles van paradas. */
html[data-plantilla="coeur"] .carrusel .card { flex-direction: column; align-items: stretch; }
html[data-plantilla="coeur"] .carrusel .card__media { width: auto; }

/* Oferta: precio anterior tachado y porcentaje de descuento sobre la foto. */
.card__oferta { position: absolute; top: 10px; right: 10px; padding: 4px 9px; border-radius: 999px; background: #e0262b; color: #fff; font: 800 12.5px var(--font); letter-spacing: .02em; }
.card__antes { margin-right: 4px; color: var(--muted); font-weight: 500; font-size: .82em; }
.pm__precio s { color: var(--panel-muted); font-weight: 500; font-size: .8em; }
.pm__desc-oferta { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #e0262b; color: #fff; font: 800 13px var(--font); vertical-align: middle; }

/* Estrellas de las reseñas */
.estrellas { display: flex; align-items: center; gap: 1px; margin: 2px 0 4px; font-size: 14px; line-height: 1; }
.estrellas small { margin-left: 5px; color: var(--muted); font-size: 12.5px; }
.est { color: rgba(127, 127, 127, .35); }
.est--llena { color: #f5a623; }
.est--media { background: linear-gradient(90deg, #f5a623 50%, rgba(127, 127, 127, .35) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.estrellas--grande { font-size: 18px; margin: 4px 0 10px; }
.pm__resenas { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--panel-line); }
.pm__resenas h3 { margin-bottom: 8px; font: 700 15px var(--font); }
.pm__resena { padding: 10px 0; border-bottom: 1px solid rgba(127, 127, 127, .2); }
.pm__resena p { margin: 4px 0; font-size: 14px; }
.pm__resena small, .pm__cargando { color: var(--panel-muted); font-size: 12.5px; }

/* Categorías "solo nombre": botones con el nombre, sin foto. */
.cats--nombre .cats__riel { gap: 8px; padding-top: 4px; }
.cats--nombre .cat { width: auto; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--cat-bg); font-size: 13px; }
.cats--nombre .cat__img { display: none; }
.cats--nombre .cat.activa { background: var(--cat-act); border-color: var(--cat-act); color: var(--bg); }

/* ---------- Modo "Editar secciones" (solo el dueño) ---------- */
/* En la computadora el dueño también tiene las tres rayitas (sus opciones de edición). */
@media (min-width: 761px) {
  html.es-dueno .hdr__burger { display: grid; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); z-index: 2; }
  html.es-dueno .hdr__buscar { margin-left: 56px; }
  html.es-dueno .drawer, html.es-dueno .drawer-fondo { display: block; }
  html.es-dueno .drawer__lista { display: none; }
}
.drawer__dueno { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .18); }
.drawer__sub { padding: 8px 22px 4px; font: 700 12px var(--font); letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.drawer__dueno button, .drawer__dueno a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 22px; border: 0; background: none; color: inherit; font: 600 17px var(--font); text-align: left; text-decoration: none; cursor: pointer; }
html.editando .card__add, html.editando .pm__add { opacity: .4; cursor: not-allowed; }
html.editando .hdr__carrito { opacity: .4; pointer-events: none; }
html.editando .wa-fab { display: none; }
html.editando main, html.editando .beneficios, html.editando .cats { padding-bottom: 8px; }
html.editando body { padding-bottom: 86px; }
.edicion-barra { position: fixed; left: 50%; bottom: 16px; z-index: 95; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 24px); padding: 8px 8px 8px 18px; transform: translateX(-50%);
  border-radius: 999px; background: #111; color: #fff; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); font: 600 14px var(--font); }
.edicion-barra__t { white-space: nowrap; opacity: .8; }
/* En el celular no entra el texto: quedan solo los dos botones, siempre dentro de la cápsula. */
@media (max-width: 560px) { .edicion-barra__t { display: none; } .edicion-barra { padding-left: 8px; } }
.edicion-barra button { flex: none; }
.edicion-barra button { display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; border: 0; border-radius: 999px; font: 700 14px var(--font); cursor: pointer; white-space: nowrap; }
.edicion-barra__mas { background: #2f5bff; color: #fff; }
.edicion-barra__listo { background: #fff; color: #111; }
/* Botonera de cada sección: arriba a la derecha, siempre legible sobre fotos y colores. */
.herr { position: absolute; top: 8px; right: 8px; z-index: 8; display: flex; gap: 6px; }
.herr button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px;
  background: rgba(17, 17, 17, .9); color: #fff; font: 700 13px var(--font); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.herr .herr__editar { background: #2f5bff; border-color: #2f5bff; }
html.editando .aviso-barra { position: relative; min-height: 52px; padding-right: 150px; display: flex; align-items: center; justify-content: center; }
html.editando .aviso-cinta { flex: 1; min-width: 0; }
html.editando .aviso-barra[hidden] { display: none !important; }
.aviso-barra > .herr { top: 50%; transform: translateY(-50%); }
.banner > .herr { top: auto; bottom: 14px; }
html.editando .cats { position: relative; outline: 2px dashed rgba(47, 91, 255, .45); outline-offset: -6px; border-radius: 10px; }
html.editando .carrusel, html.editando .beneficios { outline: 2px dashed rgba(47, 91, 255, .45); outline-offset: 6px; border-radius: 10px; }
html.editando .carrusel { padding-top: 46px; }
html.editando .carrusel > .herr { top: 0; right: 0; }
html.editando .banner.banner--portada { padding-bottom: 80px; }
html.editando .toast { bottom: 96px; }
.beneficios { position: relative; }
.beneficios__vacio { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.portada--vacia .portada__t { opacity: .75; }
.portada--vacia .portada__x { opacity: .7; font-size: 14px; }

/* Panel del editor: al costado en la computadora (sin oscurecer, se ve el catálogo con los cambios en vivo)
   y como hoja desde abajo en el celular. "Guardar" queda fijo abajo. */
.acceso-panel.editor { width: 460px; }
.editor__c { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; grid-auto-rows: max-content; padding-bottom: 24px; }
.editor textarea { min-height: 96px; }
/* Con el editor abierto, los avisos salen arriba para no taparlo. */
html.editor-abierto .toast { top: calc(16px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -16px); }
html.editor-abierto .toast.is-in { transform: translate(-50%, 0); }
.editor__pie { flex: none; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--panel-line); background: var(--panel-bg); }
.editor__pie .entrar { margin-top: 0; }
.editor__asa { display: none; }
/* Pantallas anchas: el catálogo se corre a la izquierda y queda entero a la vista junto al panel. */
@media (min-width: 1100px) {
  html.editor-abierto body { margin-right: 460px; }
  html.editor-abierto .hdr { right: 460px; }
  html.editor-abierto .edicion-barra { left: calc(50% - 230px); }
  html.editor-abierto #editor-fondo { display: none; }
  body, .hdr, .edicion-barra { transition: margin-right .3s cubic-bezier(.22, .9, .28, 1), right .3s cubic-bezier(.22, .9, .28, 1), left .3s cubic-bezier(.22, .9, .28, 1); }
}
@media (min-width: 761px) {
  #editor-fondo.is-open { background: transparent; }
  .acceso-panel.editor { box-shadow: -14px 0 40px rgba(0, 0, 0, .18); }
}
@media (max-width: 760px) {
  .acceso-panel.editor { top: auto; left: 0; width: 100%; max-height: 90vh; max-height: 90dvh; border-radius: 22px 22px 0 0; transform: translateY(100%); box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); }
  .acceso-panel.editor.is-open { transform: none; }
  .editor__asa { display: block; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 99px; background: currentColor; opacity: .25; flex: none; }
  .editor .acceso-panel__head { padding-top: 10px; }
  .editor__c { padding: 18px 18px 24px; }
  .editor__pie { padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); }
  .editor__iconos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
}
/* Botones de las herramientas, más grandes para el dedo. */
@media (pointer: coarse) { .herr button { min-width: 42px; height: 42px; } }
/* Sección recién agregada o editada: un destello para encontrarla. */
@keyframes resaltar { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 91, 255, 0); } 30% { box-shadow: 0 0 0 6px rgba(47, 91, 255, .45); } }
.resaltada { animation: resaltar 1.4s ease 2; border-radius: 10px; }
.editor select, .editor textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--panel-line); border-radius: 8px; font-size: 16px; color: var(--panel-fg); background: var(--panel-bg); }
.editor textarea { resize: vertical; font: 400 15px/1.4 var(--font); }
.editor__ayuda { margin: 2px 0 4px; color: var(--panel-muted); font-size: 13px; }
.editor__lbl { margin: 10px 0 4px; font-weight: 700; font-size: 14px; }
.editor__sub { margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--panel-line); font: 700 15px var(--font); }
.editor__ops { display: grid; gap: 10px; }
.editor__op { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 1px solid var(--panel-line); border-radius: 12px; background: none; color: inherit; text-align: left; cursor: pointer; }
.editor__op:hover { background: rgba(127, 127, 127, .08); }
.editor__op svg { flex: none; }
.editor__op span, .editor__radio span, .editor__switch span { display: grid; gap: 2px; }
.editor__op small, .editor__radio small, .editor__switch small { color: var(--panel-muted); font-size: 13px; font-weight: 400; line-height: 1.35; }
.editor .editor__radio, .editor .editor__switch { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--panel-line); border-radius: 12px; font-weight: 600; cursor: pointer; }
.editor .editor__radio input, .editor .editor__switch input, .editor .editor__prod input { width: 20px; height: 20px; flex: none; margin-top: 1px; padding: 0; accent-color: #2f5bff; }
.editor__radio:has(input:checked) { border-color: #2f5bff; box-shadow: 0 0 0 1px #2f5bff; }
.editor__foto { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px; border: 1px dashed var(--panel-line); border-radius: 12px; background: none; color: inherit; font: 700 14px var(--font); cursor: pointer; }
.editor__foto svg { width: 22px; height: 22px; }
.editor__bfila { display: flex; align-items: center; gap: 14px; margin: 2px 0 10px; }
.editor__bfila div:last-child { display: grid; gap: 2px; }
.editor__bfila small { color: var(--panel-muted); font-size: 13px; }
.editor__bmini { flex: none; width: 128px; aspect-ratio: 16 / 5; border-radius: 10px; background: var(--img-bg) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .25); }
.editor__bmini[data-formato="horizontal"] { aspect-ratio: 16 / 9; }
.editor__bmini[data-formato="cuadrado"] { width: 84px; aspect-ratio: 1; }
.editor__bmini[data-formato="vertical"] { width: 72px; aspect-ratio: 3 / 4; }
.editor__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.editor__dos .editor__foto { flex-direction: column; gap: 6px; padding: 12px 8px; font-size: 13.5px; text-align: center; }
.editor__prods { display: grid; gap: 6px; margin-top: 6px; }
.editor .editor__prod { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px; border: 1px solid rgba(127, 127, 127, .25); border-radius: 10px; font-weight: 500; cursor: pointer; }
.editor__prod span:last-child { display: grid; font-size: 14px; }
.editor__prod small { color: var(--panel-muted); }
.editor__mini { flex: none; width: 40px; height: 40px; border-radius: 6px; background: var(--img-bg) center / cover no-repeat; }
.editor__ben { margin-bottom: 14px; padding: 14px; border: 1px solid var(--panel-line); border-radius: 12px; }
.editor__ben-cab { display: flex; justify-content: space-between; align-items: center; }
.editor__ben-cab button, .editor__mas { border: 0; background: none; color: inherit; font: 700 14px var(--font); text-decoration: underline; cursor: pointer; }
.editor__mas { justify-self: start; margin: 0 0 6px; }
.editor__iconos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.editor__iconos button { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid rgba(127, 127, 127, .3); border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.editor__iconos button svg { width: 24px; height: 24px; }
.editor__iconos button.activo { border-color: #2f5bff; background: rgba(47, 91, 255, .12); color: #2f5bff; box-shadow: 0 0 0 1px #2f5bff; }

.beneficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; max-width: var(--max); margin: 8px auto 0; padding: 34px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--fg); text-align: center; }
.beneficios[data-n="1"] { grid-template-columns: 1fr; }
@media (min-width: 761px) { .beneficios { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); padding: 44px 28px; } .beneficios[data-n="2"] { --n: 2; } .beneficios[data-n="3"] { --n: 3; } }
.beneficio { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.beneficio svg { margin-bottom: 6px; color: var(--fg); }
html[data-plantilla="woow"] .beneficio svg { color: #eb6d3f; }
html[data-plantilla="insane"] .beneficio svg { color: var(--yellow); }
.beneficio strong { font: 700 15px/1.3 var(--font-t); }
.beneficio span { font: 400 13.5px/1.4 var(--font); color: var(--muted); }
html[data-plantilla="insane"] .beneficio strong { font-family: var(--font); }
.beneficios + .pagina + .pie-banner, .beneficios:not([hidden]) ~ .pie-banner { margin-top: 0; }

/* ---------- Carrusel de categorías ---------- */
.cats { max-width: var(--max); margin: 0 auto; padding: 24px 0 4px; }
.cats__riel { display: flex; gap: 14px; justify-content: safe center; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 16px; padding: 6px 16px 12px; scrollbar-width: none; }
/* En la PC (con mouse) las categorías que no entran se ven con las flechas o arrastrando; en el celular, deslizando. */
.cats { position: relative; }
.cats__riel.arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.cats__riel.arrastrando .cat { pointer-events: none; }
.cats__flecha { position: absolute; z-index: 2; top: 40%; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--fg); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); cursor: pointer; transition: transform .15s ease; }
.cats__flecha:hover { transform: scale(1.06); }
.cats__flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cats__flecha--izq { left: 6px; }
.cats__flecha--der { right: 6px; }
.cats__flecha[hidden] { display: none; }
.cats--nombre .cats__flecha { width: 38px; height: 38px; }
@media (hover: none), (pointer: coarse) { .cats__flecha { display: none; } }
.cat { flex: none; width: 104px; display: flex; flex-direction: column; gap: 9px; border: 0; background: none; color: var(--cat-fg); text-align: center; cursor: pointer; scroll-snap-align: start; font: 600 12.5px var(--font); }
@media (min-width: 761px) { .cat { width: 156px; } }
.cat__img { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: var(--cat-r); background: var(--cat-bg) center / cover no-repeat; color: var(--muted); font: 800 34px var(--font-t); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s ease; }
.cat.activa .cat__img { outline-color: var(--cat-act); }
.cat__n { text-transform: uppercase; letter-spacing: .06em; line-height: 1.25; }
.cat--todos .cat__img::before { content: ""; width: 14px; height: 14px; margin: 0 20px 20px 0; background: currentColor; box-shadow: 20px 0 currentColor, 0 20px currentColor, 20px 20px currentColor; }

/* ---------- Productos ---------- */
main { width: 100%; max-width: var(--max); margin: 0 auto; padding: 16px 16px 40px; min-height: 50vh; }
.seccion { margin-bottom: 44px; }
.seccion__titulo { font: 700 clamp(20px, 2.4vw, 26px) var(--font-t); margin-bottom: 18px; color: var(--fg); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 24px 18px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(var(--cols-md), minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid { grid-template-columns: repeat(var(--cols-sm), minmax(0, 1fr)); gap: 18px 12px; } }
.card { display: flex; flex-direction: column; background: var(--card-bg); color: var(--card-fg); border-radius: var(--card-r); padding: var(--card-pad); overflow: hidden; min-width: 0; }
.card__media { position: relative; aspect-ratio: var(--img-ratio); background: var(--img-bg); border-radius: var(--img-r); overflow: hidden; display: grid; place-items: center; }
/* La foto va encima de todo el cuadro: en Safari, si queda en la grilla junto al cartel de oferta, se corre hacia abajo y se corta. */
.card__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: var(--img-fit); }
.card__letra { font: 800 56px var(--font-t); color: var(--muted); opacity: .6; }
.card__tag { position: absolute; top: 10px; left: 10px; background: var(--btn-bg); color: var(--btn-fg); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.card__body { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 12px 4px 4px; min-width: 0; }
.card__name { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.card__price { margin-top: auto; font-weight: 700; font-size: 17px; color: var(--price); }
.card__price small { color: var(--muted); font-weight: 400; font-size: 13px; }
.card__envio { display: flex; align-items: center; gap: 7px; font: 600 12.5px/1.2 var(--font); color: var(--envio); }
.card__envio svg { flex: none; }
.card__add { margin-top: 6px; padding: 10px; border: 1px solid var(--btn-bg); border-radius: var(--btn-r); background: var(--btn-bg); color: var(--btn-fg); font: 600 14px var(--font); cursor: pointer; }
.card__add:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-fg); }
.card--agotado .card__media img, .card--agotado .card__letra { opacity: .4; }
.estado { text-align: center; color: var(--muted); padding: 48px 0; }
@media (max-width: 420px) { .card__name { font-size: 13.5px; } .card__price { font-size: 15px; } .card__add { padding: 9px; font-size: 13px; } }

/* ---------- Páginas de texto ---------- */
.pagina { max-width: 780px; margin: 0 auto; padding: calc(var(--hdr-h) + 28px) 20px 64px; min-height: 70vh; }
.pagina__t { font: 800 clamp(30px, 5.5vw, 48px)/1.1 var(--font-t); margin-bottom: 24px; }
.pagina__c { white-space: pre-line; font-size: 17px; line-height: 1.8; overflow-wrap: anywhere; }

/* ---------- Pie ---------- */
.pie-banner { background: var(--foot-bg); color: var(--foot-fg); margin-top: 56px; }
.pie-banner__inner { max-width: var(--max); margin: 0 auto; padding: 44px 24px 36px; text-align: center; }
.pie-banner__nombre { font: 700 22px var(--font-t); letter-spacing: .06em; text-transform: uppercase; }
.pie-banner__firma { margin-top: 22px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: 13px; line-height: 1.6; opacity: .85; }
.pie-banner__firma a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pie-banner__marca { font-weight: 800; text-decoration: none; }
.pie-banner__legal { margin-top: 14px; font-size: 13px; }
.pie-banner__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; opacity: .9; }
.pie-banner__aviso { max-width: 560px; margin: 12px auto 0; font-size: 11.5px; line-height: 1.5; opacity: .55; }
@media (max-width: 720px) { .pie-banner__sep { display: none; } .pie-banner__crea { display: block; } }
.pie-datos { list-style: none; margin: 22px auto 0; padding: 0; max-width: 1060px; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 28px; text-align: center; }
.pie-datos li { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 1 230px; min-width: 0; }
@media (max-width: 720px) { .pie-datos li { flex-basis: 100%; } }
.pie-datos__t { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.pie-datos__v { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.pie-datos a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pie-redes { display: flex; justify-content: center; gap: 14px; margin-top: 26px; }
.pie-red { display: grid; place-items: center; width: 50px; height: 50px; border: 1.5px solid currentColor; border-radius: 50%; color: inherit; text-decoration: none; transition: background .2s ease, transform .15s ease; }
.pie-red:hover { background: color-mix(in srgb, currentColor 16%, transparent); transform: translateY(-2px); }
.pie-banner__denuncia { margin-top: 10px; }
.pie-banner__denuncia button { padding: 6px 4px; border: 0; background: none; color: inherit; font: 500 12.5px var(--font); text-decoration: underline; text-underline-offset: 3px; opacity: .7; cursor: pointer; }
.pie-banner__denuncia button:hover { opacity: 1; }
html[data-plantilla="insane"] .pie-banner { border-top: 1px solid #2c2140; }
html[data-plantilla="insane"] .pie-banner__nombre { font: 400 30px 'Rubik Wet Paint', Anton, Impact, sans-serif; letter-spacing: .04em; color: var(--yellow); text-shadow: 0 0 18px var(--yellow-glow); }
html[data-plantilla="insane"] .pie-red { border-color: var(--purple); color: var(--purple); }

/* ---------- Paneles (acceso, tema, carrito) ---------- */
.acceso-fondo { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.acceso-fondo.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.acceso-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; width: 420px; max-width: 100vw; background: var(--panel-bg); color: var(--panel-fg); box-shadow: -10px 0 36px rgba(0, 0, 0, .25); transform: translateX(100%); visibility: hidden; transition: transform .3s cubic-bezier(.22, .9, .28, 1), visibility 0s linear .3s; }
.acceso-panel.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.acceso-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--panel-line); }
.acceso-panel__head h2 { margin: 0; font: 600 16px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.acceso-panel__cerrar { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: inherit; }
.acceso-panel__form { padding: 24px 22px; display: grid; gap: 8px; }
.acceso-panel .ayuda-acceso, .carrito-cuerpo .ayuda-acceso { color: var(--panel-muted); font-size: 14px; margin-bottom: 8px; }
.acceso-panel label, .carrito-cuerpo label { font-weight: 600; font-size: 14px; margin-top: 6px; display: block; margin-bottom: 4px; }
.acceso-panel input, .carrito-cuerpo input, .carrito-cuerpo select { width: 100%; padding: 12px 14px; border: 1px solid var(--panel-line); border-radius: 8px; font-size: 16px; color: var(--panel-fg); background: var(--panel-bg); }
.carrito-cuerpo .tel-pais { --tel-borde: var(--panel-line); --tel-r: 8px; --tel-bg: var(--panel-bg); }
.acceso-panel input:focus, .carrito-cuerpo input:focus, .carrito-cuerpo select:focus { outline: 2px solid var(--panel-fg); outline-offset: 1px; }
.acceso-panel .error, .carrito-cuerpo .error { font-weight: 600; font-size: 14px; min-height: 1em; }
.acceso-panel .entrar, .carrito-boton { margin-top: 12px; padding: 13px; border: 1px solid var(--btn-bg); border-radius: var(--btn-r); background: var(--btn-bg); color: var(--btn-fg); font: 700 15px var(--font); cursor: pointer; }
.acceso-panel .entrar { width: 100%; }
.acceso-panel .entrar:hover, .carrito-boton:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-fg); }
.acceso-panel .entrar:disabled, .carrito-boton:disabled { opacity: .5; }
.carrito-boton--claro { background: transparent; color: var(--panel-fg); border-color: var(--panel-line); }
.carrito-boton--claro:hover { background: var(--panel-fg); color: var(--panel-bg); border-color: var(--panel-fg); }
.carrito-cuerpo { flex: 1; overflow-y: auto; padding: 18px 22px 28px; display: flex; flex-direction: column; gap: 10px; }
/* Carrito: en el celular ocupa toda la pantalla; en la computadora es la barra lateral. Colores y redondeos del tema (--panel-*, --btn-*). */
#carrito { width: 440px; }
@media (max-width: 760px) { #carrito { width: 100%; box-shadow: none; } }
.carrito-cab { display: grid; grid-template-columns: 32px 1fr 32px; gap: 8px; padding: calc(14px + env(safe-area-inset-top)) 18px 14px; border-bottom-color: color-mix(in srgb, var(--panel-fg) 10%, transparent) !important; }
.carrito-cab__bolsa { opacity: .9; }
#carrito .acceso-panel__head h2 { text-align: center; font: 700 18px var(--font); letter-spacing: 0; text-transform: none; }
.carrito-cab__n { font-weight: 500; opacity: .75; }
#carrito .acceso-panel__cerrar { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; }
#carrito .carrito-cuerpo { gap: 0; padding: 6px 18px 0; }
.carrito-item { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--panel-fg) 10%, transparent); }
.carrito-item__foto { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--img-bg); }
.carrito-item__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carrito-item__foto span { font: 800 30px var(--font-t); opacity: .5; }
.carrito-item__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.carrito-item__fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.carrito-item__nombre { margin: 0; font: 700 15.5px/1.3 var(--font); overflow-wrap: anywhere; }
.carrito-item__sub { flex: none; font: 700 15.5px/1.3 var(--font); white-space: nowrap; }
.carrito-item__desc { margin: 0; color: var(--panel-muted); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carrito-item__unidad { margin: 0; color: var(--panel-muted); font-size: 12.5px; }
.carrito-item__acc { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.carrito-item__cant { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--panel-fg) 16%, transparent); border-radius: 12px; background: var(--panel-bg); }
.carrito-item__cant button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: none; color: var(--panel-fg); font-size: 20px; line-height: 1; cursor: pointer; }
.carrito-item__cant span { min-width: 34px; text-align: center; font-weight: 600; font-size: 15px; }
.carrito-item__quitar { display: grid; place-items: center; width: 38px; height: 38px; margin-right: -8px; border: 0; background: none; color: var(--panel-muted); cursor: pointer; }
.carrito-item__quitar:hover { color: #e0262b; }
.carrito-pie { position: sticky; bottom: 0; z-index: 1; display: grid; gap: 6px; margin: auto -18px 0; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: var(--panel-bg); border-top: 1px solid color-mix(in srgb, var(--panel-fg) 10%, transparent); }
.carrito-pie__fila { display: flex; justify-content: space-between; color: var(--panel-muted); font-size: 14px; }
.carrito-total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 800; padding: 4px 0 6px; }
.carrito-boton--fin { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 2px; padding: 15px; font-size: 16px; }
.carrito-pie__nota { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; color: var(--panel-muted); font-size: 12.5px; text-align: center; }
.carrito-vacio { display: grid; justify-items: center; gap: 8px; margin: auto 0; padding: 40px 10px; text-align: center; }
.carrito-vacio__ico { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: color-mix(in srgb, var(--panel-fg) 7%, transparent); }
.carrito-vacio h3 { margin: 8px 0 0; font: 700 19px var(--font-t); }
.carrito-vacio p { margin: 0 0 8px; color: var(--panel-muted); font-size: 14px; }
.carrito-vacio .carrito-boton { padding: 13px 28px; }
.carrito-ok { text-align: center; padding: 30px 6px; display: grid; gap: 10px; }
.carrito-ok h3 { font: 700 20px var(--font-t); }
/* Aviso de envío en "Tus datos" (si la tienda hace envíos). */
.pe-envio { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border: 1px dashed var(--panel-line); border-radius: 12px; font-size: 13px; line-height: 1.4; }
.pe-envio svg { flex: none; margin-top: 1px; }
/* Pedido recibido con datos de pago: total, alias/CBU para copiar y "Ya aboné" (WhatsApp). */
.carrito-ok.pago { padding-top: 18px; gap: 8px; }
.pago-total { font: 800 30px var(--font-t); margin: 2px 0 6px; }
.pago-datos { display: grid; gap: 8px; text-align: left; }
.pago-dato { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--panel-line); border-radius: 12px; }
.pago-dato span { display: grid; min-width: 0; flex: 1; }
.pago-dato small { font-size: 12px; opacity: .7; }
.pago-dato b { font-size: 16px; overflow-wrap: anywhere; }
.pago-copiar { flex: none; padding: 8px 14px; border: 1px solid var(--btn-bg); border-radius: var(--btn-r); background: var(--btn-bg); color: var(--btn-fg); font: 700 13px var(--font); cursor: pointer; }
.pago-copiar--ok { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.pago-nota { font-size: 13px; opacity: .8; margin: 0; }
.pago-ya { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; background: #25d366; border-color: #25d366; color: #fff; }
/* ---------- Tema del catálogo: panel oscuro desde la izquierda con la vista previa de cada plantilla ---------- */
.acceso-panel.tema-panel { left: 0; right: auto; width: min(440px, 94vw); background: #111214; color: #f2f2f4; transform: translateX(-100%); box-shadow: 12px 0 40px rgba(0, 0, 0, .4); }
.acceso-panel.tema-panel.is-open { transform: none; }
.tema-panel .acceso-panel__head { border-bottom-color: rgba(255, 255, 255, .1); }
.tema-panel .acceso-panel__form { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 32px; }
.tema-panel .ayuda-acceso { color: #a3a3ab; }
.temas { display: grid; gap: 14px; margin-top: 6px; }
.tema-opcion { display: grid; gap: 12px; width: 100%; padding: 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: #1a1b1f; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.tema-opcion:hover { border-color: rgba(255, 255, 255, .28); background: #1f2025; }
.tema-opcion:active { transform: scale(.985); }
.tema-opcion.activo { border-color: #2f5bff; box-shadow: 0 0 0 1px #2f5bff, 0 10px 30px rgba(47, 91, 255, .22); }
.tema-opcion__texto { display: grid; gap: 4px; padding: 0 6px 6px; }
.tema-opcion__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tema-opcion__cab b { font: 700 17px Poppins, Inter, sans-serif; letter-spacing: .01em; }
.tema-opcion__rep { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #e8e8ee; font: 600 11.5px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.tema-opcion__uso { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #2f5bff; color: #fff; font: 700 11.5px Inter, sans-serif; }
.tema-opcion small { color: #a3a3ab; font: 400 13.5px/1.45 Inter, sans-serif; }
/* Miniatura: una tiendita dibujada con los colores de la plantilla. */
.tm { display: grid; grid-template-rows: auto auto auto 1fr; gap: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--m-bg); color: var(--m-fg); }
.tm__hdr { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 10px; background: var(--m-hdr); }
.tm__hdr i { width: 12px; height: 2px; background: #fff; opacity: .85; box-shadow: 0 -4px #fff, 0 4px #fff; }
.tm__hdr i:last-child { width: 10px; height: 10px; border: 1.5px solid #fff; border-radius: 2px; background: none; box-shadow: none; }
.tm__hdr b { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #111; color: #fff; font: 800 7px Poppins, sans-serif; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
.tm__banner { display: flex; align-items: flex-end; justify-content: center; height: 30%; min-height: 34px; padding-bottom: 5px; background: var(--m-banner); }
.tm__banner em { color: #fff; font: 800 10px/1 var(--m-fuente); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tm__titulo { padding: 6px 0 0; color: var(--m-fg); font: 800 9px var(--m-fuente); letter-spacing: .02em; text-align: center; text-transform: uppercase; }
.tm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 8px 10px 10px; align-content: start; }
.tm__card { display: grid; gap: 3px; padding: 0; border-radius: var(--m-r); background: var(--m-card); }
.tm__img { aspect-ratio: 1; border-radius: var(--m-r); background: var(--m-img); }
.tm__lin { height: 3px; width: 75%; border-radius: 2px; background: var(--m-fg); opacity: .5; }
.tm__precio { height: 4px; width: 45%; border-radius: 2px; background: var(--m-precio); }
.tm__btn { height: 8px; border-radius: var(--m-btnr); background: var(--m-btn); }
/* Cœur: tarjetas claras en lista (foto a la izquierda). */
.tm--coeur .tm__grid { grid-template-columns: 1fr; gap: 5px; }
.tm--coeur .tm__card { grid-template-columns: 22px 1fr 34px; align-items: center; gap: 6px; padding: 4px; }
.tm--coeur .tm__img { grid-row: span 2; }
.tm--coeur .tm__lin { background: #51000f; }
.tm--coeur .tm__btn { grid-column: 3; grid-row: 1 / span 2; }
.tm--coeur .tm__precio { grid-column: 2; }
.tm--insane .tm__card { padding: 3px; border: 1px solid #2c2140; }
.tm--aura .tm__card { padding: 3px 3px 4px; justify-items: center; }
.tm--aura .tm__img { width: 100%; aspect-ratio: 1; border-radius: 99px 99px 4px 4px; }
.tm--aura .tm__banner em { font-style: italic; text-transform: none; letter-spacing: 0; font-size: 11px; }
.tm--aura .tm__btn { width: 100%; }
.tm--nova .tm__card { padding: 3px; border: 1px solid rgba(255, 255, 255, .14); }
.tm--nova .tm__btn { background: linear-gradient(120deg, #22d3ee, #a855f7 60%, #ec4899); }
.tm--nova .tm__banner em { text-transform: none; letter-spacing: 0; }
.tm--bloom .tm__card { padding: 3px; box-shadow: 0 2px 6px rgba(232, 63, 132, .18); }
.tm--bloom .tm__banner em { text-transform: none; letter-spacing: 0; }

/* Aviso, WhatsApp, bolita que vuela al carrito. */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; transform: translate(-50%, 16px); max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px; background: var(--fab-bg); color: var(--fab-fg); font-size: 15px; font-weight: 500; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.toast.toast--dueno { display: block !important; }
/* Avisos del dueño más largos (como el de entrar a editar): se leen en varias líneas, centrados y con bordes menos redondos. */
.toast.toast--dueno { width: max-content; max-width: min(440px, calc(100vw - 32px)); border-radius: 18px; text-align: center; line-height: 1.4; }
@media (max-width: 600px) { .toast:not(.toast--dueno) { display: none !important; } }
.wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--fab-fg); background: var(--fab-bg); color: var(--fab-fg); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); text-decoration: none; transition: transform .15s ease; }
.wa-fab:hover { transform: scale(1.07); }
.bolita { position: fixed; top: 0; left: 0; z-index: 130; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--fab-bg); border: 2px solid var(--fab-fg); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hdr__n.is-bump { animation: none; } html { scroll-behavior: auto; } }

/* Menú del dueño (con sesión): reemplaza a "Acceder" y lleva a la gestión y al tema. */
.menu-dueno { position: relative; }
/* Los clientes no tienen cuenta: el botón de ingreso no se muestra en el catálogo. El dueño entra desde comerciapp.ar
   y tiene sus opciones en las tres rayitas. */
#abrir-acceso, #menu-dueno { display: none !important; }
/* Sesión iniciada: tilde verde sobre el ícono de la persona (y "Sesión iniciada" en la computadora). */
.sesion-ico { position: relative; display: inline-grid; }
.sesion-ok { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #22a34a; color: #fff; box-shadow: 0 0 0 2px var(--hdr-solid); }
.menu-dueno__lista { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: #fff; border: 1px solid #000; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, .25); z-index: 8; }
.menu-dueno__lista a, .menu-dueno__lista button { display: block; width: 100%; padding: 13px 16px; border: 0; background: #fff; color: #000; font: 600 15px Inter, system-ui, sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.menu-dueno__lista a + button { border-top: 1px solid rgba(0, 0, 0, .12); }
.menu-dueno__lista a:hover, .menu-dueno__lista button:hover { background: #f2f2f2; }

/* Denuncia. */
.denuncia { margin: auto; width: min(460px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 0; border: 0; border-radius: 22px; background: #fff; color: #111; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: auto; }
.denuncia::backdrop { background: rgba(0, 0, 0, .6); }
.denuncia form { padding: 24px 22px 22px; }
.denuncia h2 { margin: 0 0 6px; font: 800 20px Poppins, sans-serif; }
.denuncia__ayuda { margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: #555; }
.denuncia label { display: block; margin: 12px 0 5px; font-size: 13.5px; font-weight: 700; }
.denuncia label span { font-weight: 400; color: #777; }
.denuncia select, .denuncia textarea, .denuncia input { width: 100%; padding: 11px 12px; border: 1.5px solid #111; border-radius: 12px; background: #fff; color: #111; font: 400 15px Inter, sans-serif; }
.denuncia textarea { resize: vertical; }
.denuncia__error { min-height: 1.3em; margin: 10px 0 0; color: #c1121f; font-size: 13.5px; font-weight: 600; }
.denuncia__botones { display: grid; gap: 8px; margin-top: 8px; }
.denuncia__botones button { padding: 13px; border: 1.5px solid #111; border-radius: 999px; background: #111; color: #fff; font: 700 15px Inter, sans-serif; cursor: pointer; }
.denuncia__botones button:disabled { opacity: .55; }
.denuncia__botones button[type="button"] { background: none; color: #111; }

/* =====================================================================================================
   Ajustes propios de cada tema (los colores y proporciones ya vienen de las variables de arriba).
   ===================================================================================================== */
/* Cœur: lista de tarjetas crema, una por fila. */
html[data-plantilla="coeur"] main { max-width: 640px; }
html[data-plantilla="coeur"] .grid { grid-template-columns: 1fr; gap: .9rem; }
html[data-plantilla="coeur"] .card { flex-direction: row; align-items: center; gap: 14px; padding: 12px; }
html[data-plantilla="coeur"] .card__media { flex: none; width: 110px; }
html[data-plantilla="coeur"] .card__body { padding: 0; gap: 3px; align-items: flex-start; }
html[data-plantilla="coeur"] .card__name { font: 800 .85rem var(--font-t); letter-spacing: .06em; text-transform: uppercase; }
html[data-plantilla="coeur"] .card__add { align-self: flex-end; padding: 8px 18px; border-radius: .9rem; font-size: 13px; }
html[data-plantilla="coeur"] .seccion__titulo { display: flex; align-items: center; gap: .8rem; margin: 6px 0 14px; font-size: 1.05rem; letter-spacing: .15em; text-transform: uppercase; color: #f4b6c2; }
html[data-plantilla="coeur"] .seccion__titulo::before, html[data-plantilla="coeur"] .seccion__titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #c9758a); }
html[data-plantilla="coeur"] .seccion__titulo::after { transform: scaleX(-1); }
html[data-plantilla="coeur"] .cat__n, html[data-plantilla="coeur"] .hdr__nav { font-family: var(--font-t); }
html[data-plantilla="coeur"] .pie-banner { border-top: 1px solid rgba(244, 182, 194, .25); margin-top: 24px; }
html[data-plantilla="coeur"] .hdr__buscar input { color: #51000f; }

/* Woow. */
html[data-plantilla="woow"] .card__name { font-weight: 500; }
html[data-plantilla="woow"] .card__add { font-weight: 700; }

/* Triad: títulos grandes en mayúsculas, textos centrados, botones cuadrados. */
html[data-plantilla="triad"] .seccion::before { content: "Nuestros productos"; display: block; margin: 8px 0 30px; text-align: center; font: 800 clamp(28px, 6vw, 60px)/1.05 var(--font-t); text-transform: uppercase; letter-spacing: -.01em; }
html[data-plantilla="triad"] .seccion:has(.seccion__titulo)::before { display: none; }
html[data-plantilla="triad"] .seccion__titulo { margin: 8px 0 30px; text-align: center; font: 800 clamp(28px, 6vw, 60px)/1.05 var(--font-t); text-transform: uppercase; letter-spacing: -.01em; }
html[data-plantilla="triad"] .card__body { align-items: center; text-align: center; padding-top: 16px; }
html[data-plantilla="triad"] .card__envio { justify-content: center; }
html[data-plantilla="triad"] .card__price { font-size: 20px; }
html[data-plantilla="triad"] .card__add { align-self: stretch; padding: 14px 10px; font: 700 11px var(--font); letter-spacing: .12em; text-transform: uppercase; }
html[data-plantilla="triad"] .cat__n, html[data-plantilla="triad"] .hdr__nav { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; }
html[data-plantilla="triad"] .hdr__nav { font-size: 13px; }
html[data-plantilla="triad"] .pagina__t { text-transform: uppercase; }

/* Insane: portada de la carita partida; tarjetas oscuras con borde violeta al pasar. */
html[data-plantilla="insane"] .banner { display: none; }
html[data-plantilla="insane"] .cats { padding-top: 22px; }
html[data-plantilla="insane"] .cat__n { font: 400 14px Anton, Impact, sans-serif; letter-spacing: .08em; }
html[data-plantilla="insane"] .seccion::before, html[data-plantilla="insane"] .seccion__titulo { font: 400 clamp(32px, 6vw, 64px)/1.05 Anton, Impact, sans-serif; letter-spacing: .02em; color: var(--yellow); text-shadow: 0 0 22px var(--yellow-glow); text-align: center; }
html[data-plantilla="insane"] .seccion::before { content: "Nuestros productos"; display: block; margin: 8px 0 30px; }
html[data-plantilla="insane"] .seccion:has(.seccion__titulo)::before { display: none; }
html[data-plantilla="insane"] .seccion__titulo { margin: 8px 0 30px; }
html[data-plantilla="insane"] .card { border: 1px solid #2c2140; transition: border-color .2s, box-shadow .2s, transform .2s; }
html[data-plantilla="insane"] .card:hover { border-color: var(--purple); box-shadow: 0 0 26px rgba(109, 40, 217, .3); transform: translateY(-2px); }
html[data-plantilla="insane"] .card__body { padding: 14px 12px; }
html[data-plantilla="insane"] .card__name { font-weight: 600; }
html[data-plantilla="insane"] .card__price { font: 400 24px Anton, Impact, sans-serif; letter-spacing: .02em; }
html[data-plantilla="insane"] .card__add { border-radius: 10px; font-weight: 700; }
html[data-plantilla="insane"] .pagina__t { font-family: Anton, Impact, sans-serif; font-weight: 400; color: var(--yellow); text-shadow: 0 0 22px var(--yellow-glow); }
html[data-plantilla="insane"] .pagina { padding-top: calc(var(--hdr-h) + 20px); }
/* Starly (clave "aura"): crema y dorado, fotos en arco, títulos en Playfair con un adorno dorado. */
html[data-plantilla="aura"] .banner__nombre, html[data-plantilla="aura"] .portada__t { font-weight: 600; font-style: italic; text-transform: none; letter-spacing: 0; }
html[data-plantilla="aura"] .seccion::before, html[data-plantilla="aura"] .seccion__titulo { display: block; margin: 10px 0 30px; font: italic 600 clamp(28px, 4.4vw, 46px)/1.1 var(--font-t); text-align: center; color: var(--fg); }
html[data-plantilla="aura"] .seccion::before { content: "Nuestra colección"; }
html[data-plantilla="aura"] .seccion:has(.seccion__titulo)::before { display: none; }
html[data-plantilla="aura"] .seccion__titulo::after { content: "✦"; display: block; margin-top: 8px; font: 400 14px var(--font); color: var(--oro); letter-spacing: 0; }
html[data-plantilla="aura"] .card { box-shadow: 0 1px 0 rgba(43, 33, 26, .04), 0 14px 34px -18px rgba(74, 53, 38, .35); transition: transform .3s ease, box-shadow .3s ease; }
html[data-plantilla="aura"] .card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -20px rgba(74, 53, 38, .45); }
html[data-plantilla="aura"] .card__media img { transition: transform .6s ease; }
html[data-plantilla="aura"] .card:hover .card__media img { transform: scale(1.05); }
html[data-plantilla="aura"] .card__body { align-items: center; text-align: center; padding: 14px 6px 6px; }
html[data-plantilla="aura"] .card__name { font: 500 17px/1.25 var(--font-t); }
html[data-plantilla="aura"] .card__price { font: 600 15px var(--font); letter-spacing: .06em; }
html[data-plantilla="aura"] .card__envio { justify-content: center; }
html[data-plantilla="aura"] .card__add { align-self: stretch; font: 500 12.5px var(--font); letter-spacing: .14em; text-transform: uppercase; }
html[data-plantilla="aura"] .card__tag { background: var(--oro); color: #fff; }
/* En el arco, la etiqueta de oferta va arriba al centro (en la esquina quedaba recortada). */
html[data-plantilla="aura"] .card__oferta { top: 14px; right: auto; left: 50%; transform: translateX(-50%); background: #9a3b2e; }
html[data-plantilla="aura"] .cat__n { font: 500 11.5px var(--font); letter-spacing: .14em; }
html[data-plantilla="aura"] .hdr__nav { font: 500 13px var(--font); letter-spacing: .16em; text-transform: uppercase; }
html[data-plantilla="aura"] .hdr__n { background: var(--oro); color: #fff; }
html[data-plantilla="aura"] .hdr__lupa { color: var(--oro); }
html[data-plantilla="aura"] .pie-banner__nombre { font: italic 600 28px var(--font-t); letter-spacing: 0; text-transform: none; }
html[data-plantilla="aura"] .pie-red { border-color: var(--oro); color: #e2c48f; }
html[data-plantilla="aura"] .pagina__t { font-style: italic; font-weight: 600; }
@media (max-width: 420px) { html[data-plantilla="aura"] .card__name { font-size: 15px; } }

/* Nova: noche con luces cian y violeta, tarjetas de vidrio y botones con degradé neón. */
html[data-plantilla="nova"] body { background: radial-gradient(900px 520px at 0% 0%, rgba(34, 211, 238, .13), transparent 60%), radial-gradient(900px 520px at 100% 8%, rgba(168, 85, 247, .18), transparent 62%), radial-gradient(800px 600px at 50% 100%, rgba(236, 72, 153, .08), transparent 60%), #070a18; }
html[data-plantilla="nova"] .hdr--solid { -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(255, 255, 255, .08); }
html[data-plantilla="nova"] .hdr__buscar input { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-plantilla="nova"] .hdr__buscar input::placeholder { color: rgba(255, 255, 255, .6); }
html[data-plantilla="nova"] .hdr__lupa { color: #67e8f9; }
html[data-plantilla="nova"] .hdr__n { background: var(--neon); color: #fff; }
html[data-plantilla="nova"] .hdr__drop, html[data-plantilla="nova"] .drawer { background: #0b0f26; }
html[data-plantilla="nova"] .banner__nombre { font-weight: 700; letter-spacing: -.01em; text-transform: none; text-shadow: 0 0 30px rgba(168, 85, 247, .6); }
html[data-plantilla="nova"] .seccion::before, html[data-plantilla="nova"] .seccion__titulo { display: block; width: fit-content; margin: 8px auto 30px; font: 700 clamp(28px, 5vw, 54px)/1.08 var(--font-t); letter-spacing: -.02em; text-align: center; background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-plantilla="nova"] .seccion::before { content: "Nuestros productos"; }
html[data-plantilla="nova"] .seccion:has(.seccion__titulo)::before { display: none; }
html[data-plantilla="nova"] .card { position: relative; border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
html[data-plantilla="nova"] .card:hover { transform: translateY(-4px); border-color: rgba(103, 232, 249, .55); box-shadow: 0 0 0 1px rgba(168, 85, 247, .25), 0 18px 46px -12px rgba(124, 58, 237, .55); }
html[data-plantilla="nova"] .card__body { padding: 12px 6px 4px; }
html[data-plantilla="nova"] .card__name { font-weight: 500; }
html[data-plantilla="nova"] .card__price { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
html[data-plantilla="nova"] .card__add { border: 0; background: var(--neon); background-size: 160% 100%; font-weight: 700; transition: background-position .4s ease, box-shadow .25s ease; }
html[data-plantilla="nova"] .card__add:hover { background: var(--neon); background-size: 160% 100%; background-position: 100% 0; box-shadow: 0 0 22px rgba(168, 85, 247, .55); }
html[data-plantilla="nova"] .card__tag { background: var(--neon); }
html[data-plantilla="nova"] .cat__img { border: 1px solid rgba(255, 255, 255, .1); }
html[data-plantilla="nova"] .cat.activa .cat__img { box-shadow: 0 0 22px rgba(34, 211, 238, .45); }
html[data-plantilla="nova"] .cat__n { font-weight: 600; letter-spacing: .1em; }
html[data-plantilla="nova"] .portada__btn { box-shadow: 0 10px 30px -6px rgba(168, 85, 247, .7); }
html[data-plantilla="nova"] .pie-banner { border-top: 1px solid rgba(255, 255, 255, .08); }
html[data-plantilla="nova"] .pie-banner__nombre { font-size: 26px; letter-spacing: -.01em; text-transform: none; background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-plantilla="nova"] .pie-red { border-color: rgba(103, 232, 249, .6); color: #67e8f9; }
html[data-plantilla="nova"] .pagina__t { width: fit-content; background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Zowy (clave "bloom"): blanco y rosa, todo redondeado (categorías en círculo, botones en píldora) y tarjetas con una sombra rosada suave. */
html[data-plantilla="bloom"] body { background: linear-gradient(180deg, #fff 0, #fff 60%, #fff6fa 100%); }
html[data-plantilla="bloom"] .banner__nombre, html[data-plantilla="bloom"] .portada__t { font-weight: 900; text-transform: none; letter-spacing: -.01em; }
html[data-plantilla="bloom"] .hdr__lupa { color: var(--rosa); }
html[data-plantilla="bloom"] .hdr__n { background: #fff; color: #e83f84; }
html[data-plantilla="bloom"] .seccion::before, html[data-plantilla="bloom"] .seccion__titulo { display: block; margin: 8px 0 26px; font: 900 clamp(26px, 4.6vw, 44px)/1.1 var(--font-t); text-align: center; color: var(--fg); letter-spacing: -.01em; }
html[data-plantilla="bloom"] .seccion::before { content: "Nuestros productos"; }
html[data-plantilla="bloom"] .seccion:has(.seccion__titulo)::before { display: none; }
html[data-plantilla="bloom"] .seccion__titulo::after { content: ""; display: block; width: 56px; height: 6px; margin: 12px auto 0; border-radius: 99px; background: linear-gradient(90deg, #ff8fbc, #ff5c9a); }
html[data-plantilla="bloom"] .card { box-shadow: 0 10px 28px -14px rgba(232, 63, 132, .45); border: 1px solid #ffe3ef; transition: transform .25s ease, box-shadow .25s ease; }
html[data-plantilla="bloom"] .card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -14px rgba(232, 63, 132, .55); }
html[data-plantilla="bloom"] .card__body { padding: 12px 6px 6px; }
html[data-plantilla="bloom"] .card__name { font-weight: 700; }
html[data-plantilla="bloom"] .card__price { font-size: 18px; font-weight: 900; }
html[data-plantilla="bloom"] .card__add { border: 0; background: linear-gradient(135deg, #ff8fbc, #ff5c9a); font-weight: 800; box-shadow: 0 8px 16px -8px rgba(255, 92, 154, .8); }
html[data-plantilla="bloom"] .card__add:hover { background: linear-gradient(135deg, #ff7aae, #f0418a); }
html[data-plantilla="bloom"] .card__tag, html[data-plantilla="bloom"] .card__oferta { background: #ff5c9a; }
html[data-plantilla="bloom"] .cat__img { aspect-ratio: 1; border: 3px solid #fff; box-shadow: 0 6px 16px -8px rgba(232, 63, 132, .5); }
html[data-plantilla="bloom"] .cat__n { font-weight: 800; letter-spacing: .04em; }
html[data-plantilla="bloom"] .cat--todos .cat__img::before { width: 40%; height: 40%; margin: 0; box-shadow: none; background: #ff5c9a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.6-9.3-9A5.2 5.2 0 0 1 12 6.6 5.2 5.2 0 0 1 21.3 12C19 16.4 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.6-9.3-9A5.2 5.2 0 0 1 12 6.6 5.2 5.2 0 0 1 21.3 12C19 16.4 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: zowy-late 2.4s ease-in-out infinite; }
html[data-plantilla="bloom"] .hdr__nav { font-weight: 800; }
html[data-plantilla="bloom"] .portada__btn { font-weight: 800; box-shadow: 0 10px 24px -8px rgba(160, 20, 80, .45); }
html[data-plantilla="bloom"] .pie-banner__nombre { font-weight: 900; color: #e83f84; text-transform: none; letter-spacing: 0; }
html[data-plantilla="bloom"] .pie-red { border-color: #ff8fbc; color: #e83f84; }
html[data-plantilla="bloom"] .pagina__t { font-weight: 900; color: #e83f84; }
html[data-plantilla="bloom"] .banner { overflow: hidden; }
/* Zowy: corazones que suben despacio y un borde de glaseado que se mueve abajo del banner y arriba del pie. */
html[data-plantilla="bloom"] .banner::before { content: ""; position: absolute; inset: 0; bottom: -1px; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q37.5 0 75 20 T150 20 T225 20 T300 20 T375 20 T450 20 T525 20 T600 20 V40 H0Z' fill='%23ffffff'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q37.5 34 75 14 T150 14 T225 14 T300 14 T375 14 T450 14 T525 14 T600 14 V40 H0Z' fill='%23ff8fbc' fill-opacity='.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cpath transform='translate(40 60) scale(1)' d='M12 21s-7-4.6-9.3-9A5.2 5.2 0 0 1 12 6.6 5.2 5.2 0 0 1 21.3 12C19 16.4 12 21 12 21Z' fill='%23ffffff' fill-opacity='0.4'/%3E%3Cpath transform='translate(250 150) scale(1.3)' d='M12 21s-7-4.6-9.3-9A5.2 5.2 0 0 1 12 6.6 5.2 5.2 0 0 1 21.3 12C19 16.4 12 21 12 21Z' fill='%23ffffff' fill-opacity='0.3'/%3E%3Cpath transform='translate(110 280) scale(0.8)' d='M12 21s-7-4.6-9.3-9A5.2 5.2 0 0 1 12 6.6 5.2 5.2 0 0 1 21.3 12C19 16.4 12 21 12 21Z' fill='%23ffffff' fill-opacity='0.35'/%3E%3C/svg%3E"); background-size: 600px 30px, 480px 30px, 360px 360px; background-repeat: repeat-x, repeat-x, repeat; background-position: 0 100%, 0 100%, 0 0;
  animation: zowy-flota 20s linear infinite; }
html[data-plantilla="bloom"] .banner > * { position: relative; z-index: 2; }
@keyframes zowy-flota { to { background-position: 600px 100%, -480px 100%, 0 -360px; } }
html[data-plantilla="bloom"] .pie-banner { position: relative; margin-top: 80px; border-top: 0; }
html[data-plantilla="bloom"] .pie-banner::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 30px; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q37.5 0 75 20 T150 20 T225 20 T300 20 T375 20 T450 20 T525 20 T600 20 V40 H0Z' fill='%23fff0f6'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q37.5 34 75 14 T150 14 T225 14 T300 14 T375 14 T450 14 T525 14 T600 14 V40 H0Z' fill='%23ff8fbc' fill-opacity='.45'/%3E%3C/svg%3E"); background-size: 600px 100%, 480px 100%; background-repeat: repeat-x; animation: zowy-glaseado 12s linear infinite; }
@keyframes zowy-glaseado { to { background-position: -600px 0, 480px 0; } }
html[data-plantilla="bloom"] .card__add { animation: zowy-late 3.2s ease-in-out infinite; }
@keyframes zowy-late { 0%, 86%, 100% { transform: scale(1); } 91% { transform: scale(1.05); } 95% { transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { html[data-plantilla="bloom"] .banner::before, html[data-plantilla="bloom"] .pie-banner::before, html[data-plantilla="bloom"] .card__add { animation: none; } }

/* Wave: azul eléctrico, olas que corren abajo del banner y arriba del pie, títulos en cursiva con líneas de velocidad. */
html[data-plantilla="wave"] body { background: radial-gradient(900px 500px at 100% 0%, rgba(31, 123, 255, .08), transparent 60%), #f3f7fd; }
html[data-plantilla="wave"] .banner { overflow: hidden; }
html[data-plantilla="wave"] .banner::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 38px; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C100 6 200 6 300 22 S500 38 600 22 V40 H0Z' fill='%23f3f7fd'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C100 32 200 32 300 16 S500 0 600 16 V40 H0Z' fill='%2300c2ff' fill-opacity='.45'/%3E%3C/svg%3E"); background-size: 640px 100%, 520px 100%; background-repeat: repeat-x; animation: wave-corre 9s linear infinite; }
html[data-plantilla="wave"] .banner > * { position: relative; z-index: 2; }
@keyframes wave-corre { from { background-position: 0 0, 0 0; } to { background-position: 640px 0, -520px 0; } }
html[data-plantilla="wave"] .banner__nombre, html[data-plantilla="wave"] .portada__t { font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: uppercase; text-shadow: 0 6px 24px rgba(4, 40, 110, .45); }
html[data-plantilla="wave"] .hdr__lupa { color: #0a5fd0; }
html[data-plantilla="wave"] .hdr__n { background: #fff; color: #0a5fd0; }
html[data-plantilla="wave"] .hdr__nav, html[data-plantilla="wave"] .hdr__nav * { font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .04em; }
html[data-plantilla="wave"] .seccion::before, html[data-plantilla="wave"] .seccion__titulo { display: block; width: fit-content; margin: 10px auto 30px; padding: 0 46px; font: italic 900 clamp(26px, 4.8vw, 48px)/1.05 var(--font-t); text-transform: uppercase; letter-spacing: -.01em; text-align: center; color: var(--fg);
  background: linear-gradient(#0a5fd0, #0a5fd0) left 50% / 32px 4px no-repeat, linear-gradient(#00c2ff, #00c2ff) left 6px top calc(50% + 8px) / 22px 4px no-repeat, linear-gradient(#0a5fd0, #0a5fd0) right 50% / 32px 4px no-repeat, linear-gradient(#00c2ff, #00c2ff) right 6px top calc(50% + 8px) / 22px 4px no-repeat; }
html[data-plantilla="wave"] .seccion::before { content: "Nuestros productos"; }
html[data-plantilla="wave"] .seccion:has(.seccion__titulo)::before { display: none; }
html[data-plantilla="wave"] .card { border: 1px solid #dfe9f8; box-shadow: 0 12px 28px -18px rgba(10, 95, 208, .55); transition: transform .25s ease, box-shadow .25s ease; }
html[data-plantilla="wave"] .card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 22px 40px -18px rgba(10, 95, 208, .6); }
html[data-plantilla="wave"] .card__body { padding: 12px 6px 6px; }
html[data-plantilla="wave"] .card__name { font-weight: 700; }
html[data-plantilla="wave"] .card__price { align-self: flex-start; padding: 3px 12px 3px 10px; border-radius: 6px; background: #e3edfb; font-size: 18px; font-weight: 900; font-style: italic; transform: skewX(-8deg); }
html[data-plantilla="wave"] .card__add { position: relative; overflow: hidden; border: 0; background: var(--ola); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 10px 18px -10px rgba(10, 95, 208, .9); }
html[data-plantilla="wave"] .card__add::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s ease; }
html[data-plantilla="wave"] .card__add:hover { background: var(--ola); }
html[data-plantilla="wave"] .card__add:hover::after { transform: translateX(120%); }
html[data-plantilla="wave"] .card__tag, html[data-plantilla="wave"] .card__oferta { background: #00a3ff; font-style: italic; }
html[data-plantilla="wave"] .cat__img { aspect-ratio: 1; border: 3px solid #fff; box-shadow: 0 0 0 2px #cfe0f7, 0 8px 18px -10px rgba(10, 95, 208, .6); }
html[data-plantilla="wave"] .cat.activa .cat__img { box-shadow: 0 0 0 3px #0a5fd0, 0 8px 18px -10px rgba(10, 95, 208, .6); }
html[data-plantilla="wave"] .cat__n { font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; }
html[data-plantilla="wave"] .portada__btn { font-weight: 800; font-style: italic; text-transform: uppercase; box-shadow: 0 12px 26px -10px rgba(4, 40, 110, .6); }
html[data-plantilla="wave"] .pie-banner { position: relative; margin-top: 90px; }
html[data-plantilla="wave"] .pie-banner::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 38px; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C100 6 200 6 300 22 S500 38 600 22 V40 H0Z' fill='%230a5fd0'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C100 32 200 32 300 16 S500 0 600 16 V40 H0Z' fill='%2300c2ff' fill-opacity='.45'/%3E%3C/svg%3E"); background-size: 640px 100%, 520px 100%; background-repeat: repeat-x; animation: wave-corre 11s linear infinite reverse; }
html[data-plantilla="wave"] .pie-banner__nombre { font-weight: 900; font-style: italic; text-transform: uppercase; }
html[data-plantilla="wave"] .pie-red { border-color: rgba(255, 255, 255, .6); color: #fff; }
html[data-plantilla="wave"] .pagina__t { font-weight: 900; font-style: italic; text-transform: uppercase; color: #0a5fd0; }
@media (prefers-reduced-motion: reduce) { html[data-plantilla="wave"] .banner::before, html[data-plantilla="wave"] .pie-banner::before { animation: none; } }

.insane-hero { display: none; }
html[data-plantilla="insane"] .insane-hero { display: block; position: relative; overflow: hidden; min-height: 620px; padding-top: var(--hdr-top); border-bottom: 1px solid #2c2140;
  background: radial-gradient(circle at 25% 55%, rgba(166, 77, 255, .28), transparent 50%), radial-gradient(circle at 75% 55%, rgba(242, 245, 61, .16), transparent 50%); }
.hero__center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 36px; }
.hero__logo { position: relative; width: 100%; max-width: 420px; }
.hero__smiley { display: block; overflow: visible; width: 100%; height: auto; filter: drop-shadow(-14px 0 34px var(--purple-glow)) drop-shadow(14px 0 34px var(--yellow-glow)); animation: ins-flotar 5s ease-in-out infinite; }
.hero__word { margin: -6px 0 6px; font: 400 clamp(40px, 5vw, 64px)/1 var(--f-marca); text-transform: uppercase; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; text-align: center; }
.hero__word span:first-child { color: var(--purple); text-shadow: 0 0 18px var(--purple-glow); }
.hero__word span:last-child { color: var(--yellow); text-shadow: 0 0 18px var(--yellow-glow); }
@keyframes ins-flotar { 50% { transform: translateY(-8px); } }
.smiley__hit { cursor: pointer; outline: none; }
.hero__smiley .smiley__half { pointer-events: none; transform-box: fill-box; transition: transform .8s cubic-bezier(.22, 1, .36, 1), filter .7s ease, opacity .7s ease; }
.hero__smiley .smiley__half--izq { transform-origin: 60% 50%; animation: ins-latido-izq 5s ease-in-out infinite; }
.hero__smiley .smiley__half--der { transform-origin: 40% 50%; animation: ins-latido-der 5s ease-in-out infinite; }
.hero__smiley:has(.smiley__hit:hover, .smiley__hit:focus-visible) .smiley__half { animation: none; }
.hero__smiley:has(.smiley__hit--izq:hover, .smiley__hit--izq:focus-visible) .smiley__half--izq { transform: translate(-12px, 0) rotate(-2deg) scale(1.08); filter: drop-shadow(0 0 26px var(--purple)); }
.hero__smiley:has(.smiley__hit--der:hover, .smiley__hit--der:focus-visible) .smiley__half--der { transform: translate(12px, 0) rotate(2deg) scale(1.08); filter: drop-shadow(0 0 26px var(--yellow)); }
.hero__smiley:has(.smiley__hit--izq:hover) .smiley__half--der, .hero__smiley:has(.smiley__hit--der:hover) .smiley__half--izq { opacity: .45; filter: blur(2px); }
.hero__center .hero__word { transition: filter .8s ease, opacity .8s ease; }
.insane-hero:has(.smiley__hit:hover) .hero__word { filter: blur(5px); opacity: .55; }
@keyframes ins-latido-izq { 0%, 78%, 100% { transform: none; } 84% { transform: translateX(-9px) rotate(-2deg); } 90% { transform: none; } }
@keyframes ins-latido-der { 0%, 78%, 100% { transform: none; } 84% { transform: translateX(9px) rotate(2deg); } 90% { transform: none; } }
.hero__fondo { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .45s ease; will-change: opacity; }
.hero__fondo::before { content: attr(data-texto); white-space: nowrap; position: absolute; top: 14%; left: 50%; font: 400 clamp(34px, 4.3vw, 84px)/1 var(--f-titulo); letter-spacing: 3px; text-transform: uppercase; }
.hero__fondo::after { content: ''; position: absolute; inset: 0; background-repeat: no-repeat; background-size: contain; }
.hero__fondo--anime { left: calc(50% + 90px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }
.hero__fondo--anime::before { color: var(--yellow); text-shadow: 0 0 24px var(--yellow-glow); transform: translate(-50%, -50%) rotate(5deg); }
.hero__fondo--anime::after { background-image: url(insane-anime.webp); background-position: right bottom; }
.hero__fondo--hw { right: calc(50% + 90px); -webkit-mask-image: linear-gradient(270deg, transparent, #000 10%); mask-image: linear-gradient(270deg, transparent, #000 10%); }
.hero__fondo--hw::before { color: var(--purple); text-shadow: 0 0 24px var(--purple-glow); transform: translate(-50%, -50%) rotate(-5deg); }
.hero__fondo--hw::after { background-image: url(insane-componentes.webp); background-position: left bottom; }
.insane-hero:has(.smiley__hit--izq:hover, .smiley__hit--izq:focus-visible) .hero__fondo--hw,
.insane-hero:has(.smiley__hit--der:hover, .smiley__hit--der:focus-visible) .hero__fondo--anime { opacity: 1; }
.hero__hints { display: none; }
@media (hover: none) {
  .hero__hints { display: flex; gap: 12px; margin-top: 14px; }
  .hero__hint { padding: 10px 16px; border: 1.5px solid; border-radius: 999px; background: rgba(10, 7, 16, .7); font: 400 16px var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
  .hero__hint--izq { color: var(--purple); border-color: var(--purple); }
  .hero__hint--der { color: var(--yellow); border-color: var(--yellow); }
  .hero__fondo { opacity: .28; }
  .hero__fondo::before { display: none; }
}
@media (max-width: 720px) { html[data-plantilla="insane"] .insane-hero { min-height: 0; } .hero__logo { max-width: 230px; } .hero__fondo--anime { left: 40%; } .hero__fondo--hw { right: 40%; } }
@media (prefers-reduced-motion: reduce) { .hero__smiley, .hero__smiley .smiley__half { animation: none; } }

/* ---------- Tutorial del dueño (solo lo ve quien entra a su propio catálogo) ---------- */
.ct { position: fixed; inset: 0; z-index: 2000; opacity: 0; transition: opacity .3s ease; touch-action: none; }
.ct.is-on { opacity: 1; }
.ct__velo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ct__velo path { fill: rgba(0, 0, 0, .74); }
.ct__aro { position: absolute; border: 3px solid #fff; border-radius: 12px; pointer-events: none; opacity: 0; transition: left .35s cubic-bezier(.22, 1, .36, 1), top .35s cubic-bezier(.22, 1, .36, 1), width .35s cubic-bezier(.22, 1, .36, 1), height .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; animation: ct-pulso 1.8s ease-in-out infinite; }
@keyframes ct-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
.ct__caja { position: absolute; padding: 18px 20px 16px; border-radius: 20px; background: #fff; color: #111; font-family: Inter, system-ui, sans-serif; box-shadow: 0 18px 44px rgba(0, 0, 0, .45); transition: left .35s cubic-bezier(.22, 1, .36, 1), top .35s cubic-bezier(.22, 1, .36, 1); }
.ct__cuenta { margin-bottom: 4px; color: #777; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.ct__t { margin: 0 0 6px; font: 800 19px Poppins, sans-serif; color: #000; }
.ct__x { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: #333; }
.ct__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Tutorial con voz: botón de sonido (late mientras habla), barra de avance y "Atrás". */
.ct__arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.ct__arriba .ct__cuenta { margin-bottom: 4px; }
.ct__sonido { display: grid; place-items: center; width: 38px; height: 38px; margin: -6px -8px 0 0; border: 0; border-radius: 50%; background: #f1f1f3; color: #111; cursor: pointer; }
.ct__sonido .ct__mute { display: none; }
.ct--mudo .ct__sonido .ct__onda { display: none; }
.ct--mudo .ct__sonido .ct__mute { display: inline; }
.ct--hablando .ct__sonido { background: #2f5bff; color: #fff; animation: ct-habla 1.2s ease-in-out infinite; }
@keyframes ct-habla { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 91, 255, .45); } 50% { box-shadow: 0 0 0 7px rgba(47, 91, 255, 0); } }
.ct__barra { height: 4px; margin: -4px 0 14px; border-radius: 99px; background: #ececef; overflow: hidden; }
.ct__barra i { display: block; height: 100%; border-radius: inherit; background: #2f5bff; transition: width .35s ease; }
.ct__atras { padding: 12px 14px; border: 1px solid #ddd; border-radius: 14px; background: #fff; color: #111; font: 700 15px Inter, sans-serif; cursor: pointer; }
.ct--arranque .ct__caja { text-align: center; }
.ct--arranque .ct__t { font-size: 22px; }
.ct--arranque .ct__pie { flex-direction: column-reverse; align-items: stretch; }
.ct--arranque .ct__sig { margin: 0; padding: 14px; font-size: 16px; background: #2f5bff; }
.ct__omitir { padding: 8px 4px; border: 0; background: none; color: #666; font: 600 14.5px Inter, sans-serif; cursor: pointer; }
.ct__sig { min-width: 120px; margin-left: auto; padding: 12px 22px; border: 0; border-radius: 14px; background: #000; color: #fff; font: 700 15px Inter, sans-serif; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .ct, .ct__aro, .ct__caja { transition: none; animation: none; } }

/* =====================================================================================================
   Ventana ampliada de un producto (cápsula). Toma los colores, la tipografía y el redondeo del tema activo:
   --panel-* (fondo y texto de los paneles), --btn-* (botón), --img-bg (fondo de las fotos) y --price.
   ===================================================================================================== */
html { --pm-r: 28px; --pm-sombra: 0 30px 80px rgba(0, 0, 0, .38); --pm-borde: color-mix(in srgb, var(--panel-fg) 12%, transparent); }
html[data-plantilla="coeur"] { --pm-r: 34px; }
html[data-plantilla="woow"] { --pm-r: 30px; }
html[data-plantilla="triad"] { --pm-r: 0; --pm-borde: var(--panel-line); }
html[data-plantilla="aura"] { --pm-r: 30px; }
html[data-plantilla="bloom"] { --pm-r: 30px; --pm-borde: #ffd0e2; }
html[data-plantilla="wave"] { --pm-r: 28px; --pm-borde: #d3e2f7; }
html[data-plantilla="nova"] { --pm-r: 24px; --pm-borde: rgba(255, 255, 255, .14); --pm-sombra: 0 0 0 1px rgba(168, 85, 247, .3), 0 30px 80px rgba(0, 0, 0, .7), 0 0 60px rgba(34, 211, 238, .18); }
html[data-plantilla="insane"] { --pm-r: 22px; --pm-borde: var(--panel-line); --pm-sombra: 0 0 0 1px rgba(166, 77, 255, .35), 0 24px 70px rgba(0, 0, 0, .7), 0 0 46px var(--purple-glow); }

.card__media[data-ver] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.card__media[data-ver]:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.pm { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overscroll-behavior: contain; touch-action: none; }
.pm[hidden] { display: none; }
.pm__fondo { position: absolute; inset: 0; background: rgba(8, 8, 12, .52); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .32s ease; }
.pm.is-open .pm__fondo { opacity: 1; }

.pm__cap { position: relative; display: flex; flex-direction: column; width: min(440px, 100%); max-height: 100%; overflow: hidden; border-radius: var(--pm-r); border: 1px solid var(--pm-borde); background: var(--panel-bg); color: var(--panel-fg); font-family: var(--font); box-shadow: var(--pm-sombra); outline: none;
  opacity: 0; transform: translate3d(0, 26px, 0) scale(.92); will-change: transform, opacity;
  transition: transform .2s cubic-bezier(.4, 0, 1, 1), opacity .18s ease; }
.pm.is-open .pm__cap { opacity: 1; transform: none; transition: transform .46s cubic-bezier(.2, .9, .25, 1.07), opacity .24s ease; }

/* Galería: las fotos van una al lado de otra y la pista se desliza. Cuadrada, sin recortar ni deformar nada. */
.pm__gal { position: relative; flex: none; width: 100%; aspect-ratio: 1 / 1; max-height: 54dvh; max-height: 54vh; overflow: hidden; background: var(--img-bg); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
@supports (height: 1dvh) { .pm__gal { max-height: 54dvh; } }
/* Fotos de una misma forma: la galería toma esa forma (la pone catalogo.js); vertical, hasta un poco más de alto */
.pm__gal--ajustada { max-height: 62vh; transition: aspect-ratio .2s ease; }
@supports (height: 1dvh) { .pm__gal--ajustada { max-height: 62dvh; } }
.pm__pista { position: absolute; inset: 0; display: flex; height: 100%; transition: transform .5s cubic-bezier(.22, .9, .28, 1); will-change: transform; }
.pm__pista.is-arrastre { transition: none; }
/* La foto se ubica con position absolute: así ocupa justo el cuadro y se ve entera también en Safari del iPhone, que con alturas en %
   dentro de un aspect-ratio la dejaba más alta que la galería y la cortaba. */
.pm__slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; display: grid; place-items: center; cursor: zoom-in; }
.pm__slide img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }

/* Visor a pantalla completa (un toque en la foto de la ventana del producto) */
.pv { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; background: rgba(0, 0, 0, .94); opacity: 0; transition: opacity .2s ease; touch-action: none; user-select: none; -webkit-user-select: none; }
.pv.is-open { opacity: 1; }
.pv__img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; width: auto; height: auto; object-fit: contain; -webkit-user-drag: none; }
.pv__btn { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pv__btn svg { width: 20px; height: 20px; }
.pv__cerrar { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.pv__ant, .pv__sig { top: 50%; margin-top: -22px; }
.pv__ant { left: 12px; }
.pv__sig { right: 12px; }
.pv__cont { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font: 600 13px var(--font, sans-serif); }
.pm__letra { font: 800 96px var(--font-t); color: var(--muted); opacity: .55; }

.pm__btn, .pm__flecha { position: absolute; display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%; color: var(--panel-fg); background: color-mix(in srgb, var(--panel-bg) 78%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); cursor: pointer; transition: transform .15s ease, opacity .25s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.pm__btn { top: 12px; width: 40px; height: 40px; }
.pm__btn--cerrar { right: 12px; }
.pm__btn--compartir { left: 12px; }
.pm__btn:hover, .pm__flecha:hover { background: var(--panel-bg); }
.pm__btn:active, .pm__flecha:active { transform: scale(.92); }
.pm__btn:focus-visible, .pm__flecha:focus-visible, .pm__add:focus-visible { outline: 2px solid var(--panel-fg); outline-offset: 2px; }
.pm__flecha { top: 50%; width: 34px; height: 34px; margin-top: -17px; }
.pm__flecha svg { width: 18px; height: 18px; }
.pm__flecha--izq { left: 10px; }
.pm__flecha--der { right: 10px; }
.pm__flecha.is-oculta { opacity: 0; pointer-events: none; }
@media (hover: none) { .pm__flecha { opacity: .85; } .pm__flecha.is-oculta { opacity: 0; } }

.pm__puntos { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.pm__punto { width: 7px; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--panel-fg) 30%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--panel-bg) 55%, transparent); transition: width .35s cubic-bezier(.22, .9, .28, 1), background-color .3s ease; }
.pm__punto.is-on { width: 20px; background: var(--panel-fg); }

.pm__copiado { position: absolute; left: 50%; top: 16px; transform: translate(-50%, -8px); padding: 8px 14px; border-radius: 999px; background: var(--panel-fg); color: var(--panel-bg); font: 600 13px var(--font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .3s cubic-bezier(.22, .9, .28, 1); }
.pm__copiado.is-on { opacity: 1; transform: translate(-50%, 0); }

.pm__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 20px 24px 6px; }
.pm__nombre { margin: 0; font: 800 clamp(20px, 5vw, 24px)/1.2 var(--font-t); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pm__desc { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; color: color-mix(in srgb, var(--panel-fg) 78%, transparent); }
.pm__pie { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 24px 22px; }
.pm__precio { font: 800 22px var(--font-t); color: var(--price); line-height: 1.15; }
.pm__precio small { display: block; font: 500 12.5px var(--font); color: var(--panel-muted); }
.pm__add { flex: none; padding: 13px 26px; border: 1px solid var(--btn-bg); border-radius: var(--btn-r); background: var(--btn-bg); color: var(--btn-fg); font: 700 15px var(--font); cursor: pointer; transition: background-color .2s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; }
.pm__add:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.pm__add:active { transform: scale(.96); }
.pm__agotado { padding: 9px 16px; border-radius: 999px; background: color-mix(in srgb, var(--panel-fg) 10%, transparent); font: 600 13.5px var(--font); }
html[data-plantilla="triad"] .pm__agotado { border-radius: 0; }

/* Celular en horizontal u otras pantallas bajas: la foto se achica para que entren el nombre y el botón. */
@media (max-height: 560px) { .pm__gal { max-height: 46dvh; } .pm__scroll { padding-top: 14px; } .pm__pie { padding-bottom: 16px; } }
@media (max-width: 380px) { .pm__scroll { padding: 16px 18px 4px; } .pm__pie { padding: 12px 18px 18px; } .pm__add { padding: 12px 20px; } }

@media (prefers-reduced-motion: reduce) {
  .pm__cap, .pm.is-open .pm__cap { transform: none; transition: opacity .15s ease; }
  .pm__pista { transition: none; }
  .pm__punto, .pm__copiado { transition: none; }
}

/* Correo sin verificar: el dueño ve arriba que su catálogo todavía no es público (los clientes no lo ven) */

/* Los colores del catálogo son los del tema que eligió el comercio: el modo oscuro automático del navegador no los cambia */
:root { color-scheme: only light; }
#carrito #f-pedido { padding: 12px 0 calc(28px + env(safe-area-inset-bottom)); }

/* ---- Productos con opciones compuestas (ventana del producto y carrito) ---- */
.card__desde { font-size: .72em; font-weight: 500; color: var(--muted); }
.pm__opciones { display: grid; gap: 18px; margin: 18px 0 6px; }
.pm-paso { animation: pm-paso-entra .25s ease; }
@keyframes pm-paso-entra { from { opacity: 0; transform: translateY(6px); } }
.pm-paso__t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 15px/1.2 var(--font); color: var(--panel-fg); }
.pm-paso__t span:first-child { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); font-size: 12px; }
.pm-paso__ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.pm-op { display: grid; gap: 2px; padding: 11px 12px; border: 1.5px solid var(--panel-line); border-radius: min(var(--btn-r, 12px), 14px); background: transparent; color: var(--panel-fg); font: 600 14px/1.25 var(--font); text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .1s ease; }
.pm-op small { color: var(--panel-muted); font-weight: 500; font-size: 12.5px; }
.pm-op:hover { border-color: var(--btn-bg); }
.pm-op:active { transform: scale(.98); }
.pm-op.is-on { border-color: var(--btn-bg); background: color-mix(in srgb, var(--btn-bg) 10%, transparent); box-shadow: inset 0 0 0 1px var(--btn-bg); }
.pm-op.is-on small { color: var(--price); font-weight: 700; }
.pm-op:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.pm__add:disabled { opacity: .55; cursor: not-allowed; }
.carrito-item__opcion { display: block; margin-top: 2px; font: 500 12.5px/1.3 var(--font); color: var(--muted); }

/* ---- Computadora: en lugar del banner con foto, un encabezado del color del tema que termina justo debajo del menú.
   En el celular el banner sigue igual. Mientras el dueño edita se ve el banner de siempre (para poder cambiarlo). ---- */
html[data-plantilla="nova"] { --hdr-pc: #0d1336; }
@media (min-width: 761px) {
  html:not(.editando):not([data-plantilla="insane"]) .banner {
    min-height: 0; height: calc(var(--hdr-real, 150px) + 34px); padding: 0;
    background: var(--hdr-pc, var(--hdr-solid)) !important; background-image: none !important;
  }
  html:not(.editando):not([data-plantilla="insane"]) .banner::after,
  html:not(.editando):not([data-plantilla="insane"]) .banner > .portada,
  html:not(.editando):not([data-plantilla="insane"]) .banner > .banner__nombre { display: none; }
  .hdr.hdr--pc-tope { background: var(--hdr-pc, var(--hdr-solid)); box-shadow: none; }
  html.sin-banner:not(.editando):not([data-plantilla="insane"])[data-pagina="inicio"] body { padding-top: calc(var(--hdr-real, 150px) + 16px); }
}

/* Zowy en la computadora: los corazones flotan también sobre la cabecera (detrás del buscador y del menú). */
@media (min-width: 761px) {
  html:not(.editando)[data-plantilla="bloom"] .hdr::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cpath transform='translate(40 60) scale(1)' d='M12 21s-7-4.6-9.3-9A5.2 5.2 0 0 1 12 6.6 5.2 5.2 0 0 1 21.3 12C19 16.4 12 21 12 21Z' fill='%23ffffff' fill-opacity='0.4'/%3E%3Cpath transform='translate(250 150) scale(1.3)' d='M12 21s-7-4.6-9.3-9A5.2 5.2 0 0 1 12 6.6 5.2 5.2 0 0 1 21.3 12C19 16.4 12 21 12 21Z' fill='%23ffffff' fill-opacity='0.3'/%3E%3Cpath transform='translate(110 280) scale(0.8)' d='M12 21s-7-4.6-9.3-9A5.2 5.2 0 0 1 12 6.6 5.2 5.2 0 0 1 21.3 12C19 16.4 12 21 12 21Z' fill='%23ffffff' fill-opacity='0.35'/%3E%3C/svg%3E"); background-size: 360px 360px; background-repeat: repeat; animation: zowy-corazones 20s linear infinite; }
  html:not(.editando)[data-plantilla="bloom"] .hdr > * { position: relative; z-index: 1; }
}
@keyframes zowy-corazones { to { background-position: 0 -360px; } }
@media (prefers-reduced-motion: reduce) { html[data-plantilla="bloom"] .hdr::after { animation: none; } }
/* Computadora: sin el botón "Productos" en el menú (las categorías ya se ven debajo de la cabecera). */
@media (min-width: 761px) { .hdr__nav .hdr__prod { display: none; } }

/* Celular: cabecera de color sólido y el banner justo debajo, con la proporción real de la imagen (sin partes vacías).
   La portada (título, texto y botón) va sobre la imagen; si no entra, la franja crece y la imagen la cubre. */
@media (max-width: 760px) {
  .hdr.hdr--pc-tope { background: var(--hdr-pc, var(--hdr-solid)); box-shadow: none; }
  html:not(.editando):not([data-plantilla="insane"]) .banner.banner--foto {
    margin-top: var(--hdr-real, var(--hdr-top)); height: auto; min-height: 0; aspect-ratio: var(--banner-ratio, 16 / 9);
    padding: 20px 16px 26px; background-size: cover, cover; background-position: center;
  }
  html:not(.editando):not([data-plantilla="insane"]) .banner.banner--foto.banner--portada { padding: 24px 16px 36px; }
}

/* "Ver todos los productos", abajo de los destacados del inicio. */
.ver-todos { display: flex; justify-content: center; margin: 30px 0 6px; }
.ver-todos__btn { padding: 14px 34px; border: 1px solid var(--btn-bg); border-radius: var(--btn-r); background: var(--btn-bg); color: var(--btn-fg); font: 700 15px var(--font); cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.ver-todos__btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.ver-todos__btn:active { transform: scale(.97); }
/* Surf y Zowy: la ola de arriba del pie necesita su lugar; sin esto tapaba los beneficios (que van pegados al pie). */
html[data-plantilla="wave"] .beneficios:not([hidden]) ~ .pie-banner,
html[data-plantilla="bloom"] .beneficios:not([hidden]) ~ .pie-banner { margin-top: 48px; }

/* Finalizar pedido: pasos numerados, "¿Cómo querés abonar?" en dos tarjetas y la confirmación con el botón de WhatsApp */
.pe-paso { margin: 8px 0 2px; color: var(--panel-muted); font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.pe-paso:first-child { margin-top: 0; }
.pe-pagos { display: grid; gap: 8px; }
.carrito-cuerpo label.pe-pago { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1.5px solid var(--panel-line); border-radius: 12px; font-weight: 400; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pe-pago input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pe-pago__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--panel-fg) 7%, transparent); }
.pe-pago__txt { flex: 1; display: grid; line-height: 1.25; }
.pe-pago__txt b { font-size: 15px; }
.pe-pago__txt small { color: var(--panel-muted); font-size: 12.5px; }
.pe-pago__check { flex: none; width: 22px; height: 22px; border: 2px solid var(--panel-line); border-radius: 50%; }
.carrito-cuerpo label.pe-pago.is-on { border-color: var(--panel-fg); background: color-mix(in srgb, var(--panel-fg) 4%, transparent); }
.pe-pago.is-on .pe-pago__check { border: 7px solid var(--panel-fg); }
.pe-pago:has(input:focus-visible) { outline: 2px solid var(--panel-fg); outline-offset: 2px; }
.pe-legal { margin: 6px 0 0; color: var(--panel-muted); font-size: 11.5px; line-height: 1.4; text-align: center; }
.pe-legal a { color: inherit; text-decoration: underline; }
.carrito-ok__ico { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 4px; border-radius: 50%; background: #dcf5e6; color: #13844a; font: 800 28px var(--font); }

/* Beneficio de primera compra: cartelito chico abajo (no tapa el catálogo) y la línea del descuento en el carrito */
.bn-cartel { position: fixed; left: 12px; bottom: 12px; z-index: 90; width: min(340px, calc(100vw - 24px)); padding: 14px 16px 12px; border-radius: 16px;
  background: var(--panel-bg, #fff); color: var(--panel-fg, #111); box-shadow: 0 14px 40px rgba(0, 0, 0, .22); transform: translateY(20px); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.bn-cartel.is-in { transform: none; opacity: 1; }
.bn-cerrar { position: absolute; top: 4px; right: 6px; width: 32px; height: 32px; border: 0; background: none; color: inherit; font-size: 22px; line-height: 1; opacity: .6; cursor: pointer; }
.bn-titulo { margin: 0 28px 2px 0; font: 700 15px var(--font); }
.bn-texto { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: var(--panel-muted, #555); }
.bn-form { display: flex; gap: 6px; }
.bn-form input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--panel-line, #ddd); border-radius: 10px; background: var(--panel-bg, #fff); color: inherit; font-size: 15px; }
.bn-form button { flex: none; padding: 0 12px; border: 0; border-radius: 10px; background: var(--btn-bg); color: var(--btn-fg); font: 700 13px var(--font); cursor: pointer; }
.bn-error { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: #c0262d; }
.bn-error:empty { display: none; }
.carrito-pie__desc { color: #13844a; font-weight: 700; }

/* Comerciapp Live: barra roja arriba del catálogo mientras la tienda transmite */
.envivo-barra { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; background: #ff3b5c; color: #fff; font: 600 13.5px/1.25 var(--font); text-decoration: none; }
.envivo-barra b { flex: none; white-space: nowrap; padding: 2px 7px; border-radius: 5px; background: rgba(0, 0, 0, .22); font-size: 11.5px; letter-spacing: .08em; }
.envivo-barra__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envivo-barra__ir { flex: none; margin-left: 4px; padding: 4px 10px; border-radius: 999px; background: #fff; color: #d61f45; font-weight: 800; font-size: 12.5px; }
.envivo-barra__punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: envivo-latido 1.2s ease-in-out infinite; }
@keyframes envivo-latido { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .envivo-barra__punto { animation: none; } }
.pm__qxb { margin: 8px 0 0; font-size: 14.5px; color: color-mix(in srgb, var(--panel-fg) 78%, transparent); }

/* ---------- Carrusel del banner: efecto persiana (catalogo.js, iniciarPersiana) ---------- */
.banner__nombre { position: relative; z-index: 1; }
.persiana { position: absolute; inset: 0; z-index: 0; overflow: hidden; perspective: 1600px; pointer-events: none; }
.persiana::before { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .9s ease; }
.banner--cambiando .persiana::before { opacity: .55; }
.persiana__tira { position: absolute; left: 0; right: 0; overflow: hidden; transform-origin: 50% 0; backface-visibility: hidden; animation: persiana-abre var(--persiana-d, 760ms) cubic-bezier(.2, .75, .2, 1) both; }
.persiana[data-dir="-1"] .persiana__tira { transform-origin: 50% 100%; animation-name: persiana-abre-arriba; }
.persiana__img { position: absolute; left: 0; right: 0; background-size: cover, cover; background-position: center; background-repeat: no-repeat; }
.banner[data-formato="cuadrado"] .persiana__img, .banner[data-formato="vertical"] .persiana__img { background-size: contain, cover; }
@keyframes persiana-abre { from { transform: rotateX(-88deg); filter: brightness(.35); } to { transform: none; filter: none; } }
@keyframes persiana-abre-arriba { from { transform: rotateX(88deg); filter: brightness(.35); } to { transform: none; filter: none; } }
/* Puntitos para ver en qué foto va y elegir otra */
.persiana-pts { position: absolute; left: 50%; bottom: 10px; z-index: 3; display: flex; gap: 6px; transform: translateX(-50%); }
.persiana-pts button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .3s ease, background .3s ease; }
.persiana-pts button.on { width: 20px; background: #fff; }
.persiana-pts button::after { content: ""; position: absolute; inset: -8px; }
.persiana-pts button { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .persiana__tira, .persiana[data-dir="-1"] .persiana__tira { animation: persiana-funde .5s ease both; animation-delay: 0s !important; }
  .persiana::before { transition: none; }
}
@keyframes persiana-funde { from { opacity: 0; } to { opacity: 1; } }
/* Editor del banner: las fotos extra del carrusel */
.editor__lbl small { color: var(--panel-muted); font-weight: 400; }
.editor__extras { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.editor__extra { position: relative; width: 96px; aspect-ratio: 16 / 5; border-radius: 10px; background: var(--img-bg) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .25); }
.editor__extra[data-formato="horizontal"] { aspect-ratio: 16 / 9; }
.editor__extra[data-formato="cuadrado"] { width: 64px; aspect-ratio: 1; }
.editor__extra[data-formato="vertical"] { width: 56px; aspect-ratio: 3 / 4; }
.editor__extra button { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #000; color: #fff; font: 700 14px/22px var(--font); cursor: pointer; }
.editor__extra--mas { display: grid; place-items: center; border: 1px dashed var(--panel-line); background: none; color: var(--panel-fg); font: 400 24px/1 var(--font); cursor: pointer; box-shadow: none; }
.editor__ayuda { display: block; margin-bottom: 8px; color: var(--panel-muted); font-size: 12.5px; }

/* ---------- Recién llegados y "Todos los productos" por categorías ---------- */
.grid--llegados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 761px) { .grid--llegados { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.secs-tabs { position: sticky; top: var(--hdr-h-fija, 64px); z-index: 20; display: flex; gap: 6px; margin: 0 -16px 8px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; background: var(--bg); }
.secs-tabs::-webkit-scrollbar { display: none; }
.secs-tabs a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--cat-bg); color: var(--cat-fg); font: 600 14px/1.1 var(--font); text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.secs-tabs a.on { background: var(--cat-act); color: var(--bg); }
.seccion--cat { scroll-margin-top: 140px; }
.seccion__n { margin-left: 6px; color: var(--muted); font: 500 .55em var(--font); vertical-align: middle; }

/* ---------- Dot: blanco editorial. Títulos enormes en negro que terminan en un punto, menú fino, fotos grandes
   en tarjetas redondeadas y animaciones suaves (entran al aparecer, crecen al pasar el mouse). Todo con CSS: no suma JS
   ni consultas. Las animaciones al deslizar usan animation-timeline (si el navegador no lo tiene, todo se ve quieto). ---------- */
html[data-plantilla="dot"] {
  --bg: #fff; --fg: #0a0a0a; --muted: #77777c; --line: rgba(10, 10, 10, .1);
  --hdr-fg: #0a0a0a; --hdr-solid: #fff; --hdr-sombra: rgba(10, 10, 10, .06); --hdr-pc: #fff;
  --busca-bg: #f3f3f1; --busca-fg: #0a0a0a; --busca-r: 999px; --busca-borde: #f3f3f1;
  --banner-bg: linear-gradient(135deg, #ecebe7, #d9d6cf);
  --btn-bg: #0a0a0a; --btn-fg: #fff; --btn-r: 999px; --btn-hover: #2a2a2d;
  --fab-bg: #0a0a0a; --fab-fg: #fff;
  --card-bg: transparent; --card-fg: #0a0a0a; --card-r: 0; --card-pad: 0;
  --img-ratio: 4 / 5; --img-fit: cover; --img-r: 24px; --img-bg: #f3f3f1;
  --price: #0a0a0a; --envio: #0a0a0a;
  --cols: 4; --cols-md: 3; --cols-sm: 2;
  --cat-r: 20px; --cat-fg: #0a0a0a; --cat-act: #0a0a0a; --cat-bg: #f3f3f1;
  --foot-bg: #0a0a0a; --foot-fg: #fff;
  --panel-bg: #fff; --panel-fg: #0a0a0a; --panel-line: #0a0a0a; --panel-muted: #77777c;
  --font: Inter, system-ui, sans-serif; --font-t: "Inter Tight", Inter, system-ui, sans-serif;
  --portada-btn-bg: #fff; --portada-btn-fg: #0a0a0a;
  --dot-ease: cubic-bezier(.2, .7, .2, 1);
}
html[data-plantilla="dot"] .hdr::before { display: none; }
html[data-plantilla="dot"] .hdr--solid { box-shadow: 0 1px 0 var(--line); }
html[data-plantilla="dot"] .hdr--solid:not(.hdr--pc-tope) { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
html[data-plantilla="dot"] .hdr__buscar input::placeholder { color: #9a9aa0; }
html[data-plantilla="dot"] .hdr__buscar input:focus { outline: 1.5px solid #0a0a0a; outline-offset: 0; background: #fff; }
html[data-plantilla="dot"] .hdr__lupa { color: #0a0a0a; }
html[data-plantilla="dot"] .logo-circulo { background: #0a0a0a; color: #fff; font-family: var(--font-t); letter-spacing: -.02em; }
html[data-plantilla="dot"] .hdr__n { background: #0a0a0a; color: #fff; }
/* Menú fino, en minúsculas, con una rayita que se dibuja de izquierda a derecha. */
html[data-plantilla="dot"] .hdr__nav { font: 400 15px var(--font); letter-spacing: -.005em; }
html[data-plantilla="dot"] .hdr__nav a, html[data-plantilla="dot"] .hdr__nav > .hdr__prod > button { position: relative; border-bottom: 0; }
html[data-plantilla="dot"] .hdr__nav a::after, html[data-plantilla="dot"] .hdr__nav > .hdr__prod > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--dot-ease); }
html[data-plantilla="dot"] .hdr__nav a:hover::after, html[data-plantilla="dot"] .hdr__nav .actual::after, html[data-plantilla="dot"] .hdr__nav > .hdr__prod > button:hover::after { transform: scaleX(1); }
html[data-plantilla="dot"] .hdr__nav a:hover, html[data-plantilla="dot"] .hdr__nav button:hover { opacity: 1; }
html[data-plantilla="dot"] .hdr__drop { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .25); }
html[data-plantilla="dot"] .hdr__drop button:hover, html[data-plantilla="dot"] .hdr__drop button.activa { background: #f3f3f1; }
html[data-plantilla="dot"] .drawer__lista a, html[data-plantilla="dot"] .drawer__lista button { font: 500 22px var(--font-t); letter-spacing: -.02em; }
/* El banner es una tarjeta grande con bordes redondeados (como una foto de revista), con un leve acercamiento al cargar. */
@media (max-width: 760px) {
  html[data-plantilla="dot"]:not(.editando) .banner.banner--foto { margin-left: 14px; margin-right: 14px; border-radius: 26px; overflow: hidden; }
}
html[data-plantilla="dot"] .banner__nombre, html[data-plantilla="dot"] .portada__t { font-weight: 800; text-transform: none; letter-spacing: -.045em; }
html[data-plantilla="dot"] .banner__nombre::after, html[data-plantilla="dot"] .portada__t::after { content: "."; }
html[data-plantilla="dot"] .portada__btn { font-weight: 600; letter-spacing: 0; }
/* Títulos: grandes, negros, apretados y con su punto. */
html[data-plantilla="dot"] .seccion__titulo { margin: 6px 0 22px; font: 800 clamp(30px, 6.2vw, 64px)/.98 var(--font-t); letter-spacing: -.05em; }
html[data-plantilla="dot"] .seccion__titulo::after { content: ""; display: inline-block; width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: currentColor; vertical-align: baseline; animation: dot-late 2.8s ease-in-out infinite; }
@keyframes dot-late { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.45); } 90% { transform: scale(.9); } }
html[data-plantilla="dot"] .pagina__t { font-weight: 800; letter-spacing: -.04em; }
/* Categorías: fotos redondeadas y nombre en minúscula fina. */
html[data-plantilla="dot"] .cat__n { text-transform: none; letter-spacing: -.01em; font: 500 13px var(--font); }
html[data-plantilla="dot"] .cat__img { transition: transform .45s var(--dot-ease), border-radius .45s var(--dot-ease); }
html[data-plantilla="dot"] .cat:hover .cat__img { transform: translateY(-3px); border-radius: 28px; }
html[data-plantilla="dot"] .cats--nombre .cat { border-color: transparent; }
/* Tarjetas: la foto manda. El nombre fino, el precio en negrita, el botón negro en píldora. */
html[data-plantilla="dot"] .grid { gap: 30px 16px; }
html[data-plantilla="dot"] .card__media { transition: border-radius .5s var(--dot-ease); }
html[data-plantilla="dot"] .card__media img { transition: transform .8s var(--dot-ease); }
html[data-plantilla="dot"] .card:hover .card__media { border-radius: 32px; }
html[data-plantilla="dot"] .card:hover .card__media img { transform: scale(1.045); }
html[data-plantilla="dot"] .card__body { gap: 4px; padding: 14px 4px 2px; }
html[data-plantilla="dot"] .card__name { font: 400 15px/1.3 var(--font); letter-spacing: -.01em; color: #2a2a2d; }
html[data-plantilla="dot"] .card__price { font: 700 18px var(--font-t); letter-spacing: -.02em; }
html[data-plantilla="dot"] .card__add { margin-top: 10px; padding: 11px 10px; font: 600 13.5px var(--font); transition: background-color .2s ease, transform .2s var(--dot-ease); }
html[data-plantilla="dot"] .card__add:active { transform: scale(.97); }
html[data-plantilla="dot"] .card__tag { background: #fff; color: #0a0a0a; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); top: 12px; left: 12px; }
html[data-plantilla="dot"] .card__oferta { top: 12px; right: 12px; background: #0a0a0a; }
html[data-plantilla="dot"] .ver-todos__btn { padding: 15px 38px; font-weight: 600; }
/* Pie negro con el nombre enorme y su punto. */
html[data-plantilla="dot"] .pie-banner { border-radius: 32px 32px 0 0; }
html[data-plantilla="dot"] .pie-banner__nombre { font: 800 clamp(34px, 7vw, 72px)/1 var(--font-t); letter-spacing: -.05em; text-transform: none; }
html[data-plantilla="dot"] .pie-banner__nombre::after { content: "."; }
html[data-plantilla="dot"] { --pm-r: 24px; }
@media (max-width: 420px) { html[data-plantilla="dot"] .card__name { font-size: 14px; } html[data-plantilla="dot"] .card__price { font-size: 16px; } }
/* Movimiento suave al deslizar: las tarjetas y los títulos suben y aparecen a medida que entran en pantalla. Solo opacidad y
   transform (no recalcula el diseño), así anda liviano en el celular. */
@supports (animation-timeline: view()) {
  html[data-plantilla="dot"]:not(.editando) .card,
  html[data-plantilla="dot"]:not(.editando) .seccion__titulo { animation: dot-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
@keyframes dot-entra { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
html[data-plantilla="dot"]:not(.editando) .banner { animation: dot-banner 1.1s var(--dot-ease) both; }
@keyframes dot-banner { from { opacity: .4; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-plantilla="dot"] .card, html[data-plantilla="dot"] .seccion__titulo, html[data-plantilla="dot"] .banner,
  html[data-plantilla="dot"] .seccion__titulo::after { animation: none !important; }
}

/* ---------- Elegir plantilla en vivo (la primera vez que el dueño entra, o desde "Tema del catálogo") ----------
   Hoja oscura de vidrio abajo (se lee sobre cualquier plantilla); el catálogo de atrás cambia con un círculo que se abre. */
.elt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; display: flex; justify-content: center; padding: 0 12px max(12px, env(safe-area-inset-bottom)); pointer-events: none; view-transition-name: elt-hoja; }
.elt__hoja { pointer-events: auto; width: 100%; max-width: 460px; padding: 18px 18px 14px; border-radius: 28px; background: rgba(14, 14, 18, .82); color: #fff; -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); text-align: center; font-family: Inter, system-ui, sans-serif;
  transform: translateY(calc(100% + 30px)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); touch-action: pan-y; }
.elt.is-open .elt__hoja { transform: none; }
.elt__pre { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; opacity: .7; }
.elt__fila { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; }
.elt__flecha { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background .2s, transform .15s; }
.elt__flecha:hover { background: rgba(255, 255, 255, .18); }
.elt__flecha:active { transform: scale(.92); }
.elt__nombre { display: grid; gap: 2px; min-width: 0; overflow: hidden; }
.elt__nombre b { font-size: clamp(30px, 8vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elt__nombre span { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.elt__nombre.va-der { animation: elt-der .42s cubic-bezier(.2, .8, .2, 1); }
.elt__nombre.va-izq { animation: elt-izq .42s cubic-bezier(.2, .8, .2, 1); }
@keyframes elt-der { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes elt-izq { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
.elt__det { margin: 10px 4px 0; min-height: 3.9em; font-size: 13px; line-height: 1.3; opacity: .78; }
.elt__puntos { display: flex; justify-content: center; gap: 6px; margin: 10px 0 14px; }
.elt__puntos button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .3); cursor: pointer; transition: width .3s ease, background .3s ease; }
.elt__puntos button.on { width: 22px; background: #fff; }
.elt__acciones { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.elt__luego, .elt__usar { height: 48px; border: 0; border-radius: 999px; font: 700 15px Inter, system-ui, sans-serif; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.elt__luego { background: rgba(255, 255, 255, .1); color: #fff; }
.elt__usar { background: #fff; color: #0a0a0a; }
.elt__luego:active, .elt__usar:active { transform: scale(.97); }
.elt__usar:disabled { opacity: .6; }
.elt__ayuda { margin: 10px 0 0; font-size: 11.5px; opacity: .5; }
/* Mientras elige, el catálogo deja lugar abajo para que la hoja no tape lo último, y se ocultan los botones flotantes. */
html.eligiendo-tema body { padding-bottom: 290px; }
html.eligiendo-tema .wa-fab { opacity: 0; pointer-events: none; }
@media (min-width: 761px) { .elt { justify-content: flex-end; padding: 0 24px 24px; } html.eligiendo-tema body { padding-bottom: 0; } }
/* El cambio de plantilla: el catálogo nuevo se abre en círculo desde el lado hacia el que se deslizó. */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: elt-circulo .6s cubic-bezier(.4, 0, .2, 1); }
@keyframes elt-circulo { from { clip-path: circle(0 at var(--elt-x, 100%) 70%); } to { clip-path: circle(150% at var(--elt-x, 100%) 70%); } }
::view-transition-old(elt-hoja), ::view-transition-new(elt-hoja) { animation: none; }
@media (prefers-reduced-motion: reduce) { .elt__hoja, .elt__nombre { transition: none; animation: none !important; } }

/* Dot: blanco crema. En el celular, arriba solo una cabecera fina y el banner como foto de revista; debajo, el nombre
   de la tienda enorme con su punto (como una marca), y los productos en una sola columna, minimalistas. */
html[data-plantilla="dot"] {
  --bg: #faf7f1; --hdr-solid: #faf7f1; --hdr-pc: #faf7f1; --line: rgba(20, 18, 14, .09);
  --busca-bg: #f0ebe1; --busca-borde: #f0ebe1; --img-bg: #eee8dc; --cat-bg: #eee8dc;
  --fg: #14120e; --card-fg: #14120e; --price: #14120e; --muted: #8a8478; --panel-bg: #faf7f1;
}
html[data-plantilla="dot"] .hdr--solid:not(.hdr--pc-tope) { background: rgba(250, 247, 241, .86); }
html[data-plantilla="dot"] .hdr__drop button:hover, html[data-plantilla="dot"] .hdr__drop button.activa { background: #f0ebe1; }
html[data-plantilla="dot"] .cats::before { display: none; }
@media (max-width: 760px) {
  /* Cabecera fina: el logo chico siempre (no el círculo enorme) y el buscador más bajo. */
  html[data-plantilla="dot"] .hdr .logo-circulo, html[data-plantilla="dot"] .hdr--arriba .logo-circulo { width: 44px; height: 44px; font-size: 15px; }
  html[data-plantilla="dot"] .hdr__fila { padding: 8px 16px 10px; gap: 8px 12px; }
  html[data-plantilla="dot"] .hdr__buscar input { height: 40px; font-size: 15px; }
  html[data-plantilla="dot"] .hdr--solid { box-shadow: none; }
  /* El banner: solo la foto (sin el nombre encima; el nombre va abajo, grande). */
  html[data-plantilla="dot"]:not(.editando) .banner.banner--foto { margin-top: calc(var(--hdr-real, var(--hdr-top)) + 4px); border-radius: 22px; box-shadow: 0 22px 40px -26px rgba(20, 18, 14, .45); }
  html[data-plantilla="dot"]:not(.editando) .banner > .banner__nombre { display: none; }
  html[data-plantilla="dot"]:not([data-pagina]) .cats::before, html[data-plantilla="dot"][data-pagina="inicio"] .cats::before {
    content: attr(data-tienda) "."; display: block; padding: 4px 16px 18px; font: 800 clamp(44px, 14vw, 64px)/.95 var(--font-t); letter-spacing: -.055em; color: var(--fg);
    overflow-wrap: anywhere; animation: dot-marca .9s var(--dot-ease) .15s both; }
  html[data-plantilla="dot"] .cats[data-tienda=""]::before { display: none; }
  /* Productos en una sola columna: foto chica redondeada a la izquierda, nombre y precio, y un botón redondo con "+". */
  html[data-plantilla="dot"] .grid:not(.grid--llegados) { grid-template-columns: 1fr; gap: 0; }
  html[data-plantilla="dot"] .grid:not(.grid--llegados) .card { flex-direction: row; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  html[data-plantilla="dot"] .grid:not(.grid--llegados) .card__media { flex: none; width: 92px; border-radius: 18px; }
  html[data-plantilla="dot"] .grid:not(.grid--llegados) .card:hover .card__media { border-radius: 18px; }
  html[data-plantilla="dot"] .grid:not(.grid--llegados) .card__body { position: relative; padding: 0 54px 0 0; gap: 2px; align-self: stretch; justify-content: center; }
  html[data-plantilla="dot"] .grid:not(.grid--llegados) .card__price { margin-top: 4px; }
  html[data-plantilla="dot"] .grid:not(.grid--llegados) .card__add { position: absolute; right: 0; top: 50%; width: 42px; height: 42px; margin: -21px 0 0; padding: 0; overflow: hidden; color: transparent; font-size: 0; border-radius: 50%; }
  html[data-plantilla="dot"] .grid:not(.grid--llegados) .card__add::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--btn-fg); font: 400 26px/1 var(--font); }
  html[data-plantilla="dot"] .grid:not(.grid--llegados) .card__tag { top: 6px; left: 6px; padding: 2px 7px; font-size: 10px; }
  html[data-plantilla="dot"] .grid:not(.grid--llegados) .card__oferta { top: 6px; right: 6px; padding: 2px 6px; font-size: 10.5px; }
  html[data-plantilla="dot"] .card__envio { font-size: 11.5px; }
}
@keyframes dot-marca { from { opacity: 0; transform: translateY(18px); letter-spacing: -.02em; } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html[data-plantilla="dot"] .cats::before { animation: none; } }

/* Tienda sin logo: no se muestra el círculo con las iniciales (la cabecera queda igual, más baja). Sin banner tampoco
   se muestra la franja (ver sin-banner). Mientras el dueño edita, el círculo aparece para poder subir el logo. */
html.sin-logo:not(.editando) .hdr__logo { visibility: hidden; }
@media (max-width: 760px) {
  html.sin-logo:not(.editando) .hdr__logo { visibility: visible; }
  html.sin-logo:not(.editando) .hdr__logo .logo-circulo { display: none; }
  html.sin-logo:not(.editando):not([data-plantilla="insane"]).sin-banner body { padding-top: calc(var(--hdr-real, 120px) + 12px); }
}
html.sin-logo.sin-banner:not(.editando) .cats { padding-top: 12px; }
html[data-plantilla] .pm-op__antes, .pm-op__antes { opacity: .55; font-weight: 500; margin-right: 2px; }