:where(.cmp-faq__title){margin:0 0 1rem;font-family:var(--font-heading, inherit)}:where(.cmp-faq__item){border-bottom:1px solid var(--color-border, #e5e7eb);border-bottom-color:color-mix(in srgb, currentColor 22%, transparent)}:where(.cmp-faq__item:first-of-type){border-top:1px solid var(--color-border, #e5e7eb);border-top-color:color-mix(in srgb, currentColor 22%, transparent)}:where(.cmp-faq__question){display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;padding:1rem 0;font-family:var(--font-heading, inherit);font-weight:600;line-height:1.35;cursor:pointer;list-style:none}:where(.cmp-faq__question)::-webkit-details-marker{display:none}:where(.cmp-faq__question)::after{content:"+";flex:none;font-size:1.5rem;line-height:1;color:var(--section-accent, var(--color-primary, #2563eb));transition:transform .2s}:where(.cmp-faq__item[open] > .cmp-faq__question)::after{transform:rotate(45deg)}:where(.cmp-faq__question):focus-visible{outline:2px solid var(--section-accent, var(--color-primary, #2563eb));outline-offset:2px;border-radius:var(--radius-sm, .4rem)}:where(.cmp-faq__answer){padding:0 0 1.25rem}:where(.cmp-faq__answer > :first-child){margin-top:0}:where(.cmp-faq__answer > :last-child){margin-bottom:0}@media (prefers-reduced-motion: reduce){:where(.cmp-faq__question)::after{transition:none}}
:where(.cmp-gallery__zoom){display:block;cursor:zoom-in}:where(.cmp-gallery__zoom):focus-visible{outline:2px solid var(--color-primary, #2563eb);outline-offset:2px;border-radius:var(--radius-sm, .4rem)}.cmp-gallery--crop-top .cmp-gallery__img{object-position:top}.cmp-gallery--ratio-1-1 .cmp-gallery__img{aspect-ratio:1/1}.cmp-gallery--ratio-3-4 .cmp-gallery__img{aspect-ratio:3/4}.cmp-gallery--ratio-4-3 .cmp-gallery__img{aspect-ratio:4/3}.cmp-gallery--ratio-16-9 .cmp-gallery__img{aspect-ratio:16/9}:where(.cmp-gallery__caption){display:block;margin-top:.5rem;font-size:.9rem;line-height:1.4}:where(.cmp-lightbox){width:min(96vw,1200px);max-width:none;max-height:94vh;max-height:94dvh;padding:0;border:0;border-radius:var(--radius-md, .5rem);background:var(--color-surface, #fff);overflow:auto;overscroll-behavior:contain}:where(.cmp-lightbox)::backdrop{background:rgba(0,0,0,.8)}:where(.cmp-lightbox__img){display:block;width:100%;height:auto}:where(.cmp-lightbox__close){position:fixed;top:1rem;right:1rem;z-index:1;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;font-size:1.75rem;line-height:1;cursor:pointer}:where(.cmp-lightbox__close):focus-visible{outline:2px solid #fff;outline-offset:2px}:where(html:has(.cmp-lightbox[open])){overflow:hidden}:where(.cmp-location__title){margin:0 0 1rem;font-family:var(--font-heading, inherit)}:where(.cmp-location__address){margin:0 0 .5rem;font-weight:600}:where(.cmp-location__hours){margin:0 0 1rem;opacity:.85}:where(.cmp-location__actions){display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin:0 0 1.25rem}:where(.cmp-location__alt){font-weight:600}:where(.cmp-location__map){position:relative;aspect-ratio:16/9;min-height:260px;overflow:hidden;border-radius:var(--radius-md, .5rem);background:var(--color-surface, #e5e7eb)}:where(.cmp-location__map iframe){position:absolute;inset:0;width:100%;height:100%;border:0}

/* =====================================================================
   SSG · Tema "Gala Rosé" — Moda femenina, colección festiva/estacional
   Fuentes (Google): Playfair Display (títulos) + Jost (texto)
   Mobile-first · cortes 768px / 1000px · max 1100px
   ===================================================================== */

/* ---------- 1. VARIABLES ---------- */
:root {
  /* Marca (cambia estas 4–5 para otro portal) */
  --color-primary: #b0306a;          /* magenta rosa: botones, enlaces */
  --color-primary-strong: #8c2253;   /* hover/active del primario */
  --color-on-primary: #ffffff;       /* texto sobre primario */
  --color-accent: #b8893b;           /* dorado: detalles decorativos */
  --color-soft: #f9e4ea;             /* rubor: fondos suaves, chips */

  /* Neutros */
  --color-text: #3a1f2b;
  --color-muted: #6e5260;
  --color-bg: #fffafb;               /* blanco nieve */
  --color-surface: #ffffff;
  --color-champagne: #f6ecdc;
  --color-border: #efd8e0;
  --color-focus: #b0306a;

  /* Tipografía */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-base: 1.0625rem;
  --lh-base: 1.65;

  /* Forma y profundidad */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgb(176 48 106 / 0.08);
  --shadow-md: 0 14px 36px -12px rgb(140 34 83 / 0.28);

  /* Espacios */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(3rem, 7vw, 5.5rem);
  --max-width: 1100px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 72px;

  --gradient-shine: linear-gradient(120deg, var(--color-soft) 0%, var(--color-champagne) 55%, var(--color-bg) 100%);
  --transition: 180ms ease;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
.site-main { flex: 1 0 auto; }
img, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
a { color: var(--color-primary); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--transition); }
a:hover { color: var(--color-primary-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--color-soft); color: var(--color-text); }

/* ---------- 3. UTILIDADES ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.75rem 1.75rem;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--color-on-primary); background: var(--color-primary);
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { color: var(--color-on-primary); background: var(--color-primary-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; pointer-events: none; }

/* Contenido editorial (texto, producto, container) */
.cmp-text, .product__desc, .container > :not(.product):not(.cmp-catalog) { max-width: 70ch; }
.cmp-text ul, .cmp-text ol, .product__desc ul, .product__desc ol, .container ul, .container ol { padding-left: 1.3em; margin: 0 0 1em; }
.cmp-text li, .product__desc li, .container li { margin-bottom: 0.35em; }
.cmp-text li::marker, .product__desc li::marker, .container li::marker { color: var(--color-accent); }
.cmp-text blockquote, .product__desc blockquote, .container blockquote {
  margin: 1.5em 0; padding: 0.5em 0 0.5em 1.25em;
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-heading); font-style: italic; font-size: 1.2em;
}
.cmp-text img, .product__desc img, .container > img { border-radius: var(--radius-md); margin: 1em 0; }
.cmp-text hr, .product__desc hr, .container hr {
  border: 0; height: 1px; margin: 2em 0;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.cmp-text table, .product__desc table, .container table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.95em; }
.cmp-text th, .cmp-text td, .product__desc th, .product__desc td, .container th, .container td {
  padding: 0.6em 0.8em; border-bottom: 1px solid var(--color-border); text-align: left;
}
.cmp-text th, .product__desc th, .container th { font-weight: 600; background: var(--color-soft); }
.cmp-text__title::after {
  content: ""; display: block; width: 56px; height: 2px; margin-top: 0.4em;
  background: var(--color-accent);
}

/* ---------- 4. HEADER ---------- */
.site-header {
  background: rgb(255 250 251 / 0.94);
  border-bottom: 1px solid var(--color-border);
  z-index: 50;
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { backdrop-filter: blur(10px); background: rgb(255 250 251 / 0.85); }
}
.site-header--sticky { position: sticky; top: 0; }
.site-header__inner {
  position: relative;
  max-width: var(--max-width); margin-inline: auto;
  min-height: var(--header-h);
  padding: 0.5rem var(--gutter);
  display: flex; align-items: center; gap: var(--space-2);
}
.site-nav-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.site-nav-toggle {
  order: 0; flex: none;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  cursor: pointer; transition: background var(--transition);
}
.site-nav-toggle:hover { background: var(--color-soft); }
.site-nav-toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--color-text); transition: transform var(--transition), opacity var(--transition);
}
.site-nav-toggle__input:focus-visible + .site-nav-toggle { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.site-nav-toggle__input:checked + .site-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle__input:checked + .site-nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav-toggle__input:checked + .site-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-header__brand {
  order: 1; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--color-text);
}
.site-header__brand:hover { color: var(--color-text); }
.site-header__logo { height: 48px; width: auto; }
.site-header__name {
  font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-header__tagline { display: none; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }

.site-header__cta {
  order: 3; flex: none;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--color-on-primary); background: var(--color-primary);
  border-radius: var(--radius-pill); transition: background var(--transition);
}
.site-header__cta:hover { color: var(--color-on-primary); background: var(--color-primary-strong); text-decoration: none; }

.site-nav {
  order: 4;
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.site-nav-toggle__input:checked ~ .site-nav { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: var(--space-1) var(--gutter) var(--space-2); }
.site-nav a {
  display: flex; align-items: center; min-height: 48px;
  padding: 0 0.25rem; border-bottom: 1px solid var(--color-border);
  font-size: 1.05rem; text-decoration: none; color: var(--color-text);
}
.site-nav li:last-child a { border-bottom: 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-primary); }

@media (min-width: 768px) {
  .site-nav-toggle { display: none; }
  .site-header__brand { flex: 0 1 auto; }
  .site-header__brand:has(.site-header__tagline) { flex-wrap: wrap; row-gap: 0; }
  .site-header__tagline { display: block; }
  .site-nav {
    order: 2; display: block; position: static; margin-left: auto;
    background: none; border: 0; box-shadow: none;
  }
  .site-nav ul { display: flex; gap: 0.25rem; padding: 0; }
  .site-nav a {
    min-height: 44px; padding: 0 0.85rem; border: 0; position: relative;
    font-size: 0.95rem; letter-spacing: 0.04em;
  }
  .site-nav a::after {
    content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 8px; height: 1px;
    background: var(--color-accent); transform: scaleX(0); transition: transform var(--transition);
  }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .site-header__cta { padding: 0.5rem 1.4rem; }
  .site-header__brand + .site-header__cta { margin-left: auto; }
}

/* ---------- 5. FOOTER ---------- */
.site-footer {
  margin-top: auto;
  background: #2b1520;
  color: #f7e9ee;
  background-image: radial-gradient(circle at 85% 0%, rgb(184 137 59 / 0.18), transparent 45%);
}
.site-footer a { color: #f7e9ee; }
.site-footer a:hover { color: #e9c98b; }
.site-footer :focus-visible { outline-color: #e9c98b; }
.site-footer__inner {
  max-width: var(--max-width); margin-inline: auto;
  padding: var(--space-5) var(--gutter) var(--space-4);
  display: grid; gap: var(--space-4);
}
.site-footer__name { display: block; font-family: var(--font-heading); font-style: italic; font-size: 1.6rem; font-weight: 600; margin-bottom: 0.5rem; }
.site-footer__brand p { margin: 0 0 0.3em; color: #e6cfd8; }
.site-footer__nav ul, .site-footer__social { list-style: none; margin: 0; padding: 0; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgb(233 201 139 / 0.5);
  font-size: 0; color: transparent; position: relative;
  transition: background var(--transition), border-color var(--transition);
}
.site-footer__social a::before {
  content: ""; width: 20px; height: 20px; background: #f7e9ee;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.site-footer__social a:hover { background: #e9c98b; border-color: #e9c98b; }
.site-footer__social a:hover::before { background: #2b1520; }
/* Fallback: si el navegador no soporta mask, se muestra el texto */
@supports not ((mask: none) or (-webkit-mask: none)) {
  .site-footer__social a { width: auto; padding: 0 1rem; border-radius: var(--radius-pill); font-size: 0.85rem; color: #f7e9ee; }
  .site-footer__social a::before { display: none; }
}
.site-footer__social-facebook  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v8h4v-8h3l1-4h-4V8z'/%3E%3C/svg%3E"); }
.site-footer__social-instagram { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black'/%3E%3C/svg%3E"); }
.site-footer__social-whatsapp  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.5-3.9-4.7-4.1-.1-.2-1.1-1.5-1.1-2.8s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.4.6-.4.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l1.9.9c.3.1.5.2.5.3.1.1.1.6-.1 1.2z'/%3E%3C/svg%3E"); }
.site-footer__social-tiktok    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 3c.4 2.3 1.9 3.9 4 4.2v3.3c-1.5 0-2.9-.4-4-1.2v6.2A5.5 5.5 0 1 1 10.5 10v3.4a2.2 2.2 0 1 0 2.2 2.2V3H16z'/%3E%3C/svg%3E"); }
.site-footer__social-youtube   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 8.2a3 3 0 0 0-2-2.1C18.2 5.6 12 5.6 12 5.6s-6.2 0-8 .5a3 3 0 0 0-2 2.1A31 31 0 0 0 1.6 12 31 31 0 0 0 2 15.8a3 3 0 0 0 2 2.1c1.8.5 8 .5 8 .5s6.2 0 8-.5a3 3 0 0 0 2-2.1 31 31 0 0 0 .4-3.8 31 31 0 0 0-.4-3.8zM10 15V9l5.2 3L10 15z'/%3E%3C/svg%3E"); }
.site-footer__social-linkedin  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM2.5 8.5h3V21h-3zM9 8.5h2.9v1.7c.4-.8 1.4-1.9 3.4-1.9 3.2 0 3.7 2.1 3.7 4.8V21h-3v-6.9c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v7H9z'/%3E%3C/svg%3E"); }
.site-footer__social-x         { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.8 3h3.1l-6.8 7.8L22 21h-6.2l-4.9-6.4L5.3 21H2.2l7.3-8.3L2 3h6.4l4.4 5.8L17.8 3zm-1.1 16.2h1.7L7.4 4.7H5.6l11.1 14.5z'/%3E%3C/svg%3E"); }
.site-footer__copy {
  margin: 0; padding: var(--space-2) var(--gutter);
  border-top: 1px solid rgb(233 201 139 / 0.25);
  text-align: center; font-size: 0.85rem; color: #d9bfca;
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; align-items: start; }
}

/* ---------- 6. SECCIONES ---------- */
.section { position: relative; padding: var(--space-5) 0; }
.section + .section:not(.section--tinted):not(.section--bg-image):not(.section--full) { padding-top: 0; }
.section__inner { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }
.section__grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; align-items: stretch; }
.section__col { min-width: 0; display: flex; flex-direction: column; }
.section__col > * { margin-bottom: 0; }
.section__col > .cmp-card { flex: 1; }
@media (min-width: 768px) {
  .section__grid--2, .section__grid--3, .section__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
}
@media (min-width: 1000px) {
  .section__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.section--full { padding: 0; }

/* ---------- 7. FONDOS DE SECCIÓN (temas) ---------- */
.section--tinted { background: var(--section-bg); color: var(--section-fg); }
.section--tinted a { color: var(--section-accent); }
.section--tinted a:hover { color: var(--section-fg); }
.section--tinted .btn { background: var(--section-accent); color: var(--section-btn-fg); }
.section--tinted .btn:hover { background: var(--section-fg); color: var(--section-bg); }
.section--tinted :focus-visible { outline-color: var(--section-accent); }
.section--tinted .cmp-text__title::after { background: var(--section-accent); }
.section--tinted .cmp-card { color: var(--color-text); }
.section--tinted .cmp-card a { color: var(--color-primary); }
.section--tinted .cmp-card a:hover { color: var(--color-primary-strong); }
.section--tinted .cmp-card .btn { background: var(--color-primary); color: var(--color-on-primary); }
.section--tinted .cmp-card :focus-visible { outline-color: var(--color-focus); }

.section--bg-light              { --section-bg:#f7f2f3; --section-fg:#2b1a21; --section-accent:#a32a60; --section-btn-fg:#ffffff; }
.section--bg-dark               { --section-bg:#1f141a; --section-fg:#f8eef1; --section-accent:#f2b8cc; --section-btn-fg:#2b1a21; }
.section--bg-organic-cream      { --section-bg:#f5ecdc; --section-fg:#3d2e1e; --section-accent:#8a4b25; --section-btn-fg:#ffffff; }
.section--bg-organic-moss       { --section-bg:#3f4a33; --section-fg:#f3efe2; --section-accent:#e6d3a3; --section-btn-fg:#2a2a1c; }
.section--bg-organic-terracotta { --section-bg:#a94f35; --section-fg:#fff8f1; --section-accent:#fbe3c9; --section-btn-fg:#5a2414; }
.section--bg-corp-gray          { --section-bg:#e9ebef; --section-fg:#1f2733; --section-accent:#2d4f7c; --section-btn-fg:#ffffff; }
.section--bg-corp-sky           { --section-bg:#e3f0fa; --section-fg:#10324f; --section-accent:#145a8c; --section-btn-fg:#ffffff; }
.section--bg-corp-blue          { --section-bg:#173c6b; --section-fg:#f2f6fb; --section-accent:#ffd27a; --section-btn-fg:#173c6b; }
.section--bg-premium-black      { --section-bg:#141113; --section-fg:#f6eee4; --section-accent:#d8b46a; --section-btn-fg:#141113; }
.section--bg-premium-navy       { --section-bg:#141d33; --section-fg:#f3ecdf; --section-accent:#d9b670; --section-btn-fg:#141d33; }
.section--bg-premium-ivory      { --section-bg:#f8f2e6; --section-fg:#2a2117; --section-accent:#7d5a1e; --section-btn-fg:#ffffff; }
.section--bg-pop-purple         { --section-bg:#4b1d78; --section-fg:#ffffff; --section-accent:#ffc6ea; --section-btn-fg:#4b1d78; }
.section--bg-pop-pink           { --section-bg:#c2185b; --section-fg:#ffffff; --section-accent:#fff0f6; --section-btn-fg:#a0124b; }
.section--bg-pop-cyan           { --section-bg:#0e6e80; --section-fg:#ffffff; --section-accent:#fff3c4; --section-btn-fg:#0e4f5c; }
.section--bg-pop-orange         { --section-bg:#b54708; --section-fg:#ffffff; --section-accent:#fff1e0; --section-btn-fg:#8a3505; }
/* .section--bg-custom: las 4 variables llegan por style="" */

/* Fondo con imagen */
.section--bg-image { color: #ffffff; overflow: hidden; isolation: isolate; }
.section__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.section--bg-image::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgb(43 21 32 / 0.78), rgb(90 24 56 / 0.62));
}
.section--bg-image a { color: inherit; }
.section--bg-image .btn { background: #ffffff; color: var(--color-primary-strong); }
.section--bg-image .btn:hover { background: var(--color-soft); color: var(--color-primary-strong); }
.section--bg-image :focus-visible { outline-color: #ffffff; }
.section--bg-image .cmp-card { color: var(--color-text); }
.section--bg-image .cmp-card a { color: var(--color-primary); }

/* ---------- 8. HERO ---------- */
.cmp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(380px, 70vh, 640px);
  color: #ffffff;
}
.cmp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cmp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(43 21 32 / 0.25) 0%, rgb(43 21 32 / 0.72) 100%);
}
.cmp-hero__content {
  width: 100%; max-width: var(--max-width); margin-inline: auto;
  padding: var(--space-5) var(--gutter);
  display: flex; flex-direction: column;
}
.cmp-hero__content > * { max-width: 34ch; }
.cmp-hero__title { margin-bottom: 0.3em; text-shadow: 0 2px 20px rgb(0 0 0 / 0.25); }
.cmp-hero__title::before {
  content: "✦"; display: block; font-size: 0.4em; color: #e9c98b; letter-spacing: 0.3em; margin-bottom: 0.4em;
}
.cmp-hero__subtitle { font-size: 1.15rem; opacity: 0.95; max-width: 46ch; }
.cmp-hero__actions { margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cmp-hero .btn:not(:first-child) { background: transparent; box-shadow: inset 0 0 0 1.5px #ffffff; }

.cmp-hero--pos-left   .cmp-hero__content { align-items: flex-start; text-align: left; }
.cmp-hero--pos-center .cmp-hero__content { align-items: center; text-align: center; }
.cmp-hero--pos-center .cmp-hero__actions { justify-content: center; }
.cmp-hero--pos-right  .cmp-hero__content { align-items: flex-end; text-align: right; }
.cmp-hero--pos-right  .cmp-hero__actions { justify-content: flex-end; }

.cmp-hero--size-small  { min-height: clamp(260px, 40vh, 380px); }
.cmp-hero--size-small  .cmp-hero__title { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.cmp-hero--size-medium .cmp-hero__title { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.cmp-hero--size-large  { min-height: clamp(460px, 86vh, 760px); }
.cmp-hero--size-large  .cmp-hero__title { font-size: clamp(2.6rem, 8vw, 5rem); }
.cmp-hero--size-large  .cmp-hero__subtitle { font-size: clamp(1.1rem, 2vw, 1.35rem); }

.cmp-hero--plain { color: var(--color-text); background: var(--gradient-shine); }
.cmp-hero--plain::before {
  background:
    radial-gradient(circle at 12% 20%, rgb(176 48 106 / 0.14), transparent 40%),
    radial-gradient(circle at 88% 80%, rgb(184 137 59 / 0.2), transparent 45%);
}
.cmp-hero--plain .cmp-hero__title { text-shadow: none; }
.cmp-hero--plain .cmp-hero__title::before { color: var(--color-accent); }
.cmp-hero--plain .btn:not(:first-child) { color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); }

/* ---------- 9. IMAGEN ---------- */
.cmp-image { margin: 0; }
.cmp-image img { width: 100%; border-radius: var(--radius-md); }
a:has(> .cmp-image) { display: block; border-radius: var(--radius-md); }
a > .cmp-image img { transition: transform 400ms ease, box-shadow var(--transition); }
a:hover > .cmp-image img { box-shadow: var(--shadow-md); }

/* ---------- 10. TARJETA ---------- */
.cmp-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.cmp-card:hover { box-shadow: var(--shadow-md); }
.cmp-card > img, .cmp-product-card__link > img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--color-soft);
}
.cmp-card__body { flex: 1; display: flex; flex-direction: column; padding: var(--space-3); }
.cmp-card__body > :last-child { margin-bottom: 0; margin-top: auto; }
.cmp-card__body > p:last-child:not(:only-of-type) { padding-top: 0.25rem; }
.cmp-card__title { font-size: 1.3rem; margin-bottom: 0.4em; }
.cmp-card__link {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px;
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; text-decoration: none;
}
.cmp-card__link::after { content: "→"; transition: transform var(--transition); }
.cmp-card__link:hover::after { transform: translateX(4px); }

/* ---------- 11. BOTÓN ---------- */
.cmp-button { margin: 0; }

/* ---------- 12. VIDEO ---------- */
.cmp-video {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius-md); overflow: hidden; background: #2b1520; box-shadow: var(--shadow-md);
}
.cmp-video__play { position: absolute; inset: 0; display: block; }
.cmp-video__play img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease, filter var(--transition); }
.cmp-video__play:hover img { transform: scale(1.03); filter: brightness(0.85); }
.cmp-video__play:focus-visible { outline-offset: -4px; outline-color: #ffffff; }
.cmp-video__icon {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 0 0 8px rgb(255 255 255 / 0.25), var(--shadow-md);
  transition: transform var(--transition), background var(--transition);
}
.cmp-video__icon::before {
  content: ""; position: absolute; top: 50%; left: 54%; translate: -50% -50%;
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--color-primary);
}
.cmp-video__play:hover .cmp-video__icon { transform: scale(1.08); background: #ffffff; }
.cmp-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 13. GALERÍA ---------- */
.cmp-gallery { position: relative; --cols: 3; }
.cmp-gallery--cols-1 { --cols: 1; }
.cmp-gallery--cols-2 { --cols: 2; }
.cmp-gallery--cols-3 { --cols: 3; }
.cmp-gallery--cols-4 { --cols: 4; }
.cmp-gallery__list { list-style: none; margin: 0; padding: 0; }
.cmp-gallery__item { margin: 0; min-width: 0; }
.cmp-gallery__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-soft); }

/* Cuadrícula */
.cmp-gallery--grid .cmp-gallery__list { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp-gallery--grid.cmp-gallery--cols-1 .cmp-gallery__list { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .cmp-gallery--grid .cmp-gallery__list { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1rem; }
}

/* Carrusel */
.cmp-gallery--slider .cmp-gallery__list {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 0.75rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
}
.cmp-gallery--slider .cmp-gallery__list::-webkit-scrollbar { display: none; }
.cmp-gallery--slider .cmp-gallery__item { scroll-snap-align: start; }
.cmp-gallery--slider .cmp-gallery__list:focus-visible { outline-offset: 4px; }
.cmp-gallery__nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.8rem; line-height: 1; padding-bottom: 4px;
  color: var(--color-primary); background: rgb(255 255 255 / 0.95);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.cmp-gallery__nav:hover { background: var(--color-primary); color: var(--color-on-primary); }
.cmp-gallery__nav:disabled { opacity: 0.4; cursor: default; background: #ffffff; color: var(--color-primary); }
.cmp-gallery__nav--prev { left: 0.75rem; }
.cmp-gallery__nav--next { right: 0.75rem; }
.cmp-gallery__nav[hidden] { display: none; }
@media (max-width: 767.98px) { .cmp-gallery__nav { display: none; } }
@media (min-width: 768px) {
  .cmp-gallery--slider .cmp-gallery__list {
    gap: 1rem;
    grid-auto-columns: calc((100% - (var(--cols) - 1) * 1rem) / var(--cols));
  }
}
.cmp-gallery--slider.cmp-gallery--cols-1 .cmp-gallery__list { grid-auto-columns: 100%; }

/* ---------- 14. LISTA DE PRODUCTOS ---------- */
.cmp-product-list { --cols: 3; display: grid; gap: 0.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp-product-list--cols-1 { --cols: 1; grid-template-columns: 1fr; }
.cmp-product-list--cols-2 { --cols: 2; }
.cmp-product-list--cols-3 { --cols: 3; }
.cmp-product-list--cols-4 { --cols: 4; }
@media (min-width: 768px) {
  .cmp-product-list { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--space-3); }
}
.cmp-product-card { border-radius: var(--radius-md); }
.cmp-product-card__link {
  display: flex; flex-direction: column; height: 100%;
  color: var(--color-text); text-decoration: none;
}
.cmp-product-card__link:hover { color: var(--color-text); text-decoration: none; }
.cmp-product-card__link:focus-visible { outline-offset: -3px; border-radius: var(--radius-md); }
.cmp-product-card__link > img { aspect-ratio: 4 / 5; transition: transform 500ms ease; }
.cmp-product-card { transform: translateZ(0); }
.cmp-product-card:hover .cmp-product-card__link > img { transform: scale(1.04); }
.cmp-product-card .cmp-card__body { padding: 0.85rem 1rem 1.1rem; gap: 0.25rem; background: var(--color-surface); position: relative; }
.cmp-product-card .cmp-card__title {
  font-family: var(--font-body); font-size: 0.98rem; font-weight: 500; line-height: 1.35; margin: 0;
}
.cmp-product-card__price {
  margin: 0; margin-top: auto;
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--color-primary);
}

/* ---------- 15. CATÁLOGO ---------- */
.cmp-catalog { display: grid; gap: var(--space-2); }
.cmp-catalog__controls { display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .cmp-catalog__controls { grid-template-columns: 1fr 260px; } }
.cmp-catalog__search, .cmp-catalog__category {
  width: 100%; min-height: 48px; padding: 0.6rem 1.1rem;
  font: inherit; font-size: 1rem; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cmp-catalog__search {
  padding-left: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e5260' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 1rem center; background-size: 18px;
}
.cmp-catalog__category {
  appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0306a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px;
}
.cmp-catalog__search::placeholder { color: var(--color-muted); }
.cmp-catalog__search:hover, .cmp-catalog__category:hover { border-color: var(--color-primary); }
.cmp-catalog__search:focus-visible, .cmp-catalog__category:focus-visible {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgb(176 48 106 / 0.25);
}
.cmp-catalog__status { margin: 0; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.cmp-catalog__pager { margin-top: var(--space-3); }
.cmp-catalog__pager[hidden] { display: none; }
.cmp-catalog__pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.cmp-catalog__pages button {
  min-width: 44px; height: 44px; padding: 0 0.75rem;
  font: inherit; font-weight: 500; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.cmp-catalog__pages button:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.cmp-catalog__pages button[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.cmp-catalog__pages button:disabled { opacity: 0.4; cursor: not-allowed; }
.cmp-catalog__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 44px; color: var(--color-muted); }

/* ---------- 16. PRODUCTO ---------- */
.product { display: grid; gap: var(--space-4); }
.product__media { min-width: 0; }
.product__single img, .product__media .cmp-gallery__img { aspect-ratio: 4 / 5; border-radius: var(--radius-md); }
.product__info { min-width: 0; }
.product__title { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 0.25em; }
.product__price {
  font-family: var(--font-heading); font-size: 1.8rem; font-weight: 600; color: var(--color-primary);
  margin-bottom: 0.8em; display: flex; align-items: center; gap: 0.6rem;
}
.product__price::after { content: ""; flex: 0 0 48px; height: 1px; background: var(--color-accent); }
.product__cats { list-style: none; margin: 0 0 1.5em; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.product__cats li {
  margin: 0; padding: 0.35rem 0.9rem; font-size: 0.85rem; letter-spacing: 0.04em;
  color: var(--color-primary-strong); background: var(--color-soft); border-radius: var(--radius-pill);
}
.product__cats li::marker { content: none; }
.product__buy { margin: 1.5em 0 0; }
.product__buy .btn { width: 100%; }
@media (min-width: 768px) {
  .product { grid-template-columns: 1fr 1fr; align-items: start; }
  .product__media { position: sticky; top: calc(var(--header-h) + 1rem); }
  .product__buy .btn { width: auto; }
}

/* ---------- 17. MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .cmp-product-card:hover .cmp-product-card__link > img,
  .cmp-video__play:hover img, .btn:hover { transform: none; }
}