/* ============================================================================
   Ortopedia Movilidad — tema "lujo"
   ----------------------------------------------------------------------------
   Cómo funciona: TODAS las reglas van prefijadas con html[data-tema="lujo"].
   Eso hace dos cosas a la vez:
     1. Sin el atributo en <html>, este archivo no pinta nada. Quitar el tema
        es cambiar una línea en seo-head.php, sin tocar el CSS antiguo.
     2. El prefijo sube la especificidad (0,1,1), así que gana a las reglas de
        los <style> de cada página aunque este archivo se cargue antes.
   Para las reglas antiguas con !important (botones pensados para fondo oscuro)
   se repite el !important aquí: a igualdad de importancia gana la especificidad.

   Público: personas mayores y familias cuidadoras. Por eso el cuerpo va a 18px,
   el contraste del texto es 15:1 y ningún objetivo táctil baja de 52px. El lujo
   aquí es que se lea sin esfuerzo, no que sea sutil.
   ============================================================================ */

/* ============================================================
   1. FICHAS DE COLOR Y MEDIDAS
   ============================================================ */
html[data-tema="lujo"] {
  /* --- Redefinimos las variables que ya usaba la web: esto reskinea de golpe
         todo lo que estaba escrito con var(), sin pelear especificidad. --- */
  --bg:            #F7F4EF;             /* hueso cálido */
  --card:          #FFFFFF;             /* papel */
  --text:          #1C1B19;             /* tinta, contraste 15:1 sobre hueso */
  --muted:         #6B655C;             /* secundario, 5:1 = AA */
  --line:          rgba(28, 27, 25, .12);
  --btn:           #2F4A3C;             /* verde salvia oscuro (acento único) */
  --btn2:          #2F4A3C;             /* el verde y el "ok" son el mismo */
  --shadow:        0 1px 2px rgba(28,27,25,.04), 0 18px 40px -22px rgba(28,27,25,.16);
  --radius:        4px;                 /* adiós a los 18px */

  --header-bg:     #FFFFFF;
  --header-line:   rgba(28, 27, 25, .10);
  --header-text:   #1C1B19;
  --header-muted:  #57514A;
  --chip-bg:       transparent;
  --chip-border:   transparent;

  /* --- Fichas propias del tema --- */
  --l-band:        #EFEAE2;             /* bandas de sección */
  --l-band-2:      #E7E0D6;
  --l-hairline:    rgba(28, 27, 25, .12);
  --l-hairline-2:  rgba(28, 27, 25, .07);
  --l-accent:      #2F4A3C;
  --l-accent-h:    #223529;             /* hover, más oscuro */
  --l-accent-soft: rgba(47, 74, 60, .08);
  --l-brass:       #A9865B;             /* latón: filetes y detalles */
  --l-brass-h:     #8E6E45;
  --l-danger:      #8C2F26;
  --l-danger-soft: rgba(140, 47, 38, .08);

  --l-sombra-tarjeta: 0 1px 2px rgba(28,27,25,.04);
  --l-sombra-alta:    0 2px 4px rgba(28,27,25,.05), 0 22px 44px -26px rgba(28,27,25,.22);

  /* Radios variados: contenedor más suave que el interior */
  --l-r-contenedor: 6px;
  --l-r-tarjeta:    4px;
  --l-r-interior:   2px;

  /* Escala de espacio (múltiplos de 4, con saltos grandes arriba) */
  --l-e1: 4px;  --l-e2: 8px;   --l-e3: 12px;  --l-e4: 16px;
  --l-e5: 24px; --l-e6: 32px;  --l-e7: 48px;  --l-e8: 72px;
  --l-e9: 112px;

  --l-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --l-texto:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --l-z-grano: 100;

  --l-medida: 68ch;                     /* ancho de lectura cómodo */

  /* Las usa el pie con estilos en línea. Redefinirlas es la única forma de
     ganarle a un style="" sin tener que reescribir footer.php. */
  --corporativo:       #1C1B19;
  --texto-secundario:  #6B655C;
  --linea:             rgba(28, 27, 25, .12);
}

