/* =========================================================
   EMM – Landing Formación – Bloque “Qué aprenderás” (v3)
   Scope: solo page-id-9595
   Wrapper: .emm-learn (Grupo)
   Acordeón: WooCommerce Accordion (wp-block-woocommerce-accordion-*)
   Extra: .emm-learn__more (2º grupo dentro del details)
   ========================================================= */

body.page-id-9595 .emm-learn{
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;

  background-image: url("https://elmonomigrador.com/wp-content/uploads/2026/02/Diseno-sin-titulo-16.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay suave */
body.page-id-9595 .emm-learn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.70) 0%,
      rgba(255,255,255,.78) 55%,
      rgba(255,255,255,.70) 100%);
}

/* Contenido por encima */
body.page-id-9595 .emm-learn > *{
  position: relative;
  z-index: 1;
}

/* Título */
body.page-id-9595 .emm-learn > .wp-block-heading,
body.page-id-9595 .emm-learn h2.wp-block-heading{
  font-family: var(--emm-font-head, inherit);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(16px, 2vw, 22px);
  text-align: center;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  color: #111;
}

body.page-id-9595 .emm-learn > .wp-block-heading::after,
body.page-id-9595 .emm-learn h2.wp-block-heading::after{
  content:"";
  display:block;
  width: min(240px, 42vw);
  height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: rgba(17,17,17,.18);
}

/* =========================================================
   ANCHO ÚNICO + CONTENEDOR “BOX TÉCNICO”
   - Envuelve el acordeón en un panel para que NO quede sobre el fondo
   - Mantiene el mismo ancho para arriba y para el acordeón dentro del details
   ========================================================= */

:root{
  --emm-learn-max: 880px;
  --emm-tech-bg: rgba(255,255,255,.62);
  --emm-tech-border: rgba(17,17,17,.12);
  --emm-tech-shadow: 0 18px 44px rgba(0,0,0,.10);
}

