/* ============================================================
   Header overlay on the banner — white, centered, all pages
   (Child customization via Customizer Additional CSS)
   ============================================================ */

/* Overlay the header over the banner hero */
#masthead.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  margin: 0;
  padding: 48px 24px;
  text-align: center;
  color: #ffffff;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Soft dark scrim so the white text stays legible on the banner */
#masthead.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.28);
}

/* Branding text in white */
#masthead .site-branding {
  color: #ffffff;
  margin-bottom: 24px;
}
#masthead .site-logo img {
  display: inline-block;
}
#masthead .site-description {
  color: #ffffff;
  max-width: 840px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Menu links in white */
#masthead .main-navigation a,
#masthead .main-navigation a:link,
#masthead .main-navigation a:visited {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
#masthead .main-navigation a:hover {
  color: #ffd98a;
}

/* ---- Home: the in-content full-bleed cover is the banner, rises to top,
   and the header overlays it. ---- */
body.home #masthead.site-header {
  background: transparent;
}
body.home .site-main {
  padding-top: 0;
}
body.home .site-main .entry-content {
  margin-top: 0;
}
/* Hide the duplicated site-name page title on the homepage */
body.home .entry-header {
  display: none;
}

/* ---- Other pages: no cover, so the header carries its own banner band.
   It stays in normal flow so the content below is never hidden. ---- */
body:not(.home) #masthead.site-header {
  position: relative;
  background: url("/wp-content/uploads/2026/10/baner.jpg") center / cover no-repeat;
  min-height: 340px;
}

/* ---- Responsive ---- */
@media only screen and (max-width: 560px) {
  #masthead.site-header {
    min-height: auto;
    padding: 28px 18px;
  }
  #masthead .site-description {
    max-width: 100%;
    font-size: 0.86rem;
  }
  /* The description is tall on narrow screens, so give the home banner room */
  body.home .wp-block-cover {
    min-height: 500px !important;
  }
  body:not(.home) #masthead.site-header {
    min-height: 420px;
  }
}


#masthead .site-description {
  text-wrap: balance;
}

/* ============================================================
   Currículum page (id 2014) — designed from plantilla-cv.html
   ============================================================ */

body.page-id-2014 .entry-header {
  display: none;
}
body.page-id-2014 .entry-content {
  max-width: 1220px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
}

.page-id-2014 {
  --cv-ink: #172033;
  --cv-text: #3a4556;
  --cv-blue: #0b7ca6;
  --cv-gold: #b98a3d;
  --cv-green: #1d9e73;
  --cv-purple: #7a5cf0;
  --cv-line: #e5e9ef;
}

.cv .wp-block-columns {
  gap: 26px;
}
.cv .wp-block-column {
  box-sizing: border-box;
}

/* ---- Hero ---- */
.cv-hero {
  margin-block: 14px 46px;
}
.cv-kind {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cv-gold);
  margin: 0 0 12px;
  text-align: center;
}
.cv-title {
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--cv-ink);
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: .01em;
}
.cv-title:after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  background: linear-gradient(90deg, var(--cv-blue), var(--cv-gold));
  margin: 20px auto 0;
  border-radius: 3px;
}

/* ---- 3 profile cards ---- */
.cv-cards > .wp-block-column {
  background: #fff;
  border: 1px solid var(--cv-line);
  border-left: 7px solid var(--cv-blue);
  border-radius: 14px;
  padding: 26px 26px 24px;
  box-shadow: 0 18px 40px rgba(23, 32, 51, .07);
  min-height: 210px;
  display: flex;
  flex-direction: column;
}
.cv-cards > .cv-card--green {
  border-left-color: var(--cv-green);
}
.cv-cards > .cv-card--purple {
  border-left-color: var(--cv-purple);
}
.cv-cards h3 {
  font-size: 1.24rem;
  font-weight: 800;
  color: #125c80;
  margin: 0 0 12px;
  line-height: 1.2;
}
.cv-cards .cv-card--green h3 {
  color: #0e6b4f;
}
.cv-cards .cv-card--purple h3 {
  color: #5436b0;
}
.cv-cards p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cv-text);
  margin: 0;
}

