/* ===========================================================
   MEDadvance · Hoja de estilos del sitio
   Identidad: Manual de Marca v1.0 (junio 2026)
   v2 · Tema claro: blanco y aire, azul noche solo como acento.
   Salud y cosmética · Montserrat · chevron y láser.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root{
  --noche:#0B1B3C;       /* azul noche · acento (hero, footer, CTA) */
  --profundo:#0F2249;    /* superficies oscuras de acento */
  --champagne:#D5C4A6;   /* SOLO logotipo / palabra MEDadvance, nunca fondo */
  --naranja:#E8843A;
  --rojo:#E12320;
  --blanco:#FFFFFF;
  --nieve:#F5F7FB;       /* fondo claro alterno, bloques con aire */
  --nieve-2:#EEF1F7;
  --tinta:#16203A;       /* texto principal sobre claro */
  --tinta-soft:#525A70;  /* texto secundario sobre claro */
  --gris:#7A849C;
  --linea:#E3E7EF;       /* bordes sobre claro */
  --linea-d:rgba(213,196,166,.18); /* bordes sobre oscuro */
  --grad:linear-gradient(135deg,#F2A23C 0%,#E0451F 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',sans-serif;
  color:var(--tinta);
  background:var(--blanco);
  line-height:1.65;
  font-size:17.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 30px}