/* ============================================================
   2. BASE
   ============================================================ */
html[data-tema="lujo"] {
  font-size: 18px;                       /* base grande: es una web para leer */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

html[data-tema="lujo"] body {
  /* Fuera los dos degradados radiales: son la huella más clara de "hecho con IA" */
  background: var(--bg);
  color: var(--text);
  font-family: var(--l-texto);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

/* Grano: rompe la planitud digital sin pesar nada (SVG en línea, 1 petición menos) */
html[data-tema="lujo"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--l-z-grano);
  pointer-events: none;
  opacity: .038;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

html[data-tema="lujo"] ::selection {
  background: var(--l-accent);
  color: #F7F4EF;
}

/* Foco visible en latón: obligatorio para teclado, y aquí además es marca */
html[data-tema="lujo"] a:focus-visible,
html[data-tema="lujo"] button:focus-visible,
html[data-tema="lujo"] input:focus-visible,
html[data-tema="lujo"] select:focus-visible,
html[data-tema="lujo"] textarea:focus-visible,
html[data-tema="lujo"] .btn:focus-visible,
html[data-tema="lujo"] .chip:focus-visible {
  outline: 2px solid var(--l-brass);
  outline-offset: 3px;
  border-radius: var(--l-r-interior);
}

html[data-tema="lujo"] .wrap {
  max-width: 1180px;
  padding: var(--l-e6) var(--l-e5) var(--l-e7);
}

/* ============================================================
   3. TIPOGRAFÍA
   ============================================================ */
html[data-tema="lujo"] h1,
html[data-tema="lujo"] h2,
html[data-tema="lujo"] h3,
html[data-tema="lujo"] .p-title,
html[data-tema="lujo"] .hero h1 {
  font-family: var(--l-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--text);
  text-wrap: balance;
  margin-top: 0;
}

html[data-tema="lujo"] h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
html[data-tema="lujo"] h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin-bottom: var(--l-e4); }
html[data-tema="lujo"] h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.014em; }

html[data-tema="lujo"] p { text-wrap: pretty; }

/* Un filete de latón corto bajo los H2: el detalle que da el aire de marca */
html[data-tema="lujo"] .card > h2:first-child::after,
html[data-tema="lujo"] .why-text h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: var(--l-e4);
  background: var(--l-brass);
}

html[data-tema="lujo"] .muted,
html[data-tema="lujo"] .desc {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
}

/* Cuando un .pname abre una tarjeta hace de título de sección, no de nombre
   de producto: "Comprar por categorías", "Preguntas frecuentes"... */
html[data-tema="lujo"] .card > .pname:first-child,
html[data-tema="lujo"] .cat-head .pname {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important;  /* el style="" en línea */
  letter-spacing: -0.02em;
  margin-bottom: var(--l-e2);
}
html[data-tema="lujo"] .card > .pname:first-child::after,
html[data-tema="lujo"] .cat-head .pname::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: var(--l-e4);
  background: var(--l-brass);
}

