styles.css

/* css styles */

/* =========================
   TIPOGRAFÍA GLOBAL (usa la del tema activo)
   - Sandstone/Darkly => Lato vía Bootstrap
   - No fuerza system fonts
   ========================= */

:root{
  --font-sans: var(--bs-font-sans-serif, "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --font-navbar: var(--bs-font-sans-serif, "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif);
}

html, body{
  font-family: var(--font-sans);
}


/* css styles */

/* =========================================================
   QUARTO THEME TOGGLE – modelo tipo iOS (sol/luna dentro del knob)
   Colores translúcidos según el NAVBAR (Sandstone / Darkly)
   ========================================================= */

/* 0) Oculta iconos internos del toggle nativo */
.navbar .quarto-color-scheme-toggle svg,
.navbar .quarto-color-scheme-toggle .bi,
.navbar .quarto-color-scheme-toggle i{
  display: none !important;
}

/* 1) Cápsula (track) */
.navbar .quarto-color-scheme-toggle{
  --tg-w: 3.05rem;
  --tg-h: 1.55rem;
  --tg-pad: .16rem;

  width: var(--tg-w);
  height: var(--tg-h);
  padding: 0 !important;

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  position: relative;
  border-radius: 999px;

  /* Track translúcido que “toma” el color del navbar */
  background: color-mix(in srgb, currentColor 16%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);

  /* sin “borde negro duro” */
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* Fallback si el navegador no soporta color-mix */
@supports not (background: color-mix(in srgb, #000 10%, transparent)){
  .navbar .quarto-color-scheme-toggle{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
  }
  html[data-bs-theme="light"] .navbar .quarto-color-scheme-toggle{
    background: rgba(0,0,0,.08);
    border-color: rgba(0,0,0,.14);
  }
}

/* 2) Knob circular (la bolita) */
.navbar .quarto-color-scheme-toggle::before{
  content: "";
  position: absolute;
  top: 50%;
  left: var(--tg-pad);
  transform: translateY(-50%);

  width: calc(var(--tg-h) - (var(--tg-pad) * 2));
  height: calc(var(--tg-h) - (var(--tg-pad) * 2));
  border-radius: 999px;

  /* blanco “soft” tipo el modelo */
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);

  /* sensación de “flotante” */
  box-shadow:
    0 10px 18px rgba(0,0,0,.18),
    0  2px  5px rgba(0,0,0,.12);

  transition: left .18s ease;
}

/* 3) Ícono dentro del knob (SOL en light) */
.navbar .quarto-color-scheme-toggle::after{
  content: "";
  position: absolute;
  top: 50%;
  left: var(--tg-pad);
  transform: translateY(-50%);

  width: calc(var(--tg-h) - (var(--tg-pad) * 2));
  height: calc(var(--tg-h) - (var(--tg-pad) * 2));
  border-radius: 999px;

  /* color del icono (negro suave como el modelo) */
  background: rgba(0,0,0,.78);

  /* SOL “como el modelo” (ring + rayos) */
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill-rule='evenodd' d='M12 7.25c-2.623 0-4.75 2.127-4.75 4.75S9.377 16.75 12 16.75s4.75-2.127 4.75-4.75S14.623 7.25 12 7.25zm0 1.8a2.95 2.95 0 1 0 0 5.9 2.95 2.95 0 0 0 0-5.9z'/>\
<path d='M12 2.7a1 1 0 0 1 1 1v1.3a1 1 0 1 1-2 0V3.7a1 1 0 0 1 1-1zm0 16.0a1 1 0 0 1 1 1V21a1 1 0 1 1-2 0v-1.3a1 1 0 0 1 1-1zM2.7 12a1 1 0 0 1 1-1H5a1 1 0 1 1 0 2H3.7a1 1 0 0 1-1-1zm16.0 0a1 1 0 0 1 1-1H21a1 1 0 1 1 0 2h-1.3a1 1 0 0 1-1-1z'/>\
<path d='M5.15 5.15a1 1 0 0 1 1.414 0l.92.92a1 1 0 1 1-1.414 1.414l-.92-.92a1 1 0 0 1 0-1.414zm11.366 11.366a1 1 0 0 1 1.414 0l.92.92a1 1 0 1 1-1.414 1.414l-.92-.92a1 1 0 0 1 0-1.414zM18.85 5.15a1 1 0 0 1 0 1.414l-.92.92a1 1 0 1 1-1.414-1.414l.92-.92a1 1 0 0 1 1.414 0zM7.484 16.516a1 1 0 0 1 0 1.414l-.92.92A1 1 0 1 1 5.15 17.436l.92-.92a1 1 0 0 1 1.414 0z'/>\
</svg>") center/60% 60% no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill-rule='evenodd' d='M12 7.25c-2.623 0-4.75 2.127-4.75 4.75S9.377 16.75 12 16.75s4.75-2.127 4.75-4.75S14.623 7.25 12 7.25zm0 1.8a2.95 2.95 0 1 0 0 5.9 2.95 2.95 0 0 0 0-5.9z'/>\
<path d='M12 2.7a1 1 0 0 1 1 1v1.3a1 1 0 1 1-2 0V3.7a1 1 0 0 1 1-1zm0 16.0a1 1 0 0 1 1 1V21a1 1 0 1 1-2 0v-1.3a1 1 0 0 1 1-1zM2.7 12a1 1 0 0 1 1-1H5a1 1 0 1 1 0 2H3.7a1 1 0 0 1-1-1zm16.0 0a1 1 0 0 1 1-1H21a1 1 0 1 1 0 2h-1.3a1 1 0 0 1-1-1z'/>\
<path d='M5.15 5.15a1 1 0 0 1 1.414 0l.92.92a1 1 0 1 1-1.414 1.414l-.92-.92a1 1 0 0 1 0-1.414zm11.366 11.366a1 1 0 0 1 1.414 0l.92.92a1 1 0 1 1-1.414 1.414l-.92-.92a1 1 0 0 1 0-1.414zM18.85 5.15a1 1 0 0 1 0 1.414l-.92.92a1 1 0 1 1-1.414-1.414l.92-.92a1 1 0 0 1 1.414 0zM7.484 16.516a1 1 0 0 1 0 1.414l-.92.92A1 1 0 1 1 5.15 17.436l.92-.92a1 1 0 0 1 1.414 0z'/>\
</svg>") center/60% 60% no-repeat;

  opacity: .98;
  pointer-events: none;

  transition: left .18s ease, -webkit-mask .18s ease, mask .18s ease;
}

