/*
Theme Name: CENETUR
Theme URI: https://capcana.digital/cenetur
Description: Tema de CENETUR — Corporación Energética Turística Juanillo, S.A. Hijo de Hello Elementor. Todo el contenido, el encabezado y el pie se construyen con Elementor; esta hoja sólo fija la base tipográfica y de color.
Author: Cap Cana
Template: hello-elementor
Version: 2.0.0
Text Domain: cenetur
*/

/* ==========================================================================
   Colores de marca, tomados del logotipo oficial en SVG. Se dejan como
   variables para poder usarlos en cualquier campo de color de Elementor
   (var(--cnt-azul)) sin tener que recordar el hexadecimal.
   ========================================================================== */
:root {
  --cnt-azul: #005488;
  --cnt-azul-oscuro: #002A44;
  --cnt-ambar: #EB8E23;
  --cnt-ambar-claro: #FBB55F;
  --cnt-tinta: #14202B;
  --cnt-texto: #475866;
  --cnt-linea: #DFE6EC;
  --cnt-gris: #F5F8FA;
  --cnt-azul-claro: #EAF2F8;
}

/* Base: lo mínimo para que el texto se lea bien antes de que Elementor
   aplique sus estilos. El resto de la apariencia se edita en el editor. */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--cnt-texto);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  /* Titulares en el azul de la marca, no en tinta (cliente, 2026-09-26). */
  color: var(--cnt-azul);
  letter-spacing: -0.015em;
}
img { max-width: 100%; height: auto; }

/* Hello Elementor pinta los <button> de #CC3366 al pasarles el ratón. Es un
   color ajeno a la marca y se cuela en el botón del menú móvil. */
button:hover,
button:focus,
.elementor-menu-toggle:hover,
.elementor-menu-toggle:focus {
  background-color: transparent;
}

/* Salto al contenido, para teclado y lectores de pantalla. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--cnt-azul); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* Foco visible en toda la navegación por teclado. */
/* El anillo de foco tiene que verse sobre fondo claro y sobre fotografía.
   El ámbar sobre blanco da 2,6:1 y un indicador necesita 3:1, así que va en
   azul —8:1 sobre blanco— con un halo blanco alrededor que lo despega de los
   fondos oscuros. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cnt-azul);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .92);
}

/* Listas dentro de los acordeones de Elementor: el contenido llega como
   HTML del editor y necesita su sangría y su ritmo. */
.elementor-tab-content ul,
.elementor-accordion-content ul { padding-left: 20px; margin: 0; }
.elementor-tab-content li,
.elementor-accordion-content li { margin-bottom: 8px; }
.elementor-tab-content p:last-child,
.elementor-accordion-content p:last-child { margin-bottom: 0; }

/* El cursor tiene que decir qué se puede pulsar.
   El navegador sólo pone la manito en los enlaces y los botones: en un
   desplegable, en una casilla y en su etiqueta deja la flecha, aunque las
   tres se pulsen. Se declara aquí para todo lo que es interactivo. */
.elementor-field-type-select select,
.elementor-field-type-acceptance input[type="checkbox"],
.elementor-field-type-acceptance label,
.elementor-field-type-checkbox input,
.elementor-field-type-checkbox label,
.elementor-field-type-radio input,
.elementor-field-type-radio label,
.elementor-field-option,
.elementor-field-option label,
select.elementor-field,
.e-n-tab-title,
.elementor-tab-title,
.elementor-accordion-title,
.elementor-share-btn,
.elementor-menu-toggle,
[role="button"] { cursor: pointer; }

/* Y al revés: el cursor de texto dentro de algo que se pulsa despista. */
.elementor-button *,
.e-n-tab-title *,
.elementor-share-btn * { cursor: inherit; }

/* Zonas táctiles en móvil.
   Un dedo no acierta en 20 píxeles de alto. El área se agranda con relleno, no
   con una altura mínima: con `min-height` el renglón medía 44 px aunque el
   texto ocupara 24, el icono se quedaba pegado arriba —está alineado con la
   primera línea— y el texto centrado, así que parecían dos cosas distintas en
   renglones distintos. Con relleno, la caja crece con el contenido y el icono
   sigue acompañando a su primera línea. */
@media (max-width: 1279px) {
  .elementor-location-header .elementor-icon-list-item > a,
  .elementor-icon-list-item > a { padding-block: 10px; }

  .elementor-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .elementor-accordion-title,
  .e-n-tab-title { min-height: 48px; }
}

/* Donde el menú se recoge en hamburguesa —tablet y móvil, hasta 1024 px— la
   hamburguesa quedaba en medio de la barra, entre el logotipo y el botón de
   avería. Elementor no expone el orden de los elementos flexibles en esta
   versión, así que se manda al final, que es donde se la busca. */
@media (max-width: 1279px) {
  /* Acotado a la barra: sin `.cnt-barra` esta regla también alcanzaba al menú
     que vive dentro del panel desplegable y lo mandaba al final, por debajo
     del teléfono de emergencias. */
  .cnt-barra > .elementor-widget-nav-menu,
  .cnt-barra .e-con-inner > .elementor-widget-nav-menu { order: 9; }
}