html[data-tema="lujo"] .pname {
  font-family: var(--l-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.014em;
  line-height: 1.2;
}

/* Precios: serif, cifras tabulares y sin negrita de martillo */
html[data-tema="lujo"] .price,
html[data-tema="lujo"] .p-price,
html[data-tema="lujo"] .total,
html[data-tema="lujo"] .summary-total {
  font-family: var(--l-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: 1.4rem;
  color: var(--text);
}

html[data-tema="lujo"] .label {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

html[data-tema="lujo"] .hr {
  height: 1px;
  background: var(--l-hairline-2);
  margin: var(--l-e5) 0;
}

/* ============================================================
   4. CABECERA
   ============================================================ */
html[data-tema="lujo"] .topbar {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--l-hairline);
  box-shadow: 0 1px 0 rgba(169, 134, 91, .28);   /* filete de latón bajo la línea */
}

html[data-tema="lujo"] .nav {
  max-width: 1180px;
  padding: var(--l-e4) var(--l-e5);
  gap: var(--l-e5);
}

/* Los enlaces dejan de ser pastillas: texto con subrayado que crece */
html[data-tema="lujo"] .chip {
  padding: var(--l-e2) 0;
  border: 0;
  background: none;
  border-radius: 0;
  color: var(--header-muted);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: -0.004em;
  position: relative;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  transition: color .2s ease;
}

html[data-tema="lujo"] .chip::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 14px;
  width: 100%;
  height: 1px;
  background: var(--l-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}

html[data-tema="lujo"] .chip:hover {
  color: var(--header-text);
  border-color: transparent;
}
html[data-tema="lujo"] .chip:hover::after { transform: scaleX(1); }

/* Página actual marcada: antes no había forma de saber dónde estabas */
html[data-tema="lujo"] .chip[aria-current="page"] {
  color: var(--header-text);
  font-weight: 600;
}
html[data-tema="lujo"] .chip[aria-current="page"]::after { transform: scaleX(1); }

html[data-tema="lujo"] .main-logo { height: 62px; }

/* El botón del carrito sí mantiene forma de botón, pero sobrio */
html[data-tema="lujo"] .cart-btn {
  background: var(--l-accent);
  border: 1px solid var(--l-accent);
  color: #F7F4EF;
  border-radius: var(--l-r-interior);
  min-height: 52px;
  padding: 0 var(--l-e4);
  font-weight: 600;
}
html[data-tema="lujo"] .cart-btn:hover { background: var(--l-accent-h); border-color: var(--l-accent-h); }
html[data-tema="lujo"] .cart-btn .cart-ico { filter: none; opacity: .92; }
html[data-tema="lujo"] .cart-btn .cart-count {
  background: rgba(247, 244, 239, .18);
  border-color: rgba(247, 244, 239, .34);
  border-radius: var(--l-r-interior);
  font-weight: 700;
}

/* ============================================================
   5. BOTONES
   ============================================================ */
html[data-tema="lujo"] .btn,
html[data-tema="lujo"] .wrap .btn,
html[data-tema="lujo"] .cart-item .btn,
html[data-tema="lujo"] .cart-summary .btn,
html[data-tema="lujo"] .buy-box .btn,
html[data-tema="lujo"] .checkout-actions .btn {
  font-family: var(--l-texto);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -0.002em;
  min-height: 52px;                       /* objetivo táctil cómodo */
  padding: var(--l-e3) var(--l-e5) !important;
  border-radius: var(--l-r-interior) !important;
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid rgba(28, 27, 25, .28) !important;
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease, transform .12s ease, color .2s ease;
}

html[data-tema="lujo"] .btn:hover,
html[data-tema="lujo"] .wrap .btn:hover,
html[data-tema="lujo"] .cart-item .btn:hover,
html[data-tema="lujo"] .cart-summary .btn:hover,
html[data-tema="lujo"] .buy-box .btn:hover {
  background: rgba(28, 27, 25, .045) !important;
  border-color: rgba(28, 27, 25, .5) !important;
  filter: none;
  transform: translateY(-1px);
}

/* Pulsado: hundir un pelo. Da la sensación física que no tenía */
html[data-tema="lujo"] .btn:active { transform: translateY(0) scale(.995); }

/* Acción principal: verde macizo. .primary y .ok son el mismo botón */
html[data-tema="lujo"] .btn.primary,
html[data-tema="lujo"] .btn.ok,
html[data-tema="lujo"] .wrap .btn.primary,
html[data-tema="lujo"] .wrap .btn.ok,
html[data-tema="lujo"] .cart-item .btn.primary,
html[data-tema="lujo"] .cart-summary .btn.primary,
html[data-tema="lujo"] .buy-box .btn.ok,
html[data-tema="lujo"] .buy-box .btn.primary,
html[data-tema="lujo"] .checkout-actions .btn.ok,
html[data-tema="lujo"] .checkout-actions .btn.primary {
  background: var(--l-accent) !important;
  border-color: var(--l-accent) !important;
  color: #F7F4EF !important;
}

html[data-tema="lujo"] .btn.primary:hover,
html[data-tema="lujo"] .btn.ok:hover,
html[data-tema="lujo"] .wrap .btn.primary:hover,
html[data-tema="lujo"] .wrap .btn.ok:hover,
html[data-tema="lujo"] .buy-box .btn.ok:hover {
  background: var(--l-accent-h) !important;
  border-color: var(--l-accent-h) !important;
  color: #F7F4EF !important;
}

html[data-tema="lujo"] .btn.danger,
html[data-tema="lujo"] .cart-item .btn.danger {
  background: transparent !important;
  color: var(--l-danger) !important;
  border-color: rgba(140, 47, 38, .34) !important;
}
html[data-tema="lujo"] .btn.danger:hover,
html[data-tema="lujo"] .cart-item .btn.danger:hover {
  background: var(--l-danger-soft) !important;
  border-color: rgba(140, 47, 38, .6) !important;
}

/* El icono de carrito iba invertido a blanco: en claro hay que dejarlo oscuro */
html[data-tema="lujo"] .btn.add-cart::before { filter: none; opacity: .9; }
html[data-tema="lujo"] .btn.add-cart.primary::before,
html[data-tema="lujo"] .btn.add-cart.ok::before { filter: brightness(0) invert(1); }

/* ============================================================
   6. TARJETAS
   ============================================================ */
html[data-tema="lujo"] .card {
  background: var(--card);
  border: 1px solid var(--l-hairline);
  border-radius: var(--l-r-contenedor);
  box-shadow: var(--l-sombra-tarjeta);
  padding: var(--l-e6);
}

html[data-tema="lujo"] .hero {
  background: var(--l-band);
  border: 1px solid var(--l-hairline-2);
  border-radius: var(--l-r-contenedor);
  box-shadow: none;
  padding: var(--l-e7) var(--l-e6) calc(var(--l-e7) + var(--l-e2));  /* abajo un pelo más: se ve centrado */
}

html[data-tema="lujo"] .badge {
  border-radius: var(--l-r-interior);      /* cuadrado, no pastilla */
  border: 1px solid var(--l-hairline);
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: var(--l-e1) var(--l-e2);
  white-space: nowrap;
  align-self: flex-start;   /* si no, el contenedor flex las estira de lado a lado */
  width: fit-content;
}
html[data-tema="lujo"] .badge.warn {
  color: #7A5A16;
  border-color: rgba(169, 134, 91, .55);
  background: rgba(169, 134, 91, .09);
}
html[data-tema="lujo"] .badge.danger {
  color: var(--l-danger);
  border-color: rgba(140, 47, 38, .35);
  background: var(--l-danger-soft);
}

html[data-tema="lujo"] .cat-chip {
  border-radius: var(--l-r-interior);
  border: 1px solid var(--l-hairline);
  background: transparent;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
}

/* ============================================================
   7. PORTADA — HERO
   El velo azul marino sobre la foto se convierte en un degradado de hueso:
   el texto queda sobre fondo liso y la foto emerge por la derecha.
   ============================================================ */
html[data-tema="lujo"] .hero-full-pro {
  background: var(--bg);
  min-height: 78dvh;
  border-bottom: 1px solid var(--l-hairline-2);
}

html[data-tema="lujo"] .hero-full-pro::before {
  background: linear-gradient(
    90deg,
    #F7F4EF 0%,
    #F7F4EF 45.9%,
    rgba(247, 244, 239, .55) 46.1%,
    rgba(247, 244, 239, .12) 58%,
    rgba(247, 244, 239, 0) 72%
  );
}

html[data-tema="lujo"] .hero-full-pro .hero-image { width: 54%; }

/* Un filete de latón vertical donde la foto se encuentra con el hueso */
html[data-tema="lujo"] .hero-full-pro .hero-image::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: rgba(169, 134, 91, .5);
  z-index: 2;
}

html[data-tema="lujo"] .hero-inner { padding: var(--l-e9) var(--l-e5); }

html[data-tema="lujo"] .hero-text { color: var(--text); max-width: 640px; }

html[data-tema="lujo"] .hero-text h1 {
  font-family: var(--l-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--text);
  margin-bottom: var(--l-e5);
}

html[data-tema="lujo"] .hero-text p {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.7;
  opacity: 1;
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: var(--l-e6);
}

/* La pastilla de arriba pasa a ser una línea de sello con filete */
html[data-tema="lujo"] .hero-badge {
  border-radius: 0;
  background: none;
  border: 0;
  border-left: 2px solid var(--l-brass);
  padding: var(--l-e1) 0 var(--l-e1) var(--l-e3);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--l-e5);
}

