/* ==========================================================================
   CC-Shops · temas por nicho (encargo V2)
   Cada tema tiene su propia dirección de arte: tokens de color y tipografía,
   forma de las tarjetas y composición del hero. Se activan con data-theme.
   Tech (tema-tech.css) y Clásico (base.css) no se modifican aquí.
   ========================================================================== */

/* ---- MODA: campaña editorial, piedra y negro, serif de revista ---- */
:root[data-theme="moda"] {
  color-scheme: light;
  --bg: #f4f2ee; --bg-deep: #e8e4dd; --paper: #ffffff; --paper-2: #f8f7f4;
  --ink: #111111; --ink-2: #3d3d3d; --muted: #7d7a74;
  --line: rgba(17, 17, 17, .12); --line-strong: rgba(17, 17, 17, .28);
  --brand: #111111; --brand-dark: #000000; --brand-deep: #000000; --brand-2: #8c7a68;
  --brand-soft: rgba(17, 17, 17, .07); --brand-mist: rgba(17, 17, 17, .04);
  --accent: #a77f5a; --accent-dark: #7c5c3c; --accent-soft: rgba(167, 127, 90, .14);
  --serif: "Bodoni 72", "Didot", "Playfair Display", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 14px 30px -22px rgba(0, 0, 0, .35); --shadow-lg: 0 30px 60px -36px rgba(0, 0, 0, .4);
  --radius: 0px; --radius-lg: 0px; --radius-xl: 0px;
}

/* ---- BELLEZA Y CUIDADO: ritual suave, rosa empolvado y nude ---- */
:root[data-theme="belleza"] {
  color-scheme: light;
  --bg: #fbf4f1; --bg-deep: #f2e4de; --paper: #fffafa; --paper-2: #fcf1ee;
  --ink: #3a2a2a; --ink-2: #6b5252; --muted: #9b8080;
  --line: rgba(120, 70, 70, .12); --line-strong: rgba(120, 70, 70, .24);
  --brand: #b5676d; --brand-dark: #97505a; --brand-deep: #4a2328; --brand-2: #d9a48f;
  --brand-soft: rgba(181, 103, 109, .12); --brand-mist: rgba(181, 103, 109, .06);
  --accent: #d9a48f; --accent-dark: #a86f5b; --accent-soft: rgba(217, 164, 143, .18);
  --serif: "Cormorant Garamond", "Garamond", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --shadow-xs: 0 1px 2px rgba(120, 70, 70, .06); --shadow-sm: 0 4px 14px -8px rgba(120, 70, 70, .25);
  --shadow-md: 0 18px 36px -24px rgba(120, 70, 70, .35); --shadow-lg: 0 30px 60px -32px rgba(120, 70, 70, .4);
  --radius: 22px; --radius-lg: 26px; --radius-xl: 32px;
}

/* ---- MASCOTAS: vínculo y bienestar, crema, verde y tierra ---- */
:root[data-theme="mascotas"] {
  color-scheme: light;
  --bg: #f5f1e6; --bg-deep: #ebe4d1; --paper: #fffdf7; --paper-2: #faf6ea;
  --ink: #23362a; --ink-2: #4d6052; --muted: #7b8a7e;
  --line: rgba(35, 54, 42, .12); --line-strong: rgba(35, 54, 42, .24);
  --brand: #2f6b4f; --brand-dark: #245640; --brand-deep: #14301f; --brand-2: #c77d3a;
  --brand-soft: rgba(47, 107, 79, .12); --brand-mist: rgba(47, 107, 79, .06);
  --accent: #c77d3a; --accent-dark: #a2601f; --accent-soft: rgba(199, 125, 58, .16);
  --serif: "Nunito", "Quicksand", system-ui, sans-serif;
  --sans: "Nunito", "Quicksand", "Segoe UI", system-ui, sans-serif;
  --shadow-xs: 0 1px 2px rgba(35, 54, 42, .06); --shadow-sm: 0 4px 14px -8px rgba(35, 54, 42, .22);
  --shadow-md: 0 18px 36px -24px rgba(35, 54, 42, .3); --shadow-lg: 0 30px 60px -32px rgba(35, 54, 42, .35);
  --radius: 20px; --radius-lg: 24px; --radius-xl: 30px;
}

