/* ==========================================================================
   Academia — Hero rediseñado (Polilactics Academy)
   Bloque autocontenido para el shortcode [academia_hero].
   NO incluye la cabecera (logo/menú/Mi escritorio) — esa vive en el header
   de Elementor Theme Builder y es dinámica.
   Fluido para móvil, tablet, laptop, desktop, fullscreen y ultrawide.
   Todo scopeado bajo .acad-hero para no afectar el resto del sitio.
   ========================================================================== */

.acad-hero{
  --navy:#13303F; --navy2:#173B4E; --red:#E60203; --red2:#C40002;
  --ink:#0F2733; --muted:#5C7180; --bg:#EEF2F7; --line:#E8EDF1;
  font-family:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box; width:100%;
  padding:clamp(14px,3.2vw,44px) clamp(12px,3vw,40px);
  background:transparent;                 /* hereda el fondo claro de la página */
}
.acad-hero *,.acad-hero *::before,.acad-hero *::after{box-sizing:border-box;}

/* Tarjeta blanca contenedora (ancho máximo para no estirarse en ultrawide) */
.acad-hero__card{
  background:#fff; border-radius:clamp(18px,2vw,28px);
  padding:clamp(20px,2.6vw,40px);
  max-width:1200px; margin-inline:auto;
  box-shadow:0 24px 60px -34px rgba(15,39,51,.34);
}

/* Rejilla principal */
.acad-hero__grid{
  display:grid; grid-template-columns:0.92fr 1.08fr;
  gap:clamp(24px,3vw,44px); align-items:center;
}

