/*
 * php-pages.css — Estilos de las páginas PHP (migración desde Angular/WordPress).
 *
 * Cómo usar este archivo
 * ---------------------
 * - Busca la página por nombre en el ÍNDICE (Ctrl+F «pages/nombre»).
 * - Los estilos globales compartidos están al inicio (.std-banner, fixes de iconos).
 * - No reordenes bloques grandes: el orden importa por la cascada CSS.
 * - Para listados Madrid/Online hay reglas en dos zonas (ver índice); la 2.ª suele
 *   refinar la 1.ª. Comprueba en DevTools qué regla gana antes de borrar duplicados.
 *
 * Otros CSS del sitio: style.css (global/tarjetas), header.css, responsive.css.
 *
 * ÍNDICE (línea ≈ inicio del bloque)
 * ---------------------------------
 *   3    Global — override iconos Font Awesome vs style.css
 *  19    Global — componente .std-banner
 * 104    pages/american-language-academy-opiniones.php  (bloque 1)
 * 328    pages/inicio.php  (bloque 1)
 * 1342   pages/cursos-ingles-online.php  (bloque 1)
 * 1690   pages/curso-detalle.php  (bloque principal, ~2300 líneas)
 * 3994   pages/terminos-y-condiciones.php
 * 4069   pages/academias-de-ingles-madrid.php  (bloque 1)
 * 4639   pages/trabaja-en-american-language-academy.php
 * 4686   pages/curso-detalle.php — extras TOEFL (convive con trabaja; no mover sin probar)
 * 5025   pages/american-language-academy.php
 * 5509   pages/certificar-nivel-ingles.php  (bloque 1)
 * 5867   pages/cursos-ingles-madrid-para-colegios.php
 * 6394   pages/actividades-en-ingles-madrid.php
 * 7228   pages/test-nivel-ingles.php
 * 8037   pages/cursos-ingles-online.php  (bloque 2, filtros/listado)
 * 8372   pages/cursos-ingles-madrid.php  (bloque 2)
 * 8720   pages/tipos-de-formacion.php
 * 8810   pages/inicio.php  (bloque 2 — variables :root e .inicio-page)
 * 9307   pages/american-language-academy-opiniones.php  (bloque 2)
 * 9439   pages/terminos-y-condiciones.php  (marcador; estilos arriba ~3994)
 * 9443   pages/academias-de-ingles-madrid.php  (bloque 2)
 * 9980   pages/certificar-nivel-ingles.php  (bloque 2)
 * 10346  pages/ingles-para-empresas.php
 * 11838  Global — Instagram, WhatsApp flotante, reCAPTCHA
 */

/* ─── FIX: Override global .fas:before{color:#fff} from style.css ─── */
/* style.css sets all FA icon pseudo-elements to white. We override it here
   so icons inherit the color set on their parent containers. */
.color-circles-block .top-block i:before,
.work-with-us .color-circles-block .top-block i:before,
.ala-circle .circle-icon i:before,
.sf-option i:before,
.sf-step i:before,
.empresas-page .card-icon i:before,
.empresas-page .fas:before,
.empresas-page .fa:before,
.empresas-page .far:before,
.icon-form-container i:before {
  color: inherit;
}

