/*
 * spem.css — SOLO comportamiento. Ni un color ni un tamano de diseno:
 * eso vive en el panel de Elementor y en los globales.
 */

/* Una pieza cuyo campo dinamico viene vacio no se pinta (etiqueta de
   «Recomendado» en los planes que no la llevan, frase bajo el precio...). */
.spem-si-vacio:has(> .elementor-heading-title:empty),
.spem-si-vacio:has(> .elementor-widget-container > .elementor-heading-title:empty) { display: none; }

/* La tarjeta clicable entera: el enlace estirado del titulo cubre la tarjeta. */
.spem-estirado { position: relative; }
.spem-estirado .spem-enlace-estirado a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Filtro del indice de la biblioteca: lo que no coincide se oculta. */
.spem-oculto { display: none !important; }

/* Movimiento reducido: sin desplazamientos al pasar el raton. */
@media (prefers-reduced-motion: reduce) {
  .spem-rellena, .spem-rellena:hover, .spem-pill .elementor-button { transition: none; transform: none; }
}

/* Desplegables (preguntas, biblioteca). El cuerpo se abre animando la fila
   de la rejilla de 0fr a 1fr: la altura real del contenido, sin medirla.
   Estructura: .spem-despliega-cuerpo > envoltura sin relleno > contenido. */
.spem-despliega-cabeza { cursor: pointer; }
.spem-despliega-cuerpo { display: grid !important; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.16, 1, .3, 1); }
.spem-despliega.is-open > .spem-despliega-cuerpo,
.spem-despliega.is-open > .e-con-inner > .spem-despliega-cuerpo { grid-template-rows: 1fr; }
.spem-despliega-cuerpo > * { min-height: 0 !important; overflow: hidden; }
.spem-despliega-icono .elementor-icon { transition: transform .6s cubic-bezier(.16, 1, .3, 1), background-color .6s cubic-bezier(.16, 1, .3, 1); }
.spem-despliega.is-open .spem-despliega-icono .elementor-icon { transform: rotate(45deg); }
.spem-despliega-cabeza:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Una caja cuyos textos dinamicos vienen todos vacios no se pinta. */
.spem-si-vacio-caja:not(:has(.elementor-heading-title:not(:empty))) { display: none; }

/* Menú móvil a pantalla completa (el de Header.jsx). Cerrado no se ve ni se
   alcanza con el teclado; abierto, los ítems suben escalonados. El botón
   alterna «menú» / «cerrar». */
.spem-mmenu { top: 0; bottom: 0; overflow-y: auto; visibility: hidden; opacity: 0;
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .6s; }
.spem-mmenu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.spem-mmenu .spem-mm-item { opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
.spem-mmenu.is-open .spem-mm-item { opacity: 1; transform: none; }
.spem-mmenu.is-open nav .spem-mm-item:nth-child(1) { transition-delay: 80ms; }
.spem-mmenu.is-open nav .spem-mm-item:nth-child(2) { transition-delay: 140ms; }
.spem-mmenu.is-open nav .spem-mm-item:nth-child(3) { transition-delay: 200ms; }
.spem-mmenu.is-open nav .spem-mm-item:nth-child(4) { transition-delay: 260ms; }
.spem-mmenu.is-open nav .spem-mm-item:nth-child(5) { transition-delay: 320ms; }
.spem-mmenu.is-open nav .spem-mm-item:nth-child(6) { transition-delay: 380ms; }
.spem-mmenu.is-open > .spem-mm-item { transition-delay: 440ms; }
.spem-mm-cerrar, .spem-menu-abierto .spem-mm-abrir { display: none; }
.spem-menu-abierto .spem-mm-cerrar { display: block; }
html.spem-menu-abierto { overflow: hidden; }
@media (min-width: 1025px) { .spem-mmenu { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .spem-mmenu, .spem-mmenu .spem-mm-item { transition: none; transform: none; }
}