:root{
  --gold:#D4AF37; --dark:#333; --light:#f5f0e1; --blue:#0a3d62; --teal:#138086;
  --font-sans:'Montserrat',sans-serif; --font-serif:'Lora',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* El scroll aterriza sobre el H2 visible bajo barras fijas */
.section-title{scroll-margin-top:160px}

body{font-family:var(--font-sans);padding-top:40px;background:#fff}

/* ── Topbar ─────────────────────────────────────────── */
.topbar{
  position:fixed; top:0; width:100%;
  background:var(--blue); color:#fff;
  line-height:40px; z-index:1030;
  display:flex; justify-content:center; align-items:center; gap:.6rem;
  padding:0 .5rem; font-size:.95rem; white-space:nowrap;
}
.topbar a{color:#fff;text-decoration:none}
@media (max-width:576px){
  .topbar{line-height:36px;font-size:.88rem;gap:.5rem;padding:0 .4rem}
  .topbar a[href^="mailto:"]{max-width:62vw;overflow:hidden;text-overflow:ellipsis;display:inline-block}
}

/* ── Navbar ─────────────────────────────────────────── */
#navbar{
  position:fixed; top:40px; width:100%;
  background:var(--light); z-index:1020; padding:.6rem .8rem;
}
.navbar-brand span{color:var(--dark);font-family:var(--font-serif);font-size:1.3rem}
.logo{height:80px}
.nav-link{color:var(--dark)!important;font-weight:600;transition:color .2s}
.nav-link:hover,.nav-link.active{color:var(--gold)!important}

@media (max-width:576px){
  body{padding-top:36px}
  #navbar{top:36px;padding:.5rem .75rem}
  .logo{height:56px}
  .navbar-brand span{font-size:1.05rem}
  .section-title{scroll-margin-top:120px} /* barras más pequeñas en móvil */
}

/* ── Hero ─────────────────────────────────────────── */
header#inicio{position:relative;overflow:hidden;height:calc(100vh - 40px)}
/*.hero-img{width:100%;height:100%;object-fit:cover}
.overlay-bottom{
  position:absolute;left:0;bottom:0;width:100%;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2rem;min-height:120px;
}
.overlay-bottom .text-block{color:#fff;max-width:70%}
.overlay-bottom .text-block h1{font-family:var(--font-serif);font-size:1.75rem;margin-bottom:.25rem}
.overlay-bottom .text-block p{margin-bottom:.25rem}
.overlay-bottom .button-block .btn{color:#fff;border-color:#fff}
.overlay-bottom .button-block .btn:hover{background:#fff;color:var(--dark)}
@media (max-width:576px){
  header#inicio{height:75vh}
  .overlay-bottom{padding:.8rem 1rem;min-height:auto;flex-direction:column;align-items:flex-start}
  .overlay-bottom .text-block{max-width:100%}
  .overlay-bottom .text-block h1{font-size:1.35rem}
  .overlay-bottom .text-block p{font-size:.95rem}
  .overlay-bottom .button-block{width:100%;margin-top:.5rem}
  .overlay-bottom .button-block .btn{width:100%}
}*/
/* ===== HERO moderno (sin duplicar WhatsApp) ===== */
.hero{
  position:relative; height:calc(100vh - 40px); /* compensa topbar */
  min-height:520px; overflow:hidden; color:#fff;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.03); /* leve zoom para evitar bordes en resize */
}
.hero-overlay{
  position:absolute; inset:0;
  /* degradado sutil arriba + fuerte abajo para contrastar texto */
  background: linear-gradient(180deg, rgba(0,0,0,.15) 10%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.7) 100%);
}
.hero-content{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:.5rem;
  padding:2rem 1rem 3rem;
  /* alinear contenido al borde inferior-izquierdo en desktop */
  justify-content:flex-end; align-items:flex-start; height:100%;
}
.hero-title{
  font-family: var(--font-serif); font-weight:700; line-height:1.1;
  font-size: clamp(2rem, 4.5vw, 3.5rem); margin:0;
}
.hero-subtitle{
  font-size: clamp(1rem, 2.2vw, 1.35rem); margin: .3rem 0 0 0; opacity:.95;
}
.hero-tagline{
  font-style: italic; margin-top:.3rem; opacity:.9;
}
.hero-cta{ margin-top:1rem }

/* Botón primario a juego con la paleta */
.btn-teal{
  background: var(--teal); border-color: var(--teal); color:#fff;
}
.btn-teal:hover{ background:#0f6f73; border-color:#0f6f73 }

/* Responsivo: centrar en móvil para mayor impacto */
@media (max-width: 576px){
  .hero{ height: 78vh; min-height: 480px; }
  .hero-content{ align-items:flex-start; padding:1.2rem 1rem 1.8rem }
  .hero-cta .btn{ width:100%; margin-bottom:.5rem }
}


/* ── Secciones generales ───────────────────────────── */
.section-title{
  font-family:var(--font-serif);
  color:var(--teal);
  font-size:1.6rem;
  margin-bottom:1rem;
}
.section-title.active-title{color:var(--gold);border-bottom:2px solid var(--gold);padding-bottom:.25rem}
.bg-light{background:var(--light)!important}
.bg-secondary{background:var(--blue)!important;color:#fff}

/* ── BLOQUE ESCUELA ────────────────────────────────── */
.bg-escuela{
  background:linear-gradient(180deg,#f5f0e1 0%,#fff 100%);
}
.text-gold{color:var(--gold)}
.text-escuela-strong{color:var(--teal)}
.escuela-figure img{
  object-fit:cover; width:100%; height:auto;
  border:3px solid rgba(0,0,0,.05);
}
.escuela-callouts{display:grid;gap:.6rem}
.escuela-callouts .callout{
  display:flex;gap:.6rem;align-items:flex-start;
  background:#fff;border:1px solid rgba(0,0,0,.06);
  border-left:4px solid var(--gold);
  padding:.6rem .75rem;border-radius:.5rem;
}
.escuela-callouts .callout i{color:var(--gold);font-size:1.1rem;line-height:1.1rem;margin-top:.15rem}
.skill-item{
  display:flex;gap:.6rem;align-items:flex-start;
  background:#fff;border:1px dashed rgba(0,0,0,.1);
  padding:.65rem .75rem;border-radius:.6rem;
}
.skill-item i{color:var(--teal);font-size:1.2rem;margin-top:.15rem}
.escuela-note{
  display:flex;gap:.6rem;align-items:flex-start;
  background:rgba(19,128,134,.06);
  border:1px solid rgba(19,128,134,.18);
  padding:.75rem .85rem;border-radius:.6rem;
}
.escuela-note i{color:var(--teal);font-size:1.2rem;margin-top:.1rem}
@media (max-width:576px){
  .escuela-figure{order:-1} /* imagen arriba en móvil */
  .skill-item{padding:.6rem}
}
/* ===== Layout y equilibrio visual del bloque Escuela ===== */
.escuela-wrap{max-width:1200px}

/* Imagen con presencia y proporción coherente */
.escuela-media{
  position:relative; height:520px; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  background:#eee;
}
.escuela-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  display:block; filter:saturate(1.05) contrast(1.02);
}

/* Constrain de lectura para mejorar ritmo de línea */
.escuela-prose{
  max-width:620px; margin-left:auto; margin-right:auto;
  line-height:1.7; font-size:1.04rem;
}

/* Grid de habilidades: mismas alturas y buen ritmo */
.escuela-grid .skill-item{
  display:flex; gap:.6rem; align-items:flex-start;
  background:#fff; border:1px dashed rgba(0,0,0,.1);
  padding:.75rem .85rem; border-radius:.7rem;
  height:100%;
}
.escuela-grid .skill-item i{
  color:var(--teal); font-size:1.2rem; margin-top:.1rem;
}

/* Callouts y nota, como ya estaban */
.escuela-callouts{display:grid; gap:.65rem}
.escuela-callouts .callout{
  display:flex; gap:.6rem; align-items:flex-start;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-left:4px solid var(--gold);
  padding:.6rem .75rem; border-radius:.55rem;
}
.escuela-callouts .callout i{color:var(--gold); font-size:1.1rem; margin-top:.15rem}
.escuela-note{
  display:flex; gap:.6rem; align-items:flex-start;
  background:rgba(19,128,134,.06); border:1px solid rgba(19,128,134,.18);
  padding:.8rem .9rem; border-radius:.6rem;
}
.escuela-note i{color:var(--teal); font-size:1.2rem}

/* Opción elegante: imagen “sticky” en desktop para acompañar la lectura */
@media (min-width: 992px){
  .escuela-media{ position:sticky; top: calc(36px + 64px + 16px); } /* topbar + navbar + respiro */
}

/* Responsivo móvil: imagen arriba y alturas razonables */
@media (max-width: 991.98px){
  .escuela-media{ height:380px; }
  .escuela-prose{ max-width:100%; font-size:1rem; }
}
@media (max-width: 576px){
  .escuela-media{ height:300px; border-radius:10px; }
}


/* ── Galería ───────────────────────────────────────── */
img.rounded{transition:transform .3s}
img.rounded:hover{transform:scale(1.05)}

/* ── WhatsApp ──────────────────────────────────────── */
.whatsapp-float{
  position:fixed;right:20px;bottom:20px;
  width:60px;height:60px;background:#25d366;border-radius:50%;
  text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.3);z-index:1040
}
.whatsapp-float i{line-height:60px;font-size:1.8rem;color:#fff}

/* ── Footer ────────────────────────────────────────── */
footer{background:var(--dark);color:#ccc;text-align:center;font-size:.9rem}

/* ===== BLOQUE SIFU (imagen a la derecha) ===== */
.sifu-section{
  padding:80px 0;
  background:linear-gradient(180deg,#fff 0%, #fefcf8 100%);
}
.sifu-wrap{max-width:1200px}

/* Texto */
.sifu-prose{
  max-width:620px; margin-left:auto; margin-right:auto;
  line-height:1.7; font-size:1.04rem;
}
.sifu-callouts{display:grid; gap:.65rem}
.sifu-callouts .callout{
  display:flex; gap:.6rem; align-items:flex-start;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-left:4px solid var(--gold);
  padding:.6rem .75rem; border-radius:.55rem;
}
.sifu-callouts .callout i{color:var(--gold); font-size:1.1rem; margin-top:.15rem}

.sifu-note{
  display:flex; gap:.6rem; align-items:flex-start;
  background:rgba(19,128,134,.06);
  border:1px solid rgba(19,128,134,.18);
  padding:.8rem .9rem; border-radius:.6rem;
}
.sifu-note i{color:var(--teal); font-size:1.2rem}

/* Línea de tiempo */
.sifu-timeline{position:relative; margin:0; padding-left:1.25rem}
.sifu-timeline li{
  position:relative; padding:.3rem 0 .3rem .75rem;
  border-left:2px solid rgba(0,0,0,.08);
}
.sifu-timeline .dot{
  position:absolute; left:-7px; top:.7rem;
  width:10px; height:10px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.18);
}

/* Imagen */
.sifu-media{
  position:relative; height:520px; border-radius:12px; overflow:hidden;
  background:#eee; box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.sifu-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 35%;
  display:block; filter:saturate(1.03) contrast(1.02);
}

/* Imagen sticky en desktop para equilibrio con el texto */
@media (min-width: 992px){
  .sifu-media{ position:sticky; top: calc(36px + 64px + 16px); }
}

/* Responsivo */
@media (max-width: 991.98px){
  .sifu-media{ height:380px }
  .sifu-prose{ max-width:100%; font-size:1rem }
}
@media (max-width: 576px){
  .sifu-media{ height:300px; border-radius:10px }
}

/* ===== Galería ===== */
#galeria-root .nav-pills .nav-link {
  font-weight:600;
}
#galeria-root .nav-pills .nav-link.active {
  background: var(--teal);
}

.video-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  background:#000;
}
.video-ratio {
  position:relative; width:100%; padding-top:56.25%; /* 16:9 */
}
.video-ratio iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

.foto-thumb {
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: transform .2s ease;
  background:#fff;
}
.foto-thumb:hover { transform: translateY(-2px); }
.foto-thumb img { width:100%; height:180px; object-fit:cover; display:block; }

@media (max-width: 576px){
  .foto-thumb img { height:140px; }
}