/* ==========================================================================
   Piel de Aquí — sistema base
   Lenguaje visual calcado de histrips.com y aplicado a esta marca:
   lienzo gris claro, tarjetas blancas y bloques negros de esquina muy
   redondeada, grotesca pesada con tracking negativo, píldoras de 999px y
   una llamada a la acción de degradado saturado con resplandor.
   Lo que cambia frente a la referencia es la paleta de acento: en vez del
   rosa deportivo, el atardecer de la costa y el turquesa de cenote.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Lienzo y superficies — los mismos valores que usa la referencia */
  --lienzo: #f9f9f9;
  --blanco: #ffffff;
  --gris-1: #f0f0f0;
  --gris-2: #ececec;
  --gris-3: #dcdcdc;
  --negro: #000000;
  --tinta: #1a1a1a;
  --tinta-60: #6b6b6b;
  --tinta-40: #9a9a9a;

  /* Acento: atardecer de la costa. Cumple la función del rosa de la
     referencia (degradado saturado con resplandor) sin ser su marca. */
  --sol: #ff7a2f;
  --sol-fin: #ff3d6e;
  --degradado-sol: linear-gradient(96deg, var(--sol), var(--sol-fin));
  --brillo-sol: 0 0 28px -4px rgb(255 90 70 / 0.65);

  /* Turquesa de cenote: distintivos de "apto para cenote" y datos */
  --cenote: #00b8bd;
  --cenote-fondo: #d9f6f6;
  --cenote-tinta: #00696d;

  /* Verde de las estrellas de reseña, como en la referencia */
  --verde: #22c55e;

  /* Tipografía. La referencia usa Inter; aquí se usa la grotesca del
     sistema para no pedir un archivo de fuente y mantener la carga
     instantánea con señal débil. Para clavarla al 100%, autoalojar
     Inter variable y anteponerla en esta lista. */
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala. Titulares grandes y muy apretados, como la referencia. */
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: clamp(1rem, 0.3vw + 0.94rem, 1.125rem);
  --t-lg: clamp(1.25rem, 1vw + 1.05rem, 1.5rem);
  --t-xl: clamp(1.625rem, 2.2vw + 1.2rem, 2.25rem);
  --t-2xl: clamp(2.125rem, 4vw + 1.2rem, 3.5rem);
  --t-3xl: clamp(2.75rem, 7vw + 1rem, 6rem);

  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  --ancho: 1360px;
  --ancho-texto: 60ch;

  /* Radios: los tres de la referencia */
  --radio-sm: 8px;
  --radio: 16px;
  --radio-lg: 32px;
  --radio-xl: 60px;
  --radio-full: 999px;

  --sombra: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 32px -18px rgb(0 0 0 / 0.22);
  --sombra-alta: 0 2px 6px rgb(0 0 0 / 0.06), 0 28px 60px -30px rgb(0 0 0 / 0.3);

  --transicion: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--lienzo);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* `hidden` es un atributo del navegador con `display: none` de hoja de usuario,
   y cualquier `display` de autor lo gana. Sin esto, un `.btn` con `hidden`
   sigue viéndose: pasó con el botón de la ventana de raspar. */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Tipografía
   Tracking negativo agresivo en titulares: es la firma de la referencia.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-2xl);
}
h2 {
  font-size: var(--t-xl);
}
h3 {
  font-size: var(--t-lg);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
h4 {
  font-size: var(--t-base);
  letter-spacing: -0.02em;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.rotulo {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-40);
}

.entradilla {
  font-size: var(--t-md);
  color: var(--tinta-60);
  max-width: var(--ancho-texto);
  letter-spacing: -0.01em;
}

.medida {
  max-width: var(--ancho-texto);
}

/* --------------------------------------------------------------------------
   4. Layout
   Todo vive dentro de tarjetas sobre el lienzo gris.
   -------------------------------------------------------------------------- */
.env {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e-4);
}

@media (min-width: 768px) {
  .env {
    padding-inline: var(--e-5);
  }
}

.seccion {
  padding-block: var(--e-7);
}

@media (min-width: 768px) {
  .seccion {
    padding-block: var(--e-8);
  }
}

/* Tarjeta-lienzo: el contenedor blanco o negro de esquina muy redondeada
   sobre el que se monta cada sección. */