/* Palabras que no se pueden partir.
   «servicioalcliente@cenetur.com» no tiene ni un espacio: en el pie, a los
   anchos en que la columna se estrecha, se salía de la pantalla y la página
   desbordaba a lo ancho. Se permite partirlas antes que desbordar. */
.elementor-icon-list-text,
.elementor-widget-text-editor,
.elementor-heading-title { overflow-wrap: anywhere; }

/* ── Movimiento al desplazar ───────────────────────────────────────────────
   Los estados de partida se aplican SÓLO cuando el guion ha confirmado que va
   a animar (añade `cnt-con-movimiento` al documento). Si no hay JavaScript, o
   si el sistema pide menos movimiento, no se esconde nada: la página se ve
   entera y quieta. Esconder primero con CSS y descubrir después con JS deja
   la página en blanco cuando el guion no llega. */
.cnt-con-movimiento .cnt-revela,
.cnt-con-movimiento .cnt-revela-grupo > * {
  opacity: 0;
  transform: translateY(28px);
}
.cnt-con-movimiento .cnt-lineas h1,
.cnt-con-movimiento .cnt-lineas h2,
.cnt-con-movimiento .cnt-lineas h3 { opacity: 0; }

/* En el editor de Elementor nada puede quedar escondido: el constructor
   vuelve a pintar los widgets y ninguna animación los descubriría. */
.elementor-editor-active .cnt-revela,
.elementor-editor-active .cnt-revela-grupo > *,
.elementor-editor-active .cnt-lineas h1,
.elementor-editor-active .cnt-lineas h2,
.elementor-editor-active .cnt-lineas h3 {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* La caja recorta el recorrido de la fotografía. */
.cnt-parallax,
.cnt-parallax .elementor-widget-container { overflow: hidden; }
.cnt-parallax img { display: block; }

/* Índice de secciones: marca dónde estás. */
.cnt-indice .elementor-icon-list-item a { transition: color .25s ease; }
.cnt-indice a.cnt-activo .elementor-icon-list-text,
.cnt-indice .elementor-icon-list-item a.cnt-activo { color: var(--cnt-azul); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cnt-con-movimiento .cnt-revela,
  .cnt-con-movimiento .cnt-revela-grupo > *,
  .cnt-con-movimiento .cnt-lineas h1,
  .cnt-con-movimiento .cnt-lineas h2,
  .cnt-con-movimiento .cnt-lineas h3 { opacity: 1; transform: none; }
}

/* El icono de un icon-box, a la altura de su título.
   El título hereda el margen superior de los encabezados —8 px— que lo baja
   respecto del icono, y el icono, más corto que la línea del título, queda
   además descentrado: entre las dos cosas el icono flotaba 10,5 px por encima
   del texto en negrita. Se quita el margen y se centra el icono en la línea.
   El ajuste va en `em` del propio icono, para que siga valiendo si cambia de
   tamaño. */
.elementor-widget-icon-box .elementor-icon-box-title { margin-top: 0; }
/* La clase de posición va en el propio widget, y se llama
   `elementor-position-inline-start`, no `…-left`. */
.elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-icon,
.elementor-widget-icon-box.elementor-position-inline-end .elementor-icon-box-icon,
.elementor-widget-icon-box.elementor-position-left .elementor-icon-box-icon,
.elementor-widget-icon-box.elementor-position-right .elementor-icon-box-icon {
  display: flex;
  align-items: center;
  align-self: flex-start;
  margin-top: .14em;
}

/* ══ Cabecera ═════════════════════════════════════════════════════════════
   La fijación la hace el tema sobre el encabezado entero, no Elementor sobre
   la barra del menú: así las dos barras viajan juntas con un solo `transform`
   y la de arriba se repliega sin dejar un salto. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 900;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Al bajar: la barra superior se va, la del menú se queda arriba. */
.elementor-location-header.cnt-encogida {
  transform: translateY(calc(-1 * var(--cnt-alto-topbar, 46px)));
}
/* Si sigues bajando, se retira entera. Al subir vuelve. */
.elementor-location-header.cnt-oculta {
  transform: translateY(-101%);
}

.cnt-barra {
  transition: box-shadow .35s ease, padding-block .3s ease;
}
.cnt-encogida .cnt-barra {
  box-shadow: 0 10px 30px -12px rgba(0,42,68,.28);
  padding-block: 10px;
}
/* El logotipo cede un poco de sitio cuando la barra se compacta. */
.elementor-location-header .elementor-widget-theme-site-logo img {
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  transform-origin: left center;
}
.cnt-encogida .elementor-widget-theme-site-logo img { transform: scale(.9); }

/* Cuánto llevas de la página. Es información, no adorno: se mantiene aunque
   el sistema pida menos movimiento. */
.cnt-progreso {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--cnt-ambar), var(--cnt-ambar-claro));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ── El subrayado del menú ────────────────────────────────────────────────
   Se dibuja de izquierda a derecha al pasar por encima y se queda puesto en
   la página en la que estás. Sustituye al recuadro de fondo de Elementor.
   Ojo con la especificidad: Elementor estiliza `.elementor-nav-menu a` y su
   `:hover`, y gana a menos de tres clases. */