/* ---- Two columns ---- */
.cv-cols > .wp-block-column {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---- Panels ---- */
.cv-panel {
  background: #fff;
  border: 1px solid var(--cv-line);
  border-radius: 14px;
  padding: 28px 28px 26px;
  box-shadow: 0 14px 34px rgba(23, 32, 51, .05);
}
.cv-panel-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--cv-ink);
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--cv-blue);
  line-height: 1.25;
  letter-spacing: .2px;
}

/* ---- Experience / education items ---- */
.cv-item {
  border-bottom: 1px dashed #e7ebf1;
  padding-bottom: 16px;
  margin-bottom: 18px;
}
.cv-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.cv-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.cv-item-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--cv-ink);
  margin: 0;
  line-height: 1.28;
}
.cv-date {
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 800;
  color: #0b7ca6;
  background: #e9f5fb;
  border-radius: 6px;
  padding: 5px 10px;
  margin: 0;
  white-space: nowrap;
}
.cv-item-sub {
  font-size: .92rem;
  font-weight: 700;
  color: #4b5564;
  margin: 6px 0 0;
}
.cv-item p:not(.cv-item-title):not(.cv-date):not(.cv-item-sub) {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--cv-text);
  margin: 6px 0 0;
}

/* ---- Competencies pills ---- */
.cv-pills {
  gap: 10px;
}
.cv-pill {
  font-size: .9rem;
  color: #354050;
  background: #f4f7fa;
  border: 1.5px solid #d9e0e7;
  border-radius: 999px;
  padding: 8px 14px;
  margin: 0;
}
.cv-pill--accent {
  color: #14684a;
  background: #eafaf3;
  border-color: #8fd8b6;
  font-weight: 800;
}

/* ---- Badges ---- */
.cv-badges {
  gap: 26px;
  margin-top: 6px;
  justify-content: center;
}
.cv-badge {
  margin: 0;
}
.cv-ps {
  width: 96px;
  height: 112px;
  padding: 12px 0;
  background: linear-gradient(#081830 0 50%, #0a3a6c 50%);
  border: 1px solid #245071;
  color: #39a6ef;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 6px;
}
.cv-ps-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #3da5ed;
  margin: 0;
}
.cv-ps-letter {
  font-size: 2rem;
  font-weight: 800;
  color: #2c9fe0;
  margin: 0;
  line-height: 1;
}
.cv-cert {
  width: 150px;
  min-height: 96px;
  background: #fff;
  border: 1px solid #d5dbe2;
  border-bottom: 8px solid #5a9a42;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  border-radius: 6px 6px 2px 2px;
  padding: 22px 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .85rem;
  line-height: 1.3;
  color: #333;
}
.cv-cert p {
  margin: 0;
}
.cv-cert strong {
  display: block;
  font-weight: 800;
  color: #2b2b2b;
}

/* ---- Certificates list ---- */
.cv-subtitle {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--cv-ink);
  margin: 8px 0 14px;
  line-height: 1.3;
}
.cv-certs {
  padding-left: 22px;
  margin: 0;
}
.cv-certs li {
  margin-bottom: 10px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--cv-text);
}
.cv-certs li strong {
  font-weight: 800;
  color: #3b4655;
}

/* ---- Responsive ---- */
@media (max-width: 850px) {
  body.page-id-2014 .entry-content {
    padding-inline: 18px;
  }
  .cv-cols {
    display: block;
  }
  .cv-cols > .wp-block-column {
    margin-block-end: 22px;
  }
  .cv-hero {
    margin-block: 10px 34px;
  }
  .cv-cards > .wp-block-column {
    min-height: 0;
  }
}


/* ============================================================
   Masthead circular profile avatar — visible on EVERY page
   (the home page already shows it in its banner cover, so
   keeping it to inner pages avoids a duplicate on the cover)
   ============================================================ */
body:not(.home) #masthead.site-header::before {
  content: "";
  flex: 0 0 auto;
  width: 142px;
  height: 142px;
  margin: 0 0 22px;
  background-image: url("/wp-content/uploads/2026/10/300x300.png");
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

@media only screen and (max-width: 560px) {
  body:not(.home) #masthead.site-header::before {
    width: 120px;
    height: 120px;
    margin-bottom: 16px;
  }
}