/* 4) Estado DARK: knob a la derecha + misma luna (crescent) */
html[data-bs-theme="dark"] .navbar .quarto-color-scheme-toggle::before,
html.quarto-dark .navbar .quarto-color-scheme-toggle::before,
body.quarto-dark .navbar .quarto-color-scheme-toggle::before{
  left: calc(100% - (var(--tg-h) - (var(--tg-pad) * 2)) - var(--tg-pad));
}

html[data-bs-theme="dark"] .navbar .quarto-color-scheme-toggle::after,
html.quarto-dark .navbar .quarto-color-scheme-toggle::after,
body.quarto-dark .navbar .quarto-color-scheme-toggle::after{
  left: calc(100% - (var(--tg-h) - (var(--tg-pad) * 2)) - var(--tg-pad));

  /* LUNA creciente – orientación correcta (abre a la izquierda) */
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<g transform='translate(24,0) scale(-1,1)'>\
<path fill-rule='evenodd' d='M12.6 3.2c-3.4.5-6 3.4-6 6.9 0 3.9 3.2 7.1 7.1 7.1 3.2 0 5.9-2.1 6.8-5.1-1.1.4-2.3.6-3.5.5-3.9-.2-6.9-3.4-6.9-7.3 0-.8.1-1.5.3-2.1z'/>\
</g></svg>") center/74% 74% no-repeat;

          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<g transform='translate(24,0) scale(-1,1)'>\
<path fill-rule='evenodd' d='M12.6 3.2c-3.4.5-6 3.4-6 6.9 0 3.9 3.2 7.1 7.1 7.1 3.2 0 5.9-2.1 6.8-5.1-1.1.4-2.3.6-3.5.5-3.9-.2-6.9-3.4-6.9-7.3 0-.8.1-1.5.3-2.1z'/>\
</g></svg>") center/74% 74% no-repeat;
}