.elementor-location-header .elementor-nav-menu--main .elementor-item {
  position: relative;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 4px;
  height: 2px;
  background: var(--cnt-ambar);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover::after,
.elementor-location-header .elementor-nav-menu--main .elementor-item:focus-visible::after,
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  transform: scaleX(1);
}
/* Al salir, el subrayado se recoge por el otro lado: parece que se va, no que
   desaparece de golpe. */
.elementor-location-header .elementor-nav-menu--main .elementor-item::after {
  transform-origin: right center;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover::after,
.elementor-location-header .elementor-nav-menu--main .elementor-item:focus-visible::after,
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  transform-origin: left center;
}

/* ── El menú desplegable, en cascada ──────────────────────────────────────
   Los enlaces entran uno detrás de otro al abrir. Se hace con `animation` y
   un retraso por posición: no hace falta JavaScript para esto. */
.elementor-nav-menu--dropdown .menu-item { opacity: 1; }
.elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown .menu-item {
  animation: cnt-entra .42s cubic-bezier(.22,.61,.36,1) both;
}
.elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown .menu-item:nth-child(1) { animation-delay: .04s; }
.elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown .menu-item:nth-child(2) { animation-delay: .08s; }
.elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown .menu-item:nth-child(3) { animation-delay: .12s; }
.elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown .menu-item:nth-child(4) { animation-delay: .16s; }
.elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown .menu-item:nth-child(5) { animation-delay: .20s; }
.elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown .menu-item:nth-child(6) { animation-delay: .24s; }
.elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown .menu-item:nth-child(7) { animation-delay: .28s; }

@keyframes cnt-entra {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-location-header,
  .elementor-location-header.cnt-encogida,
  .elementor-location-header.cnt-oculta {
    transform: none;
    transition: none;
  }
  .elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown .menu-item {
    animation: none;
  }
  .elementor-location-header .elementor-nav-menu--main .elementor-item::after {
    transition: none;
  }
}

/* ── El panel de menú a pantalla completa ─────────────────────────────────
   El desplegable propio del widget no se usa: cuelga de la barra, se queda con
   la altura de su contenido y sus controles de color pintan los enlaces, no el
   panel. Se esconde y en su lugar se muestra `.cnt-panel`, que es un
   contenedor normal del Theme Builder y se edita como cualquier otro. */
.elementor-location-header .elementor-nav-menu--dropdown { display: none !important; }

.cnt-panel {
  position: fixed;
  inset-inline: 0;
  top: var(--cnt-alto-cabecera, 120px);
  height: calc(100dvh - var(--cnt-alto-cabecera, 120px));
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 880;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity .28s ease, transform .38s cubic-bezier(.22,.61,.36,1), visibility .28s;
}
.cnt-menu-abierto .cnt-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Un elemento fijo dentro de un ancestro con `transform` se coloca respecto
   del ancestro, no de la ventana. Mientras el panel está abierto el
   encabezado no se transforma, y así el panel se sitúa donde debe. */
.cnt-menu-abierto .elementor-location-header { transform: none !important; }

/* Los bloques del panel entran en cascada. */
.cnt-menu-abierto .cnt-panel > * {
  animation: cnt-entra .45s cubic-bezier(.22,.61,.36,1) both;
}
.cnt-menu-abierto .cnt-panel > *:nth-child(1) { animation-delay: .06s; }
.cnt-menu-abierto .cnt-panel > *:nth-child(2) { animation-delay: .12s; }
.cnt-menu-abierto .cnt-panel > *:nth-child(3) { animation-delay: .17s; }
.cnt-menu-abierto .cnt-panel > *:nth-child(4) { animation-delay: .22s; }

/* Y dentro del menú, enlace a enlace. */
.cnt-menu-abierto .cnt-panel-menu .menu-item {
  animation: cnt-entra .42s cubic-bezier(.22,.61,.36,1) both;
}
.cnt-menu-abierto .cnt-panel-menu .menu-item:nth-child(1) { animation-delay: .10s; }
.cnt-menu-abierto .cnt-panel-menu .menu-item:nth-child(2) { animation-delay: .15s; }
.cnt-menu-abierto .cnt-panel-menu .menu-item:nth-child(3) { animation-delay: .20s; }
.cnt-menu-abierto .cnt-panel-menu .menu-item:nth-child(4) { animation-delay: .25s; }
.cnt-menu-abierto .cnt-panel-menu .menu-item:nth-child(5) { animation-delay: .30s; }
.cnt-menu-abierto .cnt-panel-menu .menu-item:nth-child(6) { animation-delay: .35s; }
.cnt-menu-abierto .cnt-panel-menu .menu-item:nth-child(7) { animation-delay: .40s; }

/* Con el panel abierto, la página de detrás no se desplaza. */
.cnt-menu-abierto body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cnt-panel { transition: none; }
  .cnt-menu-abierto .cnt-panel > *,
  .cnt-menu-abierto .cnt-panel-menu .menu-item { animation: none; }
}

/* El cuerpo de una entrada llega como HTML del editor, no como widgets: le
   hace falta su propio ritmo tipográfico para que un aviso largo se lea. */
