/* =========================
   VARIABLES Y RESET
   ========================= */
:root{
  --color-bg:#ffffff;
  --color-text:#0f172a;
  --color-muted:#64748b;
  --color-primary:#744923;
  --color-primary-dark:#5c3718;
  --color-border:#e2e8f0;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow-hover:0 14px 34px rgba(0,0,0,.13);
  --container:1120px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body{
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

ul{
  list-style:none;
}

/* =========================
   HEADER
   ========================= */
.header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#ffffff;
  max-width:var(--container);
  margin:0 auto;
  padding:14px 16px;
  border-bottom:1px solid var(--color-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.logo-group{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-group .imagen{
  width:auto;
  height:36px;
  object-fit:contain;
}

.logo-text{
  font-family:"Playfair Display",serif;
  font-size:22px;
  font-weight:700;
  color:var(--color-primary);
}

/* =========================
   BOTÓN MENÚ MÓVIL
   ========================= */
.menu-toggle{
  display:grid;
  place-items:center;
  background:#eee0d4;
  color:#684021;
  border:none;
  width:44px;
  height:44px;
  border-radius:12px;
  cursor:pointer;
  padding:0;
  box-shadow:none;
}

.menu-toggle:hover{
  background:#e7d5c6;
}

.menu-toggle svg{
  width:26px;
  height:26px;
}

.menu-toggle[aria-expanded="true"]{
  background:#e7d5c6;
}

/* =========================
   MENÚ MÓVIL
   ========================= */
.mobile-menu{
  position:absolute;
  right:16px;
  top:64px;
  width:min(88vw,310px);
  background:#f8efe7;
  color:#111827;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  padding:10px;
  overflow:hidden;
  z-index:2000;
  animation:dropdown .18s ease-out;
}

@keyframes dropdown{
  from{
    opacity:0;
    transform:translateY(-6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.mobile-menu a{
  display:block;
  padding:14px 16px;
  border-radius:12px;
  color:#111827;
  font-weight:600;
  transition:background .2s ease,color .2s ease;
}

.mobile-menu a:hover{
  background:rgba(0,0,0,.05);
}

.mobile-menu a.is-active,
.mobile-menu a[aria-current="page"]{
  background:var(--color-primary);
  color:#ffffff;
}

.mobile-menu a.cta-mobile{
  background:var(--color-primary);
  color:#ffffff;
  border:1px solid var(--color-primary);
  text-align:center;
  margin-top:4px;
  padding:9px 12px;
  font-size:14px;
  border-radius:10px;
}

.mobile-menu a.cta-mobile:hover{
  background:var(--color-primary-dark);
}

/* =========================
   ESPACIADOR
   ========================= */
.intro-header-spacer{
  height:8px;
}

/* =========================
   SECCIÓN CURSOS
   ========================= */
.CC{
  max-width:var(--container);
  margin:0 auto;
  padding:3rem 1rem;
  text-align:center;
}

.CC h1{
  font-family:"Playfair Display",serif;
  font-weight:700;
  font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem);
  margin-bottom:.5rem;
  color:#0f172a;
}

.CC p.lead{
  color:#475569;
  max-width:56ch;
  margin:.25rem auto 2rem;
  font-size:1.05rem;
  line-height:1.6;
}

/* Grid escritorio */
.cc-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.25rem 1.5rem;
  align-items:start;
  justify-items:center;
}

/* Tarjetas */
.cc-card{
  width:100%;
  max-width:170px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  text-align:center;
  transition:transform .2s ease;
  background:transparent;
  border:none;
  box-shadow:none;
  overflow:visible;
}

.cc-card:hover{
  transform:translateY(-3px);
}

.cc-card .imagen{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:20px;
  background:#ffffff;
  box-shadow:var(--shadow);
  transition:box-shadow .2s ease;
}

.cc-card:hover .imagen{
  box-shadow:var(--shadow-hover);
}

.cc-label{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:700;
  color:#5a3a21;
  font-size:1.05rem;
  text-align:center;
  line-height:1.15;
  min-height:2.4em;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================
   TARJETA MEDICINA ESTÉTICA FUERA DEL GRID
   ========================= */
.CC + div[style]{
  display:flex !important;
  justify-content:center !important;
  margin-top:0 !important;
  margin-bottom:1.5rem;
  padding:0 1rem;
}

.CC + div[style] .cc-card{
  max-width:170px;
}

.CC + div[style] .cc-card .imagen{
  height:220px;
}

/* =========================
   CTA PRESENCIAL
   ========================= */
.cta-presencial-wrap{
  display:flex;
  justify-content:center;
  text-align:center;
  margin:1.5rem auto 4rem;
  padding:0 1rem;
}

.cta-presencial-btn{
  display:inline-block;
  padding:1rem 2.2rem;
  background:linear-gradient(135deg,#74512E,#8B6238);
  color:#ffffff;
  font-weight:700;
  font-size:1.15rem;
  border-radius:18px;
  text-decoration:none;
  border:1.6px solid rgba(212,175,55,.55);
  box-shadow:
    0 6px 18px rgba(0,0,0,.15),
    inset 0 0 12px rgba(255,220,140,.15);
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}

.cta-presencial-btn:hover{
  background:linear-gradient(135deg,#8B6238,#A17344);
  transform:translateY(-3px);
  border-color:rgba(212,175,55,.9);
}

/* =========================
   FOOTER
   ========================= */
.footer{
  --top-bg:#111827;
  --bottom-bg:#152037;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --ring:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.04);
}

.footer-top{
  background:var(--top-bg);
  color:var(--text);
  padding:clamp(28px,4vw,48px) 16px;
}

.footer-inner{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,1.15fr) minmax(220px,1fr) minmax(220px,1fr);
  gap:clamp(20px,3vw,36px);
  justify-items:center;
  align-items:start;
}

.footer-bottom{
  background:var(--bottom-bg);
  color:#cbd5e1;
  padding:14px 12px;
}

.footer-bottom-inner{
  max-width:var(--container);
  margin:0 auto;
  text-align:center;
  font-size:clamp(.9rem,.9rem + .1vw,1rem);
}

.footer-brand{
  width:100%;
  text-align:left;
}

.footer-avatar{
  width:112px;
  height:112px;
  object-fit:cover;
  border-radius:16px;
  display:block;
  margin-bottom:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.06);
}

.brand-heading{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:2px 0 6px;
}

.brand-lotus{
  width:28px;
  height:28px;
  object-fit:contain;
  filter:brightness(1.1);
}

.brand-title{
  font-family:"Playfair Display",serif;
  font-size:clamp(1.35rem,1.1rem + .8vw,1.7rem);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text);
}

.brand-tagline{
  margin-top:6px;
  color:var(--muted);
  max-width:40ch;
  line-height:1.5;
}

.footer-col{
  width:100%;
  text-align:left;
}

.footer-col-title{
  font-family:"Playfair Display",serif;
  font-weight:700;
  font-size:clamp(1.1rem,1rem + .3vw,1.3rem);
  color:var(--text);
  margin:4px 0 10px;
}

.footer-links{
  display:grid;
  gap:8px;
}

.footer-links a{
  color:var(--text);
  opacity:.9;
  transition:opacity .15s ease,transform .15s ease,text-underline-offset .15s ease;
  display:inline-block;
  line-height:1.5;
}

.footer-links a:hover{
  opacity:1;
  transform:translateX(2px);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Contacto */
.contact-list li{
  display:flex;
  align-items:center;
}

.contact-list a{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.contact-icon{
  width:20px;
  height:20px;
  color:var(--muted);
  flex-shrink:0;
  transition:color .25s ease,transform .25s ease;
}

.contact-list a:hover .contact-icon{
  color:var(--text);
  transform:translateX(2px);
}

.whatsapp-icon{
  stroke:#25D366;
}

/* =========================
   WHATSAPP FLOTANTE
   ========================= */
.whatsapp-float{
  position:fixed;
  bottom:max(20px,env(safe-area-inset-bottom,0px) + 16px);
  right:max(20px,env(safe-area-inset-right,0px) + 16px);
  z-index:99999;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  transition:transform .18s ease,filter .18s ease;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.25));
}

.whatsapp-float:hover{
  transform:scale(1.06);
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.28));
}

.whatsapp-float img{
  width:64px;
  height:64px;
  display:block;
  border-radius:50%;
  pointer-events:none;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:1100px){
  .footer-inner{
    grid-template-columns:minmax(280px,1fr) minmax(220px,.9fr) minmax(220px,.9fr);
  }
}

@media (max-width:900px){
  .footer-inner{
    grid-template-columns:1fr;
    gap:26px;
    justify-items:center;
  }

  .footer-brand,
  .footer-col{
    max-width:560px;
  }

  .cc-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:768px){
  .CC{
    overflow:hidden;
    padding:2.5rem 1rem 3rem;
  }

  .cc-grid{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding:0 .5rem .75rem;
    justify-content:flex-start;
  }

  .cc-card{
    flex:0 0 45%;
    max-width:none;
    scroll-snap-align:center;
  }

  .cc-card .imagen{
    height:210px;
  }

  .CC + div[style] .cc-card{
    max-width:160px;
  }

  .CC + div[style] .cc-card .imagen{
    height:210px;
  }

  .cta-presencial-btn{
    width:100%;
    max-width:340px;
    font-size:1rem;
    padding:.95rem 1.2rem;
  }
}

@media (max-width:480px){
  .logo-text{
    font-size:20px;
  }

  .cc-card{
    flex:0 0 48%;
  }

  .whatsapp-float{
    width:58px;
    height:58px;
  }

  .whatsapp-float img{
    width:58px;
    height:58px;
  }
}

/* =========================
   ACCESIBILIDAD
   ========================= */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:3px;
  border-radius:12px;
}

.footer a:focus-visible{
  outline:2px solid #ffffff;
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}