/* Panel técnico: el grupo principal del acordeón */
body.page-id-9595 .emm-learn .wp-block-woocommerce-accordion-group{
  max-width: var(--emm-learn-max);
  margin-left: auto;
  margin-right: auto;

  background: var(--emm-tech-bg);
  border: 1px solid var(--emm-tech-border);
  border-radius: 16px;
  padding: clamp(14px, 2vw, 20px);
  box-shadow: var(--emm-tech-shadow);

  /* efecto técnico suave */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Panel técnico también para el contenido desplegable del details */
body.page-id-9595 .emm-learn details.wp-block-details{
  max-width: var(--emm-learn-max);
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
}

/* Ojo: el summary va “fuera” del panel. El panel se aplica al contenido interno */
body.page-id-9595 .emm-learn details.wp-block-details[open]{
  /* nada raro aquí, lo controlamos con el bloque interno */
}

/* Si tu contenido del details está dentro de .emm-learn__more, lo convertimos en panel */
body.page-id-9595 .emm-learn details.wp-block-details .emm-learn__more{
  width: 100%;
  max-width: 100%;
  margin-top: 12px;

  background: var(--emm-tech-bg);
  border: 1px solid var(--emm-tech-border);
  border-radius: 16px;
  padding: clamp(14px, 2vw, 20px);
  box-shadow: var(--emm-tech-shadow);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Por si dentro del details Woo mete otro accordion-group, que herede el mismo ancho */
body.page-id-9595 .emm-learn details.wp-block-details .wp-block-woocommerce-accordion-group{
  max-width: 100%;
  margin: 0;
  padding: 0;               /* el padding lo pone el panel .emm-learn__more */
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* =========================================================
   ITEMS DEL ACORDEÓN (cajas)
   ========================================================= */

body.page-id-9595 .emm-learn .wp-block-woocommerce-accordion-item{
  margin: 12px 0;
  width: 100%;
}

/* Botón/encabezado del item */
body.page-id-9595 .emm-learn .accordion-item__toggle{
  display: flex !important;
  align-items: center !important;

  /* IMPORTANTE: esto asegura que TODOS tengan el mismo ancho */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;

  gap: 12px;
  border-radius: 10px;
  padding: 14px 18px;
  min-height: 0;
  line-height: 1.1;

  font-family: var(--emm-font-head, inherit);
  font-weight: 700;
  font-size: 16px;
  color: #111;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,17,17,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);

  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Texto del título (dentro del toggle suele haber h3/span) */
body.page-id-9595 .emm-learn .accordion-item__toggle *{
  font: inherit;
  box-sizing: border-box;
}

/* Hover */
body.page-id-9595 .emm-learn .accordion-item__toggle:hover{
  background: rgba(255,255,255,.96);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  color: #2a2a2a;
}
body.page-id-9595 .emm-learn .accordion-item__toggle:hover *{
  color: #2a2a2a !important;
}

/* Icono + */
body.page-id-9595 .emm-learn .accordion-item__toggle-icon{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  margin-left: auto; /* lo empuja a la derecha */
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(17,17,17,.14);
  background: rgba(17,17,17,.04);
  color: rgba(17,17,17,.72) !important;

  flex: 0 0 auto;
}

body.page-id-9595 .emm-learn .accordion-item__toggle-icon svg{
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}

/* Estado abierto */
body.page-id-9595 .emm-learn .wp-block-woocommerce-accordion-item.is-open .accordion-item__toggle{
  background: rgba(255,255,255,.98);
  border-color: rgba(17,17,17,.18);
}
body.page-id-9595 .emm-learn .wp-block-woocommerce-accordion-item.is-open .accordion-item__toggle-icon{
  background: rgba(17,17,17,.07);
  color: rgba(17,17,17,.80) !important;
}

/* Panel del contenido (el desplegable) -> ahora “encaja” porque está dentro del panel técnico */
body.page-id-9595 .emm-learn .accordion-content{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  margin-top: 10px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(17,17,17,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);

  font-family: var(--emm-font-body, inherit);
  color: #222;
  font-size: 15px;
  line-height: 1.5;
}

/* Listas */
body.page-id-9595 .emm-learn .accordion-content ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
body.page-id-9595 .emm-learn .accordion-content li{
  margin: 6px 0;
}

/* =========================================================
   DETAILS “Ver el temario completo (22 módulos)”
   ========================================================= */

body.page-id-9595 .emm-learn details.wp-block-details > summary{
  list-style: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.70);
  border: 1px dashed rgba(17,17,17,.25);

  font-family: var(--emm-font-head, inherit);
  font-weight: 700;
  font-size: 14px;
  color: rgba(17,17,17,.80);

  user-select: none;
}

body.page-id-9595 .emm-learn details.wp-block-details > summary::-webkit-details-marker{ display:none; }

body.page-id-9595 .emm-learn details.wp-block-details > summary::after{
  content:"▾";
  display:inline-block;
  transform: translateY(-1px);
  opacity: .85;
  transition: transform .18s ease;
}
body.page-id-9595 .emm-learn details.wp-block-details[open] > summary::after{
  transform: rotate(180deg);
}

/* =========================================================
   FIX específico: en el 2º grupo NO se veía el "+"
   ========================================================= */
body.page-id-9595 .emm-learn .emm-learn__more .accordion-item__toggle-icon{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: rgba(17,17,17,.72) !important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 680px){
  body.page-id-9595 .emm-learn{
    padding: 22px 16px;
    border-radius: 16px;
  }

  body.page-id-9595 .emm-learn .wp-block-woocommerce-accordion-group{
    border-radius: 14px;
    padding: 14px;
  }

  body.page-id-9595 .emm-learn details.wp-block-details .emm-learn__more{
    border-radius: 14px;
    padding: 14px;
  }

  body.page-id-9595 .emm-learn .accordion-item__toggle{
    font-size: 15px;
    padding: 12px 14px;
  }
}
/* =========================================================
   PATCH v4 – Bloque 4 (Qué aprenderás)
   1) Quitar panel del primer acordeón (módulos 0–5)
   2) Quitar sangría en móvil dentro de "Ver el temario completo"
   ========================================================= */

/* 1) PRIMER ACORDEÓN: sin panel (sin doble cajeado) */
body.page-id-9595 .emm-learn .wp-block-woocommerce-accordion-group{
  /* mantenemos el centrado y el ancho, pero SIN caja */
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Mantén el espaciado vertical entre items (por si al quitar el panel queda “apretado”) */
body.page-id-9595 .emm-learn .wp-block-woocommerce-accordion-item{
  margin: 12px 0;
}

/* 2) DETAILS: el contenedor del "temario completo" sigue siendo panel (si lo quieres).
      Si NO lo quieres como panel, dime y lo quitamos también.
      Ahora: arreglamos la sangría en móvil. */

/* Asegura que el bloque de dentro ocupa 100% del ancho disponible */
body.page-id-9595 .emm-learn details.wp-block-details .emm-learn__more,
body.page-id-9595 .emm-learn details.wp-block-details .emm-learn__more *{
  box-sizing: border-box;
}

/* En móvil: elimina padding/margen lateral heredado que empuja a la derecha */
@media (max-width: 680px){

  /* El que suele “meter” la sangría: inner-container / group constrained */
  body.page-id-9595 .emm-learn details.wp-block-details .wp-block-group__inner-container,
  body.page-id-9595 .emm-learn details.wp-block-details .is-layout-constrained,
  body.page-id-9595 .emm-learn details.wp-block-details .is-layout-flow{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* El acordeón dentro del details: que no tenga margen/padding lateral */
  body.page-id-9595 .emm-learn details.wp-block-details .wp-block-woocommerce-accordion-group{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Y los botones/paneles: 100% para evitar desplazamientos raros */
  body.page-id-9595 .emm-learn details.wp-block-details .accordion-item__toggle,
  body.page-id-9595 .emm-learn details.wp-block-details .accordion-content{
    width: 100% !important;
    max-width: 100% !important;
  }
}