/* ============ Constelando el Origen — CSS custom (paleta del canal) ============ */

/* ============================================================
   DESIGN TOKENS (editorial) — sello literario, sobrio, cálido
   Importado del Design System de Constelando el Origen.
   ============================================================ */
:root {
  /* Brand colors */
  --crema:        #f7f1e3;
  --crema-2:      #ecdfbe;
  --crema-3:      #e4d3a4;
  --crema-page:   #fdfaf3;
  --marron:       #3a2410;
  --marron-2:     #5a3a22;
  --marron-3:     #8a6842;
  --marron-deep:  #2a1808;
  --rojo:         #c8201f;
  --rojo-2:       #a01816;
  --vinotinto:    #6b1f2e;
  --oro:          #c9a96a;
  --oro-2:        #b08c4a;
  --oro-deep:     #6b5018;
  --oro-suave:    #f3e9cf;
  --verde:        #8ab560;

  /* Type families */
  --font-display:  "Lora", "Times New Roman", Georgia, serif;
  --font-logo:     "Times New Roman", "Lora", Georgia, serif;
  --font-serif:    "Lora", Georgia, serif;
  --font-sans:     "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui:       "Inter Tight", "Inter", system-ui, sans-serif;

  /* Type scale (clamp para responsive) */
  --fs-eyebrow:    0.72rem;
  --fs-h1:         clamp(2.5rem, 5.5vw, 4rem);
  --fs-h2:         clamp(2rem, 4vw, 3rem);
  --fs-display:    clamp(3rem, 7vw, 5.5rem);

  /* Shadows cálidas (marrón en lugar de negro frío) */
  --shadow-card:   0 10px 30px -20px rgba(58,36,16,0.30);
  --shadow-lift:   0 25px 50px -20px rgba(58,36,16,0.35);
  --shadow-deep:   0 30px 60px -15px rgba(58,36,16,0.40);
  --shadow-rojo:   0 10px 30px -10px rgba(200,32,31,0.50);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Tipografía base más grande — audiencia con visión reducida */
  font-size: 17.5px;
}
@media (min-width: 768px) {
  html { font-size: 18px; }
}
@media (min-width: 1280px) {
  html { font-size: 18.5px; }
}

/* Selección de texto */
::selection { background: #c8201f; color: #f7f1e3; }

/* Scrollbar elegante (tonos crema/marrón) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #ecdfbe; }
::-webkit-scrollbar-thumb { background: #8a6842; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3a2410; }

/* ============ Navbar ============ */
.nav-link {
  color: #3a2410;
  transition: color 0.25s ease;
  position: relative;
}
.nav-link:hover { color: #c8201f; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: #c8201f;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* Navbar SIEMPRE con fondo cream opaco (antes era transparente hasta
   que se hacía scroll, lo que dejaba el contenido del body pisándose
   con el wordmark "Constelando el Origen" y haciendo ver el logo como
   un cuadrado beige. En las páginas de producto NO hay JS que añada
   .scrolled, por eso quedaba siempre transparente). */
#navbar {
  background: rgba(247, 241, 227, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(58, 36, 16, 0.08);
}
#navbar.scrolled {
  background: rgba(247, 241, 227, 0.98);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 4px 20px -12px rgba(58, 36, 16, 0.25);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* ============ Botones ============ */
.btn-rojo {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.9rem;
  background: linear-gradient(135deg, #c8201f 0%, #a01816 100%);
  color: #f7f1e3;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 1rem;
  border-radius: 9999px;
  box-shadow: 0 10px 30px -10px rgba(200, 32, 31, 0.5);
  transition: all 0.3s ease;
}
.btn-rojo:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -10px rgba(200, 32, 31, 0.6);
  background: linear-gradient(135deg, #a01816 0%, #c8201f 100%);
}

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.9rem;
  border: 1.5px solid rgba(58, 36, 16, 0.4);
  color: #3a2410;
  background: rgba(247, 241, 227, 0.5);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 1rem;
  border-radius: 9999px;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
}
.btn-outline:hover {
  background: #3a2410;
  border-color: #3a2410;
  color: #f7f1e3;
  transform: translateY(-2px);
}

.btn-marron {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8rem 1.4rem;
  background: #3a2410;
  color: #f7f1e3;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.95rem;
  border-radius: 9999px;
  box-shadow: 0 8px 20px -8px rgba(58, 36, 16, 0.4);
  transition: all 0.3s ease;
}
.btn-marron:hover {
  transform: translateY(-2px);
  background: #5a3a22;
  box-shadow: 0 16px 30px -10px rgba(58, 36, 16, 0.5);
}

/* ============ Chips especialidades ============ */
.chip-especialidad {
  display: inline-flex; align-items: center;
  padding: 0.7rem 1.1rem;
  background: rgba(247, 241, 227, 0.6);
  border: 1px solid rgba(58, 36, 16, 0.15);
  border-radius: 12px;
  font-size: 0.9rem;
  color: #3a2410;
  font-weight: 500;
  transition: all 0.3s ease;
}
.chip-especialidad:hover {
  background: rgba(201, 169, 106, 0.25);
  border-color: #c9a96a;
  transform: translateX(4px);
  color: #5a3a22;
}

/* Pills de áreas (en qué acompaña Helber) — fluidos, sin viñetas toscas */
.area-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.85rem;
  background: rgba(247, 241, 227, 0.7);
  border: 1px solid rgba(201, 169, 106, 0.4);
  border-radius: 9999px;
  font-size: 0.82rem;
  line-height: 1.2;
  color: #5a3a22;
  font-weight: 500;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.area-pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 9999px;
  background: #c9a96a;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.area-pill:hover {
  background: rgba(201, 169, 106, 0.2);
  border-color: #c9a96a;
}

/* ============ Franja de confianza (stats prueba social) ============ */
/* Stats editorial — crema sutil (rediseno 2026-05-31) */
.stats-confianza {
  background: linear-gradient(180deg, #fdfaf3 0%, #f7f1e3 100%);
  padding: 3.5rem 1.5rem;
  border-top: 1px solid rgba(58, 36, 16, 0.08);
  border-bottom: 1px solid rgba(58, 36, 16, 0.08);
  position: relative;
}
.stats-confianza::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200,32,31,0.6), transparent);
}
.stats-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
}
.stat-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  position: relative;
  padding: 0 0.5rem;
}
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1rem; top: 20%; bottom: 20%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(58,36,16,0.18), transparent);
}
@media (max-width: 768px) {
  .stat-item:nth-child(2n)::after { display: none !important; }
  .stat-item::after { right: -0.75rem !important; }
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2.6rem, 5.5vw, 3.8rem);
  line-height: 1;
  color: #2a1808;
  letter-spacing: -0.02em;
}
.stat-num::first-letter {
  color: #c8201f;
}
.stat-label {
  font-family: var(--font-sans, "Inter Tight", sans-serif);
  font-size: 0.78rem;
  line-height: 1.45;
  color: #6b5440;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  max-width: 180px;
}

