/* Ajustes propios del tema (estados que dependen de JavaScript). */

#site-header {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1)
}

#site-header.cc-top {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none
}

.cc-brand-name,
.cc-navlink,
.cc-burgerbtn {
  color: #133C5A
}

.cc-navlink:hover {
  color: #0BAFC8
}

#site-header.cc-top .cc-brand-name,
#site-header.cc-top .cc-burgerbtn {
  color: #fff
}

#site-header.cc-top .cc-navlink {
  color: rgba(255, 255, 255, .9)
}

#site-header.cc-top .cc-navlink:hover {
  color: #fff
}


.cc-icon {
  display: inline-block;
  vertical-align: middle
}

.cc-star {
  fill: #fbbf24;
  color: #fbbf24
}

.cc-navlink.cc-active {
  color: #0BAFC8
}

#site-header.cc-top .cc-navlink.cc-active {
  color: #0BAFC8
}

/* Selector de idioma */
.cc-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #133C5A;
  opacity: .55;
  transition: opacity .2s, color .2s;
  text-decoration: none
}

.cc-lang:hover {
  opacity: 1;
  color: #0BAFC8
}

.cc-lang-active {
  opacity: 1;
  color: #0BAFC8
}

.cc-langsep {
  color: #133C5A;
  opacity: .3;
  font-size: 11px
}

#site-header.cc-top .cc-lang {
  color: rgba(255, 255, 255, .7)
}

#site-header.cc-top .cc-lang:hover,
#site-header.cc-top .cc-lang-active {
  color: #fff;
  opacity: 1
}

#site-header.cc-top .cc-langsep {
  color: rgba(255, 255, 255, .4)
}

/* ===== Cuerpo de los artículos del blog (.cc-prose) ===== */
.cc-prose {
  font-family: Montserrat, sans-serif;
  color: #133C5A;
  font-size: 16px;
  line-height: 1.85
}

.cc-prose>*:first-child {
  margin-top: 0
}

.cc-prose p {
  margin: 0 0 1.15em;
  color: rgba(19, 60, 90, .78)
}

.cc-prose h2 {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  margin: 1.8em 0 .6em;
  color: #133C5A
}

.cc-prose h3 {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  margin: 1.5em 0 .5em;
  color: #133C5A
}

.cc-prose ul,
.cc-prose ol {
  margin: 0 0 1.15em;
  padding-left: 1.3em
}

.cc-prose li {
  margin: .4em 0;
  color: rgba(19, 60, 90, .78)
}

.cc-prose ul li {
  list-style: disc
}

.cc-prose ol li {
  list-style: decimal
}

.cc-prose a {
  color: #0BAFC8;
  text-decoration: underline
}

.cc-prose strong {
  color: #133C5A;
  font-weight: 700
}

.cc-prose em {
  font-style: italic
}

.cc-prose blockquote {
  border-left: 3px solid #0BAFC8;
  padding: .2em 0 .2em 1.1em;
  margin: 1.3em 0;
  font-style: italic;
  color: rgba(19, 60, 90, .7)
}

.cc-prose img {
  border-radius: 14px;
  margin: 1.3em 0;
  max-width: 100%;
  height: auto
}

.cc-prose .cc-soon {
  opacity: .5
}

/* ===== Banderas del selector de idioma ===== */
.cc-flag {
  display: inline-block;
  width: 17px;
  height: 11px;
  border-radius: 2.5px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  vertical-align: middle;
  line-height: 0;
  flex: 0 0 auto
}

.cc-flag svg {
  display: block;
  width: 100%;
  height: 100%
}

#site-header.cc-top .cc-flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35)
}

/* ===== Preguntas frecuentes del artículo ===== */
.cc-faq-item {
  border: 0.5px solid rgba(19, 60, 90, .14);
  border-radius: 12px;
  margin-bottom: 10px;
  background: #fff;
  overflow: hidden
}

.cc-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 48px 16px 18px;
  position: relative;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #133C5A
}

.cc-faq-item summary::-webkit-details-marker {
  display: none
}

.cc-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: #0BAFC8;
  line-height: 1
}

.cc-faq-item[open] summary::after {
  content: '\2212'
}

.cc-faq-a {
  padding: 0 18px 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(19, 60, 90, .72)
}

/* ===== Video (carga al hacer clic, sin rastrear hasta entonces) ===== */
.cc-video-frame {
  position: relative;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #0A2350
}

.cc-video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.cc-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 175, 200, .92);
  color: #fff;
  border-radius: 50%;
  transition: transform .2s
}

.cc-video-frame:hover .cc-video-play {
  transform: scale(1.08)
}

.cc-video iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 16px;
  display: block
}

/* ===== Cuadrícula de videos del artículo ===== */
.cc-video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px
}

@media(min-width:640px) {
  .cc-video-grid {
    grid-template-columns: 1fr 1fr
  }
}

.cc-video-grid iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 16px;
  display: block
}

/* ===== Botones del CTA del artículo: apilados en móvil, en fila en escritorio ===== */
.cc-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.cc-cta-actions>a {
  width: 100%;
  justify-content: center;
  white-space: nowrap
}

@media(min-width:640px) {
  .cc-cta-actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap
  }

  .cc-cta-actions>a {
    width: auto
  }
}

/* ===== Utilidades que faltaban en el Tailwind precompilado (usadas en el blog) ===== */
.pb-14 {
  padding-bottom: 3.5rem
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem
}

.h-\[280px\] {
  height: 280px
}

.max-w-\[1100px\] {
  max-width: 1100px
}

.border-white\/25 {
  border-color: rgba(255, 255, 255, .25)
}

.hover\:border-white\/50:hover {
  border-color: rgba(255, 255, 255, .5)
}

@media(min-width:1024px) {
  .lg\:h-\[400px\] {
    height: 400px
  }
}

/* ===== Logo del header (imagen): color en header blanco, blanco en header transparente ===== */
.cc-logo {
  height: 34px;
  width: auto;
  display: block;
  max-width: 62vw
}

@media(min-width:1024px) {
  .cc-logo {
    height: 42px
  }
}

.cc-logo-white {
  display: none
}

#site-header.cc-top .cc-logo-color {
  display: none
}

#site-header.cc-top .cc-logo-white {
  display: block
}

/* ============================================================
   HERO — foto del Dr.: evitar que se desborde y se pegue al
   borde derecho en móvil. Solo afecta pantallas ≤ 640px.
   ============================================================ */
@media (max-width: 640px) {
  #inicio .cc-hero-photo-wrap {
    width: min(300px, calc(100vw - 80px));
  }
  #inicio .cc-hero-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 340 / 440;
  }
}