/* ═══ Standardized banner component (.std-banner) ═══ */
.std-banner {
  position: relative;
  border-radius: 16px;
  overflow: visible;
  max-width: 1080px;
  margin: 36px auto;
  height: 360px;
}
.std-banner-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}
.std-banner-gradient {
  position: absolute;
  right: 0;
  top: 0;
  width:50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0 0 34px;
  box-sizing: border-box;
  background:
    linear-gradient(to left, rgba(212, 36, 68, 0.58) 0%, rgba(120, 18, 36, 0) 62%),
    linear-gradient(to left, rgba(231, 75, 104, 0.72) 0%, rgba(228, 64, 95, 0) 76%),
    linear-gradient(to left, var(--gradient-color, rgba(43,139,215,0.62)) 0%, rgba(43,139,215,0) 82%);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  z-index: 2;
}
.std-banner-gradient p {
  color: #fff;
  font-weight: 700;
  font-size: 28px;
  text-align: center;
  font-style: bold;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0 14px 0 0;
  max-width: 220px;
}
.std-banner-badge {
  position: absolute;
  left: -95px;
  bottom: -34px;
  z-index: 3;
  height: 46%;
}
.std-banner-badge img {
  height: 100%;
  width: auto;
  display: block;
}
@media (max-width: 768px) {
  .std-banner {
    max-width: 100%;
    margin: 20px 10px;
    height: 250px;
    border-radius: 12px;
  }
  .std-banner-gradient {
    width: 40%;
    align-items: center;
    padding: 0 0 0 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .std-banner-gradient p {
    font-size: 28px;
    margin-right: 8px;
    max-width: 130px;
  }
  .std-banner-badge {
    height: 36%;
    left: -26px;
    bottom: -16px;
  }
}
/* ═══ End standardized banner ═══ */

/* pages/american-language-academy-opiniones.php */
.opiniones-page {font-family:"Gotham Rounded","Gotham-Light","Helvetica Neue",Arial,sans-serif;color:#4b4b4b;line-height:1.6;background:#fff;}
  .opiniones-container{max-width:1200px;margin:0 auto;padding:0 40px;text-align:center;}
  .opiniones-hero h1{color:#133D68;font-size:22pt;margin:30px auto 10px;}
  .opiniones-subtitle{color:#133D68;font-size:13pt;margin:0 0 25px;}
  .opiniones-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:40px;}
  .opiniones-card{color:#4b4b4b;border-radius:10px;padding:20px;text-align:center;min-height:120px;background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.1);border-top:4px solid transparent;}
  .card-blue{border-top-color:#2196F3;}
  .card-teal{border-top-color:#009688;}
  .card-green{border-top-color:#8BC34A;}
  .card-icon{font-size:22px;margin-bottom:8px;color:#FC824E;}
  .opiniones-page .feature-container.pre-opinions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0 auto 40px;
    max-width: 1120px;
  }
  .opiniones-page .pre-opinions .card.borderless.feature {
    margin: 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .opiniones-page .pre-opinions .feature-top {
    padding: 26px 16px 22px;
    flex-shrink: 0;
  }
  .opiniones-page .pre-opinions .feature-top.light-blue {
    background: #bbdefb;
    color: #1565c0;
  }
  .opiniones-page .pre-opinions .feature-top.teal {
    background: #b2dfdb;
    color: #00695c;
  }
  .opiniones-page .pre-opinions .feature-top.light-green {
    background: #c8e6c9;
    color: #2e7d32;
  }
  .opiniones-page .pre-opinions .feature-top .fa-5x {
    font-size: 3.5rem;
    line-height: 1;
    vertical-align: middle;
  }
  .opiniones-page .pre-opinions .feature-content {
    padding: 18px 18px 22px;
    font-size: 11pt;
    line-height: 1.65;
    color: #4b4b4b;
  }
  .opiniones-page .pre-opinions .feature-content h3.text-center {
    text-align: center;
    color: #133d68;
    font-size: 13pt;
    font-weight: 700;
    margin: 0;
  }
  .opiniones-page .pre-opinions .feature-content strong {
    color: #3a3f4b;
    font-weight: 600;
  }
  .opiniones-band{position:relative;padding:60px 0 80px;margin:20px 0 50px;}
  .band-gradient{position:absolute;inset:0;background:linear-gradient(90deg,#FC824E,#FF49B6,#9C27B0);transform:skewY(-6deg);z-index:0;}
  .opiniones-band h2{position:relative;z-index:1;color:#fff;font-size:16pt;margin-bottom:25px;}
  .opiniones-slider-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:12px;}
  .opiniones-slider{position:relative;z-index:1;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px;scrollbar-width:thin;cursor:grab;}
  .opiniones-slider.is-dragging{cursor:grabbing;user-select:none;}
  .opiniones-slider::-webkit-scrollbar{height:8px;}
  .opiniones-slider::-webkit-scrollbar-thumb{background:#ffffff66;border-radius:999px;}
  .opinion-container{padding:20px;margin:0 auto;max-width:1120px;text-align:center;display:flex;flex-direction:row;overflow:auto;}
  .opinion-card{background:#fff;border-radius:10px;padding:12px;text-align:left;box-shadow:0 10px 10px rgba(0,0,0,.1);min-width:200px;scroll-snap-align:start;}
  .card{max-width:300px;width:100%;flex-shrink:0;margin:10px;}
  .opinion-initials{width:60px;height:60px;border-radius:50%;background:#009688;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 8px;font-size:24px;text-transform:uppercase;}
  .opinion-meta{text-align:center;margin:6px 0;font-size:12pt;color:#FC824E;font-family:"Gotham-Rounded-Medium","Gotham Rounded",Arial,sans-serif;}
  .opinion{margin-top:6px;text-align:left;font-size:11pt;font-family:Gotham-Light;color:#4b4b4b;}
  .opinion-author{text-align:right;font-family:"Gotham-Rounded-Light-Italic","Gotham Rounded",Arial,sans-serif;line-height:16px;color:#4b4b4b;font-size:10pt;}
  .opiniones-counter{position:relative;z-index:1;color:#fff;margin-top:10px;font-size:11pt;}

  .opiniones-section{padding:30px 0;}
  .opiniones-section h2{color:#133D68;font-size:16pt;margin-bottom:20px;}
  .reconocimiento-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:25px;}
  .reco-card{border-radius:10px;color:#4b4b4b;padding:18px;text-align:center;background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.1);border-top:4px solid transparent;}
  .reco-card h3{margin:10px 0 8px;color:#133D68;}
  .reco-card.purple{border-top-color:#9C27B0;}
  .reco-card.violet{border-top-color:#7E57C2;}
  .reco-card.indigo{border-top-color:#3F51B5;}
  .reco-icon{font-size:22px;color:#FC824E;}

  .instituciones-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:25px 0;}
  .institucion-card{border:1px solid #EBEBEB;border-radius:10px;padding:16px;font-size:11pt;color:#78909C;background:#fff;}
  .institucion-card img{max-width:120px;height:auto;display:block;margin:0 auto 8px;}

  .clientes-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;align-items:center;font-size:11pt;color:#78909C;}
  .clientes-logos img{max-height:28px;}

  .premios-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:center;}
  .premio-card{border:1px solid #EBEBEB;border-radius:10px;padding:16px;font-size:11pt;color:#78909C;background:#fff;}
  .premio-card img{max-width:120px;display:block;margin:0 auto;}

  .opiniones-banner{position:relative;margin:25px 0;}
  .opiniones-banner img{width:100%;display:block;border-radius:10px;}
  .banner-overlay{position:absolute;left:20px;bottom:16px;color:#fff;text-align:left;}
  .banner-overlay span{font-size:11pt;background:#fff;color:#133D68;padding:4px 8px;border-radius:999px;margin-right:6px;}
  .banner-overlay strong{display:block;font-size:16pt;margin-top:6px;}

  .asociaciones-band{margin-top:25px;}
  .asociaciones-intro{position:relative;z-index:1;margin:0 auto 22px;max-width:920px;text-align:center;font-size:11pt;line-height:1.85;color:#4b4b4b;}
  .asociaciones-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
  .opiniones-page .asociaciones-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .asociacion-card{background:#fff;border-radius:10px;padding:16px;box-shadow:0 10px 10px rgba(0,0,0,.1);display:flex;flex-direction:column;align-items:center;text-align:center;}
  .asociacion-card img{width:100%;max-width:170px;max-height:90px;object-fit:contain;display:block;margin:0 auto 10px;}
  .asociacion-card p{margin:0;font-size:12px;color:#4b4b4b;}

  /* Participación en asociaciones: 3 columnas como legacy Angular (no grid por filas) */
  .opiniones-page .asociaciones-columns{
    position:relative;z-index:1;display:flex;flex-direction:row;gap:18px;align-items:stretch;width:100%;
  }
  .opiniones-page .asociaciones-columns .column{
    flex:1;min-width:0;display:flex;flex-direction:column;gap:18px;
  }
  .opiniones-page .asociaciones-columns .company-pill{
    width:100%;max-width:none;margin:0;flex-shrink:0;border-radius:10px;box-shadow:0 10px 10px rgba(0,0,0,.1);scroll-snap-align:unset;
  }
  .opiniones-page .asociaciones-columns .company-pill .company-header{
    min-height:100px;height:auto;padding:12px 10px;
  }
  .opiniones-page .asociaciones-columns .company-pill .company-header .logo-full{width:90%;max-width:200px;}
  .opiniones-page .asociaciones-columns .company-pill .company-header .logo-full img{max-height:72px;width:auto;max-width:100%;object-fit:contain;}
  .opiniones-page .asociaciones-columns .company-pill .company-testimonial{
    padding:16px 14px;font-size:12px;line-height:1.75;color:#4b4b4b;background:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;
  }
  .opiniones-page .asociaciones-columns .company-pill .company-testimonial p{margin:0;}

  .opiniones-page .asociaciones-extras{
    position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:22px;width:100%;
  }
  .opiniones-page .asociaciones-extras .company-pill{
    width:100%;max-width:none;margin:0;flex-shrink:0;border-radius:10px;box-shadow:0 10px 10px rgba(0,0,0,.1);scroll-snap-align:unset;
  }
  .opiniones-page .asociaciones-extras .company-pill .company-header{
    min-height:100px;height:auto;padding:12px 10px;
  }
  .opiniones-page .asociaciones-extras .company-pill .company-header .logo-full{width:90%;max-width:200px;margin:0 auto;}
  .opiniones-page .asociaciones-extras .company-pill .company-header .logo-full img{max-height:72px;width:auto;max-width:100%;object-fit:contain;}
  .opiniones-page .asociaciones-extras .company-pill .company-testimonial{
    padding:16px 14px;font-size:12px;line-height:1.75;color:#4b4b4b;background:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;
  }
  .opiniones-page .asociaciones-extras .company-pill .company-testimonial p{margin:0;}

  .opiniones-text{padding:10px 0 40px;}
  .text-left{text-align:left;}
  .opiniones-text h2{color:#133D68;font-size:16pt;margin-top:35px;margin-bottom:18px;text-align:center;}
  .opiniones-text p{font-size:11pt;color:#4b4b4b;line-height:1.85;margin-bottom:18px;}
  .opiniones-text li{font-size:11pt;color:#4b4b4b;line-height:1.85;}
  .opiniones-text ul{margin:10px 0 0 18px;}

  .opiniones-text .final-article-opinions.page-width{
    max-width:1200px;margin:0 auto;padding:0 40px;box-sizing:border-box;
  }
  .opiniones-text .final-article-opinions.page-width + .final-article-opinions.page-width{padding-top:8px;}
  .opiniones-text .space-title2.text-center{
    color:#133D68;font-size:16pt;margin-top:35px;margin-bottom:18px;text-align:center;font-weight:700;
  }
  .opiniones-text > .opiniones-container.text-left > .final-article-opinions.page-width:first-child .space-title2.text-center{margin-top:0;}
  .opiniones-text .space-text{
    font-size:11pt;color:#4b4b4b;line-height:1.85;margin:0 0 18px;text-align:left;
  }
  .opiniones-text .space-text strong{color:#3a3f4b;font-weight:600;}
  .opiniones-text .space-text .italic{font-style:italic;}
  .opiniones-text .opiniones-blog-list{margin:10px 0 0 18px;padding:0;list-style:disc;text-align:left;}
  .opiniones-text .opiniones-blog-list a{color:#133D68;}

  .companies-slider-2{
    display:grid;
    grid-template-columns:repeat(8, 120px);
    grid-auto-rows:120px;
    justify-content:center;
    gap:26px 30px;
    align-items:center;
    padding:10px 0 6px;
  }
  .company-logo{
    width:120px;
    height:120px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .company-logo img{width:120px;max-width:80%;height:auto;display:block;}
  .company-logo.small,
  .company-logo.medium,
  .company-logo.large{
    width:120px;
    height:120px;
  }

  @media (max-width:1200px){
    .companies-slider-2{grid-template-columns:repeat(6, 120px);}
  }
  @media (max-width:900px){
    .companies-slider-2{grid-template-columns:repeat(4, 120px);}
  }
  @media (max-width:640px){
    .companies-slider-2{grid-template-columns:repeat(2, 120px);}
  }

  @media (max-width:900px){
    .opiniones-container{padding:0 20px;}
    .opiniones-cards,.feature-container.pre-opinions,.reconocimiento-cards,.instituciones-grid,.premios-grid,.asociaciones-grid{grid-template-columns:1fr;}
    .opiniones-page .asociaciones-columns{flex-direction:column;}
    .opiniones-text .final-article-opinions.page-width{padding:0 10px;}
    .slider-btn{display:none;}
    .opinion-container{padding:20px;}
  }

/* pages/inicio.php */
:root {
    --ala-orange: #ff7a45;
    --ala-pink: #f24a82;
    --ala-purple: #6a2dbf;
    --ala-blue: #2d86ff;
    --ala-text: #1f2330;
    --ala-muted: #5d6576;
    --ala-bg: #f5f7fb;
    --ala-card: #ffffff;
    --ala-border: #e8ecf3;
  }

  .inicio-page {
    color: var(--ala-text);
    font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
  }

  .inicio-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .inicio-hero {
    text-align: center;
    padding: 0;
  }

  .inicio-hero h1 {
    font-size: clamp(22px, 3vw, 34px);
    margin: 0 0 12px;
    font-weight: 700;
    color: #133d68;
  }

  .inicio-hero p {
    color: var(--ala-muted);
    max-width: 880px;
    margin: 0 auto;
    font-size: 15px;
  }

  .inicio-goals {
    position: relative;
    margin: 24px auto 40px;
    padding: 48px 0;
  }

  .inicio-goals::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, var(--ala-orange), var(--ala-pink), var(--ala-purple));
    border-radius: 24px;
    transform: skewY(-3deg);
    z-index: -1;
  }

  .inicio-goals h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 24px;
    font-size: clamp(18px, 2.5vw, 26px);
  }

  .goal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .goal-card {
    background: var(--ala-card);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 24px rgba(20, 20, 20, 0.12);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
  }

  .goal-card img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 10px;
  }

  .goal-card h3 {
    margin: 0;
    color: var(--ala-pink);
    font-size: 15px;
  }

  .goal-card p {
    margin: 0;
    font-size: 13px;
    color: var(--ala-muted);
  }

  .goal-card a {
    margin-top: auto;
    display: inline-block;
    text-align: center;
    padding: 8px 14px;
    background: linear-gradient(90deg, var(--ala-orange), var(--ala-pink));
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
  }

  .inicio-recommended {
    text-align: center;
    padding: 32px 0;
  }

  .inicio-recommended h2 {
    font-size: clamp(18px, 2.5vw, 26px);
    margin-bottom: 12px;
  }

  .inicio-recommended p {
    color: var(--ala-muted);
    max-width: 880px;
    margin: 0 auto 18px;
    font-size: 14px;
  }

  .video-frame {
    margin: 16px auto 24px;
    width: min(520px, 100%);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }

  .video-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
  }

  .video-frame button {
    position: absolute;
    border: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ff2d55;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
  }

  .stats-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .stat-card {
    background: var(--ala-card);
    border-radius: 12px;
    padding: 14px 10px;
    border: 1px solid var(--ala-border);
    text-align: center;
  }

  .stat-card strong {
    display: block;
    font-size: 18px;
    color: var(--ala-pink);
  }

  .inicio-cta {
    text-align: center;
    margin: 24px 0 40px;
  }

  .inicio-cta a,
  .inicio-cta button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ala-orange), var(--ala-pink));
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border: none;
    font-family: inherit;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     MODAL: Reservar prueba de nivel / Asesoramiento
     Replica Angular online-lt-reservation component
     ═══════════════════════════════════════════════════════════════════════ */

  .lt-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    overflow-y: auto;
  }

  .lt-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 15px 50px rgba(0,0,0,0.3);
    position: relative;
    margin-top: 30px;
    animation: ltModalFadeIn 0.3s ease;
  }

  @keyframes ltModalFadeIn {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .lt-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    border-radius: 12px 12px 0 0;
  }

  .lt-modal-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #2196f3;
  }
  .lt-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .lt-modal-title {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #133d71;
  }

  .lt-modal-close {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fc4e4e;
    font-size: 18px;
    transition: background 0.2s;
  }
  .lt-modal-close:hover {
    background: #fee;
  }

  /* Step progress bar */
  .lt-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 12px 8px;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .lt-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
  }

  .lt-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #999;
    background: #fff;
    transition: all 0.3s;
  }

  .lt-step.active .lt-step-circle {
    border-color: #2196f3;
    background: #2196f3;
    color: #fff;
  }
  .lt-step.completed .lt-step-circle {
    border-color: #4caf50;
    background: #4caf50;
    color: #fff;
  }

  .lt-step-label {
    font-size: 10px;
    color: #999;
    text-align: center;
    white-space: nowrap;
  }
  .lt-step.active .lt-step-label {
    color: #2196f3;
    font-weight: 600;
  }
  .lt-step.completed .lt-step-label {
    color: #4caf50;
  }

  .lt-step-line {
    flex: 1;
    height: 2px;
    background: #ddd;
    min-width: 20px;
    margin: 0 2px;
    align-self: center;
    margin-bottom: 18px;
  }

  .lt-slider {
    padding: 8px 20px 20px;
  }

  .lt-slide {
    display: none;
  }
  .lt-slide:first-child {
    display: block;
  }

  .lt-field-group {
    margin-bottom: 16px;
  }

  .lt-field-label {
    font-size: 13px;
    font-weight: 600;
    color: #133d71;
    margin-bottom: 8px;
  }

  .lt-info-text {
    font-size: 13px;
    color: #555;
    margin-bottom: 16px;
    padding: 10px;
    background: #f0f7ff;
    border-radius: 8px;
    border-left: 3px solid #2196f3;
  }

  .lt-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .lt-radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    font-size: 13px;
    color: #333;
    transition: all 0.2s;
    user-select: none;
  }
  .lt-radio-item:hover {
    border-color: #2196f3;
  }
  .lt-radio-item input[type="radio"] {
    width: auto;
    height: auto;
    margin: 0;
  }
  .lt-radio-item:has(input:checked) {
    background: #2196f3;
    color: #fff;
    border-color: #2196f3;
  }

  .lt-select {
    width: 100%;
    height: 42px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 13px;
    color: #555;
    font-family: inherit;
    background: #fff;
  }
  .lt-select:focus {
    border-color: #2196f3;
    outline: none;
  }

  .lt-textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    color: #333;
    box-sizing: border-box;
  }
  .lt-textarea:focus {
    border-color: #2196f3;
    outline: none;
  }

  .lt-slide-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
  }

  .lt-btn {
    padding: 10px 24px;
    border-radius: 999px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .lt-btn-primary {
    background: #2196f3;
    color: #fff;
  }
  .lt-btn-primary:hover {
    background: #1976d2;
  }
  .lt-btn-primary:disabled {
    background: #90caf9;
    cursor: not-allowed;
  }

  .lt-btn-back {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #ddd;
  }
  .lt-btn-back:hover {
    background: #e0e0e0;
  }

  .lt-calendar-container {
    max-width: 100%;
    margin: 0 auto;
  }

  .lt-cal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 12px;
    color: #133d71;
    font-weight: 600;
  }

  .lt-cal-nav {
    margin: 0 16px;
    font-size: 1.4em;
    cursor: pointer;
    color: #133d71;
    user-select: none;
  }
  .lt-cal-nav:hover {
    color: #2196f3;
  }

  .lt-cal-month-label {
    font-size: 15px;
    min-width: 160px;
    text-align: center;
  }

  .lt-cal-weekdays {
    display: flex;
    justify-content: space-around;
    color: #133d71;
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .lt-cal-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 8px;
  }

  .lt-cal-cell {
    width: 14.28%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #133d71;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s;
    box-sizing: border-box;
  }
  .lt-cal-cell:hover:not(.lt-cal-disabled):not(.lt-cal-empty) {
    background: #e3f2fd;
  }
  .lt-cal-cell.lt-cal-disabled {
    color: #ccc;
    cursor: default;
    pointer-events: none;
  }
  .lt-cal-cell.lt-cal-today {
    font-weight: 700;
    color: #2196f3;
  }
  .lt-cal-cell.lt-cal-selected {
    background: #2196f3;
    color: #fff;
    box-shadow: 0 3px 10px rgba(33,150,243,0.3);
  }
  .lt-cal-cell.lt-cal-empty {
    cursor: default;
  }

  .lt-cal-only-buttons {
    margin-top: 10px;
  }

  .lt-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #555;
    font-size: 13px;
  }

  .lt-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #2196f3;
    border-radius: 50%;
    animation: ltSpin 0.8s linear infinite;
    margin-bottom: 12px;
  }

  @keyframes ltSpin {
    to { transform: rotate(360deg); }
  }

  .lt-timeslots-container {
    text-align: center;
  }

  .lt-selected-date {
    font-size: 14px;
    font-weight: 600;
    color: #133d71;
    margin-bottom: 12px;
  }

  .lt-daytime-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .lt-daytime-btn {
    padding: 6px 18px;
    border-radius: 999px;
    border: 1px solid #2196f3;
    background: #fff;
    color: #2196f3;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }
  .lt-daytime-btn.active {
    background: #2196f3;
    color: #fff;
  }
  .lt-daytime-btn:hover:not(.active) {
    background: #e3f2fd;
  }

  .lt-schedules-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 8px;
  }

  .lt-time-btn {
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: #fff;
    color: #133d71;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    min-width: 70px;
  }
  .lt-time-btn:hover:not(.lt-time-disabled) {
    background: #51adf6;
    color: #fff;
    box-shadow: 0 4px 12px rgba(33,150,243,0.25);
  }
  .lt-time-btn.selected {
    background: #51adf6;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(33,150,243,0.3);
  }
  .lt-time-btn.lt-time-disabled {
    color: #ccc;
    cursor: not-allowed;
    opacity: 0.5;
  }

  .lt-selected-time {
    margin-top: 8px;
    font-size: 13px;
    color: #2196f3;
    font-weight: 600;
  }

  .lt-no-availability {
    font-size: 13px;
    color: #999;
    padding: 16px;
  }

  .lt-error-msg {
    color: #fc4e4e;
    font-size: 13px;
    margin-top: 8px;
  }

  .lt-slide-subtitle {
    text-align: center;
    color: #133d71;
    font-size: 15px;
    margin-bottom: 16px;
  }

  .lt-form-grid {
    display: grid;
    gap: 12px;
  }
  @media (min-width: 480px) {
    .lt-form-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .lt-form-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #133d71;
    margin-bottom: 4px;
  }
  .lt-form-field input {
    width: 100%;
    height: 38px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #133d71;
    box-sizing: border-box;
  }
  .lt-form-field input:focus {
    border-color: #2196f3;
    outline: none;
  }

  .lt-summary {
    margin-top: 16px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
  }
  .lt-summary-row {
    font-size: 13px;
    color: #333;
    padding: 3px 0;
  }

  .lt-success-container {
    text-align: center;
    padding: 20px 0;
  }
  .lt-success-container h3 {
    color: #133d71;
    margin: 12px 0 8px;
  }
  .lt-success-container p {
    font-size: 13px;
    color: #555;
  }
  .lt-success-details {
    margin: 16px 0;
    padding: 12px;
    background: #f0f7ff;
    border-radius: 8px;
    font-size: 13px;
    color: #133d71;
    line-height: 1.6;
  }

  .lt-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #81c784;
    background: #fff;
    position: relative;
    overflow: hidden;
    margin: 0 auto 12px;
    animation: ltShowSuccess 0.3s ease;
  }
  .lt-success-icon__tip,
  .lt-success-icon__long {
    display: block;
    position: absolute;
    height: 4px;
    background: #81c784;
    border-radius: 10px;
  }
  .lt-success-icon__tip {
    width: 24px;
    top: 43px;
    left: 14px;
    transform: rotate(45deg);
    animation: ltTipIn 0.3s ease forwards;
    animation-delay: 0.18s;
    visibility: hidden;
  }
  .lt-success-icon__long {
    width: 40px;
    transform: rotate(-45deg);
    top: 37px;
    left: 28px;
    animation: ltLongIn 0.15s ease forwards;
    animation-delay: 0.44s;
    visibility: hidden;
  }

  @keyframes ltShowSuccess {
    from { transform: scale(0); }
    to   { transform: scale(1); }
  }
  @keyframes ltTipIn {
    from { width: 0; top: 0; left: -16px; visibility: visible; }
    to   { width: 24px; top: 43px; left: 14px; visibility: visible; }
  }
  @keyframes ltLongIn {
    from { width: 0; top: 51px; left: 32px; visibility: visible; }
    to   { width: 40px; top: 37px; left: 28px; visibility: visible; }
  }

  .lt-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .lt-toast {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transform: translateX(120%);
    transition: transform 0.3s ease;
  }
  .lt-toast.lt-toast-show {
    transform: translateX(0);
  }
  .lt-toast-success {
    background: #4caf50;
  }
  .lt-toast-error {
    background: #fc4e4e;
  }
  .lt-toast i:before {
    color: inherit;
  }

  /* ═══ END MODAL prueba de nivel ═══ */

  .faq {
    background: #fff;
    padding: 28px 0 8px;
  }

  .faq h2 {
    text-align: center;
    margin-bottom: 16px;
  }

  .faq-item {
    margin-bottom: 18px;
    border-bottom: 1px solid var(--ala-border);
    padding-bottom: 14px;
  }

  .faq-item h3 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--ala-text);
  }

  .faq-item p,
  .faq-item li {
    font-size: 13px;
    color: var(--ala-muted);
  }

  .lista_cursosMadrid {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 6px !important;
    display: block !important;
    list-style: none !important;
  }
  .lista_cursosMadrid::before {
    content: "" !important;
    display: inline-block !important;
    position: absolute !important;
    left: 2px !important;
    top: 0.5em !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    border: 1.5px solid currentColor !important;
  }

  .contact-box {
    text-align: center;
    margin: 26px 0;
  }

  .contact-box a {
    display: inline-block;
    margin: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
  }

  .contact-box .btn-green {
    background: #35c759;
    color: #fff;
  }

  .contact-box .btn-blue {
    background: #2d86ff;
    color: #fff;
  }

  .inicio-page .blog-strip {
    background: var(--ala-bg);
    padding: 28px 0 50px;
  }

  .inicio-page .blog-strip h2 {
    text-align: center;
    font-size: clamp(18px, 2.5vw, 24px);
    margin-bottom: 14px;
  }

  .inicio-page .blog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .inicio-page .blog-card {
    background: var(--ala-card);
    border-radius: 14px;
    padding: 12px;
    border: 1px solid var(--ala-border);
    text-align: center;
  }

  .inicio-page .blog-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
  }

  .inicio-page .blog-card h4 {
    margin: 10px 0 8px;
    font-size: 12px;
    color: var(--ala-text);
  }

  .inicio-page .blog-card a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffcc00;
    color: #1f2330;
    font-weight: 600;
    text-decoration: none;
    font-size: 12px;
  }

  @media (max-width: 980px) {
    .goal-grid,
    .inicio-page .blog-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 640px) {
    .goal-grid,
    .inicio-page .blog-grid {
      grid-template-columns: 1fr;
    }

    .inicio-goals {
      padding: 36px 0;
    }
  }

/* pages/cursos-ingles-online.php */
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

    .courses{
      background:#ffffff;
      padding:20px 0 60px;
    }

    .courses .page-width{
      max-width:1200px;
      margin:0 auto;
      padding:0 20px;
    }

    .courses .description{
      margin:30px auto;
    }

    .courses .space-text{
      margin:12px 0;
      line-height:1.7;
    }

    .courses .space-title2{
      margin:0 0 12px;
      font-size:28px;
      line-height:1.2;
    }

    .courses .text-center{text-align:center;}
    .courses .bold{font-weight:700;}
    .courses .text-small{font-size:0.875rem;color:#6b7280;}

    .courses-container{
      margin:10px auto 40px;
    }

    .groupFilters{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:16px;
      margin:20px auto 35px;
    }

    .groupFilters .groupFilter{
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px 16px;
      min-width:190px;
      border-radius:14px;
      border:1px solid #e5e7eb;
      background:#fff;
      box-shadow:0 10px 20px rgba(0,0,0,0.08);
      cursor:pointer;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .groupFilters .groupFilter:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 26px rgba(0,0,0,0.12);
    }

    .groupFilters .filterIcon{
      width:44px;
      height:44px;
      border-radius:50%;
      background:#f3f4f6;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#6b7280;
    }

    .groupFilters .circleGroup{
      display:grid;
      gap:3px;
      grid-template-columns:repeat(2,10px);
      align-content:center;
      justify-items:center;
    }

    .groupFilters .circle{
      width:10px;
      height:10px;
      border-radius:50%;
      background:#9ca3af;
    }

    .groupFilters .circle.small{
      width:6px;
      height:6px;
    }

    .groupFilters .groupFilter.active{
      border-color:#22c55e;
      box-shadow:0 12px 26px rgba(34,197,94,0.2);
      transform:translateY(-2px);
    }
    .groupFilters .groupFilter.active .filterIcon{
      background:rgba(34,197,94,0.12);
      color:#22c55e;
    }
    .groupFilters .groupFilter.active .circle{
      background:#22c55e;
    }
    .groupFilters .groupFilter.active .filterIcon i{
      color:#22c55e;
    }
    .groupFilters .groupFilter.active .filterName{
      color:#22c55e;
    }
    .groupFilters .groupFilter.active.online .circle{
      background:transparent;
      border:1px solid #22c55e;
    }

    .courses-list .course{
      transition:opacity .3s ease, transform .2s ease, box-shadow .2s ease;
    }
    .courses-list .course:not(.selected){
      opacity:0.3;
      pointer-events:none;
    }
    .courses-list .course:not(.selected) .course-image{
      filter:grayscale(1);
    }
    .courses-list .course:not(.selected) .course-hours.btn{
      background:#d1d5db !important;
    }

    .mastercourse-final-container{
      margin:40px auto;
      transition:opacity .4s ease;
    }

    .mastercourse-final-container .visible-container{
      background:#fff;
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 18px 40px rgba(0,0,0,0.12);
    }

    .final-mastercourse.top img{
      width:100%;
      height:240px;
      object-fit:cover;
      display:block;
    }

    .final-mastercourse.bottom{
      padding:26px 28px 32px;
    }

    .final-mastercourse-content{
      max-width:980px;
      margin:0 auto;
    }

    .final-mastercourses-list{
      margin-top:20px;
    }

    .courses-list{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      justify-content:center;
    }

    .courses-list .course{
      width:220px;
      border-radius:14px;
      background:#f9fafb;
      border:2px solid transparent;
      box-shadow:0 10px 18px rgba(0,0,0,0.08);
      transition:transform .2s ease, box-shadow .2s ease;
    }

    .courses-list .course:hover{
      transform:translateY(-3px);
      box-shadow:0 14px 24px rgba(0,0,0,0.12);
    }

    .courses-list .course a{
      display:block;
      color:inherit;
      text-decoration:none;
    }

    .course-image{
      padding:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:12px 12px 0 0;
      background:rgba(59,130,246,0.1);
    }

    .course-image img{
      max-width:100%;
      height:auto;
      display:block;
    }

    .course-text{
      padding:12px 14px 16px;
      text-align:center;
    }

    .course-title{
      margin:6px 0 1px;
      font-size:0.95rem;
      min-height:42px;
      line-height:1.3;
    }

    .course-hours.btn{
      display:inline-block;
      margin:0;
      padding:6px 12px;
      border-radius:999px;
      color:#fff;
      font-size:0.85rem;
      background:#3b82f6;
    }

    .course-price{
      margin-top:8px;
      color:#6b7280;
      font-size:0.85rem;
    }

    .courses .yellow{--course-color:#f6c42f;}
    .courses .green{--course-color:#22c55e;}
    .courses .light-blue{--course-color:#38bdf8;}
    .courses .teal{--course-color:#14b8a6;}
    .courses .red{--course-color:#ef4444;}
    .courses .deep-orange{--course-color:#f97316;}
    .courses .purple{--course-color:#8b5cf6;}
    .courses .deep-purple{--course-color:#6d28d9;}
    .courses .indigo{--course-color:#4f46e5;}
    .courses .blue{--course-color:#2563eb;}
    .courses .cyan{--course-color:#06b6d4;}
    .courses .light-green{--course-color:#84cc16;}
    .courses .amber{--course-color:#f59e0b;}
    .courses .orange{--course-color:#fb923c;}
    .courses .brown{--course-color:#a16207;}

    .courses .course.yellow,
    .courses .course.green,
    .courses .course.light-blue,
    .courses .course.teal,
    .courses .course.red,
    .courses .course.deep-orange,
    .courses .course.purple,
    .courses .course.deep-purple,
    .courses .course.indigo,
    .courses .course.blue,
    .courses .course.cyan,
    .courses .course.light-green,
    .courses .course.amber,
    .courses .course.orange,
    .courses .course.brown{
      border-color:var(--course-color);
    }

    .courses .course-image.yellow,
    .courses .course-image.green,
    .courses .course-image.light-blue,
    .courses .course-image.teal,
    .courses .course-image.red,
    .courses .course-image.deep-orange,
    .courses .course-image.purple,
    .courses .course-image.deep-purple,
    .courses .course-image.indigo,
    .courses .course-image.blue,
    .courses .course-image.cyan,
    .courses .course-image.light-green,
    .courses .course-image.amber,
    .courses .course-image.orange,
    .courses .course-image.brown{
      background:color-mix(in srgb, var(--course-color) 18%, #fff 82%);
    }

    .courses .course-hours.btn.yellow,
    .courses .course-hours.btn.green,
    .courses .course-hours.btn.light-blue,
    .courses .course-hours.btn.teal,
    .courses .course-hours.btn.red,
    .courses .course-hours.btn.deep-orange,
    .courses .course-hours.btn.purple,
    .courses .course-hours.btn.deep-purple,
    .courses .course-hours.btn.indigo,
    .courses .course-hours.btn.blue,
    .courses .course-hours.btn.cyan,
    .courses .course-hours.btn.light-green,
    .courses .course-hours.btn.amber,
    .courses .course-hours.btn.orange,
    .courses .course-hours.btn.brown{
      background:var(--course-color);
    }

    .questions{
      margin:50px auto 20px;
      background:#fff;
      border-radius:24px;
      box-shadow:0 18px 40px rgba(0,0,0,0.12);
      padding:30px 32px;
    }

    .question{
      margin:0 0 24px;
    }

    .question:last-child{
      margin-bottom:0;
    }

    .questions .space-text p{
      margin:6px 0;
    }

    @media (max-width:900px){
      .final-mastercourse.top img{height:200px;}
      .courses-list .course{width:200px;}
    }

    @media (max-width:720px){
      .final-mastercourse.bottom{padding:22px;}
      .courses-list .course{width:100%;}
      .groupFilters .groupFilter{min-width:160px;flex:1 1 160px;}
    }

    /* Menu activo */
    .main-navigation .main-nav ul li.current-menu-item > a{
      color:#f07759 !important;
      font-weight:700;
      border-bottom:none;
      background:transparent;
      
      padding:6px 12px;
    }

/* pages/curso-detalle.php */
.course-detail {
  font-family: "Gotham Rounded", "Gotham-Light", "Helvetica Neue", Arial, sans-serif;
  color: #4b4b4b;
  line-height: 1.6;
  background: #fff;
}

/* ===== HERO BANNER (título superior) ===== */
.cd-hero-banner {
  text-align: center;
  padding: 30px 20px 20px;
  max-width: 900px;
  margin: 0 auto;
}

.cd-hero-title {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 700;
  color: var(--cd-hero-title, var(--cd-accent, #FC824E));
  margin: 0 0 12px;
}

.cd-hero-subtitle {
  font-size: 13pt;
  color: #4b4b4b;
  margin: 0 0 10px;
}

.cd-hero-short {
  font-size: 11pt;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
}

/* ===== HERO IMAGE ===== */
.cd-hero-image {
  max-width: 70%;
  margin: 0 auto 20px;
  padding: 0 20px;
}

.cd-hero-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.cd-hero-image.is-flat img {
  border-radius: 0;
}

/* ===== INTRO TEXT ===== */
.cd-intro {
  padding: 20px 20px 30px;
}

.cd-intro-text {
  font-size: 11pt;
  color: #4b4b4b;
  line-height: 1.7;
  max-width: 900px;
  margin: 0 auto;
}

.cd-intro-text p {
  margin-bottom: 14pt;
}

.cd-intro-text img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
}

.cd-intro-text a {
  color: var(--cd-accent, #FC824E);
  text-decoration: none;
}

.cd-intro-text a:hover {
  text-decoration: underline;
}

.cd-intro-text h2,
.cd-intro-text h3,
.cd-intro-text h4,
.cd-intro-text h5 {
  color: #133D68;
  margin-top: 24px;
  margin-bottom: 12px;
  font-family: "Gotham Rounded", "Gotham-Rounded-Bold", sans-serif;
}

.cd-intro-text h2 { font-size: 18pt; }
.cd-intro-text h3 { font-size: 16pt; }
.cd-intro-text h4 { font-size: 14pt; }
.cd-intro-text h5 { font-size: 12pt; font-weight: 700; }

.cd-intro-text ul {
  margin: 14px 0 14px 24px;
  padding: 0;
}

.cd-intro-text li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.cd-content-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 24px auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ===== COURSE SUBTITLE (H2 sobre la banda) ===== */
.cd-course-subtitle-section {
  text-align: center;
  padding: 25px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.cd-course-subtitle {
  font-size: 16pt;
  color: var(--cd-accent, #133D68);
  font-family: "Gotham Rounded", "Gotham-Rounded-Bold", sans-serif;
  font-weight: 700;
  margin: 0;
}

@media (max-width: 699px) {
  .cd-course-subtitle-section {
    text-align: left;
  }
}

/* ===== COURSE SELECTOR (above skew band, like Angular) ===== */
.cd-course-selector {
  padding: 10px 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.cd-course-count {
  font-size: 11pt;
  color: #4b4b4b;
  margin: 0 0 12px;
  line-height: 1.6;
}

/* ===== SKEW BAND (banda inclinada con color dinámico) ===== */
.cd-skew-band {
  position: relative;
  padding: 60px 0 40px;
  margin: 15px 0 15px;
}

.cd-skew-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 250px;
  background: linear-gradient(90deg, var(--cd-gradient, #FDD835), var(--cd-accent, #FFC107));
  transform: skewY(-10deg);
  z-index: 0;
}

@media (max-width: 699px) {
  .cd-skew-bg {
    height: 200px;
  }
}

.cd-band-content {
  position: relative;
  z-index: 1;
}

/* ===== COURSE BUTTONS (pill tabs like Angular .scrollable + .pill) ===== */
.cd-course-buttons-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 0 0 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}

.cd-course-buttons-wrap::-webkit-scrollbar {
  height: 0; /* hide scrollbar like Angular */
}

.cd-course-buttons-wrap::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
}

.cd-course-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: -10px;
}

.cd-course-buttons > .cd-course-btn {
  scroll-snap-align: center;
}

/* Each pill button uses --pill-accent / --pill-gradient from its own style="" attr (per-course color) */
.cd-course-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--pill-accent, var(--cd-accent, #FC824E));
  border-radius: 999px;
  padding: 10px 17px;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  white-space: nowrap;
  font-family: inherit;
  color: var(--pill-accent, var(--cd-accent, #FC824E));
  font-size: 11pt;
  text-align: center;
}

.cd-course-btn:hover,
.cd-course-btn:focus {
  box-shadow: 0 10px 15px rgba(0,0,0,0.12);
}

.cd-course-btn:active {
  box-shadow: 0 0 0 transparent;
}

.cd-course-btn.is-active {
  background: linear-gradient(90deg, var(--pill-gradient, var(--cd-gradient, #FFC107)), var(--pill-accent, var(--cd-accent, #FC824E)));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 10px rgba(0,0,0,0.15);
}
.cd-course-btn.is-active .cd-btn-tag {
  background: #fff;
  color: var(--pill-accent, var(--cd-accent, #FC824E));
}
.cd-course-btn.is-active .cd-btn-title {
  color: #fff;
}

.cd-btn-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 100px;
  background: #fff;
  color: var(--pill-accent, var(--cd-accent, #FC824E));
  font-weight: 700;
  font-size: 10pt;
  white-space: nowrap;
}

.cd-btn-title {
  font-weight: 400;
  font-size: 11pt;
  color: inherit;
}

/* ===== SLIDE NAVIGATION (Angular course-slide style) ===== */
.cd-slide-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 0;
}

.cd-nav-arrow {
  background: none;
  border: none;
  cursor: pointer;
  color: #4b4b4b;
  font-size: 16pt;
  padding: 3px 6px;
  line-height: 1;
  font-family: inherit;
  transition: color 0.2s ease;
}

.cd-nav-arrow:hover {
  color: var(--cd-accent, #FC824E);
}

.cd-nav-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cd-nav-dot {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background: #c4c4c4;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 3px;
}

.cd-nav-dot:hover {
  background: #999;
}

/* Each dot uses --dot-accent from its own style="" attr (per-course color) */
.cd-nav-dot.is-active {
  width: 18px;
  height: 18px;
  background: var(--dot-accent, var(--cd-accent, #FC824E));
}

/* ===== BEAUTY PILL / COURSE CARD ===== */
.cd-beauty-container {
  display: flex;
  justify-content: center;
}

.cd-beauty-pill {
  flex-shrink: 0;
  width: 40vw;
  padding: 150px 30vw 20px 30vw;
  box-sizing: content-box;
}

@media (max-width: 999px) and (min-width: 700px) {
  .cd-beauty-pill {
    width: 40vw;
    padding: 80px 30vw 20px 30vw;
  }
}

@media (max-width: 699px) {
  .cd-beauty-pill {
    width: 90vw;
    padding: 80px 5vw 20px 5vw;
  }
}

.cd-beauty-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 10px rgba(0,0,0,0.1);
  text-align: center;
  overflow: visible;
}

/* Header dividido (blanco + gris oscuro) */
.cd-beauty-header {
  display: flex;
  position: relative;
  height: 60px;
}

.cd-header-white {
  flex-basis: 50%;
  background: #fff;
  border-top-left-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cd-modalidad-text,
.cd-header-tag-text {
  font-size: 12px;
  font-weight: 600;
  color: #4b4b4b;
}

.cd-header-dark {
  flex-basis: 50%;
  background: #4b4b4b;
  border-top-right-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 40px;
  box-sizing: border-box;
  font-family: "Gotham Rounded", "Gotham-Rounded-Medium", sans-serif;
}

.cd-tag-text {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

/* Avatar circular centrado */
.cd-beauty-image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 120px;
  height: 120px;
  background: var(--cd-accent, #009688);
}

@media (min-width: 1000px) {
  .cd-beauty-image {
    width: 200px;
    height: 200px;
  }
}

.cd-beauty-image img {
  height: 100%;
  width: auto;
  object-fit: cover;
  border-radius: 50%;
  animation: cdFadeIn 200ms ease-in-out 0.5s both;
}

@keyframes cdFadeIn { from { opacity: 0; } to { opacity: 1; } }

.cd-beauty-image i {
  color: #fff;
  font-size: 40px;
}

/* Content */
.cd-beauty-content {
  padding: 20px;
  cursor: pointer;
  color: #949494;
  text-align: center;
}

.cd-course-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Gotham Rounded", "Gotham-Rounded-Medium", sans-serif;
  font-size: 16pt;
  font-weight: 700;
  color: var(--cd-accent, #FC824E);
  padding: 5px;
  box-sizing: border-box;
  margin: 0 0 12px;
}

.cd-course-hours {
  margin-bottom: 16px;
}

.cd-hours-badge {
  display: inline-block;
  background: #fff;
  border-radius: 100px;
  padding: 4px 12px;
  color: var(--cd-accent, gray);
  font-size: 12px;
  font-weight: 600;
}

/* ===== DETAIL ITEMS (Angular description-block style) ===== */
.cd-course-details {
  text-align: left;
  margin-bottom: 20px;
  padding: 0 20px;
}

.cd-detail-item {
  display: flex;
  align-items: flex-start;
  max-width: 700px;
  margin: 8px 0;
  margin-left: 0;
  margin-right: auto;
  padding: 8px 0;
}

.cd-detail-icon {
  width: 10px;
  height: 10px;
  min-width: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cd-accent, #FC824E);
  border-radius: 999px;
  margin-top: 4px;
  flex-shrink: 0;
  align-self: flex-start;
}

.cd-detail-icon i {
  display: none;
}

.cd-detail-label {
  width: 160px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 2px 10px 0;
  text-align: right;
  font-family: "Gotham Rounded", "Gotham-Rounded-Bold", sans-serif;
  font-weight: 700;
  font-size: 13pt;
  color: var(--cd-accent, #FC824E);
  align-self: flex-start;
}

.cd-detail-label-top {
  font-size: 10pt;
  font-weight: 500;
  line-height: 1.05;
}

.cd-detail-label-main {
  font-size: 13pt;
  font-weight: 700;
  line-height: 1.05;
}

/* Fila Descripción (legacy: etiqueta en tono amarillo/dorado) */
.cd-detail-item--description .cd-detail-label-main {
  color: #e6b800;
}
.cd-detail-item--description .cd-detail-icon {
  background: #f4c63d;
}
.cd-detail-label:empty {
  display: none;
}
.cd-detail-no-label .cd-detail-value {
  border-left: none;
  padding-left: 0;
}

.cd-detail-value {
  border-left: 1px solid #949494;
  padding: 10px 10px;
  color: #414141;
  font-size: 11pt;
  line-height: 1.6;
  flex: 1;
  word-break: break-word;
  align-self: flex-start;
  min-width: 0;
}
/* When label is empty, remove left border and let value take full width */
.cd-detail-label:empty + .cd-detail-value {
  border-left: none;
  padding-left: 0;
}
/* Links inside details */
.cd-detail-value a {
  color: var(--cd-accent, #FC824E);
  text-decoration: underline;
}

/* Detalle de curso — bloque Fechas (Strapi: Por semanas sí/no) */
.cd-dates--por-semanas .cd-dates-block {
  margin-bottom: 5px;
}
.cd-dates--por-semanas .cd-dates-first-title,
.cd-dates--por-semanas .cd-dates-first-range,
.cd-dates--por-semanas .cd-dates-upcoming-heading {
  display: block;
}
.cd-dates--por-semanas .cd-dates-upcoming-heading {
  font-weight: 700;
  margin-top: 0.35em;
}
.cd-dates--por-semanas .cd-dates-upcoming-list,
.dates-by-weeks .next-begginings {
  margin: 0.35em 0 0 15px;
  padding-left: 1.1em;
  list-style: disc;
}
.cd-dates--por-semanas .cd-dates-upcoming-list li {
  margin-bottom: 0.2em;
}
.cd-dates--standard .cd-dates-entry {
  margin-bottom: 0.85em;
}
.cd-dates--standard .cd-dates-entry:last-child {
  margin-bottom: 0;
}
.cd-dates--standard .cd-dates-entry-title,
.cd-dates--standard .cd-dates-entry-date {
  display: block;
  line-height: 1.5;
}

/* Franja completa: «Solicitar Clase de Prueba» entre Extras y Reserva (legacy, centrado en la tarjeta) */
.cd-detail-span {
  width: 100%;
  max-width: 700px;
  margin-left: 0;
  margin-right: auto;
  box-sizing: border-box;
}
.cd-detail-span--solicitar-clase {
  margin-top: 4px;
  margin-bottom: 10px;
  padding: 4px 0 8px;
}
.cd-detail-span--solicitar-clase .cd-extras-solicitar-wrap {
  margin-top: 0;
  width: 100%;
}

/* LanguageCert: «Reservar Examen» tras la tarifa (legacy inscription-btn) */
.cd-detail-span--reservar-examen {
  display: flex;
  max-width: 700px;
  margin: 4px 0 12px;
  padding: 0 0 4px 190px;
}
.cd-detail-reservar-examen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 240px);
  margin: 0;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(252, 78, 78, 0.28);
}
.cd-detail-reservar-examen-btn:hover {
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(252, 78, 78, 0.34);
}

/* Reserva e inscripción: misma rejilla que el resto (icono | etiqueta | valor con borde) */
.cd-detail-reserva {
  align-items: flex-start;
}
.cd-detail-reserva .cd-detail-label {
  padding-top: 4px;
}
.cd-detail-reserva .cd-detail-value--reserva {
  padding-top: 4px;
}
.cd-detail-reserva .cd-detail-label-main {
  line-height: 1.12;
}
.cd-detail-value--reserva {
  padding-top: 6px;
  padding-bottom: 6px;
}
.cd-detail-value--reserva a.cd-reserva-pill,
.cd-detail-value--reserva button.cd-reserva-pill {
  color: #fff;
  text-decoration: none;
}
.cd-detail-value--reserva a.cd-reserva-pill:hover,
.cd-detail-value--reserva button.cd-reserva-pill:hover {
  text-decoration: none;
}

/* Legacy: botón «Solicitar / Clase de Prueba» dentro de Añade tus Extras */
.cd-extras-solicitar-wrap {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  width: 100%;
}
.cd-extras-solicitar-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: inherit;
  border: none;
  cursor: pointer;
  color: #fff;
  font-weight: 800;
  text-align: center;
  line-height: 1.05;
  background: linear-gradient(135deg, #ff5a2c 0%, #fc824e 45%, #e53935 100%);
  box-shadow: 0 5px 16px rgba(229, 57, 53, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cd-extras-solicitar-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(229, 57, 53, 0.42);
  color: #fff;
}
.cd-extras-solicitar-spark {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}
.cd-extras-solicitar-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cd-extras-solicitar-l1 {
  font-size: 15px;
  letter-spacing: 0.02em;
}
.cd-extras-solicitar-l2 {
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* Modal «Reservar clase de prueba» (demo class) */
.dc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100150;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Modal «Reservar clase de prueba» — réplica Angular legacy (clases del HTML Angular) */
.dc-legacy-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100150;
  display: none;
  align-items: center;
  justify-content: center;
  /* Legacy: casi a pantalla completa (mínimo margen) */
  padding: 12px 16px;
  box-sizing: border-box;
  overflow: auto; /* si el viewport es muy bajo, que no se corte */
  align-items: flex-start;
}

.dc-legacy-modal.modal-buy-course.modal {
  width: min(980px, 96vw);
  /* Nunca puede salirse del viewport */
  max-height: calc(100vh - 24px);
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  padding: 18px 20px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0 auto; /* centrado horizontal, arriba/abajo controlado por overlay */
}

.dc-legacy-modal .modal-close.btn.red {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #ff6b6b;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  z-index: 2;
}
.dc-legacy-modal .modal-close.btn.red i { font-size: 16px; }

/* Evita que el header “empuje” el modal fuera de pantalla */
.dc-legacy-modal .progress-bar,
.dc-legacy-modal .form-div.scrollable {
  width: 100%;
  box-sizing: border-box;
}

.dc-legacy-modal .course-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  margin-top: 6px;
  padding: 0 56px; /* deja aire para el botón cerrar */
}
.dc-legacy-modal .course-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dc-legacy-modal .course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dc-legacy-modal .modal-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: #1f76a8;
  text-align: center;
}

.dc-legacy-modal .modal-content {
  margin-top: 10px;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dc-legacy-toast {
  display: none;
  margin: 8px auto 10px;
  width: min(760px, 100%);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  box-sizing: border-box;
}
.dc-legacy-toast--success {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  color: #15803d;
}
.dc-legacy-toast--error {
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.25);
  color: #b91c1c;
}

.dc-legacy-modal .progress-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: start;
  margin: 10px 0 16px;
  position: relative;
}
.dc-legacy-modal .progress-bar::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 14px;
  height: 3px;
  background: #f4c63d;
  border-radius: 6px;
  opacity: 0.9;
}
.dc-legacy-modal .step-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.dc-legacy-modal .step {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid #f4c63d;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #c39f28;
  font-weight: 800;
}
.dc-legacy-modal .step.background-color {
  background: #f4c63d;
  color: #fff;
}
.dc-legacy-modal .step-description {
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  color: #e6b800;
}

.dc-legacy-modal .form-div.scrollable {
  /* Scroll SOLO en el cuerpo (como legacy): el modal no se corta */
  max-height: calc(100vh - 320px);
  overflow: auto;
  padding: 6px 10px 2px;
  min-height: 0;
}

/* Pantallas bajas: compacta aún más para que entre completo */
@media (max-height: 760px) {
  .dc-legacy-modal .modal-title { font-size: 22px; }
  .dc-legacy-modal .course-header { min-height: 56px; }
  .dc-legacy-modal .progress-bar { margin: 8px 0 12px; }
  .dc-legacy-modal .form-div.scrollable { max-height: calc(100vh - 280px); }
}

@media (max-height: 640px) {
  .dc-legacy-modal.modal-buy-course.modal { padding: 14px 14px 16px; }
  .dc-legacy-modal .form-div.scrollable { max-height: calc(100vh - 250px); padding: 6px 6px 2px; }
  .dc-legacy-modal .progress-bar::before { top: 13px; }
  .dc-legacy-modal .step { width: 30px; height: 30px; }
}

@media (max-height: 640px) {
  .dc-legacy-overlay { padding: 16px 12px; }
  .dc-legacy-modal.modal-buy-course.modal { max-height: calc(100vh - 32px); }
}
.dc-legacy-modal .slider-option p {
  color: #374151;
  font-size: 15px;
  line-height: 1.55;
  margin: 6px 0;
  text-align: center;
}

/* En el paso 2 (datos alumno) el texto va alineado a la izquierda (legacy) */
.dc-legacy-modal .slider-option[data-slide="1"] > p:first-child {
  text-align: left;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.dc-legacy-modal .slider-option h5 {
  margin: 10px 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: #1f2937;
  text-align: left;
}

/* Legacy: en el paso 1 los h5 van centrados (Horario...) */
.dc-legacy-modal .slider-option[data-slide="0"] h5 {
  text-align: center;
}
.dc-legacy-modal .slider-option h2 {
  margin: 6px 0;
  font-size: 22px;
  font-weight: 800;
  color: #1f76a8;
  text-align: center;
}

.dc-legacy-modal .course-select {
  height: 40px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  padding: 0 14px;
  font-size: 14px;
  background: #fff;
}
.dc-legacy-modal .course-select[style*="width: fit-content"],
.dc-legacy-modal #demo_user_level,
.dc-legacy-modal #demo_timetable {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.dc-legacy-modal #demo_timetable {
  width: min(640px, 100%);
}
.dc-legacy-modal .course-select.active-yellow:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244,198,61,.35);
  border-color: #f4c63d;
}

.dc-legacy-modal .flex {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
.dc-legacy-modal .fit-content {
  flex: 1 1 0;
  min-width: 240px;
  max-width: 100%;
}

/* Desktop: 2 columnas reales (legacy) */
@media (min-width: 740px) {
  /* Paso 2: ocupa prácticamente todo el ancho del modal */
  .dc-legacy-modal .slider-option[data-slide="1"] .flex {
    width: min(960px, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .dc-legacy-modal .slider-option[data-slide="1"] .flex {
    justify-content: space-between;
  }
  .dc-legacy-modal .slider-option[data-slide="1"] .fit-content {
    flex: 0 0 calc(50% - 7px);
    min-width: 0;
  }
}
.dc-legacy-modal input.active-yellow {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  padding: 0 14px;
  font-size: 14px;
}
.dc-legacy-modal input.active-yellow:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244,198,61,.35);
  border-color: #f4c63d;
}

.dc-legacy-modal textarea.active-yellow {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 88px;
}
.dc-legacy-modal textarea.active-yellow:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244,198,61,.35);
  border-color: #f4c63d;
}

/* Paso 3: “appointment-div” (legacy) */
.dc-legacy-modal .appointment-div {
  max-width: 760px;
  margin: 0 auto;
}
.dc-legacy-modal .select-appointment-slider.scrollable {
  overflow: hidden;
}
.dc-legacy-modal .appointment-option-slide {
  width: 100%;
}

/* Paso 3: tabs + grid de disponibilidades (legacy) */
.dc-legacy-modal .tabs-container {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  padding: 8px 0 6px;
}
.dc-legacy-modal .demo-tab {
  border: 1px solid rgba(31,118,168,.35);
  background: #fff;
  color: #1f76a8;
  font-weight: 800;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.dc-legacy-modal .demo-tab.is-active {
  background: #1f76a8;
  color: #fff;
  border-color: #1f76a8;
}
.dc-legacy-modal .appointments-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 16px;
  padding: 8px 0 0;
}
.dc-legacy-modal .demo-hour {
  border: 0;
  background: transparent;
  color: #1f76a8;
  font-weight: 700;
  padding: 6px 2px;
  cursor: pointer;
  border-bottom: 1px solid rgba(148,163,184,.6);
}
.dc-legacy-modal .demo-hour:hover {
  background: rgba(31,118,168,.06);
  border-radius: 6px;
}
.dc-legacy-modal .demo-hour.is-selected {
  background: rgba(31,118,168,.10);
  border-radius: 999px;
  border-bottom-color: transparent;
  box-shadow: 0 10px 22px rgba(31,118,168,.15);
}
.dc-legacy-modal .demo-no-hours {
  padding: 12px 0;
  color: #6b7280;
  font-weight: 600;
}

.dc-legacy-modal .date-calendar .calendar_container {
  max-width: 560px;
  margin: 0 auto;
}
.dc-legacy-modal .select_month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 800;
  color: #1f76a8;
}
.dc-legacy-modal .select_month i {
  cursor: pointer;
  font-size: 18px;
  color: #1f76a8;
}
.dc-legacy-modal ul.weekdays,
.dc-legacy-modal ul.calendar {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  text-align: center;
}
.dc-legacy-modal ul.weekdays li {
  font-weight: 800;
  color: #1f76a8;
  font-size: 13px;
  padding: 6px 0;
}
.dc-legacy-modal .dayBox {
  padding: 10px 0;
  border-radius: 14px;
  cursor: pointer;
  color: #1f76a8;
  background: transparent;
}
.dc-legacy-modal .dayBox.weekend {
  opacity: 0.35;
  cursor: default;
}
.dc-legacy-modal .dayBox.disabled {
  opacity: 0.25;
  cursor: default;
}
.dc-legacy-modal .dayBox.selected {
  background: rgba(31,118,168,.10);
  box-shadow: 0 10px 22px rgba(31,118,168,.15);
}

.dc-legacy-modal .level-test {
  text-align: center;
  margin-top: 8px;
}
.dc-legacy-modal .lt-options {
  margin: 8px 0 0;
  font-weight: 700;
  color: #1f76a8;
}
.dc-legacy-modal .lt-options input {
  margin: 0 10px 0 6px;
}

.dc-legacy-modal .buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.dc-legacy-modal .bn.light.green {
  border: 0;
  border-radius: 999px;
  padding: 11px 30px;
  font-weight: 800;
  cursor: pointer;
  /* Legacy: botón claro con texto verde */
  background: #fff;
  color: #16a34a;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.22);
  border: 2px solid rgba(22, 163, 74, 0.20);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-width: 140px;
}
.dc-legacy-modal .bn.light.green:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(22, 163, 74, 0.26);
}

@media (max-width: 640px) {
  .dc-legacy-modal.modal-buy-course.modal { padding: 16px; }
  .dc-legacy-modal .modal-title { font-size: 22px; }
  .dc-legacy-modal .course-header { padding: 0 46px; min-height: 56px; }
  .dc-legacy-modal .course-image { width: 48px; height: 48px; }
  .dc-legacy-modal .form-div.scrollable { max-height: 70vh; padding: 6px 6px 2px; }
  .dc-legacy-modal .progress-bar::before { left: 6%; right: 6%; }
}
.dc-modal {
  width: min(520px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  padding: 18px 20px 22px;
  position: relative;
}
.dc-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dc-modal-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #133d68;
}
.dc-modal-close {
  border: 0;
  background: #ff6b6b;
  color: #fff;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
}
.dc-course-line {
  margin: 8px 0 14px;
  font-size: 14px;
  color: #4a5568;
}
.dc-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  color: #9a7d15;
}
.dc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.45;
  text-align: center;
  flex: 1;
  min-width: 0;
}
.dc-step.active,
.dc-step.done {
  opacity: 1;
}
.dc-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #f4c63d;
  color: #c39f28;
  font-weight: 800;
  font-size: 13px;
}
.dc-step.active .dc-step-num,
.dc-step.done .dc-step-num {
  background: #f4c63d;
  color: #fff;
}
.dc-step-line {
  width: 16px;
  height: 2px;
  background: #e2e8f0;
  flex-shrink: 0;
}
.dc-field-group {
  margin-bottom: 14px;
}
.dc-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}
.dc-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 14px;
}
.dc-input,
.dc-select,
.dc-textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.dc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dc-form-grid label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #4a5568;
  gap: 4px;
}
.dc-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  flex-wrap: wrap;
}
.dc-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
  font-size: 15px;
}
.dc-btn-primary {
  background: #133d68;
  color: #fff;
}
.dc-btn-ghost {
  background: #e2e8f0;
  color: #334155;
}
.dc-success {
  text-align: center;
  padding: 12px 8px 8px;
}
.dc-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.dc-success h4 {
  margin: 0 0 8px;
  color: #133d68;
}
.dc-toast {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  font-size: 13px;
}
.dc-toast--err {
  background: #fee2e2;
}
@media (max-width: 520px) {
  .dc-form-grid {
    grid-template-columns: 1fr;
  }
  .dc-steps {
    font-size: 10px;
  }
}
/* Pastillas «Reserva e inscripción»: mismo ancho, alineadas a la izquierda con el texto (legacy) */
.cd-reserva-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}

/* Curso detalle: desplegable "Presencial" (legacy) */
.cd-detail-reserva .cd-reserva-presencial-info{
  margin-top: 10px;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.35;
  color: #4b4b4b;
}
.cd-detail-reserva .cd-reserva-presencial-cta{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
}
.cd-desc-lt-btn.cd-desc-lt-btn--inline{
  width: auto;
  min-width: 320px;
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
}
.cd-detail-reserva.is-presencial-open .cd-reserva-presencial-info{
  display:block;
}
.cd-reserva-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: min(220px, 100%);
  max-width: 100%;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  /* Degradado suave arriba→abajo (dorado / ámbar) */
  background: linear-gradient(
    180deg,
    #fdb913 0%,
    #f5a623 42%,
    #ff9d00 100%
  );
  box-shadow: 0 3px 10px rgba(200, 120, 20, 0.38);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  font-family: inherit;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
}
.cd-reserva-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(200, 120, 20, 0.45);
  color: #fff;
  filter: brightness(1.03);
}
.cd-reserva-pill i {
  font-size: 14px;
  opacity: 0.95;
  flex-shrink: 0;
}

@media (max-width: 699px) {
  .cd-detail-span--reservar-examen {
    padding-left: 39px;
    justify-content: flex-start;
  }
  .cd-detail-reservar-examen-btn {
    width: min(100%, 280px);
  }
  .cd-detail-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .cd-detail-label {
    width: auto;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
    padding: 5px 0 0 0;
  }
  .cd-detail-value {
    border-left: 1px solid #949494;
    padding: 0 0 5px 10px;
    margin-left: 39px;
  }
  .cd-detail-no-label .cd-detail-value {
    border-left: 1px solid #949494;
    margin-left: 39px;
    padding-left: 10px;
  }
  .cd-detail-icon {
    padding: 4px;
    float: left;
    margin-left: 0;
    margin-right: 8px;
  }
}

/* ===== PREVIEW COURSES (lista con dots, like Angular) ===== */
.cd-preview-courses {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 5px;
  margin: 0 0 20px;
}

.cd-preview-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-gap: 5px;
  height: 18px;
  cursor: pointer;
  align-items: center;
}

.cd-preview-dot-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cd-preview-dot {
  width: 10px;
  height: 10px;
  background: #c4c4c4;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  display: inline-block;
}

/* Each preview dot uses --preview-accent from its parent row's style="" (per-course color) */
.cd-preview-dot.is-active {
  width: 14px;
  height: 14px;
  background: var(--preview-accent, var(--cd-accent, #FC824E));
}

.cd-preview-title {
  display: flex;
  align-items: center;
  font-size: 11pt;
  color: #4b4b4b;
}

.cd-preview-row.is-active .cd-preview-title {
  font-weight: 700;
}

/* ===== ACTION BUTTONS ===== */
.cd-course-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.cd-course-actions--top {
  margin-top: 0;
  margin-bottom: 18px;
}

/* Legacy: CTA prueba de nivel justo debajo del bloque Descripción */
.cd-desc-lt-banner {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 700px;
  margin: 6px auto 18px;
  padding: 0 8px;
  box-sizing: border-box;
}
.cd-desc-lt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  padding: 14px 22px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  text-align: center;
  background: linear-gradient(90deg, #ff6b35 0%, #fc824e 40%, #e53935 100%);
  box-shadow: 0 5px 18px rgba(229, 57, 53, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cd-desc-lt-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(229, 57, 53, 0.42);
  color: #fff;
}
.cd-desc-lt-btn i {
  font-size: 18px;
  flex-shrink: 0;
  opacity: 0.95;
}
.cd-desc-lt-btn-text strong {
  font-weight: 800;
}

.cd-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.cd-btn-orange {
  background: linear-gradient(135deg, var(--cd-accent, #FC824E), var(--cd-gradient, #FF9800));
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.cd-btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.cd-btn-appointment {
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  max-width: 360px;
}

.cd-btn-green {
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
  color: #fff;
  box-shadow: 0 4px 14px rgba(76,175,80,0.35);
}

.cd-btn-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76,175,80,0.45);
}

/* ===== VIDEO SECTION (Angular: course_media iframe) ===== */
.cd-course-video {
  margin-top: 8px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 12px 8px;
  box-sizing: border-box;
}
.cd-course-video iframe {
  width: 100%;
  max-width: min(520px, 58vw);
  aspect-ratio: 16/9;
  border-radius: 12px;
  display: block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
@media (max-width: 699px) {
  .cd-course-video iframe {
    max-width: 100%;
  }
}

/* Custom HTML tras el vídeo (Strapi: extras + tabla horario ejemplo) */
.cd-course-custom-html {
  margin: 0 auto 2rem;
  padding: 0 0 1rem;
}
.cd-course-custom-html[hidden] {
  display: none !important;
}

.course-detail .cd-course-custom-html .description-block {
  padding: 20px 16px 0;
}
@media (max-width: 699px) {
  .course-detail .cd-course-custom-html .description-block .description-item {
    border-left: 1px solid #949494;
    padding: 5px 0 0 30px;
    margin-bottom: 12px;
  }
  .course-detail .cd-course-custom-html .description-block .description-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    margin-left: -52px;
    background: #fff;
    padding: 4px;
    border-radius: 100px;
  }
  .course-detail .cd-course-custom-html .description-block .description-icon i {
    margin: 8px auto;
  }
  .course-detail .cd-course-custom-html .description-block .description-title {
    padding: 15px 0;
    font-family: "Gotham Rounded", "Gotham-Rounded-Bold", sans-serif;
    font-weight: 700;
    font-size: 13pt;
  }
}
@media (min-width: 700px) {
  .course-detail .cd-course-custom-html .description-block .description-item {
    padding: 5px;
    display: flex;
    align-items: center;
    max-width: 700px;
    margin: 0 auto 8px;
  }
  .course-detail .cd-course-custom-html .description-block .description-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 4px 10px 4px 60px;
    border-radius: 100px;
    flex-shrink: 0;
  }
  .course-detail .cd-course-custom-html .description-block .description-title {
    width: 200px;
    padding: 10px;
    text-align: right;
    font-family: "Gotham Rounded", "Gotham-Rounded-Bold", sans-serif;
    font-weight: 700;
    font-size: 13pt;
    flex-shrink: 0;
  }
  .course-detail .cd-course-custom-html .description-block .description-content {
    border-left: 1px solid #949494;
    padding: 10px;
    flex: 1;
    min-width: 0;
    color: #414141;
    font-size: 11pt;
    line-height: 1.6;
  }
}

.course-detail .cd-course-custom-html .comparative-table {
  max-width: 100%;
  margin: 30px auto 60px;
}
.course-detail .cd-course-custom-html .comparative-table .title {
  text-align: center;
  font-family: "Gotham Rounded", "Gotham-Rounded-Bold", sans-serif;
  font-weight: 700;
  padding: 5px 15px;
  font-size: 14pt;
  color: #133d68;
}
/* Anula .scrollable global (styles.css) que fuerza scroll horizontal y puede recortar filas */
.course-detail .cd-course-custom-html .comparative-table .row.scrollable {
  margin: 15px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
}
.course-detail .cd-course-custom-html .comparative-table .row.scrollable > div {
  scroll-snap-align: unset;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .course-detail .cd-course-custom-html .comparative-table .row.scrollable {
    width: auto;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
}
.course-detail .cd-course-custom-html .comparative-table .c-header,
.course-detail .cd-course-custom-html .comparative-table .column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 5px 8px;
  flex-shrink: 0;
}
.course-detail .cd-course-custom-html .comparative-table .c-header > div,
.course-detail .cd-course-custom-html .comparative-table .column > div {
  flex: 0 0 auto;
  flex-shrink: 0;
}
@media (max-width: 899px) {
  .course-detail .cd-course-custom-html .comparative-table .c-header {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    align-self: flex-start;
  }
}
/* Cabecera de día / esquina: misma altura en todas las columnas */
.course-detail .cd-course-custom-html .comparative-table .header {
  background: #133d68;
  color: #fff;
  font-family: "Gotham Rounded", "Gotham-Rounded-Bold", sans-serif;
  font-weight: 700;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  min-width: 88px;
  min-height: 52px;
  height: 52px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Todas las celdas (horario + contenido): altura fija idéntica para alinear filas */
.course-detail .cd-course-custom-html .comparative-table .cell {
  width: 100%;
  min-width: 88px;
  padding: 8px 6px;
  margin: 5px;
  border-radius: 5px;
  text-align: center;
  height: 88px;
  min-height: 88px;
  max-height: 88px;
  box-sizing: border-box;
  font-size: 9.5pt;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.course-detail .cd-course-custom-html .comparative-table .c-header .cell {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.course-detail .cd-course-custom-html .comparative-table .cell br {
  line-height: 1;
}
.course-detail .cd-course-custom-html .comparative-table .cell p {
  margin: 0;
  line-height: 1.15;
  font-size: 9.5pt;
}
.course-detail .cd-course-custom-html .comparative-table .cell.center.blue { background-color: #bbdefb; }
.course-detail .cd-course-custom-html .comparative-table .cell.center.green { background-color: #c8e6c9; }
.course-detail .cd-course-custom-html .comparative-table .cell.center.yellow { background-color: #fff9c4; }
.course-detail .cd-course-custom-html .comparative-table .cell.center.orange { background-color: #ffe0b2; }
.course-detail .cd-course-custom-html .comparative-table .cell.center.purple { background-color: #e1bee7; }
.course-detail .cd-course-custom-html .comparative-table .cell.center.indigo { background-color: #c5cae9; }
.course-detail .cd-course-custom-html .comparative-table .cell.center.gray { background-color: #eeeeee; }
.course-detail .cd-course-custom-html .comparative-table .cell.center.light-blue { background-color: #b3e5fc; }
.course-detail .cd-course-custom-html .comparative-table .cell.center.white {
  background-color: #fff;
  border: 1px solid #e0e0e0;
}

/* ===== SLIDE ANIMATION (Angular: scroll-snap card switching) ===== */
/* Angular uses a horizontal scroll-snap container; we emulate with CSS animations. */
/* We use translateX + opacity, clipped by the pill container. */
.cd-beauty-container {
  overflow: hidden; /* clip horizontal slide animation */
}
.cd-slide-wrapper {
  position: relative;
  will-change: transform, opacity;
}

@keyframes cdSlideOutLeft {
  0%   { transform: translateX(0);    opacity: 1; }
  100% { transform: translateX(-60%); opacity: 0; }
}
@keyframes cdSlideOutRight {
  0%   { transform: translateX(0);    opacity: 1; }
  100% { transform: translateX(60%);  opacity: 0; }
}
@keyframes cdSlideInRight {
  0%   { transform: translateX(60%);  opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}
@keyframes cdSlideInLeft {
  0%   { transform: translateX(-60%); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}

.cd-slide-out-left {
  animation: cdSlideOutLeft 0.3s ease-in forwards;
}
.cd-slide-out-right {
  animation: cdSlideOutRight 0.3s ease-in forwards;
}
.cd-slide-in-right {
  animation: cdSlideInRight 0.35s ease-out forwards;
}
.cd-slide-in-left {
  animation: cdSlideInLeft 0.35s ease-out forwards;
}

/* ===== ARTICLE SECTION ===== */
.cd-article {
  padding: 30px 20px 40px;
}

.cd-article-content {
  font-size: 11pt;
  color: #4b4b4b;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto;
}

.cd-article-content h2, 
.cd-article-content h3, 
.cd-article-content h4,
.cd-article-content h5 {
  color: #133D68;
  margin-top: 25px;
  margin-bottom: 12px;
  font-family: "Gotham Rounded", "Gotham-Rounded-Bold", sans-serif;
}

.cd-article-content h2 { font-size: 16pt; }
.cd-article-content h3 { font-size: 14pt; }
.cd-article-content h4 { font-size: 12pt; }
.cd-article-content h5 { font-size: 11pt; font-weight: 700; }

.cd-article-content p {
  margin-bottom: 14pt;
}

.cd-article-content ul, 
.cd-article-content li {
  margin-left: 20px;
  margin-bottom: 8px;
}

.cd-article-content img,
.cd-article-content .cd-content-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 24px auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.cd-article-content a {
  color: var(--cd-accent, #FC824E);
  text-decoration: none;
}

.cd-article-content a:hover {
  text-decoration: underline;
}

/* ===== CONTACT CTA ===== */
.cd-contact-cta {
  background: #f5f5f5;
  padding: 40px 20px 50px;
  text-align: center;
}

.cd-opinions-advantages{
  position: relative;
  background: #ffffff;
  padding: 0 0 40px;
  overflow-x: hidden;
}

.cd-opinions-advantages-inner{
  position: relative;
  z-index: 1;
  padding-top: 28px;
}

/* Franja azul horizontal (sin skew: fondo y contenido rectos) */
.cd-opinions-skew-band{
  position: relative;
  margin: 40px 0 24px;
  padding: 48px 0 36px;
  background: linear-gradient(90deg, #4dd0e1, #03a9f4);
  overflow: hidden;
}
.cd-opinions-skew-band__inner{
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

/* ── Opinions slider (horizontal scroll) ───────────────────────────── */
.cd-opinions-block{
  position: relative;
  z-index: 2;
  padding: 0;
}

.cd-opinions-line{
  --cd-opinion-card-w: min(520px, calc(100% - 16px));
  display:flex;
  gap: 16px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Permite centrar la 1.ª y la última con scrollLeft 0 / máximo */
  padding: 52px calc((100% - var(--cd-opinion-card-w)) / 2) 8px;
  scroll-padding-inline: calc((100% - var(--cd-opinion-card-w)) / 2);
  scrollbar-width: none;
  width: 100%;
  align-items: flex-start;
}

.cd-opinions-line::-webkit-scrollbar{ display: none; }

.cd-opinion-slide{
  position: relative;
  flex: 0 0 min(520px, calc(100% - 16px));
  width: min(520px, calc(100% - 16px));
  min-width: min(520px, calc(100% - 16px));
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 10px;
  box-shadow: none;
  padding: 0;
  text-align:center;
  min-height: 150px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  overflow: visible;
  transform: scale(0.97);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cd-opinion-slide.is-active{
  background: #fff;
  box-shadow: 0 10px 10px rgba(0,0,0,0.1);
  transform: scale(1);
}

.cd-opinion-header{
  position: relative;
  background: #f5f5f5;
  border-radius: 10px 10px 0 0;
  padding: 30px 18px 12px;
}

.cd-opinion-header-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 28px;
}

.cd-opinion-body{
  padding: 14px 22px 22px;
  flex: 1;
  background: inherit;
}

@media (max-width: 768px) {
  .cd-opinion-slide{
    flex-basis: calc(100% - 16px);
    width: calc(100% - 16px);
    min-width: calc(100% - 16px);
  }
}

.cd-opinion-slide-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width: 100%;
  margin-bottom: 10px;
}

/* legacy: cabecera gris con original + estrellas */
.cd-opinions-skew-band .cd-opinion-header{
  background: #f5f5f5;
}

.cd-opinion-original-open{
  border: none;
  background: transparent;
  color: #fc824e;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cd-opinion-original-open.is-disabled{
  opacity:0.35;
  cursor: default;
}

.cd-opinion-original-icon{
  font-size: 14px;
  color: #fc824e;
}

/* style.css fuerza .far:before { color: #fff } — aquí debe ser naranja */
.cd-opinion-original-open .cd-opinion-original-icon,
.cd-opinion-original-open .far,
.cd-opinion-original-open .far::before{
  color: #fc824e;
}

.cd-opinion-header .cd-ai-badge{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -36%);
  margin-top: 0;
  width: 56px;
  height: 56px;
  background: #009688;
  z-index: 2;
}

.cd-opinion-stars{
  display:flex;
  gap: 2px;
  color: #fc824e;
  margin: 0;
}
.cd-opinion-star{
  font-size: 14px;
  line-height: 1;
}
.cd-opinion-star.is-empty{
  color: rgba(252,130,78,0.35);
}
.cd-opinion-star.is-filled{
  color: #fc824e;
}

.cd-opinion-comment{
  color:#949494;
  font-size: 14px;
  line-height: 1.5;
  max-width: 520px;
  margin: 0 auto;
}

.cd-opinion-author{
  margin-top: 10px;
  color:#4b4b4b;
  font-weight: 600;
  font-size: 13px;
}

.cd-opinions-range-wrap{
  margin: 14px auto 0;
  max-width: 520px;
  padding: 0 8px;
}

.cd-opinions-range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  outline: none;
  cursor: pointer;
}
.cd-opinions-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.cd-opinions-range::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.cd-opinions-range::-moz-range-track{
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
}

.cd-opinions-see-all{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}

.cd-opinions-skew-band .cd-opinions-see-all-btn{
  display:inline-block;
  padding: 10px 28px;
  border-radius: 999px;
  background: #fff;
  color: #03a9f4;
  text-decoration:none;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* ── Opinión original modal ───────────────────────────────────────── */
.cd-opinion-original-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display:none;
  align-items:center;
  justify-content:center;
}
.cd-opinion-original-modal.is-open{ display:flex; }
.cd-opinion-original-modal::before{
  content:'';
  position:absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
.cd-opinion-original-modal-content{
  position: relative;
  background: #fff;
  width: min(760px, 92vw);
  height: 86vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  overflow: hidden;
  display:flex;
  flex-direction:column;
}
.cd-opinion-original-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.cd-opinion-original-modal-title{
  font-size: 18px;
  color: #0ea5e9;
  font-weight: 800;
}
.cd-opinion-original-modal-close{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cd-opinion-original-modal-body{
  padding: 14px;
}
.cd-opinion-original-modal-body img{
  width: 100%;
  height: auto;
  display:block;
  max-height: calc(86vh - 70px);
  object-fit: contain;
}
.cd-opinion-card{
  position: relative;
  max-width: 880px;
  margin: 0 auto 26px;
  background:#fff;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  padding: 18px 22px 22px;
  text-align:center;
}
.cd-opinion-top-row{
  display:flex;
  justify-content:flex-start;
}
.cd-opinion-original{
  font-size:12px;
  color:#6b7280;
  text-decoration:none;
  opacity:0.85;
}
.cd-ai-badge{
  position:absolute;
  transform: translate(-50%, 0);
  left: 50%;
  top: 0;
  margin-top: -52px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:#0b7f73;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: "Gotham Rounded", sans-serif;
  font-size: 18px;
  font-weight: 700;
  z-index:10;
}
.cd-opinion-stars{
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--cd-accent, #f97316);
}
.cd-opinion-stars i.far{ color: rgba(249,115,22,0.35); }
.cd-opinion-comment{
  color:#9ca3af;
  font-size: 14px;
  margin: 0 auto;
  max-width: 560px;
}
.cd-opinion-author{
  margin-top: 10px;
  color:#6b7280;
  font-weight: 600;
  font-size: 13px;
}
.cd-opinion-see-all{
  margin-top: 18px;
}

/* Prioridad sobre reglas genéricas duplicadas más abajo */
.cd-opinions-skew-band .cd-opinion-stars{
  margin: 0;
  color: #fc824e;
}
.cd-opinions-skew-band .cd-opinion-comment{
  color: #949494;
}
.cd-opinions-skew-band .cd-opinion-author{
  color: #4b4b4b;
}
.cd-opinions-skew-band .cd-opinion-header .cd-ai-badge{
  background: #009688;
  transform: translate(-50%, -36%);
  margin-top: 0;
}

.cd-advantages-card{
  max-width: 560px;
  margin: 0 auto;
  background: transparent;
  border-radius: 0;
  padding: 0;
  display:flex;
  align-items:flex-start;
  gap: 18px;
}
.cd-advantages-left{
  padding-top: 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width: 150px;
}
.cd-advantages-bullet{
  display:inline-block;
  width: 10px;
  height: 10px;
  border-radius:50%;
  background:#f6b300;
}

.cd-advantages-subtitle{
  margin-top: 6px;
  color:#cbd5e1;
  font-weight: 700;
  font-size: 11px;
  text-align:center;
  line-height: 1.1;
}
.cd-advantages-main{
  flex: 1;
  background: transparent;
  border-left: 1px solid #6b7280;
  padding: 10px 0 0 20px;
  display:flex;
  flex-direction:column;
}
.cd-advantages-title{
  color: #f6b300;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
}
.cd-advantages-divider{
  display:none;
}
.cd-advantages-items{
  color:#6b7280;
}
.cd-adv-item{
  margin: 4px 0;
  line-height: 1.25;
  font-size: 13px;
}
.cd-adv-item-title{
  color: var(--cd-accent, #f97316);
  font-weight: 800;
}
.cd-adv-item-text{
  color:#6b7280;
  line-height: 1.25;
  font-size: 13px;
}
.cd-adv-call-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--cd-accent, #f6b300);
  color:#fff;
  text-decoration:none;
  font-weight: 800;
  width: fit-content;
}
.cd-adv-call-number{
  font-weight: 800;
}

.cd-adv-call-text{
  font-weight: 800;
}

.cd-cta-inner {
  max-width: 600px;
  margin: 0 auto;
}

.cd-contact-cta h2 {
  font-size: 18pt;
  color: #133D68;
  margin: 0 0 6px;
}

.cd-contact-cta > .cd-cta-inner > p {
  color: #6b7280;
  margin: 0 0 20px;
  font-size: 11pt;
}

.cd-cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cd-cta-phone {
  text-align: center;
}

.cd-cta-phone span {
  display: block;
  font-size: 11pt;
  color: #6b7280;
  margin-bottom: 8px;
}

.cd-phone-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--cd-accent, #FC824E), var(--cd-gradient, #FF9800));
  color: #fff;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
}

.cd-phone-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.cd-cta-or {
  color: #9ca3af;
  font-size: 11pt;
}

.cd-contact-btn {
  display: inline-block;
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
  color: #fff;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(76,175,80,0.35);
  transition: all 0.2s ease;
}

.cd-contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76,175,80,0.45);
}

/* ===== NOT FOUND ===== */
.cd-notfound {
  padding: 80px 20px;
}

.cd-notfound-box {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: 50px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  max-width: 500px;
  margin: 0 auto;
}

.cd-notfound-box h1 {
  font-size: 22px;
  color: #133D68;
  margin: 0 0 12px;
}

.cd-notfound-box p {
  color: #6b7280;
  margin: 0 0 24px;
}

/* ===== RESPONSIVE ===== */
@media (min-width: 700px) {
  .cd-cta-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    align-items: center;
  }
  
  .cd-cta-phone {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .cd-cta-phone span {
    display: inline;
    margin-bottom: 0;
  }
}

@media (max-width: 699px) {
  .cd-course-selector {
    padding: 10px 20px 20px;
  }
  
  .cd-course-buttons {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  
  .cd-course-btn {
    padding: 8px 14px;
    font-size: 10pt;
  }
  
  .cd-btn-tag {
    font-size: 9pt;
  }
  
  .cd-btn-title {
    font-size: 10pt;
  }
  
  .cd-action-btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- fin pages/curso-detalle.php (bloque principal) --- */

/* pages/terminos-y-condiciones.php */
.terms-page {
    font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
    color: #3b3f4b;
    line-height: 1.7;
    background: #fff;
  }

  .terms-gradient-bar {
    height: 10px;
    background: linear-gradient(90deg, #FC824E, #2b8bd7);
  }

  .terms-page .terms {
    display: block;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 30px 60px;
  }

  @media (max-width: 768px) {
    .terms-page .terms {
      padding: 24px 16px 40px;
    }
  }

  .terms-page .terms h1 {
    color: #2b8bd7;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center;
  }

  .terms-page .terms h2 {
    color: #2b8bd7;
    font-size: 20px;
    font-weight: 700;
    margin: 28px 0 10px;
  }

  .terms-page .terms h3 {
    color: #2b8bd7;
    font-size: 16px;
    font-weight: 700;
    margin: 22px 0 8px;
  }

  .terms-page .terms p {
    font-size: 14px;
    color: #4c566a;
    margin: 10px 0;
    text-align: justify;
  }

  .terms-page .terms a {
    color: #2b8bd7;
    text-decoration: none;
  }

  .terms-page .terms a:hover {
    text-decoration: underline;
  }

  .terms-page .address-block {
    margin: 16px 0;
    padding: 14px 20px;
    background: #f5f7fb;
    border-left: 4px solid #2b8bd7;
    border-radius: 8px;
    display: block;
    font-size: 14px;
    line-height: 1.6;
  }

/* pages/academias-de-ingles-madrid.php */
.academias-page {
    font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
    color: #3b3f4b;
    line-height: 1.6;
    background: #fff;
  }

  .page-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .intro h1,
  .intro h2 {
    color: #2b8bd7;
    margin-bottom: 12px;
  }

  .intro h1 {
    font-size: 28px;
  }

  .intro h2 {
    font-size: 22px;
  }

  .space-text {
    margin: 12px 0;
    font-size: 14px;
    color: #4c566a;
  }

  .academias-page .academias-seo-after-form h3 {
    color: #2b8bd7;
    font-size: 18px;
    margin: 20px 0 10px;
  }

  .academias-page .foot-of-foto {
    font-size: 13px;
    color: #5a6478;
    margin: 10px 0 28px;
    line-height: 1.5;
  }

  .academias-page .academias-embassy-wrap {
    margin: 12px 0 8px;
  }

  .academias-page .std-banner-reduced {
    display: block;
    font-size: 0.88em;
    font-weight: 400;
    margin-top: 0.15em;
  }

  .academias-page .map-three-academies {
    max-width: 920px;
    margin: 20px auto;
    padding: 0;
    overflow: hidden;
  }

  .academias-page .map-three-academies a {
    display: block;
  }

  .academias-page .map-three-academies img {
    width: 100%;
    height: auto;
    vertical-align: middle;
  }

  .color-circles-block {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 30px 0;
    flex-wrap: wrap;
  }

  .border-circle {
    width: 155px;
    height: 155px;
    border-radius: 50%;
    border: 3px solid #ccc;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .border-circle .circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .border-circle .top-block {
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: none !important;
    width: auto;
    height: auto;
  }

  .border-circle .bottom-block {
    font-size: 11px;
    line-height: 1.3;
    color: #4b4b4b;
  }

  .border-circle.blue { border-color: #2196F3; }
  .border-circle.blue .top-block { color: #2196F3; }
  .border-circle.green { border-color: #8BC34A; }
  .border-circle.green .top-block { color: #8BC34A; }
  .border-circle.purple { border-color: #9C27B0; }
  .border-circle.purple .top-block { color: #9C27B0; }
  .border-circle.red { border-color: #FF5252; }
  .border-circle.red .top-block { color: #FF5252; }
  .border-circle.orange { border-color: #FF9800; }
  .border-circle.orange .top-block { color: #FF9800; }

  @media (max-width: 600px) {
    .color-circles-block { gap: 14px; }
    .border-circle { width: 120px; height: 120px; padding: 12px; }
    .border-circle .top-block { font-size: 22px; }
    .border-circle .bottom-block { font-size: 10px; }
  }

  .academy-block {
    margin: 30px auto;
  }

  .academy-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    align-items: center;
  }

  .academy-media {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(27, 45, 85, 0.12);
  }

  .academy-media iframe {
    width: 100%;
    display: block;
  }

  .academy-img-container img {
    width: 100%;
    display: block;
  }

  .academy-params h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #2b8bd7;
  }

  .academy-params p {
    font-size: 14px;
    color: #4c566a;
  }

  /* Timeline: línea azul claro + círculos rellenos; último ítem círculo hueco */
  .caracs-academy {
    list-style: none;
    margin: 16px 0 0;
    padding: 8px 0 10px;
    position: relative;
    color: #5d6576;
    font-size: 14px;
    line-height: 1.55;
  }

  .caracs-academy::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 0.55em;
    bottom: 0.55em;
    width: 2px;
    background: #90caf9;
    border-radius: 2px;
    z-index: 0;
  }

  .caracs-academy li {
    position: relative;
    padding: 0 0 16px 36px;
    margin: 0;
    z-index: 1;
  }

  .caracs-academy li:last-child {
    padding-bottom: 2px;
  }

  .caracs-academy li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.42em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #64b5f6;
    border: 2px solid #64b5f6;
    box-sizing: border-box;
    z-index: 1;
    transform: translateY(-1px);
  }

  .caracs-academy li:last-child::before {
    background: #fff;
    border-color: #64b5f6;
  }

  .skew-block {
    position: relative;
    margin: 30px 0;
    padding: 30px 0;
  }

  .skew-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #f5f7fb;
    transform: skewY(-4deg);
    z-index: 0;
  }

  .skew-block.blue::before {
    background: linear-gradient(90deg, #1c5ed9, #2ea0ff);
  }

  .skew-block-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
  }

  .pic-slide-academy .card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    background: #fff;
  }

  .pic-slide-academy img {
    width: 100%;
    display: block;
    height: 180px;
    object-fit: cover;
  }

  .pic-slide-academy h5 {
    margin: 10px 0 0;
    font-size: 13px;
    color: #4c566a;
  }

  .text-center { text-align: center; }
  .text-blue { color: #2b8bd7; }
  .centered { text-align: center; }

  .slider-teachers {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 25px;
    border-radius: 16px;
    margin-top: 20px;
    perspective: 1000px;
  }
  .slider-teachers > * {
    position: relative;
    z-index: 2;
  }

  .single-teacher {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transition: transform 0.8s ease-in-out;
    cursor: pointer;
  }
  .single-teacher.flipao {
    transform: rotateY(180deg);
  }
  .teacher-front,
  .teacher-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 16px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  .teacher-front {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 20px;
    align-items: center;
  }
  .teacher-back {
    position: absolute;
    top: 0; left: 0; right: 0;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    gap: 10px;
    text-align: center;
  }

  .teacher-pic img {
    width: 100%;
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
  }

  .know-teacher {
    margin-top: 10px;
    background: #2b8bd7;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12px;
    cursor: pointer;
    transition: background .2s;
  }
  .know-teacher:hover { background: #1a7ac0; }

  .teacher-name {
    font-size: 18px;
    font-weight: 700;
    color: #2b8bd7;
  }

  .teacher-caption {
    font-size: 13px;
    color: #4c566a;
    margin: 6px 0;
    font-style: italic;
  }

  .teacher-place {
    font-size: 12px;
    color: #64748b;
  }

  .teacher-countries img,
  .teacher-place .teacher-flag img {
    width: 28px;
    vertical-align: middle;
    margin-left: 4px;
  }

  .teacher-interests {
    font-size: 13px;
    color: #4c566a;
    line-height: 1.6;
    padding: 0 10px;
  }

  .contact-form-block {
    position: relative;
    margin: 48px auto 72px;
    padding: 28px 0 16px;
    overflow: visible;
  }

  .contact-form-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: min(58vw, 440px);
    height: 150px;
    background: linear-gradient(120deg, #4fc3f7 0%, #b3e5fc 48%, rgba(227, 242, 252, 0.45) 78%, transparent 100%);
    transform: rotate(-11deg) translate(-6%, -10%);
    transform-origin: top left;
    z-index: 0;
    pointer-events: none;
  }

  .intro.contact-form-block > .contact-form-section-title,
  .contact-form-block > .contact-form-section-title {
    position: relative;
    z-index: 1;
    color: #42a5f5;
    font-size: clamp(22px, 2.8vw, 28px);
    font-weight: 700;
    margin: 0 auto 22px;
    text-align: center;
  }

  .contact-seo-form-container {
    position: relative;
    z-index: 1;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 32px rgba(27, 45, 85, 0.1);
  }

  .form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 22px 16px 24px;
    background: #7cb342;
    text-align: center;
  }

  .icon-form-container {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-form-container i {
    font-size: 1.85rem;
    line-height: 1;
  }

  .contact-title {
    font-size: clamp(15px, 2.1vw, 18px);
    margin: 0;
    color: #fff;
    font-weight: 700;
    line-height: 1.38;
    max-width: 24rem;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px 10px;
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    border: 1px solid #cfd8dc;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
  }

  .contact-form textarea {
    border-radius: 22px;
    min-height: 112px;
    resize: vertical;
  }

  .contact-form .ala-recaptcha-field {
    display: flex;
    justify-content: center;
    margin: 4px 0 2px;
  }

  .contact-form .terms {
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    line-height: 1.45;
    cursor: pointer;
  }

  .contact-form .terms a {
    color: #e53935;
    font-weight: 600;
    text-decoration: underline;
  }

  .submit-btn {
    width: 100%;
    background: #90a4ae;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    margin-top: 4px;
  }

  .submit-btn:hover {
    background: #78909c;
  }

  .contact-recaptcha-foot {
    font-size: 10px;
    line-height: 1.45;
    color: #94a3b8;
    text-align: center;
    margin: 0;
    padding: 0 18px 18px;
  }

  .contact-recaptcha-foot a {
    color: #64748b;
    text-decoration: underline;
  }

  @media (max-width: 900px) {
    .academy-content {
      grid-template-columns: 1fr;
    }

    .teacher-front {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .teacher-left {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .teacher-pic { max-width: 140px; }
  }

/* ═══ PAGE: pages/trabaja-en-american-language-academy.php ═══ */

/* Language toggle */
.work-with-us[data-lang="es"] .lang-en { display: none !important; }
.work-with-us[data-lang="en"] .lang-es { display: none !important; }

/* Main container */
.work-with-us.page-width {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
  color: #3a3f4b;
  line-height: 1.7;
}

/* Switch language button */
.work-with-us .switch-language-container { display: flex; justify-content: center; margin: 10px 0; }
.work-with-us .switch-language {
  display: flex; justify-content: space-around; align-items: center;
  background: #8BC34A; color: #fff; border: none; border-radius: 999px;
  padding: 12px 24px; font-weight: 700; cursor: pointer; font-size: 11pt;
  text-decoration: none; transition: box-shadow 0.3s;
}
.work-with-us .switch-language:hover { box-shadow: 0 4px 12px rgba(139,195,74,.35); }
.work-with-us .switch-language .flag-icon { width: 25px; margin-left: 10px; display: inline-flex; }
.work-with-us .switch-language .flag-icon img { width: 100%; height: auto; }

/* Title */
.work-with-us h1 { text-align: center; color: #133D68; margin: 30px auto; font-size: clamp(20px, 3.5vw, 28px); }

/* To jobs button */
.work-with-us .to-jobs { display: flex; justify-content: center; margin: 10px 0; }
.work-with-us .to-jobs a { padding: 20px 30px; }

/* Button styles */
.work-with-us .btn {
  display: inline-block; border: none; border-radius: 999px;
  padding: 12px 24px; font-weight: 700; color: #fff; cursor: pointer;
  text-decoration: none; font-size: 11pt; transition: box-shadow 0.3s;
}
.work-with-us .btn.red { background: #FC4E4E; }
.work-with-us .btn.red:hover { box-shadow: 0 4px 12px rgba(252,78,78,.35); }
.work-with-us .btn.light-green { background: #8BC34A; }
.work-with-us .btn.blue { background: #2196F3; }
.work-with-us .text-large { font-size: 16pt; }

/* ═══ pages/curso-detalle.php — extras TOEFL (bloque principal en ~línea 1690) ═══ */
.course-detail .cd-toefl-exams-link {
  padding: 14px 0 4px;
}
.course-detail .cd-toefl-exams-link .page-width{
  display:flex;
  justify-content:center;
}
.course-detail .cd-toefl-exams-link .btn.toefl-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  background: #2196F3;
  color: #fff;
  box-shadow: 0 8px 24px rgba(33, 150, 243, 0.25);
}
.course-detail .cd-toefl-exams-link .btn.toefl-lang:hover {
  box-shadow: 0 10px 28px rgba(33, 150, 243, 0.32);
}
.course-detail .cd-toefl-exams-link .btn.toefl-lang i {
  margin-right: 2px;
}

.course-detail .cd-toefl-universities{
  padding: 10px 0 12px;
}
.course-detail .cd-toefl-universities-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  color:#133D68;
  margin: 8px auto 14px;
  flex-wrap:wrap;
  text-align:center;
}
.course-detail .cd-toefl-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background:#14b8a6;
  display:inline-block;
}
.course-detail .cd-toefl-universities-label{
  font-weight: 800;
  color:#14b8a6;
}
.course-detail .cd-toefl-universities-desc{
  color:#6b7280;
  font-size: 12px;
  font-weight: 500;
}
.course-detail .cd-toefl-universities-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 18px;
  align-items: stretch;
}
.course-detail .cd-toefl-uni-card{
  background:#fff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 18px 16px;
  text-align:center;
}
.course-detail .cd-toefl-uni-card img{
  max-width: 180px;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto 10px;
  display:block;
}
.course-detail .cd-toefl-uni-card p{
  margin: 0;
  color:#6b7280;
  font-size: 12px;
  line-height: 1.45;
}

.course-detail .cd-toefl-exam-inscription{
  padding: 6px 0 18px;
}
.course-detail .cd-toefl-exam-inscription-btn{
  display:flex;
  justify-content:center;
}
.course-detail .cd-toefl-exam-inscription .btn.green{
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(139,195,74,.28);
}

.course-detail .cd-toefl-reservar-examen{
  padding: 6px 0 8px;
}
.course-detail .cd-toefl-reservar-examen .page-width{
  display:flex;
  justify-content:center;
}
.course-detail .cd-toefl-reservar-examen-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(252,78,78,.28);
}
.course-detail .cd-toefl-reservar-examen-btn:hover{
  box-shadow: 0 12px 26px rgba(252,78,78,.34);
}

.course-detail .cd-exam-online-ctas{
  padding: 10px 0 18px;
}
.course-detail .cd-exam-online-ctas-inner{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 12px;
}
.course-detail .cd-exam-online-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  max-width: 100%;
}
.course-detail .cd-exam-online-cta.btn.red{
  box-shadow: 0 10px 22px rgba(252,78,78,.28);
}
.course-detail .cd-exam-online-cta.btn.blue{
  box-shadow: 0 10px 22px rgba(33,150,243,.25);
}

/* LanguageCert — objetivos (legacy mastercourse examen-ingles-online) */
.course-detail .cd-languagecert-objectives{
  margin: 28px auto 40px;
}
.course-detail .cd-languagecert-objectives-title,
.course-detail .cd-languagecert-questionary-title{
  text-align: center;
  color: #133d68;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 24px;
}
.course-detail .cd-languagecert-questionary-title{
  max-width: 84%;
  margin: 50px auto 24px;
}
.course-detail .cd-languagecert-courses-display{
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
.course-detail .cd-languagecert-courses-display .main-course.card{
  max-width: 375px;
  width: calc(33.333% - 16px);
  min-width: 280px;
  flex: 1 1 280px;
  margin: 0;
  padding: 0 0 56px;
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 10px rgba(0,0,0,.1);
  border: none;
}
.course-detail .cd-languagecert-courses-display .main-course-image{
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f5f5f5;
}
.course-detail .cd-languagecert-courses-display .main-course-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.course-detail .cd-languagecert-courses-display .main-course-content{
  padding: 22px 20px 0;
}
.course-detail .cd-languagecert-courses-display .main-course-title{
  text-align: center;
  margin: 0 0 12px;
  font-size: 1rem;
  color: #fc4e4e;
  font-weight: 700;
}
.course-detail .cd-languagecert-courses-display .main-course-text{
  text-align: left;
  color: #4b4b4b;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 12px;
}
.course-detail .cd-languagecert-courses-display .main-course .btn.red{
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.course-detail .cd-languagecert-questionary{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 auto 24px;
  position: relative;
}
.course-detail .cd-languagecert-questionary .mrCert{
  width: min(360px, 90%);
  height: auto;
  display: block;
}
.course-detail .cd-languagecert-questionary #start-quest-btn{
  position: absolute;
  margin-top: 120px;
  margin-right: -118px;
}
@media (max-width: 900px){
  .course-detail .cd-languagecert-courses-display .main-course.card{
    width: min(100%, 420px);
    flex-basis: 100%;
  }
  .course-detail .cd-languagecert-questionary #start-quest-btn{
    position: static;
    margin: 12px 0 0;
  }
}

/* Mr. Cert — cuestionario LanguageCert (modal legacy) */
.lc-quest-overlay{
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.lc-quest-overlay[hidden]{ display: none !important; }
.lc-quest-modal{
  width: min(500px, 100%);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  padding: 0;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.lc-quest-modal-header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
  background: #133d68;
  color: #fff;
  flex-shrink: 0;
}
.lc-quest-modal-header .mrCert-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.lc-quest-modal-header-text{
  flex: 1;
  text-align: left;
}
.lc-quest-modal-name{
  font-weight: 800;
  font-size: 1.1rem;
}
.lc-quest-modal-status{
  font-size: 0.8rem;
  opacity: 0.9;
}
.lc-quest-close{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.lc-quest-modal-body{
  padding: 20px 18px 24px;
  overflow-y: auto;
  text-align: center;
}
.lc-quest-step{ display: none; }
.lc-quest-step.is-active{ display: block; }
.text-from-mrCert{
  background: #cbced3;
  border-radius: 50px;
  padding: 10px 22px;
  color: #000;
  font-weight: 700;
  text-align: center;
  width: fit-content;
  max-width: 90%;
  margin: 0 auto 16px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.questionary-options,
.lc-quest-contact,
.lc-quest-course-links{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.lc-quest-course-links{
  align-items: stretch;
  margin: 12px 0;
}
.lc-quest-modal .btn.questionary-green,
.lc-quest-modal .answer{
  background: #9ee156;
  color: #000;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  width: auto;
  max-width: 100%;
}
.lc-quest-modal .lc-quest-next:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}
.lc-quest-levels,
.lc-quest-timing{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 16px;
}
.lc-quest-levels .btn,
.lc-quest-timing .btn{
  background: #cbced3;
  color: #000;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}
.lc-quest-modal a.courses{
  color: #133d68;
  font-weight: 700;
  text-decoration: underline;
}
.lc-quest-error{
  color: #fc4e4e;
  font-weight: 700;
  font-size: 0.85rem;
}
.lc-quest-step p{
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #4b4b4b;
  text-align: left;
}
.lc-quest-step .text-from-mrCert{
  text-align: center;
}

@media (max-width: 999px){
  .course-detail .cd-toefl-universities-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .course-detail .cd-toefl-universities-grid{ grid-template-columns: 1fr; }
  .course-detail .cd-toefl-uni-card img{ max-width: 220px; }
}

/* Text spacing */
.work-with-us h2 {
  margin: 25px auto;
  color: #42a5f5;
  text-align: center;
  font-weight: 700;
}
.work-with-us p { margin: 16pt auto; font-size: 11pt; line-height: 1.7; }
.work-with-us ul li { margin-bottom: 20px; font-size: 11pt; }
.work-with-us h3 { margin: 20px auto 15px; color: #133D68; }

/* Video */
.work-with-us .video-trainers {
  width: 80%; margin: 20px auto; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.work-with-us .video-trainers iframe {
  width: 100%; aspect-ratio: 16/9; border: none; display: block;
}
@media (min-width: 999px) { .work-with-us .video-trainers { width: 560px; } }

/* ─── Metodología / Posiciones: círculos con borde fino (legacy), una fila ─── */
.work-with-us .color-circles-block.methodology-wwa {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 14px);
  list-style: none;
  padding: 0 8px;
  margin: 28px auto;
  max-width: 1180px;
  width: 100%;
  box-sizing: border-box;
}
.work-with-us .methodology-wwa .border-circle {
  flex: 0 0 auto;
  width: clamp(88px, 14vw, 182px);
  height: clamp(88px, 14vw, 182px);
  border-radius: 50%;
  transform: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background: #fff;
  border-style: solid;
  border-width: 2px;
  box-shadow: -4px 6px 16px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
  box-sizing: border-box;
}
.work-with-us .methodology-wwa .border-circle:hover {
  box-shadow: -5px 8px 20px rgba(0, 0, 0, 0.14);
}
.work-with-us .methodology-wwa .circle-container {
  transform: none;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 50%;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vw, 10px);
  box-sizing: border-box;
  padding: clamp(8px, 8%, 22px) clamp(6px, 5%, 12px) clamp(10px, 9%, 20px);
}
.work-with-us .methodology-wwa .circle-container .top-block {
  line-height: 1;
  flex-shrink: 0;
}
.work-with-us .methodology-wwa .circle-container .top-block i {
  font-size: clamp(24px, 4.5vw, 44px);
  display: block;
}
.work-with-us .methodology-wwa .circle-container .bottom-block {
  font-size: clamp(8px, 1.25vw, 11.5px);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.work-with-us .methodology-wwa .circle-container .bottom-block.text-medium {
  font-size: clamp(8px, 1.25vw, 11.5px);
}

/* Color por círculo: borde + icono + texto (sin relleno degradado) */
.work-with-us .methodology-wwa .border-circle.indigo {
  border-color: #3949ab;
  box-shadow: -4px 6px 16px rgba(57, 73, 171, 0.18);
}
.work-with-us .methodology-wwa .border-circle.indigo .top-block,
.work-with-us .methodology-wwa .border-circle.indigo .bottom-block {
  color: #3949ab;
}

.work-with-us .methodology-wwa .border-circle.blue {
  border-color: #1e88e5;
  box-shadow: -4px 6px 16px rgba(30, 136, 229, 0.16);
}
.work-with-us .methodology-wwa .border-circle.blue .top-block,
.work-with-us .methodology-wwa .border-circle.blue .bottom-block {
  color: #1e88e5;
}

.work-with-us .methodology-wwa .border-circle.light-blue {
  border-color: #039be5;
  box-shadow: -4px 6px 16px rgba(3, 155, 229, 0.16);
}
.work-with-us .methodology-wwa .border-circle.light-blue .top-block,
.work-with-us .methodology-wwa .border-circle.light-blue .bottom-block {
  color: #039be5;
}

.work-with-us .methodology-wwa .border-circle.cyan {
  border-color: #00acc1;
  box-shadow: -4px 6px 16px rgba(0, 172, 193, 0.16);
}
.work-with-us .methodology-wwa .border-circle.cyan .top-block,
.work-with-us .methodology-wwa .border-circle.cyan .bottom-block {
  color: #00acc1;
}

.work-with-us .methodology-wwa .border-circle.teal {
  border-color: #00897b;
  box-shadow: -4px 6px 16px rgba(0, 137, 123, 0.16);
}
.work-with-us .methodology-wwa .border-circle.teal .top-block,
.work-with-us .methodology-wwa .border-circle.teal .bottom-block {
  color: #00796b;
}

.work-with-us .methodology-wwa .border-circle.dark-green {
  border-color: #2e7d32;
  box-shadow: -4px 6px 16px rgba(46, 125, 50, 0.16);
}
.work-with-us .methodology-wwa .border-circle.dark-green .top-block,
.work-with-us .methodology-wwa .border-circle.dark-green .bottom-block {
  color: #2e7d32;
}

@media (max-width: 520px) {
  .work-with-us .color-circles-block.methodology-wwa {
    gap: 3px;
    padding: 0 2px;
    margin: 22px auto;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .work-with-us .methodology-wwa .border-circle {
    width: clamp(72px, 22vw, 110px);
    height: clamp(72px, 22vw, 110px);
  }
  .work-with-us .methodology-wwa .circle-container .bottom-block,
  .work-with-us .methodology-wwa .circle-container .bottom-block.text-medium {
    font-size: clamp(6.5px, 2.8vw, 10px);
  }
  .work-with-us .methodology-wwa .circle-container .top-block i {
    font-size: clamp(18px, 7vw, 28px);
  }
}

/* Card/borderless */
.work-with-us .card { border-radius: 16px; overflow: hidden; }
.work-with-us .borderless { border: none; box-shadow: none; }
.work-with-us .bold { font-weight: 700; }
.work-with-us .text-center { text-align: center; }
.work-with-us .text-medium { font-size: 13pt; }
/* END PAGE: pages/trabaja-en-american-language-academy.php */

/* ═══ PAGE: pages/american-language-academy.php ═══ */
.ala-page {
  font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
  color: #3a3f4b;
  line-height: 1.7;
  background: #fff;
}
.ala-page .ala-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Main title ── */
.ala-main-title {
  text-align: center;
  font-size: clamp(24px, 4vw, 36px);
  color: #2196F3;
  margin: 30px 0 20px;
  font-weight: 700;
}

/* ── Hero Banner ── */
.ala-hero { padding-bottom: 20px; }

/* ── Text blocks ── */
.ala-text { text-align: left; }
.ala-text p, .ala-col-content p {
  font-size: 14px;
  color: grey;
  line-height: 1.7;
  margin: 0 0 14px;
}
.ala-text p strong, .ala-col-content p strong { color: #3a3f4b; }

/* ── Colored section titles (Angular .color-block-title) ── */
.ala-color-title {
  text-align: center;
  font-size: clamp(20px, 3vw, 30px);
  margin: 40px 0 30px;
  font-weight: 700;
  letter-spacing: 1px;
}
.ala-color-title.text-green { color: #4CAF50; }
.ala-color-title.text-red { color: #FC4E4E; }
.ala-color-title.text-blue { color: #2196F3; }

/* ── American methodology: dos filas alternas (imagen|texto, texto|imagen) ── */
.ala-methodology {
  padding-bottom: 8px;
}
.ala-methodology > .ala-color-title.text-green {
  color: #43a047;
  margin-top: 32px;
  margin-bottom: 32px;
}
.ala-methodology > .ala-methodology-row + .ala-methodology-row {
  padding-top: 28px;
}
.ala-methodology .ala-methodology-row {
  padding-top: 0;
  padding-bottom: 8px;
}
.ala-methodology .ala-column-block {
  gap: 40px;
  align-items: center;
}
.ala-methodology .ala-col-image img {
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.ala-methodology .ala-col-content h3 {
  color: #42a5f5;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 14px;
}
.ala-methodology .ala-col-content p {
  color: #2b3038;
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 14px;
}
.ala-methodology .ala-col-content p:last-child {
  margin-bottom: 0;
}

/* ── Quality and innovation: zigzag texto|imagen, imagen|texto, texto|imagen ── */
.ala-quality-innovation {
  padding-bottom: 8px;
}
.ala-quality-innovation > .ala-color-title.text-blue {
  margin-top: 32px;
  margin-bottom: 32px;
}
.ala-quality-innovation > .ala-quality-row + .ala-quality-row {
  padding-top: 28px;
}
.ala-quality-innovation .ala-quality-row {
  padding-top: 0;
  padding-bottom: 8px;
}
.ala-quality-innovation .ala-column-block {
  gap: 40px;
  align-items: center;
}
.ala-quality-innovation .ala-col-image img {
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.ala-quality-innovation .ala-col-content p {
  color: #2b3038;
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 14px;
}
.ala-quality-innovation .ala-col-content p:last-child {
  margin-bottom: 0;
}

/* ── Column blocks (Angular .column-block) ── */
.ala-column-block {
  display: flex;
  gap: 30px;
  align-items: center;
  text-align: left;
}
.ala-col-image {
  flex: 0 0 42%;
  max-width: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ala-col-image img {
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  display: block;
}
.ala-col-content {
  flex: 1;
}
.ala-col-content h3 {
  font-size: 17px;
  color: #3a3f4b;
  margin: 0 0 12px;
  font-weight: 700;
}
.ala-col-content h3.ala-heading-softblue {
  color: #42a5f5;
  line-height: 1.35;
}
.ala-col-content h4 {
  font-size: 15px;
  color: #3a3f4b;
  margin: 0 0 10px;
  font-weight: 600;
}

/* ── Subtitle (mismo azul claro que American methodology) ── */
.ala-subtitle {
  font-size: 17px;
  color: #42a5f5;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 16px;
  text-align: center;
}

/* ── Colored circles (Angular .color-circles-block) ── */
.ala-circles {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.ala-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 3px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}
.ala-circle.blue { border-color: #2196F3; }
.ala-circle.green { border-color: #4CAF50; }
.ala-circle.purple { border-color: #9C27B0; }
.ala-circle .circle-icon {
  font-size: 30px;
  margin-bottom: 8px;
}
.ala-circle.blue .circle-icon { color: #2196F3; }
.ala-circle.green .circle-icon { color: #4CAF50; }
.ala-circle.purple .circle-icon { color: #9C27B0; }
.ala-circle .circle-text {
  font-size: 13px;
  color: #3a3f4b;
  line-height: 1.4;
}
.ala-circle .circle-text .bold { font-weight: 700; }

/* ── Company logos slider (Angular slider-companies) ── */
.ala-companies-skew {
  position: relative;
  overflow: hidden;
  padding: 40px 20px;
  margin: 30px 0;
  background: #F5F5F5;
  transform: skewY(-3deg);
}
.ala-companies-slider {
  transform: skewY(3deg);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.ala-company-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ala-company-logo img {
  max-width: 100px;
  max-height: 50px;
  object-fit: contain;
  filter: grayscale(30%);
  transition: filter .3s;
}
.ala-company-logo img:hover {
  filter: grayscale(0%);
}

/* ── Section spacing ── */
.ala-section { padding: 20px 0; }
.ala-section h2 {
  color: #2196F3;
  font-size: 20px;
  margin: 10px 0 16px;
  font-weight: 700;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ala-column-block {
    flex-direction: column;
    align-items: stretch;
  }
  .ala-methodology .ala-column-block {
    gap: 22px;
  }
  .ala-methodology > .ala-methodology-row + .ala-methodology-row {
    padding-top: 20px;
  }
  .ala-quality-innovation .ala-column-block {
    gap: 22px;
  }
  .ala-quality-innovation > .ala-quality-row + .ala-quality-row {
    padding-top: 20px;
  }
  .ala-col-image {
    flex: none;
    max-width: 100%;
  }
  .ala-circles { gap: 16px; }
  .ala-circle { width: 140px; height: 140px; }
  .ala-circle .circle-icon { font-size: 22px; }
  .ala-circle .circle-text { font-size: 11px; }
  .ala-companies-slider { gap: 12px; }
  .ala-company-logo img { max-width: 70px; max-height: 35px; }
}
/* ═══ END PAGE: pages/american-language-academy.php ═══ */

/* ── Modal Certificación Exámenes ── */
.cert-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0,0,0,.45);
  justify-content: center;
  align-items: center;
}
.cert-modal-overlay.is-open {
  display: flex;
}
.cert-modal-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  padding: 30px 30px 24px;
  max-width: 520px;
  width: 92%;
  text-align: center;
  animation: certModalIn .25s ease;
}
@keyframes certModalIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
.cert-modal-title {
  color: #03a9f4;
  font-family: "Gotham Rounded", "Gotham-Rounded-Bold", sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 20px;
}
.cert-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #ff4d4d;
  color: #fff;
  font-size: 22px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  transition: background .2s;
}
.cert-modal-close:hover {
  background: #e03e3e;
}
.cert-modal-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}
.cert-modal-buttons .certOption {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #5E5E5E;
  width: 50%;
  cursor: pointer;
  transition: color .2s;
}
.cert-modal-buttons .certOption:hover p {
  color: #e03e3e;
}
.cert-modal-buttons .certOption p {
  margin: 10px 0 0;
  font-size: 15px;
  text-align: center;
  line-height: 1.35;
  font-family: "Gotham Rounded", "Gotham-Rounded-Book", sans-serif;
  color: #5E5E5E;
}
.cert-img-circle{position:relative;overflow:hidden;}
.certCircleText{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-weight:800;
  text-align:center;
  letter-spacing:.5px;
  line-height:1.05;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
  font-family: "Gotham Rounded", "Gotham-Rounded-Medium", sans-serif;
  pointer-events:none;
  user-select:none;
}
.certCircleText--toefl{
  font-size:44px;
  text-transform:lowercase;
}
.certCircleStar{
  display:inline-block;
  margin-right:6px;
  font-size:40px;
  transform: translateY(-6px);
}
.certCircleText--mcer{
  font-size:24px;
  font-weight:800;
}
.cert-modal-buttons .certOptionLink {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #888;
  font-family: "Gotham Rounded", "Gotham-Rounded-Book", sans-serif;
}
.cert-img-circle {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid #e9e9eb;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  transition: box-shadow .2s, transform .2s;
}
.certOption:hover .cert-img-circle {
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transform: scale(1.03);
}
.toefl-toeic-button {
  background-image: url('../assets/images/banners/examenes-puntuacion-numerica.jpg');
  background-position: bottom;
}
.lang-cert-button {
  background-image: url('../assets/images/banners/examenes-marco-comun.jpg');
}
.cert-modal-other-exams {
  display: block;
  margin: 0 auto 16px;
  padding: 14px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #03a9f4, #4fc3f7);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: "Gotham Rounded", "Gotham-Rounded-Medium", sans-serif;
  text-decoration: none;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 4px 12px rgba(3,169,244,.35);
  transition: background .2s, box-shadow .2s;
}
.cert-modal-other-exams:hover {
  background: linear-gradient(135deg, #0290d4, #3db8f0);
  box-shadow: 0 6px 18px rgba(3,169,244,.45);
}
.cert-modal-saber-mas {
  display: inline-block;
  margin: 0 auto;
  padding: 10px 32px;
  border: none;
  border-radius: 999px;
  background: #ff6f61;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: "Gotham Rounded", "Gotham-Rounded-Medium", sans-serif;
  cursor: pointer;
  transition: background .2s;
}
.cert-modal-saber-mas:hover {
  background: #e65a4e;
}
/* Modal responsive */
@media screen and (max-width: 600px) {
  .cert-modal-box {
    padding: 22px 16px 18px;
  }
  .cert-img-circle {
    width: 110px;
    height: 110px;
  }
  .cert-modal-buttons .certOption p {
    font-size: 13px;
  }
  .cert-modal-other-exams {
    font-size: 13px;
    padding: 12px 16px;
  }
}

/* pages/certificar-nivel-ingles.php */
.certificar-page {
    background: #ffffff;
    color: #1f2330;
    font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    padding: 20px 0 60px;
  }

  .page-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Sección introductoria */
  .description {
    margin: 30px auto 40px;
  }

  .description h1 {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    color: #03a9f4;
    margin: 0 0 24px;
    line-height: 1.3;
  }

  .space-text {
    margin: 16px 0;
    line-height: 1.8;
    font-size: 16px;
    color: #1f2330;
  }

  /* Sección de preparación con gradiente */
  .preparation-section {
    background: linear-gradient(90deg, #ff7a45 0%, #f24a82 50%, #6a2dbf 100%);
    padding: 60px 20px;
    margin: 40px 0;
    position: relative;
  }

  .preparation-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .preparation-title {
    text-align: center;
    color: #ffffff;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    margin: 0 0 40px;
  }

  /* Cards de preparación – estructura Angular */
  .certificar-page .main-course-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2%;
    margin-bottom: 40px;
  }

  .certificar-page .main-course {
    max-width: 375px;
    margin: 15px;
    padding: 0;
    position: relative;
    overflow: hidden;
    padding-bottom: 60px;
    user-select: auto;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

  .certificar-page .main-course-image {
    background-position: center;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
  }

  .certificar-page .main-course-image.toefl-content {
    background-image: url(/assets/images/banners/examenes-puntuacion-numerica.jpg);
  }

  .certificar-page .main-course-image.languagecert-content {
    background-image: url(/assets/images/banners/london-background.webp);
  }

  .certificar-page .course-card-image {
    width: 50%;
    margin: auto;
  }

  .certificar-page .main-course-content {
    padding: 25px;
  }

  .certificar-page .main-course-title {
    margin-bottom: 15px;
    font-size: 1.15rem;
    color: #d53a3a;
    font-weight: 700;
  }

  .certificar-page .main-course-text {
    text-align: left;
    font-size: 15px;
    line-height: 1.6;
    color: #1f2330;
  }

  .certificar-page .main-course .btn.red {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80%;
    margin: 15px auto;
    background: #d53a3a;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    transition: background 0.3s ease;
    display: block;
  }

  .certificar-page .main-course .btn.red:hover {
    background: #b82e2e;
  }

  .other-solutions-wrapper {
    text-align: center;
    margin-top: 30px;
  }

  .btn-yellow {
    display: inline-block;
    background: #ffd700;
    color: #1f2330;
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .btn-yellow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }

  .btn-text-main {
    display: block;
  }

  .btn-text-sub {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
  }

  /* Sección centro examinador – estructura Angular */
  .test-centers {
    justify-content: center;
    padding: 5% 0;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: 50px auto;
  }

  .test-centers #main-course-title {
    width: 100%;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    color: #133d68;
    margin: 0 0 20px;
  }

  .test-centers .main-course-image.toefl-test-center {
    background-image: url(/assets/images/logos/centro-examinador-toefl.webp);
  }

  .test-centers .main-course-image.languagecert-test-center {
    background-image: url(/assets/images/logos/centro-examinador-languagecert.webp);
  }

  /* Sección de contenido – estructura Angular */
  .certificar-page .text {
    margin: 40px auto;
  }

  .certificar-page .question {
    margin: 0 0 24px;
  }

  .certificar-page .question:last-child {
    margin-bottom: 0;
  }

  .certificar-page .space-title2 {
    margin: 30px 0 15px;
    color: #133d68;
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    line-height: 1.3;
  }

  .certificar-page h2.space-title2 {
    font-size: clamp(20px, 3vw, 26px);
  }

  .certificar-page .question .space-text p {
    margin: 6px 0;
  }

  /* Sección de contacto */
  .contact-section {
    text-align: center;
    margin: 60px auto 40px;
    padding: 40px 20px;
    background: #f5f7fb;
    border-radius: 18px;
  }

  .contact-title {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    color: #133d68;
    margin: 0 0 16px;
  }

  .contact-text {
    font-size: 16px;
    color: #5d6576;
    margin: 12px 0;
  }

  .contact-phone {
    margin: 20px 0;
  }

  .phone-link {
    display: inline-block;
    background: #44d53a;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    transition: background 0.3s ease;
  }

  .phone-link:hover {
    background: #3ac530;
  }

  .btn-green {
    display: inline-block;
    background: #44d53a;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    margin-top: 12px;
    transition: background 0.3s ease;
  }

  .btn-green:hover {
    background: #3ac530;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .preparation-section {
      padding: 40px 15px;
    }

    .certificar-page .main-course-container {
      flex-direction: column;
      align-items: center;
    }

    .certificar-page .main-course {
      max-width: 100%;
      width: 100%;
    }

    .test-centers {
      flex-direction: column;
      align-items: center;
    }

    .test-centers .main-course {
      max-width: 100%;
      width: 100%;
    }

    .certificar-page .text {
      padding: 0 10px;
    }

    .contact-section {
      padding: 30px 15px;
    }
  }

  @media (max-width: 480px) {
    .description h1 {
      font-size: 22px;
    }

    .preparation-title {
      font-size: 20px;
    }

    .certificar-page .main-course-title {
      font-size: 1rem;
    }

    .test-centers .main-course-title {
      font-size: 1rem;
    }

    .certificar-page .space-title2 {
      font-size: 18px;
    }

    .btn-yellow,
    .btn-red,
    .btn-green,
    .phone-link {
      width: 100%;
      display: block;
      text-align: center;
    }
  }

/* ═══════ PAGE: pages/cursos-ingles-madrid-para-colegios.php ═══════ */
.colegios-page {
  font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
  color: #3b3f4b;
  background: #fff;
  line-height: 1.7;
}
.colegios-container {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.colegios-hero h1 { font-size: 22px; color: #2b8bd7; margin: 10px 0 20px; font-weight: 700; }
.colegios-section { padding: 20px 0; }
.colegios-section h2 { color: #2b8bd7; font-size: 18px; margin: 10px 0 12px; }
/* ── Feature cards (Presencial / Online / Exámenes) ── */
.colegios-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 28px auto 0;
  max-width: 1020px;
  padding: 0 4px;
}
.colegios-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.colegios-card__frame {
  margin: 0;
  padding: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  line-height: 0;
  background: #f5f5f5;
}
.colegios-card__frame--blue {
  border-color: #1e88e5;
}
.colegios-card__frame--teal {
  border-color: #0f766e;
}
.colegios-card__frame--lime {
  border-color: #9ccc65;
}
.colegios-card__img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 200px;
  max-height: 260px;
  object-fit: cover;
  object-position: center;
}
.colegios-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 18px 22px;
  gap: 0;
}
.colegios-card__pill {
  display: inline-block;
  margin: -22px 0 16px;
  padding: 10px 28px;
  background: #fff;
  color: #111;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
}
.colegios-card__desc {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.55;
  max-width: 100%;
}

/* ── Skew block (Angular .skew-block.school-skew) ── */
.school-skew-block {
  position: relative;
  overflow: hidden;
  padding: 50px 20px;
  margin: 30px 0;
  background: linear-gradient(135deg, #4CAF50, #81C784);
  transform: skewY(-3deg);
}
.school-skew-content {
  transform: skewY(3deg);
  text-align: center;
  color: #fff;
  font-weight: 900;
}
.school-skew-content p {
  margin: 0;
  font-size: clamp(22px, 4vw, 36px);
  letter-spacing: 3px;
  line-height: 1.3;
}

/* ── University testimonials (Angular slider-universities) ── */
.uni-testimonials { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; justify-content: center; }
.uni-column { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 20px; }
.uni-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  padding: 20px;
  text-align: center;
}
.uni-card .uni-logo { margin-bottom: 12px; }
.uni-card .uni-logo img { max-width: 160px; max-height: 60px; object-fit: contain; }
.uni-card p { color: grey; font-size: 14px; line-height: 1.5; margin: 0; }
.uni-card p strong { color: #3a3f4b; }

/* ── Option logo image (ALA icon in step 3) ── */
.sf-option-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 2px;
}

/* ── Multi-step form section ── */
.colegios-form {
  padding: 40px 0;
  background: transparent;
  margin: 30px 0;
}
.sf-title {
  text-align: center;
  color: #2196F3;
  font-size: 24px;
  margin: 15px 0 25px;
  font-weight: 700;
}

/* ── Step indicators (match Angular .form-steps .step) ── */
.sf-steps {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  height: 60px;
  margin: 0 auto 50px;
  padding: 0 30px;
  max-width: 500px;
}
.sf-steps::after {
  content: '';
  height: 2px;
  width: 70%;
  background-color: #B0BEC5;
  position: absolute;
  top: 0; bottom: 0;
  left: 18%;
  margin: auto;
  z-index: 0;
}
.sf-step-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
.sf-step {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  background-color: #fff;
  color: #2196F3;
  border: 2px solid #2196F3;
  box-sizing: border-box;
  transition: all .3s ease-in-out;
}
.sf-step i { font-size: 18px; pointer-events: none; }
.sf-step.active {
  background-color: #2196F3;
  color: #fff;
  border-color: #2196F3;
  box-shadow: 0 10px 10px rgba(33,150,243,.2);
}
.sf-step.completed {
  background-color: #2196F3;
  color: #fff;
  border-color: #2196F3;
  opacity: .65;
}
.sf-step.error {
  border-color: #FC4E4E;
  color: #FC4E4E;
  animation: sfShake .4s ease-in-out;
}
@keyframes sfShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.sf-step-label {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  font-size: 11px;
  color: #78909C;
  text-align: center;
  line-height: 1.3;
}

/* ── Formulario por pasos (solo un slide visible → altura acorde al paso; botones pegados al contenido) ── */
.sf-slider-viewport {
  overflow: visible;
  margin: 0 auto;
  width: 100%;
}
.sf-slider {
  width: 100%;
  display: block;
  position: relative;
}
.sf-slide {
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 10px;
}
.sf-slide.is-active {
  display: block;
}
@media screen and (min-width: 1000px) {
  .sf-slide { padding: 20px 60px; }
}

.sf-slide-title {
  color: #3a3f4b;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 10px;
}

/* ── Options (match Angular .form-step ul li) ── */
.sf-options {
  list-style: none;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
}
.sf-options-col {
  flex-direction: column;
  align-items: center;
}
.sf-options-col .sf-option {
  width: 100%;
  max-width: 600px;
}
.sf-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #F5F5F5;
  color: #3a3f4b;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 8px auto;
  cursor: pointer;
  transition: all .3s ease-in-out;
  text-align: center;
  font-size: 14px;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}
.sf-option:hover {
  background-color: #e8e8e8;
}
.sf-option.active {
  background-color: #2196F3;
  color: #fff;
  box-shadow: 0 10px 10px rgba(33,150,243,.2);
}
.sf-option.active i,
.sf-option.active svg {
  color: #fff;
  fill: #fff;
}
.sf-option i,
.sf-option svg {
  font-size: 26px;
  color: #78909C;
  fill: #78909C;
  margin-bottom: 2px;
  display: block;
}
.sf-option span {
  display: block;
  line-height: 1.3;
}

/* ── Contact form (step 4 — match Angular .contact-company-form .field) ── */
.sf-contact-form {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}
.sf-field {
  width: 80%;
  display: flex;
  flex-direction: column;
  margin: 0 auto 10px;
}
@media screen and (min-width: 1000px) {
  .sf-field { width: 60%; }
}
.sf-field label {
  color: #3a3f4b;
  font-size: 12px;
  margin-bottom: 4px;
  margin-left: 12px;
  font-weight: 600;
}
.sf-field input,
.sf-field select,
.sf-field textarea {
  margin: 5px 10px;
  padding: 10px 17px;
  border: 1px solid #78909C;
  border-radius: 200px;
  font-size: 13px;
  font-family: inherit;
  color: #133d68;
  background: #fff;
  outline: none;
}
.sf-field textarea {
  border-radius: 16px;
  resize: vertical;
  min-height: 70px;
}
.sf-field input::placeholder,
.sf-field textarea::placeholder {
  color: #78909C;
}
.sf-field select {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #78909C;
  color: #78909C;
  background: #fff;
}
.sf-error {
  color: #FC4E4E;
  font-size: 11px;
  margin: 2px 12px 0;
  min-height: 16px;
  text-align: center;
}

/* ── Nav buttons (match Angular .form-buttons) ── */
.sf-nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 0;
  margin: 8px auto 0;
  max-width: 720px;
}
.sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  border-radius: 200px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Gotham Rounded', 'Gotham-Rounded-Bold', sans-serif;
  cursor: pointer;
  border: none;
  transition: background-color .5s ease, color .5s ease;
}
.sf-btn-blue {
  background-color: #2196F3;
  color: #fff;
  border: solid 1px #2196F3;
}
.sf-btn-blue:hover {
  background-color: #1976D2;
  color: #fff;
}
.sf-btn-blue:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.sf-btn-orange {
  background-color: #78909C;
  color: #fff;
  border: solid 1px #78909C;
}
.sf-btn-orange:hover {
  background-color: #546E7A;
  color: #fff;
}
#sf-btn-spacer { flex: 1; }

/* ── Form-level error ── */
.sf-form-error {
  color: #FC4E4E;
  text-align: center;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
}

/* ── Toast ── */
.school-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  z-index: 10000;
  animation: toastIn .4s ease;
  box-shadow: 0 8px 25px rgba(0,0,0,.15);
}
.school-toast-success { background: #10b981; color: #fff; }
.school-toast-error { background: #ef4444; color: #fff; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Sent modal overlay ── */
.school-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.school-modal {
  background: #fff;
  border-radius: 24px;
  padding: 30px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
  text-align: center;
}
.school-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.school-modal-header h3 {
  color: #133d68;
  font-size: 18px;
  margin: 0;
}
.school-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #9ca3af;
  line-height: 1;
}
.school-sent-body p { margin: 8px 0; color: #4b5563; font-size: 14px; }
.school-sent-body .sf-btn { margin-top: 16px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .colegios-cards {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .colegios-card__img {
    min-height: 200px;
    max-height: 280px;
  }
}
@media (max-width: 699px) {
  .uni-testimonials { flex-direction: column; align-items: center; }
  .uni-column { max-width: 100%; }
  .sf-steps { padding: 0 10px; }
  .sf-step { width: 42px; height: 42px; font-size: 14px; }
  .sf-step-label { font-size: 9px; width: 60px; white-space: normal; }
  .sf-option { width: 80vw; padding: 12px 14px; font-size: 13px; }
  .sf-field { width: 90%; }
  .sf-nav-buttons { padding: 12px 10px 0; }
}
/* ═══════ END PAGE: pages/cursos-ingles-madrid-para-colegios.php ═══════ */

/* pages/actividades-en-ingles-madrid.php */
.actividades-page {
  font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
  color: #3a3f4b;
  background: #ffffff;
  line-height: 1.7;
}
.actividades-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.actividades-page .final-article-activities.page-width {
  max-width: min(1100px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 24px);
  padding-right: clamp(16px, 3vw, 24px);
}
.actividades-page .final-article-activities h3 {
  margin: 1.75rem 0 0.75rem;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: #133d68;
  font-weight: 700;
}
.actividades-page .final-article-activities h4 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  color: #133d68;
  font-weight: 600;
}
.actividades-page .final-article-activities .space-text {
  margin-bottom: 1rem;
  line-height: 1.7;
  font-size: 14px;
  color: #3a3f4b;
}
.actividades-page .final-article-activities ul.space-text {
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
}
.actividades-page .final-article-activities ul.space-text > li.space-text {
  margin-bottom: 1rem;
  list-style: disc;
}
.actividades-page .final-article-activities ul.space-text > li.space-text h4 {
  margin-top: 0;
}
.actividades-page .final-article-activities a {
  color: #133d68;
  text-decoration: underline;
}
.text-left { text-align: left; }

/* ── Hero ── */
.actividades-hero { padding: 28px 0 16px; }
.actividades-hero h1 {
  font-size: clamp(20px, 2.8vw, 28px);
  color: #133D68;
  margin-bottom: 6px;
  font-weight: 700;
}
.act-subtitle {
  font-size: 14px;
  color: #78909C;
  margin-bottom: 20px;
}
.hero-note {
  font-size: 12px;
  color: #6b7280;
  max-width: 900px;
  margin: 16px auto 0;
  line-height: 1.6;
}
.hero-note a { color: #133D68; text-decoration: underline; }

/* ── Full calendar layout (igual que Angular: flex left/right) ── */
.act-full-calendar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
}
.act-left-side {
  flex-basis: 48%;
  min-width: 0;
}
.act-right-side {
  flex-basis: 50%;
  min-width: 0;
}

/* ── Event types legend ── */
.act-event-types {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 0 20px;
  flex-wrap: wrap;
  gap: 8px;
}
.act-single-type {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #4c566a;
}
.act-circle {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  display: inline-block;
}

/* ── Calendar ── */
.act-calendar-container {
  width: 90%;
  margin: auto;
}
.act-select-month {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  color: #133D68;
  font-family: "Gotham Rounded", sans-serif;
  font-weight: 600;
  font-size: 16px;
}
.act-select-month i {
  margin: 0 20px;
  font-size: 1.4em;
  cursor: pointer;
  color: #133D68;
}
.act-select-month span { margin-left: 6px; }

.act-weekdays {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #133D68;
  font-size: 14px;
  margin-bottom: 12px;
  font-weight: 300;
}

.act-calendar {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.act-dayBox {
  width: 14.28%;
  height: 52px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 50000px;
  color: #133D68;
  font-size: 15px;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.act-dayBox:hover { background: rgba(19,61,104,0.05); }
.act-dayBox.act-selected {
  box-shadow: 0 5px 15px rgba(33,150,243,0.3);
  background: rgba(33,150,243,0.08);
}
.act-dayBox.act-weekend {
  color: #c4c4c4;
  pointer-events: none;
}
.act-dayBox.act-blank {
  pointer-events: none;
}
.act-day-number { line-height: 1; }
.act-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 2px;
}
.act-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* ── Level filter buttons ── */
.act-events-filter {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 16px 0;
  gap: 6px;
}
.act-level-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  color: white;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.act-level-btn:hover { opacity: 0.8; transform: scale(1.05); }
.act-level-btn.act-active {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* ── User buttons ── */
.act-students-btn {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
#act-my-activities {
  margin-top: 10px;
  padding: 12px;
}
.act-my-event {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: 13px;
}
.act-my-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Right side: events block ── */
.act-events-block {
  background: #f5f5f5;
  padding: 25px 15px;
  border-radius: 20px;
  min-height: 300px;
}
.act-events-block h2 {
  text-align: center;
  font-size: 16px;
  color: #133D68;
  margin-bottom: 16px;
}
.act-no-events {
  text-align: center;
  color: #78909C;
  font-size: 13px;
  padding: 30px 0;
}

/* ── Event card ── */
.act-event {
  width: 95%;
  margin: 12px auto;
  background: white;
  border-radius: 100px;
  padding: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 5px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s, transform 0.15s;
  border-left: 4px solid var(--ev-color, #78909C);
}
.act-event:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}
.act-event.act-event-past { opacity: 0.55; }

.act-event-time {
  flex-basis: 28%;
  display: flex;
  justify-content: center;
}
.act-time-circle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70px; height: 70px;
  border: 2px solid #133D68;
  border-radius: 50%;
  font-size: 13px;
  color: #133D68;
}
.act-time-circle hr {
  width: 60%;
  border: none;
  height: 1px;
  background: #c4c4c4;
  margin: 2px 0;
}
.act-event-content {
  flex: 1;
  padding-right: 12px;
}
.act-event-content h3 {
  font-size: 14px;
  color: #133D68;
  margin: 0 0 4px;
}
.act-levels-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.act-level-tag {
  padding: 2px 7px;
  color: white;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 600;
}
.act-level-tag.act-level-disabled {
  background: #c4c4c4 !important;
}
.act-past-text {
  color: #FC4E4E;
  font-size: 10px;
  margin-top: 3px;
}

/* ── Overlay + Modal ── */
.act-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.act-modal {
  background: white;
  border-radius: 14px;
  max-width: 500px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.act-modal-event { max-width: 580px; }
.act-overlay-login {
  align-items: center;
  justify-content: center;
  padding-top: 0;
  z-index: 100000 !important;
}
.act-modal-login {
  position: fixed !important;
  top: 84px;
  left: 50%;
  max-width: 360px;
  width: min(360px, calc(100% - 24px));
  padding: 0;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  overflow: hidden;
  background: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) !important;
  z-index: 100001 !important;
  display: block !important;
}
.act-modal-login .act-modal-header {
  background: #ececec;
  padding: 10px 14px;
  margin-bottom: 0;
}
.act-modal-login .act-modal-header h3 {
  color: #0b9db3;
  font-size: 30px;
  line-height: 1;
}
.act-modal-login .act-modal-close {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fc824e;
  color: #fff;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.act-modal-login form {
  padding: 14px;
}
.act-modal-login .act-form-group input {
  border-radius: 999px;
  height: 30px;
  font-size: 13px;
  padding: 6px 14px;
}
.act-modal-login .act-form-actions {
  margin-top: 10px;
  gap: 8px;
}
.act-btn-login {
  background: #8bc34a;
  color: #fff;
  border-radius: 999px;
  min-width: 88px;
  padding: 7px 14px;
  font-size: 13px;
}
.act-btn-login:hover { background: #7bb03f; }
.act-btn-guest {
  background: #fc824e;
  color: #fff;
  border-radius: 999px;
  min-width: 88px;
  padding: 7px 14px;
  font-size: 13px;
}
.act-btn-guest:hover { background: #f0713a; }
.act-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.act-modal-header h3 {
  font-size: 18px;
  color: #133D68;
  margin: 0;
}
.act-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #78909C;
  cursor: pointer;
  line-height: 1;
}

/* ── Form elements ── */
.act-form-group {
  margin-bottom: 12px;
}
.act-form-group input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
}
.act-form-group input:focus {
  border-color: #133D68;
  box-shadow: 0 0 0 2px rgba(19,61,104,0.1);
}
.act-form-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.act-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.act-btn:hover { transform: translateY(-1px); }
.act-btn-primary {
  background: #133D68;
  color: white;
}
.act-btn-primary:hover { background: #0d2d50; }
.act-btn-secondary {
  background: #e2e8f0;
  color: #4c566a;
}
.act-btn-danger {
  background: #FC4E4E;
  color: white;
}
.act-btn-danger:hover { background: #e03e3e; }
.act-btn-small {
  padding: 6px 14px;
  font-size: 12px;
}
.act-btn-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Event modal specifics ── */
#act-ev-desc {
  font-size: 13px;
  color: #4c566a;
  margin-bottom: 12px;
  line-height: 1.6;
}
.act-ev-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #133D68;
}
#act-ev-levels-info {
  margin-bottom: 12px;
}
.act-level-info {
  display: inline-block;
  margin: 2px 6px 2px 0;
  font-size: 12px;
  color: #4c566a;
}
.act-plazas-free { color: #4CAF50; font-weight: 600; }
.act-plazas-mid { color: #FC824E; font-weight: 600; }
.act-plazas-full { color: #FC4E4E; font-weight: 600; }
.act-past-msg {
  text-align: center;
  color: #FC4E4E;
  font-weight: 600;
  padding: 10px;
}

.act-ev-filters { margin: 12px 0; }
.act-filter-label {
  font-size: 13px;
  color: #78909C;
  margin-bottom: 8px;
}
.act-filter-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.act-modal-level-btn {
  padding: 6px 14px;
  border-radius: 50px;
  border: 2px solid #dbe4f0;
  background: white;
  color: #133D68;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.act-modal-level-btn:hover { border-color: #133D68; }
.act-modal-level-btn.act-active {
  background: #133D68;
  color: white;
  border-color: #133D68;
}

/* ── Toast ── */
.act-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  z-index: 3000;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  animation: actToastIn 0.4s ease;
}
.act-toast-success { background: #4CAF50; color: white; }
.act-toast-error { background: #FC4E4E; color: white; }
@keyframes actToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Band & Game (reutilizado) ── */
.actividades-band {
  position: relative;
  margin: 30px 0;
  padding: 40px 0 50px;
}
.band-bg {
  position: absolute;
  inset: 0;
  background: #f3f3f3;
  transform: skewY(-6deg);
  z-index: 0;
}
.actividades-band h2 {
  position: relative; z-index: 1;
  color: #7E57C2;
  font-size: 20px;
  margin-bottom: 6px;
}
.band-intro {
  position: relative; z-index: 1;
  font-size: 13px;
  color: #7c8696;
  margin-bottom: 18px;
}
.game-card {
  position: relative; z-index: 1;
  background: #ffffff;
  border-radius: 12px;
  padding: 22px 26px;
  text-align: left;
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  max-width: 760px;
  margin: 0 auto;
}
.actividades-band .game-card-ala {
  max-width: min(1100px, 100%);
  width: 100%;
  padding: 22px clamp(16px, 3vw, 32px);
}
.game-title {
  font-weight: 700;
  color: #7E57C2;
  margin-bottom: 10px;
  font-size: 18px;
}

/* ALA Game (legacy: título azul, intro centrada, puntuación “0 de 10”) */
.game-card-ala .game-title {
  text-align: center;
  color: #3498db;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin: 0 0 14px;
}
.game-card-ala .game-explanation {
  text-align: center;
  max-width: min(960px, 100%);
  margin: 0 auto 12px;
}
.game-card-ala .game-explanation .space-text {
  margin: 0 0 12px;
  font-size: 14px;
  color: #4c566a;
  line-height: 1.75;
}
.game-card-ala .game-explanation .space-text:last-child {
  margin-bottom: 0;
}

/* ── Game explanation (genérico) ── */
.game-explanation {
  margin-bottom: 16px;
  font-size: 13px;
  color: #4c566a;
  line-height: 1.7;
}

/* ── Game score ── */
.game-score {
  margin: 16px 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.game-score.text-center {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
}
.game-score-tally {
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.2;
}
.game-score.text-center .game-progress-bar {
  width: min(420px, 100%);
  flex-basis: auto;
  margin-top: 0;
}
.game-score-label { color: #4c566a; font-weight: 400; }
.game-counter-num { font-size: 22px; }
.game-score-low  .game-counter-num { color: #FC4E4E; }
.game-score-mid  .game-counter-num { color: #FF5722; }
.game-score-high .game-counter-num { color: #4CAF50; }

.game-progress-bar {
  flex-basis: 100%;
  height: 8px;
  background: #e8ecf1;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.game-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #FC4E4E, #FF9800, #4CAF50);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* ── Game letter ── */
.game-letter {
  padding: 20px;
  background: #f9fafc;
  border-radius: 10px;
  border: 1px solid #e0e5ec;
  margin: 18px 0 20px;
}
.game-letter p {
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  line-height: 1.9;
  font-size: 15px;
  color: #2c3e50;
}
.game-word {
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease;
  padding: 1px 2px;
  border-radius: 3px;
}
.game-word:hover {
  color: #1E88E5;
  background: rgba(30, 136, 229, 0.08);
}
.game-word-wrong {
  border-bottom: 1px dashed rgba(252, 78, 78, 0.35);
}
.game-word-corrected {
  color: #4CAF50 !important;
  font-weight: 600;
  text-decoration: none;
  background: rgba(76, 175, 80, 0.08);
  cursor: default;
}

/* ── Game modal hint ── */
.game-modal-hint {
  font-size: 13px;
  color: #4c566a;
  margin: 0 0 10px;
  padding: 0 20px;
}

/* ── Winner section ── */
.game-winner {
  margin-top: 20px;
  padding: 22px 26px;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border-radius: 10px;
  text-align: center;
}
.game-winner h3 {
  color: #2e7d32;
  margin-bottom: 10px;
  font-size: 18px;
}
.game-winner p { color: #4c566a; font-size: 13px; margin-bottom: 12px; }
.game-winner .act-form-group { max-width: 320px; margin: 0 auto 12px; }
.game-sent-ok {
  color: #2e7d32;
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}

/* ── Content article ── */
.actividades-content { padding: 30px 0 40px; }
.actividades-content h3 {
  color: #133D68;
  font-size: 16px;
  margin: 24px 0 10px;
}
.actividades-content p,
.actividades-content li {
  font-size: 13px;
  color: #4c566a;
  line-height: 1.7;
}
.actividades-content ul,
.actividades-content ol {
  margin: 12px 0 18px 20px;
}

/* ── Responsive ── */
@media (max-width: 999px) {
  .act-full-calendar {
    flex-direction: column;
  }
  .act-left-side,
  .act-right-side {
    flex-basis: 100%;
  }
  .act-calendar-container { width: 100%; }
}
@media (max-width: 699px) {
  .act-event { border-radius: 16px; padding: 10px; }
  .act-time-circle { width: 56px; height: 56px; font-size: 11px; }
  .act-event-content h3 { font-size: 13px; }
  .act-level-btn { width: 40px; height: 40px; font-size: 11px; }
  .act-dayBox { height: 42px; font-size: 13px; }
  .game-card { padding: 18px; }
  .act-modal { padding: 18px; }
  .act-modal-login { top: 64px; }
  .act-modal-login .act-modal-header h3 { font-size: 24px; }
}

/* pages/test-nivel-ingles.php */
.nivel-page {
  font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
  color: #1f2330;
  line-height: 1.7;
}

/* ── Layout ── */
.nivel-page .page-width { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.nivel-page h1 { margin-bottom: 0; text-align: center; }

/* ── Banner Header ── */
.nivel-banner {
  position: relative;
  width: 100%;
}

/* Desktop banner (≥700px) */
@media screen and (min-width: 700px) {
  .nivel-banner #nav-shape {
    position: relative;
    top: 0;
    z-index: 101;
    width: 100%;
    height: 28vw;
    overflow: hidden;
  }
  @media screen and (min-width: 1300px) {
    .nivel-banner #nav-shape {
      height: 22vw;
    }
  }
  .nivel-banner .nav-container {
    height: 99%;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .nivel-banner .nav-container .background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .nivel-banner .nav-container .background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
  .nivel-banner .nav-container .filter {
    position: absolute;
    background-color: #3F51B5;
    opacity: 0.25;
    width: 100%;
    height: 100%;
  }
  .nivel-banner #corner {
    position: absolute;
    width: 101%;
    transform: translateY(-98%);
  }
  .nivel-banner #corner-container {
    position: relative;
  }
  .nivel-banner #header-remover {
    width: 100%;
    display: block;
  }
  .nivel-banner .header-banner-with-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .nivel-banner .message-container {
    position: absolute;
    top: 58px;
    right: 0;
    transform: skewY(-10deg);
    color: white;
    display: flex;
    flex-direction: row;
    text-align: center;
    z-index: 101;
    justify-content: flex-end;
  }
  .nivel-banner .message-container .message {
    margin: 0 20px;
  }
  .nivel-banner .message-container .message:last-child {
    margin-right: 300px;
  }
  .nivel-banner .text-large {
    font-size: 22px;
    font-weight: 700;
  }
  .nivel-banner .text-small {
    font-size: 11px;
  }
  .nivel-banner .bubble-text {
    opacity: 0.85;
  }
  .nivel-banner #header-detail {
    position: absolute;
    top: 0;
    right: 0;
    width: 780px;
  }
  @media screen and (min-width: 700px) and (max-width: 1299px) {
    .nivel-banner #header-detail {
      width: 50%;
    }
  }
  .nivel-banner #nav-logo {
    position: absolute;
    z-index: 102;
    top: 5%;
    width: 8%;
    left: 11%;
    cursor: pointer;
  }
  @media screen and (min-width: 700px) and (max-width: 1299px) {
    .nivel-banner #nav-logo {
      top: 10%;
      width: 10%;
      left: 10%;
    }
  }
  .nivel-banner #nav-logo img {
    width: 100%;
    height: auto;
  }
  .nivel-banner .years-img {
    width: 150px;
    position: absolute;
    right: 4%;
    z-index: 102;
    top: 38%;
  }
}

/* Mobile banner (<700px) — alineado con nav-desktop-banner.component.scss legacy */
@media screen and (max-width: 699px) {
  .nivel-banner {
    position: relative;
    overflow: hidden;
  }
  .nivel-banner #nav-shape {
    position: relative;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 90vw;
    overflow: hidden;
  }
  .nivel-banner .nav-container {
    height: 99%;
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .nivel-banner .nav-container .background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .nivel-banner .nav-container .background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
  }
  .nivel-banner .nav-container .filter {
    position: absolute;
    background-color: #3F51B5;
    opacity: 0.25;
    width: 100%;
    height: 100%;
  }
  .nivel-banner #corner {
    position: absolute;
    width: 101%;
    left: 0;
    transform: translateY(-95%);
    pointer-events: none;
  }
  .nivel-banner #corner-container {
    position: relative;
  }
  .nivel-banner #header-remover {
    width: 100%;
    max-width: 100vw;
    display: block;
    vertical-align: bottom;
  }
  .nivel-banner .header-banner-with-text {
    display: none;
  }
  .nivel-banner .message-container {
    display: none;
  }
  .nivel-banner #header-detail {
    display: none;
  }
  .nivel-banner #nav-logo {
    position: absolute;
    top: 20vw;
    width: 30%;
    left: 35%;
    z-index: 102;
    pointer-events: auto;
  }
  .nivel-banner #nav-logo img {
    width: 100%;
    height: auto;
    display: block;
  }
  .nivel-banner .years-img {
    display: none;
  }

  /* Home móvil: logo + badge en columna (sin solapamiento) */
  .nivel-banner--brand-stack:has(+ main.inicio-page) {
    overflow: visible;
    margin-bottom: 18vw;
  }
  .nivel-banner--brand-stack:has(+ main.inicio-page) #nav-shape {
    height: 90vw;
    overflow: hidden;
  }
  .nivel-banner--brand-stack:has(+ main.inicio-page) .nivel-banner-brand {
    position: absolute;
    left: 0;
    right: 0;
    top: 10vw;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    pointer-events: none;
  }
  .nivel-banner--brand-stack:has(+ main.inicio-page) .nivel-banner-brand #nav-logo,
  .nivel-banner--brand-stack:has(+ main.inicio-page) .nivel-banner-brand .years-img {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    margin: 0;
  }
  .nivel-banner--brand-stack:has(+ main.inicio-page) .nivel-banner-brand #nav-logo {
    width: min(300px, 56vw);
    pointer-events: auto;
    text-align: center;
  }
  .nivel-banner--brand-stack:has(+ main.inicio-page) .nivel-banner-brand #nav-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 42vw;
    margin: 0 auto;
    object-fit: contain;
    object-position: center top;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.38));
  }
  .nivel-banner--brand-stack:has(+ main.inicio-page) .nivel-banner-brand .years-img {
    display: block;
    width: min(132px, 36vw);
    height: auto;
    flex-shrink: 0;
  }

  @media screen and (min-width: 700px) {
    .nivel-banner--brand-stack:has(+ main.inicio-page) .nivel-banner-brand {
      display: contents;
    }
    .nivel-banner--brand-stack:has(+ main.inicio-page) .nivel-banner-brand #nav-logo img {
      max-height: none;
    }
  }
  main.inicio-page .inicio-hero {
    padding: 0;
    margin-top: 0;
  }
  main.inicio-page .inicio-hero-text {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 28px 0 18px;
    margin-top: 0;
  }
  main.inicio-page .inicio-hero-text h1 {
    color: #133d68;
    font-size: clamp(1.2rem, 4.8vw, 1.65rem);
    line-height: 1.28;
    text-shadow: none;
    -webkit-text-stroke: 0;
    letter-spacing: normal;
  }
}

/* ── Intro Description ── */
.nivel-page .level-test-description {
  padding: 20px;
  max-width: 1100px;
  margin: auto;
}
.nivel-page .level-test-description p { margin: 10px 0; }
.nivel-page .level-test-description a {
  color: #f07759;
  text-decoration: none;
}
.nivel-page .level-test-description a strong {
  color: inherit;
  font-weight: 700;
}

/* ── Level Test CTA Coin ── */
@keyframes ltCoinGlitter {
  0%   { color: #fc764e; box-shadow: 0 10px 15px #ff00003d; border-color: #fc764e; }
  20%  { color: #fc4ef3; box-shadow: 0 10px 15px #ff00f73d; border-color: #fc4ef3; }
  40%  { color: #684efc; box-shadow: 0 10px 15px #0008ff3d; border-color: #684efc; }
  60%  { color: #4efcf3; box-shadow: 0 10px 15px #00ffff3d; border-color: #4efcf3; }
  80%  { color: #8BC34A; box-shadow: 0 10px 15px #00ff083d; border-color: #8BC34A; }
  100% { color: #fc764e; box-shadow: 0 10px 15px #ff00003d; border-color: #fc764e; }
}
.nivel-page .level-test-coin {
  margin: 15px auto 30px;
  display: flex;
  align-items: center;
  width: 300px;
  height: 200px;
  border-radius: 15px;
  justify-content: center;
  cursor: pointer;
  border: 5px solid #fc764e;
  animation: ltCoinGlitter 12s infinite ease-in-out;
  text-align: center;
}
.nivel-page .level-test-coin .bold { font-weight: 700; }
.nivel-page .level-test-coin .btn.red {
  background: #FC4E4E;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  margin-top: 10px;
}

/* ── Modal ── */
.nivel-page .lt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nivel-page .lt-modal {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  position: relative;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.nivel-page .lt-modal h3 { margin: 0 0 20px; color: #133D68; }
.nivel-page .lt-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #78909C;
}
.nivel-page .start-level-test {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
.nivel-page .button-container {
  position: relative;
  margin: auto 10px;
  width: 100px;
  overflow: hidden;
  transition: 0.5s;
  border-radius: 1000px;
  display: table;
  cursor: pointer;
}
.nivel-page .button-container.low-level { box-shadow: 0 5px 5px #2196f34d; }
.nivel-page .button-container.middle-level { box-shadow: 0 5px 5px #f3d4214d; }
.nivel-page .button-container.high-level { box-shadow: 0 5px 5px #f321214d; }
.nivel-page .button-container p {
  font-size: 14px;
  font-weight: 700;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 12px 20px;
  color: #fff;
  margin: 0;
}
.nivel-page .button-container.low-level p { background: #55bfee; }
.nivel-page .button-container.middle-level p { background: #fdc309; }
.nivel-page .button-container.high-level p { background: #fc764e; }
.nivel-page .button-container:hover { transform: scale(1.05); }

/* ── Actual Test ── */
.nivel-page .actual-test {
  position: relative;
  transition: all .3s ease-in-out;
  max-width: 500px;
  margin: 20px auto;
}
.nivel-page .info-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: auto;
}
.nivel-page .question-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  padding: 5px 10px;
  border-radius: 500px;
  color: white;
  background-color: #9E9E9E;
  font-size: 13px;
  font-weight: 600;
}
.nivel-page .progress-bar-container {
  background-color: #E0E0E0;
  border-radius: 500px;
  flex-basis: 75%;
  height: 6px;
}
.nivel-page .progressBar {
  background-color: #4CAF50;
  height: 6px;
  transition: width .3s ease-in-out;
  border-radius: 4000px;
  width: 0%;
}
.nivel-page .question-test {
  width: 95%;
  margin: auto;
}
.nivel-page .question-test h3 {
  text-align: center;
  padding: 0 10px;
  margin: 20px 0;
  color: #133D68;
}
.nivel-page .question-test.final-stage {
  text-align: center;
  font-size: 16px;
  display: block;
  color: #133D68;
}
.nivel-page .question-test.final-stage .card-block {
  padding: 20px;
  margin-top: 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: left;
  line-height: 1.8;
}

/* Options */
.nivel-page .options {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 20px 0;
  padding: 0 10px;
  list-style: none;
}
.nivel-page .options li {
  padding: 10px 15px 10px 35px;
  width: 46%;
  text-align: center;
  font-size: 13px;
  border-radius: 200px;
  margin: 8px 0;
  position: relative;
  box-sizing: border-box;
  transition: all .3s ease-in-out;
  box-shadow: 0 5px 5px rgba(0,0,0,0.12);
  cursor: pointer;
  background: #fff;
}
.nivel-page .options li:hover { box-shadow: 0 5px 10px rgba(0,0,0,0.2); }
.nivel-page .options li span {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
  border-radius: 50%;
  background-color: #78909C;
  color: white;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
}
.nivel-page .options li.error { color: #FC4E4E; }
.nivel-page .options li.error span { background-color: #FC4E4E; }
.nivel-page .options li.success { color: #4CAF50; }
.nivel-page .options li.success span { background-color: #4CAF50; }
.nivel-page .options li.disable { pointer-events: none; opacity: 0.7; }

/* Answer message */
.nivel-page .answerMessage {
  text-align: center;
  padding: 20px;
  margin: 20px 0;
  color: white;
  font-size: 14px;
  border-radius: 8px;
}
.nivel-page .answerMessage.success { background-color: #4CAF50; }
.nivel-page .answerMessage.error { background-color: #FC4E4E; }
.nivel-page .answerMessage.empty { margin: 0; padding: 0; }
.nivel-page .answerMessage.correction { padding: 12px; color: #4CAF50; background: #e8f5e9; }
.nivel-page .nextBtnContainer {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.nivel-page .nextBtn {
  width: 40%;
  background: #2196F3;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.nivel-page .nextBtn:disabled { opacity: 0.5; cursor: not-allowed; }
.nivel-page .nextBtn i { margin-left: 5px; }

/* ── Levels Section ── */
.nivel-page .text-center { text-align: center; }
.nivel-page .bold { font-weight: 700; }
.nivel-banner .text-large { font-size: 18px; }
.nivel-banner .text-small { font-size: 13px; }
.nivel-page .text-medium { font-size: 15px; }

.nivel-page .levels-graphic {
  text-align: center;
  margin: 0 auto;
}
.nivel-page .levels-graphic img {
  width: 100%;
  max-width: 1000px;
  height: auto;
}
.nivel-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.nivel-page .levels-title {
  text-align: center;
  margin: 20px auto;
  max-width: 600px;
  color: #133D68;
  font-size: 15px;
}

/* ── Level Navigation Pills ── */
.nivel-page .levels-nav {
  max-width: 600px;
  margin: 30px auto 0;
}
.nivel-page .levels-nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
  gap: 10px;
}
.nivel-page .levels-nav li {
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.nivel-page .levels-nav li:hover { transform: scale(1.1); }
.nivel-page .levels-nav li.active { box-shadow: 0 4px 12px rgba(0,0,0,0.3); transform: scale(1.15); }
.nivel-page .levels-nav li.indigo { background: #3F51B5; }
.nivel-page .levels-nav li.blue { background: #2196F3; }
.nivel-page .levels-nav li.teal { background: #009688; }
.nivel-page .levels-nav li.lime { background: #CDDC39; color: #333; }
.nivel-page .levels-nav li.orange { background: #FF9800; }
.nivel-page .levels-nav li.red { background: #FC4E4E; }
.nivel-page .levels-nav li.pink { background: #E91E63; }

/* ── Skew Block / Elemental Block ── */
.nivel-page .skew-block {
  position: relative;
  padding: 40px 0;
  overflow: hidden;
}
.nivel-page .skew-block::before {
  content: "";
  position: absolute;
  inset: -20px 0;
  transform: skewY(-6deg);
  z-index: 0;
}
.nivel-page .elemental-block { margin: 50px 0; }
.nivel-page .skew-block.indigo::before { background: #3F51B5; }
.nivel-page .skew-block.blue::before { background: #2196F3; }
.nivel-page .skew-block.teal::before { background: #009688; }
.nivel-page .skew-block.lime::before { background: #CDDC39; }
.nivel-page .skew-block.orange::before { background: #FF9800; }
.nivel-page .skew-block.red::before { background: #FC4E4E; }
.nivel-page .skew-block.pink::before { background: #E91E63; }

.nivel-page .levels-container {
  width: 100%;
  display: flex;
  overflow-x: auto;
  padding: 20px 0;
  position: relative;
  z-index: 1;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.nivel-page .levels-container::-webkit-scrollbar { display: none; }
.nivel-page .levels-container .spacer { min-width: 1px; }

/* ── Level Cards ── */
.nivel-page .level-expl {
  padding: 0;
  flex-shrink: 0;
  width: 85vw;
  margin: 0 7.5vw;
  cursor: pointer;
  transition: transform 0.3s;
  scroll-snap-align: center;
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  background: #fff;
}
.nivel-page .level-expl:hover { transform: scale(1.03); }
.nivel-page .level-expl.active { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,0.25); }

.nivel-page .level-expl-header {
  height: 40px;
  background-color: #F5F5F5;
  position: relative;
  overflow: visible;
  border-radius: 12px 12px 0 0;
}
.nivel-page .level-expl-image {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -30px;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: white;
  font-weight: 700;
  font-size: 16px;
  z-index: 2;
}
/* Badge colors per level */
.nivel-page .level-expl.indigo .level-expl-image { background-color: #3F51B5; }
.nivel-page .level-expl.blue .level-expl-image { background-color: #2196F3; }
.nivel-page .level-expl.teal .level-expl-image { background-color: #009688; }
.nivel-page .level-expl.lime .level-expl-image { background-color: #CDDC39; color: #333; }
.nivel-page .level-expl.orange .level-expl-image { background-color: #FF9800; }
.nivel-page .level-expl.red .level-expl-image { background-color: #FC4E4E; }
.nivel-page .level-expl.pink .level-expl-image { background-color: #E91E63; }

.nivel-page .level-expl-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #133D68;
  padding: 30px 20px 20px;
  box-sizing: border-box;
  margin: 0;
}

/* ── Level Description ── */
.nivel-page .level-description {
  padding: 0 20px 0 50px;
  max-width: 800px;
  margin: 20px auto;
}
.nivel-page .level-description ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nivel-page .level-description ul::after {
  content: "";
  position: absolute;
  top: 0;
  left: -18px;
  width: 1px;
  height: 100%;
  background-color: #E0E0E0;
}
.nivel-page .level-description li { margin-bottom: 20px; }
.nivel-page .level-description .bold {
  position: relative;
  display: block;
  margin-bottom: 4px;
  color: #133D68;
}
.nivel-page .level-description .bold::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -30px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 4px;
  z-index: 20;
}
/* Dot colors per level */
.nivel-page .level-description.indigo .bold::before { background-color: #3F51B5; }
.nivel-page .level-description.blue .bold::before { background-color: #2196F3; }
.nivel-page .level-description.teal .bold::before { background-color: #009688; }
.nivel-page .level-description.lime .bold::before { background-color: #CDDC39; }
.nivel-page .level-description.orange .bold::before { background-color: #FF9800; }
.nivel-page .level-description.red .bold::before { background-color: #FC4E4E; }
.nivel-page .level-description.pink .bold::before { background-color: #E91E63; }

/* ── Content articles ── */
.nivel-page .final-article {
  padding: 40px 20px;
}
.nivel-page .final-article p { margin: 12px 0; line-height: 1.8; }
.nivel-page .final-article a {
  color: #f07759;
  text-decoration: none;
}
.nivel-page .final-article a:hover {
  color: #e06545;
  text-decoration: none;
}
.nivel-page .final-article a strong {
  color: inherit;
  font-weight: 600;
}
.nivel-page .space-title2 {
  margin: 30px 0 15px;
  color: #133D68;
  font-size: 22px;
}
.nivel-page .space-title3 {
  margin: 20px 0 10px;
  color: #133D68;
  font-size: 17px;
}

/* ── CTA Button (Solicitar Prueba) ── */
.nivel-page .boton-reserva {
  text-align: center;
  margin: 30px 0;
}
.nivel-page .btn-reserva-nivel {
  text-decoration: none;
  display: inline-block;
}
.nivel-page .btn-reserva-nivel .btn.red {
  background: #FC4E4E;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 999px;
  display: inline-block;
}
.nivel-page .btn-reserva-nivel table { border-collapse: collapse; }
.nivel-page .btn-reserva-nivel td { padding: 2px 8px; }

/* ── Responsive ── */
@media screen and (min-width: 700px) {
  .nivel-page .level-expl {
    width: 30vw;
    margin: 0 35vw;
  }
  .nivel-page .elemental-block { margin: 80px 0 100px; }
  .nivel-page .options li { font-size: 15px; }
  .nivel-page .answerMessage { font-size: 15px; }
}
@media screen and (min-width: 1000px) {
  .nivel-page .elemental-block { margin: 100px 0; }
}
@media screen and (max-width: 699px) {
  .nivel-page .levels-graphic {
    height: 45vh;
    overflow: auto;
    padding: 20px;
    margin: 0;
    scroll-behavior: smooth;
  }
  .nivel-page .levels-graphic img {
    height: 99%;
    width: auto;
  }
  .nivel-page .options li { width: 90%; }
}

/* PAGE: pages/cursos-ingles-online.php */
/* Banner styles inherited from first .courses block above */

    .courses-container{
      margin:10px auto 40px;
    }

    .groupFilters{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:16px;
      margin:20px auto 35px;
    }

    .groupFilters .groupFilter{
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px 16px;
      min-width:190px;
      border-radius:14px;
      border:1px solid #e5e7eb;
      background:#fff;
      box-shadow:0 10px 20px rgba(0,0,0,0.08);
      cursor:pointer;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .groupFilters .groupFilter:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 26px rgba(0,0,0,0.12);
    }

    .groupFilters .filterIcon{
      width:44px;
      height:44px;
      border-radius:50%;
      background:#f3f4f6;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#6b7280;
    }

    .groupFilters .circleGroup{
      display:grid;
      gap:3px;
      grid-template-columns:repeat(2,10px);
      align-content:center;
      justify-items:center;
    }

    .groupFilters .circle{
      width:10px;
      height:10px;
      border-radius:50%;
      background:#9ca3af;
    }

    .groupFilters .circle.small{
      width:6px;
      height:6px;
    }

    .mastercourse-final-container{
      margin:40px auto;
    }

    .mastercourse-final-container .visible-container{
      background:#fff;
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 18px 40px rgba(0,0,0,0.12);
      max-width:1100px;
      margin:0 auto;
    }

    .final-mastercourse.top img{
      width:100%;
      height:240px;
      object-fit:cover;
      display:block;
    }

    .final-mastercourse.bottom{
      padding:26px 28px 32px;
    }

    .final-mastercourse-content{
      max-width:980px;
      margin:0 auto;
    }

    .final-mastercourses-list{
      margin-top:20px;
    }

    .courses-list{
      list-style:none;
      margin:0;
      padding:20px 0 30px;
      display:flex;
      flex-wrap:wrap;
      gap:22px;
      justify-content:center;
    }

    .courses-list .course{
      width:100%;
      max-width:520px;
      border-radius:0;
      background:transparent;
      border:0;
      box-shadow:none;
    }

    @media (min-width: 980px){
      .courses-list .course{
        width:47%;
      }
    }

    .courses-list .course a{
      display:flex;
      align-items:center;
      gap:18px;
      color:inherit;
      text-decoration:none;
    }

    .course-image{
      width:130px;
      height:130px;
      border-radius:50%;
      overflow:hidden;
      padding:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(59,130,246,0.1);
      flex:0 0 130px;
    }

    .course-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .course-text{
      padding:6px 0;
      text-align:left;
    }

    .course-title{
      margin:0 0 0;
      font-size:1rem;
      line-height:1.3;
      color:var(--course-color, #1f2937);
      font-weight:700;
    }

    .course-hours.btn{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin:0;
      padding:6px 14px;
      border-radius:999px;
      color:#fff;
      font-size:0.85rem;
      background:var(--course-color, #3b82f6);
      box-shadow:0 10px 18px rgba(0,0,0,0.12);
      white-space:nowrap;
    }

    .course-price{
      margin-top:6px;
      color:#9ca3af;
      font-size:0.85rem;
      display:flex;
      align-items:center;
      gap:6px;
    }

    .course-arrow-icon{
      width:16px;
      height:16px;
      fill:currentColor;
    }

    .courses .yellow{--course-color:#f6c42f;}
    .courses .green{--course-color:#22c55e;}
    .courses .light-blue{--course-color:#38bdf8;}
    .courses .teal{--course-color:#14b8a6;}
    .courses .red{--course-color:#ef4444;}
    .courses .deep-orange{--course-color:#f97316;}
    .courses .purple{--course-color:#8b5cf6;}
    .courses .deep-purple{--course-color:#6d28d9;}
    .courses .indigo{--course-color:#4f46e5;}
    .courses .blue{--course-color:#2563eb;}
    .courses .cyan{--course-color:#06b6d4;}
    .courses .light-green{--course-color:#84cc16;}
    .courses .amber{--course-color:#f59e0b;}
    .courses .orange{--course-color:#fb923c;}
    .courses .brown{--course-color:#a16207;}

    .courses .course.yellow,
    .courses .course.green,
    .courses .course.light-blue,
    .courses .course.teal,
    .courses .course.red,
    .courses .course.deep-orange,
    .courses .course.purple,
    .courses .course.deep-purple,
    .courses .course.indigo,
    .courses .course.blue,
    .courses .course.cyan,
    .courses .course.light-green,
    .courses .course.amber,
    .courses .course.orange,
    .courses .course.brown{
      border-color:var(--course-color);
    }

    .courses .course-image.yellow,
    .courses .course-image.green,
    .courses .course-image.light-blue,
    .courses .course-image.teal,
    .courses .course-image.red,
    .courses .course-image.deep-orange,
    .courses .course-image.purple,
    .courses .course-image.deep-purple,
    .courses .course-image.indigo,
    .courses .course-image.blue,
    .courses .course-image.cyan,
    .courses .course-image.light-green,
    .courses .course-image.amber,
    .courses .course-image.orange,
    .courses .course-image.brown{
      background:color-mix(in srgb, var(--course-color) 18%, #fff 82%);
    }

    .courses .course-hours.btn.yellow,
    .courses .course-hours.btn.green,
    .courses .course-hours.btn.light-blue,
    .courses .course-hours.btn.teal,
    .courses .course-hours.btn.red,
    .courses .course-hours.btn.deep-orange,
    .courses .course-hours.btn.purple,
    .courses .course-hours.btn.deep-purple,
    .courses .course-hours.btn.indigo,
    .courses .course-hours.btn.blue,
    .courses .course-hours.btn.cyan,
    .courses .course-hours.btn.light-green,
    .courses .course-hours.btn.amber,
    .courses .course-hours.btn.orange,
    .courses .course-hours.btn.brown{
      background:var(--course-color);
    }

    .questions{
      margin:50px auto 20px;
      background:#fff;
      border-radius:24px;
      box-shadow:0 18px 40px rgba(0,0,0,0.12);
      padding:30px 32px;
    }

    .question{
      margin:0 0 24px;
    }

    .question:last-child{
      margin-bottom:0;
    }

    .questions .space-text p{
      margin:6px 0;
    }

    @media (max-width:900px){
      .final-mastercourse.top img{height:200px;}
      .courses-list{padding:16px 0 24px;}
      .courses-list .course{max-width:100%;}
    }

    @media (max-width:720px){
      .final-mastercourse.bottom{padding:22px;}
      .courses-list .course{width:100%;}
      .groupFilters .groupFilter{min-width:160px;flex:1 1 160px;}
    }

    .groupFilters .groupFilter.active{
      border-color:#22c55e;
      box-shadow:0 12px 26px rgba(34,197,94,0.2);
      transform:translateY(-2px);
    }
    .groupFilters .groupFilter.active .filterIcon{
      background:rgba(34,197,94,0.12);
      color:#22c55e;
    }
    .groupFilters .groupFilter.active .circle{
      background:#22c55e;
    }
    .groupFilters .groupFilter.active .filterIcon i{
      color:#22c55e;
    }
    .groupFilters .groupFilter.active .filterName{
      color:#22c55e;
    }
    .groupFilters .groupFilter.active.online .circle{
      background:transparent;
      border:1px solid #22c55e;
    }

    .courses-list .course{
      transition:opacity .3s ease, transform .2s ease, box-shadow .2s ease;
    }
    .courses-list .course:not(.selected){
      opacity:0.3;
      pointer-events:none;
    }
    .courses-list .course:not(.selected) .course-image{
      filter:grayscale(1);
    }
    .courses-list .course:not(.selected) .course-hours.btn{
      background:#d1d5db !important;
    }

/* END PAGE: pages/cursos-ingles-online.php */


/* PAGE: pages/cursos-ingles-madrid.php */
/* Safe accessibility helper if your CSS doesn't include it */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* Banner styles inherited from first .courses block above */

    .courses-container{
      margin:10px auto 40px;
    }

    .groupFilters{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:16px;
      margin:20px auto 35px;
    }

    .groupFilters .groupFilter{
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px 16px;
      min-width:190px;
      border-radius:14px;
      border:1px solid #e5e7eb;
      background:#fff;
      box-shadow:0 10px 20px rgba(0,0,0,0.08);
      cursor:pointer;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .groupFilters .groupFilter[aria-pressed="true"]{
      border-color:#f04f7a;
      box-shadow:0 12px 26px rgba(240,79,122,0.2);
      transform:translateY(-2px);
    }

    .groupFilters .filterIcon{
      width:44px;
      height:44px;
      border-radius:50%;
      background:#f3f4f6;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#6b7280;
    }

    .groupFilters .circleGroup{
      display:grid;
      gap:3px;
      grid-template-columns:repeat(2,10px);
      align-content:center;
      justify-items:center;
    }

    .groupFilters .circle{
      width:10px;
      height:10px;
      border-radius:50%;
      background:#9ca3af;
    }

    .groupFilters .circle.small{
      width:6px;
      height:6px;
    }

    .mastercourse-final-container{
      margin:40px auto;
    }

    .mastercourse-final-container .visible-container{
      background:#fff;
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 18px 40px rgba(0,0,0,0.12);
      max-width:1100px;
      margin:0 auto;
    }

    .final-mastercourse.top img{
      width:100%;
      height:240px;
      object-fit:cover;
      display:block;
    }

    .final-mastercourse.bottom{
      padding:26px 28px 32px;
    }

    .final-mastercourse-content{
      max-width:980px;
      margin:0 auto;
    }

    .final-mastercourses-list{
      margin-top:20px;
    }

    .courses-list{
      list-style:none;
      margin:0;
      padding:20px 0 30px;
      display:flex;
      flex-wrap:wrap;
      gap:22px;
      justify-content:center;
    }

    .courses-list .course{
      width:100%;
      max-width:520px;
      border-radius:0;
      background:transparent;
      border:0;
      box-shadow:none;
    }

    @media (min-width: 980px){
      .courses-list .course{
        width:47%;
      }
    }

    .courses-list .course a{
      display:flex;
      align-items:center;
      gap:18px;
      color:inherit;
      text-decoration:none;
    }

    .course-image{
      width:130px;
      height:130px;
      border-radius:50%;
      overflow:hidden;
      padding:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(59,130,246,0.1);
      flex:0 0 130px;
    }

    .course-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .course-text{
      padding:6px 0;
      text-align:left;
    }

    .course-title{
      margin:0 0 0;
      font-size:1rem;
      line-height:1.3;
      color:var(--course-color, #1f2937);
      font-weight:700;
    }

    .course-hours.btn{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin:0;
      padding:6px 14px;
      border-radius:999px;
      color:#fff;
      font-size:0.85rem;
      background:var(--course-color, #3b82f6);
      box-shadow:0 10px 18px rgba(0,0,0,0.12);
      white-space:nowrap;
    }

    .course-price{
      margin-top:6px;
      color:#9ca3af;
      font-size:0.85rem;
      display:flex;
      align-items:center;
      gap:6px;
    }

    .course-arrow-icon{
      width:16px;
      height:16px;
      fill:currentColor;
    }

    .courses .yellow{--course-color:#f6c42f;}
    .courses .green{--course-color:#22c55e;}
    .courses .light-blue{--course-color:#38bdf8;}
    .courses .teal{--course-color:#14b8a6;}
    .courses .red{--course-color:#ef4444;}
    .courses .deep-orange{--course-color:#f97316;}
    .courses .purple{--course-color:#8b5cf6;}
    .courses .deep-purple{--course-color:#6d28d9;}
    .courses .indigo{--course-color:#4f46e5;}
    .courses .blue{--course-color:#2563eb;}
    .courses .cyan{--course-color:#06b6d4;}
    .courses .light-green{--course-color:#84cc16;}
    .courses .amber{--course-color:#f59e0b;}
    .courses .orange{--course-color:#fb923c;}

    .courses .course.yellow,
    .courses .course.green,
    .courses .course.light-blue,
    .courses .course.teal,
    .courses .course.red,
    .courses .course.deep-orange,
    .courses .course.purple,
    .courses .course.deep-purple,
    .courses .course.indigo,
    .courses .course.blue,
    .courses .course.cyan,
    .courses .course.light-green,
    .courses .course.amber,
    .courses .course.orange{
      border-color:var(--course-color);
    }

    .courses .course-image.yellow,
    .courses .course-image.green,
    .courses .course-image.light-blue,
    .courses .course-image.teal,
    .courses .course-image.red,
    .courses .course-image.deep-orange,
    .courses .course-image.purple,
    .courses .course-image.deep-purple,
    .courses .course-image.indigo,
    .courses .course-image.blue,
    .courses .course-image.cyan,
    .courses .course-image.light-green,
    .courses .course-image.amber,
    .courses .course-image.orange{
      background:color-mix(in srgb, var(--course-color) 18%, #fff 82%);
    }

    .courses .course-hours.btn.yellow,
    .courses .course-hours.btn.green,
    .courses .course-hours.btn.light-blue,
    .courses .course-hours.btn.teal,
    .courses .course-hours.btn.red,
    .courses .course-hours.btn.deep-orange,
    .courses .course-hours.btn.purple,
    .courses .course-hours.btn.deep-purple,
    .courses .course-hours.btn.indigo,
    .courses .course-hours.btn.blue,
    .courses .course-hours.btn.cyan,
    .courses .course-hours.btn.light-green,
    .courses .course-hours.btn.amber,
    .courses .course-hours.btn.orange{
      background:var(--course-color);
    }

    .questions{
      margin:50px auto 20px;
      background:#fff;
      border-radius:24px;
      box-shadow:0 18px 40px rgba(0,0,0,0.12);
      padding:30px 32px;
    }

    .question{
      margin:0 0 24px;
    }

    .question:last-child{
      margin-bottom:0;
    }

    .questions ul{
      margin:10px 0 0;
      padding-left:18px;
    }

    .questions li{
      margin:6px 0;
    }

    /* FAQ: títulos (h3) — azul corporativo y tamaño intermedio (no heredar 28px de .courses .space-title2) */
    .courses .questions .question h3.space-title2{
      color:#133d68;
      font-size:clamp(1.05rem, 2.1vw, 1.3rem);
      line-height:1.35;
      font-weight:700;
      margin:0 0 10px;
    }

    @media (max-width:900px){
      .final-mastercourse.top img{height:200px;}
      .courses-list{padding:16px 0 24px;}
      .courses-list .course{max-width:100%;}
    }

    @media (max-width:720px){
      .final-mastercourse.bottom{padding:22px;}
      .courses-list .course{width:100%;}
      .groupFilters .groupFilter{min-width:160px;flex:1 1 160px;}
    }

    .groupFilters .groupFilter.active{
      border-color:#22c55e;
      box-shadow:0 12px 26px rgba(34,197,94,0.2);
      transform:translateY(-2px);
    }
    .groupFilters .groupFilter.active .filterIcon{
      background:rgba(34,197,94,0.12);
      color:#22c55e;
    }
    .groupFilters .groupFilter.active .circle{
      background:#22c55e;
    }
    .groupFilters .groupFilter.active .filterIcon i{
      color:#22c55e;
    }
    .groupFilters .groupFilter.active .filterName{
      color:#22c55e;
    }
    .groupFilters .groupFilter.active.online .circle{
      background:transparent;
      border:1px solid #22c55e;
    }

    .courses-list .course{
      transition:opacity .3s ease, transform .2s ease, box-shadow .2s ease;
    }
    .courses-list .course:not(.selected){
      opacity:0.3;
      pointer-events:none;
    }
    .courses-list .course:not(.selected) .course-image{
      filter:grayscale(1);
    }
    .courses-list .course:not(.selected) .course-hours.btn{
      background:#d1d5db !important;
    }

/* END PAGE: pages/cursos-ingles-madrid.php */

/* PAGE: pages/tipos-de-formacion.php */
.pricing-page .text-center { text-align: center; }
.pf-course-title {
  color: #133D68;
  margin: 8px 0 6px;
  font-size: 24px;
}
.pf-course-hours {
  margin: 0 0 28px;
  color: #4b4b4b;
  font-weight: 600;
}
.pf-price {
  margin: 12px 0 22px;
  color: #4b4b4b;
  font-size: 20px;
}
.pf-description-block {
  max-width: 980px;
  margin: 0 auto 20px;
  padding: 6px 0 0;
  border-top: 1px solid #ececec;
}
.pf-description-item {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  border-bottom: 1px solid #ececec;
  padding: 12px 0;
}
.pf-description-title {
  color: #133D68;
  font-weight: 700;
  text-align: left;
}
.pf-description-content {
  color: #4b4b4b;
}
.pf-bridge {
  margin: 20px 0 12px;
  font-size: 28px;
  font-weight: 700;
}
.pf-bridge:before{
  content:"";
  display:inline-block;
  width:12px;height:12px;
  border:2px solid #E4C12F;
  border-radius:50%;
  margin-right:10px;
  transform: translateY(1px);
}
.pricing-page .pf-cta{margin: 22px auto 26px;}
.pricing-page .pf-cta .cd-desc-lt-btn{margin:0 auto;}
.pf-note {
  max-width: 980px;
  margin: 10px auto 0;
  color: #4b4b4b;
  font-size: 12pt;
  line-height: 1.55;
}
.pf-strike {
  color: #9ca3af;
  text-decoration: line-through;
  margin-right: 6px;
}
.pf-month {
  margin: 8px 0 16px;
  color: #4b4b4b;
}
.pf-yearly-list p {
  margin: 6px 0;
  color: #4b4b4b;
  font-weight: 700;
}
@media (max-width: 768px) {
  .pf-description-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .pf-description-title {
    text-align: left;
  }
  .pf-bridge {
    font-size: 22px;
  }
}
/* END PAGE: pages/tipos-de-formacion.php */


/* PAGE: pages/inicio.php */
:root {
    --ala-orange: #ff7a45;
    --ala-pink: #f24a82;
    --ala-purple: #6a2dbf;
    --ala-blue: #2d86ff;
    --ala-text: #1f2330;
    --ala-muted: #5d6576;
    --ala-bg: #f5f7fb;
    --ala-card: #ffffff;
    --ala-border: #e8ecf3;
  }

  .inicio-page {
    color: var(--ala-text);
    font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
  }

  .inicio-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .inicio-hero {
    position: relative;
    padding: 0;
  }

  .inicio-hero-media {
    position: relative;
    height: clamp(220px, 40vw, 360px);
    overflow: hidden;
  }

  .inicio-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 34, 58, 0.3), rgba(23, 34, 58, 0));
  }

  .inicio-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
  }

  .inicio-hero-fade {
    position: absolute;
    right: 0;
    bottom: -2px;
    width: min(760px, 88%);
    height: auto;
    display: block;
    pointer-events: none;
  }

  .inicio-hero-logo {
    position: absolute;
    left: 36px;
    top: 26px;
    width: min(190px, 38vw);
    height: auto;
    display: block;
    z-index: 2;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
  }

  .inicio-hero-stats {
    position: absolute;
    right: 150px;
    top: 85%;
    transform: translateY(-50%);
    display: flex;
    gap: 12px;
    z-index: 2;
  }

  .inicio-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2330;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
  }

  .inicio-hero-stat .stat-value {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
  }

  .inicio-hero-badge {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 140px;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.24));
  }

  .inicio-hero-text {
    text-align: center;
    padding: 42px 0 18px;
  }

  .inicio-hero-text h1 {
    font-size: clamp(22px, 3vw, 34px);
    margin: 0 0 12px;
    font-weight: 700;
    color: #133d68;
    text-shadow: none;
  }

  .inicio-hero-text p {
    color: var(--ala-muted);
    max-width: 880px;
    margin: 0 auto;
    font-size: 15px;
  }

  .inicio-mid-cta-wrap {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    margin: 8px 0 -10px;
    pointer-events: none;
  }

  .inicio-mid-cta {
    pointer-events: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 330px;
    padding: 10px 26px 12px;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(180deg, #ffbf21 0%, #ff9f1c 100%);
    box-shadow: 0 8px 0 rgba(255, 122, 69, 0.22);
    font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
  }

  .inicio-mid-cta strong {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.2px;
  }

  .inicio-mid-cta span {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
  }

  .inicio-goals {
    position: relative;
    margin: 24px auto 40px;
    padding: 56px 0 64px;
  }

  .inicio-goals::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, var(--ala-orange), var(--ala-pink), var(--ala-purple));
    border-radius: 28px;
    transform: none;
    z-index: -1;
  }

  .inicio-goals h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 24px;
    font-size: clamp(18px, 2.5vw, 26px);
  }

  .goal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
  }

  .goal-card {
    background: var(--ala-card);
    border-radius: 18px;
    padding: 16px 16px 20px;
    box-shadow: 0 12px 26px rgba(20, 20, 20, 0.14);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 360px;
    text-align: center;
  }

  .goal-card img {
    width: 100%;
    height: 190px;
    object-fit: contain;
    background: #f3f4f6;
    border-radius: 14px;
  }

  .goal-card h3 {
    margin: 0;
    color: #ff6b6b;
    font-size: 15px;
    font-weight: 700;
  }

  .goal-card p {
    margin: 0;
    font-size: 12px;
    color: var(--ala-muted);
  }

  .goal-card a {
    margin-top: auto;
    display: inline-block;
    text-align: center;
    padding: 8px 16px;
    width: 100%;
    background: linear-gradient(90deg, var(--ala-orange), var(--ala-pink));
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 8px 16px rgba(255, 122, 69, 0.35);
  }

  .inicio-recommended {
    text-align: center;
    padding: 32px 0;
  }

  .inicio-recommended h2 {
    font-size: clamp(18px, 2.5vw, 26px);
    margin-bottom: 12px;
  }

  .inicio-recommended p {
    color: var(--ala-muted);
    max-width: 880px;
    margin: 0 auto 18px;
    font-size: 14px;
  }

  .video-container {
    margin: 16px auto 24px;
    width: min(520px, 100%);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }

  .video-container.is-playing {
    width: min(600px, 100%);
  }

  .video-container img,
  .video-container iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
  }

  .video-container img {
    opacity: 0.9;
  }

  .stats-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }

  .stat-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    text-align: center;
  }

  .stat-pill {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 2px solid currentColor;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    min-width: 180px;
  }

  .stat-card strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: inherit;
  }

  .stat-card span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: inherit;
  }

  .stat-card.stat-pink {
    color: #ff4f9a;
  }

  .stat-card.stat-purple {
    color: #8b5cf6;
  }

  .stat-card.stat-blue {
    color: #3b82f6;
  }

  .stat-desc {
    margin: 10px 0 0;
    max-width: 320px;
    font-size: 11px;
    color: var(--ala-muted);
    line-height: 1.5;
    text-align: left;
  }

  /* Duplicate inicio-cta kept for cascade specificity */

  .contact-box {
    text-align: center;
    margin: 26px 0;
  }

  .contact-box a {
    display: inline-block;
    margin: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
  }

  .contact-box .btn-green {
    background: #35c759;
    color: #fff;
  }

  .contact-box .btn-blue {
    background: #2d86ff;
    color: #fff;
  }

  .inicio-page .blog-strip {
    background: var(--ala-bg);
    padding: 28px 0 50px;
  }

  .inicio-page .blog-strip h2 {
    text-align: center;
    font-size: clamp(18px, 2.5vw, 24px);
    margin-bottom: 14px;
  }

  .inicio-page .blog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .inicio-page .blog-card {
    background: var(--ala-card);
    border-radius: 14px;
    padding: 12px;
    border: 1px solid var(--ala-border);
    text-align: center;
  }

  .inicio-page .blog-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
  }

  .inicio-page .blog-card h4 {
    margin: 10px 0 8px;
    font-size: 12px;
    color: var(--ala-text);
  }

  .inicio-page .blog-card a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffcc00;
    color: #1f2330;
    font-weight: 600;
    text-decoration: none;
    font-size: 12px;
  }

  @media (max-width: 980px) {
    .inicio-hero-stats {
      right: 24px;
      top: auto;
      bottom: 26px;
      transform: none;
      flex-direction: column;
      align-items: flex-end;
    }

    .inicio-hero-badge {
      right: 18px;
      top: 18px;
      transform: none;
      width: 96px;
    }

    .goal-grid,
    .inicio-page .blog-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 640px) {
    .inicio-mid-cta-wrap {
      margin: 4px 0 -8px;
    }

    .inicio-mid-cta {
      min-width: 0;
      width: calc(100% - 64px);
      max-width: 320px;
      padding: 10px 18px 11px;
    }

    .inicio-mid-cta strong {
      font-size: 17px;
    }

    .inicio-mid-cta span {
      font-size: 15px;
    }

    .goal-grid,
    .inicio-page .blog-grid {
      grid-template-columns: 1fr;
    }

    .inicio-goals {
      padding: 36px 0;
    }
  }
/* END PAGE: pages/inicio.php */


/* PAGE: pages/american-language-academy-opiniones.php */
.opiniones-page {font-family:"Gotham Rounded","Gotham-Light","Helvetica Neue",Arial,sans-serif;color:#4b4b4b;line-height:1.6;background:#fff;}
  .opiniones-container{max-width:1200px;margin:0 auto;padding:0 40px;text-align:center;}
  .opiniones-hero h1{color:#133D68;font-size:22pt;margin:30px auto 10px;}
  .opiniones-subtitle{color:#133D68;font-size:13pt;margin:0 0 25px;}
  .opiniones-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:40px;}
  .opiniones-card{color:#4b4b4b;border-radius:10px;padding:20px;text-align:center;min-height:120px;background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.1);border-top:4px solid transparent;}
  .card-blue{border-top-color:#2196F3;}
  .card-teal{border-top-color:#009688;}
  .card-green{border-top-color:#8BC34A;}
  .card-icon{font-size:22px;margin-bottom:8px;color:#FC824E;}
  .opiniones-band{position:relative;padding:60px 0 80px;margin:20px 0 50px;}
  .band-gradient{position:absolute;inset:0;background:linear-gradient(90deg,#FC824E,#FF49B6,#9C27B0);transform:skewY(-6deg);z-index:0;}
  .opiniones-band h2{position:relative;z-index:1;color:#fff;font-size:16pt;margin-bottom:25px;}
  .opiniones-slider-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;}
  .opiniones-slider{position:relative;z-index:1;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px;scrollbar-width:thin;cursor:grab;}
  .opiniones-slider.is-dragging{cursor:grabbing;user-select:none;}
  .opiniones-slider::-webkit-scrollbar{height:8px;}
  .opiniones-slider::-webkit-scrollbar-thumb{background:#ffffff66;border-radius:999px;}
  .slider-btn{border:none;background:#ffffff33;color:#fff;font-size:22px;width:34px;height:34px;border-radius:999px;cursor:pointer;}
  .slider-btn:hover{background:#ffffff55;}
  .opinion-container{padding:30px;margin:0 auto;text-align:center;display:flex;flex-direction:row;overflow:auto;}
  .opinion-card{background:#fff;border-radius:10px;padding:18px;text-align:left;box-shadow:0 10px 10px rgba(0,0,0,.1);min-width:260px;scroll-snap-align:start;}
  .card{max-width:400px;width:80%;flex-shrink:0;margin:15px;}
  .opinion-initials{width:72px;height:72px;border-radius:50%;background:#009688;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 10px;font-size:30px;text-transform:uppercase;}
  .opinion-meta{text-align:center;margin:10px 0;font-size:16pt;color:#FC824E;font-family:"Gotham-Rounded-Medium","Gotham Rounded",Arial,sans-serif;}
  .opinion{margin-top:10px;text-align:left;font-size:16pt;font-family:Gotham-Light;color:#4b4b4b;}
  .opinion-author{text-align:right;font-family:"Gotham-Rounded-Light-Italic","Gotham Rounded",Arial,sans-serif;line-height:16px;color:#4b4b4b;}
  .opiniones-counter{position:relative;z-index:1;color:#fff;margin-top:10px;font-size:11pt;}

  .opiniones-section{padding:30px 0;}
  .opiniones-section h2{color:#133D68;font-size:16pt;margin-bottom:20px;}
  .reconocimiento-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:25px;}
  .reco-card{border-radius:10px;color:#4b4b4b;padding:18px;text-align:center;background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.1);border-top:4px solid transparent;}
  .reco-card h3{margin:10px 0 8px;color:#133D68;}
  .reco-card.purple{border-top-color:#9C27B0;}
  .reco-card.violet{border-top-color:#7E57C2;}
  .reco-card.indigo{border-top-color:#3F51B5;}
  .reco-icon{font-size:22px;color:#FC824E;}

  .instituciones-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:25px 0;}
  .institucion-card{border:1px solid #EBEBEB;border-radius:10px;padding:16px;font-size:11pt;color:#78909C;background:#fff;}
  .institucion-card img{max-width:120px;height:auto;display:block;margin:0 auto 8px;}

  .clientes-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;align-items:center;font-size:11pt;color:#78909C;}
  .clientes-logos img{max-height:28px;}

  .premios-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:center;}
  .premio-card{border:1px solid #EBEBEB;border-radius:10px;padding:16px;font-size:11pt;color:#78909C;background:#fff;}
  .premio-card img{max-width:120px;display:block;margin:0 auto;}

  .opiniones-banner{position:relative;margin:25px 0;}
  .opiniones-banner img{width:100%;display:block;border-radius:10px;}
  .banner-overlay{position:absolute;left:20px;bottom:16px;color:#fff;text-align:left;}
  .banner-overlay span{font-size:11pt;background:#fff;color:#133D68;padding:4px 8px;border-radius:999px;margin-right:6px;}
  .banner-overlay strong{display:block;font-size:16pt;margin-top:6px;}

  .asociaciones-band{margin-top:25px;}
  .asociaciones-intro{position:relative;z-index:1;margin:0 auto 22px;max-width:920px;text-align:center;font-size:11pt;line-height:1.85;color:#4b4b4b;}
  .asociaciones-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
  .opiniones-page .asociaciones-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .asociacion-card{background:#fff;border-radius:10px;padding:12px;box-shadow:0 10px 10px rgba(0,0,0,.1);}
  .asociacion-card img{max-width:120px;display:block;margin:0 auto;}
  .opiniones-page .asociaciones-columns{
    position:relative;z-index:1;display:flex;flex-direction:row;gap:18px;align-items:stretch;width:100%;
  }
  .opiniones-page .asociaciones-columns .column{
    flex:1;min-width:0;display:flex;flex-direction:column;gap:18px;
  }
  .opiniones-page .asociaciones-columns .company-pill{
    width:100%;max-width:none;margin:0;flex-shrink:0;border-radius:10px;box-shadow:0 10px 10px rgba(0,0,0,.1);scroll-snap-align:unset;
  }
  .opiniones-page .asociaciones-columns .company-pill .company-header{
    min-height:100px;height:auto;padding:12px 10px;
  }
  .opiniones-page .asociaciones-columns .company-pill .company-header .logo-full{width:90%;max-width:200px;}
  .opiniones-page .asociaciones-columns .company-pill .company-header .logo-full img{max-height:72px;width:auto;max-width:100%;object-fit:contain;}
  .opiniones-page .asociaciones-columns .company-pill .company-testimonial{
    padding:16px 14px;font-size:12px;line-height:1.75;color:#4b4b4b;background:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;
  }
  .opiniones-page .asociaciones-columns .company-pill .company-testimonial p{margin:0;}

  .opiniones-page .asociaciones-extras{
    position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:22px;width:100%;
  }
  .opiniones-page .asociaciones-extras .company-pill{
    width:100%;max-width:none;margin:0;flex-shrink:0;border-radius:10px;box-shadow:0 10px 10px rgba(0,0,0,.1);scroll-snap-align:unset;
  }
  .opiniones-page .asociaciones-extras .company-pill .company-header{
    min-height:100px;height:auto;padding:12px 10px;
  }
  .opiniones-page .asociaciones-extras .company-pill .company-header .logo-full{width:90%;max-width:200px;margin:0 auto;}
  .opiniones-page .asociaciones-extras .company-pill .company-header .logo-full img{max-height:72px;width:auto;max-width:100%;object-fit:contain;}
  .opiniones-page .asociaciones-extras .company-pill .company-testimonial{
    padding:16px 14px;font-size:12px;line-height:1.75;color:#4b4b4b;background:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;
  }
  .opiniones-page .asociaciones-extras .company-pill .company-testimonial p{margin:0;}

  .opiniones-text{padding:10px 0 40px;}
  .text-left{text-align:left;}
  .opiniones-text h2{color:#133D68;font-size:16pt;margin-top:35px;margin-bottom:18px;text-align:center;}
  .opiniones-text p{font-size:11pt;color:#4b4b4b;line-height:1.85;margin-bottom:18px;}
  .opiniones-text li{font-size:11pt;color:#4b4b4b;line-height:1.85;}
  .opiniones-text ul{margin:10px 0 0 18px;}

  .opiniones-text .final-article-opinions.page-width{
    max-width:1200px;margin:0 auto;padding:0 40px;box-sizing:border-box;
  }
  .opiniones-text .final-article-opinions.page-width + .final-article-opinions.page-width{padding-top:8px;}
  .opiniones-text .space-title2.text-center{
    color:#133D68;font-size:16pt;margin-top:35px;margin-bottom:18px;text-align:center;font-weight:700;
  }
  .opiniones-text > .opiniones-container.text-left > .final-article-opinions.page-width:first-child .space-title2.text-center{margin-top:0;}
  .opiniones-text .space-text{
    font-size:11pt;color:#4b4b4b;line-height:1.85;margin:0 0 18px;text-align:left;
  }
  .opiniones-text .space-text strong{color:#3a3f4b;font-weight:600;}
  .opiniones-text .space-text .italic{font-style:italic;}
  .opiniones-text .opiniones-blog-list{margin:10px 0 0 18px;padding:0;list-style:disc;text-align:left;}
  .opiniones-text .opiniones-blog-list a{color:#133D68;}

  @media (max-width:900px){
    .opiniones-container{padding:0 20px;}
    .opiniones-cards,.feature-container.pre-opinions,.reconocimiento-cards,.instituciones-grid,.premios-grid,.asociaciones-grid{grid-template-columns:1fr;}
    .opiniones-page .asociaciones-columns{flex-direction:column;}
    .opiniones-text .final-article-opinions.page-width{padding:0 10px;}
    .slider-btn{display:none;}
    .opinion-container{padding:20px;}
  }
/* END PAGE: pages/american-language-academy-opiniones.php */


/* PAGE: pages/terminos-y-condiciones.php — (estilos principales arriba, bloque duplicado eliminado) */
/* END PAGE: pages/terminos-y-condiciones.php */


/* PAGE: pages/academias-de-ingles-madrid.php */
.academias-page {
    font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
    color: #3b3f4b;
    line-height: 1.6;
    background: #fff;
  }

  .page-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .intro h1,
  .intro h2 {
    color: #2b8bd7;
    margin-bottom: 12px;
  }

  .intro h1 {
    font-size: 28px;
  }

  .intro h2 {
    font-size: 22px;
  }

  .space-text {
    margin: 12px 0;
    font-size: 14px;
    color: #4c566a;
  }

  .color-circles-block {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 30px 0;
    flex-wrap: wrap;
  }

  .border-circle {
    width: 155px;
    height: 155px;
    border-radius: 50%;
    border: 3px solid #ccc;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .border-circle .circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .border-circle .top-block {
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: none !important;
    width: auto;
    height: auto;
  }

  .border-circle .bottom-block {
    font-size: 11px;
    line-height: 1.3;
    color: #4b4b4b;
  }

  .border-circle.blue { border-color: #2196F3; }
  .border-circle.blue .top-block { color: #2196F3; }
  .border-circle.green { border-color: #8BC34A; }
  .border-circle.green .top-block { color: #8BC34A; }
  .border-circle.purple { border-color: #9C27B0; }
  .border-circle.purple .top-block { color: #9C27B0; }
  .border-circle.red { border-color: #FF5252; }
  .border-circle.red .top-block { color: #FF5252; }
  .border-circle.orange { border-color: #FF9800; }
  .border-circle.orange .top-block { color: #FF9800; }

  @media (max-width: 600px) {
    .color-circles-block { gap: 14px; }
    .border-circle { width: 120px; height: 120px; padding: 12px; }
    .border-circle .top-block { font-size: 22px; }
    .border-circle .bottom-block { font-size: 10px; }
  }

  .academy-block {
    margin: 30px auto;
  }

  .academy-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    align-items: center;
  }

  .academy-media {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(27, 45, 85, 0.12);
  }

  .academy-media iframe {
    width: 100%;
    display: block;
  }

  .academy-img-container img {
    width: 100%;
    display: block;
  }

  .academy-params h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #2b8bd7;
  }

  .academy-params p {
    font-size: 14px;
    color: #4c566a;
  }

  /* Timeline: línea azul claro + círculos rellenos; último ítem círculo hueco */
  .caracs-academy {
    list-style: none;
    margin: 16px 0 0;
    padding: 8px 0 10px;
    position: relative;
    color: #5d6576;
    font-size: 14px;
    line-height: 1.55;
  }

  .caracs-academy::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 0.55em;
    bottom: 0.55em;
    width: 2px;
    background: #90caf9;
    border-radius: 2px;
    z-index: 0;
  }

  .caracs-academy li {
    position: relative;
    padding: 0 0 16px 36px;
    margin: 0;
    z-index: 1;
  }

  .caracs-academy li:last-child {
    padding-bottom: 2px;
  }

  .caracs-academy li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.42em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #64b5f6;
    border: 2px solid #64b5f6;
    box-sizing: border-box;
    z-index: 1;
    transform: translateY(-1px);
  }

  .caracs-academy li:last-child::before {
    background: #fff;
    border-color: #64b5f6;
  }

  .skew-block {
    position: relative;
    margin: 30px 0;
    padding: 30px 0;
  }

  .skew-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #f5f7fb;
    transform: skewY(-4deg);
    z-index: 0;
  }

  .skew-block.blue::before {
    background: linear-gradient(90deg, #1c5ed9, #2ea0ff);
  }

  .skew-block-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
  }

  .pic-slide-academy .card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    background: #fff;
  }

  .pic-slide-academy img {
    width: 100%;
    display: block;
    height: 180px;
    object-fit: cover;
  }

  .pic-slide-academy h5 {
    margin: 10px 0 0;
    font-size: 13px;
    color: #4c566a;
  }

  .text-center { text-align: center; }
  .text-blue { color: #2b8bd7; }
  .centered { text-align: center; }

  .slider-teachers {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 25px;
    border-radius: 16px;
    margin-top: 20px;
    perspective: 1000px;
  }
  .slider-teachers > * {
    position: relative;
    z-index: 2;
  }

  .single-teacher {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transition: transform 0.8s ease-in-out;
    cursor: pointer;
  }
  .single-teacher.flipao {
    transform: rotateY(180deg);
  }
  .teacher-front,
  .teacher-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 16px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  .teacher-front {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 20px;
    align-items: center;
  }
  .teacher-back {
    position: absolute;
    top: 0; left: 0; right: 0;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    gap: 10px;
    text-align: center;
  }

  .teacher-pic img {
    width: 100%;
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
  }

  .know-teacher {
    margin-top: 10px;
    background: #2b8bd7;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12px;
    cursor: pointer;
    transition: background .2s;
  }
  .know-teacher:hover { background: #1a7ac0; }

  .teacher-name {
    font-size: 18px;
    font-weight: 700;
    color: #2b8bd7;
  }

  .teacher-caption {
    font-size: 13px;
    color: #4c566a;
    margin: 6px 0;
    font-style: italic;
  }

  .teacher-place {
    font-size: 12px;
    color: #64748b;
  }

  .teacher-countries img,
  .teacher-place .teacher-flag img {
    width: 28px;
    vertical-align: middle;
    margin-left: 4px;
  }

  .teacher-interests {
    font-size: 13px;
    color: #4c566a;
    line-height: 1.6;
    padding: 0 10px;
  }

  .contact-form-block {
    position: relative;
    margin: 48px auto 72px;
    padding: 28px 0 16px;
    overflow: visible;
  }

  .contact-form-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: min(58vw, 440px);
    height: 150px;
    background: linear-gradient(120deg, #4fc3f7 0%, #b3e5fc 48%, rgba(227, 242, 252, 0.45) 78%, transparent 100%);
    transform: rotate(-11deg) translate(-6%, -10%);
    transform-origin: top left;
    z-index: 0;
    pointer-events: none;
  }

  .intro.contact-form-block > .contact-form-section-title,
  .contact-form-block > .contact-form-section-title {
    position: relative;
    z-index: 1;
    color: #42a5f5;
    font-size: clamp(22px, 2.8vw, 28px);
    font-weight: 700;
    margin: 0 auto 22px;
    text-align: center;
  }

  .contact-seo-form-container {
    position: relative;
    z-index: 1;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 32px rgba(27, 45, 85, 0.1);
  }

  .form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 22px 16px 24px;
    background: #7cb342;
    text-align: center;
  }

  .icon-form-container {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-form-container i {
    font-size: 1.85rem;
    line-height: 1;
  }

  .contact-title {
    font-size: clamp(15px, 2.1vw, 18px);
    margin: 0;
    color: #fff;
    font-weight: 700;
    line-height: 1.38;
    max-width: 24rem;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px 10px;
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    border: 1px solid #cfd8dc;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
  }

  .contact-form textarea {
    border-radius: 22px;
    min-height: 112px;
    resize: vertical;
  }

  .contact-form .ala-recaptcha-field {
    display: flex;
    justify-content: center;
    margin: 4px 0 2px;
  }

  .contact-form .terms {
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    line-height: 1.45;
    cursor: pointer;
  }

  .contact-form .terms a {
    color: #e53935;
    font-weight: 600;
    text-decoration: underline;
  }

  .submit-btn {
    width: 100%;
    background: #90a4ae;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    margin-top: 4px;
  }

  .submit-btn:hover {
    background: #78909c;
  }

  .contact-recaptcha-foot {
    font-size: 10px;
    line-height: 1.45;
    color: #94a3b8;
    text-align: center;
    margin: 0;
    padding: 0 18px 18px;
  }

  .contact-recaptcha-foot a {
    color: #64748b;
    text-decoration: underline;
  }

  @media (max-width: 900px) {
    .academy-content {
      grid-template-columns: 1fr;
    }

    .teacher-front {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .teacher-left {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .teacher-pic { max-width: 140px; }
  }
/* END PAGE: pages/academias-de-ingles-madrid.php */


/* (trabaja CSS moved to earlier section) */


/* (ALA page styles consolidated above) */


/* PAGE: pages/certificar-nivel-ingles.php */
.certificar-page {
    background: #ffffff;
    color: #1f2330;
    font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    padding: 20px 0 60px;
  }

  .page-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Sección introductoria */
  .description {
    margin: 30px auto 40px;
  }

  .description h1 {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    color: #03a9f4;
    margin: 0 0 24px;
    line-height: 1.3;
  }

  .space-text {
    margin: 16px 0;
    line-height: 1.8;
    font-size: 16px;
    color: #1f2330;
  }

  /* Sección de preparación con gradiente */
  .preparation-section {
    background: linear-gradient(90deg, #ff7a45 0%, #f24a82 50%, #6a2dbf 100%);
    padding: 60px 20px;
    margin: 40px 0;
    position: relative;
  }

  .preparation-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .preparation-title {
    text-align: center;
    color: #ffffff;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    margin: 0 0 40px;
  }

  /* Cards de preparación – estructura Angular */
  .certificar-page .main-course-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2%;
    margin-bottom: 40px;
  }

  .certificar-page .main-course {
    max-width: 375px;
    margin: 15px;
    padding: 0;
    position: relative;
    overflow: hidden;
    padding-bottom: 60px;
    user-select: auto;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

  .certificar-page .main-course-image {
    background-position: center;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
  }

  .certificar-page .main-course-image.toefl-content {
    background-image: url(/assets/images/banners/examenes-puntuacion-numerica.jpg);
  }

  .certificar-page .main-course-image.languagecert-content {
    background-image: url(/assets/images/banners/london-background.webp);
  }

  .certificar-page .course-card-image {
    width: 50%;
    margin: auto;
  }

  .certificar-page .main-course-content {
    padding: 25px;
  }

  .certificar-page .main-course-title {
    margin-bottom: 15px;
    font-size: 1.15rem;
    color: #d53a3a;
    font-weight: 700;
  }

  .certificar-page .main-course-text {
    text-align: left;
    font-size: 15px;
    line-height: 1.6;
    color: #1f2330;
  }

  .certificar-page .main-course .btn.red {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80%;
    margin: 15px auto;
    background: #d53a3a;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    transition: background 0.3s ease;
    display: block;
  }

  .certificar-page .main-course .btn.red:hover {
    background: #b82e2e;
  }

  .other-solutions-wrapper {
    text-align: center;
    margin-top: 30px;
  }

  .btn-yellow {
    display: inline-block;
    background: #ffd700;
    color: #1f2330;
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .btn-yellow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }

  .btn-text-main {
    display: block;
  }

  .btn-text-sub {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
  }

  /* Sección centro examinador – estructura Angular */
  .test-centers {
    justify-content: center;
    padding: 5% 0;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: 50px auto;
  }

  .test-centers #main-course-title {
    width: 100%;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    color: #133d68;
    margin: 0 0 20px;
  }

  .test-centers .main-course-image.toefl-test-center {
    background-image: url(/assets/images/logos/centro-examinador-toefl.webp);
  }

  .test-centers .main-course-image.languagecert-test-center {
    background-image: url(/assets/images/logos/centro-examinador-languagecert.webp);
  }

  /* Sección de contenido – estructura Angular */
  .certificar-page .text {
    margin: 40px auto;
  }

  .certificar-page .question {
    margin: 0 0 24px;
  }

  .certificar-page .question:last-child {
    margin-bottom: 0;
  }

  .certificar-page .space-title2 {
    margin: 30px 0 15px;
    color: #133d68;
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    line-height: 1.3;
  }

  .certificar-page h2.space-title2 {
    font-size: clamp(20px, 3vw, 26px);
  }

  .certificar-page .question .space-text p {
    margin: 6px 0;
  }

  /* Sección de contacto */
  .contact-section {
    text-align: center;
    margin: 60px auto 40px;
    padding: 40px 20px;
    background: #f5f7fb;
    border-radius: 18px;
  }

  .contact-title {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    color: #133d68;
    margin: 0 0 16px;
  }

  .contact-text {
    font-size: 16px;
    color: #5d6576;
    margin: 12px 0;
  }

  .contact-phone {
    margin: 20px 0;
  }

  .phone-link {
    display: inline-block;
    background: #44d53a;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    transition: background 0.3s ease;
  }

  .phone-link:hover {
    background: #3ac530;
  }

  .btn-green {
    display: inline-block;
    background: #44d53a;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    margin-top: 12px;
    transition: background 0.3s ease;
  }

  .btn-green:hover {
    background: #3ac530;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .preparation-section {
      padding: 40px 15px;
    }

    .certificar-page .main-course-container {
      flex-direction: column;
      align-items: center;
    }

    .certificar-page .main-course {
      max-width: 100%;
      width: 100%;
    }

    .test-centers {
      flex-direction: column;
      align-items: center;
    }

    .test-centers .main-course {
      max-width: 100%;
      width: 100%;
    }

    .certificar-page .text {
      padding: 0 10px;
    }

    .contact-section {
      padding: 30px 15px;
    }
  }

  @media (max-width: 480px) {
    .description h1 {
      font-size: 22px;
    }

    .preparation-title {
      font-size: 20px;
    }

    .certificar-page .main-course-title {
      font-size: 1rem;
    }

    .test-centers .main-course-title {
      font-size: 1rem;
    }

    .certificar-page .space-title2 {
      font-size: 18px;
    }

    .btn-yellow,
    .btn-red,
    .btn-green,
    .phone-link {
      width: 100%;
      display: block;
      text-align: center;
    }
  }
/* END PAGE: pages/certificar-nivel-ingles.php */


/* (colegios CSS consolidado en primer bloque) */


/* (actividades CSS movido al primer bloque) */


/* PAGE: pages/ingles-para-empresas.php */
.empresas-page {
    font-family: "Gotham Rounded", "Helvetica Neue", Arial, sans-serif;
    color: #1f2330;
    line-height: 1.6;
    overflow-x: hidden;
  }

  .empresas-page .page-width {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
  }

  /* HERO SECTION – img-container / #top-part */
  .empresas-page .img-container {
    position: relative;
    top: 0;
    width: 100%;
  }

  .empresas-page #top-part {
    background-image: url("/assets/images/home/ingles-para-empresas-fondo.png");
    background-repeat: no-repeat;
    background-position-x: 54%;
    background-size: cover;
  }

  .empresas-page .companies {
    z-index: 1;
    position: relative;
  }

  /* Main container: left + right side-by-side */
  .empresas-page .main-img-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
  }

  /* "INGLÉS PARA EMPRESAS" top-left label */
  .empresas-page #main-text {
    top: 0;
    left: 0;
    margin-top: 16px;
    margin-left: 5%;
    position: absolute;
    font-size: 17px;
    font-family: 'Gotham-Rounded-Bold', sans-serif;
    color: white;
    width: 50%;
  }

  .empresas-page .companies h1 {
    font-size: 34px;
    text-align: left;
    margin-bottom: 20px;
    color: white;
  }

  .empresas-page .companies h2 {
    text-align: left;
    margin-bottom: 20px;
    color: white;
    font-family: 'gotham-bold', sans-serif;
  }

  /* LEFT CONTENT */
  .empresas-page #left-content {
    margin-top: 5rem;
    width: 500px;
  }

  .empresas-page #left-content h1 {
    color: white;
    font-size: 45px;
  }

  .empresas-page #left-content h2 {
    color: white;
    font-family: 'gotham-bold', sans-serif;
  }

  .empresas-page .companies-intro {
    color: white;
  }

  .empresas-page .companies-intro p {
    margin-bottom: 15px;
    line-height: 1.7;
    font-size: 15px;
  }

  .empresas-page .companies-intro a,
  .empresas-page .company-open-english a {
    color: #FC824E !important;
    text-decoration: underline;
  }
  /* Mantener clase por compatibilidad (sin override visual) */
  .empresas-page .companies-intro a.empresas-cert-link{ color: inherit; }

  /* PREMIOS */
  .empresas-page #premios-container {
    display: flex;
    justify-content: center;
  }

  .empresas-page .cinta-premio {
    width: 25%;
    box-sizing: border-box;
    margin: 30px 3px 0;
  }

  .empresas-page .cinta-premio img {
    width: 100%;
    height: auto;
  }

  /* RIGHT CONTENT – Calendar area */
  .empresas-page #right-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8rem;
  }

  .empresas-page #btn-right-content {
    display: flex;
    gap: 10px;
  }

  .empresas-page .btn-white-outline {
    background-color: rgba(255, 255, 255, 0);
    border: white 1px solid;
    font-family: 'Gotham-Rounded-Book', sans-serif;
    color: white;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.305);
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 14px;
    transition: background-color 0.5s ease, color 0.5s ease;
  }

  .empresas-page .btn-white-outline:hover {
    background-color: white;
    color: black;
  }

  /* White outline box (text-over-calendar, calendar-div) */
  .empresas-page .white-outline-box {
    color: white;
    text-align: center;
    margin-top: 20px;
    border: white 1px solid;
    border-radius: 15px;
    padding: 20px;
  }

  .empresas-page #text-over-calendar {
    min-width: 600px;
  }

  .empresas-page #text-over-calendar p {
    color: white;
    margin-bottom: 5px;
    font-size: 15px;
  }

  /* CALENDAR DIV – the main calendar widget */
  .empresas-page #calendar-div {
    color: #133d68;
    background-color: white;
    border-radius: 50px;
    margin-top: 30px;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 0.45rem rgba(0, 0, 0, 0.381));
    padding: 25px;
    width: 65%;
    max-width: 358px;
    min-height: 401px;
    height: fit-content;
    overflow: hidden;
    border: none;
  }

  .empresas-page #calendar-div p {
    color: #133d68;
    margin-bottom: 8px;
    font-size: 14px;
  }

  /* Calendar inner structure */
  .empresas-page .calendar_container {
    margin-top: 10px;
  }

  .empresas-page .select_month {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 14px;
    font-family: "Gotham Rounded","Gotham-Rounded-Medium",sans-serif;
    color: #133d68;
    font-weight: 600;
    font-size: 15px;
  }

  .empresas-page .select_month i {
    margin: 0 20px;
    font-size: 1.3em;
    cursor: pointer;
    transition: color .2s;
  }

  .empresas-page .select_month i:hover {
    color: #0084ff;
  }

  .empresas-page .weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0 0 8px 0;
    font-family: "Gotham Rounded","Gotham-Rounded-Light",sans-serif;
    color: #133d68;
    font-size: 13px;
  }

  .empresas-page .weekdays li {
    padding: 4px 0;
  }

  .empresas-page .calendar.appointments {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 10px;
    list-style: none;
    padding: 0;
    margin-top: 0;
  }

  .empresas-page .dayBox {
    width: 100%;
    aspect-ratio: 1;
    max-height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-family: "Gotham Rounded","Gotham-Rounded-Light",sans-serif;
    font-size: 14px;
    color: #133d68;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
  }

  .empresas-page .dayBox:not(.weekend):not(.empty-day):hover {
    background: rgba(19, 61, 104, .1);
  }

  .empresas-page .dayBox.weekend {
    color: #c5c5c5;
    pointer-events: none;
    cursor: default;
  }

  .empresas-page .dayBox.past-day {
    color: #c5c5c5;
    pointer-events: none;
    cursor: default;
  }

  .empresas-page .dayBox.empty-day {
    pointer-events: none;
  }

  .empresas-page .dayBox.selected {
    background: #133d68;
    color: #fff;
    box-shadow: 0 5px 15px rgba(19, 61, 104, .25);
    font-weight: 700;
  }

  .empresas-page .dayBox.today-day {
    border: 2px solid #133d68;
    font-weight: 700;
  }

  /* Next / Confirm / Submit button */
  .empresas-page .emp-next-btn,
  .empresas-page #empNextBtn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 999px;
    background: #133d68;
    color: #fff;
    font-family: "Gotham Rounded","Gotham-Rounded-Bold",sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
    margin-top: 10px;
  }

  .empresas-page .emp-next-btn:hover,
  .empresas-page #empNextBtn:hover {
    background-color: white;
    color: #133d68;
    border: solid 1px #133d68;
  }

  .empresas-page .emp-back-btn {
    background: none;
    border: none;
    color: #133d68;
    font-size: 13px;
    cursor: pointer;
    font-family: "Gotham Rounded","Gotham-Rounded-Book",sans-serif;
    margin-bottom: 10px;
    padding: 0;
  }
  .empresas-page .emp-back-btn:hover { text-decoration: underline; }

  .empresas-page .emp-selected-date-label {
    text-align: center;
    font-family: "Gotham Rounded","Gotham-Rounded-Bold",sans-serif;
    font-size: 15px;
    color: #133d68;
    margin-bottom: 14px;
  }

  .empresas-page .emp-hours-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
  }

  .empresas-page .emp-hour-btn {
    width: 25%;
    min-width: 70px;
    padding: 8px 4px;
    background: #fff;
    border: 2px solid #133d68;
    border-radius: 999px;
    color: #133d68;
    font-family: "Gotham Rounded","Gotham-Rounded-Book",sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s, color .2s;
  }

  .empresas-page .emp-hour-btn:hover {
    background: #133d68;
    color: #fff;
  }

  .empresas-page .emp-hour-btn.emp-hour-selected {
    background: #133d68;
    color: #fff;
    box-shadow: 0 4px 10px rgba(19, 61, 104, .3);
  }

  .empresas-page .emp-no-hours {
    text-align: center;
    color: #999;
    font-size: 13px;
  }

  .empresas-page .emp-form-header {
    text-align: center;
    font-family: "Gotham Rounded","Gotham-Rounded-Bold",sans-serif;
    font-size: 15px;
    color: #133d68;
    margin-bottom: 4px;
  }

  .empresas-page .emp-timezone-label {
    text-align: center;
    font-size: 12px;
    color: #8a9ab5;
    margin-bottom: 8px;
  }

  .empresas-page .emp-reserva-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .empresas-page .emp-reserva-form input[type="text"],
  .empresas-page .emp-reserva-form input[type="email"],
  .empresas-page .emp-reserva-form input[type="tel"],
  .empresas-page .emp-reserva-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #c5cfe0;
    border-radius: 999px;
    font-family: "Gotham Rounded","Gotham-Rounded-Book",sans-serif;
    font-size: 13px;
    color: #133d68;
    box-sizing: border-box;
    outline: none;
    transition: border-color .2s;
  }

  .empresas-page .emp-reserva-form textarea {
    border-radius: 18px;
    resize: vertical;
  }

  .empresas-page .emp-reserva-form input[type="text"]:focus,
  .empresas-page .emp-reserva-form input[type="email"]:focus,
  .empresas-page .emp-reserva-form input[type="tel"]:focus,
  .empresas-page .emp-reserva-form textarea:focus {
    border-color: #133d68;
  }

  .empresas-page .emp-reserva-form input::placeholder,
  .empresas-page .emp-reserva-form textarea::placeholder {
    color: #8a9ab5;
  }

  /* Nivel selector */
  .empresas-page .emp-nivel-selector {
    text-align: center;
    margin: 4px 0;
  }

  .empresas-page .emp-nivel-title {
    font-size: 13px;
    color: #e07030;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .empresas-page .emp-nivel-options {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .empresas-page .emp-nivel-options label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #133d68;
    cursor: pointer;
  }

  .empresas-page .emp-nivel-options input[type="radio"] {
    width: 14px;
    height: 14px;
    accent-color: #133d68;
    margin: 0;
  }

  /* Terms checkbox */
  .empresas-page .emp-terms {
    margin: 4px 0;
  }

  .empresas-page .emp-terms label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #133d68;
    cursor: pointer;
    font-style: italic;
  }

  .empresas-page .emp-terms input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #133d68;
    flex-shrink: 0;
    margin: 0;
    /* Override legacy global checkbox styling in _forms.scss that moves all
       checkboxes off-screen unless they use `input + label` pattern. */
    position: static !important;
    left: auto !important;
  }

  .empresas-page .emp-terms a {
    color: #e07030;
    text-decoration: none;
  }
  .empresas-page .emp-terms a:hover {
    text-decoration: underline;
  }

  /* Submit button (wider, green-ish like Angular) */
  .empresas-page .emp-submit-btn {
    margin-top: 4px;
  }

  /* Atrás button at bottom */
  .empresas-page .emp-back-btn-bottom {
    display: block;
    margin: 8px auto 0;
    background: #133d68;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 28px;
    font-family: "Gotham Rounded","Gotham-Rounded-Bold",sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
  }
  .empresas-page .emp-back-btn-bottom:hover {
    background: #0d2a4a;
  }

  .empresas-page .emp-success-msg {
    text-align: center;
    padding: 20px 0;
  }

  .empresas-page .emp-success-msg i {
    font-size: 48px;
    color: #4caf50;
    margin-bottom: 10px;
  }

  .empresas-page .emp-success-msg h4 {
    color: #133d68;
    font-family: "Gotham Rounded","Gotham-Rounded-Bold",sans-serif;
    font-size: 18px;
    margin: 10px 0 8px;
  }

  .empresas-page .emp-success-msg p {
    color: #666;
    font-size: 13px;
    margin-bottom: 16px;
  }

  /* 57 YEARS BADGE */
  .empresas-page .years-img {
    width: 170px;
    position: absolute;
    right: 4%;
    z-index: 4;
    top: 82%;
  }

  /* Mobile banner */
  .empresas-page #nav-banner-mobile {
    display: none;
    width: 100%;
  }

  .empresas-page #nav-banner-mobile img {
    width: 100%;
    position: relative;
    top: 4px;
  }

  /* CORNER – bottom gradient bar with stats */
  .empresas-page #corner {
    width: 100%;
  }

  .empresas-page #corner-container {
    position: relative;
    top: 6px;
  }

  .empresas-page #header-remover {
    width: 100%;
    display: block;
  }

  .empresas-page .header-banner-with-text {
    margin-top: -90px;
  }

  .empresas-page .message-container {
    position: absolute;
    top: 48px;
    right: 0;
    transform: skewY(-10deg);
    color: white;
    display: flex;
    flex-direction: row;
    text-align: center;
    z-index: 101;
    justify-content: flex-end;
  }

  .empresas-page .message-container .message {
    margin: 0 20px;
  }

  .empresas-page .message-container .message:last-child {
    margin-right: 300px;
  }

  .empresas-page .text-large {
    font-size: 24px;
    font-weight: 700;
  }

  .empresas-page .text-small.bubble-text {
    font-size: 12px;
  }

  .empresas-page #header-detail {
    position: absolute;
    top: 0;
    right: 0;
    width: 780px;
  }

  /* COMPANY OPEN ENGLISH - Intro section */
  .company-open-english {
    padding: 0 20px;
    margin: 15px auto;
  }

  .company-open-english h2 {
    text-align: center;
    margin-top: 35px;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    font-family: 'Gotham-Rounded-Bold', sans-serif;
  }

  .company-open-english div {
    padding: 20px 0;
  }

  .company-open-english p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
  }

  .company-open-english a {
    color: #133d68;
    text-decoration: underline;
  }

  /* COMPANY REVIEWS - Testimonials */
  #company-reviews {
    display: flex;
    margin-top: -3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0;
    padding-bottom: 20px;
  }

  #company-reviews .spacer {
    flex-shrink: 0;
    width: 1px;
  }

  .company-pill {
    margin: 20px 35px;
    padding: 0;
    width: 400px;
    flex-shrink: 0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    scroll-snap-align: center;
  }

  .company-pill .company-header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #f5f5f5;
    height: 80px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-sizing: border-box;
    padding: 5px;
  }

  .company-pill .company-header .logo-full {
    width: 85%;
    margin: auto;
  }

  .company-pill .company-header .logo-full img {
    width: 100%;
    height: auto;
  }

  .company-pill .company-testimonial {
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
  }

  /* TITULO PROGRAMS SHOWCASE */
  #titulo-programs-showcase {
    color: #133d68;
    margin: 0;
    margin-bottom: 20px;
    margin-top: 10px;
    text-align: center;
    font-family: 'Gotham-Rounded-Bold', sans-serif;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
  }

  /* SOLUCIONES INTRO TEXT */
  .empresas-page .soluciones-intro-text {
    margin: 0 auto 30px;
    text-align: center;
  }

  .empresas-page .soluciones-intro-text p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
  }

  .empresas-page .soluciones-intro-text a {
    color: #FC824E !important;
    text-decoration: underline;
  }

  .empresas-page .soluciones-intro-text a:hover {
    color: #ff9a66 !important;
  }

  .section-title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    color: #1f2330;
    margin: 0 0 24px;
  }

  /* SOLUTIONS SECTION – Angular matching */
  .empresas-page #soluciones-formacion {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .empresas-page #btn-fundae {
    margin-bottom: 20px;
    font-family: "Gotham-Rounded-Bold";
    font-size: 10px;
    background: rgb(2,0,36);
    background: linear-gradient(25deg, rgba(2,0,36,1) 0%, rgba(4,5,59,1) 0%, rgba(0,194,250,1) 100%);
  }

  .empresas-page #btn-fundae:disabled {
    background-color: rgb(74, 195, 74);
  }

  .empresas-page .solucion-formacion {
    width: 41%;
    text-align: center;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.327);
    border-radius: 22px;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  .empresas-page .solucion-formacion ul {
    font-size: 10px;
  }

  .empresas-page .solucion-formacion ul:hover {
    color: #5e5e5e;
  }

  .empresas-page .solucion-formacion i {
    margin-left: 5px;
    margin-top: 3px;
    font-size: 28px;
    color: #5e5e5e !important;
  }

  .empresas-page .solucion-formacion .center-icons {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .empresas-page .solucion-formacion .icon-showcase {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 70%;
  }

  .empresas-page .solucion-formacion .icon-showcase p {
    font-size: 10px;
  }

  .empresas-page .solucion-formacion .show-icon-info {
    display: flex;
    flex-direction: column;
    width: 33%;
  }

  .empresas-page .solucion-formacion .logos-video-presencial i {
    font-size: 28px;
  }

  .empresas-page .solucion-formacion .logos-video-presencial {
    font-size: 34px;
  }

  .empresas-page .solucion-formacion h2 {
    color: white;
    padding: 20px 10px;
    margin-top: 0px;
    text-align: center;
  }

  .empresas-page .solucion-formacion div {
    padding: 0px;
  }

  .empresas-page .solucion-formacion p {
    padding: 0 15px;
    font-size: 13px;
    line-height: 1.5;
  }

  .empresas-page .white-orange {
    background: white;
    color: #ea8d13;
    border: 1px solid;
  }

  .empresas-page .white-red {
    background: white;
    color: #f93624;
    border: 1px solid;
  }

  .empresas-page .white-green {
    background: white;
    color: #51b14f;
    border: 1px solid;
  }

  .empresas-page .mas-info-div {
    cursor: pointer;
    display: flex;
    flex-direction: column;
  }

  .empresas-page .mas-info-div i {
    font-size: 10px;
  }

  .empresas-page .mas-info {
    cursor: pointer;
    color: #5e5e5e;
    background: white;
    font-family: Gotham-Rounded-Bold;
    font-weight: bold;
    font-size: 10px;
    border: none;
    width: fit-content;
    margin: auto;
  }

  .empresas-page .mas-info-contact-form {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #00000069;
  }

  .empresas-page .contact-container {
    display: flex;
    flex-direction: column;
    width: 30%;
    background: white;
    border-radius: 50px;
    padding: 1.5%;
    align-items: center;
  }

  .empresas-page .contact-container .form-text {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 25px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
  }

  .empresas-page .contact-container .form-text:focus {
    border-color: #133d68;
  }

  .empresas-page .contact-container textarea.form-text {
    border-radius: 20px;
    resize: vertical;
  }

  .empresas-page .solucion-tittle {
    background: white;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding-top: 0;
    overflow: hidden;
  }

  .empresas-page .solucion-tittle h2 {
    color: #133d68;
  }

  .empresas-page .solucion-tittle button {
    margin-top: 20px;
    font-size: 26px;
    font-weight: bold;
  }

  .empresas-page .solucion-tittle img {
    width: 100%;
    display: block;
  }

  .empresas-page .solucion-tittle .double-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .empresas-page .solucion-tittle .double-btn .online-presencial-btn-green {
    margin-top: 1rem;
    font-size: 15px;
    z-index: 1;
    background: #51b14f;
    color: white;
    box-shadow: 0px 5px 5px rgba(64, 168, 68, 0.3);
  }

  .empresas-page .solucion-tittle .double-btn .online-presencial-btn-orange {
    margin-top: 1rem;
    font-size: 15px;
    z-index: 1;
    background: #ea8d13;
    color: white;
    box-shadow: 0px 5px 5px rgba(192, 82, 31, 0.3);
  }

  .empresas-page .solucion-tittle .double-btn .online-presencial-btn-red {
    margin-top: 1rem;
    font-size: 15px;
    z-index: 1;
    background: #f93624;
    color: white;
    box-shadow: 0px 5px 5px rgba(227, 7, 7, 0.3);
  }

  .empresas-page .solucion-tittle .double-btn .btns-modalidad {
    display: flex;
    width: min-content;
    flex-direction: column;
  }

  .empresas-page .solucion-tittle .double-btn .invisible-btn {
    background-color: white;
    color: white;
  }

  .empresas-page .titulo-solucion {
    color: #133d68;
    padding: 20px 10px;
    margin-top: 0px;
    text-align: center;
    font-size: 18px;
  }

  .empresas-page .formationInfo {
    transition: color 0.5s ease;
  }

  .empresas-page #logo-ala-byn {
    width: 28px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }

  .empresas-page .bonificable-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .empresas-page .btn-1 {
    font-size: 16px !important;
  }

  /* CLIENTS SECTION – Angular slider-companies matching */
  .empresas-page .design-formation {
    text-align: center;
    margin: 40px 0;
  }

  .empresas-page .design-formation h2 {
    color: #133d68;
    margin-bottom: 20px;
  }

  .empresas-page .companies-container-2 {
    width: 100%;
    padding: 10px;
    overflow: hidden;
  }

  .empresas-page .companies-slider-2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
  }

  .empresas-page .companies-slider-2 .company-logo {
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    position: relative;
  }

  .empresas-page .companies-slider-2 .company-logo img {
    width: 100%;
    height: auto;
  }

  /* Size classes */
  .empresas-page .companies-slider-2 .company-logo.small {
    width: 60px;
    height: 60px;
  }

  .empresas-page .companies-slider-2 .company-logo.medium {
    width: 80px;
    height: 80px;
  }

  .empresas-page .companies-slider-2 .company-logo.large {
    width: 100px;
    height: 100px;
  }

  /* Color box-shadows: box-shadow(0, 10px, 10px, rgba(color, 0.15)) */
  .empresas-page .company-logo.red {
    box-shadow: 0 10px 10px rgba(252, 78, 78, 0.15);
  }

  .empresas-page .company-logo.blue {
    box-shadow: 0 10px 10px rgba(33, 150, 243, 0.15);
  }

  .empresas-page .company-logo.gray {
    box-shadow: 0 10px 10px rgba(196, 196, 196, 0.15);
  }

  .empresas-page .company-logo.cyan {
    box-shadow: 0 10px 10px rgba(0, 188, 212, 0.15);
  }

  .empresas-page .company-logo.indigo {
    box-shadow: 0 10px 10px rgba(63, 81, 181, 0.15);
  }

  .empresas-page .company-logo.light-green {
    box-shadow: 0 10px 10px rgba(139, 195, 74, 0.15);
  }

  .empresas-page .company-logo.deep-orange {
    box-shadow: 0 10px 10px rgba(252, 130, 78, 0.15);
  }

  .empresas-page .company-logo.teal {
    box-shadow: 0 10px 10px rgba(0, 150, 136, 0.15);
  }

  .empresas-page .company-logo.yellow {
    box-shadow: 0 10px 10px rgba(227, 196, 48, 0.15);
  }

  /* Desktop sizes ≥700px */
  @media (min-width: 700px) {
    .empresas-page .companies-container-2 {
      padding: 0 16px;
    }

    .empresas-page .companies-slider-2 .company-logo.small {
      width: 100px;
      height: 100px;
    }

    .empresas-page .companies-slider-2 .company-logo.medium {
      width: 120px;
      height: 120px;
    }

    .empresas-page .companies-slider-2 .company-logo.large {
      width: 150px;
      height: 150px;
    }
  }

  /* ED-TECH SHOWCASE (Angular .ed-tech-showcase) */
  .empresas-page .ed-tech-showcase {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 60px auto;
  }

  .empresas-page #phone-img {
    width: 40%;
  }

  .empresas-page #phone-list {
    text-align: left;
    margin-top: -2rem;
    list-style: none;
    padding: 0;
    width: 50%;
  }

  .empresas-page #phone-list h2 {
    text-align: left !important;
    font-size: 32px;
    color: #133d68;
  }

  .empresas-page #phone-list i {
    font-size: 26px;
    margin-right: 1rem;
    color: #133d68;
    flex-shrink: 0;
    width: 1.25em;
    text-align: center;
  }

  .empresas-page #phone-list #text-phone-list {
    display: block;
  }

  .empresas-page #phone-list li {
    margin-top: 2rem;
    display: flex;
    align-items: flex-start;
    font-size: 12px;
  }

  /* Tablet y móvil ≤999px */
  @media (max-width: 999px) {
    .empresas-page .ed-tech-showcase {
      flex-direction: column;
    }

    .empresas-page #phone-img {
      width: 60%;
      margin-bottom: 20px;
    }

    .empresas-page #phone-list {
      width: 80%;
      text-align: center !important;
    }

    .empresas-page #phone-list h2 {
      text-align: center !important;
    }

    .empresas-page #phone-list li {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .empresas-page #phone-list i {
      margin-right: 0;
      margin-bottom: 0.5rem;
      align-self: center;
    }
  }

  /* Móvil ≤699px */
  @media (max-width: 699px) {
    .empresas-page #phone-img {
      width: 80%;
    }

    .empresas-page #phone-list {
      width: 90%;
    }

    .empresas-page #phone-list h2 {
      font-size: 24px;
    }
  }

  /* TEST-TEXTOS (50 años y preguntas frecuentes) */
  .empresas-page .test-textos {
    padding: 20px;
  }
  .empresas-page .test-textos p {
    margin-bottom: 15px;
  }
  .empresas-page .test-textos h2 {
    color: #03A9F4;
    margin-bottom: 20px;
  }
  .empresas-page .test-textos h3 {
    margin-bottom: 0;
  }
  .empresas-page .test-textos a {
    color: #FC824E;
    text-decoration: none;
  }
  .empresas-page .test-textos a:hover {
    text-decoration: underline;
  }

  /* Legacy landed-form (Deseamos ayudarte) */
  .empresas-page .landed-form{
    max-width: 80%;
    margin: 26px auto 40px;
    padding: 26px 24px 20px;
    border-radius: 18px;
    background: linear-gradient(90deg, #0b5f77 0%, #0aa6a6 55%, #23d7d7 100%);
    box-shadow: 0 18px 30px rgba(0,0,0,.18);
    color:#fff;
    text-align:center;
  }
  .empresas-page .landed-form .form-info h2{
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color:#E4C12F;
  }
  .empresas-page .landed-form .form-info p{
    margin:0 0 14px;
    font-size: 12px;
    opacity:.95;
  }
  .empresas-page .landed-form .form-questions{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    margin: 6px auto 10px;
  }
  .empresas-page .landed-form .form-text{
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    width: 170px;
    max-width: 100%;
    background: #fff;
    color:#133D68;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  }
  .empresas-page .landed-form textarea.form-text{
    border-radius: 14px;
    width: 76%;
    max-width: 760px;
    margin: 8px auto 12px;
    display:block;
    padding: 10px 12px;
    resize: vertical;
  }
  .empresas-page .landed-form .btn.red{
    border-radius: 999px;
    padding: 8px 26px;
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
  }
  @media (max-width: 860px){
    .empresas-page .landed-form textarea.form-text{width: 92%;}
    .empresas-page .landed-form .form-text{width: 46%;}
  }
  @media (max-width: 520px){
    .empresas-page .landed-form .form-text{width: 100%;}
  }

  /* YOUTUBE IFRAME (empresas page) */
  .empresas-page .youtube-iframe {
    margin: 20px auto;
    cursor: pointer;
    width: 85%;
    height: auto;
  }
  .empresas-page .youtube-iframe.big-size-irfame {
    width: 760px;
    height: 445px;
  }
  .empresas-page .youtube-iframe img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  @media screen and (max-width: 699px) {
    .empresas-page .youtube-iframe.big-size-irfame {
      width: 85%;
      height: auto;
    }
  }
  .empresas-page .youtube-iframe iframe {
    border-radius: 10px;
  }

  /* RESPONSIVE – TABLET (≤999px) */
  @media (max-width: 999px) {
    .empresas-page .main-img-container {
      flex-direction: column;
      align-items: center;
    }

    .empresas-page .main-img-container h1,
    .empresas-page .main-img-container h2,
    .empresas-page .main-img-container p {
      text-align: center;
    }

    .empresas-page #main-text {
      display: none;
    }

    .empresas-page #left-content {
      width: 80%;
    }

    .empresas-page #text-over-calendar {
      width: 80%;
      min-width: 0;
    }

    .empresas-page .years-img {
      width: 80px;
      right: 2%;
      top: 96%;
      display: none;
    }

    .empresas-page #nav-banner-mobile {
      display: block;
    }

    .empresas-page #btn-right-content {
      display: flex;
      flex-direction: column;
      text-align: center;
    }

    .empresas-page .cinta-premio {
      width: 100%;
    }

    .empresas-page .message-container {
      opacity: 0;
      width: 38vw;
    }

    .empresas-page .message-container .message {
      margin: 0 10px;
    }

    .empresas-page #header-detail {
      width: 50%;
    }

    .empresas-page #soluciones-formacion {
      flex-direction: column;
      align-items: center;
    }

    .empresas-page .solucion-formacion {
      width: 80%;
    }

    .empresas-page .solucion-tittle .double-btn {
      flex-direction: column;
    }

    .empresas-page .solucion-tittle .double-btn .invisible-btn {
      display: none;
    }

    .empresas-page .solucion-formacion .logos-video-presencial {
      font-size: 20px;
    }

    .empresas-page .contact-container {
      width: 90%;
    }
  }

  /* RESPONSIVE – ≤768px */
  @media (max-width: 768px) {
    .company-open-english {
      padding: 0 10px;
    }

    #company-reviews {
      flex-direction: column;
      align-items: center;
    }

    .company-pill {
      width: 90vw;
      margin: 10px auto;
      flex-shrink: 0;
    }


  }

  /* RESPONSIVE – MOBILE (≤699px) */
  @media (max-width: 699px) {
    .empresas-page #left-content h1 {
      font-size: 28px;
    }

    .empresas-page #calendar-div {
      width: 90%;
      max-width: none;
      padding: 18px;
      border-radius: 30px;
      min-height: auto;
    }

    .empresas-page .emp-hour-btn {
      width: 30%;
    }

    .empresas-page .page-width {
      padding: 0 15px;
    }

    .empresas-page .solucion-formacion {
      width: 95%;
    }

    .empresas-page .solucion-formacion .logos-video-presencial i {
      font-size: 16px;
    }

    .empresas-page .solucion-formacion .logos-video-presencial img {
      width: 19px;
    }

    .empresas-page #logo-ala-byn {
      width: 19px;
    }
  }
/* END PAGE: pages/ingles-para-empresas.php */

/* ── Instagram grid ── */
.instagram-slider-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 20px auto 40px;
  max-width: 1100px;
}
.instagram-post {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1;
}
.instagram-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.instagram-post:hover img {
  transform: scale(1.05);
}
.instagram-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.45);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: .8;
  transition: opacity .2s ease;
}
.instagram-post:hover .instagram-play {
  opacity: 1;
}
@media (max-width: 768px) {
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}
@media (max-width: 480px) {
  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── WhatsApp floating button ── */
.whatsapp-float {
  position: fixed;
  bottom: 80px;
  right: 15px;
  z-index: 9999;
}
.whatsapp-float a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #25D366;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.whatsapp-float a:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
@media (max-width: 768px) {
  .whatsapp-float { bottom: 70px; right: 10px; }
  .whatsapp-float a { width: 48px; height: 48px; }
  .whatsapp-float a svg { width: 24px; height: 24px; }
}

/* ── Floating contact orbs (Legacy: WhatsApp + Email) ── */
.floating-contact-orbs{
  position: fixed;
  right: 15px;
  bottom: 80px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.floating-contact-orb{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  text-decoration: none;
  border: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.floating-contact-orb:hover{
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.floating-contact-orb:focus{
  outline: none;
}
.floating-contact-orb:focus-visible{
  outline: 3px solid rgba(12, 163, 244, .35);
  outline-offset: 3px;
}
.floating-contact-orb i{
  color: #fff;
  font-size: 26px;
  line-height: 1;
}
.floating-contact-orb.is-whatsapp{
  background-color: #25D366;
}
.floating-contact-orb.is-phone{
  background-color: #0ca3f4;
}
.floating-contact-orb.is-mail{
  background-color: #FC4E4E;
}

.floating-contact-banner{
  position: absolute;
  right: 72px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
}
.floating-contact-banner i{
  color: #0ca3f4;
  font-size: 18px;
}
.floating-contact-banner-text{
  font-weight: 700;
}
@media (max-width: 768px) {
  .floating-contact-banner{ right: 60px; bottom: 6px; padding: 8px 12px; }
  .floating-contact-banner i{ font-size: 16px; }
}

/* ── reCAPTCHA spacing helper ── */
.ala-recaptcha-field{
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  .floating-contact-orbs { right: 10px; bottom: 70px; gap: 10px; }
  .floating-contact-orb { width: 48px; height: 48px; }
  .floating-contact-orb i{ font-size: 22px; }
}