.elementor-widget-theme-post-content h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 21px;
  color: var(--cnt-azul);
  margin: 34px 0 12px;
}
.elementor-widget-theme-post-content p { margin: 0 0 18px; }
.elementor-widget-theme-post-content ul { padding-left: 22px; margin: 0 0 20px; }
.elementor-widget-theme-post-content li { margin-bottom: 9px; }
.elementor-widget-theme-post-content a { color: var(--cnt-azul); text-decoration: underline; text-underline-offset: 3px; }
.elementor-widget-theme-post-content em { color: #7A8A96; font-size: .94em; }

/* Las dos columnas de enlaces del pie, a la par en móvil: los títulos ocupan
   el alto de dos líneas aunque uno quepa en una. */
@media (max-width: 767px) {
  .cnt-pie-nav .elementor-widget-heading .elementor-heading-title {
    display: block;
    min-height: 2.5em;
  }
}

/* El icono de una lista, a la altura de su primera línea.
   Alinearlo arriba —que es lo correcto para un renglón de varias líneas— lo
   dejaba 5,5 px por encima del centro del texto, porque la flecha mide 13 px y
   la línea 24. Se le da a la caja del icono el alto de una línea y se centra el
   glifo dentro: queda a la altura del texto y sigue acompañando a la primera
   línea cuando el renglón ocupa varias. Como el icono hereda el mismo tamaño de
   letra y la misma altura de línea que el texto, la medida escala sola. */
.elementor-icon-list-icon {
  display: flex;
  align-items: center;
  min-height: 1.5em;
  min-height: 1lh;
}

/* Red de seguridad para los saltos a un ancla: aunque el navegador salte por
   su cuenta —sin JavaScript, o restaurando la posición—, el destino no queda
   debajo de la cabecera fija. */
[id]:not(body):not(html) { scroll-margin-top: 108px; }

/* Enlaces dentro de un texto corrido: teléfonos, correos, referencias.
   Sin estilo propio se ven igual que el texto y nadie sabe que se pueden
   tocar, que en un móvil es justo lo que hace falta con un teléfono. */
.elementor-widget-text-editor a,
.elementor-icon-list-text a,
.elementor-widget-icon-box .elementor-icon-box-description a,
/* Las respuestas del acordeón son HTML del editor: sus enlaces salían en el
   magenta de fábrica de Hello Elementor (#CC3366) y sin subrayar, que no es de
   la marca y encima no parecía un enlace. */
.elementor-tab-content a,
.elementor-accordion-content a {
  color: var(--cnt-azul);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.elementor-widget-text-editor a:hover,
.elementor-icon-list-text a:hover,
.elementor-tab-content a:hover { color: var(--cnt-azul-oscuro); }

/* La barra en tablet y móvil: el logotipo a la izquierda y, a la derecha, los
   dos controles de la cabecera —emergencias y menú— pegados el uno al otro.
   Con `space-between` y tres elementos, el botón ámbar quedaba flotando en
   mitad de la barra, a la misma distancia del logotipo que de la hamburguesa;
   un margen automático lo manda al grupo de la derecha.
   Los dos tienen que medir y curvarse igual —círculos de 44 px, el mínimo
   cómodo para el pulgar— y llevarse poco espacio entre sí: así se leen como
   un par de controles y no como dos piezas sueltas que cayeron cerca. */
@media (max-width: 1279px) {
  .cnt-barra .e-con-inner { gap: 10px; }
  /* Vale para los dos botones, porque no es el mismo en todos los tamaños: en
     tablet se ve el de texto completo y en móvil el de sólo icono. El que
     esté oculto no estorba, porque no ocupa sitio. */
  .cnt-barra .elementor-widget-button { margin-inline-start: auto; }
  .cnt-barra .elementor-widget-button .elementor-button { min-height: 44px; }
  .cnt-barra .elementor-widget-button.elementor-hidden-desktop .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .cnt-barra .elementor-menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 999px;
  }
}

/* ==========================================================================
   AVISOS
   Las tarjetas de noticias y avisos, y el cuerpo de un aviso abierto.

   Un aviso de interrupción programada y un comunicado no se leen igual: el
   primero decide si alguien mueve su día. Por eso la tarjeta empieza por el
   tipo —una etiqueta de color sobre la fotografía— y no por el titular: se
   distingue de un vistazo, antes de leer nada.

   Se usa la misma tarjeta en los tres sitios donde salen avisos —portada,
   listado y resultados de búsqueda—, porque es el mismo contenido y no hay
   razón para que se vea de tres maneras.
   ========================================================================== */

.cnt-avisos .elementor-posts-container { gap: 28px 26px; }

/* ── La tarjeta ──────────────────────────────────────────────────────── */
.cnt-avisos .elementor-post .elementor-post__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--cnt-linea);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 32, 43, .04);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1),
              box-shadow .35s cubic-bezier(.22, .61, .36, 1),
              border-color .35s;
}
.cnt-avisos .elementor-post:hover .elementor-post__card {
  transform: translateY(-3px);
  border-color: #C7D7E4;
  box-shadow: 0 18px 34px -20px rgba(0, 42, 68, .42);
}

/* El orden del marcado no es el de lectura: la fecha viene al final y tiene
   que ir encima del titular, como en cualquier noticia. */
.cnt-avisos .elementor-post .elementor-post__thumbnail__link { order: 1; display: block; }
.cnt-avisos .elementor-post .elementor-post__meta-data      { order: 2; }
.cnt-avisos .elementor-post .elementor-post__text           { order: 3; }