/* ---- Tablet & mobile: Home banner identical to the other pages ---- */
@media only screen and (max-width: 1024px) {

  /* Hide Home's in-content cover (baner + left profile) on small widths */
  body.home .wp-block-cover {
    display: none;
  }

  /* Let Home's masthead carry the banner exactly like inner pages */
  body.home #masthead.site-header {
    position: relative;
    background: url("/wp-content/uploads/2026/10/baner.jpg") center / cover no-repeat;
    min-height: 340px;
  }

  /* Centred circular avatar on Home, matching the other pages */
  body.home #masthead.site-header::before {
    content: "";
    flex: 0 0 auto;
    width: 142px;
    height: 142px;
    margin: 0 0 22px;
        background-image: url("/wp-content/uploads/2026/10/300x300.png");
    background-size: cover;
    background-position: center;
    
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  }
}

@media only screen and (max-width: 560px) {
  /* Match the inner-page mobile banner height and avatar size */
  body.home #masthead.site-header {
    min-height: 420px;
  }
  body.home #masthead.site-header::before {
    width: 120px;
    height: 120px;
    margin-bottom: 16px;
  }
}

/* ============================================================
   WordPress buttons on dark backgrounds — amber (#ffd98a),
   matching the menu option highlight
   ============================================================ */
.wp-block-cover .wp-block-button__link,
.has-background .wp-block-button__link {
  background-color: #ffd98a;
  color: #20242b;
  border-color: #ffd98a;
}
.wp-block-cover .wp-block-button__link:hover,
.wp-block-cover .wp-block-button__link:focus,
.has-background .wp-block-button__link:hover,
.has-background .wp-block-button__link:focus {
  background-color: #ffce6b;
  color: #20242b;
  border-color: #ffce6b;
}

/* ============================================================
   Desktop only: inner-page banners identical to the home banner
   (baner + #687e97 tint + 300x300 profile on the left).
   Tablet & mobile use the centred circular avatar instead.
   ============================================================ */
@media only screen and (min-width: 1025px) {
  body:not(.home) #masthead.site-header {
    background:
      linear-gradient(rgba(104, 126, 151, 0.1), rgba(104, 126, 151, 0.1)),
      url("/wp-content/uploads/2026/10/baner.jpg") center / cover no-repeat;
    min-height: 340px;
  }

  /* Profile photo, left, vertically centred — matching the home cover */
  body:not(.home) #masthead.site-header::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 300px;
    background: url("/wp-content/uploads/2026/10/300x300.png") center / cover no-repeat;
    z-index: -2;
  }

  /* Header text above the profile photo */
  body:not(.home) #masthead .site-branding,
  body:not(.home) #masthead .main-navigation {
    position: relative;
    z-index: 2;
  }
}

/* ============================================================
   Mobile menu toggle button — amber (#ffd98a), like the
   highlight of the main menu options
   ============================================================ */
#toggle-menu.button {
  background-color: #ffd98a;
  color: #20242b;
  border-color: #ffd98a;
}
#toggle-menu.button:hover,
#toggle-menu.button:focus {
  background-color: #ffce6b;
  color: #20242b;
  border-color: #ffce6b;
}

/* ============================================================
   Currículum — adapt to the website width with standard margins
   (side margins come from .entry-content: max-width 1220px +
   clamp(20px, 4vw, 68px) padding)
   ============================================================ */
.cv .wp-block-columns,
.cv-cols,
.cv-cards {
  max-width: 100% !important;
}
.cv .wp-block-columns {
  margin-left: auto;
  margin-right: auto;
}
.cv .wp-block-columns > .wp-block-column {
  width: auto;
  min-width: 0;
}

/* Nested CV groups also fill the container so the hero cards align
   with the main columns */
.cv .wp-block-group__inner-container {
  max-width: 100% !important;
  width: auto;
}

/* cv-hero (3 profile cards) fills the container to align with cv-cols */
.cv .wp-block-group {
  max-width: 100% !important;
}

/* ============================================================
   Relatos: "book" navigation between serie chapters
   ============================================================ */