/* 5) Hover sobrio */
.navbar .quarto-color-scheme-toggle:hover{
  filter: brightness(1.04);
}

/* =========================================
   NAVBAR – Hover con brillo (links)
   ========================================= */
.navbar .nav-link{
  transition: all .22s ease-in-out;
  border-radius: 999px;
  padding: .35rem .75rem;
}

/* Hover universal: brillo + fondo suave */
.navbar .nav-link:hover{
  background: color-mix(in srgb, currentColor 14%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, currentColor 22%, transparent);
  text-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
  transform: translateY(-1px);
}



/* =========================
   0) Base / Layout Quarto
========================= */
main.content {
  padding-top: 1.2rem;
}

/* =========================
   1) HERO GRID RESPONSIVE */
.hero {
  width: min(1320px, 96vw);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.4rem;
  align-items: center;
  min-height: 70vh;
}

@media (max-width: 992px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .hero-left { order: 2; }
  .hero-right { order: 1; }
}

/* =========================
   2) IZQUIERDA: GIF completo, centrado y sin espacios */
.hero-left {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.media-card {
  position: relative;
  width: 100%;
  max-width: 820px;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);

  display: block;
  line-height: 0;
  font-size: 0;
}

.hero-figure {
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
  display: block;
}

.hero-media {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;

  margin: 0;
  padding: 0;
  line-height: 0;
  border: 0;
}

/* Caption del GIF */
.media-caption {
  position: absolute;
  left: 16px;
  bottom: 12px;
  color: #fff;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

/* =========================
   3) DERECHA: Marca + Textos */
.hero-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 1.5rem;
}

@media (max-width: 992px) {
  .hero-right {
    align-items: center;
    text-align: center;
  }
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

@media (max-width: 992px) {
  .brand { align-items: center; }
}

.brand-logo {
  width: clamp(110px, 10vw, 150px);
  height: auto;
}

html[data-bs-theme="dark"] .brand-logo{
  filter: brightness(1.18) contrast(1.22) saturate(1.08);
}

.brand-title {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #2c3e50;
}

.brand-tagline {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: #3498db;
  margin-top: 0.2rem;
  font-weight: 500;
}

/* =========================================
   NAVBAR LOGO – círculo REAL (forzado)
   ========================================= */

.navbar .navbar-brand{
  display: inline-flex !important;
  align-items: center !important;
  gap: .55rem;
}

/* El logo que inserta Quarto */
.navbar img.navbar-logo,
.navbar .navbar-brand img{
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: 999px !important;
  clip-path: circle(50% at 50% 50%);

  display: block !important;
  flex: 0 0 auto !important;

  background: #fff !important;
  padding: 2px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.18) !important;
}


/* =========================================================
   CARD-SOFT – recuperar aire + línea bajo el título
   ========================================================= */

.card-soft{
  width: 100%;
  padding: 1.8rem 2rem;          /* ✅ más aire (antes estaba apretado) */
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);  /* ✅ como antes, más presente */
}

/* Título con separador */
.card-soft h2{
  margin: 0 0 1rem 0;
  padding-bottom: .65rem;         /* ✅ espacio para la línea */
  border-bottom: 1px solid rgba(0,0,0,.18); /* ✅ línea en light */
  font-weight: 800;
}

/* Línea en dark */
body.quarto-dark .card-soft h2,
html[data-bs-theme="dark"] .card-soft h2{
  border-bottom-color: rgba(255,255,255,.18);
}

/* Lista: recuperar separación */
.card-soft ul{
  margin: 0;
  padding-left: 1.2rem;
}

.card-soft li{
  margin: .65rem 0;              /* ✅ más separación entre bullets */
  line-height: 1.45;
}

