/* =========================================================================
   Especificaciones — acordeón de marca (Recurso: fondo crema, título rojo
   grande, encabezados en Xanti mono + botón circular rojo con +/−).
   ========================================================================= */
.mu-specs {
    --sp-bg: #FCE9C8;
    --sp-title: #F04E37;
    --sp-head: #1A3B3C;
    --sp-body: #33261A;
    --sp-line: #1A3B3C;
    --sp-icon: #F04E37;
    --sp-icon-ink: #FFFFFF;
    /* Métricas personalizables (controles del widget → Estilo). */
    --sp-line-w: 2px;      /* grosor de las líneas divisoras */
    --sp-toggle: 28px;     /* diámetro del botón +/− */
    --sp-head-pad: 18px;   /* padding vertical de los encabezados */
    --sp-body-size: 15px;  /* tamaño del texto del cuerpo */
    --sp-body-line: 1.62;  /* interlineado del cuerpo */
    --sp-title-size: clamp(30px, 9vw, 64px); /* tamaño del título */
    --sp-head-size: 15px;  /* tamaño de encabezados */
    --sp-title-font: "custard", "Fredoka", system-ui, sans-serif;
    --sp-head-font:  "sans-plomb", "Oswald", "Arial Narrow", sans-serif;
    --sp-body-font:  "sans-plomb", "Oswald", "Arial Narrow", sans-serif;

    background: var(--sp-bg);
    color: var(--sp-body);
    padding: clamp(22px, 4vw, 64px) clamp(18px, 5vw, 70px);
    font-family: "sans-plomb", "Oswald", "Arial Narrow", sans-serif;
}

/* El padding cuenta dentro del ancho (imprescindible para que el modo
   «Pantalla completa» = 100vw no genere scroll horizontal por el padding). */
.mu-specs, .mu-specs * { box-sizing: border-box; }

.mu-specs__title {
    font-weight: 800;
    line-height: 0.9;
    margin: 0 0 clamp(18px, 3vw, 40px);
    letter-spacing: -0.01em;
}

/* ── Aplicación BLINDADA de los controles de Elementor ─────────────────────
   Los controles (pestaña Estilo) fijan estas variables en .mu-specs; aquí se
   aplican con `!important` y especificidad (0,2,0) para que GANEN aunque el
   TEMA fuerce fuente/tamaño/color con `!important` (p. ej. `h2{font-family:…
   !important}` o `button{…}`). Sin este blindaje, un tema con reglas !important
   pisa lo que configuras en Elementor y "no se aplica ni en el editor". */