/* La firma del autor sale del Gravatar de la cuenta que publicó; sin Gravatar,
   WordPress sirve una silueta gris. Un aviso lo firma CENETUR. */
.cnt-avisos .elementor-post .elementor-post__avatar { display: none; }

/* ── La fotografía ───────────────────────────────────────────────────── */
/* Elementor centra la imagen con `translate(-50%,-50%) scale(1.01)`. Al
   ampliarla hay que repetir ese centrado: con un `scale` a secas la foto se
   va a la esquina. */
.cnt-avisos .elementor-post .elementor-post__thumbnail img {
  /* Sólo se anima `scale`, nunca `transform`: Elementor centra la foto con
     `transform` DESPUÉS de cargar, y con la transición puesta en `transform`
     ese centrado se animaba — la foto aparecía descolocada y se deslizaba a
     su sitio, o se quedaba descolocada en móvil si el navegador frenaba la
     animación (2026-10-01). */
  transition: scale .7s cubic-bezier(.22, .61, .36, 1);
}
.cnt-avisos .elementor-post:hover .elementor-post__thumbnail img {
  scale: 1.06;
}

/* ── El tipo de aviso ────────────────────────────────────────────────── */
/* El `!important` es necesario, y es el único de este bloque. Elementor
   escribe en la página una regla propia para esta etiqueta
   —`.elementor-98 .elementor-element-XXXX .elementor-post__card .elementor-post__badge`,
   cinco clases— con `right: 0` y `margin: 20px`. Gana por especificidad y va
   después, y con `left` y `right` puestos a la vez la etiqueta deja de
   ajustarse a su texto y se estira de lado a lado de la tarjeta: salía una
   barra ámbar cruzando el aviso. Igualar esa especificidad obligaría a
   escribir seis clases delante de cada regla. */
.cnt-avisos .elementor-post .elementor-post__badge {
  top: 14px;
  left: 14px;
  right: auto !important;
  margin: 0 !important;
  /* La fotografía de la tarjeta lleva un `transform` —el centrado de
     Elementor— y eso la sube de capa: sin `z-index` la etiqueta se pintaba
     debajo de la foto y no se veía, aunque estuviera en su sitio y el
     navegador la diera por visible. */
  z-index: 2;
  padding: 7px 13px;
  border-radius: 999px;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--cnt-azul);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 42, 68, .28);
}
/* Un corte de luz anunciado se señala como se señalan los avisos de alerta.
   Tinta sobre el ámbar de marca da 6,63:1; blanco daría 2,49:1. */
.cnt-avisos .category-interrupcion-programada .elementor-post__badge {
  background: var(--cnt-ambar);
  color: var(--cnt-tinta);
}
.cnt-avisos .category-recomendaciones .elementor-post__badge {
  background: #fff;
  color: var(--cnt-azul);
}
.cnt-avisos .category-proyectos-y-obras .elementor-post__badge {
  background: var(--cnt-azul-oscuro);
  color: #fff;
}

/* ── La fecha ────────────────────────────────────────────────────────── */
.cnt-avisos .elementor-post .elementor-post__meta-data {
  margin: 0;
  padding: 20px 22px 0;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #6B7C8B;
}

/* ── El texto ────────────────────────────────────────────────────────── */
.cnt-avisos .elementor-post .elementor-post__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  margin: 0;
  padding: 7px 22px 24px;
}
.cnt-avisos .elementor-post .elementor-post__title {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 19.5px;
  line-height: 1.3;
  letter-spacing: -.012em;
}
.cnt-avisos .elementor-post .elementor-post__title a {
  color: var(--cnt-azul);
  text-decoration: none;
  transition: color .25s;
}
.cnt-avisos .elementor-post:hover .elementor-post__title a { color: var(--cnt-azul-oscuro); }

/* Toda la tarjeta lleva al aviso, pero el enlace sigue siendo uno solo: el
   del titular, que es el que se lee en voz alta y el que recibe el foco. */
.cnt-avisos .elementor-post .elementor-post__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cnt-avisos .elementor-post .elementor-post__excerpt { margin: 0; }
.cnt-avisos .elementor-post .elementor-post__excerpt p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.62;
  color: var(--cnt-texto);
}