/* ---- HOGAR Y DECORACIÓN: interiorismo, piedra, madera y salvia ---- */
:root[data-theme="hogar"] {
  color-scheme: light;
  --bg: #efebe4; --bg-deep: #e4ded3; --paper: #f8f6f1; --paper-2: #f2eee6;
  --ink: #2a2622; --ink-2: #554d44; --muted: #877d72;
  --line: rgba(42, 38, 34, .12); --line-strong: rgba(42, 38, 34, .24);
  --brand: #6b5a48; --brand-dark: #55463a; --brand-deep: #2d241c; --brand-2: #8fa39a;
  --brand-soft: rgba(107, 90, 72, .12); --brand-mist: rgba(107, 90, 72, .06);
  --accent: #8fa39a; --accent-dark: #5f7a6f; --accent-soft: rgba(143, 163, 154, .2);
  --serif: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --shadow-xs: none; --shadow-sm: 0 2px 8px -6px rgba(42, 38, 34, .2);
  --shadow-md: 0 16px 30px -24px rgba(42, 38, 34, .28); --shadow-lg: 0 28px 56px -34px rgba(42, 38, 34, .32);
  --radius: 6px; --radius-lg: 8px; --radius-xl: 10px;
}

/* ---- DEPORTE Y OUTDOOR: energía, carbón y naranja controlado ---- */
:root[data-theme="deporte"] {
  color-scheme: light;
  --bg: #eceef0; --bg-deep: #dfe2e6; --paper: #ffffff; --paper-2: #f5f6f7;
  --ink: #0b0d10; --ink-2: #33383f; --muted: #6b717a;
  --line: rgba(11, 13, 16, .12); --line-strong: rgba(11, 13, 16, .26);
  --brand: #0b0d10; --brand-dark: #000000; --brand-deep: #000000; --brand-2: #e4572e;
  --brand-soft: rgba(11, 13, 16, .08); --brand-mist: rgba(11, 13, 16, .04);
  --accent: #e4572e; --accent-dark: #b8401e; --accent-soft: rgba(228, 87, 46, .14);
  --serif: "Barlow Condensed", "Arial Narrow", "Impact", sans-serif;
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --shadow-xs: none; --shadow-sm: 0 2px 0 rgba(11, 13, 16, .08); --shadow-md: 0 12px 24px -16px rgba(11, 13, 16, .4); --shadow-lg: 0 24px 40px -24px rgba(11, 13, 16, .45);
  --radius: 4px; --radius-lg: 6px; --radius-xl: 8px;
}

/* ---- ALIMENTACIÓN GOURMET: sabor, origen y artesanía, crema y terracota ---- */
:root[data-theme="gourmet"] {
  color-scheme: light;
  --bg: #f7efe2; --bg-deep: #efe2cc; --paper: #fffaf3; --paper-2: #fbf4e8;
  --ink: #2e1f14; --ink-2: #5d4632; --muted: #927a64;
  --line: rgba(60, 35, 15, .12); --line-strong: rgba(60, 35, 15, .24);
  --brand: #7a3b1e; --brand-dark: #5f2c15; --brand-deep: #3a1a0c; --brand-2: #c9a14a;
  --brand-soft: rgba(122, 59, 30, .11); --brand-mist: rgba(122, 59, 30, .05);
  --accent: #c9a14a; --accent-dark: #9c7a2c; --accent-soft: rgba(201, 161, 74, .18);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Lato", "Segoe UI", system-ui, sans-serif;
  --shadow-xs: 0 1px 2px rgba(60, 35, 15, .06); --shadow-sm: 0 4px 14px -8px rgba(60, 35, 15, .25);
  --shadow-md: 0 18px 34px -24px rgba(60, 35, 15, .32); --shadow-lg: 0 30px 58px -32px rgba(60, 35, 15, .38);
  --radius: 14px; --radius-lg: 18px; --radius-xl: 24px;
}

/* ==========================================================================
   Composición del hero por nicho (sin imágenes externas: la foto del hero
   es la del producto destacado de la tienda; el fondo es una composición).
   ========================================================================== */

