/*!
Theme Name: coe child theme
Template: coe
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
  /* Color tokens (from coechile.framer.website brand refresh) */
  --coe-cream: #f9f5eb;
  --coe-cream-soft: rgba(249, 245, 235, 0.5);
  --coe-cream-soft-solid: #fcfaf5; /* cream-soft flattened over white */
  --coe-beige: #ece7d9;
  --coe-dark: #171717;
  --coe-near-black: #171717;
  --coe-dark-60: rgba(22, 35, 27, 0.6);
  --coe-dark-16: rgba(22, 35, 27, 0.16);
  --coe-white: #ffffff;
  --coe-gray: #706f6f;
  --coe-gray-light: #e6e6e6;
  --coe-accent: #ff2244;
  --coe-sky-blue: #c9d9f0;
  --coe-sky-blue-accent: #38708a;
  --coe-green-950: #052e16; /* Tailwind green-950 */
  --coe-yellow-100: #fef9c3; /* Tailwind yellow-100 */
  --coe-red-950: #460809; /* Tailwind red-950 */
  --coe-warm-cream: #fdeccb;

  /* Typography tokens */
  --coe-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --coe-tracking-tight: -0.03em;
  --coe-tracking-snug: -0.02em;
  --coe-tracking-normal: -0.01em;
}

html {
  background-color: var(--coe-cream);
}

body {
  font-family: var(--coe-font-family) !important;
  color: var(--coe-dark) !important;
  background-color: var(--coe-cream);
}

body.page-sobre-coe,
html:has(body.page-sobre-coe),
body.home,
html:has(body.home) {
  background-color: var(--coe-white);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--coe-font-family);
  color: var(--coe-dark);
  font-weight: 700;
}

h1,
.h1 {
  letter-spacing: var(--coe-tracking-tight);
}

h2,
.h2,
h3,
.h3 {
  letter-spacing: var(--coe-tracking-snug);
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  letter-spacing: var(--coe-tracking-normal);
  font-weight: 600;
}

p {
  color: var(--coe-dark-60);
}

a {
  color: var(--coe-dark);
}

a:hover {
  color: var(--coe-accent);
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--coe-cream) !important;
}

.metodologia {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media only screen and (min-width: 1000px) {
  .metodologia.reveal {
    position: absolute;
    -webkit-transition: opacity 1.2s ease-in, margin 0.7s ease-in-out;
    -moz-transition: opacity 1.2s ease-in, margin 0.7s ease-in-out;
    -o-transition: opacity 1.2s ease-in, margin 0.7s ease-in-out;
    transition: opacity 1.2s ease-in, margin 0.7s ease-in-out;
  }

  .metodologia.reveal.revealed:first-child {
    margin-left: -60%;
  }

  .metodologia.reveal.revealed:last-child {
    margin-left: 60%;
  }
}

.metodologia img {
  display: flex;
  align-self: center;
  width: 70%;
}

.cielo {
  background-color: var(--coe-dark);
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 1;
}

.cielo-img {
  position: relative;
}

/* The next section overlaps the hero by 64px, so extend it to keep a full viewport visible. */
#home-hero-loading {
  height: calc(100vh + 64px) !important;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dark-transparent-dark vertical gradient (near-black green), keeping hero text and menu legible over the media. */
#home-hero-loading::after,
.page-hero-interna::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 14, 10, 0.4) 0%,
    rgba(8, 14, 10, 0.2) 20%,
    rgba(8, 14, 10, 0) 50%,
    rgba(8, 14, 10, 0.65) 80%,
    rgba(8, 14, 10, 0.97) 100%
  );
}

/* Inner heroes: keep the title above the overlay. */
.page-hero-interna > div {
  z-index: 2;
}