.panel {
  border-radius: var(--radio-lg);
  background: var(--blanco);
  padding: var(--e-6);
  overflow: hidden;
}

@media (min-width: 900px) {
  .panel {
    border-radius: var(--radio-xl);
    padding: var(--e-8);
  }
}

.panel--negro {
  background: var(--negro);
  color: var(--blanco);
}

.panel--negro .entradilla {
  color: rgb(255 255 255 / 0.68);
}

.panel--negro .rotulo {
  color: rgb(255 255 255 / 0.55);
}

.pila {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   5. Botones
   El primario es el degradado con resplandor de la referencia.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 0 var(--e-6);
  border: 0;
  border-radius: var(--radio-full);
  background: var(--negro);
  color: var(--blanco);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion),
    background var(--transicion), opacity var(--transicion);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--sol {
  background: var(--degradado-sol);
  box-shadow: var(--brillo-sol);
}

.btn--sol:hover {
  box-shadow: 0 0 38px -2px rgb(255 90 70 / 0.8);
}

.btn--claro {
  background: var(--blanco);
  color: var(--tinta);
}

.btn--contorno {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--gris-3);
}

.btn--contorno:hover {
  box-shadow: inset 0 0 0 1.5px var(--tinta);
}

/* Sobre fondo oscuro el contorno se invierte, o el texto desaparece. */
.panel--negro .btn--contorno,
.heroe .btn--contorno {
  color: var(--blanco);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.35);
}

.panel--negro .btn--contorno:hover,
.heroe .btn--contorno:hover {
  box-shadow: inset 0 0 0 1.5px var(--blanco);
}

.btn--ancho {
  width: 100%;
}

.btn--grande {
  min-height: 58px;
  padding-inline: var(--e-7);
  font-size: var(--t-md);
}

.btn--chico {
  min-height: 38px;
  padding-inline: var(--e-4);
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   6. Accesibilidad
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sol);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--negro);
  color: var(--blanco);
  border-radius: var(--radio-full);
  transform: translateY(-200%);
  transition: transform var(--transicion);
}

.saltar:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   7. Cabecera
   Barra de anuncio negra a sangre y, debajo, la cabecera flotante blanca
   en forma de píldora — la composición exacta de la referencia.
   -------------------------------------------------------------------------- */
.aviso-entrega {
  background: var(--negro);
  color: rgb(255 255 255 / 0.85);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  padding: var(--e-3) var(--e-4);
}

.aviso-entrega strong {
  color: var(--blanco);
  font-weight: 600;
}

/* Carrusel: el HTML trae un mensaje escrito y el script lo sustituye por la
   fila con flechas. Si el catálogo no carga, se queda el mensaje de siempre. */
.aviso-entrega[data-montada] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding-block: var(--e-2);
}

.aviso-entrega__texto {
  flex: 1;
  max-width: 62ch;
  padding-block: var(--e-1);
  transition: opacity 180ms ease;
}

.aviso-entrega__texto--fuera {
  opacity: 0;
}

.aviso-entrega__flecha {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radio-full);
  background: none;
  color: rgb(255 255 255 / 0.5);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.aviso-entrega__flecha:hover {
  background: rgb(255 255 255 / 0.12);
  color: var(--blanco);
}

.cabecera {
  position: sticky;
  top: var(--e-3);
  z-index: 50;
  padding-inline: var(--e-4);
  margin-top: var(--e-3);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  max-width: var(--ancho);
  margin-inline: auto;
  min-height: 64px;
  padding-inline: var(--e-5);
  border-radius: var(--radio-full);
  background: color-mix(in srgb, var(--blanco) 88%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 10px 30px -22px rgb(0 0 0 / 0.35);
}

/* Logotipo: la referencia parte la palabra en dos colores. Aquí "Piel"
   va en tinta y "de aquí" en el degradado del atardecer. */
.marca {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.05em;
}

.marca__b {
  background: var(--degradado-sol);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.marca__punto {
  color: var(--sol);
}

.nav {
  display: none;
  gap: var(--e-6);
}

@media (min-width: 940px) {
  .nav {
    display: flex;
  }
}

.nav a {
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--tinta-60);
  transition: color var(--transicion);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--tinta);
}

/* Menú de móvil. Sin esto la tienda se queda literalmente sin navegación
   en el dispositivo donde compra la clienta. */