/* ---------- tipografía base ---------- */
h1,h2,h3{font-weight:300;letter-spacing:.005em;line-height:1.15;color:var(--tinta)}
.kick{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--naranja);font-weight:700}
.chev{font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- botones ---------- */
.btn{display:inline-block;padding:15px 30px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.02em;transition:.18s;cursor:pointer}
.btn-grad{background:var(--grad);color:#fff}
.btn-grad:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-ghost{border:1.5px solid var(--noche);color:var(--noche)}
.btn-ghost:hover{background:var(--noche);color:#fff}
.btn-dark{background:var(--noche);color:#fff}
.btn-dark:hover{background:var(--profundo)}
/* botón fantasma sobre fondo oscuro (hero/CTA) */
.on-dark .btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
.on-dark .btn-ghost:hover{background:#fff;color:var(--noche)}

/* ---------- nav (claro) ---------- */
.nav{position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:1px solid var(--linea);box-shadow:0 2px 14px -10px rgba(11,27,60,.4)}
.nav .row{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.menu{display:flex;gap:30px;font-size:15px;color:var(--tinta-soft);font-weight:600;align-items:center}
.menu a:hover,.menu a.active{color:var(--noche)}
.menu a.active{border-bottom:2px solid var(--naranja);padding-bottom:2px}
.menu .btn:hover{color:#fff}
.nav-toggle{display:none;background:none;border:0;color:var(--noche);font-size:26px;cursor:pointer}

/* ---------- hero claro ---------- */
.hero{padding:84px 0 56px;background:var(--nieve)}
.hero h1{font-size:52px;line-height:1.1}
.hero h1 b{font-weight:700;color:var(--noche)}
.hero h1.impact{font-weight:800;font-size:58px;line-height:1.04;letter-spacing:0;color:var(--noche)}
.hero h1.impact .hot{color:var(--naranja)}
.hero p.lead{color:var(--tinta-soft);margin:20px 0 30px;max-width:54ch;font-size:19px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* hero principal a todo el ancho · ÚNICO bloque azul noche de acento */
.hero-full{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(900px 520px at 80% -10%,rgba(225,35,32,.22),transparent 60%),
    linear-gradient(155deg,#11254f 0%,#0B1B3C 60%,#081330 100%)}
.hero-full .wrap{padding:104px 30px;position:relative;z-index:3}
.hero-full .inner{max-width:700px}
.hero-full .kick{color:var(--naranja)}
.hero-full h1{font-weight:800;font-size:58px;line-height:1.05;letter-spacing:0;color:#fff;margin-top:14px}
.hero-full h1 .hot{color:var(--naranja)}
.hero-full p.lead{color:#D9DEEB;max-width:58ch;margin:22px 0 30px;font-size:19px}
/* malla molecular (placeholder visual del área salud · pendiente foto definitiva) */
.hero-full .molec{position:absolute;inset:0;z-index:1;opacity:.5}
.hero-full .beam-lg{position:absolute;top:24%;right:-6%;width:60%;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--rojo));box-shadow:0 0 26px 6px rgba(225,35,32,.5);transform:rotate(14deg)}
.hero-full .ald{position:absolute;right:34px;bottom:30px;z-index:3;background:#fff;border-radius:12px;
  padding:10px 14px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.hero-full .ald img{height:54px;width:auto}

/* ---------- franja de pilares (claro) ---------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:6px}
.strip .pill-card{background:linear-gradient(180deg,#fff 0%,#f7f9fd 100%);border:2px solid var(--naranja);
  border-radius:14px;padding:26px 24px;font-size:16px;color:var(--tinta-soft);transition:transform .2s,box-shadow .2s;
  box-shadow:0 1px 2px rgba(11,27,60,.04),0 14px 30px -22px rgba(11,27,60,.5)}
.strip .pill-card:hover{transform:translateY(-4px);box-shadow:0 4px 10px -4px rgba(11,27,60,.14),0 26px 46px -26px rgba(11,27,60,.5)}
.strip .pill-card b{display:block;color:var(--noche);font-weight:700;font-size:18px;margin-bottom:8px}
.strip .pill-card .soon-tag{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--naranja);border:1px solid var(--naranja);border-radius:999px;padding:2px 9px;margin-top:12px}

/* ---------- secciones ---------- */
section{padding:74px 0}
section.alt{background:var(--nieve)}
.sec-head{margin-bottom:36px}
.sec-head h2{font-size:38px}
.sec-head h2 b{font-weight:700;color:var(--noche)}
.sec-head p{color:var(--tinta-soft);margin-top:12px;max-width:62ch;font-size:18px}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}
.cat-label{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--noche);
  font-weight:700;margin:44px 0 18px;padding-bottom:12px;border-bottom:2px solid var(--linea)}

/* ---------- pestañas presencial / online ---------- */
.tabs-wrap{text-align:center}
.tabs{display:inline-flex;gap:6px;background:var(--nieve);border:1px solid var(--linea);
  border-radius:999px;padding:6px;margin:0 auto 36px}
.tab{border:0;background:transparent;font-family:inherit;font-weight:700;font-size:14px;
  letter-spacing:.04em;color:var(--tinta-soft);padding:11px 30px;border-radius:999px;cursor:pointer;transition:.18s}
.tab:hover{color:var(--noche)}
.tab.active{background:var(--grad);color:#fff}
.tab-panel.hidden{display:none}

/* ---------- CARDS DE CURSO (blancas) ---------- */
.cursos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.curso{background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);color:var(--tinta);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;border:1px solid var(--linea);position:relative;
  box-shadow:0 1px 2px rgba(11,27,60,.04),0 12px 30px -20px rgba(11,27,60,.55)}
.curso::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .22s;z-index:4}
.curso:hover{transform:translateY(-6px);border-color:#cfd6e6;
  box-shadow:0 4px 10px -4px rgba(11,27,60,.16),0 30px 54px -24px rgba(11,27,60,.55)}
.curso:hover::after{transform:scaleX(1)}
.curso .media{height:110px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#16294f 0%,#0a1734 100%)}
.curso .media .mc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:50px;font-weight:800;opacity:.9}
/* etiqueta de curso: ícono + nombre, en vez de un recuadro vacío tipo placeholder */
.media-tag{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:16px;text-align:center;z-index:3}
.media-tag .mtag-ico{font-weight:800;font-size:20px;line-height:1;color:var(--naranja)}
.media-tag .mtag-txt{color:#fff;font-weight:800;font-size:16.5px;line-height:1.25;
  letter-spacing:.03em;text-transform:uppercase}
.curso .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.curso .tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#A85B1B;font-weight:700}
.curso h3{font-weight:700;font-size:21px;margin:10px 0;color:var(--noche)}
.curso p{font-size:15px;color:var(--tinta-soft);margin-bottom:16px}
.curso .meta{list-style:none;margin:0 0 20px;font-size:14px;color:var(--tinta-soft)}
.curso .meta li{padding-left:20px;position:relative;margin-bottom:7px}
.curso .meta li::before{content:"»";position:absolute;left:0;color:var(--naranja);font-weight:700}
.curso .foot{margin-top:auto}
.curso .link{font-weight:700;font-size:14px;color:var(--rojo);letter-spacing:.02em}
.curso .link:hover{color:#A8120F}
.badge{position:absolute;top:12px;left:12px;background:var(--grad);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;z-index:4}
.badge.full{background:linear-gradient(135deg,#5a6c8e,#27375c)}
/* cinta diagonal "sin cupos" en la esquina de la card */
.curso.soldout .media{filter:saturate(.65) brightness(.92)}
.ribbon-cupos{position:absolute;top:22px;right:-58px;z-index:6;transform:rotate(45deg);
  background:linear-gradient(135deg,#F2A23C 0%,#E0451F 100%);color:#fff;
  font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 64px;box-shadow:0 8px 18px -8px rgba(225,35,32,.6)}
.curso.soon{opacity:1;border:1px dashed #c7cee0;background:var(--nieve)}
.curso.soon .media{background:linear-gradient(150deg,#1a2b52,#101f42);opacity:.85}
.curso.soon h3{color:var(--noche)}
.curso.soon p{color:var(--tinta-soft)}
.curso.soon .tag{color:var(--naranja)}

/* ---------- docentes / fundadoras ---------- */
.portrait{width:112px;height:112px;border-radius:50%;border:2px solid var(--naranja);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:28px;
  color:var(--noche);background:var(--nieve-2)}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:grayscale(1)}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px}
.person{text-align:center;background:linear-gradient(180deg,#fff 0%,#f7f9fd 100%);border:2px solid var(--naranja);
  border-radius:18px;padding:30px 24px;transition:transform .2s,box-shadow .2s,border-color .2s;
  box-shadow:0 1px 2px rgba(11,27,60,.04),0 14px 32px -22px rgba(11,27,60,.5)}
.person:hover{transform:translateY(-5px);border-color:var(--rojo);box-shadow:0 6px 14px -6px rgba(232,132,58,.25),0 28px 50px -26px rgba(11,27,60,.55)}
.person .portrait{margin:0 auto 16px}
.person.invited{background:linear-gradient(180deg,#fff 0%,#f5f7fb 100%);border-style:dashed}
.person .n{font-weight:700;font-size:18px;color:var(--noche)}
.person .r{font-size:14px;color:var(--naranja);margin-top:3px;font-weight:600}
.person .bio{font-size:14.5px;color:var(--tinta-soft);margin-top:10px}
.person .role-pill{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:#fff;background:var(--noche);padding:4px 12px;border-radius:999px;margin-top:10px}
.person.invited .portrait{background:#fff;border-style:dashed;border-color:#c7cee0;color:var(--gris);font-size:32px}

/* bios truncadas parejas + botón "Leer más" (docentes invitadas) */
.bio-wrap{text-align:left;margin-top:10px}
.bio-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bio-clamp.expanded{-webkit-line-clamp:unset;display:block;overflow:visible}
.bio-toggle{display:block;margin-top:14px;background:none;border:0;padding:0;font-family:inherit;
  font-weight:700;font-size:13px;color:var(--naranja);cursor:pointer;letter-spacing:.02em}
.bio-toggle:hover{color:var(--noche)}

/* ---------- CTA (acento azul noche) ---------- */
.cta{background:radial-gradient(700px 360px at 80% -20%,rgba(225,35,32,.2),transparent 60%),linear-gradient(120deg,#11254f,#0a1838);
  border-radius:26px;padding:58px;text-align:center;color:#fff}
.cta h2{font-size:34px;margin-bottom:12px;color:#fff}
.cta h2 b{font-weight:700;color:var(--champagne)}
.cta p{color:#D9DEEB;max-width:54ch;margin:0 auto 28px;font-size:18px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:center}
.stat{background:linear-gradient(180deg,#fff 0%,#f7f9fd 100%);border:2px solid var(--naranja);
  border-radius:16px;padding:30px 20px;transition:transform .2s,box-shadow .2s;
  box-shadow:0 1px 2px rgba(11,27,60,.04),0 14px 30px -22px rgba(11,27,60,.5)}
.stat:hover{transform:translateY(-4px);box-shadow:0 4px 10px -4px rgba(11,27,60,.14),0 26px 46px -26px rgba(11,27,60,.5)}
.stat .big{font-weight:800;font-size:30px;color:var(--noche);line-height:1.15}
.stat .lbl{font-size:13px;letter-spacing:.08em;color:var(--tinta-soft);margin-top:8px}

/* ---------- ficha de curso ---------- */
.detail-grid{display:grid;grid-template-columns:1.5fr .85fr;gap:38px;align-items:start}
.panel{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:30px;box-shadow:0 6px 22px -18px rgba(11,27,60,.4)}
.panel.light{background:var(--nieve)}
.panel.light h3{color:var(--noche)}
.panel h3{font-weight:700;font-size:20px;color:var(--noche);margin-bottom:16px}
.panel p{color:var(--tinta-soft)}
.temario{list-style:none}
.temario li{padding:13px 16px 13px 34px;position:relative;margin-bottom:10px;color:var(--tinta-soft);font-size:15.5px;
  background:var(--nieve);border-left:3px solid var(--naranja);border-radius:0 10px 10px 0;transition:border-color .18s,background .18s}
.temario li:last-child{margin-bottom:0}
.temario li:hover{border-left-color:var(--rojo);background:var(--nieve-2)}
.temario li::before{content:"»";position:absolute;left:14px;color:var(--naranja);font-weight:700}
.price-card{position:sticky;top:96px}
.price-card .fact{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--linea);font-size:15px}
.price-card .fact:last-of-type{border-bottom:0}
.price-card .fact span{color:var(--tinta-soft)}
.price-card .fact b{font-weight:700;color:var(--noche);text-align:right}
.price-card .btn{width:100%;text-align:center;margin-top:16px}
.breadcrumb{font-size:13px;color:var(--tinta-soft);margin-bottom:14px}
.breadcrumb a:hover{color:var(--naranja)}

/* ---------- formulario contacto ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;color:var(--tinta);margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:15px;
  background:#fff;border:1.5px solid var(--linea);border-radius:11px;padding:13px 15px;color:var(--tinta)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--naranja)}
.field textarea{min-height:120px;resize:vertical}
.contact-info li{list-style:none;display:flex;gap:13px;align-items:flex-start;margin-bottom:18px;color:var(--tinta-soft);font-size:15px}
.contact-info .ic{color:var(--naranja);font-weight:700;font-size:16px;min-width:18px}
.contact-info b{display:block;color:var(--noche);font-weight:700;font-size:14px;letter-spacing:.02em;margin-bottom:2px}

/* ---------- doble acción inscríbete / pide info ---------- */
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.action-card{background:#fff;border:1px solid var(--linea);border-radius:20px;padding:34px;display:flex;flex-direction:column;
  box-shadow:0 8px 26px -20px rgba(11,27,60,.5)}
.action-card.primary{border:2px solid var(--naranja)}
.action-card .ac-kick{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--naranja);margin-bottom:8px}
.action-card h3{font-size:24px;color:var(--noche);font-weight:700;margin-bottom:12px}
.action-card p{color:var(--tinta-soft);font-size:15.5px;margin-bottom:22px}
.action-card .btn{margin-top:auto;text-align:center}

/* ---------- membresía / sello ALD ---------- */
.sello{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:14px 20px;display:inline-flex;align-items:center;box-shadow:0 8px 24px -18px rgba(11,27,60,.5)}
.sello img{height:74px;width:auto;display:block}

/* ---------- footer (acento azul noche) ---------- */
footer.site{background:var(--noche);border-top:3px solid var(--naranja);padding:56px 0 38px;color:#A9B3CC;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:32px}
.foot-grid h4{font-weight:700;color:var(--champagne);font-size:14px;letter-spacing:.06em;margin-bottom:15px}
.foot-grid a{display:block;color:#C7D0E4;margin-bottom:10px}
.foot-grid a:hover{color:#fff}
.foot-grid p{color:#A9B3CC;font-size:14px;max-width:36ch}
.foot-bottom{border-top:1px solid var(--linea-d);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8C97B4;font-size:13px}

/* ---------- logos ---------- */
.logo-img{height:76px;width:auto;display:block}
.foot-logo{height:50px;width:auto;display:block;margin-bottom:14px}

/* ---------- responsive ---------- */
@media(max-width:880px){
  body{font-size:16.5px}
  .hero h1,.hero h1.impact{font-size:36px}
  .hero-full h1{font-size:36px}
  .hero-full .wrap{padding:70px 30px}
  .hero-full .ald{position:static;display:inline-flex;margin-top:26px}
  .cursos{grid-template-columns:1fr 1fr}
  .strip{grid-template-columns:1fr}
  .detail-grid,.form-grid,.action-grid{grid-template-columns:1fr}
  .price-card{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .sec-head h2{font-size:30px}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;padding:8px 30px 18px;border-bottom:1px solid var(--linea);box-shadow:0 16px 30px -18px rgba(11,27,60,.3)}
  .menu.open{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--linea)}
  .menu a.active{border-bottom:1px solid var(--linea)}
  .nav-toggle{display:block}
  .nav .row{position:relative}
}
@media(max-width:560px){
  .cursos,.stats{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero h1{font-size:30px}
  .cta{padding:38px 24px}
}