/* Light: celeste suave SOLO en index */
html[data-bs-theme="light"] body.page-index .card-soft,
body.page-index:not(.quarto-dark) .card-soft{
  background-color: rgba(0,0,0,.03);
}

/* Dark: plomo SOLO en index */
html[data-bs-theme="dark"] body.page-index .card-soft,
body.page-index.quarto-dark .card-soft,
html.quarto-dark body.page-index .card-soft{
  background: #1f232a !important;
  color: rgba(255,255,255,.90) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.55) !important;
}

html[data-bs-theme="dark"] body.page-index .card-soft h2,
body.page-index.quarto-dark .card-soft h2,
html.quarto-dark body.page-index .card-soft h2{
  color: rgba(255,255,255,.96) !important;
}

html[data-bs-theme="dark"] body.page-index .card-soft li,
body.page-index.quarto-dark .card-soft li,
html.quarto-dark body.page-index .card-soft li{
  color: rgba(255,255,255,.82) !important;
}

html[data-bs-theme="dark"] .brand-title,
body.quarto-dark .brand-title,
html.quarto-dark .brand-title{
  color: rgba(255,255,255,.95) !important;
}

html[data-bs-theme="dark"] .brand-tagline,
body.quarto-dark .brand-tagline,
html.quarto-dark .brand-tagline{
  color: rgba(255,255,255,.78) !important;
}

/* =========================================
   NAVBAR: evitar logo duplicado (dejar solo 1)
   ========================================= */

/* Si Quarto mete 2 imágenes dentro del brand, oculta la segunda */
.navbar .navbar-brand img + img{
  display: none !important;
}

/* (opcional) por si mete un svg/otro ícono adicional */
.navbar .navbar-brand .navbar-logo + img{
  display: none !important;
}

/* ------ ✅ E Q U I P O ------*/
/* =========================
   EQUIPO (Sandstone / Darkly)
   Toggle real Quarto: data-bs-theme
   ========================= */

/* Fondo solo en página equipo */
html[data-bs-theme="light"] .page-equipo{
  background: #E8F3FF;
}
html[data-bs-theme="dark"] .page-equipo{
  background: #0D1117;
}

/* ===== Tipografía uniforme usando la del tema ===== */
.team-title,
.team-name,
.team-card,
.team-card h3,
.team-card h4,
.team-card h5,
.team-card p,
.team-card li,
.team-card ul,
.team-card strong,
.team-button{
  font-family: var(--font-sans);
  font-weight: 300;
}

/* Título Equipo */
.team-title{
  text-align: center;
  font-size: 3.2rem;
  font-weight: 600;
  margin: 2.2rem 0 1.3rem;

  /* ✅ Sandstone: usa color del tema */
  color: var(--bs-body-color);
}

/* ✅ Darkly: asegura contraste total */
html[data-bs-theme="dark"] .team-title,
body.quarto-dark .team-title,
html.quarto-dark .team-title{
  color: #FFFFFF !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

/* Grilla */
.team-grid{
  align-items: stretch;
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 1rem 2.8rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(330px, 1fr));
  gap: 1.8rem;
  justify-content: center;
}

@media (max-width: 1050px){
  .team-grid{ grid-template-columns: repeat(2, minmax(300px, 1fr)); }
}
@media (max-width: 650px){
  .team-grid{ grid-template-columns: 1fr; }
}

/* Card titles */
.team-card h3,
.team-card h4,
.team-card h5{
  text-align: center;
  font-size: 1.15rem;
  font-weight: 300;
  margin: .4rem 0 .6rem;
}

.team-card .team-role{
  display: block;
  text-align: center;
  font-size: 1rem;
  font-weight: 600 !important;
  margin-bottom: .6rem;
  font-style: normal;
}

.team-card p,
.team-card li{
  font-size: .95rem;
  line-height: 1.35;
  font-weight: 300;
}

.team-card ul{
  margin: .8rem 0 0;
  padding-left: 1.15rem;
  text-align: justify;
  text-justify: inter-word;
}

/* ==================================================
   CARD (LIGHT - DEFAULT)
   ✅ Se aplica SIEMPRE en modo Sandstone (light)
   ================================================== */

