/* =========================
   Life Seekers - stylesheet
   (UNIFICADO: fuentes + estilos)
   ========================= */

/* --------- Root colors & variables --------- */
:root{
  --verde-oscuro:#0f5a57;
  --turquesa-claro:#1fb7b0;
  --turquesa-clarisimo: #c9f7f4;
  --dorado:#d4a35a;
  --beige:#FAF4EB;
  --muted:#6b6b6b;
  --max-width:1100px;
}
/* ---------- FONTS: ADLaM (títulos) y CAVOLINI (cuerpo) ---------- */
/* Ajusta los nombres de archivo si en tu carpeta son diferentes */

@font-face {
  font-family: 'ADLaM Display';
  src: url('fonts/ADLaMDisplay-Regular.woff2') format('woff2'),
       url('fonts/ADLaMDisplay-Regular.woff') format('woff'),
       url('fonts/ADLaMDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cavolini';
  src: url('fonts/Cavolini-Regular.woff2') format('woff2'),
       url('fonts/Cavolini-Regular.woff') format('woff'),
       url('fonts/Cavolini-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* si tienes variantes (bold/italic) añade más @font-face con font-weight:700 etc */
@font-face {
  font-family: 'Cavolini';
  src: url('fonts/Cavolini-Bold.woff2') format('woff2'),
       url('fonts/Cavolini-Bold.woff') format('woff'),
       url('fonts/Cavolini-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* --------- Base / layout --------- */
*{box-sizing:border-box}
body{
  font-family: 'Cavolini', 'Merriweather', serif;
  margin:0;
  color:#111;
  background:var(--beige);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--max-width); margin:0 auto; padding:2rem}
.header-inner, .footer-inner{display:flex; align-items:center; justify-content:space-between}

/* --------- Header --------- */
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  padding:1rem 0;
  background:linear-gradient(180deg, rgba(250,244,235,0.9), rgba(250,244,235,0.6));
  border-bottom:1px solid rgba(0,0,0,0.04);
}
.logo{height:96px}
.main-nav a{margin:0 0.8rem; text-decoration:none; color:var(--verde-oscuro); font-family:'Poppins', sans-serif}

.btn.primary {
  background: linear-gradient(180deg, #0f6b59, #0b5a4a);
  color: white;
  border-radius: 14px;
  padding: 0.9rem 1.25rem;
  box-shadow: 0 8px 18px rgba(5,50,40,0.25);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn.primary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(5,50,40,0.25); }


/* --------- Hero (fondo + overlay + texto blanco) --------- */
.hero{padding:4rem 0; position:relative; overflow:hidden; color:white}
.hero-bg{position:absolute; inset:0; background-image:url('images/bg-blurred.jpg'); background-size:cover; background-position:center; filter:brightness(0.9) saturate(1.1); opacity:1; z-index:0}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.08));
  z-index:1;
}
.hero-inner{display:flex; gap:2rem; align-items:center; position:relative; z-index:2}
.hero-copy{flex:1; color:#fff; padding-right:1rem}
.lead{font-size:1.15rem; color:rgba(255,255,255,0.9); margin-bottom:1.2rem}
.hero-ctas .btn{margin-bottom:0.6rem}
.social-hero{margin-top:1rem; color:rgba(255,255,255,0.95); font-family:'Poppins', sans-serif}
.hero-visual img{max-width:520px; width:100%; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,0.25)}

/* ================================
   GRID DE CUENTOS (HORIZONTAL)
   ================================ */

.discover_grid, .discover__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas SIEMPRE en escritorio */
  gap: 2rem;
  margin-top: 2rem;
  align-items: start;
}

/* Tarjeta libro */
.card.card--book {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  text-align: center;
}

/* Miniatura (portada) */
.card__thumb img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  max-height: 420px;     /* controla tamaño vertical */
  object-fit: cover;
}

/* Títulos */
.card__title {
  margin-top: 1rem;
  font-size: 1.35rem;
  color: var(--verde-oscuro);
}

/* Descripción */
.card__desc {
  font-size: 1rem;
  color: var(--muted);
  margin: 0.5rem 0 1rem 0;
}

/* Botones */
.card__actions {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1rem;
}

/* ========= Responsive ========= */

@media (max-width: 1000px) {
  .discover_grid, .discover__grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
  }
}

@media (max-width: 650px) {
  .discover_grid, .discover__grid {
    grid-template-columns: 1fr; /* 1 columna en móvil */
  }
}
/* --------- Content sections --------- */
.about, .resources{padding:3rem 0}
.site-footer{border-top:1px solid rgba(0,0,0,0.06); padding:1.5rem 0; font-size:0.95rem; background:linear-gradient(180deg, rgba(250,244,235,0.4), rgba(250,244,235,0.2))}
.muted{color:var(--muted)}

/* --------- Links & small UI --------- */
.buy-links{margin-top:0.8rem; display:flex; gap:0.6rem; align-items:center}
.newsletter{margin-top:1rem; display:flex; gap:0.5rem}
.newsletter input{flex:1; padding:0.6rem; border-radius:8px; border:1px solid #ddd}

/* --------- TYPOGRAPHY: TITLES (ADLaM applied here) --------- */
/* Apply ADLaM Display to H1/H2/H3 and buttons as requested */
h1, h2, h3 {
  font-family: 'ADLaM Display', 'Poppins', sans-serif;
  letter-spacing: 0.3px;
  color: var(--verde-oscuro);
  line-height: 1.05;
}

/* Hero H1 special (white, shadowed) */
.hero-copy h1 {
  font-family: 'ADLaM Display', 'Poppins', sans-serif;
  font-size: clamp(2rem, 4.2vw, 3rem);
  color: #ffffff;
  text-shadow: 0 6px 30px rgba(0,0,0,0.55);
  margin-bottom: 0.4rem;
}

/* H2/H3 sizes inside content */
.container h2 {
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
}
.card h3 {
  font-size: 1.12rem;
  margin-top: 0.6rem;
}

/* BODY: Cavolini como principal */
body, p, li, span, a, .text, .description {
  font-family: 'Cavolini', 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400; /* o 300 si lo quieres más fino */
  color: var(--gris-oscuro);
  line-height: 1.55;
}
}
/* Apply ADLaM also to buttons as requested */
.btn, .main-nav a {
  font-family: 'ADLaM Display', 'Cavolini', sans-serif;
  font-weight: 600;
  letter-spacing: 0.35px;
}

/* Button visual polish */
.btn.primary {
  background: var(--verde-oscuro);
  color: #fff;
  padding: 0.65rem 1.05rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15,90,87,0.12);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(15,90,87,0.16);
}
.btn.secondary {
  border:1px solid var(--verde-oscuro);
  color:var(--verde-oscuro);
}

/* --------- Responsiveness --------- */
@media(max-width:900px){
  .hero-inner{flex-direction:column-reverse; text-align:center}
  .main-nav{display:none}
  .main-nav.open{display:flex; flex-direction:column; gap:8px}
  .card h3 { font-size: 1rem; }
}
/* ---------- Secciones nuevas ---------- */

.section { padding: clamp(2rem, 4vw, 4rem) 0; }
.section .container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

.section__title { font-family: "ADLaM Display","Poppins",sans-serif; font-size: clamp(1.6rem,3.6vw,2.6rem); color: var(--verde-oscuro); margin-bottom:.6rem; }
.section__lead { color: rgba(39,65,58,.85); margin-bottom:1.2rem; }