.relatos-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 2.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid #dfe4ea;
}
.relatos-nav__link {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  max-width: 46%;
  padding: .8rem 1.1rem;
  border-radius: 10px;
  background: #f4f6f8;
  color: #172033;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.relatos-nav__link--prev {
  align-items: flex-start;
  text-align: left;
}
.relatos-nav__link--next {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}
.relatos-nav__dir {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #b98a3d;
}
.relatos-nav__title {
  font-size: 1rem;
  font-weight: 600;
}
.relatos-nav__link:hover,
.relatos-nav__link:focus {
  background: #ffd98a;
  color: #20242b;
  text-decoration: none;
}
.relatos-nav__placeholder {
  visibility: hidden;
}
@media (max-width: 560px) {
  .relatos-nav__title { font-size: .9rem; }
}


/* Hide theme post-navigation on serie posts (book bar replaces it) */
.single.relatos-serie .post-navigation { display:none; }

/* ============================================================
   Serie index / portada (el-libro)
   ============================================================ */
.serie-eyebrow {
  margin: 0 0 .4rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #b98a3d;
}
.serie-intro {
  max-width: 640px;
  margin: 0 0 1.6rem;
  color: #3a4556;
  line-height: 1.65;
}
.serie-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
}
.serie-index__item {
  border-bottom: 1px solid #e6eaf0;
}
.serie-index__item a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: .85rem .5rem;
  border-radius: 8px;
  text-decoration: none;
  color: #172033;
  transition: background .18s ease, color .18s ease;
}
.serie-index__num {
  min-width: 2.2em;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: #b98a3d;
  font-variant-numeric: tabular-nums;
}
.serie-index__title {
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
}
.serie-index__item a:hover,
.serie-index__item a:focus {
  background: #ffd98a;
  color: #20242b;
  text-decoration: none;
}
@media (max-width: 720px) {
  .serie-index { grid-template-columns: 1fr; }
}

/* ============================================================
   Blog page widgets
   ============================================================ */
.blog-section-title {
  margin: 2rem auto .6rem;
  font-size: clamp(1.7rem, 3.4vw, 2.16rem);
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  color: #172033;
}
.blog-widget {
  margin: 1rem auto 2.6rem;
}
.blog-widget > .wp-block-group__inner-container > * {
  width: 100% !important;
  max-width: 100% !important;
}
.blog-widget:not(.blog-widget--marquee) {
  padding-left: var(--wp--style--root--padding-left, 16px);
  padding-right: var(--wp--style--root--padding-right, 16px);
}
.blog-widget--marquee + .blog-widget--marquee {
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid #e6eaf0;
}

/* ---- Widget 1: Última Publicación (image right, text left) ---- */
.ultima-publicacion {
  display: flex;
  flex-direction: column;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(23, 32, 51, .06);
  text-decoration: none;
  color: #172033;
  margin: 0 0 1rem;
}
.ultima-publicacion__media {
  order: 0;
}
.ultima-publicacion__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ultima-publicacion__body {
  order: 1;
  padding: 1.4rem 1.6rem;
}
.ultima-publicacion__eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b98a3d;
  margin: 0 0 .45rem;
}
.ultima-publicacion__title {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: #172033;
  margin: 0 0 .6rem;
}
.ultima-publicacion__excerpt {
  display: block;
  color: #3a4556;
  line-height: 1.6;
  margin: 0 0 .8rem;
}
.ultima-publicacion__more {
  display: inline-block;
  font-weight: 700;
  color: #b98a3d;
}
.ultima-publicacion:hover .ultima-publicacion__more {
  color: #20242b;
}
@media (min-width: 721px) {
  .ultima-publicacion {
    flex-direction: row;
  }
  .ultima-publicacion__media {
    order: 2;
    width: 46%;
    min-height: 260px;
  }
  .ultima-publicacion__body {
    order: 1;
    width: 54%;
    align-self: center;
  }
}

/* ---- Widget 4: Índice de entradas ---- */
.blog-index-col .serie-index {
  grid-template-columns: 1fr;
}
.blog-indice {
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-index-col h3,
.wp-block-column h3 {
  margin: 0 0 .4rem;
  font-weight: 700;
}
.blog-indice__item {
  border-bottom: 1px solid #e6eaf0;
}
.blog-indice__item a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: .6rem .25rem;
  text-decoration: none;
  color: #172033;
  transition: background .18s ease, color .18s ease;
}
.blog-indice__date {
  min-width: 78px;
  font-size: .82rem;
  font-weight: 700;
  color: #b98a3d;
}
.blog-indice__title {
  font-weight: 600;
  line-height: 1.35;
}
.blog-indice__item a:hover,
.blog-indice__item a:focus {
  background: #ffd98a;
  color: #20242b;
}