.team-card{
  background: #ffffff;
  border-radius: 22px;
  padding: 1.6rem;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  color: #0A1F2C;
  overflow: hidden;

  /* ✅ CLAVE: estructura para botón al pie */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  height: 100%;
  min-height: 720px;   /* puedes subir a 740 si quieres más espacio */
}


.team-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 16px 44px rgba(0,162,255,0.18);
  border-color: rgba(0,162,255,0.22);
}

/* Foto */
.team-photo{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  margin-bottom: 1rem;
  background: rgba(255,255,255,0.55);
}

/* Nombre (LIGHT) */
.team-name{
  font-size: 1.45rem;
  font-weight: 300;
  margin: 0.2rem 0 0.5rem;
  color: #062233;
}

/* strong (LIGHT) */
.team-card strong{
  color: #062233;
}

/* Botón (LIGHT) */
.team-button{
  display: inline-block;

  margin-top: auto !important;   /* ✅ lo manda al pie */
  align-self: center;            /* ✅ centrado */
  margin-bottom: 0.4rem;

  padding: .65rem 1.4rem;
  border-radius: 14px;
  font-weight: 300;
  background: #00C896;
  color: #0A1F2C;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,200,150,0.28);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.team-button:hover{
  background: #0077FF;
  color: #ffffff;
  transform: scale(1.04);
}

/* ==================================================
   CARD (DARK - Darkly)
   Compatible con: html[data-bs-theme="dark"] y .quarto-dark
   ================================================== */

html[data-bs-theme="dark"] .team-card,
.quarto-dark .team-card{
  background: #2B2F33;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  color: #FFFFFF;
}

html[data-bs-theme="dark"] .team-card:hover,
.quarto-dark .team-card:hover{
  box-shadow: 0 18px 48px rgba(0,212,255,0.28);
  border-color: rgba(0,212,255,0.22);
}

html[data-bs-theme="dark"] .team-photo,
.quarto-dark .team-photo{
  background: rgba(255,255,255,0.06);
}

html[data-bs-theme="dark"] .team-name,
.quarto-dark .team-name{
  color: #FFFFFF;
}

html[data-bs-theme="dark"] .team-card strong,
.quarto-dark .team-card strong{
  color: #D7E6F0;
}

html[data-bs-theme="dark"] .team-button,
.quarto-dark .team-button{
  background: #00D4FF;
  color: #0A0F14;
  box-shadow: 0 10px 22px rgba(0,212,255,0.18);
  font-weight: 300;
}

html[data-bs-theme="dark"] .team-button:hover,
.quarto-dark .team-button:hover{
  background: #FF2BE2;
  color: #ffffff;
}


/* ------ EQUIPO FLOTANTE (MODAL) ----- */

/* ✅ Un solo bloque tipográfico para modal */
#teamModal,
#teamModal *{
  font-family: var(--font-sans) !important;
}

/* ✅ Peso normal del contenido del modal */
#teamModal .team-modal-content{
  font-weight: 300;
}

/* ✅ Negrita real dentro del modal (Markdown **texto**) */
#teamModal .team-modal-content strong,
#teamModal .team-modal-content b{
  font-weight: 700 !important;
}

.team-details-hidden{ display: none; }

.team-modal{
  border-radius: 18px;
  overflow: hidden;
  border: 0;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

@media (min-width: 992px){
  #teamModal .modal-lg{
    max-width: 1100px;
  }
}

