/* =========================================================
   SALA CREATIVA · THEME LIMPIO
   Home oscuro + páginas claras · Cursos sin choques
   ========================================================= */

/* ============ 0) VARIABLES ============ */
:root{
  /* Dark (solo Home) */
  --bg:#0b0b0b; --bg-2:#111214; --text:#f5f5f5; --muted:#b7bcc9; --border-dark:#1a1b1e;

  /* Claro (default) */
  --surface:#ffffff; --text-dark:#0b1220; --muted-dark:#5b6475; --border:#e6e9ef;

  /* Marca (actualizado a rosa) */
  --accent:#FA74A6;
  --accent-600:#e06393;
  --cta:#fb923c; --cta-dark:#ea580c;
  --wa:#25d366; --wa-dark:#1fb058;

  /* FX */
  --shadow-1:0 6px 16px rgba(0,0,0,.18);
  --shadow-2:0 14px 36px rgba(0,0,0,.30);
  --radius-lg:18px; --radius-md:12px; --radius-sm:8px;

  --container:1100px; --space:44px;

  /* Tipografía display */
  --display:'Fjalla One', sans-serif;
}

/* ============ Reset mínimo ============ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{display:block;max-width:100%;height:auto}

/* ============ 1) BASE GLOBAL (páginas ≠ Home) ============ */
body{
  font-family:Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff; color:var(--text-dark); line-height:1.55;
}

/* ============ 2) BASE SOLO EN HOME ============ */
body.home{ background:var(--bg); color:var(--text) }

/* Helpers */
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.grid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.section{padding:var(--space) 0}
.center{text-align:center}

/* ============ 3) TITULARES ============ */
/* Fjalla SOLO en Home + títulos de secciones (no global) */
body.home h1, body.home h2, body.home h3,
.section h2, .testimonials h2, .faq h2, .contact h2, .cta-final h2{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.5px;
}
h1{font-size:42px; margin:0 0 10px}
h2{font-size:30px; margin:0 0 10px}
h3{font-size:20px; margin:0 0 10px}

/* Tamaños más sobrios fuera del home */
body:not(.home) h1{font-size:32px; text-transform:none; letter-spacing:0}
body:not(.home) h2{font-size:22px; text-transform:none; letter-spacing:0}

/* ============ 4) HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--border);
}
body.home .site-header{ background:var(--bg); border-bottom:1px solid var(--border-dark) }
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .logo{width:150px;height:auto}
.main-nav a{margin-left:18px;text-decoration:none;color:inherit;font-weight:600}
.main-nav a:hover{color:var(--accent)}
@media (max-width:900px){.main-nav{display:none}}

/* ============ 5) HERO ============ */
.hero{
  background:#f8fafc;
  color:var(--text-dark);
  border-bottom:1px solid var(--border);
  padding:64px 0;
}
.hero .grid{align-items:center}

/* Texto del hero */
.hero .content{
  /* si tu columna de texto no tiene clase, puedes envolverla con .content */
  animation: heroFadeLeft .6s ease-out both;
}
.hero p{
  max-width:560px;
  margin:0 0 16px;
  color:var(--muted-dark);
}

/* Media del hero (imagen) */
.hero .media{
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow-2);
  background:#ff5fa0; /* color de fondo “marco” */
  animation: heroFadeRight .6s ease-out .05s both, heroFloat 8s ease-in-out 1s infinite;
}
.hero .media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:0 14px 36px rgba(0,0,0,.25); /* se ve más “pro” */
}

/* Modo Home: oscuro */
body.home .hero{
  background:var(--bg);
  color:var(--text);
  border-bottom:1px solid var(--border-dark);
}
body.home .hero p{ color:var(--muted) }

/* Responsive */
@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr}
  .hero .media{margin-top:18px}
}

/* Animaciones */
@keyframes heroFadeLeft{
  from{opacity:0; transform:translateY(12px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes heroFadeRight{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:translateY(0)}
}
/* Flotación muy sutil */
@keyframes heroFloat{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-6px) }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .hero .content,
  .hero .media{ animation:none }
}


/* ============ 6) TARJETAS (genérico) ============ */
.card{
  background:var(--surface); color:var(--text-dark);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow-1); transition:transform .2s, box-shadow .2s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-2)}

/* ============ 7) BENEFICIOS ============ */
.benefits{padding:60px 0}
.benefits h2{margin-bottom:28px}
.benefits .card h3{margin-top:0}