/* ---- Blog page: widget 1 side margins x3 + balanced bottom margin ---- */
.blog-widget--ultima {
  padding-left: calc(var(--wp--style--root--padding-left, 16px) * 3);
  padding-right: calc(var(--wp--style--root--padding-right, 16px) * 3);
  margin-bottom: 2.6rem !important;
}

/* ---- Blog page: center the textos of the 'índice de entradas' widget ---- */
.blog-widget--indice { text-align: center; }
.blog-widget--indice h3 { text-align: center; }
.blog-widget--indice .blog-indice { text-align: center; }
.blog-widget--indice .blog-indice__item a { justify-content: center; }
.blog-widget--indice .blog-indice__date { text-align: center; }
.blog-widget--indice .blog-indice__title { text-align: center; }
.blog-widget--indice .serie-index { text-align: center; }
.blog-widget--indice .serie-index li { text-align: center; }
.blog-widget--indice .serie-index li a { justify-content: center; }

.blog-widget.blog-widget--ultima {
  padding-left: calc(var(--wp--style--root--padding-left, 16px) * 3) !important;
  padding-right: calc(var(--wp--style--root--padding-right, 16px) * 3) !important;
}

/* ============================================================
   Canciones: Reproductor inline + carruseles
   ============================================================ */
.canciones-page { padding-inline: 0; }
.canciones-section-title {
  margin: 2.4rem auto .4rem;
  text-align: center;
  font-size: clamp(1.7rem, 3.4vw, 2.16rem);
  font-weight: 700;
  line-height: 1.12;
  color: #172033;
}
.canciones-intro {
  max-width: 620px;
  margin: 0 auto 1.6rem;
  padding-inline: var(--wp--style--root--padding-left, 16px);
  text-align: center;
  color: #3a4556;
}