.menu-btn {
  display: inline-flex;
}

@media (min-width: 940px) {
  .menu-btn {
    display: none;
  }
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--lienzo);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 280ms;
}

.menu[data-abierto="true"] {
  transform: translateY(0);
  visibility: visible;
}

.menu__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: var(--e-3) var(--e-5);
}

.menu__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  overflow-y: auto;
}

.menu__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--radio);
  background: var(--blanco);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.menu__lista a[aria-current="page"] {
  background: var(--negro);
  color: var(--blanco);
}

.menu__grupo {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--gris-3);
}

.menu__grupo a {
  background: transparent;
  font-size: var(--t-base);
  font-weight: 500;
  padding-block: var(--e-3);
}

body[data-menu-abierto="true"] {
  overflow: hidden;
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-1);
}

.icono-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radio-full);
  background: transparent;
  cursor: pointer;
  position: relative;
  color: var(--tinta);
}

.icono-btn:hover {
  background: var(--gris-1);
}

.contador {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--radio-full);
  background: var(--degradado-sol);
  color: var(--blanco);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.contador[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   8. Distintivos y estrellas
   -------------------------------------------------------------------------- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px var(--e-3);
  border-radius: var(--radio-full);
  background: var(--gris-2);
  color: var(--tinta);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.insignia--cenote {
  background: var(--cenote-fondo);
  color: var(--cenote-tinta);
}

.insignia--sol {
  background: var(--degradado-sol);
  color: var(--blanco);
}

.insignia--flotante {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 2;
  background: var(--blanco);
}

.insignia--descuento {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  z-index: 2;
  background: var(--degradado-sol);
  color: var(--blanco);
}

/* Chip de estrellas verde, como el de la referencia bajo el titular */
.estrellas {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  color: var(--tinta-60);
}

.estrellas__glifos {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: var(--radio-sm);
  background: var(--verde);
  color: var(--blanco);
  font-size: 11px;
  letter-spacing: 1px;
}

.estrellas--suelta .estrellas__glifos {
  background: transparent;
  color: var(--sol);
  padding: 0;
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   9. Tarjeta de producto
   -------------------------------------------------------------------------- */
.productos {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  transition: box-shadow var(--transicion), transform var(--transicion);
}

.tarjeta:hover {
  box-shadow: var(--sombra);
  transform: translateY(-3px);
}

.tarjeta__medio {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--gris-1);
  overflow: hidden;
}

.tarjeta__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  flex: 1;
}

.tarjeta__momento {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--tinta-40);
}