.reveal,
.fade-0 {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.revealed,
.fadein {
  opacity: 1 !important;
}

.montanas {
  overflow: hidden;
  height: 100vh;
  position: absolute;
  width: 100%;
}

.montana-1,
.montana-2,
.montana-3 {
  position: absolute;
  bottom: -100%;
  width: 100%;
  -webkit-transition: bottom 1s;
  -moz-transition: bottom 1s;
  -o-transition: bottom 1s;
  transition: bottom 1s;
}

@media only screen and (max-width: 1000px) {
  .montana-1,
  .montana-2,
  .montana-3 {
    position: absolute;
    bottom: 0%;
    width: 100%;
    -webkit-transition: bottom 1s;
    -moz-transition: bottom 1s;
    -o-transition: bottom 1s;
    transition: bottom 1s;
  }
}

.menu-fix {
  z-index: 10;
  background: var(--coe-dark);
  background: linear-gradient(
    180deg,
    rgba(22, 35, 27, 0.5) -125%,
    rgba(255, 255, 255, 0) 100%
  );
  top: 0;
}

.montana-1 {
  z-index: 2;
}

.montana-2 {
  z-index: 3;
}

.montana-3 {
  z-index: 4;
}

.caption-text {
  width: 70%;
  max-width: 600px;
}

@media only screen and (max-width: 590px) {
  .caption-text {
    width: 100%;
    max-width: 600px;
  }
}

.intro-texto {
  position: relative;
  bottom: -1.5rem;
  transition: bottom 0.6s ease-out, opacity 0.6s ease-out;
  z-index: 3;
  padding: 0 10vw;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 128px;
  opacity: 0;
}

@media only screen and (min-width: 992px) {
  .intro-texto {
    width: 80%;
    margin: 0;
    margin-bottom: 128px;
  }
}

@media only screen and (min-width: 1000px) {
  .vh-lg-100 {
    height: 100vh;
  }
}

/* Home hero CTA: inverted black-button (light fill, dark text) so it stands out over the video. */
.intro-texto .black-button {
  color: var(--coe-dark) !important;
  border-color: var(--coe-cream) !important;
  background-color: var(--coe-cream) !important;
}

.intro-texto .black-button:hover {
  color: var(--coe-dark) !important;
  border-color: var(--coe-white) !important;
  background-color: var(--coe-white) !important;
}

.intro-texto h1 {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  line-height: 1.05;
}

.intro-texto p {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-style: normal;
  font-weight: 400;
  max-width: 44rem;
}

.intro-texto-slide {
  bottom: 0;
  opacity: 1;
}

.intro-texto-zindex {
  z-index: 3;
}

.slide-up {
  bottom: -15%;
}

.slide-down {
  bottom: 0vh;
}

.slide-down-2 {
  bottom: -30%;
}

.montana-1 img,
.montana-2 img,
.montana-3 img {
  height: auto;
  width: 100%;
}

/***nuevo css**/

.blue-bkgnd {
  background-color: var(--coe-dark);
}

.sky-blue-bkgnd {
  background-color: var(--coe-dark-16);
}

.yellow-text {
  color: var(--coe-cream);
}

.yellow-text {
  color: var(--coe-cream);
  text-shadow: 0 0 3px rgba(22, 35, 27, 0.44);
}

.pink-bkgnd {
  background-color: rgba(236, 231, 217, 0.65);
}

.yellow-bkgnd {
  background-color: var(--coe-beige);
}

.yellow-bkgnd-light {
  background-color: var(--coe-cream);
}

.equipo-intro {
  background-color: var(--coe-near-black);
}

.equipo-intro h2 {
  color: var(--coe-cream);
}

.white-text {
  color: var(--coe-cream);
}

.black-text {
  color: var(--coe-dark);
}

/*
.programas{
    background: rgba(150, 192, 222, 0.2);
}
*/

.mb-6 {
  margin-bottom: 3.5rem !important;
}

.mb-8 {
  margin-bottom: 4rem !important;
}

.mt-7 {
  margin-top: 4.5rem !important;
}

.programa-detalle-cta {
  padding-top: 0.46875rem !important;
  padding-bottom: 0.46875rem !important;
  padding-left: 1.875rem !important;
  padding-right: 1.875rem !important;
}

.black-button {
  color: var(--coe-cream) !important;
  border-color: var(--coe-dark) !important;
  background-color: var(--coe-dark) !important;
}

.btn.btn-outline-primary.black-button {
  color: var(--coe-dark) !important;
  border: solid 2px var(--coe-dark) !important;
  background-color: transparent !important;
  font-weight: 700 !important;
}

.btn.btn-primary,
.btn.btn-outline-primary,
.btn.black-button {
  border-radius: 0.25rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.presentacion ul {
  list-style: none;
  padding: 0;
  width: 100%;
}

.presentacion {
  background-color: var(--coe-warm-cream);
}

/* Title stays pinned while the cards stack beneath it */
.presentacion-group {
  --header-offset: 72px;
  --title-h: 0px;
}

.presentacion-title {
  position: sticky;
  top: var(--header-offset);
  z-index: 3;
  padding: 12px 0 80px;
  text-align: center;
}

/* Stacked cards: each one sticks near the top while the next slides over it */
.presentacion-stack {
  --step: 64px; /* vertical offset between stuck cards */
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 3rem;
}

.presentacion-card-wrap {
  position: sticky;
  top: calc(var(--header-offset) + var(--title-h) + var(--i) * var(--step));
  width: 100%;
  /* Sticky boxes are clamped by the stack's bottom edge; this padding keeps the offsets between cards once released */
  padding-bottom: calc((var(--n) - 1 - var(--i)) * var(--step));
}

.presentacion-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background-color: var(--coe-cream);
  border-radius: 24px;
  overflow: hidden;
}

/* Stacked cards slide over the previous one, so they cast a soft shadow onto it */
.presentacion-card {
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
}

.presentacion-card-media {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 16px;
}

.presentacion .presentacion-card-media img {
  position: absolute;
  top: -56px;
  left: 0;
  width: 100% !important;
  height: calc(100% + 112px) !important;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}

.presentacion-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 8px 16px;
  text-align: left;
}