.cnt-avisos .elementor-post .elementor-post__read-more {
  margin-top: auto;
  padding-top: 4px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--cnt-ambar);   /* enlaces en amarillo CENETUR (2026-09-29) */
  text-decoration: none;
  transition: color .2s ease;
}
.cnt-avisos .elementor-post .elementor-post__read-more:hover,
.cnt-avisos .elementor-post .elementor-post__read-more:focus-visible { color: #002A44; }
.cnt-avisos .elementor-post .elementor-post__read-more::after {
  content: "\2192";
  /* La flecha se escribe con Inter, que sí trae el glifo. */
  font-family: 'Inter', sans-serif;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}
.cnt-avisos .elementor-post:hover .elementor-post__read-more::after { transform: translateX(4px); }

/* ── El primero del listado, a lo ancho ──────────────────────────────── */
/* El aviso más reciente es el que decide si alguien mueve su día, así que
   ocupa la fila entera y se lee en horizontal. En las páginas siguientes del
   listado no: allí el primero ya no es el más reciente. */
@media (min-width: 1025px) {
  body:not(.paged) .cnt-avisos--archivo .elementor-posts-container > .elementor-post:first-child {
    grid-column: 1 / -1;
  }
  body:not(.paged) .cnt-avisos--archivo .elementor-posts-container > .elementor-post:first-child .elementor-post__card {
    display: grid;
    grid-template-columns: 1.06fr 1fr;
    grid-template-rows: auto 1fr;
  }
  body:not(.paged) .cnt-avisos--archivo .elementor-post:first-child .elementor-post__thumbnail__link {
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100%;
  }
  body:not(.paged) .cnt-avisos--archivo .elementor-post:first-child .elementor-post__thumbnail {
    height: 100%;
    padding-bottom: 0 !important;
  }
  body:not(.paged) .cnt-avisos--archivo .elementor-post:first-child .elementor-post__meta-data {
    grid-column: 2;
    grid-row: 1;
    padding: 34px 34px 0;
  }
  body:not(.paged) .cnt-avisos--archivo .elementor-post:first-child .elementor-post__text {
    grid-column: 2;
    grid-row: 2;
    padding: 8px 34px 34px;
    gap: 12px;
  }
  body:not(.paged) .cnt-avisos--archivo .elementor-post:first-child .elementor-post__title {
    font-size: 27px;
    line-height: 1.22;
  }
  body:not(.paged) .cnt-avisos--archivo .elementor-post:first-child .elementor-post__excerpt p {
    font-size: 16px;
  }
}

/* ── Paginación y listado vacío ──────────────────────────────────────── */
.cnt-avisos .elementor-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.cnt-avisos .page-numbers {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cnt-linea);
  border-radius: 999px;
  background: #fff;
  color: var(--cnt-texto);
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: border-color .25s, color .25s, background-color .25s;
}
.cnt-avisos a.page-numbers:hover {
  border-color: var(--cnt-azul);
  color: var(--cnt-azul);
}
.cnt-avisos .page-numbers.current {
  background: var(--cnt-azul);
  border-color: var(--cnt-azul);
  color: #fff;
}
.cnt-avisos .elementor-posts-nothing-found {
  padding: 34px 28px;
  border: 1px dashed #C7D7E4;
  border-radius: 16px;
  background: #fff;
  color: var(--cnt-texto);
  text-align: center;
}

@media (max-width: 767px) {
  .cnt-avisos .elementor-post .elementor-post__meta-data { padding: 17px 18px 0; }
  .cnt-avisos .elementor-post .elementor-post__text { padding: 6px 18px 20px; }
  .cnt-avisos .elementor-post .elementor-post__title { font-size: 18.5px; }
}

/* ── El aviso abierto ────────────────────────────────────────────────── */
/* La etiqueta del tipo de aviso, en la portada. El control de ancho de
   Elementor —«en línea»— no basta dentro de un contenedor en columna: el
   elemento sigue estirándose de lado a lado porque lo estira el `align-items`
   del padre, y la píldora salía como una franja de 1.220 px. */
.cnt-chip-aviso {
  align-self: flex-start;
  width: auto;
}


/* El cuerpo lo escribe el cliente desde el editor de WordPress, así que aquí
   se le da forma a lo que él escribe: títulos, listas y citas. Las citas son
   el modo de destacar un teléfono o una nota. */
.cnt-cuerpo-aviso > *:first-child { margin-top: 0; }
.cnt-cuerpo-aviso p { margin: 0 0 16px; }
.cnt-cuerpo-aviso h2,
.cnt-cuerpo-aviso h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  color: var(--cnt-azul);
  letter-spacing: -.012em;
}
.cnt-cuerpo-aviso h2 { font-size: 25px; margin: 40px 0 12px; }
.cnt-cuerpo-aviso h3 { font-size: 21px; margin: 34px 0 10px; }

.cnt-cuerpo-aviso ul { list-style: none; margin: 0 0 20px; padding-left: 0; }
.cnt-cuerpo-aviso ul li {
  position: relative;
  margin-bottom: 9px;
  padding-left: 22px;
}
.cnt-cuerpo-aviso ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .66em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--cnt-ambar);
}
.cnt-cuerpo-aviso ol { margin: 0 0 20px; padding-left: 21px; }
.cnt-cuerpo-aviso ol li { margin-bottom: 9px; }
.cnt-cuerpo-aviso ol li::marker { color: var(--cnt-azul); font-weight: 600; }

.cnt-cuerpo-aviso blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  background: var(--cnt-azul-claro);
  border: 0;
  border-left: 4px solid var(--cnt-ambar);
  border-radius: 0 12px 12px 0;
  font-style: normal;
  quotes: none;
}
.cnt-cuerpo-aviso blockquote::before,
.cnt-cuerpo-aviso blockquote::after { content: none; }
.cnt-cuerpo-aviso blockquote p { margin: 0; }
.cnt-cuerpo-aviso blockquote strong {
  display: block;
  margin-bottom: 3px;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cnt-azul);
}
.cnt-cuerpo-aviso blockquote a {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 27px;
  line-height: 1.2;
  color: var(--cnt-azul-oscuro);
  text-decoration: none;
}
.cnt-cuerpo-aviso blockquote a:hover { color: var(--cnt-azul); }