/* Moda: bloque editorial asimétrico, titular grande en serif */
[data-theme="moda"] .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 0; align-items: stretch; }
[data-theme="moda"] .hero-copy { align-self: center; padding-right: 32px; }
[data-theme="moda"] .hero h1 { font-family: var(--serif); font-size: clamp(52px, 7vw, 96px); line-height: .92; letter-spacing: -.03em; font-weight: 400; text-transform: uppercase; }
[data-theme="moda"] .hero-art { min-height: 640px; }
[data-theme="moda"] .hero-blob { inset: 0; border-radius: 0; background: linear-gradient(165deg, #e6e1d8 0%, #cfc7bb 100%); }

/* Belleza: círculo suave, titular en serif fino */
[data-theme="belleza"] .hero h1 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(44px, 6vw, 78px); line-height: 1; }
[data-theme="belleza"] .hero-blob { border-radius: 50%; background: radial-gradient(circle at 36% 32%, #fffdfb 0%, #f3d6cc 46%, #d9a48f 100%); filter: saturate(.9); }

/* Mascotas: forma orgánica, titular redondeado y cálido */
[data-theme="mascotas"] .hero h1 { font-weight: 800; font-size: clamp(44px, 6vw, 80px); line-height: 1.02; letter-spacing: -.02em; }
[data-theme="mascotas"] .hero-blob { border-radius: 58% 42% 54% 46% / 48% 56% 44% 52%; background: linear-gradient(135deg, #dfe9d6 0%, #bfd3b3 100%); }

/* Hogar: escena de interior (pared y suelo), titular sobrio */
[data-theme="hogar"] .hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 6.4vw, 88px); line-height: .98; letter-spacing: -.02em; }
[data-theme="hogar"] .hero-art { min-height: 600px; }
[data-theme="hogar"] .hero-blob { border-radius: 0; background: linear-gradient(to bottom, #e9e3d8 0 64%, #b9a58a 64% 100%); }

/* Deporte: titular condensado en mayúsculas y bloque diagonal */
[data-theme="deporte"] .hero h1 { font-family: var(--serif); text-transform: uppercase; font-weight: 800; font-size: clamp(56px, 8vw, 116px); line-height: .86; letter-spacing: -.01em; }
[data-theme="deporte"] .hero-art { min-height: 600px; }
[data-theme="deporte"] .hero-blob { inset: 0; border-radius: 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(120deg, #0b0d10 0%, #1f242b 60%, #e4572e 100%); }

/* Gourmet: arco de cocina, titular en serif con cursiva */
[data-theme="gourmet"] .hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(46px, 6vw, 84px); line-height: 1.02; }
[data-theme="gourmet"] .hero-blob { border-radius: 999px 999px 28px 28px; background: radial-gradient(circle at 50% 38%, #f1d9a8 0%, #c9a14a 40%, #7a3b1e 100%); }

/* Mobile: el hero se apila y el bloque ocupa el ancho */
@media (max-width: 880px) {
  [data-theme="moda"] .hero-grid, [data-theme="hogar"] .hero-grid { grid-template-columns: 1fr; }
  [data-theme="moda"] .hero-art, [data-theme="hogar"] .hero-art, [data-theme="deporte"] .hero-art { min-height: 420px; }
  [data-theme="moda"] .hero-copy { padding-right: 0; }
}

/* Los temas de nicho no muestran los paneles de inventario del hero (Kardex y sellos):
   el inventario es un dato operativo y no forma parte de la imagen de la tienda. */
[data-theme="moda"] .hero-float--kardex,
[data-theme="moda"] .hero-stamp,
[data-theme="belleza"] .hero-float--kardex,
[data-theme="belleza"] .hero-stamp,
[data-theme="mascotas"] .hero-float--kardex,
[data-theme="mascotas"] .hero-stamp,
[data-theme="hogar"] .hero-float--kardex,
[data-theme="hogar"] .hero-stamp,
[data-theme="deporte"] .hero-float--kardex,
[data-theme="deporte"] .hero-stamp,
[data-theme="gourmet"] .hero-float--kardex,
[data-theme="gourmet"] .hero-stamp { display: none; }