.presentacion-card-body h3,
.presentacion-card-body p {
  margin: 0;
}

.presentacion .presentacion-card-body h3 {
  /* Shrinks to 80% of its size as the next card stacks over this one (--covered: 0 → 1) */
  font-size: calc(1.25rem * (1 - 0.2 * var(--covered, 0))); /* h5, as on /programas */
}

.presentacion-card-body p {
  color: var(--coe-dark);
  font-size: 1rem;
}

@media only screen and (min-width: 992px) {
  .presentacion-group {
    --header-offset: 100px;
  }

  .presentacion-card {
    flex-direction: row;
    align-items: stretch;
    gap: 64px;
  }

  .presentacion-card-media {
    flex: 1 0 0;
    height: auto;
    min-height: 380px;
  }

  .presentacion-card-body {
    flex: 1 0 0;
    justify-content: flex-start;
    /* Top padding collapses so the title ends up at the top of the card */
    padding: calc(48px * (1 - var(--covered, 0))) 40px 48px 0;
  }
}

.home .presentacion {
  background-color: var(--coe-white);
}

.presentacion h2,
.presentacion p {
  color: var(--coe-dark);
}

.presentacion .chip-badge {
  border-color: var(--coe-dark);
  color: var(--coe-dark);
}

.presentacion .presentacion-title h2,
.section-title {
  color: var(--coe-dark);
  font-size: 1.5rem; /* h4, as the /programas heading */
}

.w-100vw {
  width: 100vw;
}

.presentacion .brown-button {
  background-color: var(--coe-red-950) !important;
  border-color: var(--coe-red-950) !important;
  color: var(--coe-cream) !important;
}

.presentacion h3 {
  color: var(--coe-dark);
  font-size: 1.25rem;
  font-weight: 500;
}

.presentacion img {
  height: 170px !important;
  width: auto !important;
  max-width: 100%;
}

.brown-button {
  border: solid 2px var(--coe-dark) !important;
  font-weight: 700 !important;
  color: var(--coe-dark) !important;
  background-color: transparent !important;
}

.brown-text {
  color: var(--coe-dark);
}

@media only screen and (min-width: 992px) {
  .flecha::after {
    position: absolute;
    background-image: url("../../images/flecha.svg");
    height: 100px;
    width: 100px;
    top: 115%;
    left: 50%;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    height: 45px;
    width: 45px;
  }
}

@media only screen and (max-width: 991px) {
  .flecha::after {
    position: relative;
    background-image: url("../../images/flecha.svg");
    height: 45px;
    width: 45px;
    top: initial;
    left: initial;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(90deg);
  }
}

@media only screen and (min-width: 992px) {
  .vh-one-third {
    height: 33.33333333vh;
  }

  .vh-one-sixth {
    height: 16.66666667vh;
  }

  .vh-two-thirds {
    height: 66.66666667vh;
  }
}

footer {
  background: var(--coe-near-black) !important;
  color: var(--coe-cream);
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(249, 245, 235, 0.24);
  color: var(--coe-cream);
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.footer-social-link:hover {
  color: var(--coe-sky-blue-accent);
  border-color: var(--coe-sky-blue-accent);
}

.footer-contact {
  color: var(--coe-cream);
}

.footer-link {
  color: var(--coe-cream);
}

.footer-link:hover {
  color: var(--coe-sky-blue-accent);
}

.footer-copy {
  flex-basis: 100%;
  color: var(--coe-cream-soft);
  font-size: 0.875rem;
  text-align: center;
  white-space: nowrap;
}

/*indicadores redondos para carousel*/
.carousel-indicators [data-bs-target] {
  width: 15px !important;
  height: 15px !important;
  border-radius: 100%;
}

.home-slider .carousel-caption {
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, var(--coe-dark) -6%, rgba(255, 255, 255, 0) 100%);
}

.home-slider .carousel-caption .btn.btn-outline-primary {
  color: var(--coe-cream);
  border: solid 2px var(--coe-cream);
  font-weight: 700 !important;
}

