/* =============================================
   styles.css — Samuel Zurisaday — Sopor Enigma Podcast
============================================== */

/* ========== Variables y Reset ========== */
:root{
  --color-bg:#0b0c10;
  --color-surface:#111318;
  --color-surface-2:#161a22;
  --color-text:#e8e6e1;
  --color-muted:#a0a6ad;
  --color-border:#232834;
  --color-accent:#e0442e;
  --color-accent-2:#3fe0a8;
  --accent-rgb:224,68,46;
  --accent2-rgb:63,224,168;
  --accent3-rgb:56,128,78;
  --radius:14px;
  --shadow-1:0 10px 30px rgba(0,0,0,.45);
  --shadow-2:0 6px 18px rgba(0,0,0,.35);
  --shadow-neon-red:0 0 32px rgba(224,68,46,.55);
  --shadow-neon-green:0 0 28px rgba(63,224,168,.50);
  --max-w:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(100vmax 60vmax at 50% -20%, #101219 0%, var(--color-bg) 60%) fixed;
  color:var(--color-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--color-text);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px dashed var(--color-accent);outline-offset:3px}

/* Fondo con grano/vignette sutil */
body::before{
  content:"";position:fixed;inset:-20vmax;pointer-events:none;z-index:-1;
  background:
    radial-gradient(140vmax 90vmax at 58% -22%, rgba(var(--accent-rgb), .30), transparent 62%),
    radial-gradient(90vmax 60vmax at 20% 0%, rgba(var(--accent-rgb), .18), transparent 60%),
    radial-gradient(110vmax 80vmax at -10% 70%, rgba(var(--accent2-rgb), .22), transparent 62%),
    radial-gradient(100vmax 70vmax at 110% 45%, rgba(var(--accent2-rgb), .14), transparent 60%),
    radial-gradient(100vmax 60vmax at 50% 120%, rgba(var(--accent3-rgb), .10), transparent 60%),
    linear-gradient(180deg, #0b0c10 0%, #101219 40%, #0b0c10 100%);
  filter:contrast(108%) saturate(108%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 2px, transparent 2px, transparent 4px),
    radial-gradient(70vmax 50vmax at 74% -6%, rgba(var(--accent-rgb), .13), transparent 70%),
    radial-gradient(60vmax 40vmax at 0% 80%, rgba(var(--accent2-rgb), .12), transparent 70%);
  mix-blend-mode:overlay;opacity:.20;
}

/* Contenedores y tarjetas */
.container{width:min(100% - 2rem, var(--max-w)); margin-inline:auto}
section{padding:64px 0; scroll-margin-top:84px}
.card{background:linear-gradient(180deg, var(--color-surface), var(--color-surface-2)); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-1)}

/* Header y navegación */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.6rem .9rem;background:var(--color-accent);color:#0b0011;border-radius:8px;z-index:9999}
header{position:sticky;top:0;z-index:50;background:rgba(11,11,15,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{width:40px;height:40px;object-fit:contain;border-radius:6px;border:1px solid var(--color-border);background:#08080c}
.brand .title{display:grid}
.brand .title strong{font-weight:700;letter-spacing:.4px}
.brand .title span{font-size:.82rem;color:var(--color-muted)}
.nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.nav a.btn{text-decoration:none;border:1px solid var(--color-border);padding:.55rem .9rem;border-radius:999px;display:inline-flex;align-items:center;gap:.5rem;box-shadow:var(--shadow-2)}
.nav a.btn:hover{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb), .20);text-decoration:none}

/* Menú móvil (drawer inferior) */
.menu-toggle{display:none;background:none;border:1px solid var(--color-border);color:var(--color-text);padding:.45rem .6rem;border-radius:10px}
@media (max-width:880px){
  .nav ul{display:none}
  .menu-toggle{display:inline-flex;align-items:center;gap:.5rem}
  .nav[aria-expanded="true"] ul{
    display:flex;position:absolute;left:0;right:0;top:100%;
    background:rgba(12,12,18,.92);border-bottom:1px solid var(--color-border);
    padding:1rem;flex-direction:column
  }
}

/* Hero */
.hero{padding:80px 0 48px;position:relative}
.glow{text-shadow:0 0 18px rgba(224,68,46,.22), 0 0 42px rgba(36,117,118,.18)}
.hero h1{font-size:clamp(2rem, 4vw + .5rem, 3rem);margin:.2rem 0 .3rem}
.hero h2{font-size:clamp(1rem, 2vw + .3rem, 1.2rem);color:var(--color-muted);margin:0 0 1rem}
.tagline{font-size:1.05rem;color:#dcdce4;max-width:60ch}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.cta{border:1px solid var(--color-accent);padding:.7rem 1rem;border-radius:999px;font-weight:600;box-shadow:0 0 0 3px rgba(181,26,255,.12)}
.cta.secondary{border-color:var(--color-border);box-shadow:none}

/* Grids */
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:900px){ .grid-2, .grid-3{grid-template-columns:1fr}}

/* Sobre mí */
.about p{margin:0}

/* Libros */
.books .book-card{display:grid;grid-template-columns:140px 1fr;gap:1rem;padding:1rem}
.book-cover{width:100%;height:200px;object-fit:cover;border-radius:10px;border:1px solid var(--color-border)}
.book-title{margin:0;font-size:1.15rem}
.book-meta{color:var(--color-muted);font-size:.92rem}
.book-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.chip{border:1px solid var(--color-border);padding:.35rem .6rem;border-radius:999px;font-size:.85rem}

/* Podcast */
.podcast-embed{aspect-ratio:16/9;width:100%;border:1px solid var(--color-border);border-radius:12px;overflow:hidden}
.episode-list{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.5rem}

/* Redes */
.socials{display:grid;gap:1rem}
.social-list{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.social-btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--color-border);padding:.55rem .8rem;border-radius:999px;text-decoration:none;box-shadow:var(--shadow-2)}
.social-btn:hover{border-color:var(--color-accent);text-decoration:none}

/* Prensa */
.press-quote{padding:1rem;font-style:italic;color:#d0cfe4;border-left:3px solid var(--color-accent)}

/* Contacto */
form{display:grid;gap:.7rem}
input,textarea{width:100%;background:#0f0f16;color:var(--color-text);border:1px solid var(--color-border);border-radius:10px;padding:.7rem .9rem}
label{font-size:.9rem;color:var(--color-muted)}
button.primary{background:var(--color-accent);color:#0a0010;border:none;padding:.8rem 1rem;border-radius:10px;font-weight:700}
button.primary:hover{filter:brightness(1.06)}

/* Footer */
footer{border-top:1px solid var(--color-border);color:var(--color-muted);padding:28px 0;font-size:.92rem}
.footer-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem}
.footer-nav a{display:inline-flex;align-items:center;border:1px solid var(--color-border);padding:.35rem .7rem;border-radius:999px;color:var(--color-text);text-decoration:none}
.footer-nav a:hover{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(224,68,46,.15);text-decoration:none}
.footer-nav .to-top{margin-left:auto}
@media (max-width:640px){ .footer-nav .to-top{margin-left:0}}

/* Sticky CTA (móvil) */
.sticky-cta{position:fixed;bottom:.8rem;left:50%;transform:translateX(-50%);background:#0f0f16cc;border:1px solid var(--color-border);backdrop-filter:blur(8px);border-radius:999px;padding:.35rem .5rem;display:flex;gap:.4rem;align-items:center;z-index:40}
.sticky-cta a{padding:.5rem .8rem;border-radius:999px;border:1px solid var(--color-border)}
@media (min-width:860px){ .sticky-cta{display:none}}

/* Hero grid con retrato */
.hero-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:min(4vw,2rem);align-items:center}
.hero-figure{display:flex;justify-content:center;order:-1}
.hero-portrait{width:100%;max-width:380px;aspect-ratio:4/5;object-fit:cover;border-radius:16px;border:1px solid var(--color-border);box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 6px rgba(224,68,46,.08);background:#0b0c10}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr} .hero-figure{order:-1;margin-bottom:1rem}}

/* Galería / Carrusel */
.gallery h3{margin-bottom:.4rem}
.carousel{position:relative;overflow:hidden;padding:.6rem}
.carousel-viewport{overflow:hidden;border-radius:var(--radius)}
.carousel-track{display:flex;transition:transform 400ms ease;will-change:transform}
.slide{min-width:100%}
.slide img{width:100%;display:block;border-radius:12px;border:1px solid var(--color-border);box-shadow:0 10px 24px rgba(0,0,0,.45)}
.carousel-prev,.carousel-next{position:absolute;top:50%;transform:translateY(-50%);border:1px solid var(--color-border);background:rgba(15,15,22,.85);color:var(--color-text);padding:.5rem .6rem;border-radius:12px;backdrop-filter:blur(6px)}
.carousel-prev{left:.6rem}.carousel-next{right:.6rem}
.carousel-prev:hover,.carousel-next:hover{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb), .18);text-decoration:none}
.carousel-dots{display:flex;gap:.4rem;justify-content:center;margin-top:.6rem}
.carousel-dots button{width:10px;height:10px;border-radius:50%;border:1px solid var(--color-border);background:transparent}
.carousel-dots button[aria-selected="true"]{background:radial-gradient(circle at 50% 50%, var(--color-accent), var(--color-accent-2));border-color:transparent;box-shadow:0 0 0 3px rgba(224,68,46,.15)}

/* Lite YouTube */
.yt-lite{position:relative;background-size:cover;background-position:center;height:0;padding-bottom:56.25%;border:1px solid var(--color-border);border-radius:12px;overflow:hidden;cursor:pointer}
.yt-lite::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.45));transition:opacity .25s}
.yt-lite:hover::before{opacity:.2}
.lty-playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;border:2px solid var(--color-accent);box-shadow:0 0 0 8px rgba(var(--accent-rgb),.15);font-size:1.2rem;background:rgba(15,15,22,.7)}