/* ============ 8) CURSOS (sin choques) ============ */
.courses{padding:56px 0}
.courses h2{margin-bottom:16px; text-align:center}
.courses .grid-3{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:18px; }
.courses .card{
  background:#ffffff !important; color:#0b1220 !important;
  border:1px solid var(--border); box-shadow:var(--shadow-1);
}
/* Precio en acento */
.courses .price{font-family:var(--display); font-size:20px; color:var(--accent)}
/* Convierte cualquier <a> en botón coherente dentro de la card */
.courses .card a,
.courses .card .btn{
  display:inline-block !important; margin-top:12px; padding:10px 16px;
  border-radius:999px; font-weight:700; text-decoration:none !important;
  background:var(--accent); color:#fff !important;
  box-shadow:0 8px 18px rgba(250,116,166,.22);
  transition:transform .08s, box-shadow .2s, background .2s;
}
.courses .card a:hover,
.courses .card .btn:hover{ background:var(--accent-600); transform:translateY(-1px); box-shadow:0 12px 26px rgba(250,116,166,.30) }
@media (max-width:900px){ .courses .grid-3{grid-template-columns:1fr !important} }

/* ============ 9) ASESORÍA 1:1 (mejorado) ============ */
.asesoria .advisory-card{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:24px;
  background:var(--surface);
  color:var(--text-dark);
  border:1px solid var(--border);
  border-radius:20px;
  padding:22px;
  box-shadow:var(--shadow-2);
  align-items:center;
}
.asesoria .advisory-card img{
  width:100%; height:100%; object-fit:cover;
  border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.asesoria .advisory-content h3{
  font-size:26px; margin:0 0 12px; color:var(--accent-600);
}
.asesoria .advisory-content p{
  margin:0 0 12px; line-height:1.6; color:var(--muted-dark);
}
.asesoria .price-badge{
  display:inline-block; margin:12px 0; font-weight:700;
  background:#FA74A6; color:#fff; padding:10px 18px;
  border-radius:999px; font-size:16px;
  box-shadow:0 8px 20px rgba(250,116,166,.35);
}
.asesoria .price-badge span{ font-weight:400; opacity:.9; margin-left:6px; }
.asesoria .advisory-actions{ margin-top:16px; }
.asesoria .advisory-actions .btn{ font-size:15px; padding:12px 22px; }
@media (max-width:900px){
  .asesoria .advisory-card{ grid-template-columns:1fr; }
}

/* ============ 10) TESTIMONIOS ============ */
.testimonials{padding:44px 0}
.testimonials h2{margin-bottom:18px}
.testimonials .card p{font-style:italic;margin:0 0 8px}
.testimonials .card strong{color:var(--accent-600)}

/* ============ 11) FAQ (cards blancas) ============ */
.faq .container{max-width:820px}
.faq h2{margin-bottom:16px}
.faq details{
  background:#fff;color:#111;border:1px solid #ddd;border-radius:var(--radius-md);
  padding:12px 14px;margin:12px 0;box-shadow:var(--shadow-1);
  transition:box-shadow .2s,border-color .2s,background .2s;
}
.faq details:hover{box-shadow:var(--shadow-2);border-color:#f2b6c3}
.faq summary{list-style:none;cursor:pointer;font-weight:800;color:#0b1220;padding-right:42px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;line-height:22px;text-align:center;border:2px solid var(--accent);color:var(--accent);
  border-radius:50%;font-weight:900;font-size:14px;background:#fff
}
.faq details[open]{
  background:linear-gradient(180deg,rgba(250,116,166,.10),rgba(250,116,166,0)) 0 0/100% 10px no-repeat,#fff1f2;
  border-left:3px solid var(--accent);border-color:var(--accent);box-shadow:0 10px 24px rgba(250,116,166,.18)
}
.faq details[open] summary{color:var(--accent-600)}
.faq details[open] summary::after{content:"–";background:var(--accent);color:#fff}
.faq .faq-content{padding:10px 2px 2px;color:#5b6475}

/* ============ 12) CONTACTO (¿Tienes dudas?) ============ */
.contact{
  background:#fff;color:var(--text-dark);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  text-align:center;padding:36px 0
}
body.home .contact{background:var(--bg-2);color:var(--text);border-color:var(--border-dark)}
.contact .lead{margin:6px 0 16px}

/* ============ 13) CTA FINAL ============ */
.cta-final{
  background:#f8fafc;color:var(--text-dark);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:60px 0
}
body.home .cta-final{background:#0e0f11;color:var(--text);border-color:var(--border-dark)}
.cta-final h2{margin-bottom:14px}
.cta-final p{margin-bottom:22px}

/* ============ 14) FOOTER ============ */
.site-footer{
  padding:26px 0;
  background:#fff;
  border-top:1px solid var(--border);
  color:var(--muted-dark)
}
body.home .site-footer{
  background:var(--bg);
  border-top:1px solid var(--border-dark);
  color:var(--muted)
}
.site-footer a{color:#ff7aa0;text-decoration:none}

/* Nueva línea de marca */
.site-footer .brandline{
  display:flex; gap:8px; align-items:center; justify-content:center;
  font-weight:600; margin-bottom:10px; line-height:1.1
}
.site-footer .brandline .brand-mini{width:18px;height:18px;display:inline-block}
.site-footer .brandline .reg{font-size:.9em;opacity:.9}

/* Legales + crédito */
.site-footer .legal{
  display:flex; gap:18px; list-style:none; padding:0; margin:0 0 8px; justify-content:center; flex-wrap:wrap
}
.site-footer .credit{text-align:center}

/* ——— Mobile: más aire y mejor toque ——— */
@media (max-width: 640px){
  .site-footer{ padding:40px 0 } /* más espacio vertical */
  .site-footer .brandline{ margin-bottom:14px; font-size:1rem }
  .site-footer .legal{
    flex-direction:column; gap:4px; align-items:center; margin-bottom:14px
  }
  .site-footer .legal a{
    display:block; padding:8px 0; /* hit area >= 44px sumando línea */
  }
  .site-footer .credit{ font-size:.95rem }
}

/* Hover sutil en escritorio */
@media (hover:hover){
  .site-footer a:hover{ text-decoration:underline }
}


/* ============ 15) BOTONES (coherentes) ============ */
.btn{
  display:inline-block;padding:12px 18px;border-radius:999px;text-decoration:none;border:0;
  font-weight:700;transition:transform .08s, box-shadow .2s, background .2s, color .2s
}
.btn:hover{transform:translateY(-1px)}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 10px 22px rgba(250,116,166,.28)}
.btn--accent:hover{background:var(--accent-600);box-shadow:0 14px 28px rgba(250,116,166,.35)}
.btn--cta{background:var(--cta);color:#fff;box-shadow:0 10px 22px rgba(251,146,60,.28)}
.btn--cta:hover{background:var(--cta-dark);box-shadow:0 14px 28px rgba(251,146,60,.38)}
.btn--wa{background:var(--wa);color:#0b1a10;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px rgba(37,211,102,.28)}
.btn--wa:hover{background:var(--wa-dark);color:#001507;box-shadow:0 14px 28px rgba(37,211,102,.38)}

/* Botones “WhatsApp” detectados por URL (fallback si el HTML no trae clase) */
.contact a[href*="wa.me"], .contact a[href*="whatsapp"],
.cta-final a[href*="wa.me"], .cta-final a[href*="whatsapp"]{
  display:inline-block;padding:12px 18px;border-radius:999px;background:var(--wa);color:#0b1a10;
  font-weight:700;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px rgba(37,211,102,.28);text-decoration:none
}
.contact a[href*="wa.me"]:hover, .contact a[href*="whatsapp"]:hover,
.cta-final a[href*="wa.me"]:hover, .cta-final a[href*="whatsapp"]:hover{
  background:var(--wa-dark);color:#001507;transform:translateY(-1px);box-shadow:0 14px 28px rgba(37,211,102,.38)
}

/* ============ 16) PÁGINAS DE PAGO (pay-page) ============ */
.pay-page{
  max-width:760px;margin:32px auto;padding:24px;background:#fff;color:var(--text-dark);
  border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-1)
}
.pay-page h1{
  font-family:inherit;text-transform:none;letter-spacing:0;font-size:28px;margin:12px 0 8px;color:var(--accent-600)
}
.pay-page .notice{margin-bottom:16px;padding:12px 14px;border-radius:12px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-weight:600}
.pay-page .box{margin:18px 0;padding:16px;background:#f8fafc;border:1px solid var(--border);border-radius:12px}
.pay-page .box h2{margin:0 0 8px;font-size:18px;font-family:inherit;text-transform:none;letter-spacing:0}
.form label{display:block;margin-top:12px;font-weight:600;font-size:14px}
.form input,.form textarea{width:100%;padding:10px;margin-top:4px;border-radius:10px;border:1px solid #ddd;background:#fff;color:#0b1220}
.form input[type="file"]{padding:8px}
.form .btn{margin-top:14px}
.form .btn.cta,.form .btn--cta{width:100%}

/* ============ 17) COURSE PAGE (slug) ============ */
.course-page{padding:48px 0}
.course-page .container{max-width:900px}
.course-page .course-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.course-page h1{font-family:inherit;text-transform:none;letter-spacing:0;font-size:clamp(26px,3vw,36px);margin:0}
.course-page .price-badge{
  padding:8px 12px;border-radius:999px;background:#fff3f7;color:var(--accent-600);
  border:1px solid #ffd1db;font-weight:800
}
.course-page .course-meta{list-style:none;padding:0;margin:8px 0 18px;display:grid;gap:6px}
.course-page .course-meta li{background:#fff;color:var(--text-dark);border:1px solid var(--border);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow-1)}
.course-page .course-desc{background:#fff;color:var(--text-dark);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow-1);margin-bottom:18px}
.course-page .pay-options{margin-top:8px}
.course-page .pay-options h2{font-family:inherit;text-transform:none;letter-spacing:0;font-size:20px;margin:0 0 10px}
.course-page .pay-options .btns{display:flex;flex-wrap:wrap;gap:10px}
/* Fallback de botones si vienen sin clase */
.course-page .pay-options a{
  display:inline-block;padding:12px 16px;border-radius:999px;font-weight:700;text-decoration:none !important;color:#fff;
  background:var(--accent);box-shadow:0 8px 18px rgba(250,116,166,.22);transition:transform .08s, box-shadow .2s, background .2s
}
.course-page .pay-options a:hover{background:var(--accent-600);transform:translateY(-1px);box-shadow:0 12px 26px rgba(250,116,166,.30)}
.course-page .pay-options a[href*="pagomovil"]{background:var(--cta);box-shadow:0 8px 18px rgba(251,146,60,.25)}
.course-page .pay-options a[href*="pagomovil"]:hover{background:var(--cta-dark);box-shadow:0 12px 26px rgba(251,146,60,.35)}
.course-page .pay-options a[href*="wa.me"], .course-page .pay-options a[href*="whatsapp"]{
  background:var(--wa);color:#0b1a10;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px rgba(37,211,102,.28)
}
.course-page .pay-options a[href*="wa.me"]:hover, .course-page .pay-options a[href*="whatsapp"]:hover{
  background:var(--wa-dark);color:#001507;box-shadow:0 14px 28px rgba(37,211,102,.38)
}
.course-page + .site-footer{border-top:1px solid var(--border)}

/* ============ 18) RESPONSIVE GLOBAL ============ */
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .hero{padding:48px 0}
  .benefits{padding:48px 0}
}



/* ============ El efecto hover (que se “levante” al pasar el mouse) en sección asesoría============ */
.asesoria .advisory-card {
  transition: transform .2s, box-shadow .2s;
}
.asesoria .advisory-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,.25);
}

.asesoria .price-badge {
  transition: transform .2s, box-shadow .2s;
}

.asesoria .price-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(250,116,166,.45);
}


/* ============ 18) ABOUT ME ============ */
.about{ padding:80px 0; background:#fff; color:var(--text-dark); }

.about-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
  align-items:center;
}

.about-photo img{
  width:100%;
  border-radius:18px;
  box-shadow: var(--shadow-2);
  transition: transform .3s ease, box-shadow .3s ease;
}
.about-photo img:hover{
  transform: scale(1.03);
  box-shadow:0 14px 36px rgba(0,0,0,.25);
}

.about-text{
  max-width:600px;
  margin:0 auto;
  text-align:justify;   /* párrafos justificados */
}
.about-text h2{
  font-size:30px;
  margin-bottom:18px;
  color:var(--accent-600);
  text-align:center;    /* 👈 título centrado */
}
.about-text p{
  margin-bottom:18px;
  font-size:17px;
  line-height:1.8;
  color:#3a4252;
  text-align:justify;
}
.about-text .highlight{ color: var(--accent); font-weight:700; }

.about-text .bullets{ list-style:none; margin:20px 0; padding:0; }
.about-text .bullets li{ margin-bottom:12px; position:relative; padding-left:24px; text-align:justify; }
.about-text .bullets li::before{
  content:"•";
  position:absolute; left:0; top:0;
  color:var(--accent); font-weight:900;
}

.about-actions{
  margin-top:26px;
  display:flex;
  justify-content:center; /* 👈 botón centrado */
}
.about-actions .btn{
  font-size:16px;
  padding:12px 28px;
}

@media(max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
  .about-text{ text-align:justify; }
}


/* ============ 19) SAVE COMPROBANTE (gracias) ============ */
.save-comprobante{
  max-width:640px;
  margin:48px auto;
  padding:36px 28px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-2);
  text-align:center;
}
.save-comprobante h1{
  font-size:26px;
  margin-bottom:14px;
  color:var(--accent-600);
}
.save-comprobante p{
  font-size:16px;
  margin-bottom:22px;
  color:var(--muted-dark);
  line-height:1.6;
}
.save-comprobante .btn{
  display:inline-block;
  margin-top:10px;
  padding:12px 24px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  background:var(--accent);
  color:#fff !important;
  box-shadow:0 8px 18px rgba(250,116,166,.25);
  transition:transform .1s, box-shadow .2s, background .2s;
}
.save-comprobante .btn:hover{
  background:var(--accent-600);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(250,116,166,.35);
}