html[data-tema="lujo"] .hero-buttons { gap: var(--l-e3); }

/* ============================================================
   8. PORTADA — CATEGORÍAS
   ============================================================ */
html[data-tema="lujo"] .cat-btn {
  border-radius: var(--l-r-interior);
  border: 1px solid var(--l-hairline);
  background: var(--card);
  color: var(--text);
  font-weight: 500;
  min-height: 52px;
  padding: var(--l-e3) var(--l-e4);
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
}
html[data-tema="lujo"] .cat-btn:hover {
  border-color: rgba(28, 27, 25, .42);
  transform: translateY(-1px);
}
html[data-tema="lujo"] .cat-btn.active {
  background: var(--l-accent);
  border-color: var(--l-accent);
  color: #F7F4EF;
  font-weight: 600;
  outline: none;   /* el tema viejo le ponía un halo azul de 2px */
}

/* ============================================================
   9. PORTADA — DESTACADOS
   Eran tres columnas idénticas (el patrón más reconocible de web con IA).
   La primera pasa a ser pieza destacada y el conjunto deja de ser simétrico.
   ============================================================ */
html[data-tema="lujo"] .destacados-grid {
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: var(--l-e5);
  align-items: stretch;
}

html[data-tema="lujo"] .destacado-item {
  flex-direction: column;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--l-hairline);
  border-radius: var(--l-r-tarjeta);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