.tarjeta__nombre {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tarjeta__nombre a {
  text-decoration: none;
}

.tarjeta__nombre a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tarjeta__que {
  font-size: var(--t-sm);
  color: var(--tinta-60);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tarjeta__pie {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: auto;
  padding-top: var(--e-3);
}

.precio {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.precio--antes {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--tinta-40);
  text-decoration: line-through;
}

/* La tarjeta entera es un enlace, así que el botón necesita salir del
   pseudo-elemento que cubre la tarjeta. */
.tarjeta__pie .btn {
  position: relative;
  z-index: 3;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   10. Barra de garantías
   -------------------------------------------------------------------------- */
.garantias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-4);
  padding: var(--e-5);
  border-radius: var(--radio);
  background: var(--blanco);
}

.garantia {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.garantia svg {
  flex-shrink: 0;
  color: var(--cenote);
}

/* --------------------------------------------------------------------------
   11. Pie
   -------------------------------------------------------------------------- */
.pie {
  margin: var(--e-6) var(--e-4) var(--e-4);
  padding: var(--e-8) var(--e-6) var(--e-5);
  border-radius: var(--radio-lg);
  background: var(--negro);
  color: rgb(255 255 255 / 0.62);
}

@media (min-width: 900px) {
  .pie {
    border-radius: var(--radio-xl);
    padding: var(--e-8);
  }
}

.pie__env {
  max-width: calc(var(--ancho) - var(--e-8));
  margin-inline: auto;
}

.pie a {
  color: rgb(255 255 255 / 0.62);
  text-decoration: none;
  font-size: var(--t-sm);
}

.pie a:hover {
  color: var(--blanco);
}

.pie h4 {
  color: var(--blanco);
  margin-bottom: var(--e-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pie .marca {
  color: var(--blanco);
}

.pie__rejilla {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .pie__rejilla {
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--e-5);
  }
}

.pie__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
}

.pie__legal {
  margin-top: var(--e-7);
  padding-top: var(--e-4);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--t-xs);
  color: rgb(255 255 255 / 0.4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   12. Cajón de la bolsa
   -------------------------------------------------------------------------- */
.velo {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgb(0 0 0 / 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms, visibility 240ms;
}

.velo[data-abierto="true"] {
  opacity: 1;
  visibility: visible;
}

.bolsa {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(440px, 100%);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--lienzo);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 300ms;
}

.bolsa[data-abierto="true"] {
  transform: translateX(0);
  visibility: visible;
}

.bolsa__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e-5);
  border-bottom: 1px solid var(--gris-3);
}

.bolsa__cuerpo {
  overflow-y: auto;
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.bolsa__pie {
  padding: var(--e-5);
  border-top: 1px solid var(--gris-3);
  background: var(--blanco);
}

.linea {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-3);
  border-radius: var(--radio);
  background: var(--blanco);
}

.linea__medio {
  width: 64px;
  height: 64px;
  border-radius: var(--radio-sm);
  background: var(--gris-1);
}

.linea__nombre {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.linea__meta {
  font-size: var(--t-xs);
  color: var(--tinta-40);
  margin-top: 2px;
}

.linea__precio {
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cantidad {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  margin-top: var(--e-2);
  border-radius: var(--radio-full);
  background: var(--gris-1);
}

.cantidad button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radio-full);
  background: transparent;
  font-size: var(--t-md);
  line-height: 1;
  cursor: pointer;
  color: var(--tinta-60);
}

.cantidad button:hover {
  background: var(--gris-3);
  color: var(--tinta);
}

.cantidad span {
  min-width: 20px;
  text-align: center;
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.quitar {
  border: 0;
  background: none;
  padding: 0;
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  color: var(--tinta-40);
  text-decoration: underline;
  cursor: pointer;
}

.quitar:hover {
  color: var(--tinta);
}

.bolsa__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--e-4);
}

.bolsa__total .precio {
  font-size: var(--t-xl);
}

.bolsa__vacia {
  text-align: center;
  padding: var(--e-8) var(--e-4);
  color: var(--tinta-60);
}

/* Barra de progreso hacia la entrega gratis: empuja el ticket medio. */
.progreso-envio {
  margin-bottom: var(--e-4);
  font-size: var(--t-xs);
  color: var(--tinta-60);
}

.progreso-envio__barra {
  display: block;
  height: 4px;
  margin-top: var(--e-2);
  border-radius: var(--radio-full);
  background: var(--gris-3);
  overflow: hidden;
}

.progreso-envio__relleno {
  display: block;
  height: 100%;
  border-radius: var(--radio-full);
  background: var(--degradado-sol);
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   13. Páginas de contenido: legales y guías
   -------------------------------------------------------------------------- */
.prosa {
  max-width: 68ch;
  margin-inline: auto;
  padding: var(--e-6);
  border-radius: var(--radio-lg);
  background: var(--blanco);
}

@media (min-width: 900px) {
  .prosa {
    padding: var(--e-8);
  }
}

.prosa > * + * {
  margin-top: var(--e-4);
}

.prosa h2 {
  font-size: var(--t-lg);
  margin-top: var(--e-7);
}

.prosa h3 {
  font-size: var(--t-md);
  margin-top: var(--e-5);
}

.prosa p,
.prosa li {
  color: var(--tinta-60);
  line-height: 1.62;
}

.prosa strong {
  color: var(--tinta);
  font-weight: 600;
}

.prosa ul,
.prosa ol {
  padding-left: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.prosa a {
  color: var(--tinta);
  text-decoration-color: var(--sol);
}

.prosa hr {
  border: 0;
  border-top: 1px solid var(--gris-3);
  margin-block: var(--e-6);
}

/* Dato que hay que rellenar antes de publicar: se ve, a propósito. */
.pendiente {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radio-sm);
  background: var(--sol);
  color: var(--blanco);
  font-size: 0.85em;
  font-weight: 600;
}

.aviso-caja {
  padding: var(--e-4) var(--e-5);
  border-radius: var(--radio);
  background: var(--cenote-fondo);
  color: var(--cenote-tinta);
  font-size: var(--t-sm);
}

.aviso-caja p {
  color: inherit;
}

/* Índice de guías */
.guias {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--e-6);
}