.home-slider .carousel-caption .btn.btn-outline-primary:hover {
  background-color: var(--coe-cream);
  color: var(--coe-dark);
  border-color: var(--coe-cream);
}

@media only screen and (max-width: 992px) {
  .home-slider .carousel-caption {
    position: relative;
    background: var(--coe-dark);
  }
}

/*fixes para elñ menu on scroll*/
.login-nav-fix {
  top: 32px;
}

.menu-fix-scroll,
.single-menu {
  background: var(--coe-cream) !important;
  height: fit-content;
  border-bottom: solid 1px var(--coe-beige);
}

.coe-blanco {
  display: block;
}

.coe-color {
  display: none;
}

.menu-fix-scroll .coe-blanco,
.single-menu .coe-blanco {
  display: none;
}

.menu-fix-scroll .coe-color,
.single-menu .coe-color {
  display: block;
}

.menu-fix-scroll .navbar-light .navbar-nav .nav-link,
.menu-fix-scroll .navbar-light .navbar-nav .nav-link:focus,
.menu-fix-scroll .navbar-light .navbar-nav .nav-link:hover,
.single-menu .navbar-light .navbar-nav .nav-link,
.single-menu .navbar-light .navbar-nav .nav-link:focus,
.single-menu .navbar-light .navbar-nav .nav-link:hover {
  color: var(--coe-dark) !important;
}

/*programas*/
.programa-content h3 {
  margin-top: 3rem;
}

.carousel-programa-pg-fix {
  margin-left: -1rem !important;
}

.pg-programas {
  background-image: url("../../images/fondo-programas.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.programas-overview,
.galeria-overview,
.programas,
.proximas-aventuras,
.single-content {
  background-color: var(--coe-white);
}

/* Breathing room below the carousel */
.proximas-aventuras {
  margin-bottom: 7rem;
  margin-top: 7rem;
}

.p-8 {
  padding: 2rem !important; /* Tailwind-style spacing; Bootstrap stops at p-5 */
}

.pb-10 {
  padding-bottom: 5rem !important;
  padding-top: 6rem !important;
}

.programas-container {
  max-width: 1264px;
}

.chip-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem .7rem;
  border: 1px solid var(--coe-dark-16);
  border-radius: 24px;
  color: var(--coe-dark);
  font-size: 0.8rem;
}

.programa-category .fst-italic {
  color: var(--coe-dark-60);
}

.programa-card {
  color: inherit;
}

.programa-card-title {
  color: var(--coe-dark);
  background: var(--coe-white);
  border-radius: 0 0 12px 12px;
}

.programa-card:hover .programa-card-title {
  color: var(--coe-sky-blue-accent);
}

.programa-thumb {
  height: 300px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.programa-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-position: center center;
  object-fit: cover;
}

.programa-back-link {
  color: var(--coe-dark);
  font-weight: 600;
  text-decoration: none;
}

.programa-back-link:hover {
  color: var(--coe-sky-blue-accent);
}

.programa-detalle-text {
  color: var(--coe-dark-60);
  max-width: 860px;
}

.programa-detalle-text ul {
  padding-left: 1.25rem;
  margin-top: 0.5rem;
}

.programa-detalle-text li {
  margin-bottom: 0.35rem;
}

.programa-detalle-top {
  min-height: 2rem;
}

/* Programas: photo card with a dark-green gradient and the title at the bottom */
.programa-card-overlay {
  position: relative;
  max-width: calc(100% - 16px);
  border-radius: 12px;
  overflow: hidden;
}

.programa-card-overlay .programa-thumb {
  border-radius: 12px;
}

.programa-card-overlay .programa-card-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 3.5rem !important;
  border-radius: 0;
  color: var(--coe-cream);
  background: linear-gradient(0deg, rgba(22, 35, 27, 0.92) 0%, rgba(22, 35, 27, 0) 100%);
}

.programa-card-overlay:hover .programa-card-title {
  color: var(--coe-white);
}

.programa-gallery {
  container-type: inline-size;
}

.programa-detalle-thumb {
  position: relative;
  width: 100%;
  height: calc(min(750px, 80cqw) * 3 / 4);
  overflow: hidden;
}

.programa-gallery-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(750px, 80cqw);
  height: 100%;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.8);
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 1;
}

.programa-gallery-slide.is-prev,
.programa-gallery-slide.is-next {
  opacity: 0.5;
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(calc(-50% + 95%)) scale(0.85);
}

.programa-gallery-slide.is-prev {
  transform: translateX(calc(-50% - 95%)) scale(0.85);
}

.programa-gallery-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
  z-index: 2;
}