/* ---------- IZQUIERDA ---------- */
.acad-hero__eyebrow{
  display:inline-block; background:#FDECEE; color:var(--red2);
  font-weight:600; font-size:clamp(10px,1vw,11.5px); letter-spacing:.4px;
  text-transform:uppercase; padding:6px 14px; border-radius:30px;
}
.acad-hero__title{
  margin:clamp(14px,1.6vw,20px) 0 0; color:var(--navy); font-weight:800;
  font-size:clamp(29px,4.4vw,46px); line-height:1.08; letter-spacing:-.5px;
}
.acad-hero__title em{color:var(--red); font-style:normal;}
.acad-hero__sub{
  margin:clamp(12px,1.4vw,18px) 0 0; color:var(--muted);
  font-size:clamp(14px,1.15vw,15.5px); line-height:1.6; max-width:46ch;
}
.acad-hero__ctas{display:flex; align-items:center; flex-wrap:wrap; gap:clamp(14px,1.6vw,24px); margin-top:clamp(20px,2.4vw,30px);}
.acad-hero__btn{
  display:inline-block; background:var(--red); color:#fff; text-decoration:none;
  font-family:inherit; font-weight:600; font-size:clamp(14px,1.1vw,15px);
  padding:14px 26px; border-radius:32px; border:none; cursor:pointer;
  box-shadow:0 14px 26px -12px rgba(230,2,3,.6); transition:transform .15s ease,box-shadow .15s ease;
}
.acad-hero__btn:hover{transform:translateY(-2px); box-shadow:0 18px 30px -12px rgba(230,2,3,.7);}
.acad-hero__ghost{display:inline-flex; align-items:center; gap:12px; color:#33505f; text-decoration:none; font-weight:500; font-size:clamp(14px,1.1vw,15px);}
.acad-hero__ghost i{width:38px; height:38px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-style:normal; transition:transform .15s ease;}
.acad-hero__ghost:hover i{transform:rotate(45deg);}

.acad-hero__quote{
  display:flex; gap:14px; align-items:center; max-width:44ch;
  margin-top:clamp(24px,2.8vw,36px); padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid var(--line);
}
.acad-hero__ava{
  flex:none; width:52px; height:52px; border-radius:50%;
  background:var(--navy); color:#fff; font-weight:700; font-size:16px;
  display:grid; place-items:center; border:2px solid #fff; box-shadow:0 0 0 1px var(--line);
}
.acad-hero__qt{font-size:clamp(12px,1vw,12.8px); color:#3d5765; line-height:1.5;}
.acad-hero__qt b{display:block; margin-top:5px; color:var(--navy); font-size:12.5px; font-weight:700;}

/* ---------- DERECHA ---------- */
.acad-hero__right{display:grid; grid-template-columns:clamp(150px,15vw,178px) 1fr; gap:clamp(12px,1.4vw,18px);}
.acad-hero__cards{display:flex; flex-direction:column; gap:clamp(11px,1.2vw,15px);}
.acad-hero__ci{
  background:var(--navy); border-radius:16px; padding:clamp(13px,1.3vw,17px);
  color:#fff; display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(10px,1.4vw,16px); flex:1; min-height:clamp(100px,12vw,122px);
}
.acad-hero__ci.is-mid{background:var(--navy2); border:1.5px solid rgba(230,2,3,.55);}
.acad-hero__ico{width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.09); display:grid; place-items:center;}
.acad-hero__ico svg{width:21px; height:21px; fill:none; stroke:var(--red); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.acad-hero__ctxt{font-size:clamp(11.5px,1vw,12.6px); font-weight:600; line-height:1.32;}

/* Imagen + inverted border radius */
.acad-hero__media{
  --notch:64px; --nx:20px; --play:104px;
  position:relative; border-radius:22px; min-height:clamp(300px,34vw,392px);
}
.acad-hero__pic{
  position:absolute; inset:0; border-radius:22px; overflow:hidden;
  -webkit-mask:radial-gradient(circle var(--notch) at calc(100% - var(--nx)) var(--nx), #0000 0 calc(var(--notch) - 2px), #000 calc(var(--notch) - 1px));
          mask:radial-gradient(circle var(--notch) at calc(100% - var(--nx)) var(--nx), #0000 0 calc(var(--notch) - 2px), #000 calc(var(--notch) - 1px));
}
.acad-hero__illu{width:100%; height:100%; display:block; object-fit:cover;}
.acad-hero__play{
  position:absolute; width:var(--play); height:var(--play); border-radius:50%;
  top:calc(var(--nx) - (var(--play) / 2)); right:calc(var(--nx) - (var(--play) / 2));
  background:var(--ink); display:grid; place-items:center;
  box-shadow:0 10px 26px -8px rgba(15,39,51,.6);
}
.acad-hero__ring{position:absolute; inset:0; width:100%; height:100%; animation:acad-spin 14s linear infinite;}
.acad-hero__ring text{fill:#fff; font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase; font-family:"Poppins",sans-serif;}
.acad-hero__tri{width:0; height:0; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent var(--red); margin-left:4px;}
@keyframes acad-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.acad-hero__ring{animation:none;}}

.acad-hero__float{
  position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.94); border-radius:13px; padding:9px 13px;
  box-shadow:0 12px 24px -14px rgba(0,0,0,.5); backdrop-filter:blur(2px);
}
.acad-hero__float-i{width:30px; height:30px; border-radius:8px; background:var(--red); color:#fff; font-weight:800; font-size:14px; display:grid; place-items:center;}
.acad-hero__float-t{font-size:11px; color:var(--navy); font-weight:700; line-height:1.25;}
.acad-hero__float-t small{display:block; color:var(--muted); font-weight:500; font-size:10px;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet / laptop chico: apila izquierda y derecha; derecha = tarjetas + imagen */
@media (max-width:1024px){
  .acad-hero__grid{grid-template-columns:1fr; gap:clamp(22px,4vw,34px);}
  .acad-hero__sub{max-width:none;}
  .acad-hero__media{min-height:clamp(280px,52vw,360px);}
}

/* Móvil: todo en una columna, tarjetas en fila de 3, imagen full width */
@media (max-width:640px){
  .acad-hero__right{grid-template-columns:1fr; gap:14px;}
  .acad-hero__cards{flex-direction:row;}
  .acad-hero__ci{min-height:0; padding:12px; gap:10px;}
  .acad-hero__ico{width:34px; height:34px; border-radius:9px;}
  .acad-hero__ico svg{width:18px; height:18px;}
  .acad-hero__ctxt{font-size:11px;}
  .acad-hero__media{--notch:52px; --nx:16px; --play:82px; min-height:clamp(240px,68vw,320px);}
  .acad-hero__ring text{font-size:8px; letter-spacing:1.4px;}
  .acad-hero__ctas{gap:14px;}
  .acad-hero__btn{padding:13px 22px;}
}

/* Móvil angosto: las 3 tarjetas se apilan verticalmente si no caben cómodas */
@media (max-width:400px){
  .acad-hero__cards{flex-direction:column;}
  .acad-hero__ci{flex-direction:row; align-items:center; min-height:0;}
}

/* ==========================================================================
   ESTANDARIZACIÓN DE ANCHOS DE LA PORTADA
   Todos los apartados al mismo ancho de contenido (1200px), alineados con el
   header. Acotado a la portada (body.home) para no tocar otras páginas.
   Las secciones de Tutor/Elementor y el card del hero quedan al mismo ancho.
   ========================================================================== */
:root{ --acad-content:1200px; }

/* Todas las secciones boxed del contenido de la portada → 1200 (gana sobre los
   overrides por-sección de Elementor con !important) */
body.home [data-elementor-type="wp-page"] .elementor-section.elementor-section-boxed > .elementor-container{
  max-width:var(--acad-content) !important;
}

/* HERO: quitar el padding de las capas de Elementor para que el card llene los
   1200 y quede alineado con las demás secciones. El aire lateral en móvil lo
   sigue dando el propio .acad-hero. */
body.home .elementor-section:has(.acad-hero) .elementor-column > .elementor-element-populated,
body.home .elementor-section:has(.acad-hero) .elementor-widget-shortcode,
body.home .elementor-section:has(.acad-hero) .elementor-widget-shortcode > .elementor-widget-container{
  padding:0 !important; margin:0 !important;
}
@media (min-width:1025px){
  body.home .acad-hero{ padding-left:0; padding-right:0; }
}