/* ═══════════════════════════════════════════════════════════════════════
   Sistema visual COMPARTIDO por las páginas públicas del sitio
   (home.php, cursos.php, contacto.php) — un solo archivo para que las tres
   se vean siempre idénticas (mismo header, footer, botones, tarjetas de
   curso, etc.) sin duplicar CSS en cada página. Los colores del tema
   (--awx-primary/--awx-secondary) los define cada página en un <style>
   inline propio (son dinámicos, vienen de la configuración admin), justo
   antes de este archivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* Acotado a .awx-public-page (home/cursos/contacto, páginas 100% públicas)
   y .awx-public-chrome (header/footer que curso.php inyecta SOLO para
   invitados) — antes eran selectores genéricos (*, body, img, a) que se
   aplicaban a TODA la página, y en curso.php eso se filtraba también al
   panel interno del usuario logueado (color de texto, íconos del menú
   descentrados) porque esta hoja de estilos carga junto con la del panel,
   no en reemplazo de ella. */
.awx-public-page,.awx-public-chrome{box-sizing:border-box;}
.awx-public-page *,.awx-public-chrome *{box-sizing:border-box;}
body.awx-public-page{margin:0;font-family:Arial,Helvetica,sans-serif;color:#1a202c;background:#fff;line-height:1.5;}
.awx-public-page img,.awx-public-chrome img{max-width:100%;display:block;}
.awx-public-page a,.awx-public-chrome a{text-decoration:none;color:inherit;}
/* Modo "HTML personalizado" del HOME: el body NO lleva .awx-public-page, así que
   no se aplica ninguna tipografía/color/reset base del tema — el diseño es del
   admin. Solo se aseguran los bloques dinámicos que él inserta con shortcodes
   (cursos y reseñas) para que sus tarjetas se vean correctas dentro de su HTML. */
.awx-custom-home :where(.awx-courses,.awx-reviews),
.awx-custom-home :where(.awx-courses,.awx-reviews) *{box-sizing:border-box;}
.awx-custom-home :where(.awx-courses,.awx-reviews) a{text-decoration:none;color:inherit;}
.awx-custom-home :where(.awx-courses,.awx-reviews) img{max-width:100%;display:block;}
/* El body del modo personalizado no hereda ninguna base del tema: sin esto queda el margen de 8px del navegador (borde blanco alrededor del diseño). */
:where(body.awx-custom-home){margin:0;}
.awx-container{max-width:1180px;margin:0 auto;padding:0 24px;}
.awx-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 26px;border-radius:30px;font-weight:700;font-size:18px;border:none;cursor:pointer;transition:.2s;}
.awx-btn:hover{filter:brightness(.93);transform:translateY(-1px);}