/* Reproductor stage */
.repro__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 132px;
  margin: 0 auto 10px;
  padding: 18px 12px 26px;
  box-sizing: border-box;
}
.repro__embed { display: none; width: 100%; }
.repro__embed.active { display: flex; justify-content: center; }
.repro__embed iframe {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 12px;
}
.repro__listen {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  background: #ffd98a;
  color: #20242b;
  font-weight: 700;
  text-decoration: none;
}
.repro__listen:hover { background: #ffce6b; color: #20242b; }

/* Song cards are <button> now: match the <a> card look */
.blog-marquee__card.repro-card {
  font-family: inherit;
  color: #181818;
  text-align: left;
  background: #ffffff;
  border: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.blog-marquee__card.repro-card:hover,
.blog-marquee__card.repro-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(7, 38, 87, 0.22);
  outline: none;
}
.blog-marquee__card.repro-card.is-active {
  box-shadow: 0 0 0 3px #b98a3d, 0 22px 44px rgba(7, 38, 87, 0.22);
}
.repro-card__play {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #ffd98a;
  color: #20242b;
  font-size: 0.82rem;
  font-weight: 700;
}
.blog-marquee__card.repro-card.is-active .repro-card__play {
  background: #b98a3d;
  color: #fff;
}

/* Canciones: carruseles a ancho completo (mismo que la portada) */
.canciones-page .blog-marquee {
  width: 100vw;
  max-width: none !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ============================================================
   Sitio: nombre oculto visualmente pero presente para buscadores
   (logo y descripcion visibles; composicion intacta)
   ============================================================ */
.site-branding .site-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Footer nuevo: suscripcion + donaciones + links legales
   ============================================================ */
#colophon.site-footer{display:none}

.mas-footer{background:#0e0e12;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.86);padding:3.5rem 0 0;}
.mas-footer-inner{max-width:1120px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);}
.mas-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.15fr;gap:2.5rem 3rem;align-items:start;}
.mas-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:#ffd98a;margin:0 0 1rem;font-weight:600;}
.mas-text{font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 1.15rem;max-width:34ch;}
.mas-links{list-style:none;margin:0;padding:0;}
.mas-links li{margin-bottom:.65rem;}
.mas-links a{color:rgba(255,255,255,.86);text-decoration:none;font-size:.95rem;transition:color .2s,padding-left .2s;}
.mas-links a:hover{color:#ffd98a;padding-left:4px;}
.mas-btn{display:inline-block;background:#ffd98a;color:#17171a;font-weight:600;padding:.75rem 1.5rem;border-radius:999px;text-decoration:none;font-size:.95rem;transition:background .2s,transform .2s;border:0;}
.mas-btn:hover{background:#ffe6a8;transform:translateY(-1px);color:#17171a;}
.mas-newsletter__row{display:flex;gap:.55rem;flex-wrap:wrap;}
.mas-newsletter__input{flex:1 1 200px;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.72rem 1rem;color:#fff;font-size:.93rem;outline:none;transition:border-color .2s;}
.mas-newsletter__input::placeholder{color:rgba(255,255,255,.45);}
.mas-newsletter__input:focus{border-color:#ffd98a;}
.mas-newsletter__btn{background:#ffd98a;color:#17171a;border:0;border-radius:999px;padding:.72rem 1.25rem;font-weight:600;font-size:.93rem;cursor:pointer;transition:background .2s;}
.mas-newsletter__btn:hover{background:#ffe6a8;}
.mas-newsletter__note{font-size:.78rem;color:rgba(255,255,255,.5);margin:.65rem 0 0;}
.mas-footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:2.6rem;padding:1.3rem clamp(1.25rem,4vw,3rem);text-align:center;font-size:.82rem;color:rgba(255,255,255,.55);display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;}
.mas-credit{color:rgba(255,255,255,.55);text-decoration:none;}
.mas-credit:hover{color:#ffd98a;}
@media(max-width:900px){.mas-footer-grid{grid-template-columns:1fr 1fr}.mas-col--news{grid-column:1/-1}}
@media(max-width:560px){.mas-footer-grid{grid-template-columns:1fr}.mas-col--news{grid-column:auto}.mas-newsletter__row{display:block}.mas-newsletter__input{width:100%;margin-bottom:.5rem}}

/* === Footer newsletter: fila estable en escritorio === */
.mas-newsletter__row{flex-wrap:nowrap;align-items:center}
.mas-newsletter__input{flex:1 1 auto}
.mas-newsletter__btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:560px){.mas-newsletter__row{display:block}}

/* === Footer newsletter: ancho ajustado a su columna === */
.mas-newsletter__row{width:100%;max-width:100%}
.mas-newsletter__input{min-width:0}

/* === Footer newsletter: input flexible sin imponer ancho === */
.mas-newsletter__input{flex:1 1 130px;min-width:0}

/* === Footer grid: columnas pueden encoger su contenido === */
.mas-col{min-width:0}

/* === Footer: baner.jpg como fondo con capa oscura === */
.mas-footer{background-size:cover;background-position:center;background-repeat:no-repeat;background:linear-gradient(rgba(14,14,18,.92),rgba(14,14,18,.92)),var(--mas-bg, #0e0e12) center/cover no-repeat,#0e0e12;}

/* === Footer: capa azul marino equilibrada === */
.mas-footer{background:linear-gradient(rgba(7,38,87,.84),rgba(7,38,87,.88)),var(--mas-bg,#072657) center/cover no-repeat,#072657;background-size:cover;background-position:center;background-repeat:no-repeat;}


/* Formulario de suscripcion del pie: campo y boton en una fila */
#mas-footer #subscribe-blog {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
#mas-footer #subscribe-email {
  flex: 1 1 340px;
  min-width: 220px;
}
#mas-footer #subscribe-email input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 88px;
  padding: 18px 30px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  color: #ffffff;
  font-size: 1.35rem;
}
#mas-footer #subscribe-blog button {
  flex: 0 0 auto;
  min-height: 88px;
  padding: 18px 48px;
  border: 0;
  border-radius: 999px;
  background: #ffda87;
  color: #111827;
  font-size: 1.35rem;
  font-weight: 700;
}
#mas-footer #subscribe-blog::after {
  content: "Sin spam. Darse de baja en cualquier momento.";
  flex: 0 0 100%;
  margin-top: 2px;
  color: rgba(255,255,255,.7);
  font-size: 1.05rem;
}
@media (max-width: 700px) {
  #mas-footer #subscribe-email,
  #mas-footer #subscribe-blog button {
    flex-basis: 100%;
    width: 100%;
  }
}


/* Aplicar el diseno al formulario real del footer de Maywood */
.mas-footer form,
.mas-footer .wp-block-jetpack-subscriptions__form {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.mas-footer form input[type="email"],
.mas-footer .wp-block-jetpack-subscriptions__form input[type="email"] {
  box-sizing: border-box;
  flex: 1 1 340px;
  width: auto;
  min-width: 220px;
  min-height: 88px;
  padding: 18px 30px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  color: #ffffff;
  font-size: 1.35rem;
}
.mas-footer form button,
.mas-footer form input[type="submit"],
.mas-footer .wp-block-jetpack-subscriptions__form button {
  flex: 0 0 auto;
  min-height: 88px;
  padding: 18px 48px;
  border: 0;
  border-radius: 999px;
  background: #ffda87;
  color: #111827;
  font-size: 1.35rem;
  font-weight: 700;
}
.mas-footer form::after,
.mas-footer .wp-block-jetpack-subscriptions__form::after {
  content: "Sin spam. Darse de baja en cualquier momento.";
  flex: 0 0 100%;
  margin-top: 2px;
  color: rgba(255,255,255,.7);
  font-size: 1.05rem;
}
@media (max-width: 700px) {
  .mas-footer form input[type="email"],
  .mas-footer form button,
  .mas-footer form input[type="submit"],
  .mas-footer .wp-block-jetpack-subscriptions__form input[type="email"],
  .mas-footer .wp-block-jetpack-subscriptions__form button {
    flex-basis: 100%;
    width: 100%;
  }
}


/* Ajustes sobre los contenedores del formulario de suscripcion */
.mas-footer #subscribe-blog { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.mas-footer #subscribe-email { flex:1 1 340px; min-width:220px; }
.mas-footer #subscribe-email input[type="email"] { box-sizing:border-box; width:100%; min-height:88px; padding:18px 30px; border:2px solid rgba(255,255,255,.8); border-radius:6px; background:rgba(255,255,255,.04); color:#fff; font-size:1.35rem; }
.mas-footer #subscribe-blog button,
.mas-footer #subscribe-blog input[type="submit"] { flex:0 0 auto; min-height:88px; padding:18px 48px; border:0; border-radius:999px; background:#ffda87; color:#111827; font-size:1.35rem; font-weight:700; }

/* Dar espacio suficiente para mostrar el campo y el boton en la misma fila */
#mas-footer #subscribe-blog { width:100%; max-width:none; }
#mas-footer #subscribe-email { flex:1 1 390px; width:auto; max-width:none; }
#mas-footer #subscribe-blog button,
#mas-footer #subscribe-blog input[type="submit"] { min-width:300px; }


/* Formulario de revista: campo y boton alineados */
#mas-footer .mas-col--news .wp-block-jetpack-subscriptions__form-elements { display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:12px; }
#mas-footer .mas-col--news #subscribe-email,
#mas-footer .mas-col--news #subscribe-submit { min-width:0; width:auto; margin:0; }
#mas-footer .mas-col--news #subscribe-email input[type=email] { box-sizing:border-box; width:100%; min-height:60px; padding:12px 18px; border:2px solid rgba(255,255,255,.8); border-radius:6px; background:rgba(255,255,255,.04); color:#fff; font-size:1.1rem; }
#mas-footer .mas-col--news #subscribe-submit button { box-sizing:border-box; width:auto; min-width:0; min-height:60px; margin:0 !important; padding:12px 24px; border:0; border-radius:999px; background:#ffda87; color:#111827; font-size:1.1rem; font-weight:700; white-space:nowrap; }
@media (max-width:600px) {
 #mas-footer .mas-col--news .wp-block-jetpack-subscriptions__form-elements { grid-template-columns:1fr; }
 #mas-footer .mas-col--news #subscribe-submit button { width:100%; }
}

#mas-footer .mas-footer-grid { grid-template-columns:2fr 1fr 1fr; }
@media (max-width:800px) { #mas-footer .mas-footer-grid { grid-template-columns:1fr; } }

#mas-footer .mas-footer-grid { grid-template-columns:1.4fr 1fr 1fr; }

#mas-footer .mas-col--news #subscribe-submit button { border-radius:999px !important; }