/* ═══════════════════════════════════════════════════════════════════════
   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;}
.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-secondary);margin-bottom:16px;}
.awx-hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background: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-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-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(3,1fr);gap:22px;}
@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;color:#1a202c;line-height:1.3;height:47px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.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(3,1fr);gap:20px;}
@media(max-width:900px){.awx-review-grid{grid-template-columns:1fr;}}
.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;}

/* ── Enlaces (estilo "link en bio") ── */
.awx-linkpage{padding:60px 20px 70px;}
.awx-linkpage-inner{max-width:560px;margin:0 auto;text-align:center;}
.awx-linkpage-logo{margin-bottom:20px;}
.awx-linkpage-logo img{max-width:180px;max-height:180px;width:auto;height:auto;margin:0 auto;display:block;}
.awx-linkpage-title{font-size:22px;font-weight:800;letter-spacing:.01em;text-transform:uppercase;
    margin:0 0 26px;color:#1a202c;}
.awx-linkpage-btn{display:block;width:100%;box-sizing:border-box;padding:18px 20px;margin-bottom:16px;
    border-radius:8px;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.02em;
    text-decoration:none;text-align:center;transition:transform .15s,box-shadow .15s;}
.awx-linkpage-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.15);filter:brightness(1.05);}
.awx-linkpage-socials{display:flex;justify-content:center;gap:14px;margin:30px 0 34px;}
.awx-linkpage-socials a{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:22px;text-decoration:none;transition:transform .15s;}
.awx-linkpage-socials a:hover{transform:translateY(-3px);}
.awx-linkpage-access{display:inline-block;padding:12px 28px;border-radius:8px;background:#1a202c;color:#fff !important;
    font-weight:700;font-size:14px;text-decoration:none;transition:background .15s;}
.awx-linkpage-access:hover{background:#000;}
@media(max-width:560px){
    .awx-linkpage{padding:40px 16px 50px;}
    .awx-linkpage-title{font-size:18px;}
    .awx-linkpage-btn{padding:15px 16px;font-size:13px;}
}

/* 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;}