/* ABOUT */
.about__text { font-family: "Cavolini","Poppins",sans-serif; font-size:1.05rem; color: var(--gris-oscuro); }

/* GRID para Discover: lado a lado en escritorio, 1 columna en móvil */
.discover_grid {
  display: grid;
  gap: 2rem;
  /* en escritorio 3 columnas (ajusta número) */
  grid-template-columns: repeat(3,1fr);
  align-items: start;
}

/* tarjetas */
.card {
  background: var(--card-bg, #fff);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--card-shadow, 0 8px 20px rgba(0,0,0,0.06));
  overflow: hidden;
}

/* miniatura: forzar tamaño usable y proporcional */
.card .card_thumb img,
.card .card_thumb {
  display: block;
  width: 100%;
  height: auto;           /* conserva proporción */
  max-width: 340px;       /* evita que crezca infinito en pantallas gigantes */
  border-radius: 12px;
  object-fit: cover;      /* mantiene aspecto recortando si hace falta */
}

/* cuerpo y títulos */
.card .card_body { padding-top: 0.75rem; }
.card .card_title { font-size: 1.15rem; margin-bottom: 0.45rem; }
.card .card_desc { font-size: 0.95rem; color: var(--muted); }

/* acciones (botones) */
.card .card_actions { margin-top: 0.8rem; display:flex; gap:0.6rem; }

/* RESPONSIVE: en móvil 1 columna */
@media (max-width: 900px) {
  .discover_grid {
    grid-template-columns: 1fr;
  }

  /* si quieres 2 columnas en tablet */
  /* @media (max-width: 1200px) { grid-template-columns: repeat(3,1fr);} */
}

/* QA */
.qa__list { display:grid; gap:1rem; margin-top:1rem; }
.qa { padding:1rem; border-radius:10px; background:linear-gradient(180deg,#fff,#fff); border:1px solid rgba(0,0,0,.03); }
.qa__q { margin:0 0 .5rem; color:var(--verde-oscuro); font-weight:700; }
.qa__a p { margin:0; color:var(--gris-oscuro); }

/* Modal imagen */
.image-modal { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; }
.image-modal.is-open { display:flex; }
.image-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.image-modal__content { position:relative; max-width:900px; width:90%; border-radius:10px; overflow:hidden; z-index:2; background:#fff; padding:1rem; }
.image-modal__content img { width:100%; height:auto; display:block; }
.image-modal__close { position:absolute; right:.6rem; top:.6rem; background:transparent; border:0; font-size:1.6rem; color:#333; }

/* Responsive */
@media (max-width: 900px){
  .discover_grid, .discover__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px){
  .discover_grid, .discover__grid { grid-template-columns: 1fr; }
  .hero__inner { flex-direction: column-reverse; align-items:center; }
  .card__actions { flex-direction:column; gap:.5rem; }
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Menú móvil */
nav.open {
    max-height: 300px;
    opacity: 1;
}

.mobile-toggle.open {
    transform: rotate(90deg);
}
.mini-logo {
  width: 200px;
  height: auto;
  opacity: 0.9;
}



/* Hover suave: levitar portada y aumentar sombra */
.card.card--book {
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s cubic-bezier(.2,.9,.3,1);
  will-change: transform, box-shadow;
}

.card.card--book:hover,
.card.card--book:focus-within {
  transform: translateY(-10px);
  box-shadow: 0 24px 46px rgba(5,40,34,0.14);
}

/* Escala ligera de la imagen dentro de la tarjeta */
.card__thumb img {
  transition: transform .45s cubic-bezier(.2,.9,.3,1);
  will-change: transform;
}

.card.card--book:hover .card__thumb img,
.card.card--book:focus-within .card__thumb img {
  transform: scale(1.03);
}

/* Cursor e interacción en el botón miniatura */
.card__thumb {
  display: inline-block;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  outline: none;
}

/* Enfoque accesible (keyboard) */
.card__thumb:focus {
  box-shadow: 0 0 0 4px rgba(15,90,87,0.12);
  outline: none;
}

/* Reduce contraste excesivo en hover para móviles (no hay hover) */
@media (hover: none) {
  .card.card--book { transform: none !important; box-shadow: 0 10px 28px rgba(0,0,0,0.08); }
  .card__thumb img { transform: none !important; }
}
/* ====== Hero button: sombra y micro-animación ====== */
.hero-ctas .btn.primary {
  position: relative;
  overflow: visible;
  transition: transform .14s ease, box-shadow .14s ease;
  box-shadow: 0 8px 20px rgba(15,90,87,0.12);
  will-change: transform, box-shadow;
}

/* pulso / brillo suave detrás */
.hero-ctas .btn.primary::before{
  content: "";
  position: absolute;
  inset: -6px -10px -10px -10px;
  border-radius: 14px;
  background: radial-gradient(closest-side, rgba(15,90,87,0.06), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  z-index: -1;
  transform: scale(.98);
}

/* hover/activo (escritorio) */
@media (hover: hover) {
  .hero-ctas .btn.primary:hover,
  .hero-ctas .btn.primary:focus {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(15,90,87,0.16);
  }
  .hero-ctas .btn.primary:hover::before,
  .hero-ctas .btn.primary:focus::before {
    opacity: 1;
    transform: scale(1);
  }
}

/* versión táctil - reducir excesos */
@media (hover: none) {
  .hero-ctas .btn.primary { box-shadow: 0 8px 18px rgba(15,90,87,0.10); transform: none; }
  .hero-ctas .btn.primary::before { display:none; }
}

/* ====== Fade-in con delay para tarjetas (visuales al hacer scroll) ====== */
/* .fade-in se añadirá automáticamente vía JS a las tarjetas si no la tienes */
.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .64s cubic-bezier(.2,.9,.3,1), transform .64s cubic-bezier(.2,.9,.3,1);
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* para escalonar el delay usaremos estilos inline from JS - pero aquí un fallback */
.card:nth-child(1) .fade-in { transition-delay: 0.06s; }
.card:nth-child(2) .fade-in { transition-delay: 0.12s; }
.card:nth-child(3) .fade-in { transition-delay: 0.18s; }

/* ====== Miniaturas de colección: asegurar proporciones y tamaño de los thumbnails ====== */
.discover_grid, .discover__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  align-items: start;
}

/* En pantallas grandes evitar que la imagen se haga demasiado pequeña */
.card__thumb img {
  width: 100%;
  height: 260px;
  object-fit: cover; /* recorta si hace falta, mantiene composición */
  display: block;
  border-radius: 12px;
}

/* En tablet / móvil: pasar a columna (ya lo tenías, lo reforzamos) */
@media (max-width: 900px) {
  .discover_grid, .discover__grid {
    grid-template-columns: 1fr;
  }
  .card__thumb img { height: auto; max-height: 420px; }
}

/* ====== Footer: reducir logo y ajustar alineado ====== */
.site-footer .mini-logo {
  width: 68px;
  height: auto;
  margin-right: 0.8rem;
  border-radius: 50%;
  object-fit: cover;
}

/* si quieres que el copyright ocupe menos espacio en móvil */
@media (max-width:600px){
  .footer-inner { flex-direction:column; gap:.8rem; text-align:center; }
  .site-footer .mini-logo { margin:0 auto 0.25rem; }
}

/* ----------------------------
   Ajustes visuales solicitados
   ---------------------------- */

/* 1) Estrellitas más grandes */
.star-inline svg {
  width: 48px;         /* tamaño mayor */
  height: 48px;
  vertical-align: middle;
  margin-right: 0.6rem;
  display: inline-block;
  color: var(--dorado);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}

/* Si usas el symbol <use>, forzamos el color */
.star-inline svg path { fill: var(--dorado); }

/* 2) Quitar subrayado en botones / enlaces principales */
a, .btn, .main-nav a {
  text-decoration: none;   /* elimina subrayado por defecto */
}

/* Asegurarnos de que los .btn no tengan subrayado en hover */
.btn:hover, .btn:focus { text-decoration: none; }

/* 3) Entrar en el universo / Ver temas por cuento — asegurar estilo sin subrayado
   (si alguna clase específica los añade, esto lo sobreescribe) */
a[href="#coleccion"], a[href="#discover"], .hero-ctas .btn, .science__cta .btn {
  text-decoration: none !important;
}

/* 4) Contacto en header: quitar recuadro (cuando el enlace tiene class="btn secondary" en nav) */
.main-nav a.btn.secondary,
.main-nav a.btn.secondary:visited {
  background: transparent !important;
  color: var(--verde-oscuro) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0.6rem !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-weight: 600;
}

/* Si quieres que al pasar el ratón se muestre un ligero subrayado solo en hover */
.main-nav a.btn.secondary:hover {
  text-decoration: underline;
  background: transparent;
}

/* 5) Asegurar que el botón "Enviar una señal" se vea (clase .btn.primary recomendada)
   y si accidentalmente usas .btn--ghost ajustamos su visual para que no quede invisible */
.btn.btn--ghost {
  background: rgba(255,255,255,0.98);
  color: var(--verde-oscuro);
  border: 1px solid rgba(20,80,70,0.06);
  padding: 0.65rem 1rem;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* 6) Pequeño ajuste en los botones hero para que no aparezcan subrayados y con buen contraste en móvil */
.hero-ctas .btn {
  text-decoration: none !important;
}

/* 7) Si el enlace "Ver temas por cuento" aparecía como link subrayado por .btn--link */
/* convertirlo en apariencia de botón sin subrayado */
.btn--link {
  text-decoration: none;
  color: var(--verde-oscuro);
  background: transparent;
  border: none;
  padding: 0;
}

/* 8) Ajuste final: si algún enlace del nav aún tiene estilo de "btn" aplicado globalmente,
   recortamos su padding para que no parezca recuadro */
.main-nav a {
  padding: 0 0.45rem;
}

/* 9) Accesibilidad: foco visible (outline) para enlaces que hemos hecho no-recuadro */
.main-nav a:focus,
.btn:focus {
  outline: 3px solid rgba(31,183,176,0.12);
  outline-offset: 4px;
}

/* 10) Si quieres que "Enviar una señal" destaque más, usar .btn.primary estilos ya aplicados
    (no es necesario pero lo dejo aquí por si mantienes .btn--ghost en otros sitios) */

.social-hero a,
.site-footer a {
    color: var(--turquesa-claro);
    text-decoration: none;
    font-weight: 600;
}

.social-hero a:hover,
.site-footer a:hover {
    text-decoration: underline;
}


.btn.small {
    background: white;
    border: 1px solid var(--verde-oscuro);
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    color: var(--verde-oscuro);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
}

.btn.small:hover {
    background: var(--verde-oscuro);
    color: #fff;
}

/* Botones Amazon / Lulu – estilo píldora elegante */
.btn.store-btn {
  background: linear-gradient(180deg, #ffffff, #fefefe, #f3ece1);
  border: 1px solid rgba(15, 90, 87, 0.38);
  color: var(--verde-oscuro);
  padding: 0.45rem 1.2rem;
  border-radius: 22px;
  font-size: 0.92rem;
  font-family: 'ADLaM Display', sans-serif;
  letter-spacing: .3px;
  box-shadow: 0 4px 14px rgba(15, 90, 87, 0.15);
  transition: all 0.18s ease;
}

.btn.store-btn:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 90, 87, 0.22);
}

.btn.store-btn.amazon {
  border-color: #0f5a57;
}

.btn.store-btn.lulu {
  border-color: #1fb7b0;
}
/* ========== BOTONES AMAZON / LULU – ESTILO DORADO ========== */
.btn.store-btn {
  background: linear-gradient(180deg, #f7dba6, #d4a35a); /* dorado */
  border: 1px solid rgba(120, 80, 20, 0.35);
  color: #4a3b1a;
  padding: 0.45rem 1.1rem;
  border-radius: 18px;
  font-size: 0.85rem;
  font-family: 'ADLaM Display', sans-serif;
  box-shadow: 0 4px 14px rgba(140, 90, 20, 0.18);
  transition: all 0.18s ease;
}

.btn.store-btn:hover {
  background: #fff4d6;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(140, 90, 20, 0.22);
}

/* ========== COLOR INSTAGRAM EN HERO ========== */
.hero a {
  color: var(--turquesa-claro) !important;
  font-weight: 700;
}

.hero a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Instagram color mejorado (turquesa clarísimo) */
.social-hero a,
.footer-inner a {
    color: var(--turquesa-clarisimo) !important;
}

/* Mejor contraste del texto hero */
.hero-copy p,
.hero-copy a {
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}


/* Forzar texto verde oscuro en botones Amazon/Lulu */
.btn.store-btn,
.btn.store-btn:visited {
    color: var(--verde-oscuro) !important;
}

/* Hover elegante */
.btn.store-btn:hover {
    color: var(--verde-oscuro) !important;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 90, 87, 0.18);
    transform: translateY(-2px);
}
/* === BOTONES UNIFORMES LIFE SEEKERS (ADLaM, verde oscuro + turquesa claro) === */

.btn,
.btn.primary,
.btn--primary,
a.btn {
  display: inline-block;
  font-family: 'ADLaM Display', 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 0.75rem 1.4rem;
  border-radius: 16px;
  text-decoration: none !important;
  cursor: pointer;

  /* Fondo medallón verde oscuro */
  background: linear-gradient(180deg, #0f6b59, #0b5a4a);

  /* TEXTO turquesa claro */
  color: var(--turquesa-llama, #39cfd1);

  /* Sombras suaves */
  box-shadow: 0 10px 26px rgba(15, 90, 87, 0.18);

  border: none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn:hover,
.btn.primary:hover,
.btn--primary:hover,
a.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(15, 90, 87, 0.22);
}

/* Tamaño pequeño si lo necesitas */
.btn.small {
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  border-radius: 14px;
}

* ====== COLORES DE ENLACES SEGÚN FONDO ====== */

/* Enlaces generales (hero, tarjetas, etc.) → turquesa clarísimo */
a {
  color: var(--turquesa-clarisimo);
  text-decoration: none;
  font-weight: 600;
}
a:hover {
  opacity: 0.85;
}

/* Footer: el fondo es claro → usamos verde oscuro */
.site-footer a {
  color: var(--verde-oscuro) !important;
}

.site-footer a:hover {
  color: var(--turquesa-claro) !important;
}

/* ---------------------------
   LIFE SEEKERS – Header & Hero
   Encapsulado con .lifeseekers-root
   Pegarlo al final de styles.css
   --------------------------- */
.lifeseekers-root .main-nav a {
  display: inline-block;
  padding: 10px 14px;        /* botones más grandes */
  font-size: 1rem;           /* legible en móvil */
  font-weight: 700;
  border-radius: 10px;
  transition: background .15s ease, transform .12s ease;
}

/* Hover/Focus sutil para links del header */
.lifeseekers-root .main-nav a:hover,
.lifeseekers-root .main-nav a:focus {
  background: rgba(212,163,90,0.09); /* ligero dorado */
  transform: translateY(-2px);
  outline: none;
}

/* Aumenta el área táctil del toggle (botón hamburger) */
.lifeseekers-root .nav-toggle {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: transparent;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
}

/* Make sure header remains readable if hero uses dark overlay */
.lifeseekers-root .site-header {
  background: linear-gradient(180deg, rgba(250,244,235,0.95), rgba(250,244,235,0.85));
}

/* NAV Mobile: hidden by default, slide-down when .open */
@media (max-width: 900px) {
  .lifeseekers-root .main-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 72px;                      /* debajo del header */
    background: rgba(250,244,235,0.98);
    padding: 1rem 1rem;
    box-shadow: 0 8px 30px rgba(5,40,34,0.06);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
    z-index: 1200;
  }
  .lifeseekers-root .main-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  /* stack links vertically on mobile */
  .lifeseekers-root .main-nav a { display:block; margin: 0.45rem 0; padding: 10px 16px; border-radius:12px; }
  /* hide header CTAs on small screens to simplify layout (use hero CTAs instead) */
  .lifeseekers-root .header-inner .btn { display:none; }
}

/* HERO tweaks inside scope to avoid pushing content off-screen */
.lifeseekers-root .hero {
  /* reduce top padding on small screens so hero doesn't push nav out of view */
  padding-top: 3.2rem;
}
@media (max-width: 900px){
  .lifeseekers-root .hero { padding-top: 2rem; padding-bottom: 2rem; }
  .lifeseekers-root .hero-copy { padding-right: 0; text-align:center; }
  .lifeseekers-root .hero-visual img { max-width: 78%; margin: 0 auto; display:block; }
  .lifeseekers-root .social-hero { font-size: .95rem; }
}

/* Make hero CTAs clear & accessible in mobile */
.lifeseekers-root .hero-ctas .btn {
  padding: 0.8rem 1.1rem;
  border-radius: 14px;
  font-weight: 700;
}

/* Ensure buy links (Amazon/Lulu) maintain pill style and size */
.lifeseekers-root .buy-links { justify-content:center; gap:0.6rem; margin-top:0.6rem; display:flex; align-items:center; }
.lifeseekers-root .btn.store-btn { padding: 0.5rem 1.0rem; border-radius:22px; font-size:0.92rem; }
/* Igualar el tamaño de los botones Amazon y Lulu */
.store-btn {
  min-width: 96px; /* Ajusta hasta que visualmente coincidan */
  text-align: center;
}

/* Focus accessibility: clear visible focus inside the scoped header */
.lifeseekers-root .main-nav a:focus,
.lifeseekers-root .nav-toggle:focus,
.lifeseekers-root .hero-ctas .btn:focus {
  outline: 3px solid rgba(31,183,176,0.12);
  outline-offset: 3px;
}

/* Small safety: avoid changing global .open behavior outside the root */
.lifeseekers-root .main-nav.open { display:block; }

/* Optional: small visual improvement for star size only in header/hero */
.lifeseekers-root .with-star .star-inline svg { width: 34px; height: 34px; margin-right: 0.5rem; }

/* FIX HEADER */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
}

/* BOTONES DEL MENÚ MÁS GRANDES */
nav a {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 12px 18px;
}

/* VERSIÓN MÓVIL */
@media(max-width: 800px){
  nav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 16px;
    padding: 10px;
  }
  nav a {
    font-size: 1.2rem;
    padding: 10px 14px;
  }
}
/* -------------------------
  LIFE SEEKERS — Ajustes móviles rápidos
  Encapsulado en .lifeseekers-root
  Pegar AL FINAL de styles.css
   ------------------------- */

.lifeseekers-root { /* safety */
  -webkit-font-smoothing:antialiased;
}

/* Aumentar la altura del header y espacio interno */
.lifeseekers-root .site-header {
  padding: 14px 18px; /* añade espacio vertical */
}

/* Aumentar área táctil del toggle (hamburger) */
.lifeseekers-root .nav-toggle {
  width: 56px;
  height: 56px;
  padding: 6px;
  border-radius: 12px;
}

/* Mobile specific (max-width 900px) — más legible */
@media (max-width: 900px) {

  /* Nav links más grandes y con mayor peso */
  .lifeseekers-root .main-nav a {
    font-size: 1.25rem;    /* más grande */
    padding: 14px 18px;    /* área táctil mayor */
    line-height: 1.2;
    font-weight: 800;
  }

  /* Forzamos que el nav panel use suficiente altura y espacio */
  .lifeseekers-root .main-nav {
    top: 72px; /* deja sitio al header */
    padding: 18px 16px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  /* Aseguramos que CTAs del header se vean (si quieres) */
  .lifeseekers-root .ls-cta-group,
  .lifeseekers-root .header-inner .btn,
  .lifeseekers-root .cta-primary,
  .lifeseekers-root .cta-secondary {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
  }
  .lifeseekers-root .cta-primary {
    padding: 12px 18px !important;
    font-size: 1.05rem !important;
    border-radius: 999px !important;
  }
  .lifeseekers-root .cta-secondary {
    padding: 10px 14px !important;
    font-size: 1rem !important;
    border-radius: 999px !important;
  }

  /* Hero: reduce top padding para que no empuje demasiado */
  .lifeseekers-root .hero {
    padding-top: 1.6rem !important;
    padding-bottom: 1.6rem !important;
  }

  /* Hero title: escala y centra */
  .lifeseekers-root .hero h1,
  .lifeseekers-root .ls-title,
  .lifeseekers-root .hero-copy h1 {
    font-size: 1.65rem !important; /* 26px aprox */
    line-height: 1.08 !important;
    margin-bottom: 10px;
    text-align: center;
  }

  /* Hero lead text */
  .lifeseekers-root .hero p,
  .lifeseekers-root .ls-lead {
    font-size: 1rem !important;
    text-align: center;
  }

  /* Ilustración del hero: ocupa menos ancho y no empuja */
  .lifeseekers-root .hero-visual,
  .lifeseekers-root .ls-hero-illus {
    display: block;
    margin: 10px auto 0;
    text-align: center;
  }
  .lifeseekers-root .hero-visual img,
  .lifeseekers-root .ls-hero-illus img {
    max-width: 78% !important;
    height: auto !important;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(26,59,52,0.07);
  }

  /* Compact CTA group below hero on very small screens */
  .lifeseekers-root .hero-ctas {
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
    margin-top:12px;
  }
  .lifeseekers-root .hero-ctas .btn {
    width: 86%;
    max-width: 360px;
    text-align:center;
  }

  /* If purchase/store links are present, stack them */
  .lifeseekers-root .buy-links { flex-direction: column; gap: 8px; }
  .lifeseekers-root .buy-links .store-btn { width: 86%; max-width: 320px; }

  /* Slightly increase z-index of header so hero never overlaps */
  .lifeseekers-root .site-header { z-index:2000; position:sticky; top:0; }
}

/* Small screens tweak (very narrow) */
@media (max-width: 420px) {
  .lifeseekers-root .main-nav a { font-size: 1.15rem; padding:12px 14px; }
  .lifeseekers-root .cta-primary { font-size:1rem; padding:10px 14px; }
  .lifeseekers-root .hero h1 { font-size:1.45rem; }
  .lifeseekers-root .hero-visual img { max-width: 86%; }
}
/* --- Parche móvil: título junto al logo y nav mejor --- */
.lifeseekers-root .brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.lifeseekers-root .brand .logo { width:56px; height:auto; display:block; }

/* site-title: hidden en desktop, visible en móvil y tablet */
.lifeseekers-root .site-title { display:none; font-weight:800; color:var(--color-darkgreen, #163C35); font-size:1.05rem; }

/* NAV panel: aseguramos espacio y scroll si hace falta */
.lifeseekers-root .main-nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 72px; /* deja sitio para el header */
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  background: rgba(250,244,235,0.98);
  padding: 20px 18px;
  transition: transform .18s ease, opacity .18s ease;
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  z-index: 1500;
  box-shadow: 0 12px 36px rgba(5,40,34,0.06);
}

/* open state */
.lifeseekers-root .main-nav.open { transform: translateY(0); opacity:1; pointer-events:all; }

/* Links (stacked, grande y con suficiente área táctil) */
.lifeseekers-root .main-nav a {
  display:block;
  padding: 14px 8px;
  font-size:1.25rem;
  font-weight:800;
  color:var(--color-darkgreen, #163C35);
  text-decoration:none;
  border-radius:10px;
  margin-bottom:6px;
}

/* Fondo semitransparente detrás al abrir (opcional) */
.lifeseekers-root .nav-backdrop {
  display:none;
}
.lifeseekers-root .nav-backdrop.open {
  display:block;
  position:fixed;
  inset:72px 0 0 0;
  background: rgba(8,20,16,0.12);
  z-index:1400;
}

/* En pantallas pequeñas mostramos el título cerca del logo */
@media (max-width: 900px) {
  .lifeseekers-root .site-title { display:inline-block; font-size:1.02rem; line-height:1; }
  .lifeseekers-root .brand .logo { width:48px; }
  .lifeseekers-root .site-header { padding:12px 14px; }
  .lifeseekers-root .nav-toggle { width:48px; height:48px; }
}
/* ---------------------------
  Ajustes: restaurar nav escritorio,
  padding mobile para tarjetas y títulos
  y transformar h1 a mayúsculas en móvil
   --------------------------- */

.lifeseekers-root {
  /* espacio seguro por si hay estilos muy restrictivos */
}

/* 1) Navegación: comportamiento para escritorio */
@media (min-width: 901px) {
  .lifeseekers-root .main-nav {
    position: static;          /* vuelve a flujo normal */
    top: auto;
    transform: none;
    opacity: 1;
    pointer-events: all;
    background: transparent;
    padding: 0;
    display: flex;
    gap: 18px;
    align-items: center;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }

  .lifeseekers-root .main-nav a {
    padding: 6px 10px;
    font-size: 0.98rem;
    font-weight:700;
    color:var(--color-darkgreen, #163C35);
    background: transparent;
    border-radius: 6px;
    margin-bottom: 0;
  }

  /* ocultar backdrop en desktop */
  .lifeseekers-root .nav-backdrop { display: none !important; }

  /* Mostrar site-title también en desktop si lo prefieres
     (quita o comenta la siguiente regla si prefieres ocultarlo) */
  .lifeseekers-root .site-title { display:inline-block; }
}

/* 2) Espaciado en móviles: que no se pegue el contenido al borde */
@media (max-width: 900px) {
  /* aumentar padding general dentro de secciones */
  .lifeseekers-root .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* tarjetas (covers / textos) */
  .lifeseekers-root .discover_grid,
  .lifeseekers-root .grid {
    padding-left: 2px;
    padding-right: 2px;
  }

  .lifeseekers-root .card,
  .lifeseekers-root .card__body,
  .lifeseekers-root .card__title,
  .lifeseekers-root .card__desc {
    margin-left: 0;
    margin-right: 0;
  }

  /* botones grandes táctiles */
  .lifeseekers-root .btn {
    padding: 14px 20px;
    font-size: 1.05rem;
    border-radius: 14px;
  }

  /* 3) Título main en mayúsculas en móvil */
  .lifeseekers-root .hero-copy .with-star,
  .lifeseekers-root .hero-copy h1 {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight:800;
  }

  /* ajusta tamaño del logo y del título en móvil si hace falta */
  .lifeseekers-root .brand .logo { width:48px; }
  .lifeseekers-root .site-title { font-size:1.02rem; margin-left:6px; }

  /* si el hero o encabezados quedaran demasiado pegados al top */
  .lifeseekers-root .site-header { padding-top:12px; padding-bottom:12px; }
}

/* 4) Pequeño ajuste estético: separación entre hero-visual y hero-copy en móvil */
@media (max-width: 600px) {
  .lifeseekers-root .hero-inner { gap: 14px; }
  .lifeseekers-root .hero-visual img { max-width:92%; margin:0 auto; display:block; }
}

/* 5) Si quieres que las "buy-links" se vean como antes en escritorio */
@media (min-width: 901px) {
  .lifeseekers-root .buy-links { display:flex; align-items:center; gap:10px; margin-left:12px; }
  .lifeseekers-root .buy-links .store-btn { padding:8px 12px; font-size:0.95rem; border-radius:10px; }
}

/* fin de bloque */
@media (min-width:901px){
  .lifeseekers-root .site-title { display:none; }
}
/* Alinear sección "Descubrir más" con el resto */
.lifeseekers-root .discover.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Alinear también la cuadrícula de libros */
.lifeseekers-root .discover_grid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* -------------------------
   Forzar alineación/centro de secciones
   para que "Descubrir más" quede alineado
   con "La colección" y el resto.
   ------------------------- */

/* 1) Contenedor base: mismo ancho y centrado para todas las secciones */
.lifeseekers-root .container {
  box-sizing: border-box;
  max-width: 1120px;     /* ancho de lectura óptimo: ajústalo si quieres */
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;    /* espacio lateral consistente */
  padding-right: 40px;
}

/* 2) Anular offsets locales que puedan empujar a la izquierda */
.lifeseekers-root section,
.lifeseekers-root .section {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* 3) Forzar la cuadrícula de "discover" a usar el mismo ancho y centrarse */
.lifeseekers-root #discover,
.lifeseekers-root #discover .discover_grid,
.lifeseekers-root #discover .grid {
  max-width: 1040px; /* ligeramente menor que el container para respiración */
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* 4) Si alguna tarjeta tiene margin-left negativo, anularlo */
.lifeseekers-root .discover_grid .card,
.lifeseekers-root .grid .card {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 5) Ajuste móvil (mantener padding móvil que ya habías aplicado) */
@media (max-width: 900px) {
  .lifeseekers-root .container {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 100%;
  }
  .lifeseekers-root #discover .discover_grid,
  .lifeseekers-root #discover .grid {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}
/* Alinear “Descubrir más” con “La colección” */
.lifeseekers-root #discover h2.with-star {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Asegurar que el icono estrella no esté empujando hacia la izquierda */
.lifeseekers-root #discover .with-star .star-inline {
  margin-left: 0 !important;
  margin-right: 0.6rem !important; /* se mantiene igual que los otros títulos */
}
/* ------------------------------------------------------------------
   Forzar alineado de la sección "Descubrir más" para que quede igual
   que "La colección" (añadir al final de styles.css)
   ------------------------------------------------------------------*/
#discover.container,
#discover.container .discover_grid,
#discover .section__title,
#discover .section__lead {
  box-sizing: border-box;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;   /* iguala el gutter horizontal */
  padding-right: 32px !important;  /* ajusta según el resto del layout */
  max-width: 1200px !important;    /* coincide con el ancho central */
}

/* asegurar que la rejilla de tarjetas no tenga desplazamiento lateral */
#discover .discover_grid {
  margin-left: 0 !important;
  transform: none !important;
}

/* si tu .cards usa un gutter diferente, usa estos valores (ajusta px si hace falta) */
.cards.container, #coleccion.container {
  padding-left: 32px;
  padding-right: 32px;
}
/* Alineación/espaciado específico para la sección Discover */
.discover.container { padding-left: 32px; padding-right: 32px; }

/* ===========================================
   ALINEACIÓN GLOBAL A LA IZQUIERDA
   =========================================== */

/* Títulos y subtítulos con estrella */
.section__title,
.with-star,
h2.with-star,
.section_lead,
.section__lead,
.muted,
p,
h2,
h3 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Contenedores con gutter consistente */
.container,
.section .container,
.cards.container,
.discover_grid {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  box-sizing: border-box;
}




/* ===== Override: ensure Discover aligns left on mobile ===== */
@media (max-width: 900px) {
  /* Reset centering applied earlier specifically for discover */
  #discover.container,
  .section.discover.container,
  #discover .discover_grid,
  #discover .section__title,
  #discover .section__lead,
  .discover.container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    box-sizing: border-box;
    text-align: left !important;
  }

  /* Make grid single column and tighter on mobile */
  .discover_grid,
  .discover__grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .section.discover .section__title {
    white-space: normal !important;
    font-size: 2.1rem !important;
    line-height: 1.05 !important;
  }

  .section.discover .section__lead {
    margin-top: 0.25rem;
  }
}



/* === STRONG OVERRIDES for Discover alignment === */
@media (max-width: 900px) {
  /* Ensure the section container aligns like other sections */
  section#discover, .section.discover {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: none !important;
  }

  /* Force title/subtitle to left and remove transforms */
  .section.discover .section__title,
  .section.discover .section__lead {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
  }

  /* If the title had a pseudo-element star placed absolutely, reset it */
  .section.discover .with-star::before,
  .section.discover .with-star::after,
  .section.discover .star-inline {
    left: 0 !important;
    transform: none !important;
    margin-left: 0 !important;
  }

  /* Reduce any large left-offset on the title */
  .section.discover .section__title {
    position: relative !important;
    left: 0 !important;
  }

  /* Force the grid to a single column */
  .discover_grid, .discover__grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}



@media (min-width: 901px) {
  /* Desktop / tablet large: align with other containers using 48px side padding */
  section#discover, .section.discover {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (max-width: 900px) {
  /* Mobile: smaller side padding so content aligns with other sections (20px) */
  section#discover, .section.discover {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* === Conservador: reglas específicas SOLO para la sección Discover === */
section#discover, .section.discover {
  /* Align with other sections but do not change global title rules */
  padding-left: 32px !important;
  padding-right: 32px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  text-align: left !important;
}

@media (max-width: 900px) {
  section#discover, .section.discover {
    padding-left: 16px !important;
    padding-right: 20px !important;
  }
  /* Make the discover title a sensible mobile size without touching other sections */
  .section.discover .section__title {
    font-size: 1.7rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .section.discover .with-star {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }
  .discover_grid, .discover__grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}
/* End conservative rules for Discover */



/* Small nudge: make Discover block sit slightly more left on very small screens */
@media (max-width: 500px) {
  section#discover, .section.discover {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .section.discover .with-star {
    margin-left: 0 !important;
  }
}


/* === FIX v12: stronger Discover mobile alignment left === */
@media (max-width: 520px) {
  section#discover, .section.discover {
    padding-left: 8px !important;
    padding-right: 12px !important;
  }
  .section.discover .with-star {
    transform: translateX(-14px) !important;
  }
  .section.discover .section__title {
    margin-left: 0 !important;
  }
}
/* End FIX v12 */