.team-modal-header{
  background: #10c9e8;
  border-bottom: 0;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.team-modal-titlewrap{
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.team-modal-title{
  font-weight: 300 !important;
  font-size: 1.15rem;
  line-height: 1.15;
  color: #071318;
  letter-spacing: .2px;
}

.team-modal-role{
  font-weight: 300 !important;
  font-size: 0.95rem;
  opacity: .9;
  color: #071318;
}

.team-modal-close{
  width: 0.3rem;
  height: 0.3rem;
  opacity: .7;
}

.team-modal-body{
  padding: 1.2rem 1.25rem 1.35rem 1.25rem;
}

.team-modal-grid{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.2rem;
  align-items: start;
}

.team-modal-photo{
  width: 100%;
  height: 300px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.team-modal-content{
  font-size: 0.98rem;
  line-height: 1.55;
  font-weight: 300;
}

.team-modal-content p,
.team-modal-content li{
  text-align: justify;
  text-justify: inter-word;
}

.team-modal-content h2{
  font-size: 1.55rem !important;  /* ✅ reduce “Educación” grande */
  font-weight: 600 !important;
  margin-bottom: 0.6rem;
}

.team-modal-content h3{
  margin: .25rem 0 .55rem 0;
  font-weight: 600 !important;
  font-size: 0.98rem;        /* ✅ más pequeño */
  letter-spacing: .10px;
}

.team-modal-content h4,
.team-modal-content h5{
  font-weight: 300 !important;
}

.team-modal-content ul{
  margin-bottom: .9rem;
  padding-left: 1.15rem;
}

.team-modal-content a{
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.25);
}
html[data-bs-theme="dark"] .team-modal-content a{
  border-bottom-color: rgba(255,255,255,.28);
}

.team-modal-right{
  max-height: 70vh;
  overflow: auto;

  padding-right: 1.15rem;   /* ✅ más aire a la derecha */
  padding-left: 0.2rem;     /* opcional: leve aire a la izquierda */
}

@media (max-width: 768px){
  .team-modal-grid{ grid-template-columns: 1fr; }
  .team-modal-photo{ height: 220px; }
  .team-modal-right{
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

/* EXCEPCIONES en negrita */
#teamModal .team-name{ font-weight: 600 !important; }
#teamModal .team-modal-role{ font-weight: 600 !important; }

/* ✅ Negrita visible en modal (Light + Dark) */
#teamModal .team-modal-content strong,
#teamModal .team-modal-content b{
  font-weight: 800 !important;
}

/* ✅ En modo oscuro: además dale un color ligeramente más brillante */
html[data-bs-theme="dark"] #teamModal .team-modal-content strong,
body.quarto-dark #teamModal .team-modal-content strong,
html.quarto-dark #teamModal .team-modal-content strong{
  color: #FFFFFF !important;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.20); /* sutil, estilo pro */
}

html[data-bs-theme="dark"] #teamModal .team-modal-content strong{
  background: rgba(0, 212, 255, 0.12);
  padding: 0.05rem 0.25rem;
  border-radius: 6px;
}

/* =========================
   SERVICIOS – CALLOUTS
   ========================= */
/* =========================
   SERVICIOS – TÍTULOS CALLOUT (RESPONSIVE)
   ========================= */

/* Desktop / base */
.callout.callout-style-simple > .callout-header,
.callout.callout-style-simple > .callout-header summary,
.callout.callout-style-simple > .callout-header button{
  font-size: 1.85rem !important;   /* ✅ tamaño decente en PC */
  line-height: 1.15 !important;
}

/* Texto del título (y lo que esté dentro) hereda el tamaño del header */
.callout.callout-style-simple .callout-title,
.callout.callout-style-simple .callout-title *{
  font-size: inherit !important;
  font-family: var(--bs-font-sans-serif) !important;
  font-weight: 500 !important;
}

/* Contenido normal */
.callout.callout-style-simple .callout-body{
  font-size: 1rem;                 /* no tocamos listas/párrafos */
  line-height: 1.45;
}

/* Tablet */
@media (max-width: 992px){
  .callout.callout-style-simple > .callout-header,
  .callout.callout-style-simple > .callout-header summary,
  .callout.callout-style-simple > .callout-header button{
    font-size: 1.65rem !important;
  }
}

/* Celular */
@media (max-width: 576px){
  .callout.callout-style-simple > .callout-header,
  .callout.callout-style-simple > .callout-header summary,
  .callout.callout-style-simple > .callout-header button{
    font-size: 1.35rem !important; /* ✅ visible pero no gigante */
    line-height: 1.2 !important;
  }
}


/* ----- ✅ P O R T A F O L I O (Sandstone / Darkly) --------*/

/* ===== Listing: mejor look y hereda Sandstone/Darkly ===== */
.quarto-listing .quarto-listing-item{
  border-radius: 14px;
  overflow: hidden;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(var(--bs-body-color-rgb), .12);
  background: var(--bs-body-bg);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.quarto-listing .quarto-listing-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  border-color: rgba(var(--bs-primary-rgb), .35);
}

.quarto-listing .listing-title{
  font-size: 1.55rem;
  font-weight: 500;
}

.quarto-listing .listing-description{
  opacity: .85;
}

.quarto-listing .listing-image img{
  border-radius: 12px;
  height: 120px;
  width: 220px;
  object-fit: cover;
  border: 1px solid rgba(var(--bs-body-color-rgb), .15);
}


/* ------- D E N S I D A D ------ */

.page-densidad .content{
  max-width: 1500px;
}

/* Breadcrumbs */
.breadcrumbs{
  font-size: 0.9rem;
  opacity: .8;
  margin: 0.5rem 0 1rem;
}
.breadcrumbs .sep{ margin: 0 0.4rem; }

.densidad-acc{ max-width: 100%; }

.densidad-acc .accordion-item{
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.8rem;
}

.densidad-acc .accordion-header{ margin: 0 !important; }

/* ✅ Header del acordeón: celeste/azul (como tu barra superior) */
.densidad-acc .accordion-button{
  font-weight: 400;
  padding: .85rem 1rem;
  margin: 0 !important;
  box-shadow: none !important;

  background: #355D82;     /* 👈 cambia aquí si quieres otro tono */
  color: #fff;
}

/* Misma barra cuando está abierto */
.densidad-acc .accordion-button:not(.collapsed){
  background: #355D82;     /* 👈 antes era verdoso */
  color: #fff;
}

/* Flecha en blanco */
.densidad-acc .accordion-button::after{
  filter: brightness(0) invert(1);
  opacity: .95;
}

.densidad-body{ padding: 0 !important; }

.densidad-acc .accordion-body > *:first-child{
  margin-top: 0 !important;
}

.densidad-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 992px){
  .densidad-grid{ grid-template-columns: 1.35fr 1fr; }
}