/* Episodios */
.episode-cards{display:grid;gap:.8rem;grid-template-columns:repeat(1, minmax(0,1fr))}
.episode-card{padding:.9rem;border:1px solid var(--color-border);border-radius:12px;background:linear-gradient(180deg, var(--color-surface), var(--color-surface-2));box-shadow:var(--shadow-2)}
.episode-card h4{margin:.2rem 0 .4rem}
.episode-card p{margin:0 0 .6rem;color:var(--color-muted)}

/* Breakpoints */
@media (min-width:480px){ .books .book-card{grid-template-columns:160px 1fr} }
@media (min-width:768px){
  .hero-grid{grid-template-columns:.8fr 1.2fr}
  .grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
  .episode-cards{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (min-width:1024px){
  .grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
  .episode-cards{grid-template-columns:repeat(3, minmax(0,1fr))}
  .hero h1{font-size:clamp(2.4rem, 2.5vw, 3.2rem)}
}
@media (min-width:1280px){ .container{width:min(100% - 3rem, 1200px)} }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .glow,.cta,.social-btn,.carousel-track{transition:none!important}
}

/* ========== Sistema de botones + NEÓN rojo ========== */
.btn, a.cta, .social-btn, .footer-nav a, .sticky-cta a, .book-actions .cta, .episode-card .cta, .menu-toggle, .chip, .mini, button.primary{
  --btn-bg:rgba(255,255,255,.02);
  --btn-bd:rgba(255,255,255,.10);
  --btn-tx:var(--color-text);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:999px;border:1px solid var(--btn-bd);
  background:radial-gradient(120% 120% at 50% -20%, rgba(var(--accent2-rgb), .08), transparent 40%), var(--btn-bg);
  color:var(--btn-tx);font-weight:700;letter-spacing:.2px;text-decoration:none;
  box-shadow:var(--shadow-2);
  transition:border-color .18s ease, box-shadow .22s ease, background-color .18s ease, transform .06s ease, text-shadow .22s ease;
}

/* Neon rojo en reposo (marcado) */
:is(.nav a.btn, .btn, a.cta, .social-btn, .footer-nav a, .sticky-cta a,
    .book-actions .cta, .episode-card .cta, .chip, .menu-toggle, button.primary){
  border-color: rgba(var(--accent-rgb), .45) !important;
  background: radial-gradient(130% 130% at 50% -30%, rgba(var(--accent-rgb), .12), transparent 40%), rgba(255,255,255,.02) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .12), 0 0 18px rgba(var(--accent-rgb), .28) !important;
  text-shadow: 0 0 4px rgba(var(--accent-rgb), .35) !important;
}

