/* ============ DueBelle — Look & Feel ============ */
:root{
  --marfil:#F0E8DD;
  --marron:#58403E;
  --marron-suave:#7A6662;
  --celeste:#DDEEF6;
  --celeste-claro:#ecf6f9;
  --rosado:#CAADA6;
  --rosado-suave:#B8A49D;
  --salvia:#8B8E7B;
  --gris-azul:#9DA6A8;
  --arena:#D8CDC4;
  --azul:#3b77a4;
  --verde-pastel:#DCE7D3;
  --verde-texto:#5A6B4C;
  --amarillo-pastel:#F5E7C9;
  --amarillo-texto:#8A7038;
  --rojo-pastel:#F0D9D4;
  --rojo-texto:#9B6055;
  --texto:#5C4B46;
  --blanco:#FDFBF8;
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Jost', sans-serif;
  --cond:'Oswald', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--texto);
  background:var(--blanco);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Tipografía ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--marron);line-height:1.15}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:1.4rem}
h1 em,h2 em{font-style:italic;font-weight:300}
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--marron-suave);
  margin-bottom:1.6rem;
}
.eyebrow.light{color:rgba(255,255,255,.85)}
.lead{font-size:1.05rem;max-width:640px;margin:0 auto 1.2rem;color:var(--texto)}
.center{text-align:center}
.light{color:#fff}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
  padding:1.05rem 2.6rem;
  border:1px solid;
  transition:all .35s ease;
  margin-top:1.4rem;
}
.btn-light-outline{color:#fff;border-color:rgba(255,255,255,.8);background:transparent}
.btn-light-outline:hover{background:#fff;color:var(--marron);border-color:#fff}
.btn-light-solid{color:var(--marron);border-color:#fff;background:#fff}
.btn-light-solid:hover{background:transparent;color:#fff}
.btn-dark-outline{color:var(--marron);border-color:var(--marron);background:transparent}
.btn-dark-outline:hover{background:var(--marron);color:var(--marfil)}
.btn-dark-solid{color:var(--marfil);border-color:var(--marron);background:var(--marron)}
.btn-dark-solid:hover{background:transparent;color:var(--marron)}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--marron);
  color:rgba(255,255,255,.85);
  font-size:.62rem;
  letter-spacing:.3em;
  display:flex;
  justify-content:space-between;
  padding:.55rem 2rem;
}
/* Con un solo texto no hay nada contra qué separarlo: se centra. */
.topbar:has(> :only-child){justify-content:center}

/* ---------- Header ---------- */
.header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(253,251,248,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(88,64,62,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.1rem 2rem .9rem;
  transition:padding .3s ease;
}
/* El logotipo es un lockup de dos líneas: necesita más alto que un wordmark
   suelto para que «Medical Institute» se lea. */
.header-logo img{height:var(--logo-alto,54px);transition:height .3s ease}
.header.scrolled{padding:.5rem 2rem .5rem}
.header.scrolled .header-logo img{height:calc(var(--logo-alto,54px) * .7)}
.header.scrolled .nav{margin-top:.4rem}
.nav{
  display:flex;
  gap:2.6rem;
  margin-top:.9rem;
  transition:margin .3s ease;
}
.nav > a,
.nav-sub-toggle{
  font-family:var(--sans);
  font-weight:300;
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--marron);
  padding:.2rem 0;
  background:none;
  border:none;
  border-bottom:1px solid transparent;
  cursor:pointer;
  transition:border-color .3s;
}
.nav > a:hover,
.nav-sub-toggle:hover{border-color:var(--rosado)}

/* Submenús */
.nav-item{position:relative}
.nav-sub-toggle::after{
  content:'';
  display:inline-block;
  width:5px;height:5px;
  margin-left:.6rem;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .3s;
}
.nav-item.abierto .nav-sub-toggle::after{transform:translateY(1px) rotate(-135deg)}
.submenu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,8px);
  width:max-content;
  max-width:290px;
  padding:1.1rem 0;
  margin-top:.9rem;
  background:var(--blanco);
  border:1px solid rgba(88,64,62,.12);
  box-shadow:0 18px 40px rgba(88,64,62,.1);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
  z-index:110;
}
/* Puente invisible para que el cursor no pierda el menú al bajar */
.nav-item::after{
  content:'';
  position:absolute;
  top:100%;
  left:0;right:0;
  height:1.1rem;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu,
.nav-item.abierto .submenu{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.submenu a{
  display:block;
  padding:.62rem 1.6rem;
  font-size:.66rem;
  letter-spacing:.16em;
  line-height:1.6;
  text-transform:uppercase;
  color:var(--marron-suave);
  transition:background .25s,color .25s;
}
.submenu a:hover{background:var(--marfil);color:var(--marron)}

/* Tercer nivel: cada instituto abre sus programas al costado */
.submenu-item{position:relative}
.submenu-item > a{padding-right:2.4rem}
.submenu-item > a::after{
  content:'';
  position:absolute;
  right:1.1rem;
  top:50%;
  width:5px;height:5px;
  border-right:1px solid currentColor;
  border-top:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
  opacity:.55;
}
.submenu-hijo{
  position:absolute;
  top:-1.1rem;
  left:100%;
  width:max-content;
  max-width:280px;
  padding:1.1rem 0;
  background:var(--blanco);
  border:1px solid rgba(88,64,62,.12);
  box-shadow:0 18px 40px rgba(88,64,62,.1);
  opacity:0;
  visibility:hidden;
  transform:translateX(6px);
  transition:opacity .24s ease,transform .24s ease,visibility .24s;
  z-index:120;
}
.submenu-item:hover > .submenu-hijo,
.submenu-item:focus-within > .submenu-hijo{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}
/* Si no cabe a la derecha, se abre hacia la izquierda (lo marca main.js) */
.submenu-item.abre-izquierda .submenu-hijo{left:auto;right:100%;transform:translateX(-6px)}
.submenu-item.abre-izquierda:hover > .submenu-hijo{transform:translateX(0)}
.submenu-hijo a{font-size:.62rem;letter-spacing:.14em;padding:.5rem 1.4rem}
.submenu .sub-todas{
  margin-top:.5rem;
  padding-top:.9rem;
  border-top:1px solid rgba(88,64,62,.1);
  font-style:italic;
  font-family:var(--serif);
  font-size:.9rem;
  letter-spacing:.04em;
  text-transform:none;
}
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:.4rem 0;
}
.nav-toggle span{display:block;width:26px;height:1px;background:var(--marron);margin:7px 0;transition:.3s}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 30%;
}
.hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(60,50,48,.35) 0%,rgba(60,50,48,.25) 50%,rgba(60,50,48,.5) 100%);
}
.hero-content{position:relative;z-index:2;padding:2rem;max-width:900px}
.hero h1{color:#fff;margin-bottom:1.6rem;text-shadow:0 2px 30px rgba(0,0,0,.18)}
.hero-sub{
  color:rgba(255,255,255,.92);
  font-size:1.02rem;
  letter-spacing:.06em;
  margin-bottom:1rem;
}
.hero-actions{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.hero-scroll{
  position:absolute;
  bottom:2.2rem;left:50%;
  transform:translateX(-50%);
  z-index:2;
}
.hero-scroll span{
  display:block;width:1px;height:56px;
  background:rgba(255,255,255,.6);
  animation:scrollLine 2.2s ease-in-out infinite;
  transform-origin:top;
}
@keyframes scrollLine{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Secciones ---------- */
.section{padding:7rem 2rem}
.section-marfil{background:var(--marfil)}
.section-white{background:var(--blanco)}
.section-celeste{background:var(--celeste-claro)}
.container{max-width:1180px;margin:0 auto}
.container.narrow{max-width:760px}

/* ---------- Pilares ---------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem;
  margin-top:4.5rem;
}
.pillar{text-align:left;border-top:1px solid rgba(88,64,62,.18);padding-top:1.8rem}
.pillar-num{
  font-family:var(--cond);
  font-weight:300;
  font-size:.85rem;
  letter-spacing:.2em;
  color:var(--rosado-suave);
  display:block;
  margin-bottom:1rem;
}
.pillar h3{font-size:1.5rem;margin-bottom:.8rem}
.pillar p{font-size:.95rem}

/* ---------- Institutos y programas ---------- */
.institutes{margin-top:5rem}
.institute{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:4.5rem;
  padding:3.6rem 0;
  border-top:1px solid rgba(88,64,62,.18);
}
.institute:last-child{border-bottom:1px solid rgba(88,64,62,.18)}
.institute-num{
  font-family:var(--cond);
  font-weight:300;
  font-size:.85rem;
  letter-spacing:.2em;
  color:var(--rosado-suave);
  display:block;
  margin-bottom:1rem;
}
.institute-head h3{font-size:1.8rem;margin-bottom:1.1rem}
.institute-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.12rem;
  line-height:1.5;
  color:var(--marron);
  padding-left:1.2rem;
  border-left:1px solid var(--rosado);
  margin-bottom:1.1rem;
}
.institute-text{font-size:.92rem;color:var(--marron-suave)}

/* Índice de programas: nivel 2 de la navegación */
.programs{list-style:none;column-count:2;column-gap:3rem}
.program{
  break-inside:avoid;
  padding:.85rem 0;
  border-bottom:1px solid rgba(88,64,62,.1);
}
.program-name{
  display:block;
  font-size:.76rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--marron);
  margin-bottom:.3rem;
}
.program-desc{display:block;font-size:.85rem;line-height:1.55;color:var(--marron-suave)}
a.program-name{transition:color .25s}
a.program-name:hover{color:var(--rosado)}
.program:has(a.program-name):hover{border-color:var(--rosado)}

/* Arsenal terapéutico: el nivel 6, siempre al final de la página */
.arsenal{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem;
  margin-top:3.5rem;
}
.arsenal-item{
  padding:.7rem 1.5rem;
  border:1px solid rgba(88,64,62,.18);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--marron);
}
.arsenal-nota{
  max-width:560px;
  margin:2.2rem auto 0;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.02rem;
  color:var(--marron-suave);
}
.program-flag{
  display:inline-block;
  margin-left:.7rem;
  padding:.12rem .55rem;
  font-family:var(--sans);
  font-style:normal;
  font-size:.54rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blanco);
  background:var(--rosado);
  vertical-align:2px;
}