.programa-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: rgba(0, 0, 0, 0.45);
  color: var(--coe-cream);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.2s ease;
}

.programa-gallery-arrow:hover {
  background-color: rgba(0, 0, 0, 0.65);
}

.programa-gallery-prev {
  left: 12px;
}

.programa-gallery-next {
  right: 12px;
}

.programa-gallery-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}

.programa-gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  border: none;
  background-color: rgba(255, 255, 255, 0.45);
  padding: 0;
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.programa-gallery-dot.active {
  width: 20px;
  background-color: var(--coe-cream);
}

.programa-gallery-thumbs {
  display: flex;
  justify-content: safe center;
  gap: 10px;
  overflow-x: auto;
  margin-top: 12px;
  scrollbar-width: none;
}

.programa-gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.programa-gallery-thumb-btn {
  flex-shrink: 0;
  width: 96px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  opacity: 0.55;
  transform: scale(0.95);
  cursor: pointer;
  transition: border-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.programa-gallery-thumb-btn.active {
  border-color: var(--coe-dark);
  opacity: 1;
  transform: scale(1);
}

.programa-gallery-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.programa-detalle-nav {
  border-top: 1px solid var(--coe-dark-16);
}

.programa-nav-link {
  color: var(--coe-dark);
  font-weight: 600;
  text-decoration: none;
}

.programa-nav-link:hover {
  color: var(--coe-sky-blue-accent);
}

.detalle-miembro {
  background-color: transparent;
  border: none;
  color: var(--coe-sky-blue-accent);
  text-align: center;
  font-weight: 600;
}

.miembro h6 {
  font-weight: 300;
}

.team-modal {
  max-width: 640px;
}

.team-modal .modal-content {
  max-height: 85vh;
}

.team-modal .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

.team-modal .modal-body {
  overflow: hidden;
  min-height: 0;
}

.team-modal .modal-body img {
  max-width: 160px;
  flex-shrink: 0;
}

.team-modal-bio {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.gallery-thumbnail {
  background-color: var(--coe-beige);
}


.page-hero {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.page-hero-interna {
  height: 75vh;
  background-color: var(--coe-dark);
  /* Stays pinned while the page content slides over it. */
  position: sticky;
  top: 0;
  z-index: 0;
}

/* Everything after a pinned hero must stack above it. */
#page-hero ~ * {
  position: relative;
  z-index: 1;
}

/* Responsive <picture> cover behind the hero overlay and title. */
.page-hero-media,
.page-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hero photos fade in when they finish loading (see HeroPicture.astro). */
.page-hero-media img {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.page-hero-media img.is-loaded {
  opacity: 1;
}

.page-hero-parallax {
  background-attachment: fixed;
}

@media only screen and (max-width: 768px) {
  /* iOS Safari doesn't support fixed backgrounds; scroll avoids inconsistent rendering elsewhere. */
  .page-hero-parallax {
    background-attachment: scroll;
  }
}

.page-hero-title {
  text-shadow: 0 0px 7px var(--coe-dark);
  color: var(--coe-cream);
  margin-top: -64px;
}

.hero-overlap {
  position: relative;
  z-index: 1;
  margin-top: -64px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding-bottom: 64px;
}

.single-content {
  margin-top: 67px;
  display: flex;
  justify-content: space-between;
  min-height: calc(100vh - 255px);
}

@media only screen and (min-width: 992px) {
  .espirales {
    height: 320px;
  }
}

.social-media {
  border-radius: 100%;
  height: 50px;
  width: 50px;
}

.navbar-brand img {
  height: 50px !important;
}

.contacto {
  padding: 75px 0;
  max-width: 580px;
}

.min-height {
  min-height: calc(100vh - 56px);
}

#wrapper.min-height {
  min-height: 100vh;
}

.wp-forms .form-control input,
.wp-forms .form-control textarea {
  display: block !important;
  width: 100% !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--coe-dark) !important;
  background-color: var(--coe-white) !important;
  background-clip: padding-box !important;
  border: 1px solid var(--coe-gray-light) !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border-radius: 0.25rem !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.wp-forms .black-button {
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  color: var(--coe-cream) !important;
  border-color: var(--coe-dark) !important;
  background-color: var(--coe-dark) !important;
  border-radius: 0.25rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}


/* Home section headings/subheads match the /programas scale: h4 1.5rem, h5 1.25rem, body 1rem */
.home h2:not(.section-title) {
  font-size: 1.5rem;
}

.home h3 {
  font-size: 1.25rem;
}

/* "Momentos que quedan para siempre" section */
.home #programas {
  background-color: var(--coe-cream); /* #f9f5eb */
}