html[data-tema="lujo"] .destacado-item:hover {
  border-color: rgba(28, 27, 25, .3);
  box-shadow: var(--l-sombra-alta);
  transform: translateY(-3px);
}

/* contain y no cover: son fotos de producto y cover les cortaba la cabeza */
html[data-tema="lujo"] .destacado-item img {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--l-hairline-2);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #FFFFFF;      /* las fotos ya vienen recortadas sobre blanco */
  padding: var(--l-e3);
}
/* La destacada respira más y su foto es más alta */
html[data-tema="lujo"] .destacado-item:first-child img { aspect-ratio: 4 / 3.4; }

html[data-tema="lujo"] .destacado-info {
  padding: var(--l-e5);
  display: flex;
  flex-direction: column;
  gap: var(--l-e2);
  flex: 1 1 auto;
}

/* CTA pegada al fondo: así los botones forman una línea limpia
   aunque los títulos ocupen distinto número de líneas */
html[data-tema="lujo"] .destacado-footer {
  margin-top: auto;
  padding: var(--l-e4) var(--l-e5) var(--l-e5);
  align-items: center;
  justify-content: space-between;
  gap: var(--l-e4);
  border-top: 1px solid var(--l-hairline-2);
  flex-wrap: nowrap;
}
/* El precio de la tarjeta va un punto por debajo del de la ficha: si no,
   se parte en dos líneas y se come el botón */
html[data-tema="lujo"] .destacado-footer .price {
  font-size: 1.15rem;
  line-height: 1.25;
  white-space: nowrap;
}
html[data-tema="lujo"] .destacado-footer .btn { flex: 0 0 auto; }

