/* ======= Paleta amigable ======= */
:root{
  --bg:#f6fbff;          /* base muy clara */
  --ink:#14213d;         /* texto principal */
  --muted:#5e6a85;       /* texto secundario */
  --pink:#FF5A8B;        /* rosa alegre */
  --mint:#35D0C2;        /* menta */
  --yellow:#FFD66B;      /* amarillo suave */
  --violet:#B889F5;      /* violeta pastel */
  --blue:#58C6FF;        /* celeste */
  --shadow: 0 12px 28px rgba(20,33,61,.12);
  --radius:18px;
}

/* ====== Reset rápido ====== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background: var(--bg);
  color:var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.55;
}

h1,h2,h3{ margin:0 0 10px; font-weight:900; letter-spacing:.3px }
h1{ font-size:clamp(36px,6vw,64px) }
h2{ font-size:clamp(26px,4vw,36px) }
h3{ font-size:clamp(18px,2.2vw,22px) }
p{ margin:0 0 10px }
.center{ text-align:center }
.muted{ color:var(--muted) }
.bump{ margin-top:18px }

.wrap{ max-width:1100px; margin:0 auto; padding:0 20px }

/* ===== Topbar alegre ===== */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border-bottom:1px solid #e9eef7;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px }
.brand{ display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink) }
.brand-logo{ width:40px; height:40px; object-fit:contain }
.brand-text{ font-weight:900; letter-spacing:.5px }
.brand-text span{ color:var(--pink) }

.mainnav{ display:flex; gap:18px; align-items:center }
.mainnav a{ color:var(--ink); text-decoration:none; font-weight:700; opacity:.9 }
.mainnav a:hover{ opacity:1; color:var(--pink) }

/* ===== Botones ===== */
.btn{
  display:inline-block;
  background: linear-gradient(180deg, var(--pink), #ff3b79);
  color:#fff;
  padding:12px 18px;
  border-radius: 14px;
  text-decoration:none;
  font-weight:900;
  border:1px solid transparent;
  box-shadow: var(--shadow);
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.02) }
.btn.small{ padding:8px 12px }