@media(max-width:900px){
  .institute{grid-template-columns:1fr;gap:2.2rem;padding:2.8rem 0}
  .programs{column-count:1}
}

/* ---------- Cards especialidades ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
  margin-top:4.5rem;
}
.card{
  position:relative;
  min-height:480px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.card-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .8s ease;
}
.card:hover .card-bg{transform:scale(1.05)}
.card-photo .card-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(45,35,33,0) 40%,rgba(45,35,33,.62) 100%);
}
.card-body{
  position:relative;
  z-index:2;
  padding:2.2rem;
  color:#fff;
}
.card-body h3{
  font-family:var(--cond);
  font-weight:300;
  font-size:1.35rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  margin:.5rem 0 .6rem;
}
.card-body p{font-size:.9rem;color:rgba(255,255,255,.88);max-width:300px}
.card-tag{
  font-size:.62rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.card-flat .card-body{padding-bottom:2.4rem}
.card-body.dark-text h3{color:var(--marron)}
.card-body.dark-text p{color:var(--marron-suave)}
.card-body.dark-text .card-tag{color:var(--marron-suave)}

/* ---------- Exion ---------- */
.banda{background:var(--marron);padding:7rem 2rem}
.banda-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  align-items:center;
}
.banda h2{color:#fff;margin-bottom:0}
.banda-texto{color:rgba(255,255,255,.85);font-size:1rem;margin-bottom:1rem}
.banda-texto strong{font-weight:400;letter-spacing:.08em;color:#fff}

/* ---------- Split equipo ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:5rem;
  align-items:center;
}
.split-img img{width:100%;height:620px;object-fit:cover}
.split-content .lead{margin-left:0}
.split-content strong{font-weight:400;color:var(--marron)}

/* ---------- Footer ---------- */
.footer{background:var(--marron);color:rgba(255,255,255,.8);padding:5rem 2rem 0}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:3rem;
  padding-bottom:4rem;
}
.footer-logo{height:46px;width:auto;margin-bottom:1.4rem;filter:brightness(0) invert(1);opacity:.92}
.footer-brand p{font-size:.9rem;letter-spacing:.04em}
.footer-col h4{
  font-family:var(--sans);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:1.3rem;
}
.footer-col a{
  display:block;
  font-size:.88rem;
  margin-bottom:.7rem;
  opacity:.75;
  transition:opacity .3s;
}
.footer-col a:hover{opacity:1}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  max-width:1180px;
  margin:0 auto;
  padding:1.6rem 0;
  display:flex;
  justify-content:space-between;
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.7;
  flex-wrap:wrap;
  gap:.6rem;
}