/* Header */
.awx-header{position:relative;z-index:50;border-bottom:1px solid #eef1f6;background:var(--awx-header-bg,#fff);color:var(--awx-header-text,#1a202c);}
.awx-header.sticky{position:sticky;top:0;}
.awx-header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px;}
.awx-logo img{height:60px !important;width:auto;margin-top:-20px;margin-bottom:-20px;}
.awx-logo{font-weight:700;font-size:27px;display:flex;align-items:center;gap:8px;}
.awx-nav{display:flex;gap:28px;align-items:center;}
.awx-nav a{font-size:14px;font-weight:600;letter-spacing:.02em;}
.awx-nav a.active{color:var(--awx-primary);}
.awx-burger{display:none;position:relative;z-index:52;background:none;border:none;color:inherit;font-size:26px;cursor:pointer;}
.awx-nav-close{display:none;}
@media(max-width:860px){
    .awx-nav{position:fixed;z-index:51;inset:0 0 0 auto;width:78%;max-width:320px;background:var(--awx-header-bg,#fff);color:var(--awx-header-text,#1a202c);flex-direction:column;
        align-items:flex-start;padding:90px 28px 28px;gap:22px;box-shadow:-8px 0 30px rgba(0,0,0,.12);
        overflow-y:auto;visibility:hidden;transform:translateX(100%);transition:transform .25s,visibility .25s;}
    .awx-nav.open{visibility:visible;transform:translateX(0);}
    .awx-nav a.active{color:inherit;text-decoration:underline;text-underline-offset:5px;}
    .awx-nav-close{display:block;position:absolute;top:20px;left:28px;padding:8px 12px;border:1px solid currentColor;border-radius:6px;background:none;color:inherit;font:inherit;cursor:pointer;}
    .awx-burger{display:block;}
}

/* Hero — imagen de fondo COMPLETA (cover, de borde a borde) con un degradado
   lateral encima: sólido a la izquierda (donde va el texto, para que se lea
   bien) y transparente hacia la derecha (donde se ve la foto/gráfico a todo
   color, sin ningún velo encima) — así la imagen se muestra entera y nítida. */
.awx-hero{position:relative;overflow:hidden;display:flex;align-items:center;color:#fff;
    background:linear-gradient(120deg,#0b1220,#1e293b);}
/* Contenedor propio del Hero — más ancho que ".awx-container" (1180px) para
   que el texto tenga más aire, pero sigue centrado en vez de ir de borde a
   borde. La imagen (position:absolute) no depende de este ancho — sigue
   relativa a toda la sección. */
.awx-hero-grid{z-index:2;display:flex;align-items:center;width:100%;max-width:1400px;margin:0 auto;padding:60px 48px;gap:0;box-sizing:border-box;}
.awx-hero-text{flex:1 1 460px;max-width:600px;}
.awx-hero-media{position:absolute;top:0;right:32px;bottom:0;width:48%;min-width:320px;z-index:1;}
.awx-hero-media img{width:100%;height:100%;object-fit:cover;display:block;}
/* Tamaño FIJO (no clamp/vw) en escritorio — así se ve exactamente igual en
   cualquier computadora, sin importar resolución de pantalla o zoom del
   sistema operativo (con clamp() el tamaño varía según el ancho real en
   píxeles CSS, que cambia con la escala de Windows aunque la ventana "se
   vea" del mismo ancho). Solo se reduce en pantallas angostas (móvil). */
.awx-hero h1{font-size:52px;font-weight:700;margin:0 0 18px;line-height:1.2;}
.awx-hero h2{font-size:18px;font-weight:500;margin:0 0 8px;opacity:.95;}
.awx-hero p{font-size:18px;opacity:.85;margin:0 0 26px;max-width:520px;}
@media(max-width:860px){.awx-hero h1{font-size:38px;}}
@media(max-width:480px){.awx-hero h1{font-size:32px;}}
.awx-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--awx-hero-accent,var(--awx-secondary));margin-bottom:16px;}
.awx-hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--awx-hero-accent,var(--awx-secondary));flex-shrink:0;}
.awx-hero-features{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px;font-size:12.5px;opacity:.85;}
.awx-hero-features .sep{opacity:.5;}
.awx-hero-features i{color:var(--awx-hero-accent,var(--awx-secondary));margin-right:4px;}
/* Título con efecto de "escritura" (typewriter) — ".awx-title-layout" es el
   título COMPLETO pero invisible, solo para reservar el espacio exacto (así
   no salta el layout mientras se "escribe"); ".awx-title-live" es la capa
   visible encima, que un pequeño script va llenando letra por letra. */
.awx-hero h1{position:relative;}
.awx-title-layout{visibility:hidden;}
.awx-title-live{position:absolute;inset:0;}
.awx-title-layout .accent,.awx-title-live .accent{color:var(--awx-hero-accent,var(--awx-secondary));}
.awx-hero.align-center .awx-hero-grid{justify-content:center;}
.awx-hero.align-center .awx-hero-text{max-width:720px;text-align:center;}
.awx-hero.align-center p{margin-left:auto;margin-right:auto;}
.awx-hero.align-center .awx-hero-eyebrow,.awx-hero.align-center .awx-hero-features{justify-content:center;}
.awx-hero.align-center .awx-hero-media{display:none;}
@media(max-width:860px){
    .awx-hero-grid{flex-direction:column;justify-content:flex-start;gap:0;padding:40px 24px 0;text-align:center;}
    .awx-hero-text{flex:0 0 auto;max-width:100%;text-align:center;margin-bottom:28px;}
    .awx-hero-media{position:static;width:calc(100% + 48px);margin:0 -24px;min-width:0;height:340px;order:2;overflow:hidden;}
    /* Zoom: la imagen se agranda y recorta un poco más cerca (en vez de
       verse completa y "lejos"), para que se sienta más grande en la
       columna angosta de móvil. */
    .awx-hero-media img{transform:scale(1.18);transform-origin:center;}
    .awx-hero-eyebrow,.awx-hero-features{justify-content:center;}
}
@media(max-width:480px){
    .awx-hero-media{height:300px;}
}

/* ── Encabezado de sección reutilizable: etiqueta + título a la izquierda,
   descripción a la derecha — mismo patrón en Beneficios/Cursos/Reseñas. ── */
.awx-sec-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:40px;flex-wrap:wrap;}
.awx-sec-hd .awx-sec-hd-left{max-width:520px;}
.awx-sec-hd .awx-sec-hd-right{max-width:380px;font-size:14px;opacity:.7;padding-bottom:4px;}
.awx-sec-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--awx-primary);margin-bottom:10px;}
.awx-sec-hd h2{font-size:36px;font-weight:700;margin:0;line-height:1.25;}
@media(max-width:768px){.awx-sec-hd{flex-direction:column;align-items:flex-start;}.awx-sec-hd .awx-sec-hd-right{max-width:100%;}.awx-sec-hd h2{font-size:30px;}}

