:root{
  --primary:#6DCCDD;
  --secondary:#4A9BAC;
  --accent:#3A8791;
  --light:#E8F7FA;
  --white:#fff;
  --gray:#555;
  --dark:#2c3e50;

  --glass:rgba(255,255,255,.14);
  --stroke:rgba(255,255,255,.28);
  --shadow-soft:0 10px 26px rgba(0,0,0,.10);
  --shadow-press:0 6px 16px rgba(0,0,0,.18);
}

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

body{
  font-family:'Open Sans',sans-serif;
  color:var(--dark);
  background:var(--white);
  line-height:1.6;
  scroll-behavior:smooth;
}

a{text-decoration:none}

.container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}

/* Accesibilidad */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 12px;
  background:#fff;
  color:#000;
  border-radius:10px;
  z-index:9999;
}

/* NAV */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 0;
  flex-wrap:wrap;
}

.brand{
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-size:1.8rem;
  font-weight:700;
}

nav ul{
  list-style:none;
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  align-items:center;
}

nav a{
  color:#fff;
  font-weight:600;
  transition:opacity .25s ease;
}
nav a:hover{opacity:.85}

.lang-switch button{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  color:#fff;
  font-weight:700;
  padding:8px 14px;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.18);
}
.lang-switch button:hover{
  background:rgba(255,255,255,.26);
  transform:translateY(-1px);
}
.lang-switch button:active{
  transform:translateY(0) scale(.98);
  box-shadow:var(--shadow-press), inset 0 1px 0 rgba(255,255,255,.18);
}

/* HERO (Slider + premium) */
.hero-slider{
  position:relative;
  overflow:hidden;
  color:#fff;
  padding-bottom:60px;
  min-height:420px;
}

.hero-content{position:relative;z-index:2}

.hero-slides{position:absolute;inset:0;z-index:0}

.hero-slider::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(0,0,0,.55), rgba(0,0,0,.20)),
    linear-gradient(135deg, rgba(0,0,0,.40), rgba(0,0,0,.10));
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 35%;
  opacity:0;
  animation:heroFade 18s infinite;
  will-change:opacity;
}

/* Fondos: NO usar foto del doctor como background */
.hero-slide.s1{animation-delay:0s;background-image:url("../img/ope.jpeg")}
.hero-slide.s2{animation-delay:6s;background-image:url("../img/eco.jpeg")}
.hero-slide.s3{animation-delay:12s;background-image:url("../img/ecopulmonar-grupo.png")}

@keyframes heroFade{
  0%{opacity:0}
  10%{opacity:1}
  33%{opacity:1}
  45%{opacity:0}
  100%{opacity:0}
}

.hero{
  position:relative;
  padding:80px 0 100px;
}

.hero-layout{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:center;
}

.hero-left{max-width:720px;margin:0 auto}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:700;
  font-size:.9rem;
  margin-bottom:14px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.hero h1{
  font-family:'Poppins',sans-serif;
  letter-spacing:-0.6px;
  line-height:1.08;
  font-size:clamp(2.2rem,4.2vw,3.2rem);
  margin-bottom:10px;
  text-shadow:0 10px 25px rgba(0,0,0,.22);
}

.hero-subtitle{
  font-size:1.05rem;
  opacity:.95;
  letter-spacing:.2px;
  margin:10px 0 14px;
  font-family:'Poppins',sans-serif;
  font-weight:600;
}

.hero p{
  font-size:1.12rem;
  line-height:1.65;
  opacity:.94;
  margin:0 0 18px;
  text-shadow:0 8px 18px rgba(0,0,0,.18);
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

/* Tarjeta doctor */
.hero-profile{display:flex;justify-content:flex-end}

.hero-profile-card{
  width:min(360px,100%);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:22px;
  overflow:hidden;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 26px 70px rgba(0,0,0,.22);
}

.hero-profile-img{
  width:100%;
  height:440px;
  object-fit:cover;
  object-position:center top;
  display:block;
  filter:contrast(1.02) saturate(1.04);
}

.hero-profile-meta{
  padding:14px 16px 16px;
  text-align:left;
}

.hero-profile-name{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color:#fff;
}

.hero-profile-role{
  font-size:.95rem;
  opacity:.9;
  color:#fff;
  margin-top:4px;
}

/* Botones */
.cta{
  color:#fff;
  padding:14px 34px;
  border-radius:999px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg, rgba(58,135,145,1), rgba(109,204,221,1));
  box-shadow:0 14px 30px rgba(0,0,0,.20);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.cta:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(0,0,0,.24);
}
.cta:active{transform:translateY(-1px) scale(.99)}