/* ---------- WhatsApp ---------- */
.wa-float{
  position:fixed;
  bottom:1.6rem;right:1.6rem;
  z-index:200;
  width:56px;height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:transform .3s;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px}

/* ---------- Páginas internas ---------- */
.page-hero{
  position:relative;
  min-height:54vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:6rem 2rem 4rem;
}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.9rem);margin-bottom:1rem}
.page-hero--dark h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.15)}
.page-hero--dark .page-sub{color:rgba(255,255,255,.9)}
.page-hero--light h1{color:var(--marron)}
.page-hero--light .page-sub{color:var(--marron-suave)}
.page-sub{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.25rem;
  letter-spacing:.02em;
}
.page-hero .hero-bg::after{
  background:linear-gradient(180deg,rgba(60,50,48,.42) 0%,rgba(60,50,48,.3) 55%,rgba(60,50,48,.55) 100%);
}
.treatments{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.8rem 4.5rem;
  margin-top:4.2rem;
}
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem;
  margin-top:4rem;
  text-align:center;
}
.step h3{font-size:1.4rem;margin:.8rem 0 .6rem}
.step p{font-size:.92rem}
.step-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:2.2rem;
  color:var(--rosado);
  display:block;
}
.otras{
  border-top:1px solid rgba(88,64,62,.14);
  padding:3.2rem 2rem;
  text-align:center;
  background:var(--blanco);
}
.otras-label{
  font-size:.66rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--marron-suave);
  display:block;
  margin-bottom:1.4rem;
}
.otras-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.4rem}
.otras-links a{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
  color:var(--marron);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.otras-links a:hover{border-color:var(--rosado)}
.card .card-more{
  display:inline-block;
  margin-top:1rem;
  font-size:.64rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:.3rem;
}
.card-body.dark-text .card-more{color:var(--marron-suave);border-color:rgba(88,64,62,.4)}

@media (max-width:640px){
  .treatments{grid-template-columns:1fr;gap:2.2rem}
  .steps{grid-template-columns:1fr;gap:2.2rem}
}

/* ---------- Formulario de citas ---------- */
.cita-form{max-width:760px;margin:3.5rem auto 0;text-align:left}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
.cita-form label{
  display:block;
  font-size:.66rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--marron-suave);
  margin-bottom:2.1rem;
}
.cita-form .opt{letter-spacing:.2em;opacity:.7}
.cita-form input,
.cita-form select,
.cita-form textarea{
  display:block;
  width:100%;
  margin-top:.65rem;
  padding:.65rem .1rem;
  border:none;
  border-bottom:1px solid rgba(88,64,62,.28);
  border-radius:0;
  background:transparent;
  font-family:var(--sans);
  font-weight:300;
  font-size:1.02rem;
  letter-spacing:.02em;
  color:var(--texto);
  outline:none;
  transition:border-color .3s;
  -webkit-appearance:none;
  appearance:none;
}
.cita-form input:focus,
.cita-form select:focus,
.cita-form textarea:focus{border-color:var(--marron)}
.cita-form input::placeholder,
.cita-form textarea::placeholder{color:rgba(122,102,98,.5)}
.cita-form select{
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A6662' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .3rem center;
}
.cita-form select:invalid{color:rgba(122,102,98,.6)}
.cita-form textarea{resize:vertical;min-height:96px}
.cita-form button{cursor:pointer;background:var(--marron);font-family:var(--sans)}
.form-note{
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--marron-suave);
  margin-top:1.1rem;
}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
}

