/* Marca "Marea" sobre Bootstrap: se redefine su tema con variables CSS. */

:root {
  --vf-navy: #161F4A;
  --vf-navy-deep: #101738;
  --vf-navy-soft: #1C2759;
  --vf-cobalt: #24368A;
  --vf-tangerine: #FF6F3C;
  --vf-amber: #FFB02E;
  --vf-ice: #CFEDE8;
  --vf-cream: #FBF1DE;
  --vf-muted: #B8C0E6;
  --vf-ink-muted: #4A5180;

  --vf-font-display: "Caprasimo", Georgia, "Times New Roman", serif;
  --vf-font-chunky: "Bagel Fat One", "Arial Black", Impact, sans-serif;
  --vf-font-body: "Zilla Slab", Rockwell, Georgia, serif;
  --vf-nav-h: 64px;

  --bs-font-sans-serif: var(--vf-font-body);
  --bs-body-font-size: 1.125rem;
  --bs-body-line-height: 1.55;
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
}

/* Tema oscuro: el aspecto principal del sitio */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--vf-navy);
  --bs-body-bg-rgb: 22, 31, 74;
  --bs-body-color: #fff;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--vf-muted);
  --bs-tertiary-bg: var(--vf-navy-soft);
  --bs-tertiary-bg-rgb: 28, 39, 89;
  --bs-border-color: var(--vf-cobalt);
  --bs-link-color: var(--vf-amber);
  --bs-link-color-rgb: 255, 176, 46;
  --bs-link-hover-color: #FFC766;
  --bs-link-hover-color-rgb: 255, 199, 102;
}

/* Bloques claros ("papel") dentro del sitio: tarjetas y formulario */
.vf-paper {
  --bs-body-bg: #fff;
  --bs-body-color: var(--vf-navy);
  --bs-body-color-rgb: 22, 31, 74;
  --bs-emphasis-color: var(--vf-navy);
  --bs-secondary-color: var(--vf-ink-muted);
  --bs-border-color: #6B7199;
  --bs-link-color: var(--vf-navy);
  --bs-link-color-rgb: 22, 31, 74;
  --bs-link-hover-color: var(--vf-cobalt);
  --bs-link-hover-color-rgb: 36, 54, 138;
  --bs-card-bg: var(--vf-cream);
  --bs-card-color: var(--vf-navy);
  --bs-card-border-width: 0;
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: 1rem;
  background-color: var(--vf-cream);
  color: var(--vf-navy);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { padding-top: var(--vf-nav-h); }
section[id] { scroll-margin-top: var(--vf-nav-h); }

h1, h2, h3, .vf-display { font-family: var(--vf-font-display); font-weight: 400; }

:focus-visible { outline: 3px solid var(--vf-amber); outline-offset: 2px; }
.vf-paper :focus-visible { outline-color: var(--vf-navy); }

/* Fondo de garabatos */
.vf-pattern {
  background-color: var(--vf-navy);
  background-image: url("../images/pattern.svg");
  background-size: 340px 340px;
}

/* Navbar */
.vf-navbar {
  min-height: var(--vf-nav-h);
  background-color: var(--vf-navy);
  border-bottom: 1px solid var(--vf-cobalt);
  --bs-navbar-color: var(--vf-amber);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
}
.vf-navbar .navbar-brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--vf-font-display); font-size: 1.35rem;
}
.vf-navbar .navbar-brand img { height: 30px; width: auto; }
.vf-navbar .nav-link {
  font-weight: 700; font-size: .95rem;
  letter-spacing: .12em; text-transform: uppercase;
}

/* Hero */
.hero { padding: 4rem 0 4.5rem; }
.hero-logo { width: clamp(190px, 52vw, 320px); height: auto; }
.hero h1 { font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1.05; }
.hero-tagline { color: var(--vf-amber); font-size: clamp(1.25rem, 3.6vw, 1.6rem); }
.hero-copy { max-width: 38rem; margin-inline: auto; }

.vf-tags { list-style: none; padding: 0; margin: 0; }
.vf-tag {
  display: inline-block; padding: .2rem .8rem; border-radius: 50rem;
  font-size: .95rem; font-weight: 700; color: var(--vf-navy);
}
.vf-tag-apple { background: var(--vf-amber); }
.vf-tag-nerd { background: var(--vf-ice); }