/* Ir al aviso anterior o al siguiente sin volver al listado. */
.cnt-nav-aviso .elementor-post-navigation {
  padding-top: 24px;
  border-top: 1px solid var(--cnt-linea);
}
.cnt-nav-aviso .post-navigation__prev--label,
.cnt-nav-aviso .post-navigation__next--label {
  display: block;
  margin-bottom: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6B7C8B;
}
.cnt-nav-aviso .post-navigation__prev--title,
.cnt-nav-aviso .post-navigation__next--title {
  color: var(--cnt-azul);
  transition: color .25s;
}
.cnt-nav-aviso a:hover .post-navigation__prev--title,
.cnt-nav-aviso a:hover .post-navigation__next--title { color: var(--cnt-azul-oscuro); }

/* Respeta la preferencia de menos movimiento del sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Llamadas a la acción como enlace ────────────────────────────────── */
/* Desde el 2026-09-26 todos los botones se leen como el «LEER AVISO →» de
   los avisos: versalitas con flecha, sin fondo. El color —azul sobre claro,
   blanco sobre oscuro— lo pone cada botón en Elementor; aquí sólo la flecha,
   con Inter porque Jost no trae el glifo. Se mueve con `transform`, nunca
   con el margen, para no recalcular el diseño en cada fotograma. */
.cnt-enlace .elementor-button-text::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  font-family: 'Inter', sans-serif;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}
.cnt-enlace .elementor-button:hover .elementor-button-text::after,
.cnt-enlace .elementor-button:focus-visible .elementor-button-text::after {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .cnt-enlace .elementor-button-text::after { transition: none; }
}

/* Menú principal en escritorio (8 enlaces desde el 2026-09-29, con «Sobre
   Cap Cana»). La cabecera tiene ancho máximo: por encima de 1340 px el menú
   dispone siempre de 853 px y con 13 px de aire y letra de 15,5 necesitaba
   915. Con 9 px y 15 px ocupa ~828. Por debajo de 1280 no cabe de ninguna
   forma limpia: ahí pasa a hamburguesa (corte tablet_extra del kit = 1279).
   !important porque Elementor genera estos valores con cinco clases. */
@media (min-width: 1280px) {
  .elementor-location-header .elementor-element-eae179b .elementor-nav-menu--main .elementor-item {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 15px !important;
  }
}
/* El botón de avería del encabezado nunca parte su texto en dos líneas. */
.elementor-location-header .elementor-widget-button .elementor-button-text { white-space: nowrap; }

/* ═════════════════════════════════════════════════════════════════════════
   Responsive táctil (2026-10-01)
   Lo que es igual en todo el sitio. Lo propio de cada bloque (anchos,
   tamaños de letra, orden, alturas) está en Elementor, pestañas Tablet/Móvil.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  /* La flecha va pegada a la última palabra con un espacio duro: con texto
     largo («Ver servicios para condominios») se quedaba sola en otra línea.
     En táctil no hay :hover, así que no se pierde el desplazamiento. */
  .cnt-enlace .elementor-button-text::after {
    content: "\00a0\2192";
    display: inline;
    margin-left: 0;
  }
  /* Zona táctil mínima de 44 px para todos los botones y enlaces de acción. */
  .elementor-widget-button .elementor-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .cnt-avisos .elementor-post .elementor-post__read-more { padding-block: 10px; }
}

/* Fotos de las tarjetas de segmentos de la portada: todas con la misma
   proporción (la de Condominios es 3:2 y salía más alta que las otras). */
.elementor-7 .elementor-element-c532f47 .elementor-widget-image img {
  width: 100%;
  aspect-ratio: 760 / 480;
  object-fit: cover;
}

@media (max-width: 767px) {
  /* Etiqueta de categoría en la entrada de un aviso: zona táctil cómoda. */
  .elementor-location-single .elementor-post-info__terms-list-item,
  .elementor-location-single .elementor-element-cad72d4 a {
    display: inline-block;
    padding-block: 10px;
  }
}
/* Pie: todo el recuadro de emergencias responde al toque, no sólo la línea
   del número (22 px de alto). */
.elementor-location-footer .elementor-element-aeaa7ce a { display: block; padding-block: 8px; }

/* ── Tipografía pulida (2026-10-02) ───────────────────────────────── */
/* Acordeones: el título es un <h2> y heredaba 32 px; eso agrandaba el
   icono y abría huecos enormes cuando el título ocupa dos líneas. */
