/*
Theme Name: KalpanaWorld
Theme URI: https://www.kalpanaworld.com
Author: KalpanaWorld
Author URI: https://www.kalpanaworld.com
Description: Plantilla WordPress a medida para KalpanaWorld: contenido digital educativo, automatización y música con IA. Diseño claro, ágil y editable desde el panel de administración. Incluye soporte para WooCommerce (carrito de compras) y formulario de contacto con reCAPTCHA v3.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kalpanaworld
Tags: e-commerce, education, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, one-column, two-columns
*/

/* =========================================================
   0. VARIABLES Y RESET
   ========================================================= */
:root{
  --kw-bg: #fbfcfe;
  --kw-bg-alt: #f3f6f9;
  --kw-surface: #ffffff;
  --kw-text: #1c2430;
  --kw-text-muted: #5b6572;
  --kw-border: #e6eaef;
  --kw-accent: #14b8c4;       /* cian de marca */
  --kw-accent-dark: #0e8f99;
  --kw-accent-soft: #e4f7f8;
  --kw-edu: #f59e0b;          /* acento educación */
  --kw-edu-soft: #fef3e2;
  --kw-auto: #3b82f6;         /* acento automatización */
  --kw-auto-soft: #eaf2fe;
  --kw-music: #a855f7;        /* acento música IA */
  --kw-music-soft: #f6ecfe;
  --kw-radius: 14px;
  --kw-radius-lg: 22px;
  --kw-shadow: 0 4px 20px rgba(28,36,48,.06);
  --kw-shadow-lg: 0 12px 40px rgba(28,36,48,.10);
  --kw-max: 1180px;
  --kw-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--kw-font);
  color: var(--kw-text);
  background: var(--kw-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
/* Las listas de contenido (las que el usuario escribe en el editor de WordPress)
   conservan sus viñetas/numeración por defecto. Solo los componentes de interfaz
   de abajo (.kw-reset-list y afines) quitan el estilo de lista nativo. */
ul, ol{ margin:0 0 1em; padding-left:1.25em; }
.kw-reset-list,
.kw-nav ul,
.kw-footer ul,
.kw-tag-list,
.kw-check-list,
ul.products{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ line-height:1.15; margin:0 0 .5em; font-weight:800; letter-spacing:-.01em; }
p{ margin:0 0 1em; color: var(--kw-text-muted); }
button, input, textarea, select{ font-family: inherit; font-size:1rem; }
.screen-reader-text{ position:absolute; left:-9999px; }

.kw-container{ max-width: var(--kw-max); margin:0 auto; padding:0 24px; }
.kw-section{ padding: 88px 0; }
.kw-section--tight{ padding: 56px 0; }
.kw-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--kw-accent-dark); margin-bottom:14px;
}
.kw-eyebrow::before{ content:""; width:22px; height:2px; background: var(--kw-accent); display:inline-block; }
.kw-heading{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); max-width: 720px; }
.kw-lede{ font-size:1.08rem; max-width:620px; }
.kw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: 999px; font-weight:700; font-size:.95rem;
  border: 1px solid transparent; cursor:pointer; transition: all .2s ease;
}
.kw-btn--primary{ background: var(--kw-text); color:#fff; }
.kw-btn--primary:hover{ background: var(--kw-accent-dark); transform: translateY(-1px); }
.kw-btn--ghost{ background: transparent; color: var(--kw-text); border-color: var(--kw-border); }
.kw-btn--ghost:hover{ border-color: var(--kw-text); }
.kw-btn--accent{ background: var(--kw-accent); color:#fff; }
.kw-btn--accent:hover{ background: var(--kw-accent-dark); }

/* =========================================================
   1. HEADER
   ========================================================= */
.kw-header{
  position: sticky; top:0; z-index:100;
  background: rgba(251,252,254,.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--kw-border);
}
.kw-header__inner{
  max-width: var(--kw-max); margin:0 auto; padding: 16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.kw-logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; }
.kw-logo img{ max-height:36px; width:auto; }
.kw-logo .kw-logo__dot{ color: var(--kw-accent); }
.kw-nav{ display:flex; align-items:center; gap:6px; }
.kw-nav ul{ display:flex; align-items:center; gap:6px; }
.kw-nav a{
  padding:9px 16px; border-radius:999px; font-weight:600; font-size:.94rem; color: var(--kw-text-muted);
  transition: all .15s ease;
}
.kw-nav a:hover, .kw-nav .current-menu-item > a{ background: var(--kw-bg-alt); color: var(--kw-text); }
.kw-header__actions{ display:flex; align-items:center; gap:10px; }
.kw-icon-btn{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--kw-bg-alt); position:relative; color: var(--kw-text); border:1px solid transparent;
}
.kw-icon-btn:hover{ border-color: var(--kw-border); }
.kw-cart-count{
  position:absolute; top:-4px; right:-4px; background: var(--kw-accent); color:#fff;
  font-size:.68rem; font-weight:700; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.kw-burger{ display:none; }

/* =========================================================
   2. HERO — foto real de fondo + degradado + blobs decorativos
   ========================================================= */
.kw-hero{
  position:relative; overflow:hidden; padding: 120px 0 100px; isolation:isolate;
  background-color: #0c1220;
}
.kw-hero__bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; opacity:.55;
}
.kw-hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(60% 80% at 15% 20%, rgba(20,184,196,.35), transparent 60%),
    linear-gradient(115deg, rgba(8,12,22,.97) 15%, rgba(8,12,22,.86) 45%, rgba(8,12,22,.55) 75%, rgba(8,12,22,.25) 100%);
}
.kw-hero__blob{
  position:absolute; z-index:1; border-radius:50%; filter: blur(70px); opacity:.5; pointer-events:none;
}
.kw-hero__blob--1{ width:360px; height:360px; background: var(--kw-accent); top:-120px; right:8%; }
.kw-hero__blob--2{ width:280px; height:280px; background: var(--kw-music); bottom:-100px; right:28%; opacity:.35; }
.kw-hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns: 1.15fr .85fr; gap:48px; align-items:center; }
.kw-hero .kw-eyebrow{ color: #7fe8ef; }
.kw-hero .kw-eyebrow::before{ background: #7fe8ef; }
.kw-hero h1{ font-size: clamp(2.5rem, 5vw, 4.2rem); color:#fff; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.kw-hero h1 em{ font-style:normal; background: linear-gradient(90deg, #7fe8ef, #14b8c4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kw-hero p{ font-size:1.14rem; max-width:520px; color: rgba(255,255,255,.82); }
.kw-hero__cta{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.kw-hero .kw-btn--primary{ background: var(--kw-accent); box-shadow: 0 10px 30px rgba(20,184,196,.35); }
.kw-hero .kw-btn--primary:hover{ background: var(--kw-accent-dark); transform: translateY(-2px); }
.kw-hero .kw-btn--ghost{ color:#fff; border-color: rgba(255,255,255,.35); }
.kw-hero .kw-btn--ghost:hover{ border-color:#fff; background: rgba(255,255,255,.08); }
.kw-hero__card{
  background: rgba(18,24,38,.55); border:1px solid rgba(255,255,255,.14); border-radius: var(--kw-radius-lg);
  padding: 30px; box-shadow: var(--kw-shadow-lg); backdrop-filter: blur(14px); color:#fff;
}
.kw-hero__card p{ color: rgba(255,255,255,.75); }
.kw-hero__stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:22px; }
.kw-hero__stat{ border-top:1px solid rgba(255,255,255,.14); padding-top:12px; }
.kw-hero__stat b{ display:block; font-size:1.5rem; color:#fff; }
.kw-hero__stat span{ font-size:.78rem; color: rgba(255,255,255,.6); }

/* =========================================================
   3. PILARES — tarjetas con foto real + degradado + contenido
   ========================================================= */
.kw-pillars{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin-top:44px; }
.kw-pillar{
  position:relative; isolation:isolate; overflow:hidden; min-height:440px;
  border-radius: var(--kw-radius-lg); box-shadow: var(--kw-shadow-lg);
  display:flex; flex-direction:column; justify-content:flex-end;
  background-size:cover; background-position:center;
  transition: background-size .5s ease, transform .3s ease, box-shadow .3s ease;
}
.kw-pillar:hover{ transform: translateY(-6px); box-shadow: 0 20px 50px rgba(28,36,48,.22); background-size:112%; }
.kw-pillar__scrim{ position:absolute; inset:0; z-index:1; }
.kw-pillar--edu .kw-pillar__scrim{ background: linear-gradient(190deg, rgba(245,158,11,.05) 0%, rgba(15,12,6,.35) 45%, rgba(10,8,4,.94) 100%); }
.kw-pillar--auto .kw-pillar__scrim{ background: linear-gradient(190deg, rgba(59,130,246,.08) 0%, rgba(6,10,20,.4) 45%, rgba(4,7,14,.95) 100%); }
.kw-pillar--music .kw-pillar__scrim{ background: linear-gradient(190deg, rgba(168,85,247,.1) 0%, rgba(14,6,20,.4) 45%, rgba(10,4,16,.95) 100%); }
.kw-pillar__content{ position:relative; z-index:2; padding: 30px; color:#fff; }
.kw-pillar__icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:16px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.25);
}
.kw-pillar h3{ font-size:1.32rem; margin-bottom:8px; color:#fff; }
.kw-pillar p{ color: rgba(255,255,255,.82); margin-bottom:16px; }
.kw-pillar__link{ font-weight:700; font-size:.92rem; color:#fff; display:inline-flex; align-items:center; gap:6px; }
.kw-pillar--edu .kw-pillar__link{ color: #fcd34d; }
.kw-pillar--auto .kw-pillar__link{ color: #93c5fd; }
.kw-pillar--music .kw-pillar__link{ color: #e9d5ff; }

/* =========================================================
   4. SECCIONES DE CONTENIDO (página por pilar)
   ========================================================= */
.kw-section--alt{ background: linear-gradient(180deg, var(--kw-bg) 0%, var(--kw-bg-alt) 100%); position:relative; }
.kw-split{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.kw-split__media{ position:relative; }
.kw-split__media img{ border-radius: var(--kw-radius-lg); box-shadow: var(--kw-shadow-lg); width:100%; aspect-ratio: 4/3; object-fit:cover; }
.kw-split__media::before{
  content:""; position:absolute; inset:-14px -14px auto auto; width:120px; height:120px;
  background: var(--kw-accent-soft); border-radius: var(--kw-radius-lg); z-index:-1;
}
.kw-tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.kw-tag{
  font-size:.82rem; font-weight:700; padding:7px 14px; border-radius:999px;
  background: var(--kw-surface); border:1px solid var(--kw-border);
}
.kw-check-list li{ display:flex; gap:10px; margin-bottom:10px; color: var(--kw-text); font-weight:600; }
.kw-check-list li::before{ content:"✓"; color: var(--kw-accent-dark); font-weight:800; }

/* =========================================================
   5. GRID DE PRODUCTOS / RECURSOS (WooCommerce friendly)
   ========================================================= */
.kw-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap:22px; margin-top:36px; }
.kw-card{
  background: var(--kw-surface); border:1px solid var(--kw-border); border-radius: var(--kw-radius);
  overflow:hidden; box-shadow: var(--kw-shadow); display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.kw-card:hover{ transform: translateY(-3px); box-shadow: var(--kw-shadow-lg); }
.kw-card__media{ aspect-ratio: 4/3; background: var(--kw-bg-alt); overflow:hidden; }
.kw-card__media img{ width:100%; height:100%; object-fit:cover; }
.kw-card__body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.kw-card__badge{ font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--kw-accent-dark); }
.kw-card__title{ font-size:1.02rem; font-weight:700; margin:0; }
.kw-card__price{ font-weight:800; margin-top:auto; font-size:1.05rem; }
.kw-card__price del{ color: var(--kw-text-muted); font-weight:500; margin-right:6px; font-size:.9rem; }
.kw-card .kw-btn{ width:100%; margin-top:10px; padding:11px; font-size:.88rem; }

/* WooCommerce native elements alignment.
   WooCommerce's own stylesheet gives li.product a float + percentage width
   (e.g. width:30%; float:left) for its own column system. Since we lay the
   grid out ourselves via CSS Grid on ul.products, we must explicitly cancel
   that float/width/margin — otherwise each card shrinks to ~30% of its grid
   cell and wraps into a tall, narrow column instead of filling the cell. */
.woocommerce ul.products,
ul.products{
  display:grid !important; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)) !important;
  gap:22px !important; list-style:none;
}
.woocommerce ul.products li.product,
ul.products li.product{
  width:100% !important; float:none !important; margin:0 !important; clear:none !important;
  background: var(--kw-surface); border:1px solid var(--kw-border); border-radius: var(--kw-radius);
  padding:16px; box-shadow: var(--kw-shadow); text-align:left !important;
}
.woocommerce ul.products li.product img,
ul.products li.product img{ width:100% !important; height:auto; border-radius: 10px; }
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
  background: var(--kw-text) !important; color:#fff !important; border-radius:999px !important;
  padding:10px 22px !important; font-weight:700 !important; border:none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background: var(--kw-accent-dark) !important; }
.woocommerce span.onsale{ background: var(--kw-accent) !important; border-radius: 999px !important; }
.woocommerce ul.products li.product .price{ color: var(--kw-text) !important; font-weight:800; }

/* =========================================================
   6. CTA / BANDA DE CONFIANZA
   ========================================================= */
.kw-cta{
  position:relative; overflow:hidden; isolation:isolate;
  background: linear-gradient(120deg, #0c1220 0%, #16233a 55%, #0c1220 100%);
  color:#fff; border-radius: var(--kw-radius-lg);
  padding: 56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.kw-cta::before{
  content:""; position:absolute; z-index:-1; width:320px; height:320px; border-radius:50%;
  background: var(--kw-accent); opacity:.35; filter: blur(80px); top:-140px; right:-60px;
}
.kw-cta h2{ color:#fff; margin-bottom:6px; }
.kw-cta p{ color: rgba(255,255,255,.72); margin:0; }
.kw-cta .kw-btn--primary{ background: var(--kw-accent); color:#fff; box-shadow: 0 10px 30px rgba(20,184,196,.3); }
.kw-cta .kw-btn--primary:hover{ background:#fff; color: var(--kw-text); }

/* =========================================================
   7. FORMULARIO DE CONTACTO
   ========================================================= */
.kw-contact__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; }
.kw-form{ background: var(--kw-surface); border:1px solid var(--kw-border); border-radius: var(--kw-radius-lg); padding:32px; box-shadow: var(--kw-shadow); }
.kw-field{ margin-bottom:18px; }
.kw-field label{ display:block; font-weight:700; font-size:.88rem; margin-bottom:6px; }
.kw-field input, .kw-field textarea{
  width:100%; padding:13px 16px; border:1px solid var(--kw-border); border-radius:10px; background: var(--kw-bg);
}
.kw-field input:focus, .kw-field textarea:focus{ outline:2px solid var(--kw-accent); outline-offset:1px; }
.kw-form__note{ font-size:.78rem; color: var(--kw-text-muted); margin-top:10px; }
.kw-form__status{ margin-top:14px; padding:12px 16px; border-radius:10px; font-size:.9rem; display:none; }
.kw-form__status--ok{ background: #e5f8ee; color:#0d8a4c; }
.kw-form__status--err{ background: #fdeceb; color:#c0392b; }
.kw-contact-info{ display:flex; flex-direction:column; gap:18px; }
.kw-contact-info__item{ display:flex; gap:14px; align-items:flex-start; }
.kw-contact-info__icon{ width:44px; height:44px; border-radius:12px; background: var(--kw-accent-soft); color: var(--kw-accent-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* =========================================================
   8. FOOTER
   ========================================================= */
.kw-footer{ background: var(--kw-text); color: rgba(255,255,255,.7); padding: 64px 0 24px; margin-top: 60px; }
.kw-footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; }
.kw-footer h4{ color:#fff; font-size:.95rem; margin-bottom:16px; }
.kw-footer a{ color: rgba(255,255,255,.7); }
.kw-footer li{ margin-bottom:10px; }
.kw-footer a:hover{ color:#fff; }
.kw-footer__logo{ color:#fff; font-weight:800; font-size:1.2rem; margin-bottom:10px; }
.kw-footer__bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem;
}

/* =========================================================
   9.5 STACK TECNOLÓGICO Y PROCESO (página Automatización)
   ========================================================= */
.kw-tech-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:22px; margin-top:40px; }
.kw-tech-card{
  background: var(--kw-surface); border:1px solid var(--kw-border); border-radius: var(--kw-radius-lg);
  padding: 28px; box-shadow: var(--kw-shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.kw-tech-card:hover{ transform: translateY(-3px); box-shadow: var(--kw-shadow-lg); }
.kw-tech-card__icon{
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; margin-bottom:14px; background: var(--kw-auto-soft); color: var(--kw-auto);
}
.kw-tech-card h3{ font-size:1.1rem; margin-bottom:6px; }
.kw-tech-card p{ font-size:.92rem; margin-bottom:16px; }
.kw-tech-card__tools{ display:flex; flex-wrap:wrap; gap:8px; }
.kw-tech-chip{
  font-size:.8rem; font-weight:700; padding:6px 12px; border-radius:999px;
  background: var(--kw-auto-soft); color: var(--kw-auto-dark, #1d4ed8); border:1px solid rgba(59,130,246,.18);
}

.kw-process{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; margin-top:44px; counter-reset: kw-step; }
.kw-process__step{ position:relative; padding-top:8px; }
.kw-process__num{
  width:40px; height:40px; border-radius:50%; background: var(--kw-text); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:16px;
}
.kw-process__step h4{ font-size:1.02rem; margin-bottom:6px; }
.kw-process__step p{ font-size:.9rem; margin:0; }
.kw-process__step:not(:last-child)::after{
  content:""; position:absolute; top:20px; left:calc(100% - 12px); width:calc(100% - 28px); height:2px;
  background: var(--kw-border);
}

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width: 960px){
  .kw-hero__grid, .kw-split, .kw-contact__grid{ grid-template-columns: 1fr; }
  .kw-pillars{ grid-template-columns: 1fr; }
  .kw-footer__grid{ grid-template-columns: 1fr 1fr; }
  .kw-cta{ flex-direction:column; text-align:center; }
  .kw-process{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .kw-nav{ display:none; }
  .kw-burger{ display:flex; }
  .kw-footer__grid{ grid-template-columns: 1fr; }
  .kw-section{ padding: 56px 0; }
  .kw-tech-grid{ grid-template-columns: 1fr; }
  .kw-process{ grid-template-columns: 1fr; }
  .kw-process__step:not(:last-child)::after{ display:none; }
}
.kw-nav.is-open{
  display:flex; position:absolute; top:100%; left:0; right:0; background:var(--kw-surface);
  border-bottom:1px solid var(--kw-border); flex-direction:column; padding:12px 24px;
}
.kw-nav.is-open ul{ flex-direction:column; width:100%; align-items:stretch; }
.kw-nav.is-open a{ display:block; padding:12px 6px; }