.densidad-panel{
  width: 100%;
  background: var(--bs-body-bg);
}

/* ✅ Altura común para imagen y video (controla el tamaño general aquí) */
@media (min-width: 992px){
  .densidad-panel{
    height: 320px;                /* 👈 sube a 420/520 si lo quieres más grande */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Imagen */
.densidad-panel-img .densidad-img{
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* Contenedor del video: solo centra y mantiene la caja */
.densidad-panel-video{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                 /* no crece ni rompe bordes */
  
  /* 🔧 Diales de ajuste interno del video */
  --yt-scale: 1.03;                 /* zoom interno (1 = sin zoom) */
  --yt-y: 4px;                      /* desplazamiento vertical fino */
}

/* Iframe ocupa EXACTAMENTE la misma caja que la imagen */
.densidad-panel-video iframe{
  width: 100%;
  height: 100% !important;          /* 👈 clave: igual altura que la imagen */
  border: 0;
  display: block;

  /* Zoom interno SIN mover la caja */
  transform: scale(var(--yt-scale)) translateY(var(--yt-y));
  transform-origin: center;
}

/* =========================
   CALLOUT INFORMATIVO (fuera del feedback)
   ========================= */

.densidad-callout{
  max-width: 1100px;
  margin: 2rem auto 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;

  background: rgba(53, 93, 130, 0.08);
  border: 2px solid rgba(53, 93, 130, 0.45);

  text-align: center;
}

.densidad-callout-text{
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: .35rem;
}

.densidad-callout-mail{
  font-size: .95rem;
}

.densidad-callout a{
  font-weight: 600;
  text-decoration: none;
}

.densidad-callout a:hover{
  text-decoration: underline;
}

/* Dark mode fino */
@media (prefers-color-scheme: dark){
  .densidad-callout{
    background: rgba(53, 93, 130, 0.18);
    border-color: rgba(53, 93, 130, 0.65);
  }
}