@media (max-width: 920px) {
  html[data-tema="lujo"] .destacados-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  html[data-tema="lujo"] .destacados-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   10. PORTADA — POR QUÉ NOSOTROS
   ============================================================ */
html[data-tema="lujo"] .why-grid {
  grid-template-columns: 1fr 1.05fr;       /* la foto pesa un poco más */
  gap: var(--l-e8);
  align-items: center;
}

html[data-tema="lujo"] .why-list { display: grid; gap: 0; margin: var(--l-e5) 0 var(--l-e6); }

/* Cada ventaja es una fila con filete y un guion de latón, en vez de un ✔ */
html[data-tema="lujo"] .why-list li {
  list-style: none;
  padding: var(--l-e4) 0 var(--l-e4) var(--l-e5);
  border-top: 1px solid var(--l-hairline-2);
  position: relative;
  color: var(--text);
  font-size: 1rem;
}
html[data-tema="lujo"] .why-list li:last-child { border-bottom: 1px solid var(--l-hairline-2); }
html[data-tema="lujo"] .why-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--l-e4) + .72em);
  width: 14px;
  height: 1px;
  background: var(--l-brass);
}

html[data-tema="lujo"] .why-image img,
html[data-tema="lujo"] .why-image {
  border-radius: var(--l-r-tarjeta);
  border: 1px solid var(--l-hairline-2);
  box-shadow: var(--l-sombra-alta);   /* cálida y suave, no el negro de antes */
}

@media (max-width: 920px) {
  html[data-tema="lujo"] .why-grid { grid-template-columns: 1fr; gap: var(--l-e6); }
}

/* ============================================================
   11. PORTADA — PREGUNTAS FRECUENTES
   Se mantiene el acordeón (el JS es suyo) pero pierde la caja:
   filas con filete, más aire y un signo de latón.
   ============================================================ */
html[data-tema="lujo"] .faq { display: grid; gap: 0; }

html[data-tema="lujo"] .faq-item {
  border: 0;
  border-top: 1px solid var(--l-hairline-2);
  /* el .hr de arriba ya hace de separador */
  border-radius: 0;
  background: transparent;
}
html[data-tema="lujo"] .faq-item:first-child { border-top: 0; }
html[data-tema="lujo"] .faq-item:last-child { border-bottom: 1px solid var(--l-hairline-2); }