/* Neon rojo intensificado en hover/focus */
:is(.nav a.btn, .btn, a.cta, .social-btn, .footer-nav a, .sticky-cta a,
    .book-actions .cta, .episode-card .cta, .chip, .menu-toggle, button.primary):hover,
:is(.nav a.btn, .btn, a.cta, .social-btn, .footer-nav a, .sticky-cta a,
    .book-actions .cta, .episode-card .cta, .chip, .menu-toggle, button.primary):focus-visible{
  border-color: rgba(var(--accent-rgb), .85) !important;
  background: radial-gradient(150% 150% at 50% -30%, rgba(var(--accent-rgb), .26), transparent 35%), rgba(255,255,255,.05) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .22), 0 0 42px rgba(var(--accent-rgb), .65) !important;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), .75) !important;
  text-decoration:none !important;
}

/* Activo/press */
:is(.nav a.btn, .btn, a.cta, .social-btn, .footer-nav a, .sticky-cta a,
    .book-actions .cta, .episode-card .cta, .chip, .menu-toggle, button.primary):active{
  transform:translateY(1px);
}





/* === Carrusel estable: UNA sola estrategia (aspect-ratio en el viewport) === */

/* Ventana del carrusel: recorta y fija proporción */
.carousel-viewport {
  overflow: hidden;
  border-radius: var(--radius);
  /* Elige el ratio de tus imágenes: 16/9, 3/2, 4/3, etc. */
  aspect-ratio: 16 / 9;
  position: relative; /* Por seguridad */
}