/* ---------- Precios en el inicio ---------- */
.precios{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem 3rem;
  margin:2.6rem 0 1rem;
}
.precio{text-align:center}
.precio span{
  display:block;
  font-size:.64rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--marron-suave);
  margin-bottom:.4rem;
}
.precio strong{
  font-family:var(--serif);
  font-weight:400;
  font-size:2rem;
  color:var(--marron);
}
.link-wa{border-bottom:1px solid rgba(88,64,62,.35)}

/* ---------- Wizard de reservas ---------- */
.wizard-section{padding-top:4.5rem}
.wizard{max-width:820px;margin:0 auto}
.wizard-steps{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.6rem 2.6rem;
  list-style:none;
  margin:3rem auto 3.5rem;
  padding:0;
}
.wizard-steps li{
  font-size:.66rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--marron-suave);
  opacity:.45;
  transition:opacity .3s;
}
.wizard-steps li span{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  letter-spacing:0;
  margin-right:.45rem;
  color:var(--rosado);
}
.wizard-steps li.actual,
.wizard-steps li.hecho{opacity:1}
.wizard-steps li.actual{color:var(--marron)}

.paso{display:none}
.paso.activo{display:block;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.paso-titulo{
  font-size:clamp(1.6rem,3vw,2.2rem);
  text-align:center;
  margin-bottom:.8rem;
}
.paso-nota{
  text-align:center;
  font-size:.88rem;
  color:var(--marron-suave);
  margin-bottom:1.6rem;
}
.paso-acciones{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:2rem;
}
.cargando{text-align:center;color:var(--marron-suave);font-size:.9rem;padding:1.5rem}
.form-error{
  color:#a33;
  font-size:.86rem;
  text-align:center;
  margin-top:.8rem;
}

/* Especialidades */
.servicios{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem}
.servicio{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:.2rem 1rem;
  text-align:left;
  padding:1.4rem 1.6rem;
  background:var(--blanco);
  border:1px solid rgba(88,64,62,.16);
  cursor:pointer;
  transition:border-color .3s,transform .3s;
  font-family:var(--sans);
}
.servicio:hover{border-color:var(--rosado);transform:translateY(-2px)}
.servicio-nombre{
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--marron);
  line-height:1.25;
}
.servicio-precio{
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--marron);
  grid-row:span 2;
}
.servicio-meta{
  font-size:.64rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--marron-suave);
}