/* Page header genérico (Cursos/Contacto): banda de título simple, sin foto,
   para páginas internas que no llevan un Hero completo. */
.awx-page-hd{padding:54px 0 40px;background:linear-gradient(120deg,#0b1220,#1e293b);color:#fff;text-align:center;}
.awx-page-hd .awx-sec-eyebrow{color:var(--awx-secondary);justify-content:center;display:block;text-align:center;}
.awx-page-hd h1{font-size:36px;font-weight:700;margin:0 0 8px;}
@media(max-width:768px){.awx-page-hd h1{font-size:30px;}}
.awx-page-hd p{font-size:14.5px;opacity:.8;max-width:560px;margin:0 auto;}

/* Benefits */
.awx-benefits{padding:70px 0;}
.awx-benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:960px){.awx-benefit-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.awx-benefit-grid{grid-template-columns:1fr;}}
.awx-benefit-card{position:relative;border:1px solid rgba(120,130,160,.16);border-radius:16px;padding:20px;}
.awx-benefit-num{position:absolute;top:16px;right:18px;font-size:12px;font-weight:700;opacity:.4;z-index:2;}
.awx-benefit-media{border-radius:12px;overflow:hidden;margin-bottom:16px;background:#eef3ff;}
.awx-benefit-media img{width:100%;height:180px;object-fit:cover;display:block;}
.awx-benefit-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
    background:linear-gradient(135deg,var(--awx-primary),var(--awx-secondary));}
.awx-benefit-icon i{font-size:24px;color:#fff;}
.awx-benefit-card h3{font-size:17px;font-weight:700;margin:0 0 8px;}
.awx-benefit-card p{font-size:16px;opacity:.7;margin:0;line-height:1.55;}

/* Courses */
.awx-courses{padding:70px 0;}
.awx-courses-meta{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;opacity:.65;margin-bottom:18px;}
.awx-courses-meta i{margin-right:5px;}
.awx-course-grid{display:grid;grid-template-columns:repeat(var(--awx-cols,3),1fr);gap:22px;}
/* Bloque de cursos insertado con el shortcode [awx_cursos] dentro del HTML propio del HOME */
.awx-courses.awx-courses-sc{padding:0;}
@media(max-width:900px){.awx-course-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.awx-course-grid{grid-template-columns:1fr;}}
.awx-course-card{background:#fff;border:1px solid #eef1f6;border-radius:16px;overflow:hidden;box-shadow:0 2px 14px rgba(20,30,60,.05);transition:.2s;display:block;}
.awx-course-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(20,30,60,.1);}
.awx-course-thumb{position:relative;aspect-ratio:16/10;background:#eef1f6;overflow:hidden;}
.awx-course-thumb img{width:100%;height:100%;object-fit:cover;}
.awx-course-tag{position:absolute;top:12px;left:12px;font-size:12px;font-weight:700;padding:5px 12px;border-radius:20px;color:#fff;}
.awx-course-tag.free{background:var(--awx-course-free,var(--awx-primary));}
.awx-course-tag.paid{background:var(--awx-course-paid,#111827);}
.awx-course-wish{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);
    display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:14px;}
.awx-course-body{padding:16px 18px 0;}
.awx-course-cat{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;}
.awx-course-cat i{color:var(--awx-primary);}
.awx-course-title{font-size:18px;font-weight:700;margin:0 0 8px;min-height:38px;color:#1a202c;}
.awx-course-desc{font-size:16px;color:#6b7280;margin:0 0 16px;line-height:1.5;}
.awx-course-foot{display:flex;align-items:center;justify-content:space-between;margin:0 -18px;padding:16px 18px;}
.awx-course-foot.free{background:#eef3ff;}
.awx-course-foot.paid{background:var(--awx-course-paid,var(--awx-primary));}
.awx-course-price{font-weight:700;font-size:24px;color:#1a202c;}
.awx-course-price small{font-weight:600;font-size:12px;color:#9ca3af;margin-left:4px;}
.awx-course-foot.paid .awx-course-price{color:#fff;}
.awx-course-foot.paid .awx-course-price small{color:rgba(255,255,255,.75);}
.awx-course-cta{font-size:14px;font-weight:700;padding:10px 18px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;}
.awx-course-cta.free{background:var(--awx-course-free,var(--awx-primary));color:#fff;}
.awx-course-cta.paid{background:var(--awx-course-paid-cta,#f59e0b);color:#1a202c;}
.awx-course-empty{text-align:center;opacity:.6;padding:40px 20px;grid-column:1/-1;}

/* Cursos.php: buscador + paginación */
.awx-courses-toolbar{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap;}
.awx-courses-search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;border:1.5px solid #e2e8f0;border-radius:10px;padding:10px 14px;}
.awx-courses-search input{border:none;outline:none;font-size:14px;width:100%;background:transparent;}
.awx-courses-search i{color:#9ca3af;}
.awx-pager{display:flex;justify-content:center;gap:10px;margin-top:36px;}
.awx-pager button{border:1.5px solid #e2e8f0;background:#fff;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;}
.awx-pager button:disabled{opacity:.4;cursor:not-allowed;}
.awx-pager button:not(:disabled):hover{border-color:var(--awx-primary);color:var(--awx-primary);}

/* Reviews */
.awx-reviews{padding:70px 0;background:#f7f9fc;}
.awx-review-grid{display:grid;grid-template-columns:repeat(var(--awx-cols,3),1fr);gap:20px;}
@media(max-width:900px){.awx-review-grid{grid-template-columns:1fr;}}
/* Bloque de reseñas insertado con el shortcode [awx_resenas] */
.awx-reviews.awx-reviews-sc{padding:0;background:none;}
.awx-review-card{background:#fff;border-radius:14px;padding:24px;box-shadow:0 2px 12px rgba(20,30,60,.06);}
.awx-review-stars{color:#f59e0b;font-size:13px;margin-bottom:14px;}
.awx-review-card p{font-size:16px;opacity:.85;margin:0 0 18px;font-style:italic;}
.awx-review-top{display:flex;align-items:center;gap:12px;}
.awx-review-avatar{width:38px;height:38px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;
    font-weight:700;color:#64748b;flex-shrink:0;overflow:hidden;}
.awx-review-avatar img{width:100%;height:100%;object-fit:cover;}
.awx-review-name{font-weight:700;font-size:14px;}
.awx-review-role{font-size:12px;opacity:.6;}

/* Contacto.php */
.awx-contact{padding:70px 0;}
.awx-contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:flex-start;}
@media(max-width:900px){.awx-contact-grid{grid-template-columns:1fr;gap:36px;}}
.awx-contact-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;}
.awx-contact-icon{width:44px;height:44px;border-radius:12px;background:#eef3ff;color:var(--awx-primary);
    display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.awx-contact-item h4{font-size:12px;font-weight:700;margin:0 0 3px;text-transform:uppercase;letter-spacing:.03em;color:#6b7280;}
.awx-contact-item p, .awx-contact-item a{font-size:16px;font-weight:600;color:#1a202c;margin:0;}
.awx-contact-form{background:#f8faff;border-radius:16px;padding:32px;}
.awx-contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.awx-contact-form .row2{grid-template-columns:1fr;}}
.awx-contact-form label{display:block;font-size:12px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
.awx-contact-form input, .awx-contact-form textarea{width:100%;border:1.5px solid #e2e8f0;border-radius:9px;padding:11px 14px;
    font-size:14px;font-family:inherit;margin-bottom:16px;background:#fff;box-sizing:border-box;transition:border-color .15s;}
.awx-contact-form input:focus, .awx-contact-form textarea:focus{outline:none;border-color:var(--awx-primary);}
.awx-contact-form textarea{resize:vertical;min-height:120px;}
.awx-contact-form button{width:100%;justify-content:center;background:linear-gradient(90deg,var(--awx-primary),var(--awx-secondary));color:#fff;font-size:18px;padding:13px 26px;}
.awx-contact-msg{font-size:13px;padding:10px 14px;border-radius:8px;margin-bottom:16px;display:none;}
.awx-contact-msg.ok{display:block;background:#dcfce7;color:#16a34a;}
.awx-contact-msg.err{display:block;background:#fef2f2;color:#dc2626;}

/* Footer */
.awx-footer{padding:56px 0 24px;}
.awx-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:40px;}
@media(max-width:860px){.awx-footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.awx-footer-grid{grid-template-columns:1fr;}}
.awx-footer h4{font-size:14px;font-weight:700;letter-spacing:.05em;margin:0 0 16px;opacity:.9;}
.awx-footer p{font-size:14px;opacity:.75;margin:0 0 14px;}
.awx-footer ul{list-style:none;padding:0;margin:0;}
.awx-footer li{margin-bottom:10px;font-size:14px;}
.awx-footer li a:hover{text-decoration:underline;}
.awx-footer-social{display:flex;gap:10px;margin-top:6px;}
.awx-footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;}
.awx-footer-contact-item{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px;font-size:14px;opacity:.85;}
.awx-newsletter-form{display:flex;gap:0;margin-top:6px;border-radius:8px;overflow:hidden;}
.awx-newsletter-form input{flex:1;border:none;padding:11px 14px;font-size:14px;outline:none;}
.awx-newsletter-form button{border:none;padding:0 18px;font-weight:700;font-size:12px;cursor:pointer;color:#fff;background:var(--awx-primary);}
.awx-footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;text-align:center;font-size:14px;opacity:.65;}