/* Pista horizontal */
.carousel-track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 400ms ease;
  will-change: transform;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Un slide por “pantalla” */
.slide {
  flex: 0 0 100%;
  max-width: 100%;
  position: relative;   /* IMPORTANTE si en algún momento usas absolute en hijos */
}

/* Imágenes uniformes dentro del viewport */
.slide img {
  display: block;
  width: 100%;
  height: 100%;         /* llena el alto del viewport */
  object-fit: contain;  /* usa 'cover' si prefieres llenar recortando */
  background: #000;     /* fondo para las bandas si usas contain */
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}

/* Evita que algo se “eleve” sobre el resto por stacking accidental */
.carousel, .carousel-viewport, .carousel-track, .slide { z-index: 0; }

/* Quita cualquier ratio fijo del viewport */
.carousel-viewport {
  overflow: hidden;
  border-radius: var(--radius);
  /* elimina: aspect-ratio: 16/9; */
}

/* Un slide por vista */
.slide { flex: 0 0 100%; position: relative; }

/* Imagen fluida, SIN forzar height */
.slide img {
  display: block;
  width: 100%;
  height: auto;             /* ← clave */
  object-fit: initial;      /* o quítalo */
  background: transparent;  /* sin banda negra */
}

/* Por si quedó de antes */
.slide::before { content: none; }  /* ← elimina el hack de padding-top si lo usaste */