.cta.ghost{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:none;
}
.cta.ghost:hover{background:rgba(255,255,255,.18)}

.cta.whatsapp::before{
  content:"";
  width:18px;
  height:18px;
  display:inline-block;
  background:url("../img/logo-whatsapp.svg") no-repeat center / contain;
}

.cta.youtube::before{
  content:"";
  width:18px;
  height:18px;
  display:inline-block;
  background:url("../img/logo-youtube.svg") no-repeat center / contain;
}

/* Secciones */
section{padding:100px 0}

.section-title{
  text-align:center;
  font-family:'Poppins',sans-serif;
  font-size:2.4rem;
  color:var(--secondary);
  margin-bottom:15px;
}

.section-subtitle{
  text-align:center;
  font-size:1.1rem;
  color:var(--gray);
  margin-bottom:60px;
}

.courses-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:35px;
}

.course-card{
  background:var(--light);
  border-radius:20px;
  padding:30px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}

.course-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 35px rgba(109,204,221,.20);
}

.course-card h3{
  font-family:'Poppins',sans-serif;
  color:var(--secondary);
  margin-bottom:15px;
}

/* Comunidad */
.course-detail{
  padding:70px 0;
  background:linear-gradient(180deg,rgba(20,46,80,.06),transparent);
}

.detail-header{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:start;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
  background:rgba(20,46,80,.10);
  border:1px solid rgba(20,46,80,.18);
}

.detail-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0 14px;
}

.meta-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:10px;
}
.meta-item{
  padding:12px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(20,46,80,.10);
}
.meta-label{font-size:.8rem;opacity:.75}
.meta-value{font-weight:700;margin-top:2px}

.detail-media{display:flex;flex-direction:column;gap:14px}

.detail-hero-img{
  width:100%;
  height:420px;
  object-fit:cover;
  object-position:center;
  border-radius:18px;
  border:1px solid rgba(20,46,80,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  display:block;
}

.instructor-card{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(20,46,80,.10);
}
.instructor-img{
  width:56px;
  height:56px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(20,46,80,.12);
}
.instructor-name{font-weight:800}
.instructor-role{font-size:.9rem;opacity:.75;margin-top:2px}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:26px;
}

.detail-card{
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(20,46,80,.10);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.detail-card h3{margin:0 0 10px}
.detail-card ul{margin:0;padding-left:18px}

.offer{
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(46,125,50,.08);
  border:1px solid rgba(46,125,50,.18);
}

.embed-note{margin-top:18px;opacity:.75;font-size:.95rem}

/* Redes */
.social-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:18px;
}

.social-card{
  background:#fff;
  border:1px solid rgba(20,46,80,.10);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  transition:transform .22s ease, box-shadow .22s ease;
}

.social-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 34px rgba(0,0,0,.10);
}

.social-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}

/* ✅ ICONO: SOLO LOGO (sin fondo/contorno/gradiente) */
.social-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  position:relative;
}

.social-icon::after{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* Archivos reales */
.social-icon.tiktok::after{ background-image:url("../img/tiktok.svg"); }
.social-icon.facebook::after{ background-image:url("../img/logo-facebook.png"); }
.social-icon.youtube::after{ background-image:url("../img/logo-youtube.svg"); }

.social-card h3{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:var(--dark);
}

.social-card p{
  margin-top:6px;
  color:var(--gray);
}

.social-cta{
  width:100%;
  justify-content:center;
}

/* Footer */
footer{
  background:var(--dark);
  color:#fff;
  padding:80px 0 40px;
  text-align:center;
}
footer p{color:#ccc;margin-top:12px}

/* Responsive */
@media (max-width:920px){
  .detail-header{grid-template-columns:1fr}
  .meta-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .detail-hero-img{height:300px}

  .hero-layout{grid-template-columns:1fr;text-align:center}
  .hero-actions{justify-content:center}
  .hero-profile{justify-content:center}
  .hero-profile-meta{text-align:center}
}

@media (max-width:768px){
  .hero{padding:70px 0 80px}
  .hero-slider{min-height:480px}

  nav ul{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-top:14px;
  }

  nav ul li a{
    display:block;
    padding:14px 16px;
    border-radius:14px;
    background:var(--glass);
    border:1px solid var(--stroke);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.18);
    min-height:48px;
    transition:transform .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
  }

  nav ul li a:hover{
    background:rgba(255,255,255,.22);
    opacity:1;
    transform:translateY(-1px);
  }

  nav ul li a:active{
    transform:translateY(0) scale(.98);
    box-shadow:var(--shadow-press), inset 0 1px 0 rgba(255,255,255,.18);
  }

  .lang-switch{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:10px;
  }
}