.guia {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  border-radius: var(--radio);
  background: var(--blanco);
  text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.guia:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}

.guia h3 {
  font-size: var(--t-lg);
}

.guia p {
  font-size: var(--t-sm);
  color: var(--tinta-60);
}

/* --------------------------------------------------------------------------
   14. Aviso flotante
   -------------------------------------------------------------------------- */
.aviso-flotante {
  position: fixed;
  left: 50%;
  bottom: var(--e-5);
  z-index: 80;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--radio-full);
  background: var(--negro);
  color: var(--blanco);
  font-size: var(--t-sm);
  font-weight: 500;
  box-shadow: var(--sombra-alta);
  transform: translate(-50%, 140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 160ms;
}

.aviso-flotante--visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   15. Centrado de sección
   --------------------------------------------------------------------------

   Las cabeceras de sección van centradas en todo el sitio: rótulo, título y
   entradilla sobre el eje, y la retícula debajo.

   El centrado se aplica al contenedor, no al elemento. `.rotulo` es
   inline-block: ponerle `text-align: center` centra su texto dentro de sí
   mismo y lo deja donde estaba. Tiene que centrarlo el padre.

   Lo que NO se centra es el texto de dentro de una tarjeta ni el de las
   páginas de prosa. Una columna estrecha de texto centrado obliga a buscar el
   principio de cada renglón: en un titular de tres palabras da igual, en un
   aviso de privacidad no. Por eso hay una lista explícita de vuelta atrás.
   -------------------------------------------------------------------------- */
.panel,
.encabezado-seccion,
.encabezado-seccion > div,
.grupo-momento__cabeza,
.seccion > .rotulo,
.seccion > h1,
.seccion > h2,
.seccion > .entradilla {
  text-align: center;
}

/* `.rotulo` es inline-block: centrarle el texto lo centra dentro de su propia
   caja y lo deja pegado a la izquierda. Como hijo directo de una sección tiene
   que ser bloque para que el centrado le llegue. */
.seccion > .rotulo {
  display: block;
}

/* Centrar el texto no basta cuando el párrafo tiene ancho máximo: la caja
   sigue pegada a la izquierda y solo se centra el texto dentro de ella. */
.entradilla,
.medida,
.panel > p,
.encabezado-seccion p,
.grupo-momento__cabeza p {
  margin-inline: auto;
}

.objetivos,
.guias-acciones {
  justify-content: center;
}

/* Vuelta atrás: dentro de una tarjeta, de un cajón o de una página de prosa
   manda la alineación normal, no la heredada de la sección. */
.tarjeta,
.momento,
.kit,
.kit-grande,
.guia,
.resena,
.prosa,
.ficha,
.filtros,
.bolsa,
.menu,
.pie,
.opcion-compra,
.aviso-caja {
  text-align: left;
}

/* --------------------------------------------------------------------------
   16. Ventana de raspar
   --------------------------------------------------------------------------

   Rasca-y-gana que entrega el código de descuento. El lienzo naranja se borra
   con `destination-out` a medida que se arrastra encima; debajo está el premio,
   que ya está en el DOM desde el principio para que un lector de pantalla lo
   anuncie sin depender de un gesto que no puede hacer.
   -------------------------------------------------------------------------- */
.raspa {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--e-4);
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
}

.raspa--abierta {
  opacity: 1;
  visibility: visible;
}

body[data-raspa-abierta] {
  overflow: hidden;
}