/* Botones */
.btn {
  --bs-btn-border-radius: 50rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-width: 2px;
  --bs-btn-padding-x: 1.25rem;
}
.btn-lg { --bs-btn-border-radius: 50rem; --bs-btn-padding-x: 1.6rem; }
.btn-sm { --bs-btn-border-radius: 50rem; --bs-btn-padding-x: .9rem; --bs-btn-font-size: 1rem; }
.btn-primary {
  --bs-btn-color: var(--vf-navy);
  --bs-btn-bg: var(--vf-amber);
  --bs-btn-border-color: var(--vf-amber);
  --bs-btn-hover-color: var(--vf-navy);
  --bs-btn-hover-bg: #FFC766;
  --bs-btn-hover-border-color: #FFC766;
  --bs-btn-active-color: var(--vf-navy);
  --bs-btn-active-bg: #FFC766;
  --bs-btn-active-border-color: #FFC766;
  --bs-btn-disabled-color: var(--vf-navy);
  --bs-btn-disabled-bg: var(--vf-amber);
  --bs-btn-disabled-border-color: var(--vf-amber);
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}
.btn-vf-ink {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--vf-navy);
  --bs-btn-border-color: var(--vf-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--vf-cobalt);
  --bs-btn-hover-border-color: var(--vf-cobalt);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--vf-cobalt);
  --bs-btn-active-border-color: var(--vf-cobalt);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--vf-navy);
  --bs-btn-disabled-border-color: var(--vf-navy);
  --bs-btn-focus-shadow-rgb: 36, 54, 138;
}
.btn-vf-ink-outline {
  --bs-btn-color: var(--vf-navy);
  --bs-btn-border-color: var(--vf-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--vf-navy);
  --bs-btn-hover-border-color: var(--vf-navy);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--vf-navy);
  --bs-btn-active-border-color: var(--vf-navy);
  --bs-btn-focus-shadow-rgb: 36, 54, 138;
}

/* Títulos de sección con garabato */
.vf-heading { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.vf-heading::after {
  content: ""; display: block; width: 92px; height: 14px; margin-top: .5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 14'%3E%3Cpath d='M4 9q10-10 21 0t21 0 21 0 21 0' fill='none' stroke='%23FF6F3C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
.text-center > .vf-heading::after, .vf-heading.text-center::after { margin-inline: auto; }

.vf-band { border-block: 1px solid var(--vf-cobalt); }

/* Episodios */
.episode-card { overflow: hidden; }
.episode-card .card-title { font-size: 1.35rem; line-height: 1.2; }
.episode-meta { font-size: .95rem; font-weight: 700; }
.episode-media { position: relative; aspect-ratio: 16 / 9; background: var(--vf-navy-deep); }
.episode-media img,
.episode-media iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }
.episode-media.is-audio { aspect-ratio: auto; height: 152px; }
.episode-art {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--vf-navy); background: var(--vf-tangerine);
}
.episode-art.art-amber { background: var(--vf-amber); }
.episode-art.art-ice { background: var(--vf-ice); }
.episode-art-number { font-family: var(--vf-font-chunky); font-size: 4rem; line-height: 1; }
.episode-art-label { font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Anfitriones */
.host-photo {
  width: 200px; height: 200px; font-size: 1.1rem; font-weight: 700;
  background: var(--vf-cobalt); color: #fff; border: 6px solid var(--vf-tangerine);
  object-fit: cover;
}
.host-photo.host-alt { border-color: var(--vf-ice); }
.host h3 { font-size: 1.5rem; }

/* Boletín */
.vf-panel { border-radius: 1.25rem; padding: 1.75rem 1.5rem; }
@media (min-width: 576px) { .vf-panel { padding: 2.5rem; } }
.vf-paper .form-control { background-color: #fff; color: var(--vf-navy); border-width: 2px; }
.vf-paper .form-control:focus {
  border-color: var(--vf-navy); box-shadow: 0 0 0 .25rem rgba(255, 176, 46, .6);
}
.vf-paper .form-check-input { border-width: 2px; background-color: #fff; }
.vf-paper .form-check-input:checked { background-color: var(--vf-navy); border-color: var(--vf-navy); }
.vf-paper .form-check-input:focus { border-color: var(--vf-navy); box-shadow: 0 0 0 .25rem rgba(255, 176, 46, .6); }
.vf-paper .form-text { color: var(--vf-ink-muted); font-size: .95rem; }

/* Campo trampa anti-bots, fuera de pantalla */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pie */
.vf-footer { background: var(--vf-navy-deep); color: var(--vf-muted); border-top: 1px solid var(--vf-cobalt); }