/* === FIX v13: align Discover text block further left on mobile, keep title intact === */
@media (max-width:520px){
  .section.discover p {
    padding-left: 8px !important;
    margin-left: 0 !important;
  }
}
/* End FIX v13 */


/* === FIX v14: mover significativamente el párrafo de Discover a la izquierda en móvil === */
@media (max-width:520px){
  /* selector específico para el párrafo descriptivo dentro de Discover */
  .section.discover .section__lead,
  .section.discover p,
  #discover .section__lead {
    padding-left: 0 !important;
    margin-left: 0 !important;
    transform: translateX(-20px) !important;
    display: block !important;
    width: calc(100% + 20px) !important; /* para que el texto no se corte al trasladarlo */
  }
}
/* End FIX v14 */
/* FORZAR subtítulo del hero Universo a blanco (override seguro) */
header.universe-hero .universe-lead,
.universe-hero .universe-lead,
.universe-hero p {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25) !important;
  /* opcional: ajustar contraste en tamaños pequeños */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.track-cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #1DB954; /* Verde Spotify */
  color: #ffffff !important;
  text-decoration: none;
  font-family: var(--ls-heading-font);
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  transition: background 0.25s ease, transform 0.2s ease;
}

.track-cta:hover {
  background: #18a44c; /* Un verde un poco más oscuro */
  transform: translateY(-2px);
}
/* BOTÓN VERDE SPOTIFY — Life Seekers Premium */
.btn-spotify {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #1DB954, #18a44c);
  color: #ffffff !important;
  font-family: var(--ls-heading-font);
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Iconito de Spotify */
.btn-spotify::before {
  content: "🎵";
  font-size: 18px;
  display: inline-block;
  transform: translateY(-1px);
  opacity: 0.9;
}

/* Hover */
.btn-spotify:hover {
  background: linear-gradient(135deg, #18a44c, #148a3e);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

/* evitar que el fondo/imagen del hero capture clicks */
.hero-bg,
.hero-visual {
  pointer-events: none; /* fondo e imagen no reciben clicks */
}

/* aseguramos que los botones de compra estén por encima */
.buy-links,
.hero-ctas .btn,
.buy-links .btn {
  position: relative;
  z-index: 20;   /* más alto que el fondo */
  pointer-events: auto;
}

/* si tienes un backdrop de navegación que quede por debajo */
.nav-backdrop {
  z-index: 5;
}

/* ---------- HEADER / NAV (responsive, unificado) ---------- */

/* base header */
.site-header {
  background: rgba(255,255,255,0.0); /* mantiene transparencia si la usas */
  position: relative;
  z-index: 60;
}
.container.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* brand */
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo { width:46px; height:46px; object-fit:cover; border-radius:50%; display:block; }
.site-title { font-weight:700; color:var(--ls-accent-dark,#0b4d3a); letter-spacing:1px; }

/* main nav desktop */
.main-nav { display:flex; gap:28px; align-items:center; }
.main-nav a {
  text-decoration:none;
  color:var(--ls-accent-dark,#0b4d3a);
  padding:8px 10px;
  border-radius:10px;
  font-weight:600;
  transition: background .18s, color .18s, transform .12s;
}
.main-nav a:hover,
.main-nav a:focus { background:rgba(11,77,58,0.06); transform:translateY(-1px); }
.main-nav a.active { background:var(--ls-accent, #19796b); color:#fff; box-shadow:0 6px 14px rgba(0,0,0,0.08); }

/* hamburger for small screens */
.nav-toggle {
  display:none;
  background:transparent;
  border:0;
  font-size:22px;
  line-height:1;
  padding:8px;
  border-radius:8px;
}

/* mobile behaviour */
@media (max-width:880px) {
  .main-nav { 
    position:fixed;
    right:0;
    top:0;
    height:100vh;
    width:86%;
    max-width:340px;
    background:var(--ls-surface,#fff);
    box-shadow:-18px 0 40px rgba(0,0,0,.12);
    transform:translateX(110%);
    transition:transform .28s cubic-bezier(.22,.9,.2,1);
    flex-direction:column;
    padding:84px 18px 28px;
    gap:18px;
    align-items:flex-start;
    overflow:auto;
  }
  .main-nav.open { transform:translateX(0); }
  .nav-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); opacity:0; transition:opacity .2s; pointer-events:none; z-index:50; }
  .nav-backdrop.open { display:block; pointer-events:auto; opacity:1; }
  .nav-toggle { display:inline-flex; } /* show hamburger */
  /* nav links full width on mobile, large tap area */
  .main-nav a { display:block; width:100%; padding:14px 16px; border-radius:12px; background:transparent; }
  .main-nav a.active { background:var(--ls-accent,#19796b); color:#fff; }
}

/* ensure nav sits under header visually */
.header-inner { position:relative; z-index:60; }
/* HERO responsive (usa vh para adaptar) */
.hero { position:relative; overflow:hidden; }
.hero-bg {
  background-image: url('images/bg-blurred.jpg'); /* tu bg */
  background-size:cover;
  background-position: center right;
  filter:none;
  position:absolute;
  inset:0;
  z-index:0;
  opacity:1;
}

/* layout hero inner (texto + visual) */
.hero-inner { display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:center; position:relative; z-index:2; padding:48px 0; }
.hero-copy { color:var(--ls-foreground,#fff); }

/* control altura en desktop y mobile */
@media (min-width:981px){
  .hero { min-height:520px; }
}
@media (max-width:980px){
  .hero-inner { grid-template-columns:1fr; padding:28px 20px; }
  .hero { min-height:56vh; } /* hero ocupa 56% viewport height en móvil */
  .hero-bg { background-position: center top; } /* recorta arriba en móvil */
  .hero-visual { order:2; margin-top:16px; }
  .hero-copy { order:1; }
}
@media (max-width:680px){
  .card__actions .btn { width:100%; display:inline-flex; justify-content:center; }
}
/* ========== UNIFICACIÓN BOTONES + HEADER MÓVIL + HERO ========== */


}

/* Spotify button */
.btn--spotify, .track-cta { background:#1DB954 !important; color:#fff !important; box-shadow:0 6px 14px rgba(29,185,84,0.12) !important; }

/* Botón inline pequeño (por ejemplo en hero 'Comprar en:') */
.buy-links a { padding:6px 10px !important; font-weight:700; border-radius:999px; }

/* Forzar que dentro de cards no se estiren */
.card__actions a,
.cards .card a,
.card .card__actions a,
.hero .buy-links a {
  width: auto !important;
  display: inline-flex !important;
}

/* ---- Header / nav móvil ---- */
/* ocultamos el nav horizontal en móviles y mostramos toggle (usa la clase .open que ya gestiona tu script) */
@media (max-width: 980px) {
  .main-nav { 
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: min(320px, 84vw);
    background: var(--ls-surface, #fff);
    transform: translateX(110%);
    transition: transform .28s cubic-bezier(.22,.9,.3,1);
    box-shadow: -12px 0 30px rgba(0,0,0,0.08);
    padding: 72px 18px;
    z-index: 9999;
    display: block;
    overflow-y: auto;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a { display:block; padding:14px 10px; font-weight:700; color:var(--ls-accent-dark,#0b4d3a); }
  .nav-toggle { display:inline-flex !important; }          /* hamburguesa visible */
  .brand .site-title { display:none; }                     /* oculta texto si falta espacio */
  .container.header-inner { align-items:center; gap:10px; }
}

/* en escritorio dejar nav en línea */
@media (min-width: 981px) {
  .nav-toggle { display:none !important; }
  .main-nav { position: static; display:flex; gap:28px; align-items:center; transform:none; box-shadow:none; height:auto; width:auto; padding:0; }
  .main-nav a { padding:0; display:inline-block; }
}

/* ---- Hero: controlar altura en móvil para que no quede enorme ---- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 58vh;           /* desktop/large default */
  display: flex;
  align-items: center;
}

/* hero visual/image - ajuste responsivo */
.hero-visual img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* reducir altura en pantallas pequeñas */
@media (max-width: 980px) {
  .hero { min-height: 40vh !important; padding: 28px 16px; }
  .hero-bg { background-position: center top !important; background-size: cover !important; }
  .hero-inner { flex-direction: column; gap:18px; align-items:flex-start; }
  .hero-visual { width: 100%; order: 2; }
  .hero-copy { width: 100%; order: 1; }
}

/* si quieres que la imagen del hero se reduzca más en móvil */
@media (max-width: 420px) {
  .hero { min-height: 36vh !important; }
  .hero-copy h1 { font-size: clamp(20px, 6.8vw, 34px); line-height:1.05; }
}

/* ---- evitar anchos inesperados en secciones secundarias ---- */
.container { max-width: 1100px; margin:0 auto; padding: 0 18px; box-sizing:border-box; }

/* ---- pequeño ajuste para que links 'abrir playlist' luzcan como botón enlace elegante ---- */
.track-cta {
  background: transparent;
  color: var(--ls-accent-dark,#0b4d3a);
  border: none;
  padding: 8px 0;
  text-decoration: underline;
  font-weight:700;
}
/* ===========================
   HERO: full overlay + mobile tweaks
   =========================== */
.hero {
  position: relative;
  overflow: hidden;
  /* establece una altura cómoda por defecto (ajustable) */
  min-height: 64vh;
  display: flex;
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; /* mejora recorte */
  z-index: 0;
  transform: translateZ(0);
}

/* overlay suave (oscurece/colorea la imagen para legibilidad) */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,20,18,0.28) 0%, rgba(10,30,28,0.48) 60%, rgba(255,255,255,0.02) 100%);
  z-index: 1;
  pointer-events: none;
}

/* tu contenido por encima */
.hero-inner { position: relative; z-index: 2; display:flex; gap:28px; align-items:center; }

/* ilustración a la derecha (esconde en pantallas pequeñas si ocupa demasiado) */
.hero-visual img { max-width: 420px; width: 40vw; height: auto; border-radius: 8px; box-shadow: 0 10px 26px rgba(7,20,16,0.12); }

/* TEXTO: limita anchura para mejor lectura */
.hero-copy { max-width: 760px; }

/* Mobile tweaks */
@media (max-width: 880px){
  .hero { min-height: 56vh; padding: 28px 18px; }
  .hero-inner { flex-direction: column-reverse; align-items: flex-start; gap:18px; }
  .hero-visual { width:100%; display:block; text-align:center; }
  .hero-visual img { width: 86%; max-width: 360px; height:auto; }
  /* si quieres ocultar la imagen móvil, descomenta:
  .hero-visual { display:none; }
  */
  .hero-copy { max-width: 100%; }
}

/* forzar que la bg no "explote" en móviles (si usas imagen inline o background-image en HTML, esto ayuda) */
.hero-bg { background-attachment: scroll; }

/* pequeño ajuste para no colapsar en móvil */
@media (max-width:520px){
  .buy-links { flex-wrap:wrap; gap:8px; }
  .store-btn{ padding:8px 12px; font-size:13px; }
}


/* ===========================
   HEADER / NAV móvil (unificar estilo)
   =========================== */
/* nav estándar horizontal */
.main-nav { display:flex; gap:28px; align-items:center; justify-content:center; }

/* en móvil: colapsar a hamburguesa (si ya tienes toggle, fuerza reglas visuales) */
@media (max-width: 880px){
  .main-nav { position:fixed; top:0; right:0; bottom:0; width:85%; max-width:360px; transform:translateX(110%); background:linear-gradient(180deg,#fff,#f8f2ec); box-shadow:-12px 0 40px rgba(7,20,16,0.06); padding: 80px 20px; display:flex; flex-direction:column; gap:18px; transition: transform .24s ease; z-index:9999; }
  .main-nav.open { transform:translateX(0); }
  .nav-toggle{ display:block; }
}

/* reduce spacing of nav links in very small screens */
@media (max-width:420px){
  .main-nav a{ padding:10px 6px; font-size:15px; }
}

/* ===========================
   small helpers
   =========================== */
.btn { display:inline-block; text-decoration:none; padding:8px 14px; border-radius:999px; }
.muted{ color:var(--muted,#6b6b6b); }
/* NAV layout: desktop horizontal, móvil oculto (abrir con .open) */
.main-nav{ display:flex; gap:30px; align-items:center; }
.nav-toggle{ display:none; background:none; border:0; font-size:22px; cursor:pointer; }

/* móvil */
@media (max-width:880px){
  .nav-toggle{ display:block; }
  .main-nav{
    position:fixed;
    inset:70px 12px auto 12px; /* aparece debajo del header */
    display:block;
    background: rgba(255,255,255,0.98);
    border-radius:12px;
    padding:16px;
    box-shadow:0 18px 40px rgba(7,20,16,0.12);
    transform: translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
    max-height:70vh;
    overflow:auto;
  }
  .main-nav.open{ opacity:1; transform:none; pointer-events:auto; }
  .main-nav a{ display:block; padding:10px 6px; }
}
/* -------- HERO: tamaño y comportamiento responsive unificado -------- */
.hero {
  /* altura base y control de overflow */
  min-height: 40vh;           /* tamaño por defecto: 40% de la altura de la ventana */
  display: flex;
  align-items: center;
  padding: 40px 0;
  box-sizing: border-box;
  position: relative;
}

/* Contenedor interno para controlar columnas/visual y copy */
.hero .container.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr; /* texto + imagen a la derecha */
  gap: 28px;
  align-items: center;
}

/* fondo del hero (si usas .hero-bg con imagen de fondo) */
.hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
}

/* contenido encima del fondo */
.hero .hero-copy,
.hero .hero-visual { position: relative; z-index: 2; }

/* texto del héroe — escalado responsivo */
.hero .with-star { 
  font-size: clamp(28px, 4.2vw, 56px);  /* escala entre 28 y 56px según ancho */
  line-height: 1.05;
  margin: 0 0 12px;
}

/* párrafo secundario */
.hero .lead {
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.55;
  max-width: 58ch;
  margin-bottom: 18px;
}

/* imagen visual del hero (controla tamaño y que no desborde) */
.hero .hero-visual img {
  width: 100%;
  max-width: 420px;   /* evita que la ilustración sea gigante en escritorio */
  height: auto;
  display:block;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
}

/* CTA y botones dentro del hero */
.hero .hero-ctas { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-block; padding:10px 18px; border-radius:12px; text-decoration:none; }

/* -------- BUY LINKS: Amazon / Lulu iguales -------- */
.buy-links { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px; }

/* estilo común para botones de tienda */
.store-btn {
  background: #f6f0e4;            /* fondo suave (ajusta si ya tienes variable) */
  color: #0c6e63;                 /* texto */
  border: 2px solid rgba(12,110,99,0.15);
  padding:8px 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:98px;                 /* ambos botones ocuparán el mismo ancho mínimo */
  box-shadow: 0 6px 14px rgba(14,84,74,0.08);
  font-weight:600;
}

/* si quieres que exactamente el mismo ancho, usa width fijo (ejemplo 100px)
.store-btn { width:100px; } */

/* botón Amazon con borde y sombra verde (ejemplo) */
.store-btn.amazon { background: #fff; border-color: rgba(9,125,109,0.12); }

/* botón Lulu idéntico (puedes añadir icono con ::before) */
.store-btn.lulu { background: #fff; border-color: rgba(9,125,109,0.12); }

/* -------- Media queries: reducir hero en pantallas pequeñas -------- */
@media (max-width: 980px) {
  .hero { min-height: 46vh; padding:34px 0; }
  .hero .container.hero-inner { grid-template-columns: 1fr; gap:18px; }
  .hero .hero-visual img { max-width:360px; margin:0 auto; }
}

@media (max-width: 680px) {
  .hero { min-height: 34vh; padding:22px 0; }
  .hero .with-star { font-size: clamp(20px,5.2vw,36px); }
  .hero .lead { font-size:14px; max-width: 100%; }
  .buy-links { gap:8px; }
  .store-btn { min-width:84px; padding:8px 12px; }
  .hero .hero-visual img { max-width:100%; }
}

/* ===== HERO UNIFICADO ===== */
.hero-banner {
  position: relative;
  padding: 28px 36px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 28px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  color: #fff;
  overflow: hidden;
}

/* texto dentro del hero (ajusta tipografías) */
.hero-banner .hero-inner {
  max-width: 980px;
}
.hero-banner .hero-title {
  font-family: var(--ls-heading-font, "Cavolini", "AdlamLocal", "Poppins", sans-serif);
  font-size: 40px;
  margin: 0 0 8px;
  line-height: 1.05;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.hero-banner .hero-lead {
  font-size: 16px;
  max-width: 760px;
  margin: 8px 0 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

/* si quieres botón dentro del hero */
.hero-banner .hero-ctas { margin-top:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* mobile: reducir tamaño general */
@media (max-width: 768px){
  .hero-banner {
    padding: 18px 20px;
    border-radius: 14px;
    margin-bottom: 20px;
  }
  .hero-banner .hero-title { font-size: 28px; }
  .hero-banner .hero-lead { font-size: 15px; }
}

/* opcional: override de antiguos nombres para que no rompan */
.universe-hero, .resources-hero, .explore-hero, .hero {
  /* si existía estilo propio, lo anulamos y dejamos que hero-banner mande */
}
/* ---- Forzar AdlamLocal en los títulos con estrella (fix) ---- */
@font-face{
  font-family: "AdlamLocal";
  src: url("fonts/ADLaMDisplay-Regular.woff2") format("woff2"),
       url("fonts/ADLaMDisplay-Regular.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* regla con alta especificidad para que no la aplasten */
html body .section-sub,
html body .section-sub *,
html body .section-title,
html body .mini-star,
html body .with-star,
html body .star-inline,
html body .section-sub .mini-star {
  font-family: "AdlamLocal", "Poppins", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}