.raspa__caja {
  position: relative;
  /* Raspar es arrastrar: sin esto, el gesto selecciona el titular y el pie
     de la propia ventana y queda todo en azul mientras se rasca. */
  user-select: none;
  width: min(100%, 420px);
  border-radius: var(--radio-lg);
  background: var(--blanco);
  box-shadow: var(--sombra-alta);
  text-align: center;
  overflow: hidden;
  transform: translateY(14px) scale(0.98);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.raspa__lado {
  padding: var(--e-6);
}

/* La foto solo entra cuando hay ancho de sobra. En móvil ocuparía la altura
   que necesita la tarjeta para poder rascarse con el dedo. */
.raspa__foto {
  display: none;
}

@media (min-width: 860px) {
  .raspa__caja {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: min(100%, 840px);
  }

  .raspa__foto {
    display: block;
    position: relative;
  }

  .raspa__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .raspa__lado {
    padding: var(--e-7) var(--e-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.raspa--abierta .raspa__caja {
  transform: none;
}

.raspa__cerrar {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radio-full);
  background: var(--gris-1);
  color: var(--tinta-60);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.raspa__cerrar:hover {
  background: var(--negro);
  color: var(--blanco);
}

.raspa__rotulo {
  display: block;
  margin-bottom: var(--e-4);
  padding-right: var(--e-6);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* El contenedor fija la altura para que al quitar el lienzo no salte nada:
   un premio que aparece empujando el botón hacia abajo se pulsa por error. */
.raspa__tarjeta {
  position: relative;
  height: 168px;
  border-radius: var(--radio);
  background: var(--gris-1);
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.raspa__premio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--e-3);
  padding: var(--e-4);
}

.raspa__premio-texto {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  background: var(--degradado-sol);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.raspa__codigo-caja {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.raspa__codigo-etiqueta {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-40);
}

.raspa__codigo {
  font-family: var(--sans);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta);
}

.raspa__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  transition: opacity 400ms ease;
}

.raspa__lienzo:active {
  cursor: grabbing;
}

.raspa__lienzo--fuera {
  opacity: 0;
  pointer-events: none;
}

.raspa__pista {
  position: absolute;
  inset: auto 0 var(--e-4) 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: rgb(255 255 255 / 0.92);
  pointer-events: none;
  transition: opacity 200ms ease;
}

.raspa__pista--fuera {
  opacity: 0;
}

.raspa__acciones {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.raspa__pie {
  margin-top: var(--e-3);
  font-size: var(--t-xs);
  color: var(--tinta-40);
}

/* Botón sin caja, para la acción secundaria de la ventana. */
.btn--texto {
  min-height: 40px;
  padding: 0 var(--e-3);
  border: 0;
  background: none;
  color: var(--tinta-60);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.btn--texto:hover {
  color: var(--tinta);
}

/* Línea de descuento del cajón de la bolsa. */
.linea-descuento {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
  font-size: var(--t-sm);
  color: var(--cenote-tinta);
}

.linea-descuento code {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.linea-descuento button {
  margin-left: var(--e-2);
  border: 0;
  background: none;
  color: var(--tinta-40);
  font-size: var(--t-xs);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.linea-descuento--vencida {
  color: var(--tinta-40);
}

/* Quien pide menos animación no ve ni el salto de la caja ni el fundido. */
@media (prefers-reduced-motion: reduce) {
  .raspa,
  .raspa__caja,
  .raspa__lienzo,
  .raspa__pista {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   17. Barra de vuelta con la bolsa llena
   -------------------------------------------------------------------------- */
.vuelta {
  position: fixed;
  left: 50%;
  bottom: var(--e-4);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: calc(100% - var(--e-6));
  max-width: 440px;
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5);
  border-radius: var(--radio-full);
  background: var(--negro);
  color: var(--blanco);
  box-shadow: var(--sombra-alta);
  transform: translate(-50%, 140%);
  transition: transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.vuelta--dentro {
  transform: translate(-50%, 0);
}

.vuelta__texto {
  flex: 1;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.2;
}

.vuelta__cerrar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radio-full);
  background: rgb(255 255 255 / 0.12);
  color: rgb(255 255 255 / 0.75);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.vuelta__cerrar:hover {
  background: rgb(255 255 255 / 0.24);
  color: var(--blanco);
}

/* El aviso flotante de "agregado a tu bolsa" vive en el mismo sitio: cuando
   la barra está puesta, sube para no taparla. */
.vuelta ~ .aviso-flotante {
  bottom: calc(var(--e-4) + 76px);
}

@media (max-width: 480px) {
  .vuelta {
    padding-left: var(--e-4);
  }
  .vuelta__texto {
    font-size: var(--t-xs);
  }
}

/* --------------------------------------------------------------------------
   18. Buscador
   -------------------------------------------------------------------------- */
.buscar {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: var(--e-5) var(--e-4);
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms;
}

.buscar--abierta {
  opacity: 1;
  visibility: visible;
}

body[data-buscar-abierto] {
  overflow: hidden;
}

@media (min-width: 700px) {
  .buscar {
    padding-top: 10vh;
  }
}

.buscar__caja {
  width: 100%;
  max-width: 560px;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  transform: translateY(-10px);
  transition: transform 200ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.buscar--abierta .buscar__caja {
  transform: none;
}

.buscar__campo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--gris-2);
  color: var(--tinta-40);
}

.buscar__campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: var(--t-md);
  color: var(--tinta);
}

/* Safari pinta su propia cruz en type="search" y se solapa con la nuestra. */
.buscar__campo input::-webkit-search-cancel-button {
  display: none;
}

.buscar__cerrar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radio-full);
  background: var(--gris-1);
  color: var(--tinta-60);
  cursor: pointer;
}

.buscar__cerrar:hover {
  background: var(--negro);
  color: var(--blanco);
}

.buscar__resultados {
  max-height: min(60vh, 480px);
  overflow-y: auto;
  text-align: left;
}

.buscar__nota {
  padding: var(--e-5);
  font-size: var(--t-sm);
  color: var(--tinta-40);
}

.buscar__nota + .buscar__nota {
  padding-top: 0;
}

.buscar__fila {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-5);
  text-decoration: none;
  border-bottom: 1px solid var(--gris-1);
}

.buscar__fila:last-child {
  border-bottom: 0;
}

.buscar__fila:hover,
.buscar__fila--activa {
  background: var(--gris-1);
}

.buscar__medio {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radio-sm);
  background: var(--gris-1);
  overflow: hidden;
}

.buscar__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.buscar__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.buscar__tipo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-40);
}

