/*
Theme Name:   RETAR Child
Theme URI:    https://retar.com.co
Description:  Child theme de Hello Elementor para retar.com.co. Incluye el sistema de diseño completo (paleta, tipografía, botones, cards, gradientes) extraído de la landing de Liderazgo Transformacional.
Author:       RETAR
Author URI:   https://retar.com.co
Template:     hello-elementor
Version:      1.0.0
Text Domain:  retar-child
*/

/* =========================================================
   1) TOKENS DE DISEÑO — Variables CSS globales
   ========================================================= */
:root{
  /* Marca — Turquesas */
  --retar-turq-50:#e6fbfb;
  --retar-turq-100:#a5f1f8;
  --retar-turq-300:#22d4e0;
  --retar-turq-500:#1bb6c4;
  --retar-turq-700:#0d8a96;
  --retar-turq-900:#063b48;

  /* Superficies oscuras */
  --retar-ink-950:#0a0f14;
  --retar-ink-900:#0e1a23;
  --retar-ink-800:#0e2530;
  --retar-ink-700:#0a3942;
  --retar-ink-600:#134452;

  /* Texto */
  --retar-text-on-dark:#ffffff;
  --retar-text-dim:#b8c7cf;
  --retar-text-on-light:#0a3942;
  --retar-text-muted:#3a4a52;
  --retar-text-soft:#667788;

  /* Superficies claras */
  --retar-light-bg:#f4f8fa;
  --retar-light-card-bg:#ffffff;
  --retar-light-border:#e1e8eb;

  /* Semántico */
  --retar-warning:#e88800;
  --retar-danger:#e36d6d;
  --retar-success:#1bb6c4;

  /* Espaciado */
  --retar-space-1:.25rem;
  --retar-space-2:.5rem;
  --retar-space-3:.75rem;
  --retar-space-4:1rem;
  --retar-space-5:1.5rem;
  --retar-space-6:2rem;
  --retar-space-7:3rem;
  --retar-space-8:4rem;
  --retar-space-9:6rem;

  /* Radii */
  --retar-r-sm:8px;
  --retar-r-md:12px;
  --retar-r-lg:16px;
  --retar-r-xl:18px;
  --retar-r-pill:30px;

  /* Sombras */
  --retar-shadow-glow:0 8px 24px rgba(27,182,196,.35);
  --retar-shadow-glow-hover:0 12px 30px rgba(27,182,196,.55);
  --retar-shadow-card:0 12px 30px rgba(6,59,72,.18);
  --retar-shadow-card-hover:0 22px 46px rgba(6,59,72,.3);
  --retar-shadow-deep:0 30px 60px rgba(0,0,0,.45);

  /* Gradientes signature */
  --retar-grad-hero:linear-gradient(110deg,#063b48 0%,#0a5662 35%,#1bb6c4 75%,#22d4e0 100%);
  --retar-grad-cta:linear-gradient(135deg,#1bb6c4,#0d8a96);
  --retar-grad-dark:linear-gradient(180deg,#0a0f14,#0e1a23);
  --retar-grad-form:linear-gradient(135deg,#063b48,#0a3942);
  --retar-grad-card-tl:radial-gradient(circle at 100% 100%,#063b48 0%,#0d6776 55%,#1bb6c4 100%);
  --retar-grad-card-tr:radial-gradient(circle at 0% 100%,#063b48 0%,#0d6776 55%,#1bb6c4 100%);
  --retar-grad-card-bl:radial-gradient(circle at 100% 0%,#063b48 0%,#0d6776 55%,#1bb6c4 100%);
  --retar-grad-card-br:radial-gradient(circle at 0% 0%,#063b48 0%,#0d6776 55%,#1bb6c4 100%);

  /* Compatibilidad: alias cortos (úsalos en widgets HTML) */
  --turq:#1bb6c4;
  --turq2:#0d8a96;
}

/* =========================================================
   2) TIPOGRAFÍA BASE
   ========================================================= */
body{
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{font-family:'Montserrat',sans-serif;font-weight:800;line-height:1.1;letter-spacing:-.5px}
h1{font-size:clamp(34px,5vw,62px);font-weight:800;letter-spacing:-1px}
h2{font-size:clamp(28px,4vw,46px)}
h3{font-size:clamp(22px,2.6vw,32px);font-weight:700}
h4{font-size:20px;font-weight:700}

/* Eyebrow (etiqueta pequeña sobre títulos) */
.retar-eyebrow,
.eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--retar-turq-500);
  margin-bottom:10px;
}

/* =========================================================
   3) BOTONES — Clases reutilizables en cualquier widget HTML
   ========================================================= */
.retar-btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:var(--retar-r-sm);
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.3px;
  cursor:pointer;
  border:0;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  text-align:center;
  text-decoration:none;
  line-height:1.2;
}
.retar-btn--primary{background:var(--retar-grad-cta);color:#fff;box-shadow:var(--retar-shadow-glow)}
.retar-btn--primary:hover{transform:translateY(-2px);box-shadow:var(--retar-shadow-glow-hover);color:#fff}
.retar-btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.retar-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.retar-btn--dark{background:var(--retar-ink-700);color:#fff}
.retar-btn--dark:hover{background:var(--retar-ink-900);transform:translateY(-2px);color:#fff}
.retar-btn--block{display:block;width:100%}
.retar-btn--sm{padding:9px 18px;font-size:13px;border-radius:6px}
.retar-btn--lg{padding:18px 36px;font-size:16px}

/* =========================================================
   4) CARDS — Variantes reutilizables
   ========================================================= */

/* Card check (listas de beneficios sobre fondo claro) */
.retar-card-check{
  border-radius:var(--retar-r-md);
  padding:28px 28px 28px 80px;
  color:#fff;
  position:relative;
  box-shadow:var(--retar-shadow-card);
  transition:.3s;
  background:var(--retar-grad-card-tl);
}
.retar-card-check:nth-child(2){background:var(--retar-grad-card-tr)}
.retar-card-check:nth-child(3){background:var(--retar-grad-card-bl)}
.retar-card-check:nth-child(4){background:var(--retar-grad-card-br)}
.retar-card-check:hover{transform:translateY(-4px);box-shadow:var(--retar-shadow-card-hover)}
.retar-card-check .check,.retar-card-check__icon{
  position:absolute;left:24px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#1bb6c4,#22d4e0);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:20px;color:#fff;
  box-shadow:0 6px 14px rgba(27,182,196,.5);
}

/* Plan card */
.retar-plan{
  background:linear-gradient(180deg,#0e2530,#0a1a22);
  border:1px solid rgba(27,182,196,.25);
  border-radius:var(--retar-r-lg);
  padding:30px 24px;
  position:relative;
  transition:.35s;
  color:#fff;
}
.retar-plan:hover{transform:translateY(-8px);border-color:var(--retar-turq-500);box-shadow:0 20px 40px rgba(27,182,196,.25)}
.retar-plan--featured{background:linear-gradient(180deg,#0d8a96,#063b48);border-color:var(--retar-turq-500);transform:scale(1.04)}
.retar-plan__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#fff;color:var(--retar-turq-700);font-size:11px;font-weight:700;padding:6px 14px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase}

/* Perm-item (lista numerada con backdrop blur) */
.retar-perm-item{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
  border:1px solid rgba(27,182,196,.3);
  border-radius:var(--retar-r-md);
  padding:30px;
  display:flex;gap:18px;align-items:flex-start;
  transition:.3s;
  color:#fff;
}
.retar-perm-item:hover{background:rgba(27,182,196,.12);transform:translateY(-4px)}
.retar-perm-item__num{font-size:32px;font-weight:800;color:var(--retar-turq-500);line-height:1;flex-shrink:0}

/* Feature card (sobre fondos claros) */
.retar-feature-card{
  background:#fff;color:var(--retar-text-on-light);
  border-radius:var(--retar-r-lg);
  padding:30px;
  box-shadow:var(--retar-shadow-card);
  transition:.3s;
  border:1px solid var(--retar-light-border);
}
.retar-feature-card:hover{transform:translateY(-4px);box-shadow:var(--retar-shadow-card-hover)}
.retar-feature-card__icon{
  width:56px;height:56px;border-radius:14px;
  background:var(--retar-grad-cta);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;font-weight:800;
  margin-bottom:18px;
  box-shadow:var(--retar-shadow-glow);
}

/* =========================================================
   5) FORMULARIOS
   ========================================================= */
.retar-form-card{
  background:#fff;color:var(--retar-text-on-light);
  border-radius:var(--retar-r-xl);
  padding:36px;
  box-shadow:var(--retar-shadow-deep);
}
.retar-form-card h3{font-size:22px;font-weight:700;margin-bottom:20px}
.retar-form-card .field{margin-bottom:14px}
.retar-form-card label{display:block;font-size:12px;font-weight:600;color:#456;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.retar-form-card input,
.retar-form-card textarea,
.retar-form-card select{
  width:100%;padding:14px 16px;
  border:1.5px solid var(--retar-light-border);
  border-radius:8px;font-size:14px;
  background:#f7fafb;
  transition:border-color .2s,background-color .2s;
  font-family:inherit;
}
.retar-form-card input:focus,
.retar-form-card textarea:focus,
.retar-form-card select:focus{
  outline:none;border-color:var(--retar-turq-500);background:#fff;
  box-shadow:0 0 0 3px rgba(27,182,196,.18);
}
.retar-form-card textarea{resize:vertical;min-height:90px}

/* =========================================================
   6) ACORDEÓN FAQ
   ========================================================= */
.retar-accordion details{
  background:#fff;color:var(--retar-text-on-light);
  border-radius:var(--retar-r-md);
  padding:20px 24px;
  cursor:pointer;
  transition:.25s;
  box-shadow:var(--retar-shadow-card);
  margin-bottom:14px;
}
.retar-accordion details[open]{box-shadow:var(--retar-shadow-card-hover)}
.retar-accordion summary{font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.retar-accordion summary::-webkit-details-marker{display:none}
.retar-accordion summary::after{content:"+";font-size:22px;color:var(--retar-turq-500);font-weight:300;transition:.3s}
.retar-accordion details[open] summary::after{transform:rotate(45deg)}
.retar-accordion details p{margin-top:12px;color:var(--retar-text-muted);font-size:14px}

/* =========================================================
   7) SECCIONES Y CONTENEDORES UTILITARIOS
   ========================================================= */
.retar-section{padding:90px 0}
.retar-section--dark{background:var(--retar-ink-950);color:#fff}
.retar-section--cream{background:var(--retar-light-bg);color:var(--retar-text-on-light)}
.retar-section--gradient{background:var(--retar-grad-form);color:#fff}
.retar-section--hero{background:var(--retar-grad-hero);color:#000}

.retar-container{max-width:1200px;margin:0 auto;padding:0 24px}

.retar-h2{font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-.5px;line-height:1.05;margin-bottom:14px}
.retar-h2--light{color:#fff}
.retar-lead{font-size:16px;color:var(--retar-text-dim);max-width:700px;margin:0 auto 36px;text-align:center}
.retar-section--cream .retar-lead{color:var(--retar-text-muted)}

/* =========================================================
   8) AJUSTES PARA HELLO ELEMENTOR
   ========================================================= */

/* Asegurar Montserrat en todo el sitio */
.elementor-widget-text-editor,
.elementor-widget-heading,
.elementor-widget-button{font-family:'Montserrat',sans-serif}

/* Botones de WooCommerce con el estilo RETAR */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button{
  background:var(--retar-grad-cta) !important;
  color:#fff !important;
  border-radius:var(--retar-r-sm) !important;
  font-weight:600 !important;
  padding:14px 28px !important;
  border:0 !important;
  box-shadow:var(--retar-shadow-glow);
  transition:transform .25s, box-shadow .25s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  transform:translateY(-2px);
  box-shadow:var(--retar-shadow-glow-hover);
}

/* Mi Cuenta de WooCommerce más legible */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{
  color:var(--retar-turq-500);
  font-weight:700;
}

/* =========================================================
   9) RESPONSIVE — Ajustes base
   ========================================================= */
@media (max-width:991px){
  .retar-section{padding:64px 0}
  .retar-container{padding:0 20px}
}
@media (max-width:559px){
  .retar-section{padding:48px 0}
  .retar-container{padding:0 16px}
  .retar-btn{padding:13px 22px;font-size:13.5px}
  .retar-card-check{padding:24px 24px 24px 72px}
}

/* =========================================================
   10) ACCESIBILIDAD — Movimiento reducido
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}