/* Herramientas de Helber con explicación breve */
.herramienta-helber {
  padding: 0.85rem 1rem;
  background: rgba(247, 241, 227, 0.5);
  border: 1px solid rgba(58, 36, 16, 0.12);
  border-radius: 0.75rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.herramienta-helber:hover {
  border-color: #c9a96a;
  background: rgba(201, 169, 106, 0.1);
}
.herramienta-helber-titulo {
  font-weight: 700;
  font-size: 0.92rem;
  color: #3a2410;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}
.herramienta-helber-titulo i { margin-right: 0.15rem; }
.herramienta-helber p {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #5a3a22;
  margin: 0;
}

/* ============ Cards servicios ============ */
.card-servicio {
  padding: 2rem;
  background: #f7f1e3;
  border: 1px solid rgba(58, 36, 16, 0.08);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px -20px rgba(58, 36, 16, 0.3);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer; /* hover sobre la card entera (no solo "Conocer más") */
}
/* Toda la card-servicio es clickeable — el link "Conocer más" tiene
   un pseudo-elemento ::after que cubre toda la card. Mejora UX mobile
   (touch targets pequenos solucionados). El texto sigue seleccionable
   con click+drag normal. */
.card-servicio .link-rojo::after {
  content: '';
  position: absolute;
  inset: 0;
}
.card-servicio::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c9a96a, #c8201f, #c9a96a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.card-servicio:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 169, 106, 0.5);
  box-shadow: 0 25px 50px -20px rgba(58, 36, 16, 0.3);
}
.card-servicio:hover::before { transform: scaleX(1); }

.card-destacado {
  background: linear-gradient(135deg, #f7f1e3 0%, #ecdfbe 100%);
  border-color: rgba(200, 32, 31, 0.25);
  box-shadow: 0 15px 40px -20px rgba(200, 32, 31, 0.25);
}

.link-rojo {
  color: #c8201f;
  font-weight: 600;
  transition: all 0.2s ease;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}
.link-rojo:hover {
  color: #a01816;
  letter-spacing: 0.12em;
}

/* ============ Cards productos ============ */
.card-producto {
  padding: 1.5rem;
  background: #f7f1e3;
  border: 1px solid rgba(58, 36, 16, 0.1);
  border-radius: 1.25rem;
  box-shadow: 0 10px 40px -15px rgba(58, 36, 16, 0.2);
  transition: all 0.4s ease;
}
.card-producto:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 60px -15px rgba(58, 36, 16, 0.35);
  border-color: rgba(201, 169, 106, 0.4);
}

/* ============ Formulario ============ */
.label-input {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5a3a22;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.input-ctl {
  width: 100%;
  padding: 0.85rem 1rem;
  background: #fefbf2;
  border: 1.5px solid rgba(58, 36, 16, 0.18);
  border-radius: 0.75rem;
  color: #3a2410;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.2s ease;
}
.input-ctl:focus {
  outline: none;
  border-color: #c8201f;
  box-shadow: 0 0 0 4px rgba(200, 32, 31, 0.12);
  background: #ffffff;
}
.input-ctl::placeholder { color: #6e5436; }

/* ============ Atajos contacto ============ */
.contacto-atajo {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem;
  color: white;
  border-radius: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px -10px rgba(58, 36, 16, 0.25);
}
.contacto-atajo:hover {
  transform: translateX(-4px) translateY(-2px);
  box-shadow: 0 20px 40px -10px rgba(58, 36, 16, 0.35);
}

/* ============ Iconos sociales footer ============ */
.icon-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: rgba(201, 169, 106, 0.12);
  border: 1px solid rgba(201, 169, 106, 0.3);
  color: #c9a96a;
  border-radius: 50%;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}
.icon-social:hover {
  background: #c9a96a;
  color: #3a2410;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -5px rgba(201, 169, 106, 0.5);
}

/* ============ Constelaciones doradas sobre crema ============ */
.constelaciones-bg {
  background-image:
    /* Estrellas chicas */
    radial-gradient(1.5px 1.5px at 8% 12%, rgba(201,169,106,0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 18% 28%, rgba(176,140,74,0.75), transparent 60%),
    radial-gradient(2px 2px at 32% 18%, rgba(201,169,106,0.9), transparent 60%),
    radial-gradient(1px 1px at 42% 40%, rgba(176,140,74,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 22%, rgba(201,169,106,0.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 48%, rgba(176,140,74,0.7), transparent 60%),
    radial-gradient(2px 2px at 78% 18%, rgba(201,169,106,0.9), transparent 60%),
    radial-gradient(1px 1px at 88% 38%, rgba(176,140,74,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 62%, rgba(201,169,106,0.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 25% 82%, rgba(176,140,74,0.7), transparent 60%),
    radial-gradient(2px 2px at 40% 72%, rgba(201,169,106,0.8), transparent 60%),
    radial-gradient(1px 1px at 58% 88%, rgba(176,140,74,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 78%, rgba(201,169,106,0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 85% 90%, rgba(176,140,74,0.75), transparent 60%),
    radial-gradient(2.2px 2.2px at 95% 60%, rgba(201,169,106,0.9), transparent 60%);
  background-size: 100% 100%;
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

/* ============ Miniaturas del canal ============ */
.miniatura-canal {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #ecdfbe, #c9a96a);
  box-shadow: 0 8px 25px -10px rgba(58, 36, 16, 0.3);
  transition: all 0.35s ease;
}
.miniatura-canal img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.miniatura-canal:hover { transform: translateY(-4px); box-shadow: 0 15px 35px -10px rgba(58, 36, 16, 0.4); }
.miniatura-canal:hover img { transform: scale(1.06); }
.miniatura-canal .overlay-miniatura {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(58, 36, 16, 0);
  color: #f7f1e3;
  font-size: 2.5rem;
  opacity: 0;
  transition: all 0.35s ease;
}
.miniatura-canal:hover .overlay-miniatura {
  background: rgba(58, 36, 16, 0.55);
  opacity: 1;
}
.miniatura-canal.sin-imagen::after {
  content: '\f167';
  font-family: 'Font Awesome 6 Brands';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #c8201f;
  font-size: 2.5rem;
}

/* ============ Tarjetas de artículos ============ */
.card-articulo {
  display: flex;
  flex-direction: column;
  background: #f7f1e3;
  border: 1px solid rgba(58, 36, 16, 0.1);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 10px 30px -20px rgba(58, 36, 16, 0.35);
  transition: all 0.4s ease;
}
.card-articulo:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 169, 106, 0.5);
  box-shadow: 0 25px 50px -20px rgba(58, 36, 16, 0.45);
}
.card-articulo-img {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 1rem 1.25rem;
  overflow: hidden;
}
/* Imagen hero de la card: abarca tanto <img> directo como
   <picture><img></picture> (la envoltura con fallback webp agregada
   por _actualizar_html_picture.py). Sin esto la img quedaba chiquita
   en su tamaño natural y el gradiente de fallback tapaba la foto.
   Usamos !important para ganarle a cualquier clase de Tailwind que
   quiera imponer width/height propios. */
.card-articulo-img > img,
.card-articulo-img > picture,
.card-articulo-img > picture > img,
.card-articulo-img picture,
.card-articulo-img picture img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: 100% !important; max-height: 100% !important;
  min-width: 100% !important; min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  z-index: 0;
  transition: transform 0.7s ease;
  display: block;
}
.card-articulo:hover .card-articulo-img > img,
.card-articulo:hover .card-articulo-img > picture > img,
.card-articulo:hover .card-articulo-img picture img {
  transform: scale(1.06);
}
.card-articulo-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 15% 20%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 35%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.8px 1.8px at 80% 55%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 25% 70%, rgba(255,255,255,0.4), transparent 60%);
  opacity: 0.7;
  z-index: 0;
}
/* :has(img) sin '>' para que detecte también <picture><img> */
.card-articulo-img:has(img)::before { opacity: 0; }
.card-articulo-img:has(img)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(58,36,16,0.15) 0%,
    rgba(58,36,16,0.05) 45%,
    rgba(58,36,16,0.75) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.card-articulo-cat {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0.4rem 0.85rem;
  background: rgba(247, 241, 227, 0.98);
  color: #3a2410;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 9999px;
  z-index: 1;
}
.card-articulo-icono {
  position: relative;
  font-size: 2rem;
  color: rgba(247, 241, 227, 0.95);
  z-index: 1;
}
.card-articulo-ancho .card-articulo-icono { font-size: 3rem; }
.card-articulo-body { padding: 1.5rem 1.5rem 1.75rem; flex: 1; display: flex; flex-direction: column; }
.card-articulo-titulo {
  font-family: 'Inter', system-ui, sans-serif;
  /* Aumentado para visión reducida */
  font-weight: 800;
  font-size: 1.28rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #3a2410;
  margin-bottom: 0.75rem;
}
.card-articulo-ancho .card-articulo-titulo { font-size: 1.65rem; }
.card-articulo-extracto {
  font-size: 1.05rem;
  color: #5a3a22;
  line-height: 1.55;
  margin-bottom: 1rem;
  flex: 1;
}

/* ============ Página de artículo (prose) ============ */
.articulo-hero {
  padding-top: 8rem;
  padding-bottom: 3rem;
  background: linear-gradient(180deg, #f7f1e3 0%, #ecdfbe 100%);
  position: relative;
  overflow: hidden;
}
.articulo-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(201,169,106,0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 30% 50%, rgba(176,140,74,0.55), transparent 60%),
    radial-gradient(2px 2px at 60% 30%, rgba(201,169,106,0.75), transparent 60%),
    radial-gradient(1px 1px at 85% 70%, rgba(176,140,74,0.6), transparent 60%);
  animation: twinkle 7s ease-in-out infinite alternate;
  opacity: 0.6;
}
.breadcrumb {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #6a4a22;
  margin-bottom: 1.25rem;
  font-weight: 600;
}
.breadcrumb a { color: #4a2d10; }
.breadcrumb a:hover { color: #c8201f; }
.articulo-categoria {
  display: inline-flex; align-items: center;
  padding: 0.5rem 1.05rem;
  background: rgba(200, 32, 31, 0.12);
  color: #c8201f;
  border: 1px solid rgba(200, 32, 31, 0.3);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
}
.articulo-titulo {
  /* Antes: Inter 900 MAYÚSCULAS — la única sección del sitio que titulaba en
     sans grotesca; DESIGN.md manda Lora serif para títulos (267 artículos). */
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: #3a2410;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  margin-bottom: 1rem;
}
.articulo-subtitulo {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: #4a2d10;
  line-height: 1.45;
  margin-bottom: 1.5rem;
  max-width: 48rem;
}
.articulo-meta {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  font-size: 0.95rem;
  color: #4a2d10;
  margin-top: 1rem;
}
.articulo-meta i { color: #c9a96a; margin-right: 0.35rem; }

.prose-sanacion {
  max-width: 46rem;
  margin: 0 auto;
  color: #2a1808;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: 0.005em;
}
@media (min-width: 768px) {
  .prose-sanacion { font-size: 1.3rem; }
}
.prose-sanacion p { margin-bottom: 1.5rem; }
.prose-sanacion h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.95rem;
  line-height: 1.2;
  color: #3a2410;
  margin: 2.75rem 0 1rem;
  padding-left: 1rem;
  border-left: 4px solid #c8201f;
}
.prose-sanacion h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  color: #5a3a22;
  margin: 2rem 0 0.8rem;
}
.prose-sanacion strong { color: #c8201f; font-weight: 700; font-family: 'Inter', sans-serif; }
.prose-sanacion em { color: #5a3a22; }
.prose-sanacion ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.4rem;
}
.prose-sanacion ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.85rem;
  font-size: 1.18rem;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .prose-sanacion ul li { font-size: 1.22rem; }
}
.prose-sanacion ul li::before {
  content: '\2736';
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: #c9a96a;
  font-size: 1rem;
}
.prose-sanacion blockquote {
  border-left: 4px solid #c9a96a;
  padding: 1rem 1.5rem;
  background: rgba(201, 169, 106, 0.15);
  margin: 2rem 0;
  font-style: italic;
  font-size: 1.3rem;
  color: #4a2d10;
  border-radius: 0 0.5rem 0.5rem 0;
}
.prose-sanacion a { color: #c8201f; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.cta-articulo {
  background: linear-gradient(135deg, #3a2410 0%, #5a3a22 100%);
  color: #f7f1e3;
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  margin: 3rem auto;
  max-width: 46rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-articulo::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 15% 25%, rgba(201,169,106,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 70%, rgba(201,169,106,0.7), transparent 60%),
    radial-gradient(1px 1px at 50% 40%, rgba(201,169,106,0.6), transparent 60%);
  opacity: 0.6;
  animation: twinkle 5s ease-in-out infinite alternate;
}
.cta-articulo > * { position: relative; z-index: 1; }

/* ============ Override defensivo CTA — fondo oscuro requiere texto crema ============
   `.prose-sanacion h3` (color #5a3a22) y `.prose-sanacion a` (color #c8201f)
   ganaban por especificidad al color heredado de `.cta-articulo` y al color
   declarado en `.btn-rojo`, dejando el título y el texto del botón invisibles
   (mismo color que el fondo del bloque y del propio botón rojo).
   Lo mismo ocurría con `.prose-articulo h3 { color: var(--marron) }`. */
.cta-articulo,
.cta-articulo h1,
.cta-articulo h2,
.cta-articulo h3,
.cta-articulo h4,
.cta-articulo h5,
.cta-articulo h6,
.cta-articulo p {
  color: #f7f1e3 !important;
}
.cta-articulo .text-oro,
.cta-articulo .text-oro * {
  color: #c9a96a !important;
}
.cta-articulo .btn-rojo,
.cta-articulo a.btn-rojo {
  color: #f7f1e3 !important;
  text-decoration: none !important;
}
.cta-articulo a:not(.btn-rojo):not([class*="btn-"]) {
  color: #c9a96a !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ Scroll reveal ============ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Auditoría de diseño 2026-06-13: hardening reveal + pulido a11y ===== */
/* No dejar contenido invisible sin JS / con reduce-motion / en crawlers headless */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}
/* Feedback táctil de pulsado (antes :active = 0 en todo el sitio) */
a[class*="btn-"]:active,
button:active,
.card-producto:active {
  transform: scale(0.97);
  transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Títulos con líneas balanceadas + menos huérfanos en prosa (mejora progresiva, segura) */
h1, h2, h3, .display-h1, .display-h2, .articulo-titulo { text-wrap: balance; }
.prose-sanacion p, .articulo p, article p { text-wrap: pretty; }

/* ============ Hero — título tipo miniatura ============ */
.font-display {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* ============ Responsive tweaks ============ */
/* Sin !important: los tamaños diseñados por componente (clamp(), text-[...])
   deben mandar; esto es solo el tamaño por defecto de páginas sin diseño propio.
   Con !important los títulos quedaban en 48px fijos en celular (923 págs). */
@media (max-width: 768px) {
  h1 { font-size: 2.35rem; line-height: 1.1; }
  h2 { font-size: 1.8rem; }
  .contacto-atajo { padding: 1rem 1.15rem; }
}

/* Los botones flotantes (Compartir + WhatsApp) tapaban los enlaces legales
   del footer en celular: darle aire inferior al footer solo en móvil. */
@media (max-width: 767.98px) {
  body > footer, footer.bg-marron { padding-bottom: 6.5rem; }
}

/* Red de seguridad anti-bamboleo lateral en móvil (watermark y halos
   decorativos median más ancho que el viewport). */
body { overflow-x: clip; }

/* ============ LOGO FOOTER — MEDALLÓN ============ */
.logo-medalla {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, #fbf6ea 0%, #ecdfbe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(201,169,106,0.5);
  flex-shrink: 0;
  padding: 4px;
}
.logo-medalla img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 9999px;
}

/* ============ MEMBRESÍA "LA MEMORIA DEL ALMA" ============ */
.membresia-bg {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(200,32,31,0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(201,169,106,0.22) 0%, transparent 55%),
    linear-gradient(160deg, #2a1808 0%, #3a2410 45%, #5a3a22 100%);
}
.membresia-estrellas {
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(201,169,106,0.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 25% 45%, rgba(255,240,200,0.5) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 15%, rgba(201,169,106,0.6) 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 60%, rgba(255,240,200,0.5) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 40% 80%, rgba(201,169,106,0.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 92% 30%, rgba(255,240,200,0.4) 50%, transparent 100%),
    radial-gradient(1.3px 1.3px at 15% 70%, rgba(201,169,106,0.5) 50%, transparent 100%);
  animation: twinkle 7s ease-in-out infinite alternate;
  opacity: 0.85;
}

.membresia-beneficio {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  background: rgba(247, 241, 227, 0.04);
  border: 1px solid rgba(201, 169, 106, 0.18);
  transition: all 0.3s ease;
}
.membresia-beneficio:hover {
  background: rgba(247, 241, 227, 0.08);
  border-color: rgba(201, 169, 106, 0.4);
  transform: translateX(4px);
}
.membresia-icono {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #c9a96a 0%, #b08c4a 100%);
  color: #2a1808;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 4px 14px rgba(201, 169, 106, 0.35);
}

.membresia-temario {
  background: rgba(247, 241, 227, 0.05);
  border: 1px solid rgba(201, 169, 106, 0.25);
  border-radius: 1rem;
  padding: 2rem 2rem 2rem;
  backdrop-filter: blur(4px);
}
.membresia-tema {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0;
  color: rgba(247, 241, 227, 0.92);
  font-weight: 500;
  border-bottom: 1px dashed rgba(201, 169, 106, 0.15);
}
.membresia-tema:last-child { border-bottom: none; }
.membresia-tema i { flex-shrink: 0; width: 18px; text-align: center; }

.membresia-cta {
  background: linear-gradient(135deg, #c8201f 0%, #a01816 100%);
  border: 2px solid #c9a96a;
  border-radius: 1rem;
  padding: 1.75rem 2rem;
  box-shadow: 0 10px 30px rgba(200, 32, 31, 0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.membresia-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 15% 30%, rgba(255,240,200,0.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 85% 70%, rgba(255,240,200,0.4) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 50% 20%, rgba(255,240,200,0.35) 50%, transparent 100%);
  pointer-events: none;
}

/* ============ MEMBRESÍA · TIMELINE 12 MESES ============ */
.membresia-timeline {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  z-index: 1;
}
.membresia-timeline::before {
  content: '';
  position: absolute;
  left: 38px;
  top: 32px;
  bottom: 32px;
  width: 3px;
  background: linear-gradient(to bottom, #e8c87a 0%, #d8b870 50%, #6b5018 100%);
  box-shadow: 0 0 22px rgba(232,200,122,0.55);
  border-radius: 2px;
}
@media (max-width: 640px) {
  .membresia-timeline::before { left: 24px; }
}

.membresia-mes {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 640px) {
  .membresia-mes { grid-template-columns: 54px 1fr; gap: 1rem; }
}

.membresia-mes-num {
  position: relative;
  z-index: 2;
  width: 116px;
  height: 116px;
  border-radius: 9999px;
  overflow: visible;
  border: 3px solid #241405;
  box-shadow:
    0 0 0 4px var(--c-acento, #e8c87a),
    0 0 24px -2px var(--c-acento, #c9a96a),
    0 8px 22px rgba(0,0,0,0.55);
  background:
    radial-gradient(circle at 30% 30%, var(--c-acento, #c9a96a) 0%, transparent 55%),
    radial-gradient(circle at 70% 80%, var(--c-acento-deep, #6b5018) 0%, transparent 60%),
    linear-gradient(135deg, #2a1808 0%, #3a2410 100%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.membresia-mes:hover .membresia-mes-num {
  transform: scale(1.05);
  box-shadow:
    0 0 0 4px var(--c-acento, #e8c87a),
    0 0 36px 0 var(--c-acento, #c9a96a),
    0 12px 30px rgba(0,0,0,0.6);
}

/* Capa interna: placeholder con ícono coloreado + background-image cuando exista */
.membresia-mes-orb {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Fallback: ícono FontAwesome con color del mes */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  color: var(--c-acento-claro, #e8c87a);
  text-shadow:
    0 0 12px var(--c-acento, #c9a96a),
    0 2px 6px rgba(0,0,0,0.7);
  filter: drop-shadow(0 0 6px var(--c-acento-deep, transparent));
}

/* Badge dorado pequeño con el número, arriba-derecha */
.membresia-mes-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 3;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #e8c87a 0%, #d8b870 50%, #b08c4a 100%);
  color: #241405;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #241405;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

@media (max-width: 640px) {
  .membresia-mes-num {
    width: 76px; height: 76px;
    box-shadow: 0 0 0 3px #e8c87a, 0 6px 16px rgba(0,0,0,0.5);
  }
  .membresia-mes-orb { font-size: 1.2rem; }
  .membresia-mes-badge {
    top: -4px; right: -4px;
    min-width: 22px; height: 22px; font-size: 0.7rem;
    border-width: 1.5px;
  }
}

/* 2-sep-2026 (jimy: «abajo de un año completo, donde hay iconos, quiero imágenes»): las 12 fotos YA EXISTEN
   (Gemini PRO, receta editorial de la casa). Bloque reactivado; el icono se esconde cuando hay foto. */
.membresia-mes-1  .membresia-mes-orb { background-image: url('../img/membresia/mes-01.webp'); }
.membresia-mes-2  .membresia-mes-orb { background-image: url('../img/membresia/mes-02.webp'); }
.membresia-mes-3  .membresia-mes-orb { background-image: url('../img/membresia/mes-03.webp'); }
.membresia-mes-4  .membresia-mes-orb { background-image: url('../img/membresia/mes-04.webp'); }
.membresia-mes-5  .membresia-mes-orb { background-image: url('../img/membresia/mes-05.webp'); }
.membresia-mes-6  .membresia-mes-orb { background-image: url('../img/membresia/mes-06.webp'); }
.membresia-mes-7  .membresia-mes-orb { background-image: url('../img/membresia/mes-07.webp'); }
.membresia-mes-8  .membresia-mes-orb { background-image: url('../img/membresia/mes-08.webp'); }
.membresia-mes-9  .membresia-mes-orb { background-image: url('../img/membresia/mes-09.webp'); }
.membresia-mes-10 .membresia-mes-orb { background-image: url('../img/membresia/mes-10.webp'); }
.membresia-mes-11 .membresia-mes-orb { background-image: url('../img/membresia/mes-11.webp'); }
.membresia-mes-12 .membresia-mes-orb { background-image: url('../img/membresia/mes-12.webp'); }
.membresia-mes .membresia-mes-orb i { display: none; }
.membresia-mes .membresia-mes-orb { box-shadow: inset 0 0 0 2px rgba(201,169,106,.55), 0 2px 10px rgba(0,0,0,.45); }


.membresia-mes-card {
  position: relative;
  padding: 1.6rem 1.8rem 1.5rem;
  border-radius: 1.1rem;
  background: linear-gradient(150deg, rgba(247,241,227,0.10) 0%, rgba(247,241,227,0.05) 100%);
  border: 1.5px solid var(--c-acento, #d8b870);
  box-shadow: 0 14px 38px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  /* backdrop-filter quitado: 12 cards con blur ralentizaban el render y no aportaban
     (el fondo de la sección es un gradient sólido, no hay nada que difuminar). */
}
.membresia-mes-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--c-acento, #d8b870) 0%, var(--c-acento-deep, #6b5018) 100%);
  border-radius: 1.1rem 1.1rem 0 0;
}

.membresia-mes-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.32rem 0.78rem;
  border-radius: 9999px;
  background: var(--c-acento, #d8b870);
  color: var(--c-acento-onbg, #f7f1e3);
  margin-bottom: 0.85rem;
}
.membresia-mes-titulo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.1;
  color: #f7f1e3;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}
.membresia-mes-titulo em {
  color: var(--c-acento-claro, var(--c-acento, #d8b870));
  font-style: normal;
}

.membresia-sub-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  display: grid;
  gap: 0.65rem;
}
.membresia-sub-lista li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  color: #f7f1e3;
  font-size: 0.98rem;
  line-height: 1.5;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  background: rgba(0,0,0,0.22);
}
.membresia-sub-lista li i {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-acento, #d8b870);
  color: var(--c-acento-onbg, #f7f1e3);
  font-size: 0.7rem;
  margin-top: 2px;
}
.membresia-sub-lista li strong { color: #f7f1e3; font-weight: 700; }

.membresia-taller {
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, var(--c-acento-deep, #6b5018) 0%, var(--c-acento, #d8b870) 100%);
  color: #f7f1e3;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
}
.membresia-taller-icono {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.30);
  color: #f7f1e3;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.membresia-taller-label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.95;
  margin-bottom: 0.25rem;
}
.membresia-taller-texto {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.45;
  color: #f7f1e3;
}

/* Acentos por mes — Paleta canónica Constelando
   Derivados del :root del sitio (vinotinto / oro / tierra).
   12 colores únicos, agrupados en 3 familias × 4 luminosidades.
   V = Vinotinto · O = Oro · T = Tierra · puentes V+T (marsala) y O+T (bronce)

   Sistema 3 variables por mes (legibilidad WCAG AA garantizada):
   --c-acento        → fondos / bordes / chips / barra superior
   --c-acento-deep   → degradé del taller
   --c-acento-claro  → texto del <em> del título (versión luminosa, contraste >=4.5:1 sobre marrón)
   --c-acento-onbg   → texto que va DENTRO del chip / círculo (crema o marrón según luminosidad del acento) */
.membresia-mes-1  { --c-acento: #a01828; --c-acento-deep: #5e0d18; --c-acento-claro: #e8889b; --c-acento-onbg: #f7f1e3; } /* V · vino sangre       — linaje femenino */
.membresia-mes-2  { --c-acento: #2d4f75; --c-acento-deep: #16283a; --c-acento-claro: #8fb4dc; --c-acento-onbg: #f7f1e3; } /* AZUL pizarra — linaje paterno. EXCEPCIÓN deliberada a la familia cálida, decidida por jimy el 2026-07-28: el mes del padre se identifica por el azul en la franja del inicio, en el acordeón y en /la-fuerza-del-padre. Ver DESIGN.md §1. NO "corregir" a tierra. */
.membresia-mes-3  { --c-acento: #6b1f2e; --c-acento-deep: #3d101a; --c-acento-claro: #e8788e; --c-acento-onbg: #f7f1e3; } /* V · vino profundo     — herida materna/paterna */
.membresia-mes-4  { --c-acento: #dcc080; --c-acento-deep: #8a7038; --c-acento-claro: #f0d898; --c-acento-onbg: #241405; } /* O · oro brillante     — niño interior (luz amorosa) */
.membresia-mes-5  { --c-acento: #9a4a3a; --c-acento-deep: #56261e; --c-acento-claro: #e89878; --c-acento-onbg: #f7f1e3; } /* V+T · marsala         — lealtades invisibles (hilo profundo) */
.membresia-mes-6  { --c-acento: #b08c4a; --c-acento-deep: #5a4218; --c-acento-claro: #e0c478; --c-acento-onbg: #241405; } /* O · oro tostado       — sanación de lealtades */
.membresia-mes-7  { --c-acento: #5a3a22; --c-acento-deep: #2a1808; --c-acento-claro: #c89868; --c-acento-onbg: #f7f1e3; } /* T · tierra profunda   — heridas del alma (olvidados) */
.membresia-mes-8  { --c-acento: #c9a96a; --c-acento-deep: #6b5018; --c-acento-claro: #e8c88a; --c-acento-onbg: #241405; } /* O · oro canónico      — enfermedades del clan (medicina) */
.membresia-mes-9  { --c-acento: #8a6238; --c-acento-deep: #4d361e; --c-acento-claro: #d8a878; --c-acento-onbg: #f7f1e3; } /* O+T · bronce cálido   — parejas del sistema (vínculo orgánico) */
.membresia-mes-10 { --c-acento: #b8334a; --c-acento-deep: #6e1c2a; --c-acento-claro: #e8889b; --c-acento-onbg: #f7f1e3; } /* V · vino vibrante     — enamoramiento (pasión joven) */
.membresia-mes-11 { --c-acento: #a08540; --c-acento-deep: #5a481c; --c-acento-claro: #d8b870; --c-acento-onbg: #241405; } /* O · oro profundo rico — abundancia */
.membresia-mes-12 { --c-acento: #7a3818; --c-acento-deep: #45200c; --c-acento-claro: #d49070; --c-acento-onbg: #f7f1e3; } /* T · caoba raíz        — autoestima y misión (estar en tu lugar) */

/* ============================================================
   MEMBRESÍA V2 — fixes diseñador senior + neuromarketing
   H1: tipografía editorial Lora 600 sentence-case
   H2: chip transparente con borde del color (no rectángulo)
   H5: badge sin doble-borde
   H6: caja taller con border-left
   P1-P5: pulidos finos
   + Componentes nuevos: sticky-pill, historia, daniela, testimonios, regalo, cta-nueva
   ============================================================ */

/* --- H3 FONDO INVERTIDO: cálido al inicio, profundo al final --- */
.membresia-bg {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(200,32,31,0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(201,169,106,0.22) 0%, transparent 55%),
    linear-gradient(160deg, #3a2410 0%, #5a3a22 55%, #2a1808 100%) !important;
}

/* --- H1 título mes en Lora 600 italic NO uppercase --- */
.membresia-mes-titulo {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.5rem, 3.2vw, 2rem) !important;
  line-height: 1.15 !important;
  color: #f7f1e3;
  margin: 0 0 1.1rem;
  text-transform: none !important;
  letter-spacing: -0.005em;
}
.membresia-mes-titulo em {
  color: var(--c-acento-claro, #d8b870) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* --- H2 chip eyebrow transparente con borde del color --- */
.membresia-mes-eyebrow {
  background: rgba(0,0,0,0.35) !important;
  color: var(--c-acento-claro, #f7f1e3) !important;
  border: 1px solid var(--c-acento, #d8b870);
  letter-spacing: 0.22em !important; /* P1 */
  padding: 0.28rem 0.7rem !important;
}

/* --- H2 card border 2px del color del mes + barra superior 6px --- */
.membresia-mes-card {
  border: 2px solid var(--c-acento, #d8b870) !important;
  border-top: 6px solid var(--c-acento, #d8b870) !important;
}
.membresia-mes-card::before {
  display: none !important; /* eliminamos el ::before duplicado, ya está en border-top */
}

/* --- H2 orbe con anillo del color del mes (no más dorado hard-coded) --- */
.membresia-mes-num {
  box-shadow:
    0 0 0 3px var(--c-acento) !important,
    0 0 0 5px rgba(36,20,5,0.6) !important,
    0 0 22px -2px var(--c-acento) !important,
    0 8px 22px rgba(0,0,0,0.55) !important;
}

/* --- H5 badge sin doble-borde, anillo del color del mes --- */
.membresia-mes-badge {
  top: -4px !important;
  right: -4px !important;
  border: none !important;
  box-shadow: 0 0 0 2px var(--c-acento), 0 3px 8px rgba(0,0,0,0.5) !important;
  min-width: 26px !important;
  height: 26px !important;
  padding: 0 6px !important;
  font-size: 0.82rem !important;
}

/* --- H6 taller con border-left del color (no más gradient sucio) --- */
.membresia-taller {
  background: rgba(0,0,0,0.40) !important;
  border: none !important;
  border-left: 4px solid var(--c-acento-claro, #d8b870) !important;
  border-radius: 0.4rem 0.85rem 0.85rem 0.4rem !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}
.membresia-taller-icono {
  background: var(--c-acento, #d8b870) !important;
  color: var(--c-acento-onbg, #f7f1e3) !important;
}

/* --- P4 sub-lista items con menos peso de gris --- */
.membresia-sub-lista li {
  background: rgba(0,0,0,0.12) !important;
}

/* --- P2 timeline glow más sutil --- */
.membresia-timeline::before {
  box-shadow: 0 0 12px rgba(232,200,122,0.35) !important;
}

/* --- H4 beneficios con tipografía Lora --- */
.membresia-beneficio {
  min-height: 96px;
  padding: 1.1rem 1.15rem !important;
  border: 1px solid rgba(201, 169, 106, 0.28) !important;
}
.membresia-beneficio:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(201, 169, 106, 0.55) !important;
}
.membresia-beneficio-titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #f7f1e3;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.membresia-beneficio-texto {
  color: #f7f1e3;
  font-size: 0.88rem;
  line-height: 1.45;
}

/* ============ STICKY PILL · próximo círculo ============ */
.membresia-sticky-pill {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(90deg, rgba(200,32,31,0.25) 0%, rgba(216,184,112,0.18) 100%);
  border-bottom: 1px solid rgba(216,184,112,0.4);
  font-size: 0.85rem;
  color: #f7f1e3;
  letter-spacing: 0.04em;
}
.membresia-sticky-pill i {
  color: #e8c87a;
  font-size: 1rem;
}
.membresia-sticky-pill strong {
  color: #e8c87a;
  font-weight: 700;
}
@media (max-width: 640px) {
  .membresia-sticky-pill {
    flex-direction: column;
    gap: 0.3rem;
    text-align: center;
    font-size: 0.8rem;
  }
}

/* ============ HISTORIA DE MARÍA · storytelling ============ */
.membresia-historia {
  max-width: 760px;
  margin: 0 auto 4rem;
  padding: 2rem 2.25rem 2rem 2rem;
  background:
    linear-gradient(135deg, rgba(247,241,227,0.06) 0%, rgba(247,241,227,0.02) 100%);
  border-left: 4px solid #c9a96a;
  border-radius: 0.4rem 1rem 1rem 0.4rem;
  display: flex;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}
.membresia-historia-marca {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #c9a96a 0%, #b08c4a 100%);
  color: #241405;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 14px rgba(201,169,106,0.4);
}
.membresia-historia-cuerpo {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.65;
  color: #f7f1e3;
}
.membresia-historia-cuerpo p { margin: 0 0 0.85rem; }
.membresia-historia-cuerpo em { color: #c9a96a; font-style: italic; }
.membresia-historia-cuerpo blockquote {
  margin: 1rem 0;
  padding: 0.8rem 1rem 0.8rem 1.1rem;
  border-left: 3px solid #c9a96a;
  background: rgba(201,169,106,0.06);
  font-style: italic;
  font-size: 1.1rem;
  color: #e8c87a;
  border-radius: 0 0.5rem 0.5rem 0;
}
.membresia-historia-cierre {
  color: #c9a96a !important;
  font-size: 0.95rem !important;
  margin-top: 1rem !important;
  font-style: italic;
}
@media (max-width: 640px) {
  .membresia-historia { flex-direction: column; padding: 1.5rem; gap: 1rem; }
}

/* ============ BLOQUE DANIELA · autoridad ============ */
.membresia-daniela {
  max-width: 880px;
  margin: 0 auto 4rem;
  padding: 2rem;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(200,32,31,0.10) 0%, transparent 60%),
    linear-gradient(135deg, rgba(247,241,227,0.08) 0%, rgba(247,241,227,0.02) 100%);
  border: 1.5px solid rgba(201,169,106,0.3);
  border-radius: 1.25rem;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 2rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.membresia-daniela-foto {
  width: 160px; height: 160px;
  border-radius: 9999px;
  overflow: hidden;
  background: linear-gradient(135deg, #5a3a22 0%, #3a2410 100%);
  border: 3px solid #c9a96a;
  box-shadow: 0 0 0 6px rgba(201,169,106,0.15), 0 12px 30px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; color: #c9a96a;
}
.membresia-daniela-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.membresia-daniela-chip {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  background: rgba(200,32,31,0.55);
  border: 1px solid #c8201f;
  color: #f7f1e3;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.membresia-daniela h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
  color: #f7f1e3;
  margin: 0 0 0.85rem;
}
.membresia-daniela h3 em {
  color: #c9a96a;
  font-style: italic;
  font-weight: 500;
}
.membresia-daniela p {
  font-size: 1rem;
  line-height: 1.65;
  color: #f7f1e3;
  margin: 0;
}
.membresia-daniela strong { color: #e8c87a; font-weight: 700; }
@media (max-width: 700px) {
  .membresia-daniela {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.5rem;
  }
  .membresia-daniela-foto { margin: 0 auto; width: 130px; height: 130px; }
}

/* ============ TESTIMONIOS · prueba social ============ */
.membresia-testimonios {
  max-width: 1100px;
  margin: 0 auto 4rem;
  position: relative;
  z-index: 1;
}
.membresia-testimonios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .membresia-testimonios-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
}
.membresia-testimonio {
  position: relative;
  padding: 1.5rem 1.4rem 1.25rem;
  background:
    linear-gradient(150deg, rgba(247,241,227,0.08) 0%, rgba(247,241,227,0.03) 100%);
  border: 1.5px solid rgba(201,169,106,0.25);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
}
.membresia-testimonio-marca {
  font-size: 1.6rem;
  color: #c9a96a;
  opacity: 0.65;
  margin-bottom: -0.3rem;
}
.membresia-testimonio blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.55;
  color: #f7f1e3;
  font-style: italic;
}
.membresia-testimonio figcaption {
  font-size: 0.8rem;
  color: #c9a96a;
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(201,169,106,0.2);
  padding-top: 0.7rem;
  margin-top: auto;
}
.membresia-testimonio figcaption strong {
  color: #e8c87a;
  font-weight: 700;
}

/* ============ REGALO DE BIENVENIDA · reciprocidad ============ */
.membresia-regalo {
  max-width: 1000px;
  margin: 4rem auto;
  padding: 2.25rem 2rem;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(216,184,112,0.18) 0%, transparent 60%),
    linear-gradient(150deg, rgba(200,32,31,0.18) 0%, rgba(107,31,46,0.12) 100%);
  border: 2px solid #c9a96a;
  border-radius: 1.25rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 18px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.membresia-regalo-header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.membresia-regalo-icono {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #e8c87a 0%, #c9a96a 60%, #b08c4a 100%);
  color: #241405;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 6px 18px rgba(201,169,106,0.45);
}
.membresia-regalo-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e8c87a;
  margin-bottom: 0.5rem;
}
.membresia-regalo h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  color: #f7f1e3;
  margin: 0 0 0.7rem;
}
.membresia-regalo h3 em {
  color: #e8c87a;
  font-style: italic;
  font-weight: 500;
}
.membresia-regalo p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: #f7f1e3;
  margin: 0;
}
.membresia-regalo p strong { color: #e8c87a; }

.membresia-regalo-lista {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (max-width: 700px) {
  .membresia-regalo-lista { grid-template-columns: 1fr; }
  .membresia-regalo-header { flex-direction: column; gap: 1rem; }
}
.membresia-regalo-lista li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(201,169,106,0.18);
  border-radius: 0.6rem;
  color: #f7f1e3;
}
.membresia-regalo-lista li i {
  flex-shrink: 0;
  color: #e8c87a;
  font-size: 1rem;
  margin-top: 3px;
  width: 18px; text-align: center;
}
.membresia-regalo-lista li strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: #f7f1e3;
  margin-bottom: 0.15rem;
  line-height: 1.25;
}
.membresia-regalo-lista li span {
  font-size: 0.78rem;
  color: #c9a96a;
  line-height: 1.35;
}

.membresia-regalo-valor {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: rgba(216,184,112,0.12);
  border: 1px solid rgba(216,184,112,0.4);
  border-radius: 0.6rem;
  font-size: 0.88rem;
  color: #f7f1e3;
}
.membresia-regalo-valor i { color: #e8c87a; }
.membresia-regalo-valor strong { color: #e8c87a; font-weight: 800; }

.membresia-regalo-cta-wrap {
  text-align: center;
  margin-top: 1.25rem;
}
.membresia-regalo-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #e8c87a 0%, #c9a96a 60%, #b08c4a 100%);
  color: #241405;
  font-weight: 800;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: none;
  box-shadow: 0 8px 22px rgba(201,169,106,0.45);
  transition: transform 0.25s, box-shadow 0.25s;
}
.membresia-regalo-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(201,169,106,0.6);
}
.membresia-regalo-cta i { font-size: 1rem; }

/* ============ CTA NUEVA · precio + anclaje + garantía + WhatsApp ============ */
.membresia-cta-nueva {
  padding: 2.5rem 2.25rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200,32,31,0.20) 0%, transparent 60%),
    linear-gradient(155deg, rgba(58,36,16,0.95) 0%, rgba(36,20,5,0.95) 100%);
  border: 2px solid #c9a96a;
  border-radius: 1.5rem;
  box-shadow: 0 24px 56px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.membresia-cta-nueva::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,240,200,0.4) 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 60%, rgba(255,240,200,0.3) 50%, transparent 100%);
  pointer-events: none;
}

.membresia-precio-bloque {
  text-align: center;
  margin-bottom: 1.75rem;
  position: relative;
  z-index: 1;
}
.membresia-precio-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c9a96a;
  margin-bottom: 1rem;
}
.membresia-precio-comparacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto 1.25rem;
}
@media (max-width: 640px) {
  .membresia-precio-comparacion { grid-template-columns: 1fr; gap: 0.8rem; }
}
.membresia-precio-anclaje,
.membresia-precio-actual {
  padding: 1rem 1.2rem;
  border-radius: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  text-align: center;
}
.membresia-precio-anclaje {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(201,169,106,0.25);
}
.membresia-precio-actual {
  background: linear-gradient(135deg, rgba(216,184,112,0.20) 0%, rgba(216,184,112,0.10) 100%);
  border: 2px solid #e8c87a;
  box-shadow: 0 6px 22px rgba(216,184,112,0.25);
}
.membresia-precio-anclaje .precio-label,
.membresia-precio-actual .precio-label {
  font-size: 0.78rem;
  color: #c9a96a;
  line-height: 1.35;
}
.precio-numero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: #f7f1e3;
  line-height: 1;
}
.precio-numero small {
  font-size: 0.6em;
  font-weight: 500;
  color: #c9a96a;
}
.precio-tachado {
  text-decoration: line-through;
  text-decoration-color: rgba(200,32,31,0.7);
  text-decoration-thickness: 2px;
  color: #c9a96a;
  opacity: 0.85;
}
.membresia-precio-actual .precio-numero {
  color: #e8c87a;
  font-size: 2.4rem;
}

.membresia-precio-ancla-frase {
  font-size: 1.05rem;
  color: #f7f1e3;
  font-style: italic;
  margin: 0;
}
.membresia-precio-ancla-frase strong {
  color: #e8c87a;
  font-style: normal;
  font-weight: 700;
}

.membresia-garantia,
.membresia-fecha {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  background: rgba(0,0,0,0.3);
  border-left: 3px solid #c9a96a;
  border-radius: 0.4rem 0.7rem 0.7rem 0.4rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #f7f1e3;
  position: relative;
  z-index: 1;
}
.membresia-garantia i,
.membresia-fecha i {
  flex-shrink: 0;
  color: #c9a96a;
  font-size: 1.3rem;
  margin-top: 2px;
}
.membresia-garantia strong { color: #e8c87a; font-weight: 700; }

.membresia-cta-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1.15rem 1.8rem;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 9999px;
  box-shadow:
    0 0 0 4px rgba(37,211,102,0.18),
    0 12px 30px rgba(37,211,102,0.4),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.membresia-cta-boton:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 4px rgba(37,211,102,0.28),
    0 16px 38px rgba(37,211,102,0.55),
    inset 0 1px 0 rgba(255,255,255,0.25);
  background: linear-gradient(135deg, #2eea73 0%, #16a08e 100%);
}
.membresia-cta-boton i {
  font-size: 1.4rem;
}
.membresia-cta-microcopy {
  text-align: center;
  font-size: 0.78rem;
  color: #c9a96a;
  margin: 0.85rem 0 0;
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* Separador "El temario" */
.membresia-temario-intro {
  text-align: center;
  max-width: 720px;
  margin: 4rem auto 3rem;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}
.membresia-temario-intro .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e8c87a;
  margin-bottom: 1rem;
}
.membresia-temario-intro .eyebrow::before,
.membresia-temario-intro .eyebrow::after {
  content: '';
  width: 40px; height: 1.5px;
  background: #e8c87a;
  display: inline-block;
  opacity: 0.7;
}
.membresia-temario-intro h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  color: #f7f1e3;
  margin: 0 0 1rem;
}
.membresia-temario-intro h3 em { color: #e8c87a; font-style: normal; }
.membresia-temario-intro p {
  color: #f7f1e3;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

.btn-oro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  background: linear-gradient(135deg, #c9a96a 0%, #b08c4a 100%);
  color: #2a1808;
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 9999px;
  box-shadow: 0 6px 20px rgba(201, 169, 106, 0.4);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.btn-oro:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201, 169, 106, 0.55);
  background: linear-gradient(135deg, #d4b575 0%, #c9a96a 100%);
}

.nav-link-featured {
  color: #c8201f !important;
  font-weight: 700;
  position: relative;
}
.nav-link-featured::after {
  content: '✦';
  margin-left: 4px;
  color: #c9a96a;
  font-size: 0.75em;
}

/* ============ Imagen principal del artículo (banner tras el hero) ============ */
.articulo-hero-imagen {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
  position: relative;
  z-index: 2;
}
.articulo-hero-imagen figure {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow:
    0 30px 60px -15px rgba(58,36,16,0.35),
    0 12px 24px -8px rgba(58,36,16,0.25),
    inset 0 0 0 1px rgba(201,169,106,0.35);
  background: linear-gradient(180deg,#3a2410,#5a3a22);
}
.articulo-hero-imagen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.articulo-hero-imagen:hover img { transform: scale(1.02); }
.articulo-hero-imagen figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 1.5rem 1.25rem;
  background: linear-gradient(180deg, transparent 0%, rgba(58,36,16,0.85) 100%);
  color: #f7f1e3;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  text-align: center;
  letter-spacing: 0.01em;
}
.articulo-hero-imagen figcaption strong {
  font-style: normal;
  color: #c9a96a;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.7rem;
  display: block;
  margin-bottom: 0.3rem;
}
@media (max-width: 640px) {
  .articulo-hero-imagen { padding: 1.5rem 1rem 0; }
  .articulo-hero-imagen img { aspect-ratio: 4 / 3; }
  .articulo-hero-imagen figcaption { font-size: 0.85rem; padding: 1.5rem 1rem 1rem; }
}

/* =================== CARD-INCLUYE (Pack de sanación) =================== */
.card-incluye {
  background: #fdfaf3;
  border: 1px solid rgba(92, 58, 34, 0.08);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 4px 14px rgba(92, 58, 34, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.card-incluye::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(201, 169, 106, 0.08), transparent 60%);
  pointer-events: none;
}
.card-incluye:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(92, 58, 34, 0.12);
  border-color: rgba(201, 169, 106, 0.4);
}
.card-incluye-icono {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 0.9rem;
}

/* =================== CARD PRODUCTO (catálogos) =================== */
.card-producto {
  background: #fdfaf3;
  border: 1px solid rgba(92, 58, 34, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(92, 58, 34, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
}
.card-producto:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(92, 58, 34, 0.14);
}
.card-producto-img {
  position: relative;
  /* 2:3 = proporcion de portada de libro (1200x1800). Antes 4/3 recortaba
     el titulo por arriba y abajo. Fix 2026-05-30. */
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Seguridad: si una imagen no es exactamente 2:3, conservar la parte superior
   (donde va el titulo de la portada) al recortar. */
.card-producto-img img {
  object-position: top;
}
.card-producto-img > i {
  z-index: 1;
}
.card-producto-body {
  padding: 1.4rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* =================== BADGE GRATIS =================== */
.badge-gratis {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  background: linear-gradient(135deg, #c9a96a 0%, #b08c4a 100%);
  color: #3a2410;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(176, 140, 74, 0.35);
  border: 1px solid rgba(247, 241, 227, 0.6);
}

/* =================== SECCIÓN GRATIS DEL MES =================== */
.gratis-bg {
  background-attachment: fixed;
}
.card-gratis {
  position: relative;
  background: rgba(42, 24, 8, 0.55);
  border: 1px solid rgba(201, 169, 106, 0.45);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.card-gratis:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 169, 106, 0.7);
}
.card-gratis .badge-gratis {
  top: 1rem;
  right: 1rem;
  left: auto;
}
.card-gratis-img {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.card-gratis-body {
  padding: 1.5rem 1.4rem 1.75rem;
}

/* =================== BOTÓN ORO =================== */
.btn-oro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c9a96a 0%, #b08c4a 100%);
  color: #3a2410;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 6px 18px rgba(176, 140, 74, 0.3);
}
.btn-oro:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 10px 22px rgba(176, 140, 74, 0.4);
}

/* =================== FILTROS DE CATÁLOGO =================== */
.filtro-btn {
  background: transparent;
  color: #5a3a22;
  border: 1.5px solid rgba(92, 58, 34, 0.2);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.filtro-btn:hover {
  border-color: #c8201f;
  color: #c8201f;
}
.filtro-activo {
  background: #3a2410;
  color: #f7f1e3;
  border-color: #3a2410;
}
.filtro-activo:hover {
  background: #c8201f;
  border-color: #c8201f;
  color: #f7f1e3;
}

/* =================== LITE-YOUTUBE (miniatura clickable) =================== */
.yt-lite {
  position: relative;
  cursor: pointer;
  background: #3a2410;
  overflow: hidden;
}
.yt-lite img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.3s ease;
}
.yt-lite:hover img {
  transform: scale(1.05);
  filter: brightness(1.08);
}
.yt-lite-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 58px;
  border-radius: 14px;
  background: rgba(200, 32, 31, 0.92);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, background 0.25s ease;
}
.yt-lite:hover .yt-lite-play {
  background: #c8201f;
  transform: translate(-50%, -50%) scale(1.08);
}
.yt-lite iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-lite.is-playing {
  cursor: default;
}
.yt-lite.is-playing img,
.yt-lite.is-playing .yt-lite-play {
  display: none;
}

/* ============================================================
   COMPONENTES EDITORIALES (importados del Design System)
   ============================================================ */

/* === Wordmark con marca dual (Times Bold marrón + italic rojo brand) === */
.wordmark-dual {
  font-family: var(--font-logo);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--marron);
  line-height: 0.98;
  text-align: center;
}
.wordmark-dual .it {
  color: var(--rojo);
  font-style: italic;
  font-weight: 700;
  font-size: 0.86em;
  letter-spacing: 0;
  display: block;
  margin-left: 0;
  margin-top: 0.05em;
}
/* Variante para fondo oscuro (footer, dark sections):
   conserva la fuente Times del wordmark canónico, cambia solo paleta. */
.wordmark-dual.on-dark {
  color: var(--crema);
}
.wordmark-dual.on-dark .it {
  color: var(--oro);
}

/* === Display editorial Lora (con <em> italic rojo brand integrado) === */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--marron);
}
.display em {
  font-style: italic;
  color: var(--rojo);
  font-weight: 600;
}
.display-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--marron);
}
.display-h2 em {
  font-style: italic;
  color: var(--rojo);
  font-weight: 600;
}
/* Override defensivo: en wrappers oscuros (#newsletter, bg-marron) el color
   por defecto var(--marron) iguala al fondo y deja el h2 invisible.
   Solo "origen" (em rojo) se ve. Forzar crema sobre fondo marrón. */
#newsletter .display-h2,
.bg-marron .display-h2,
section.bg-marron .display-h2 {
  color: var(--crema) !important;
}

/* === Eyebrow editorial: línea dorada + label en mayúsculas === */
.eyebrow-editorial {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oro-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow-editorial .rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--oro);
}
.eyebrow-editorial .num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--oro-2);
  letter-spacing: 0;
}

/* === Halo cálido radial (para hero y secciones) — con respiración sutil === */
.halo-warm {
  background: radial-gradient(ellipse at center,
    rgba(184,137,62,0.18),
    transparent 65%);
  animation: halo-pulse 8s var(--ease-out) infinite;
}
@keyframes halo-pulse {
  0%, 100% { opacity: 1;     transform: scale(1); }
  50%      { opacity: 0.65;  transform: scale(1.08); }
}

/* === Constelación flotando lentamente (drift sutil) === */
@keyframes constelacion-drift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(8px, -6px); }
  50%      { transform: translate(-5px, 4px); }
  75%      { transform: translate(4px, -3px); }
}
.constelacion-bg-editorial {
  animation: constelacion-drift 30s ease-in-out infinite;
}

/* === Líneas SVG de la constelación con pulso de luz === */
@keyframes lineas-shimmer {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.constelacion-svg line {
  animation: lineas-shimmer 6s ease-in-out infinite;
}
.constelacion-svg line:nth-child(2) { animation-delay: 1s; }
.constelacion-svg line:nth-child(3) { animation-delay: 2s; }
.constelacion-svg line:nth-child(4) { animation-delay: 3s; }
.constelacion-svg line:nth-child(5) { animation-delay: 4s; }
.constelacion-svg line:nth-child(6) { animation-delay: 5s; }

/* === Respeto reduce-motion (accesibilidad) === */
@media (prefers-reduced-motion: reduce) {
  .halo-warm,
  .constelacion-bg-editorial,
  .constelacion-svg line {
    animation: none;
  }
}

/* === Constelación de fondo (puntos sutiles + líneas SVG conectoras) === */
.constelacion-bg-editorial {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(184,137,62,.50), transparent 60%),
    radial-gradient(1.1px 1.1px at 24% 38%, rgba(140,106,31,.40), transparent 60%),
    radial-gradient(1.6px 1.6px at 38% 22%, rgba(184,137,62,.50), transparent 60%),
    radial-gradient(1.0px 1.0px at 50% 48%, rgba(140,106,31,.36), transparent 60%),
    radial-gradient(1.4px 1.4px at 64% 28%, rgba(184,137,62,.50), transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 52%, rgba(140,106,31,.40), transparent 60%),
    radial-gradient(1.6px 1.6px at 86% 22%, rgba(184,137,62,.50), transparent 60%),
    radial-gradient(1.0px 1.0px at 18% 70%, rgba(140,106,31,.36), transparent 60%),
    radial-gradient(1.4px 1.4px at 32% 82%, rgba(184,137,62,.50), transparent 60%),
    radial-gradient(1.2px 1.2px at 56% 88%, rgba(140,106,31,.40), transparent 60%),
    radial-gradient(1.6px 1.6px at 72% 76%, rgba(184,137,62,.50), transparent 60%),
    radial-gradient(1.0px 1.0px at 90% 86%, rgba(140,106,31,.36), transparent 60%);
  opacity: 0.42;
}

/* === Drop cap (primera letra grande rojo brand, para bio Daniela) === */
.dropcap::first-letter {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--rojo);
  -webkit-initial-letter: 3 3;
  initial-letter: 3 3;
  margin-right: 0.7rem;
  /* Fallback para browsers sin initial-letter */
  float: left;
  font-size: 3.6em;
  line-height: 1;
  padding-top: 0.05em;
  padding-right: 0.08em;
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .dropcap::first-letter {
    float: none;
    font-size: inherit;
    padding: 0;
    margin-right: 0.7rem;
  }
}

/* === Quote mark estilizado (comilla decorativa dorada arriba del quote) === */
.quote-mark::before {
  content: "\201C";  /* comilla curva izquierda */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 5rem;
  line-height: 0.55;
  color: var(--oro);
  display: block;
  margin-bottom: 0.35rem;
}

/* === Gold rule (filete dorado vertical para transiciones de sección) === */
.gold-rule {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom,
    transparent,
    var(--oro),
    transparent);
  margin: 0 auto;
}

/* === Botón rojo brand premium (gradiente + sombra cálida) === */
.btn-vino {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.8rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--rojo), var(--rojo-2));
  color: var(--crema);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  box-shadow: 0 14px 36px -14px rgba(168,32,42,0.55),
              inset 0 1px 0 rgba(255,255,255,0.10);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
  text-decoration: none;
}
.btn-vino:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px -14px rgba(168,32,42,0.65);
  color: var(--crema);
}

/* === Botón outline marrón (secundario, sobrio) === */
.btn-outline-marron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.8rem;
  border-radius: 9999px;
  border: 1.4px solid rgba(58,36,16,0.35);
  color: var(--marron);
  background: rgba(247,241,227,0.4);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
  text-decoration: none;
}
.btn-outline-marron:hover {
  background: var(--marron);
  color: var(--crema);
  border-color: var(--marron);
}

/* === Cards con hover lift (servicios + productos) === */
.card-lift {
  transition: transform 0.4s var(--ease-out),
              box-shadow 0.4s,
              border-color 0.4s;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px -22px rgba(58,36,16,0.32);
  border-color: rgba(184,137,62,0.4);
}

/* === Portrait con halo y borde crema (para foto de Daniela) === */
.portrait-frame {
  position: relative;
  border: 6px solid var(--crema);
  box-shadow: 0 30px 60px -20px rgba(58,36,16,0.42);
  border-radius: 0.9rem;
  overflow: hidden;
}
.portrait-halo {
  position: absolute;
  inset: -1.25rem;
  background: linear-gradient(135deg,
    rgba(184,137,62,0.45),
    rgba(107,31,46,0.18),
    rgba(184,137,62,0.28));
  border-radius: 2rem;
  filter: blur(36px);
  z-index: -1;
}

/* === Side Index lateral (rail de navegación flotante en lg+) === */
.side-index {
  position: fixed;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: none;  /* oculto en mobile/tablet */
}
@media (min-width: 1280px) {
  .side-index { display: block; }
}
.side-index a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(58,36,16,0.4);
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}
.side-index a .dot {
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.25s var(--ease-out), background 0.25s;
}
.side-index a:hover,
.side-index a.active {
  color: var(--rojo);
}
.side-index a.active .dot,
.side-index a:hover .dot {
  width: 32px;
  background: var(--oro);
}

/* ============================================================
   FIX BLINDADO — Logo del NAVBAR (móvil + escritorio)
   El logo-transparente.png en algunos casos cargaba antes que
   las utilities de Tailwind (FOUC) o sin cache fresca, dejando
   ver la imagen a tamaño nativo (~500x500) y rompiendo el layout
   en móvil. Estas reglas con prioridad alta garantizan que el
   logo nunca exceda 48px en mobile y 56px en md+, sin importar
   el orden de carga del CSS.
   ============================================================ */
/* Logo del navbar — selector cubre tanto <a><img> como <a><picture><img>.
   flex-shrink:0 en el <picture> evita que el flex lo aplaste a width:0
   cuando el nav no entra en pantallas estrechas (caso 768-1100px). */
#navbar a > img,
#navbar a > picture,
#navbar a > picture > img,
header#navbar a > img:first-child {
  width: 3rem !important;
  height: 3rem !important;
  max-width: 3rem !important;
  max-height: 3rem !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
@media (min-width: 768px) {
  #navbar a > img,
  #navbar a > picture,
  #navbar a > picture > img,
  header#navbar a > img:first-child {
    width: 3.5rem !important;
    height: 3.5rem !important;
    max-width: 3.5rem !important;
    max-height: 3.5rem !important;
  }
}
/* Wordmark cap: forzar tamaño manejable en navbar (sobreescribe text-4xl
   inline que aparece en 561 páginas y rompe el layout entre 768-1100px). */
#navbar .wordmark-dual {
  font-size: 1.6rem !important;
  flex-shrink: 0;
}
#navbar .wordmark-dual + div {
  white-space: nowrap;
  margin-top: 0.7rem !important;
  text-align: center;
}
/* MOBILE: navbar compacto y balanceado.
   El wordmark dual en mobile va en UNA SOLA LINEA — el .it inline
   en lugar de block. Logo proporcional al texto. */
@media (max-width: 768px) {
  #navbar a > img:first-child,
  header#navbar a > img:first-child {
    width: 2.4rem !important;
    height: 2.4rem !important;
    max-width: 2.4rem !important;
    max-height: 2.4rem !important;
  }
  #navbar .wordmark-dual {
    font-size: 1.08rem !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }
  #navbar .wordmark-dual .it {
    display: inline !important;
    font-size: 0.9em !important;
    margin-left: 0.22em !important;
    margin-top: 0 !important;
  }
  #navbar .wordmark-dual + div { display: none !important; }
}
@media (max-width: 380px) {
  #navbar .wordmark-dual { font-size: 0.95rem !important; }
  #navbar a > img:first-child,
  header#navbar a > img:first-child {
    width: 2.1rem !important;
    height: 2.1rem !important;
  }
}

/* ============================================================
   PROSE-ARTICULO — Tipografía editorial Lora dentro de páginas
   de producto (la-herida-materna, meditaciones, plantillas).
   Antes esta clase estaba referenciada en el HTML pero sin
   definir en CSS, así que el bloque "¿Para quién es este libro?"
   caía al font-sans (Inter Tight) del body, rompiendo la
   coherencia tipográfica con el resto de la página.
   ============================================================ */
.prose-articulo {
  font-family: var(--font-serif);
  color: var(--marron);
}
.prose-articulo h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--marron);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.prose-articulo h2:first-child { margin-top: 0; }
.prose-articulo h2 em {
  font-style: italic;
  color: var(--rojo);
  font-weight: 700;
}
.prose-articulo h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--marron);
  margin-top: 1.8rem;
  margin-bottom: 0.7rem;
}
.prose-articulo p {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--marron-2);
  margin-bottom: 1.15rem;
}
.prose-articulo ul {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 1.5rem;
}
.prose-articulo ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.65rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--marron-2);
}
.prose-articulo ul li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: var(--oro);
  font-size: 0.95rem;
}
.prose-articulo blockquote {
  border-left: 3px solid var(--oro);
  padding: 0.85rem 1.25rem;
  margin: 1.8rem 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--marron);
  background: rgba(247, 241, 227, 0.55);
  border-radius: 0 8px 8px 0;
}
/* IMPORTANTE: solo aplicar el estilo de link a los <a> que estén
   DENTRO de párrafos / items / blockquotes — NUNCA a <a class="btn-*">,
   porque les rompía el color del texto y les pintaba un underline
   encima. Eso era lo que dejaba ilegible el botón "Descargar el ebook". */
.prose-articulo p a,
.prose-articulo li a,
.prose-articulo blockquote a {
  color: var(--rojo);
  text-decoration: underline;
  text-decoration-color: rgba(200, 32, 31, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.prose-articulo p a:hover,
.prose-articulo li a:hover,
.prose-articulo blockquote a:hover {
  text-decoration-color: var(--rojo);
}
/* Defensa explícita: si por accidente un .btn-* cae dentro del prose,
   conserva su color original y nunca recibe underline. */
.prose-articulo a[class*="btn-"] {
  color: inherit;
  text-decoration: none !important;
}
/* En móvil hay una regla global @media h2 { font-size:2.25rem !important }
   que sobrescribía estos h2/h3 a 36px, rompiendo el layout en pantallas
   chicas. Se anula con !important + un poco de balance de palabras para
   que "¿Por qué gratis?" no quede partido raro. */
@media (max-width: 768px) {
  .prose-articulo h2 {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
    text-wrap: balance;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .prose-articulo h3 {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
  }
  .prose-articulo p,
  .prose-articulo ul li {
    font-size: 1rem;
    line-height: 1.65;
  }
  .prose-articulo blockquote {
    font-size: 1rem;
    padding: 0.7rem 1rem;
    margin: 1.4rem 0;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Mejoras de contraste para audiencia con visión reducida
   - Sube opacidades bajas (70-85%) a niveles más legibles (92-96%)
   - Aplica solo a TEXTO, no a imágenes ni overlays decorativos
   ════════════════════════════════════════════════════════════════════ */
.text-crema\/60  { color: rgba(247, 241, 227, 0.88) !important; }
.text-crema\/65  { color: rgba(247, 241, 227, 0.90) !important; }
.text-crema\/70  { color: rgba(247, 241, 227, 0.92) !important; }
.text-crema\/75  { color: rgba(247, 241, 227, 0.93) !important; }
.text-crema\/80  { color: rgba(247, 241, 227, 0.94) !important; }
.text-crema\/85  { color: rgba(247, 241, 227, 0.95) !important; }
.text-crema\/90  { color: rgba(247, 241, 227, 0.96) !important; }
.text-marron\/40 { color: rgba(58, 36, 16, 0.65) !important; }
.text-marron\/50 { color: rgba(58, 36, 16, 0.72) !important; }
.text-marron\/60 { color: rgba(58, 36, 16, 0.80) !important; }
.text-marron\/70 { color: rgba(58, 36, 16, 0.85) !important; }

/* Tamaño de texto secundario en footer (text-sm Tailwind = 0.875rem por defecto) */
footer .text-sm, footer .text-xs {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* CTAs aside (fuentes-articulo) — letra cómoda */
.fuentes-articulo li,
.fuentes-articulo p {
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Glosario: definiciones — más cómodas */
.evidencia-glosario p,
.evidencia-glosario li {
  font-size: 1.08rem;
  line-height: 1.65;
}
.ejemplo-clinico p {
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Cards "card-articulo-extracto" mobile: sin colapsar mucho */
@media (max-width: 768px) {
  .card-articulo-extracto { font-size: 1rem; line-height: 1.5; }
  .card-articulo-titulo { font-size: 1.18rem; }
  .card-articulo-cat { font-size: 0.78rem; }
}


/* ============================================================================
   CAPA DE LEGIBILIDAD — 3-sep-2026
   jimy: «ese café y los contrastes de las letras».
   Medido con la norma de contraste (WCAG 2.1) sobre los dos cremas de la marca:
       verde   #8ab560  ->  2.10 : NO se lee
       oro-2   #b08c4a  ->  2.78 : NO se lee
       marrón-3 #8a6842 ->  4.50 sobre crema, pero 3.83 sobre crema tostado: falla en texto pequeño
       (el café oscuro #5a3a22 da 9.04 y el rojo #c8201f 5.06: esos SÍ se leen, no se tocan)
   Se oscurece SOLO el color del TEXTO, manteniendo el mismo tono de la marca.
   Los fondos, el logo, los filetes y los gráficos NO cambian.
   ============================================================================ */
:root{
  --verde-texto:   #5a7d38;   /* antes #8ab560 · contraste 2.10 -> 4.21 */
  --oro-texto:     #8c6a1f;   /* antes #b08c4a · contraste 2.78 -> 4.44 */
  --marron-3-texto:#6b4f28;   /* antes #8a6842 · contraste 4.50 -> 6.72 */
}
.text-verde{ color: var(--verde-texto) !important; }
.text-marron-3{ color: var(--marron-3-texto) !important; }
.text-oro-2{ color: var(--oro-texto) !important; }
/* 🩸 Aquí había una regla que teñía TODAS las etiquetas de sección (.eyebrow-editorial) de oro oscuro.
   Se retiró al medir: muchas de esas etiquetas van sobre fondo MARRÓN, y ahí el oro oscuro se lee PEOR
   que el claro. Una regla amplia de color solo vale si se comprueba sobre qué fondos cae. */
a.link-oro, .link-oro{ color: var(--oro-texto); }

/* Etiquetas de sección sobre FONDO OSCURO: van en oro CLARO, no en oro oscuro.
   Medido y mirado: sobre el marrón de la marca, «BIBLIOTECA · PARA IR MÁS PROFUNDO» y
   «PARA EMPEZAR · SIN COSTO» quedaban casi ilegibles (contraste 1.9-2.0). */
.bg-marron .eyebrow-editorial, .bg-marron .eyebrow-editorial span,
.gratis-bg .eyebrow-editorial, .gratis-bg .eyebrow-editorial span,
.membresia-bg .eyebrow-editorial, .membresia-bg .eyebrow-editorial span,
.bg-marron .text-oro-2, .gratis-bg .text-oro-2, .membresia-bg .text-oro-2,
.bg-marron .text-marron-3, .gratis-bg .text-marron-3{
  color: #e8c87a !important;   /* oro claro de la marca: sobre marrón da 8.4 de contraste */
}

/* ============================================================================
   PORTADA MÁS CORTA — 3-sep-2026 (jimy: «ok hazlo»)
   Medido: la portada entera medía 59.928 px (unas 71 pantallas de celular) y la sección de
   artículos sola, 13.585 px con 52 tarjetas. Aquí se muestran unas pocas y el botón
   «Ver biblioteca completa» lleva al resto. No se borra nada: solo se deja de mostrar.
   ============================================================================ */
#articulos .grid > .card-articulo:nth-child(n+4){ display: none; }
@media (max-width: 767px){
  #articulos .grid > .card-articulo:nth-child(n+3){ display: none; }
}

/* Temario de la membresía plegado — 3-sep-2026 (jimy: «ok sí»)
   Medido: el temario de los 12 meses ocupaba 2.812 px dentro de una sección de 10.833.
   Se muestran los 4 primeros; los otros 8 se abren con «Ver el año completo».
   Sin JavaScript: un interruptor oculto + estilos (la web bloquea los guiones incrustados). */
.ver-anio-check{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
/* Ojo: assets/css/_membresia_claro.css se carga DESPUES y trae
   «#membresia details.membresia-mes{display:block !important}». Por eso estas dos reglas
   necesitan la misma fuerza; si no, no ocultan nada (comprobado en el navegador). */
body:not(.pagina-membresia) #membresia .membresia-timeline > details.membresia-mes:nth-of-type(n+5){ display:none !important; }
/* CURADO 16-sep-2026 (jimy: «faltan meses»). La regla de DESTAPAR pesaba menos que la de
   TAPAR (0,2,2 contra 0,4,4), asi que el boton se pulsaba, desaparecia... y los 8 meses
   seguian escondidos. Ahora lleva el mismo camino entero y gana. Medido en el navegador
   sobre la web viva: 4 meses visibles -> 12. */
body:not(.pagina-membresia) #membresia .membresia-timeline > .ver-anio-check:checked ~ details.membresia-mes:nth-of-type(n+5){ display:block !important; }
/* En /membresia/ los 12 ya se ven siempre: alli el boton no tendria nada que abrir. */
body.pagina-membresia .ver-anio-label{ display:none !important; }
.ver-anio-label{
  display:flex; align-items:center; justify-content:center; gap:.6rem; cursor:pointer;
  margin:1.6rem auto 0; padding:.85rem 1.8rem; width:fit-content;
  border:1px solid rgba(201,169,106,.55); border-radius:999px;
  background:rgba(247,241,227,.06); color:#e8c87a;
  font-family:'Inter Tight',system-ui,sans-serif; font-weight:600; font-size:1rem; letter-spacing:.02em;
  transition:background .25s ease, border-color .25s ease;
}
.ver-anio-label:hover{ background:rgba(247,241,227,.12); border-color:#e8c87a; }
.ver-anio-check:checked ~ .ver-anio-label{ display:none; }

/* ============================================================================
   PORTADA EN EL CELULAR — 3-sep-2026 (jimy: «la mayoría ingresan desde el cel»)
   Medido en un celular de 390x844: la portada eran 78.018 px = 92 pantallas.
   En el celular las tarjetas se apilan en una columna y todo se estira, así que aquí
   se muestran MENOS y cada sección conserva su botón de «ver todo».
   No se borra nada: son reglas de este bloque, se quitan y vuelve como estaba.
   ============================================================================ */
@media (max-width: 767px){
  /* artículos: de 11 tarjetas a 2 por grupo ya estaba; ahora 1 */
  #articulos .grid > .card-articulo:nth-child(n+3){ display:none !important; }
  /* servicios: 13 tarjetas apiladas -> 4 */
  #servicios .card-servicio:nth-child(n+5){ display:none !important; }
  /* recursos gratis: 8 -> 3 */
  #gratis .card-gratis:nth-child(n+4){ display:none !important; }
  /* meditaciones: 4 -> 2 */
  #meditaciones .card-producto:nth-child(n+3){ display:none !important; }
  /* biblioteca: 3 -> 2 */
  #biblioteca .card-producto:nth-child(n+3){ display:none !important; }
  /* videos del canal: 5 -> 3 */
  #canal .yt-lite:nth-child(n+4){ display:none !important; }
  /* láminas de la membresía: 4 -> 2 (las otras dos son adorno) */
  #membresia .circulo-lamina:nth-of-type(n+3){ display:none !important; }
}
@media (max-width: 767px){
  /* de las 4 láminas de la membresía, en el celular quedan 2 (las otras dos son acompañamiento) */
  #membresia figure.circulo-lamina:has(img[src*="circulo-foto-encuentro"]),
  #membresia figure.circulo-lamina:has(img[src*="circulo-foto-cuaderno"]){ display:none !important; }
  /* los 10 packs de regalo: 4 en el celular */
  #membresia .membresia-regalo-item:nth-child(n+5),
  #membresia .membresia-regalo-lista > *:nth-child(n+5){ display:none !important; }
  /* testimonios de la membresía: 2 */
  #membresia .membresia-testimonio:nth-child(n+3){ display:none !important; }
  /* tests y herramientas: 4 */
  #tests-herramientas .group:nth-child(n+5){ display:none !important; }
}
@media (max-width: 767px){
  /* AIRE: en el celular cada sección gastaba hasta 96 px arriba y 96 abajo. Con 27 secciones son
     más de 5.000 px de espacio vacío. Se reduce a la mitad: sigue respirando y se acorta el viaje. */
  main section.py-24, main section.py-20{ padding-top:2.75rem !important; padding-bottom:2.75rem !important; }
  main section > div.pt-16{ padding-top:2.25rem !important; }
  main section > div.pb-24{ padding-bottom:2.5rem !important; }
  .tl-seccion{ padding-top:2.25rem !important; padding-bottom:2.25rem !important; }
  /* artículos: en el celular, solo los dos primeros grupos */
  #articulos .grid:nth-of-type(n+3){ display:none !important; }
}

/* ============================================================================
   MEMBRESÍA RESUMIDA EN EL CELULAR — 6-sep-2026
   jimy: «la mayoría ingresan desde el cel» + «trabajo con Gemini y Gemelo».
   Los dos coinciden: la membresía se come 13 de las 71 pantallas del celular y YA TIENE
   su propia página. En el celular se deja la promesa, el precio y el botón; lo demás
   (la historia, los testimonios, el temario del año, los 10 packs) vive en su página.
   En computador NO cambia nada. Reversible: se quita este bloque y vuelve entera.
   ============================================================================ */
@media (max-width: 767px){
  body:not(.pagina-membresia) #membresia .membresia-historia,
  body:not(.pagina-membresia) #membresia .membresia-testimonios,
  body:not(.pagina-membresia) #membresia .membresia-timeline,
  body:not(.pagina-membresia) #membresia .ver-anio-label,
  body:not(.pagina-membresia) #membresia .membresia-regalo,
  body:not(.pagina-membresia) #membresia .membresia-daniela,
  body:not(.pagina-membresia) #membresia figure.circulo-lamina{ display:none !important; }
  /* el enlace a la página del círculo, para que nada quede escondido sin salida */
  #membresia .membresia-resumen-mas{ display:block !important; }
}
.membresia-resumen-mas{ display:none; text-align:center; margin:1.1rem auto 0; padding:.9rem 1.4rem;
  color:#e8c87a; font-family:'Inter Tight',system-ui,sans-serif; font-weight:600; text-decoration:none;
  border:1px solid rgba(201,169,106,.5); border-radius:999px; width:fit-content; }
.membresia-resumen-mas:hover{ background:rgba(247,241,227,.1); }

/* ============================================================================
   PORTADA EN EL CELULAR — SEGUNDA PASADA · 6-sep-2026
   jimy: «sigue bajando al celular a ver».
   Medido antes de tocar nada (celular 390x844): la portada eran 53.798 px = 63,7 pantallas.

   La idea de fondo NO es esconder más, es cambiar la FORMA de las fichas.
   En el celular una ficha vertical (foto arriba, texto abajo) gasta media pantalla ella sola;
   la misma ficha en fila (foto pequeña a la izquierda, texto a la derecha) gasta un tercio
   y NO se pierde ni una foto ni una palabra. Es la forma de siempre en las tiendas del celular.

   En computador NO cambia absolutamente nada: todo va dentro de «max-width: 767px».
   Reversible: se borra este bloque y la portada vuelve exactamente como estaba.
   ============================================================================ */
@media (max-width: 767px){

  /* ---- 1. FICHAS DE CATÁLOGO (ebooks, biblioteca, meditaciones) ----
     Eran 730 px cada una, casi una pantalla por libro. La portada del libro se sigue
     viendo entera (object-contain), solo que a la izquierda. */
  .card-producto{ flex-direction: row; align-items: stretch; }
  .card-producto-img{ flex: 0 0 124px; width: 124px; aspect-ratio: auto; align-self: stretch; }
  .card-producto-body{ padding: 1rem 1.1rem 1.15rem; }
  .card-producto-body h3{ font-size: 1.12rem; line-height: 1.25; }
  .card-producto .badge-gratis{ font-size: .62rem; padding: .2rem .45rem; top: .45rem; left: .45rem; }

  /* ---- 2. FICHAS DE ARTÍCULO ---- */
  .card-articulo{ flex-direction: row; align-items: stretch; }
  .card-articulo-img{ flex: 0 0 128px; width: 128px; aspect-ratio: auto; align-self: stretch;
                      padding: .5rem .55rem; }
  .card-articulo-icono{ display: none; }           /* el icono grande no cabe en la miniatura */
  .card-articulo-cat{ font-size: .6rem; padding: .2rem .45rem; letter-spacing: .04em; }
  .card-articulo-body{ padding: .95rem 1.05rem 1rem; }
  .card-articulo-titulo{ font-size: 1.05rem; }
  .card-articulo-extracto{ font-size: .9rem; line-height: 1.42;
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

  /* ---- 3. FICHAS DE RECURSO GRATIS ---- */
  .card-gratis{ display: flex; flex-direction: row; align-items: stretch; }
  .card-gratis-img{ flex: 0 0 128px; width: 128px; aspect-ratio: auto; align-self: stretch; }
  .card-gratis-body{ padding: 1rem 1.05rem 1.15rem; }
  .card-gratis-body h3{ font-size: 1.1rem; line-height: 1.25; }

  /* ---- 4. FICHAS DE SERVICIO ----
     Aquí la foto y el texto son hermanos sueltos (foto, título, párrafo, enlace),
     así que la fila se arma con una rejilla de dos columnas y la foto ocupa las tres filas. */
  .card-servicio{ display: grid; grid-template-columns: 114px 1fr; column-gap: .95rem;
                  padding: 1rem; align-items: start; }
  /* La foto ocupa TODAS las filas de la ficha, sean las que sean. Historia de este renglon:
       1) «span 3» -> si una ficha llegaba a tener un texto de mas, ese texto caia bajo la foto
          (lo aviso el Revisor de Codigo, 6-sep).
       2) «1 / -1»  -> PEOR: el «-1» apunta a la ultima raya de la rejilla DECLARADA, y aqui no
          hay filas declaradas, asi que la foto se quedo en una sola fila y TODO el texto cayo
          debajo, en una columna de cuatro palabras. Se vio en la captura, no en el codigo.
       3) «span 99» -> la foto abarca cuantas filas haya. Comprobado MIRANDO la pantalla. */
  .card-servicio > :first-child{ grid-row: 1 / span 99; margin: 0; align-self: stretch;
                                 border-radius: .8rem; overflow: hidden; }
  .card-servicio-foto img{ height: 100% !important; min-height: 168px; }
  .card-servicio h3{ font-size: 1.05rem; line-height: 1.25; margin-bottom: .35rem; }
  .card-servicio p{ font-size: .88rem; line-height: 1.45; margin-bottom: .55rem;
      display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

  /* Al ocupar un tercio, caben más sin alargar la página: servicios 4 -> 8, gratis 3 -> 5 */
  #servicios .card-servicio:nth-child(n+5){ display: block !important; }
  #servicios .card-servicio:nth-child(n+9){ display: none !important; }
  #gratis .card-gratis:nth-child(n+4){ display: flex !important; }
  #gratis .card-gratis:nth-child(n+6){ display: none !important; }
}

/* ---------- SEGUNDA PASADA · lo que sobraba o se repetía en el celular ---------- */
@media (max-width: 767px){

  /* 5. ARTÍCULOS · el aparato científico.
     Sus tarjetas de estudios ya estaban ocultas en el celular y quedaban CINCO títulos
     anunciando cosas que no aparecían («Ciencia del trauma transgeneracional», «Eventos
     históricos comprobables»...). Se pliega entero; el botón «Ver biblioteca completa de
     artículos», que va justo debajo, lleva a todos ellos. */
  #articulos .ciencia-portada{ display: none !important; }

  /* 6. TESTS Y HERRAMIENTAS · repetía «El Campo» y el test de las 5 heridas, que ya salen
     arriba en «Pruébalo ahora mismo» (pantalla 5) con su botón a las 10+ herramientas.
     Esta copia estaba en la pantalla 45: nadie llegaba, y alargaba el viaje. */
  #tests-herramientas{ display: none !important; }

  /* 7. HELBER y DANIELA · se ven 4 herramientas y 8 áreas de trabajo; debajo queda el enlace
     «Ver los 20 procesos que acompaña», que lleva a la lista entera. */
  #helber .herramienta-helber:nth-child(n+5){ display: none !important; }
  #daniela .herramienta-helber:nth-child(n+4){ display: none !important; }
  #helber .area-pill:nth-child(n+9){ display: none !important; }

  /* 8. MEMBRESÍA · la fecha de inscripción ya la dice la píldora fija de arriba, y el temario
     estaba presentando «12 meses, 12 talleres» que en el celular no se muestran (viven en
     /membresia/, adonde lleva el enlace «Ver todo lo que incluye el círculo»). */
  body:not(.pagina-membresia) #membresia .membresia-fecha,
  body:not(.pagina-membresia) #membresia .membresia-temario-intro{ display: none !important; }
  body:not(.pagina-membresia) #membresia .membresia-beneficio:nth-child(n+5){ display: none !important; }

  /* 9. CANAL · 3 videos en vez de 5. (La regla vieja apuntaba a «.yt-lite» y no acertaba:
     los hijos de esa rejilla son <div> sueltos.) */
  #canal .grid > div:nth-child(n+4){ display: none !important; }

  /* 10. TESTIMONIOS · dos de cada clase; el resto vive en las páginas de cada servicio. */
  #testimonios .grid > figure:nth-child(n+3),
  #testimonios-procesos .grid > figure:nth-child(n+3){ display: none !important; }

  /* 11. EL CÍRCULO (entrada de miembros) · es una PUERTA, no un anuncio: basta el título,
     la explicación de la llave y el botón. Lo que hay dentro ya se cuenta en la membresía. */
  #circulo-miembros .grid{ display: none !important; }

  /* 12. Textos de ficha a su medida: sin esto, una descripción larga estira la fila entera. */
  .card-gratis-body p{ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
                       overflow: hidden; font-size: .88rem; line-height: 1.45; }
  .card-servicio p{ -webkit-line-clamp: 4; }
  .card-producto-body p{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                         overflow: hidden; font-size: .88rem; line-height: 1.45; }

  /* 13. Recursos gratis: 4 fichas (con la forma nueva ocupan lo que antes ocupaban 2). */
  #gratis .card-gratis:nth-child(n+5){ display: none !important; }
}

/* ---------- ARREGLOS DE LA FICHA EN FILA (mirado en pantalla, 6-sep-2026) ----------
   Al mirar las capturas del celular aparecieron tres fallos de verdad:
     · el texto se salía por la derecha y quedaba CORTADO («BIODESCODIFICACIÓI», botones a medias).
       Causa: una casilla en fila no encoge por debajo de su contenido si no se le da permiso.
     · la insignia «Gratis» caía encima del texto en vez de sobre la foto.
     · las fichas 5 en adelante de Servicios seguían verticales (una regla vieja les ponía
       «display:block» y eso deshacía la fila).
   ------------------------------------------------------------------------------------ */
@media (max-width: 767px){
  /* permiso para encoger: sin esto el navegador nunca parte el texto y lo desborda */
  .card-producto-body, .card-articulo-body, .card-gratis-body{ min-width: 0; }
  .card-producto-body > *, .card-articulo-body > *, .card-gratis-body > *{ min-width: 0; }
  .card-servicio{ grid-template-columns: 114px minmax(0, 1fr); }
  .card-servicio h3, .card-producto-body h3, .card-gratis-body h3, .card-articulo-titulo{
      overflow-wrap: anywhere; hyphens: auto; }

  /* precio + botón: en una columna estrecha se ponen uno debajo del otro */
  .card-producto-body .flex, .card-gratis-body .flex{ flex-wrap: wrap; gap: .5rem; }
  .card-producto-body .btn-rojo, .card-producto-body .btn-outline-marron,
  .card-gratis-body .btn-oro, .card-gratis-body .btn-rojo{ font-size: .82rem; padding: .6rem .9rem; }

  /* la insignia, sobre la foto */
  .card-gratis .badge-gratis{ top: .5rem; left: .5rem; right: auto;
                              font-size: .58rem; padding: .18rem .42rem; letter-spacing: .08em; }
  /* el rótulo de categoría no cabe en una miniatura de 128 px y salía partido */
  .card-articulo-cat{ display: none; }

  /* la portada del libro manda su propio alto: así no queda un hueco crema debajo */
  .card-producto-img{ align-self: flex-start; aspect-ratio: 2 / 3; }

  /* Servicios: las fichas 5-8 vuelven a la fila (antes «display:block» las devolvía a columna) */
  #servicios .card-servicio:nth-child(n+5){ display: grid !important; }
  #servicios .card-servicio:nth-child(n+9){ display: none !important; }
}

/* ---------- AJUSTE FINO DE LA FICHA EN FILA (segunda mirada, 6-sep-2026) ----------
   Al mirar otra vez: «La He-rida Materna» partida a la mitad (culpa de permitir el corte en
   cualquier letra), la columna de texto demasiado estrecha (3 palabras por renglón) y el precio
   con el botón en dos pisos. Se estrecha la foto, se ensancha el texto y se corta solo cuando
   una palabra de verdad no cabe. */
@media (max-width: 767px){
  .card-producto-img{ flex: 0 0 106px; width: 106px; }
  .card-articulo-img,
  .card-gratis-img{ flex: 0 0 112px; width: 112px; }
  .card-servicio{ grid-template-columns: 100px minmax(0, 1fr); column-gap: .8rem; }

  .card-producto-body{ padding: .85rem .9rem .95rem; }
  .card-articulo-body{ padding: .8rem .9rem .85rem; }
  .card-gratis-body{ padding: .85rem .9rem .95rem; }

  /* cortar SOLO si la palabra no cabe (antes se partía «He-rida» sin necesidad) */
  .card-servicio h3, .card-producto-body h3, .card-gratis-body h3, .card-articulo-titulo{
      overflow-wrap: break-word; hyphens: manual; }

  /* el rótulo de arriba (EBOOK · HERIDA MATERNA) ocupaba tres renglones */
  .card-producto-body > div:first-child, .card-gratis-body > div:first-child{
      font-size: .6rem; letter-spacing: .1em; line-height: 1.3; margin-bottom: .25rem; }

  /* precio y botón, en la misma línea */
  .card-producto-body .flex, .card-gratis-body .flex{ flex-wrap: nowrap; gap: .45rem; align-items: center; }
  .card-producto-body .flex > *{ flex: 0 1 auto; }

  /* la insignia, siempre encima de la foto y sin invadir el texto */
  .badge-gratis{ max-width: 96px; white-space: normal; text-align: center; line-height: 1.15;
                 font-size: .54rem; padding: .2rem .38rem; }
  .card-gratis .badge-gratis{ top: .45rem; left: .45rem; right: auto; }
}

/* Los botones de las fichas de catálogo se salían de la tarjeta entre 7 y 41 px (medido).
   Se achican y, si aun así no caben, bajan a su propio renglón en vez de cortarse. */
@media (max-width: 767px){
  .card-producto-body .flex{ flex-wrap: wrap; row-gap: .5rem; }
  .card-producto-body .btn-rojo, .card-producto-body .btn-marron,
  .card-producto-body .btn-outline-marron, .card-producto-body .btn-oro{
      font-size: .7rem; padding: .5rem .75rem; letter-spacing: .03em; white-space: nowrap; }
  .card-producto-body .flex > span, .card-producto-body .flex > div{ font-size: 1rem; }
}

/* ---------- SE DESHACE EL ACHIQUE DE LETRA (6-sep-2026) ----------
   Al revisar contra la LEY DE LETRA GRANDE de jimy (21-ago: «en pantalla, 19,5 px de cuerpo»,
   dicha pensando en la gente mayor que lo lee), vi que para meter el texto al lado de la foto
   yo había bajado la letra de lectura a 14 px. Eso es ir en contra de la ley.
   La letra de lectura vuelve a su tamaño; lo que se acorta es el NÚMERO DE RENGLONES, no el
   tamaño. Solo quedan pequeños los rótulos diminutos (EBOOK · HERIDA MATERNA) y las insignias,
   que ya eran pequeños antes y no son texto de lectura.
   Los títulos se parten con guion como en un libro (BIODESCODIFICA-CIÓN) en vez de encogerse. */
@media (max-width: 767px){
  .card-articulo-extracto{ font-size: 1rem; line-height: 1.5; }
  .card-gratis-body p{ font-size: 1rem; line-height: 1.55; }
  .card-producto-body p{ font-size: .95rem; line-height: 1.5; }
  .card-servicio p{ font-size: .95rem; line-height: 1.5; }
  .card-articulo-titulo{ font-size: 1.18rem; }
  .card-servicio h3{ font-size: 1.12rem; }
  .card-producto-body h3, .card-gratis-body h3{ font-size: 1.18rem; }
  /* partir con guion, como en la imprenta, en vez de cortar la palabra a la brava */
  .card-servicio h3, .card-producto-body h3, .card-gratis-body h3, .card-articulo-titulo{
      hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  /* la foto se estrecha un poco para devolverle sitio al texto */
  .card-producto-img{ flex: 0 0 100px; width: 100px; }
  .card-articulo-img, .card-gratis-img{ flex: 0 0 104px; width: 104px; }
  .card-servicio{ grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- ÚLTIMO REPASO DE ESPACIO EN EL CELULAR (6-sep-2026) ----------
   Aquí no se quita NADA de contenido ni se achica ninguna letra: solo se recorta el aire.
   Medido: los 18 encabezados de sección gastaban 992 px solo en su margen de abajo, las
   27 secciones 2.376 px en márgenes de arriba y abajo, y el pie 2.241 px por poner los
   cuatro montones de enlaces uno debajo de otro. */
@media (max-width: 767px){
  /* el pie, en dos columnas: los mismos enlaces, la mitad de largo */
  footer .grid > div > ul{ column-count: 2; column-gap: 1.1rem; }
  footer .grid > div > ul > li{ break-inside: avoid; }
  footer{ padding-top: 2.25rem !important; }
  footer .grid{ gap: 1.5rem !important; margin-bottom: 1.25rem !important; }

  /* el aire bajo el título de cada sección: de 56-70 px a 26 */
  main section .mb-16, main section .mb-14{ margin-bottom: 1.6rem !important; }
  main section .mb-12{ margin-bottom: 1.4rem !important; }

  /* márgenes de sección: de 44 px arriba y abajo a 34 */
  main section.py-24, main section.py-20{ padding-top: 2.15rem !important; padding-bottom: 2.15rem !important; }

  /* el adorno del nudo entre secciones: se recorta el AIRE, no el dibujo.
     (Primer intento: le puse un alto fijo y le cortaba el pétalo de abajo. Mirado y corregido.) */
  .hilo-divisor{ padding: .9rem 0 .7rem !important; }
  .hilo-divisor img{ width: min(260px, 62vw); }
}

/* ============================================================================
   LA TIENDA EN EL CELULAR — 6-sep-2026 (jimy: «sí», tras acortar la portada)
   Medido: /tienda/ media 39.491 px = 46,8 pantallas de celular, casi lo mismo que la portada
   entera, y el 97 % era una sola rejilla: 50 portadas de libro EN FILA INDIA, a 740 px cada una.
   La culpa era una linea de la hoja incrustada de la tienda:
       @media (max-width: 520px) { .productos-grid { grid-template-columns: 1fr; } }
   Es decir: por debajo de 520 px de ancho, UNA columna. Un celular normal mide 390.
   Aqui pasa a DOS columnas, que es como se ve una libreria en el telefono: se ve el doble
   de catalogo en la mitad del viaje, y no se esconde ni un producto.

   Por que va aqui y no en la hoja de la tienda: esa hoja esta COPIADA dentro de las 72
   paginas de la tienda. Tocarla serian 72 parches que se pierden en cuanto se regenere una
   pagina. Aqui es un solo sitio y vale para las 72 y para las que vengan.
   Lleva «!important» porque la hoja incrustada se carga DESPUES de esta.
   ============================================================================ */
@media (max-width: 767px){
  .productos-grid{ grid-template-columns: 1fr 1fr !important; gap: .85rem !important; }
  .container-tienda{ padding: 0 .9rem !important; }

  .producto-card-body{ padding: .75rem .7rem .85rem !important; gap: .35rem !important; }
  /* titulo y frase a un maximo de renglones: sin esto, un titulo largo estira toda la fila
     (en una rejilla, la ficha mas alta manda sobre su vecina) */
  .producto-card-titulo{ line-height: 1.22;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .producto-card-sub{ line-height: 1.4;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .producto-card-precio{ margin-top: .15rem !important; }
  .producto-card-cta{ padding: .6rem .4rem !important; letter-spacing: .04em !important; }
  .producto-card-badge{ top: .45rem !important; left: .45rem !important;
                        padding: .22rem .5rem !important; letter-spacing: .06em !important; }
}

/* Mirado en pantalla a 320 px (el celular mas estrecho): la frase de la ficha se cortaba a MEDIA
   LINEA y asomaba un trozo del renglon siguiente. Motivo: la frase lleva «flex: 1» de la hoja de
   la tienda, asi que el navegador la estira mas alla de los 3 renglones del recorte y el sobrante
   se ve a medias. Se le quita el estiramiento y se manda el precio y el boton al pie de la ficha,
   para que todas las de una fila acaben a la misma altura. */
@media (max-width: 767px){
  .producto-card-sub{ flex: 0 0 auto !important; }
  .producto-card-precio{ margin-top: auto !important; }
}

/* ---------- LO QUE SACO EL REVISOR SOBRE LA TIENDA (6-sep-2026) ----------
   #4 El recorte a 3 renglones NO estaba funcionando. Y no era falta de «!important»: la frase
      vive dentro de una caja flexible, y ahi el navegador convierte «-webkit-box» en otra cosa
      (medido: display computado = «flow-root»), asi que el recorte se ignoraba. Se resuelve con
      un ALTO MAXIMO exacto de tres renglones: corta siempre y nunca deja media linea asomando.
   #5 El boton «Ver detalles» media 41 px de alto. Un dedo necesita 44 px como minimo, o se falla
      el toque. Sube a 46. */
@media (max-width: 767px){
  .producto-card-titulo{ max-height: calc(1.22em * 3); overflow: hidden !important; }
  .producto-card-sub{ max-height: calc(1.4em * 3); overflow: hidden !important; }
  .producto-card-cta{ padding: .82rem .4rem !important; min-height: 46px;
                      display: flex !important; align-items: center; justify-content: center; }
}

/* La frase de la ficha estaba en 14,9 px. La ley de la casa pide 19,5 px de cuerpo (jimy, 21-ago,
   pensando en la gente mayor que lo lee). En una columna de 172 px, 19,5 px no cabe sin destrozar
   la ficha; se sube a 1 rem (17,5 px), que es lo que cabe. Queda por debajo de la vara y se lo digo
   a jimy: subirla del todo es decision suya, porque obliga a repensar la rejilla. */
@media (max-width: 767px){
  .producto-card-sub{ font-size: 1rem !important; }
}

/* ============================================================================
   EL GLOSARIO PLEGADO — 6-sep-2026 (jimy: «sí»)
   Medido: /glosario/ eran 112.177 px en un celular de 390x844 = 132,9 pantallas, la pagina
   mas larga de la web con diferencia: 324 terminos en fila india. Nadie recorre eso con el
   pulgar; el buscador que ya tenia es la forma real de usarlo.
   Ahora cada categoria es una pestania que se toca y se abre. El texto sigue en la pagina
   (los buscadores lo leen igual) y al escribir en el buscador se abren solas.
   En computador salen abiertas: alli si cabe leerlas de un vistazo.
   ============================================================================ */
.cat-plegable{ border:1px solid rgba(201,169,106,.35); border-radius:1rem; overflow:hidden;
               background:rgba(247,241,227,.5); margin-bottom:1rem; }
.cat-resumen{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.9rem;
              padding:1.05rem 1.15rem; min-height:56px; }
.cat-resumen::-webkit-details-marker{ display:none; }
/* Ojo: glosario/_glosario.css se carga DESPUES y trae «.categoria-glosario h2» a 30 px (clamp).
   Con la misma fuerza gana el que va detras, asi que aqui hace falta un selector mas fuerte:
   si no, cada titulo de categoria medía 30 px, se partia en dos renglones y la fila entera
   ocupaba 193 px en vez de 60. Medido y mirado. */
.categoria-glosario .cat-resumen h2{ margin:0; flex:1; font-size:1.35rem; line-height:1.25; }
.cat-cuenta{ flex:0 0 auto; font-family:'Inter Tight',system-ui,sans-serif; font-weight:600;
             font-size:.95rem; color:#6b4f28; white-space:nowrap; }
/* la flechita: apunta abajo cuando esta cerrada, arriba cuando esta abierta */
.cat-resumen::after{ content:''; flex:0 0 auto; width:.7rem; height:.7rem; margin-left:.2rem;
                     border-right:2px solid #8c6a1f; border-bottom:2px solid #8c6a1f;
                     transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; }
.cat-plegable[open] .cat-resumen::after{ transform:rotate(-135deg) translateY(-2px); }
.cat-resumen:hover{ background:rgba(201,169,106,.12); }
.cat-plegable > .categoria-hero, .cat-plegable > .grid{ margin-left:1rem; margin-right:1rem; }
.cat-plegable > .grid{ margin-bottom:1.2rem; }
@media (max-width: 767px){
  .categoria-glosario .cat-resumen h2{ font-size:1.15rem; }
  .cat-cuenta{ font-size:.88rem; }
  .cat-plegable > .categoria-hero, .cat-plegable > .grid{ margin-left:.7rem; margin-right:.7rem; }
}

/* El Revisor avisó (pega #5) de que al quitarle la flechita de serie al <summary> me habia
   llevado por delante la marca del TECLADO: quien navega con la tecla Tab no sabia en que
   categoria estaba, y ademas «overflow:hidden» recortaba el cerco que dibuja el navegador.
   Se le pone un cerco propio, por dentro, que no se recorta. */
.cat-resumen:focus{ outline:none; }
.cat-resumen:focus-visible{ outline:none; box-shadow: inset 0 0 0 3px #8c6a1f; border-radius:.9rem; }
.cat-plegable:focus-within{ border-color:#8c6a1f; }