html[data-tema="lujo"] .faq-q {
  padding: var(--l-e5) 0;
  gap: var(--l-e4);
  font-family: var(--l-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.012em;
  color: var(--text);
  min-height: 52px;
  transition: color .2s ease;
}
html[data-tema="lujo"] .faq-q:hover { color: var(--l-accent); }

html[data-tema="lujo"] .faq-ico {
  border-radius: var(--l-r-interior);
  border: 1px solid var(--l-hairline);
  background: transparent;
  color: var(--l-brass);
  font-weight: 600;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

html[data-tema="lujo"] .faq-a {
  padding: 0 0 var(--l-e5) 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: var(--l-medida);
}

/* ============================================================
   12. CATÁLOGO Y FICHA
   ============================================================ */
html[data-tema="lujo"] .product-image,
html[data-tema="lujo"] .r-img,
html[data-tema="lujo"] .reco-img {
  border-radius: var(--l-r-interior);
  border: 1px solid var(--l-hairline-2);
  background: var(--card);
  overflow: hidden;
}
html[data-tema="lujo"] .product-image { box-shadow: var(--l-sombra-tarjeta); }
html[data-tema="lujo"] .product-image img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
html[data-tema="lujo"] .product-image:hover img { transform: scale(1.03); }

/* Los nombres vienen del catálogo del proveedor y son larguísimos
   ("Cojín Antiescaras para Silla de Ruedas (42x42x8 cm...) | PEPE | P40001").
   A tamaño de titular ocupaban siete líneas y se comían la ficha. */
html[data-tema="lujo"] .p-title {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.016em;
  margin-bottom: var(--l-e4);
  max-width: 18ch;
}

/* El nombre técnico completo, debajo del titular y sin gritar */
html[data-tema="lujo"] .p-subtitle {
  margin: calc(var(--l-e4) * -1) 0 var(--l-e4);
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
  max-width: 52ch;
}

html[data-tema="lujo"] .gallery-main,
html[data-tema="lujo"] .gallery-thumbs img {
  background: #FFFFFF;
  border: 1px solid var(--l-hairline-2);
  border-radius: var(--l-r-tarjeta);
  box-shadow: var(--l-sombra-tarjeta);
  overflow: hidden;
}
html[data-tema="lujo"] .gallery-main img { object-fit: contain; padding: var(--l-e5); }

html[data-tema="lujo"] .product-desc {
  max-width: var(--l-medida);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
}
html[data-tema="lujo"] .product-desc strong { font-weight: 600; }

html[data-tema="lujo"] .buy-box {
  background: var(--l-band);
  border: 1px solid var(--l-hairline);
  border-radius: var(--l-r-tarjeta);
  box-shadow: none;
}

html[data-tema="lujo"] .toolbar {
  border-top: 1px solid var(--l-hairline-2);
  border-bottom: 1px solid var(--l-hairline-2);
  padding: var(--l-e4) 0;
}

/* La barra fija de compra del móvil seguía en azul marino, con el nombre y el
   precio ilegibles encima. Es la barra que lleva al carrito: no puede fallar. */
html[data-tema="lujo"] .sticky-buy {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--l-hairline);
  box-shadow: 0 -1px 0 rgba(169, 134, 91, .3), 0 -12px 28px -18px rgba(28, 27, 25, .35);
  padding: var(--l-e3) var(--l-e4);
}
html[data-tema="lujo"] .sticky-title {
  color: var(--muted);
  font-weight: 500;
  font-size: .82rem;
}
html[data-tema="lujo"] .sticky-price {
  font-family: var(--l-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text);
  margin-top: 1px;
}
html[data-tema="lujo"] .sticky-form .qty,
html[data-tema="lujo"] .sticky-form .btn { height: 48px; min-height: 48px; }

/* ============================================================
   13. FORMULARIOS
   ============================================================ */
html[data-tema="lujo"] .input,
html[data-tema="lujo"] textarea,
html[data-tema="lujo"] .select,
html[data-tema="lujo"] .qty {
  background: var(--card);
  border: 1px solid rgba(28, 27, 25, .2);
  border-radius: var(--l-r-interior);
  color: var(--text);
  font-family: var(--l-texto);
  font-size: 1rem;
  min-height: 52px;
  padding: var(--l-e3) var(--l-e4);
  transition: border-color .2s ease, box-shadow .2s ease;
}
html[data-tema="lujo"] .input:focus,
html[data-tema="lujo"] textarea:focus,
html[data-tema="lujo"] .select:focus {
  border-color: var(--l-accent);
  box-shadow: 0 0 0 3px var(--l-accent-soft);
  outline: none;
}
html[data-tema="lujo"] .input::placeholder,
html[data-tema="lujo"] textarea::placeholder { color: rgba(28, 27, 25, .52); }

/* Error: rosa chillón fuera, granate sobrio dentro */
html[data-tema="lujo"] .input.err,
html[data-tema="lujo"] .is-error {
  border-color: rgba(140, 47, 38, .55) !important;
  outline: 2px solid rgba(140, 47, 38, .16) !important;
}

/* ============================================================
   14. CARRITO, CHECKOUT Y PIE
   ============================================================ */
html[data-tema="lujo"] .cart-item,
html[data-tema="lujo"] .cart-summary,
html[data-tema="lujo"] .summary-row {
  background: var(--card);
  border-color: var(--l-hairline);
  border-radius: var(--l-r-tarjeta);
  color: var(--text);
}
html[data-tema="lujo"] .summary-row {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--l-hairline-2);
  gap: var(--l-e4);
}
/* En el resumen, la columna del importe es estrecha y "39,00 €" partía el
   símbolo a la línea siguiente. */