/* Calendario */
.calendario{
  max-width:420px;
  margin:0 auto;
  background:var(--blanco);
  border:1px solid rgba(88,64,62,.14);
  padding:1.4rem;
}
.cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.2rem;
}
.cal-head strong{
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:400;
  color:var(--marron);
  text-transform:capitalize;
}
.cal-head button{
  background:none;
  border:1px solid rgba(88,64,62,.2);
  width:32px;height:32px;
  cursor:pointer;
  color:var(--marron);
  font-size:1.1rem;
  line-height:1;
  transition:background .3s;
}
.cal-head button:hover:not(:disabled){background:var(--marfil)}
.cal-head button:disabled{opacity:.25;cursor:default}
.cal-dias-nombres,
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dias-nombres{
  margin-bottom:.5rem;
  font-size:.62rem;
  letter-spacing:.16em;
  color:var(--marron-suave);
  text-align:center;
}
.cal-dia{
  aspect-ratio:1;
  border:1px solid transparent;
  background:var(--marfil);
  color:var(--marron);
  font-family:var(--sans);
  font-size:.9rem;
  cursor:pointer;
  transition:all .25s;
}
.cal-dia:hover:not([disabled]){border-color:var(--marron);transform:scale(1.06)}
.cal-dia[disabled]{cursor:default}

/* Semáforo de disponibilidad (tonos pastel de la paleta) */
.cal-dia.disp-alta{background:var(--verde-pastel);color:var(--verde-texto)}
.cal-dia.disp-media{background:var(--amarillo-pastel);color:var(--amarillo-texto)}
.cal-dia.disp-nula{background:var(--rojo-pastel);color:var(--rojo-texto)}
.cal-dia.cerrado{background:transparent;color:rgba(122,102,98,.26)}
.cal-dia.sel{
  background:var(--marron);
  color:var(--marfil);
  border-color:var(--marron);
}
.cal-vacio{aspect-ratio:1}

/* Leyenda */
.cal-leyenda{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem 1.4rem;
  margin-top:1.2rem;
  padding-top:1.1rem;
  border-top:1px solid rgba(88,64,62,.1);
}
.cal-leyenda span{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--marron-suave);
}
.cal-leyenda i{
  width:12px;height:12px;
  border-radius:2px;
  display:inline-block;
}
.cal-leyenda .l-alta{background:var(--verde-pastel)}
.cal-leyenda .l-media{background:var(--amarillo-pastel)}
.cal-leyenda .l-nula{background:var(--rojo-pastel)}