.mu-specs .mu-specs__title {
    font-family: var(--sp-title-font, "custard", "Fredoka", system-ui, sans-serif) !important;
    font-size:   var(--sp-title-size, clamp(30px, 9vw, 64px)) !important;
    color:       var(--sp-title, #F04E37) !important;
}
.mu-specs .mu-specs__head {
    font-family: var(--sp-head-font, "sans-plomb", "Oswald", "Arial Narrow", sans-serif) !important;
    font-size:   var(--sp-head-size, 15px) !important;
    color:       var(--sp-head, #1A3B3C) !important;
    padding:     var(--sp-head-pad, 18px) 4px !important;
}
.mu-specs .mu-specs__body-inner,
.mu-specs .mu-specs__body-inner p,
.mu-specs .mu-specs__body-inner li {
    /* Se incluyen p/li porque los temas suelen forzar `p{font-size…!important}`
       o `.entry-content p{…}` sobre el texto interno del acordeón. */
    font-family: var(--sp-body-font, "sans-plomb", "Oswald", "Arial Narrow", sans-serif) !important;
    font-size:   var(--sp-body-size, 15px) !important;
    line-height: var(--sp-body-line, 1.62) !important;
    color:       var(--sp-body, #33261A) !important;
}
.mu-specs .mu-specs__toggle {
    width:  var(--sp-toggle, 28px) !important;
    height: var(--sp-toggle, 28px) !important;
    background: var(--sp-icon, #F04E37) !important;
}
.mu-specs .mu-specs__item            { border-top:    var(--sp-line-w, 2px) solid var(--sp-line, #1A3B3C) !important; }
.mu-specs .mu-specs__item:last-child { border-bottom: var(--sp-line-w, 2px) solid var(--sp-line, #1A3B3C) !important; }

.mu-specs__list { max-width: var( --sp-maxw, 1120px ); margin: 0 auto; }

/* ── Ancho del contenido (control «Ancho») ─────────────────────────────────
   full  : el contenido usa todo el ancho del contenedor (sin tope de 1120px).
   bleed : además ROMPE el contenedor de Elementor y ocupa toda la pantalla
           (banda de borde a borde), útil cuando la Sección está en ancho boxed.
           El calc(50% - 50vw) solo alinea bien si el contenedor está centrado. */
.mu-specs.is-full { --sp-maxw: none; }
.mu-specs.is-bleed {
    --sp-maxw: none;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc( 50% - 50vw );
    margin-right: calc( 50% - 50vw );
}

.mu-specs__item { border-top: var(--sp-line-w, 2px) solid var(--sp-line); }
.mu-specs__item:last-child { border-bottom: var(--sp-line-w, 2px) solid var(--sp-line); }

.mu-specs__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: var(--sp-head-pad, 18px) 4px;
    font-family: inherit;
    font-weight: 700; /* SansPlomb es estática (Condensed Regular); 700 queda dentro del rango declarado y evita falso-negrita */
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 15px;
    line-height: 1.2;
    color: var(--sp-head);
    text-align: left;
}
.mu-specs__head-txt { flex: 1 1 auto; min-width: 0; }

/* Botón circular +/− */
.mu-specs__toggle {
    flex: 0 0 auto;
    width: var(--sp-toggle, 28px); height: var(--sp-toggle, 28px);
    border-radius: 50%;
    background: var(--sp-icon);
    position: relative;
    transition: filter 0.15s ease;
}
.mu-specs__head:hover .mu-specs__toggle { filter: brightness(1.08); }

/* Blindaje anti-tema: el encabezado es un <button>; Avada/el tema lo pinta de
   FUCSIA en :hover/:focus/:active. Lo mantenemos SIN fondo (combina con el crema);
   el feedback de hover es el brillo del botón circular (regla de arriba). */
.mu-specs .mu-specs__head,
.mu-specs .mu-specs__head:hover,
.mu-specs .mu-specs__head:focus,
.mu-specs .mu-specs__head:active,
.mu-specs .mu-specs__head:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}
.mu-specs__toggle::before,
.mu-specs__toggle::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--sp-icon-ink);
    border-radius: 2px;
}
.mu-specs__toggle::before { width: calc(var(--sp-toggle, 28px) * 0.46); height: calc(var(--sp-toggle, 28px) * 0.093); }                       /* horizontal (siempre) */
.mu-specs__toggle::after  { width: calc(var(--sp-toggle, 28px) * 0.093); height: calc(var(--sp-toggle, 28px) * 0.46); transition: transform 0.22s ease; } /* vertical (se oculta al abrir) */
.mu-specs__item.is-open .mu-specs__toggle::after { transform: translate(-50%, -50%) scaleY(0); }

.mu-specs__head:focus-visible { outline: 3px solid var(--sp-title); outline-offset: 3px; border-radius: 6px; }

/* Cuerpo colapsable (la altura exacta la fija el JS para animar suave).
   visibility:hidden en cerrado saca el contenido del orden de tabulación y del
   árbol de accesibilidad (enlaces dentro de paneles cerrados no son alcanzables
   con Tab); el delay 0.3s deja que la animación de cierre termine antes de ocultar. */
.mu-specs__body {
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, visibility 0s linear 0.3s;
}
.mu-specs__item.is-open .mu-specs__body {
    visibility: visible;
    transition: max-height 0.3s ease, visibility 0s linear 0s;
}
.mu-specs__body-inner {
    padding: 2px 6px 24px;
    font-weight: 500;
    font-size: var(--sp-body-size, 15px);
    line-height: var(--sp-body-line, 1.62);
    color: var(--sp-body);
    /* Sin tope de columna: el contenido usa todo el ancho del acordeón
       (no una columna angosta a la izquierda). El ancho total lo controla
       el modo «Ancho» del widget. */
}
.mu-specs__body-inner p { margin: 0 0 0.8em; }
.mu-specs__body-inner p:last-child { margin-bottom: 0; }
.mu-specs__body-inner a { color: var(--sp-title); }
/* Contenido rico migrado (listas, subtítulos, negritas) en estilo de marca. */
.mu-specs__body-inner h3,
.mu-specs__body-inner h4 {
    font-family: inherit;
    font-weight: 800;
    color: var(--sp-head);
    font-size: 1.02em;
    text-transform: none;
    letter-spacing: 0;
    margin: 1.1em 0 0.35em;
}
.mu-specs__body-inner h3:first-child,
.mu-specs__body-inner h4:first-child { margin-top: 0; }
.mu-specs__body-inner ul,
.mu-specs__body-inner ol { margin: 0 0 0.8em; padding-left: 1.25em; }
.mu-specs__body-inner li { margin: 0 0 0.35em; }
.mu-specs__body-inner strong,
.mu-specs__body-inner b { font-weight: 800; }
.mu-specs__body-inner table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 0.95em; }
.mu-specs__body-inner th,
.mu-specs__body-inner td { border: 1px solid var(--sp-line); padding: 6px 10px; text-align: left; }
.mu-specs__body-inner thead th { background: var(--sp-head); color: var(--sp-bg); font-weight: 800; }
.mu-specs__img { max-width: 100%; height: auto; display: block; border-radius: 8px; }

/* Las tablas (Composición/Cantidad) usan el ancho de la sección, no el rag de
   74ch pensado para texto; se centran dentro del acordeón. */
.mu-specs__item--media .mu-specs__body-inner { max-width: none; }
.mu-specs__item--media .mu-specs__img { margin-inline: auto; }

/* Sin JS: mostrar todo abierto (progresivo) */
.mu-specs.no-js .mu-specs__body { max-height: none; visibility: visible; }

@media (max-width: 600px) {
    /* Defaults móviles como VARIABLES → el bloque blindado los consume. Si el
       usuario define un valor «Móvil» en Elementor, su regla (0,2,0) gana. */
    .mu-specs {
        --sp-head-size: 13px;
        --sp-body-size: 14px;
        --sp-toggle: 24px;
        --sp-title-size: clamp(30px, 11vw, 40px);
    }
    .mu-specs__head { letter-spacing: 0.05em; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .mu-specs__body, .mu-specs__toggle::after { transition: none; }
}

/* ══ Responsive móvil (auditoría responsive) ══════════════════════════ */
/* El font-size del título lo maneja el bloque blindado (--sp-title-size); aquí
   solo quedan las reglas que NO chocan con los controles. */
.mu-specs__title { overflow-wrap: break-word; hyphens: auto; }
.mu-specs.is-bleed { max-width: 100vw; overflow-x: clip; }
@media (max-width: 600px) {
  .mu-specs__body-inner table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mu-specs__img { max-width: 100%; height: auto; }
}