/* ==========================================================
   UTILIDADES VISIBILIDAD · 0.3.2
   ========================================================== */
@media (max-width: 767px) {
  .ce-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .ce-hide-desktop {
    display: none !important;
  }
}

/* SOBRE MÍ · la tarjeta superpuesta se retira en todos los tamaños. */
.ce-about-page .photo-card {
  display: none !important;
}


/* ==========================================================
   FIXES MOBILE PÁGINAS HTML · 0.3.3
   Tienda: CTA final sin desbordamiento.
   Sobre mí: oculta la tarjeta superpuesta sobre la foto.
   ========================================================== */
@media (max-width: 680px) {

  /* TIENDA · CTA final "Pregúntame".
     El HTML original usa un flex horizontal con padding amplio.
     En móvil, convertimos solo ese CTA en columna para que el
     botón no se salga de la pantalla. */
  .ce-shop-shell .ce-c:has(> a[href="/contacto/"]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    padding: 34px 26px !important;
    width: min(100% - 26px, 1180px) !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .ce-shop-shell .ce-c:has(> a[href="/contacto/"]) > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  .ce-shop-shell .ce-c:has(> a[href="/contacto/"]) > a[href="/contacto/"] {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    white-space: normal !important;
  }

}


/* ==========================================================
   CURSO ONLINE · 0.3.4 · MOCKUP AULA VIRTUAL EN MÓVIL
   Más comprensible, compacto y sin recortes.
   ========================================================== */
@media (max-width: 650px) {

  /* En móvil explicamos primero qué es el panel y lo mostramos después. */
  .ce-course-page .ce-platform-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:28px!important;
    align-items:stretch!important;
  }

  .ce-course-page .ce-platform-copy{
    order:1!important;
    min-width:0!important;
    width:100%!important;
  }

  .ce-course-page .ce-browser{
    order:2!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    border-radius:20px!important;
    overflow:hidden!important;
  }

  .ce-course-page .ce-browser-bar{
    height:34px!important;
    padding:0 12px!important;
  }

  .ce-course-page .ce-dot{
    width:8px!important;
    height:8px!important;
  }

  .ce-course-page .ce-dashboard{
    width:100%!important;
    min-width:0!important;
    padding:14px!important;
  }

  /* Resumen semanal: una tarjeta debajo de otra. */
  .ce-course-page .ce-dashboard-top{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    margin-bottom:10px!important;
  }

  .ce-course-page .ce-dash-card{
    min-height:0!important;
    padding:14px!important;
    border-radius:14px!important;
  }

  .ce-course-page .ce-dash-card strong{
    margin-bottom:5px!important;
    font-size:.95rem!important;
    line-height:1.35!important;
  }

  .ce-course-page .ce-dash-card small{
    display:block!important;
    font-size:.82rem!important;
    line-height:1.4!important;
  }

  .ce-course-page .ce-progress{
    height:7px!important;
    margin-top:11px!important;
  }

  /* Las tres áreas dejan de ser grandes cuadrados:
     en móvil pasan a ser filas compactas y legibles. */
  .ce-course-page .ce-dashboard-bottom{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }

  .ce-course-page .ce-tile{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:11px 14px!important;
    border-radius:12px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    font-size:.88rem!important;
    line-height:1.25!important;
  }
}


/* ==========================================================
   SOBRE MÍ · 0.3.5 · CTA "VER EL CURSO" EN ESCRITORIO
   Evita que el botón flex se comprima y parta el texto en dos líneas.
   ========================================================== */
.ce-about-page .cta-box > .btn{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:max-content!important;
  max-width:none!important;
  white-space:nowrap!important;
  padding-left:24px!important;
  padding-right:24px!important;
}

/* En móvil la caja ya pasa a columna; el botón conserva tamaño natural. */
@media(max-width:680px){
  .ce-about-page .cta-box > .btn{
    min-width:0!important;
    max-width:100%!important;
  }
}