/* Horarios */
.horarios{margin-top:2.5rem;text-align:center}
.horarios h4{
  font-family:var(--sans);
  font-weight:400;
  font-size:.68rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--marron-suave);
  margin-bottom:1.2rem;
}
.slots{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.slot{
  padding:.7rem 1.3rem;
  background:var(--blanco);
  border:1px solid rgba(88,64,62,.2);
  color:var(--marron);
  font-family:var(--sans);
  font-size:.9rem;
  letter-spacing:.06em;
  cursor:pointer;
  transition:all .25s;
}
.slot:hover:not([disabled]){background:var(--marron);color:var(--marfil);border-color:var(--marron)}
.slot.ocupado{
  background:transparent;
  border-color:rgba(88,64,62,.12);
  color:rgba(122,102,98,.4);
  text-decoration:line-through;
  text-decoration-thickness:1px;
  cursor:default;
}
.slots-nota{flex-basis:100%;margin:1rem 0 0}

/* Resumen y pago */
.resumen,.banco{
  max-width:520px;
  margin:0 auto 2rem;
  background:var(--blanco);
  border:1px solid rgba(88,64,62,.14);
  padding:1.8rem;
}
.banco h4{
  font-family:var(--sans);
  font-weight:400;
  font-size:.68rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--marron-suave);
  margin-bottom:1.2rem;
  text-align:center;
}
.resumen-fila{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:.7rem 0;
  border-bottom:1px solid rgba(88,64,62,.1);
  font-size:.92rem;
}
.resumen-fila:last-of-type{border-bottom:none}
.resumen-fila span{
  font-size:.64rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--marron-suave);
}
.resumen-fila strong{
  font-weight:400;
  color:var(--marron);
  text-align:right;
}
.resumen-fila.total strong{font-family:var(--serif);font-size:1.5rem}
.resumen .paso-nota{margin:1rem 0 0;font-size:.8rem}
.exito{text-align:center}
.exito .eyebrow{margin-bottom:1rem}

@media (max-width:640px){
  .servicios{grid-template-columns:1fr}
  .wizard-steps{gap:.5rem 1.2rem}
  .wizard-steps li{font-size:.58rem;letter-spacing:.18em}
}

/* ---------- Reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s ease,transform .9s ease;
}
.reveal.visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .pillars,.cards{grid-template-columns:1fr 1fr}
  .banda-grid,.split{grid-template-columns:1fr;gap:3rem}
  .split-img img{height:440px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  /* En móvil solo cabe un texto: se centra el que haya. Si conviven los dos,
     manda el de la izquierda y el otro se calla. */
  /* La portada es una foto apaisada: en vertical hay que reencuadrarla hacia
     el rostro, o el móvil solo enseña un hombro. El !important es necesario
     porque el encuadre de escritorio viaja en el style del propio bloque. */
  .hero .hero-bg{background-position:68% 38% !important}

  .topbar{justify-content:center;padding:.5rem 1rem}
  .topbar span + .topbar-right{display:none}
  .topbar-right{font-size:.5rem;letter-spacing:.12em;text-align:center}
  .section{padding:4.5rem 1.4rem}
  .pillars,.cards{grid-template-columns:1fr}
  .card{min-height:420px}
  .br-desk{display:none}
  /* Logo centrado y botón a la derecha en una misma fila: así el botón
     acompaña al header cuando se encoge al hacer scroll. */
  .header{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    grid-template-areas:
      ". logo boton"
      "nav nav nav";
    align-items:center;
    padding:1.1rem 1.4rem .9rem;
  }
  .header.scrolled{padding:.6rem 1.4rem}
  .header-logo{grid-area:logo}
  .nav-toggle{grid-area:boton;justify-self:end;display:block}
  .nav{
    grid-area:nav;
    display:none;
    flex-direction:column;
    align-items:center;
    gap:1.4rem;
    padding:1.4rem 0 .6rem;
  }
  .nav.open{display:flex}

  /* Submenús como acordeón */
  .nav-item{width:100%;text-align:center}
  .nav-item::after{display:none}
  .submenu{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    display:none;
    min-width:0;
    margin:.9rem 0 0;
    padding:.6rem 0;
    background:var(--marfil);
    border:none;
    box-shadow:none;
  }
  .nav-item.abierto .submenu{display:block;transform:none}
  .submenu a{padding:.7rem 1rem;white-space:normal}
  .submenu .sub-todas{margin-top:.4rem}
  /* En móvil el menú llega hasta el instituto: sus programas se ven en su
     propia página, en vez de volcar 55 filas dentro del desplegable. */
  .submenu-hijo{display:none}
  .submenu-item > a::after{display:none}
  .submenu-item > a{padding-right:1rem}
  .footer-grid{grid-template-columns:1fr;gap:2.2rem}
  .footer-bottom{justify-content:center;text-align:center}
}