.buscar__titulo {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.buscar__pie {
  font-size: var(--t-xs);
  color: var(--tinta-60);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   19. Preguntas frecuentes
   --------------------------------------------------------------------------
   `<details>` nativo: abre y cierra sin JavaScript, es accesible de fábrica y
   el buscador lee el contenido aunque esté plegado. Con divs y JS habría que
   reconstruir a mano el teclado y el estado ARIA.
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: var(--e-2);
  max-width: 760px;
  margin: var(--e-6) auto 0;
  text-align: left;
}

.faq__caja {
  border-radius: var(--radio);
  background: var(--blanco);
  overflow: hidden;
}

.faq__caja summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

.faq__caja summary::-webkit-details-marker {
  display: none;
}

.faq__caja summary::after {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: -5px;
  border-right: 2px solid var(--tinta-40);
  border-bottom: 2px solid var(--tinta-40);
  transform: rotate(45deg);
  transition: transform var(--transicion);
}

.faq__caja[open] summary::after {
  margin-top: 5px;
  transform: rotate(-135deg);
}

.faq__caja summary:hover {
  background: var(--gris-1);
}

.faq__cuerpo {
  padding: 0 var(--e-5) var(--e-5);
  color: var(--tinta-60);
  max-width: 62ch;
}

.faq__cuerpo p + p {
  margin-top: var(--e-3);
}

/* --------------------------------------------------------------------------
   20. Simulación de pago con tarjeta
   --------------------------------------------------------------------------
   Solo existe con ?demo=pagos. El aviso de arriba no se puede cerrar ni
   silenciar: es lo que impide que alguien confunda esto con un cobro real.
   -------------------------------------------------------------------------- */
.pago {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: var(--e-4);
  background: rgb(0 0 0 / 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
}

.pago--abierto {
  opacity: 1;
  visibility: visible;
}

body[data-pago-abierto] {
  overflow: hidden;
}

.pago__caja {
  width: min(100%, 420px);
  border-radius: var(--radio-lg);
  background: var(--blanco);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.pago--abierto .pago__caja {
  transform: none;
}

/* Amarillo de advertencia, no el naranja de marca: tiene que leerse como
   aviso del sistema y no como parte del diseño de la tienda. */
.pago__aviso {
  padding: var(--e-3) var(--e-5);
  background: #fff4c2;
  color: #6b4e00;
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: center;
}

.pago__cuerpo {
  padding: var(--e-5);
}

.pago__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

.pago__titulo {
  font-size: var(--t-lg);
}

.pago__cerrar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radio-full);
  background: var(--gris-1);
  color: var(--tinta-60);
  cursor: pointer;
}

.pago__cerrar:hover {
  background: var(--negro);
  color: var(--blanco);
}

.pago__forma {
  display: grid;
  gap: var(--e-3);
}

.pago__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}