.elementor-accordion .elementor-tab-title {
  font-size: 17px; line-height: 1.35;
  display: flex; align-items: center; gap: 12px;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-icon {
  float: none; width: auto; flex: 0 0 auto; font-size: 18px; line-height: 1;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right { order: 2; margin-left: auto; }
.elementor-accordion .elementor-accordion-title { line-height: 1.35; }
/* Nosotros: los saltos de línea forzados del titular sólo tienen sentido
   en escritorio; en pantallas estrechas dejaban «en» sola en una línea. */
@media (max-width: 1024px) {
  .elementor-8 .elementor-element-1e3204e br { display: none; }
}
/* Títulos: evitar viudas de una palabra donde el navegador lo soporte. */
.elementor-heading-title, .elementor-icon-box-title { text-wrap: balance; }
.elementor-widget-text-editor p { text-wrap: pretty; }
/* El título del acordeón tiene 48 px mínimos para el dedo: texto centrado en ese alto. */
.elementor-accordion .elementor-accordion-title { display: flex; align-items: center; }

/* ==========================================================================
   MODO APP EN EL MÓVIL (2026-10-02)
   Por debajo de 768 px la web se usa como una app: barra inferior fija,
   tarjetas que se deslizan de lado, respuesta al toque y pie plegable.
   La barra la pinta functions.php y los grupos los marca assets/cnt-app.js.
   En tablet y escritorio nada de esto existe.
   ========================================================================== */

.cnt-app-barra { display: none; }

@media (max-width: 767px) {
  html { -webkit-tap-highlight-color: transparent; }

  /* ── Barra inferior ─────────────────────────────────────────────── */
  .cnt-app-barra {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 9990;
    display: flex;
    align-items: flex-end;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--cnt-linea);
    box-shadow: 0 -8px 28px rgba(20, 32, 43, .07);
  }
  .cnt-app-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px 0 2px;
    background: none;
    border: 0;
    border-radius: 12px;
    color: #6B7A88;
    font: 500 11px/1 Inter, system-ui, sans-serif;
    letter-spacing: .1px;
    text-decoration: none;
    cursor: pointer;
  }
  .cnt-app-item:hover,
  .cnt-app-item:focus { color: var(--cnt-azul); background: none; }
  .cnt-app-item:focus-visible { outline: 2px solid var(--cnt-azul); outline-offset: -2px; }
  .cnt-app-item svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cnt-app-item.es-activo { color: var(--cnt-azul); font-weight: 600; }
  .cnt-app-item.es-activo svg { stroke-width: 2.2; }

  /* Avería: el botón central, en ámbar y levantado, como la acción principal. */
  .cnt-app-averia { color: var(--cnt-tinta); font-weight: 600; }
  .cnt-app-averia svg {
    width: 52px;
    height: 52px;
    margin-top: -24px;
    padding: 13px;
    border-radius: 50%;
    background: var(--cnt-ambar);
    fill: #fff;
    stroke: #fff;
    stroke-width: 1.2;
    box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(235, 142, 35, .45);
  }
  .cnt-app-averia:hover,
  .cnt-app-averia:focus { color: var(--cnt-tinta); }

  /* Sitio para la barra al final de la página. */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .cnt-panel { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* Cabecera de app: logotipo limpio. El menú y la avería ya están en la
     barra de abajo, al alcance del pulgar. El botón de la hamburguesa sigue
     ahí —oculto— porque es quien abre y cierra el panel. */
  .cnt-app .cnt-barra .elementor-widget-button,
  .cnt-app .cnt-barra .elementor-widget-nav-menu {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    margin: 0 !important;
  }

  /* ── Tarjetas deslizables ───────────────────────────────────────── */
  .cnt-desliza {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -20px !important;
    padding: 4px 20px 10px !important;
    scroll-padding-inline: 20px;
    width: calc(100% + 40px) !important;
    max-width: none !important;
  }
  .cnt-desliza::-webkit-scrollbar { display: none; }
  .cnt-desliza > * {
    flex: 0 0 82% !important;
    width: 82% !important;
    max-width: 82% !important;
    min-width: 0;
    margin: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .cnt-sin-suave .cnt-desliza { scroll-behavior: auto; }

  .cnt-puntos {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
  }
  .cnt-puntos span {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #C9D3DC;
    transition: width .25s ease, background-color .25s ease;
  }
  .cnt-puntos span.es-activo { width: 18px; background: var(--cnt-azul); }

  /* ── Respuesta al toque ─────────────────────────────────────────── */
  .elementor-button,
  .cnt-app-item,
  .elementor-post__card,
  a.e-con,
  .elementor-icon-box-wrapper,
  .elementor-tab-title {
    transition: transform .14s ease, background-color .2s ease, color .2s ease;
  }
  .elementor-button:active,
  .elementor-post__card:active,
  a.e-con:active { transform: scale(.97); }
  .cnt-app-item:active { transform: scale(.92); }
  .elementor-tab-title:active { background-color: var(--cnt-gris) !important; }

  /* ── Pie plegable ───────────────────────────────────────────────── */
  .cnt-pliega {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-block: 0 !important;
    gap: 0 !important;
  }
  .cnt-pliega .elementor-heading-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    margin: 0;
    cursor: pointer;
  }
  .cnt-pliega .elementor-widget-heading { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
  .cnt-pliega .elementor-heading-title::after {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .25s ease;
    opacity: .8;
  }
  .cnt-pliega.es-abierto .elementor-heading-title::after { transform: translateY(2px) rotate(-135deg); }
  .cnt-pliega .elementor-widget-icon-list { display: none; }
  .cnt-pliega.es-abierto .elementor-widget-icon-list { display: block; padding-bottom: 14px; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .elementor-button:active,
  .elementor-post__card:active,
  a.e-con:active,
  .cnt-app-item:active { transform: none; }
  .cnt-puntos span,
  .cnt-pliega .elementor-heading-title::after { transition: none; }
}