html[data-tema="lujo"] .summary-row > div:last-child,
html[data-tema="lujo"] .summary-row > div[style*="text-align:right"] > div,
html[data-tema="lujo"] .big-total {
  white-space: nowrap;
}
html[data-tema="lujo"] .big-total {
  font-family: var(--l-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

html[data-tema="lujo"] footer,
html[data-tema="lujo"] .site-footer {
  background: var(--l-band);
  border-top: 1px solid var(--l-hairline);
  color: var(--muted);
}
html[data-tema="lujo"] footer a { color: var(--text); }
html[data-tema="lujo"] footer a:hover { color: var(--l-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   15. BLOG
   ============================================================ */
html[data-tema="lujo"] .post-content,
html[data-tema="lujo"] .post-body,
html[data-tema="lujo"] article {
  max-width: var(--l-medida);
  font-size: 1.06rem;
  line-height: 1.85;
}
html[data-tema="lujo"] .post-content h2,
html[data-tema="lujo"] article h2 { margin-top: var(--l-e7); }
html[data-tema="lujo"] .post-content p,
html[data-tema="lujo"] article p { margin: 0 0 var(--l-e5); }
html[data-tema="lujo"] .post-content a,
html[data-tema="lujo"] article a {
  color: var(--l-accent);
  text-decoration: underline;
  text-decoration-color: rgba(47, 74, 60, .35);
  text-underline-offset: 3px;
}
html[data-tema="lujo"] .post-content a:hover { text-decoration-color: var(--l-accent); }

/* ============================================================
   16. ACCESIBILIDAD Y MOVIMIENTO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html[data-tema="lujo"] * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html[data-tema="lujo"] .destacado-item:hover,
  html[data-tema="lujo"] .btn:hover { transform: none; }
}

/* Quien tenga el contraste alto activado no necesita nuestros filetes finos */
@media (prefers-contrast: more) {
  html[data-tema="lujo"] {
    --muted: #4A453E;
    --l-hairline: rgba(28, 27, 25, .34);
    --l-hairline-2: rgba(28, 27, 25, .2);
  }
}

/* Móvil: el hero deja de ser a dos columnas y la foto pasa arriba */
@media (max-width: 760px) {
  html[data-tema="lujo"] { font-size: 17px; }
  html[data-tema="lujo"] .hero-full-pro { min-height: 0; }
  html[data-tema="lujo"] .hero-full-pro::before {
    background: linear-gradient(180deg, rgba(247,244,239,0) 0%, rgba(247,244,239,.55) 34%, #F7F4EF 52%);
  }
  html[data-tema="lujo"] .hero-full-pro .hero-image {
    position: relative;
    width: 100%;
    height: 46dvh;
  }
  html[data-tema="lujo"] .hero-full-pro .hero-image::before { display: none; }
  html[data-tema="lujo"] .hero-full-pro { flex-direction: column-reverse; }
  html[data-tema="lujo"] .hero-inner { padding: var(--l-e6) var(--l-e5) var(--l-e7); }
  html[data-tema="lujo"] .nav { gap: var(--l-e3); }
  html[data-tema="lujo"] .main-logo { height: 52px; }
  html[data-tema="lujo"] .card { padding: var(--l-e5); }
  html[data-tema="lujo"] .why-grid { gap: var(--l-e5); }

  /* El menú ocupaba cuatro filas y se comía la primera pantalla.
     Los cuatro enlaces en una fila y el carrito, ancho completo, debajo.
     Se mantienen los 52px de alto: son mayores tocando con el dedo. */
  html[data-tema="lujo"] .menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--l-hairline-2);
    padding-top: var(--l-e1);
  }
  html[data-tema="lujo"] .menu .chip {
    justify-content: center;
    font-size: .86rem;
    padding: var(--l-e2) var(--l-e1);
  }
  html[data-tema="lujo"] .menu .chip::after { bottom: 8px; width: 76%; left: 12%; }
  html[data-tema="lujo"] .menu .cart-btn {
    grid-column: 1 / -1;
    margin-top: var(--l-e3);
  }

  /* En móvil el tema viejo centraba solo este título; el resto va a la izquierda */
  html[data-tema="lujo"] .cat-head {
    justify-content: flex-start;
    text-align: left;
  }
  html[data-tema="lujo"] .cat-buttons { justify-items: stretch; }
}

/* Impresión: que una ficha de producto se pueda imprimir para llevarla al médico */
@media print {
  html[data-tema="lujo"] body::after,
  html[data-tema="lujo"] .topbar,
  html[data-tema="lujo"] footer { display: none; }
  html[data-tema="lujo"] body { background: #fff; color: #000; }
}