.btn.mint{
  background: linear-gradient(180deg, var(--mint), #23bfb1);
}
.btn.ghost{
  background: transparent;
  color: var(--ink);
  border-color:#d7e4f5;
  box-shadow:none;
}

/* ===== Hero ===== */
.hero-edu{
  position:relative;
  overflow: hidden ;                     /* deja ver desbordes */
  padding: 104px 0 140px;                /* MÁS aire arriba/abajo */
  background:
    radial-gradient(1600px 600px at 80% -10%, #c0eaff33, transparent 60%),
    radial-gradient(1100px 500px at 10% -10%, #ffd2e933, transparent 55%),
    var(--bg);
}



/* Canvas pastel detrás del contenido */
#edu-blobs{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

/* Asegura que el contenido quede por encima del canvas */
.hero-grid{
  position:relative;
  z-index:2;
}





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

.hero-copy .lead{ font-size: clamp(18px,2.2vw,20px); color:var(--muted); margin: 6px 0 4px }
.hero-copy .lead2{ color:var(--muted) }
.hero-copy h1 span{ color: var(--pink) }

.cta-row{ display:flex; gap:12px; margin-top:10px; flex-wrap:wrap }

/* Contenedor e imagen del hero */
.hero-figure{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height: 320px;                     /* base para dar verticalidad */
}
.hero-figure img{
  display:block;
  width: clamp(280px, 36vw, 560px);      /* escala por ANCHO */
  height:auto;                           /* y el alto se ajusta solo */
  object-fit: contain;                   /* nunca recorta */
  filter: drop-shadow(0 12px 28px rgba(20,33,61,.25));
  transform: translateY(4px);            /* micro-ajuste estético */
}

/* blobs decorativos */
.blob{
  position:absolute; border-radius:50%;
  filter: blur(40px); pointer-events:none; opacity:.35;
}
.blob-a{ width:420px; height:420px; background:#ffe3f1; left:-120px; top:-120px }
.blob-b{ width:520px; height:520px; background:#d9fff7; right:-160px; top:-160px }

/* ===== Sobre ===== */
.about .about-card{
  background:#fff;
  border:1px solid #eaf0fb;
  border-radius: var(--radius);
  padding: 22px 22px;
  box-shadow: var(--shadow);
}

/* ===== Cards de talleres ===== */
.cards{
  display:grid; gap:18px;
  grid-template-columns: repeat(4, 1fr);
  margin-top:14px;
}
.card{
  background:#fff;
  border:1px solid #eaf0fb;
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20,33,61,.16) }
.card .icon{ height:58px; display:flex; align-items:center }
.card .icon img{ max-height:58px; width:auto }
.card ul{ margin:8px 0 0 18px; padding:0 }
.card li{ margin:6px 0 }

/* toques de color */
.card.c-pink   { border-top:6px solid var(--pink) }
.card.c-mint   { border-top:6px solid var(--mint) }
.card.c-violet { border-top:6px solid var(--violet) }
.card.c-yellow { border-top:6px solid var(--yellow) }

/* ===== Galería ===== */
.gallery .grid-gallery{
  display:grid; gap:14px; margin-top:14px;
  grid-template-columns: repeat(3, 1fr);
}
.grid-gallery img{
  width:100%; height:220px; object-fit:cover;
  border-radius: 16px; border:1px solid #eaf0fb;
  box-shadow: var(--shadow);
}

/* ===== CTA final ===== */
.cta{
  background: linear-gradient(180deg, #ffffff, #f3f8ff);
  border-top:1px solid #eaf0fb;
}

/* ===== Footer ===== */
.foot{ border-top:1px solid #eaf0fb; padding:20px 0; color:var(--muted); background:#fff }
.foot-flex{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.foot-nav{ display:flex; gap:14px }
.foot-nav a{ color:var(--muted); text-decoration:none; font-weight:700 }
.foot-nav a:hover{ color:var(--ink) }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr }
  .hero-figure{ justify-content:center; min-height:0 }
  .hero-figure img{
    width: clamp(260px, 60vw, 420px);     /* reduce con gracia en tablet/móvil */
    height:auto;
    transform:none;
  }
  .cards{ grid-template-columns: 1fr 1fr }
  .gallery .grid-gallery{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px){
  .cards{ grid-template-columns: 1fr }
  .gallery .grid-gallery{ grid-template-columns: 1fr }
}




/* ========== Mejora responsive específica de educación ========== */

/* Tablet <= 768px */
@media (max-width: 768px){
  .hero-grid{ grid-template-columns:1fr; gap:18px }
  .hero-figure{ justify-content:center; min-height:0 }
  .hero-figure img{
    width: clamp(260px, 60vw, 420px); /* imagen fluida */
    height:auto; transform:none;
  }
  .hero-edu{ padding:72px 0 96px }

  /* Tarjetas de talleres a 2 columnas */
  .cards{ grid-template-columns:1fr 1fr }
  .gallery .grid-gallery{ grid-template-columns:1fr 1fr }
}

/* Teléfonos <= 480px */
@media (max-width: 480px){
  /* Tipos agradables */
  h1{ font-size:clamp(28px,8.5vw,40px) }
  h2{ font-size:clamp(20px,6vw,28px) }
  .hero-copy .lead{ font-size:clamp(14px,4.2vw,16px) }

  .hero-edu{ padding:64px 0 80px } /* menos alto */
  .cta-row{ flex-direction:column }
  .cta-row .btn{ width:100%; text-align:center }

  /* Talleres a 1 columna */
  .cards{ grid-template-columns:1fr }
  .gallery .grid-gallery{ grid-template-columns:1fr }
}

/* Mini teléfonos <= 360px */
@media (max-width:360px){
  .btn{ padding:10px 12px }
}


/* ===== Firma inline en el footer ===== */
.foot-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;                 /* permite que salte a dos líneas en móvil */
}

/* Texto del copy + firma en la misma línea */
.foot-copy{
  display:flex;
  align-items:center;
  gap:0;
  color: var(--muted, #9FB3D1);
  opacity:.92;
}

/* Separador sutil entre copy y firma */
.foot-copy .sig{
  margin-left:12px;
  padding-left:12px;
  border-left:1px dashed var(--outline, #ffffff22);
  opacity:.85;
  white-space:nowrap;
}

.foot-copy .sig a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
}

.foot-copy .sig a:hover{
  color: var(--ink, #ffffff);
  border-bottom-color: transparent;
}

/* En pantallas pequeñas, deja que todo respire */
@media (max-width:640px){
  .foot-flex{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
  }

  .foot-copy .sig{
    margin-left:10px;
    padding-left:10px;
    border-left-color: transparent;   /* sin barra en móvil */
    border-top:1px dashed var(--outline, #ffffff22);
    margin-top:6px;
    padding-top:6px;
  }
}











/* =========================
   FIX HOSTING (talleres)
   ========================= */

/* 1) La fila puede ocupar más ancho para que entren 5 cards */
#talleres .wrap{
  max-width: 1400px;                 /* 5×260 + 4×18 = 1372 → margen cómodo */
}

/* 2) Grid de cursos: todas iguales y estiradas */
.cards.courses{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items:stretch;
}

/* En pantallas anchas fuerzo 5 columnas */
@media (min-width: 1200px){
  .cards.courses{ grid-template-columns: repeat(5, 1fr); }
}

/* 3) Botón/tarjeta: quitar subrayados “rebeldes” del hosting */
#talleres .courses a.card-btn{
  text-decoration: none !important;
  color: inherit !important;
}

/* Cubre cualquier selector global que subraye descendientes */
#talleres .courses a.card-btn h3,
#talleres .courses a.card-btn li,
#talleres .courses a.card-btn p,
#talleres .courses a.card-btn span,
#talleres .courses a.card-btn *{
  text-decoration: none !important;
}

/* 4) Estética y efecto hover “pro” (mantiene tu lógica JS de --mx/--my) */
#talleres a.card.card-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#fff;
  border:1px solid #eaf0fb;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  height:100%;
  display:flex;
  flex-direction:column;
  transition: transform .25s ease, box-shadow .25s ease;
  /* color de acento por defecto */
  --accent-rgb: 255,90,139;
}
#talleres .card.c-pink   { --accent-rgb: 255,90,139; }
#talleres .card.c-mint   { --accent-rgb: 53,208,194; }
#talleres .card.c-violet { --accent-rgb: 184,137,245; }
#talleres .card.c-yellow { --accent-rgb: 255,214,107; }
#talleres .card.c-blue   { --accent-rgb: 88,198,255; }

#talleres .card .icon, 
#talleres .card h3, 
#talleres .card ul{ position:relative; z-index:2; }

#talleres a.card.card-btn::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(260px 160px at var(--mx, 50%) var(--my, 0%),
      rgba(var(--accent-rgb), .28),
      rgba(var(--accent-rgb), 0) 60%);
  opacity:0; transition: opacity .2s ease;
}
#talleres a.card.card-btn::after{
  content:"";
  position:absolute; inset:-2px; border-radius:inherit;
  background: radial-gradient(120% 140% at 50% -10%,
              rgba(var(--accent-rgb), .35), transparent 60%);
  filter: blur(16px);
  opacity:0; transition: opacity .35s ease;
}

#talleres a.card.card-btn:hover,
#talleres a.card.card-btn:focus-visible{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 26px 56px rgba(20,33,61,.22);
}
#talleres a.card.card-btn:hover::before,
#talleres a.card.card-btn:focus-visible::before{ opacity:.65; }
#talleres a.card.card-btn:hover::after,
#talleres a.card.card-btn:focus-visible::after{ opacity:.55; }

#talleres a.card.card-btn:focus-visible{
  outline:0;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .45), 0 26px 56px rgba(20,33,61,.22);
}

/* Listas un pelín más compactas para equilibrar alturas */
#talleres .cards.courses .card ul{ margin-top:8px; }