.pago__campo {
  display: grid;
  gap: var(--e-1);
}

.pago__campo span {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-40);
}

.pago__campo input {
  min-height: 46px;
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--radio-sm);
  background: var(--lienzo);
  box-shadow: inset 0 0 0 1.5px var(--gris-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.pago__campo input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--sol);
}

.pago__error {
  margin: 0;
  padding: var(--e-3);
  border-radius: var(--radio-sm);
  background: #fdecec;
  color: #8c1d18;
  font-size: var(--t-sm);
}

.pago__prueba {
  margin-top: var(--e-4);
  font-size: var(--t-xs);
  color: var(--tinta-40);
}

.pago__prueba summary {
  cursor: pointer;
}

.pago__prueba ul {
  margin: var(--e-2) 0 0;
  padding-left: var(--e-4);
  display: grid;
  gap: var(--e-1);
}

.pago__prueba code {
  font-variant-numeric: tabular-nums;
  color: var(--tinta-60);
}

.pago__exito {
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  padding-block: var(--e-4);
  text-align: center;
}

.pago__marca {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radio-full);
  background: var(--verde);
  color: var(--blanco);
}

.pago__total {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.04em;
}

.pago__nota {
  font-size: var(--t-xs);
  color: var(--tinta-40);
  max-width: 30ch;
}

/* Cinta permanente mientras la demo esté puesta: navegando por el sitio con
   ella activa, tiene que quedar claro en todo momento. */
html[data-demo-pagos] body::after {
  content: "DEMO DE PAGOS";
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 96;
  padding: 4px var(--e-3);
  border-top-right-radius: var(--radio-sm);
  background: #fff4c2;
  color: #6b4e00;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   21. Portada de guía
   -------------------------------------------------------------------------- */
.guia {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--blanco);
}

.guia__portada {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guia::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.1) 24%,
    rgb(0 0 0 / 0.66) 74%,
    rgb(0 0 0 / 0.86)
  );
}

.guia h3 {
  color: var(--blanco);
}

.guia p,
.guia .rotulo {
  color: rgb(255 255 255 / 0.8);
}

/* ── Resumen rápido al inicio de una guía ─────────────────────────
   Responde la intención de búsqueda antes de que haya que leer nada.
   Va justo debajo de la entradilla y encima del primer H2. */
.resumen {
  position: relative;
  padding: var(--e-5) var(--e-5) var(--e-5) var(--e-6);
  border-radius: var(--radio);
  background: var(--gris-1);
  overflow: hidden;
}

.resumen::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--degradado-sol);
}

.resumen__rotulo {
  display: block;
  margin-bottom: var(--e-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-60);
}

.resumen ul {
  margin: 0;
  padding-left: 1.15em;
}

.resumen li {
  font-size: var(--t-sm);
}

.resumen li + li {
  margin-top: var(--e-2);
}

/* ── Llamada dentro del texto, después del primer bloque ────────── */
.cta-prosa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--radio);
  border: 1px solid var(--gris-3);
  background: var(--blanco);
}

.cta-prosa p {
  flex: 1 1 20ch;
  margin: 0;
  font-size: var(--t-sm);
}

/* ── Preguntas dentro de una guía ────────────────────────────────
   Mismo componente que la portada; el título de cada una es un H3
   real para que la jerarquía H1 › H2 › H3 exista en el documento. */
.faq__caja summary h3 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.prosa .faq {
  margin-top: var(--e-5);
}

/* ── Barra fija de contacto en móvil ─────────────────────────────
   Debajo del carrito (70) y del aviso flotante (80) para no taparlos. */
.barra-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--gris-3);
}

.barra-movil .btn {
  flex: 1;
  justify-content: center;
}

@media (max-width: 720px) {
  .barra-movil {
    display: flex;
  }

  body:has(.barra-movil) .pie {
    padding-bottom: calc(var(--e-8) + 3.5rem);
  }

  .aviso-flotante {
    bottom: calc(var(--e-5) + 3.5rem);
  }
}

/* ── Botón de compartir ──────────────────────────────────────────── */
.compartir {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

.compartir[data-copiado]::after {
  content: attr(data-copiado);
  font-size: var(--t-xs);
  color: var(--tinta-60);
}