/* SEO · AADEPMA — sistema de marca.
 *
 * Los colores salen del logotipo oficial, muestreados del archivo: el azul
 * del rótulo, el naranja y el amarillo del sol, y los grises del engranaje.
 * Solo el azul profundo, el fondo frío y los tres estados son derivados.
 *
 * Tipografía: Archivo en titulares y botones (lo único que se descarga),
 * Arial en texto —ya está en el dispositivo— y el mono del sistema para
 * datos. Sin animaciones.
 */

:root {
  /* Azul — del logo */
  --aad-azul: #014C96;
  --aad-azul-rotulo: #13589D;
  --aad-azul-claro: #2666A5;
  --aad-azul-copo: #273480;
  /* Derivados del azul */
  --aad-azul-hondo: #013A73;
  --aad-azul-pie: #012A55;
  --aad-frio: #F4F6F9;
  /* Sol — del logo */
  --aad-naranja: #F7820E;
  --aad-naranja-hover: #D96F05;
  --aad-amarillo: #FDCA23;
  /* Acero — del logo */
  --aad-acero-900: #1C2733;
  --aad-acero-700: #575756;
  --aad-acero-500: #97999C;
  --aad-acero-100: #DDDDDD;
  /* Estados — derivados, no están en el logo */
  --aad-ok: #1B7F4B;
  --aad-aviso: #B4690E;
  --aad-error: #A3252B;

  --aad-titulo: Archivo, "Helvetica Neue", Arial, sans-serif;
  --aad-texto: Arial, Helvetica, sans-serif;
  --aad-dato: ui-monospace, Consolas, "Courier New", monospace;
  --aad-radio: 4px;
}

/* ------------------------------------------------------------------
 * Base de las páginas del plugin
 * ------------------------------------------------------------------ */

.aadepma-seo-pagina .entry-content,
.aadepma-seo-pagina .uicore-content {
  color: var(--aad-acero-900);
  font-family: var(--aad-texto);
  overflow-wrap: anywhere;
}
.aadepma-seo-pagina .entry-content > p,
.aadepma-seo-pagina .entry-content > ul,
.aadepma-seo-pagina .entry-content > ol {
  max-width: 72ch;
  line-height: 1.65;
}
.aadepma-seo-pagina .entry-content h2,
.aadepma-seo-pagina .entry-content h3,
.aadepma-seo-pagina .uicore-content h2,
.aadepma-seo-pagina .uicore-content h3,
.aadepma-seo-pagina .uicore-page-title h1 {
  font-family: var(--aad-titulo);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.aadepma-seo-pagina .entry-content h2 { margin-top: 2.2em; }
.aadepma-seo-pagina .entry-content li + li { margin-top: .35em; }
.aadepma-seo-pagina .entry-content a:not(.aadepma-boton),
.aadepma-seo-pagina .uicore-content a:not(.aadepma-boton) { color: var(--aad-azul); }
.aadepma-seo-pagina .entry-content a:not(.aadepma-boton):hover,
.aadepma-seo-pagina .uicore-content a:not(.aadepma-boton):hover { color: var(--aad-azul-hondo); }

/* El título del tema (UiCore) sale a 72px en media columna: con los títulos
 * de servicio eran cuatro renglones. */
.aadepma-seo-pagina .uicore-page-title h1 {
  max-width: min(100%, 18em) !important;
  font-size: clamp(2rem, 1.1rem + 3vw, 3.75rem) !important;
  line-height: 1.08 !important;
  color: var(--aad-azul-hondo);
}

/* Portada: el icono fijo de WhatsApp de Elementor quedaba debajo de la
 * burbuja del chat de Aira (las dos abajo a la derecha). Se lleva a la
 * esquina izquierda, y la franja fija que lo contiene deja de tapar clics. */
.home .elementor-widget-icon[data-settings*='"_position":"fixed"'] { pointer-events: none; }
.home .elementor-widget-icon[data-settings*='"_position":"fixed"'] .elementor-icon {
  pointer-events: auto;
  position: fixed;
  left: 16px;
  right: auto;
  bottom: 16px;
}

/* ------------------------------------------------------------------
 * Botones — uno naranja por pantalla, siempre el de WhatsApp
 * ------------------------------------------------------------------ */

.aadepma-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 52px;
  padding: .75em 1.6em;
  border-radius: var(--aad-radio);
  background: var(--aad-naranja);
  color: #fff !important;
  font-family: var(--aad-titulo);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
  /* Propio, no heredado del tema: con width:100% en movil, el relleno tiene
     que entrar dentro de la caja o el boton se sale de la pantalla. */
  box-sizing: border-box;
}
.aadepma-boton:hover { background: var(--aad-naranja-hover); }
.aadepma-boton:focus-visible { outline: 3px solid var(--aad-amarillo); outline-offset: 2px; }
.aadepma-wa-icono { flex: none; }

/* ------------------------------------------------------------------
 * Bloque de llamada a la acción
 * ------------------------------------------------------------------ */

.aadepma-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin: 2.4em 0;
  padding: 28px 30px;
  border-radius: var(--aad-radio);
  background: var(--aad-azul-hondo);
  color: #D5E3F2;
}
.aadepma-cta__texto { flex: 1 1 320px; min-width: 0; }
.aadepma-cta p { margin: 0; max-width: none; }
.aadepma-cta__titulo {
  color: #fff;
  font-family: var(--aad-titulo);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.aadepma-cta__detalle { margin-top: .45em !important; font-size: 1rem; line-height: 1.55; }
.aadepma-cta__horario {
  margin-top: .35em !important;
  font-family: var(--aad-dato);
  font-size: .8125rem;
  line-height: 1.4;
  color: #A9C4E0;
}
.aadepma-cta a:not(.aadepma-boton) { color: #fff; }

/* ------------------------------------------------------------------
 * Tarjetas — filete azul arriba, borde de acero, esquina de 4 px
 * ------------------------------------------------------------------ */

.aadepma-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 18px;
  margin: 1.8em 0 !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: none !important;
}
.aadepma-tarjeta { margin: 0 !important; }
.aadepma-tarjeta a {
  display: flex;
  flex-direction: column;
  gap: .5em;
  height: 100%;
  padding: 22px 22px 24px;
  border: 1px solid var(--aad-acero-100);
  border-top: 4px solid var(--aad-azul);
  border-radius: var(--aad-radio);
  background: #fff;
  color: var(--aad-acero-700);
  text-decoration: none;
}
.aadepma-tarjeta a:hover {
  border-color: var(--aad-acero-100);
  border-top-color: var(--aad-azul-claro);
  box-shadow: 0 6px 18px rgba(1, 76, 150, .10);
}
.aadepma-tarjeta a:focus-visible { outline: 3px solid var(--aad-azul-claro); outline-offset: 2px; }
.aadepma-tarjeta__titulo {
  color: var(--aad-acero-900);
  font-family: var(--aad-titulo);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.25;
}
.aadepma-tarjeta__resumen { font-size: .9375rem; line-height: 1.55; flex: 1; }
.aadepma-tarjeta__ir { color: var(--aad-azul); font-family: var(--aad-titulo); font-weight: 600; font-size: .9375rem; }

/* El simbolo de cada servicio.
 *
 * Va en un cuadro de color frio para que la tarjeta tenga un punto de
 * entrada visual antes del titulo. El trazo hereda el azul de la marca; al
 * pasar por encima se invierte, que es la unica animacion de la tarjeta. */
.aadepma-tarjeta__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: .35em;
  border-radius: 10px;
  background: var(--aad-frio);
  color: var(--aad-azul);
  transition: background-color .18s ease, color .18s ease;
}
.aadepma-tarjeta__marca svg { width: 25px; height: 25px; display: block; }
.aadepma-tarjeta a:hover .aadepma-tarjeta__marca,
.aadepma-tarjeta a:focus-visible .aadepma-tarjeta__marca {
  background: var(--aad-azul);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .aadepma-tarjeta__marca { transition: none; }
}

.aadepma-relacionados { margin-top: 3.2em; }
.aadepma-relacionados__titulo { font-family: var(--aad-titulo); font-size: 1.45rem; }

/* ------------------------------------------------------------------
 * Tarifa
 * ------------------------------------------------------------------ */

.aadepma-tarifa { margin: 1.4em 0 1.8em; }
.aadepma-tabla-scroll { overflow-x: auto; }
.aadepma-tarifa table {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.aadepma-tarifa caption {
  text-align: left;
  font-family: var(--aad-titulo);
  font-weight: 600;
  color: var(--aad-acero-900);
  padding-bottom: .6em;
}
.aadepma-tarifa th, .aadepma-tarifa td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--aad-acero-100);
  text-align: left;
  vertical-align: top;
}
.aadepma-tarifa thead th {
  font-family: var(--aad-dato);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--aad-azul);
  font-weight: 500;
}
.aadepma-tarifa tbody th { font-weight: 400; color: var(--aad-acero-700); }
.aadepma-tarifa td { color: var(--aad-acero-900); font-family: var(--aad-dato); font-weight: 500; }
.aadepma-tarifa__nota { font-size: .9375rem; margin: .8em 0 0 !important; color: var(--aad-acero-700); }

/* ------------------------------------------------------------------
 * Contacto
 * ------------------------------------------------------------------ */

.aadepma-nap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
  margin: 1.8em 0;
}
.aadepma-nap__bloque {
  padding: 24px;
  border: 1px solid var(--aad-acero-100);
  border-top: 4px solid var(--aad-azul);
  border-radius: var(--aad-radio);
}
.aadepma-nap__bloque h2 { margin-top: 0 !important; font-family: var(--aad-titulo); font-size: 1.25rem !important; }
.aadepma-horario {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-variant-numeric: tabular-nums;
}
.aadepma-horario li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--aad-acero-100);
  margin: 0 !important;
}
.aadepma-horario li span + span { font-family: var(--aad-dato); color: var(--aad-acero-900); }
.aadepma-nap__nota { font-size: .9375rem; margin-top: 1em; color: var(--aad-acero-700); }

.aadepma-guias ul { padding-left: 1.2em; }
.aadepma-guias__todas { margin-top: .6em !important; font-weight: 700; }

/* ------------------------------------------------------------------
 * Guías
 * ------------------------------------------------------------------ */

.aadepma-seo-guia .uicore-page-title h1 {
  max-width: min(100%, 24em) !important;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem) !important;
}
/* El tema pinta los H2 a 48px, más grandes que el H1 de una guía, y el
 * contenido de una página va dentro de .uicore-content (no .entry-content). */
.aadepma-seo-guia .uicore-content > h2,
.aadepma-seo-guia .aadepma-biblioteca h2 {
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.1rem) !important;
  line-height: 1.2 !important;
  margin-top: 1.8em;
  max-width: 34em;
  color: var(--aad-azul-hondo);
}
.aadepma-seo-guia .uicore-content > h3 {
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem) !important;
  margin-top: 1.5em;
}
.aadepma-seo-guia .uicore-content > p,
.aadepma-seo-guia .uicore-content > ul,
.aadepma-seo-guia .uicore-content > ol {
  max-width: 75ch;
  line-height: 1.7;
}
.aadepma-seo-guia .uicore-content > ul li + li,
.aadepma-seo-guia .uicore-content > ol li + li { margin-top: .45em; }

/* «En resumen» y avisos de seguridad */
.aadepma-seo-pagina p.aadepma-resumen {
  max-width: 72ch;
  padding: 18px 22px;
  border-left: 4px solid var(--aad-azul);
  border-radius: 0 var(--aad-radio) var(--aad-radio) 0;
  background: var(--aad-frio);
  color: var(--aad-acero-900);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.aadepma-seo-pagina p.aadepma-aviso {
  max-width: 72ch;
  padding: 16px 20px;
  border: 1px solid var(--aad-amarillo);
  border-left: 4px solid var(--aad-aviso);
  border-radius: var(--aad-radio);
  background: #FFF7E6;
  color: var(--aad-acero-900);
}

/* Biblioteca de guías */
.aadepma-biblioteca__grupo { margin-top: 2.6em; }
.aadepma-biblioteca__grupo h2 { margin-top: 0 !important; }
.aadepma-biblioteca__grupo > p { max-width: 72ch; }
.aadepma-biblioteca .aadepma-tarjetas { margin-top: 1.1em !important; }

/* Pie de cada guía */
.aadepma-guia-pie { margin-top: 2.6em; }
.aadepma-guia-pie__servicio {
  max-width: 72ch;
  padding: 20px 22px;
  border: 1px solid var(--aad-acero-100);
  border-top: 4px solid var(--aad-azul);
  border-radius: var(--aad-radio);
}
.aadepma-guia-pie__servicio p { margin: 0; }
.aadepma-guia-pie__servicio p + p { margin-top: .35em; }
.aadepma-guia-pie__rotulo {
  font-family: var(--aad-dato);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--aad-azul);
}
.aadepma-guia-pie__servicio a { font-family: var(--aad-titulo); font-weight: 600; font-size: 1.15rem; }
.aadepma-guia-pie .aadepma-guias { margin-top: 2em; }
.aadepma-guia-pie .aadepma-guias h2 { font-family: var(--aad-titulo); font-size: 1.35rem !important; margin-top: 0; }
.aadepma-guia-pie__nota { max-width: 72ch; margin-top: 2em; font-size: .9rem; color: var(--aad-acero-700); }
.aadepma-portada__guias { max-width: 70ch; color: var(--aad-acero-700); }

/* ------------------------------------------------------------------
 * Portada: sección añadida antes de «Contáctenos»
 * ------------------------------------------------------------------ */

.aadepma-portada {
  padding: 64px 16px;
  background: var(--aad-frio);
  border-top: 1px solid var(--aad-acero-100);
}
.aadepma-portada__interior { max-width: 1170px; margin: 0 auto; }
.aadepma-portada__rotulo {
  display: block;
  font-family: var(--aad-dato);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aad-azul);
  margin-bottom: .6em;
}
.aadepma-portada h2 {
  margin: 0 0 .35em;
  font-family: var(--aad-titulo);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--aad-acero-900);
  text-wrap: balance;
}
.aadepma-portada__intro { max-width: 70ch; color: var(--aad-acero-700); line-height: 1.65; }

/* Franja de hechos comprobables */
.aadepma-hechos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 20px 32px;
  margin: 0 0 2em !important;
  padding: 24px 0 !important;
  list-style: none !important;
  max-width: none !important;
  border-top: 1px solid var(--aad-acero-100);
  border-bottom: 1px solid var(--aad-acero-100);
}
.aadepma-hechos li {
  margin: 0 !important;
  font-family: var(--aad-titulo);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--aad-azul);
}
.aadepma-hechos li:first-child { font-size: 1.625rem; }

/* Enlaces a las redes */
.aadepma-redes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.2em; }
.aadepma-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--aad-acero-100);
  border-radius: var(--aad-radio);
  color: var(--aad-azul) !important;
  background: #fff;
}
.aadepma-redes a:hover { border-color: var(--aad-azul-claro); background: var(--aad-frio); }
.aadepma-redes a:focus-visible { outline: 3px solid var(--aad-azul-claro); outline-offset: 2px; }
.aadepma-redes svg { display: block; }

/* ------------------------------------------------------------------
 * Móvil: barra fija con WhatsApp y llamar.
 * Deja libre la esquina derecha: ahí vive la burbuja del chat de Aira
 * (right:12px, 56px de ancho).
 * ------------------------------------------------------------------ */

.aadepma-barra { display: none; }
@media (max-width: 767px) {
  .aadepma-barra {
    display: flex;
    gap: 8px;
    position: fixed;
    left: 12px;
    right: 84px;
    bottom: 12px;
    z-index: 9990;
  }
  .aadepma-boton--barra {
    flex: 1 1 auto;
    min-width: 0;
    box-shadow: 0 4px 14px rgba(1, 42, 85, .3);
    white-space: normal;
  }
  .aadepma-barra__llamar {
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border: 2px solid var(--aad-azul);
    border-radius: var(--aad-radio);
    background: #fff;
    color: var(--aad-azul) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(1, 42, 85, .3);
  }
  .aadepma-barra__llamar:focus-visible { outline: 3px solid var(--aad-amarillo); outline-offset: 2px; }
  body.aadepma-seo-pagina { padding-bottom: 80px; }
  .aadepma-cta { padding: 20px; }
  /* Ningun boton de la marca desborda su caja en pantallas estrechas: el
     texto parte de linea antes que sacar barra de scroll horizontal. */
  .aadepma-boton { white-space: normal; max-width: 100%; }
  .aadepma-cta .aadepma-boton { width: 100%; white-space: normal; }
  .aadepma-portada { padding: 44px 16px; }
  .aadepma-hechos { gap: 14px; padding: 20px 0 !important; }
  .aadepma-hechos li { font-size: .9375rem; }
  .aadepma-hechos li:first-child { font-size: 1.25rem; }
}

/* ------------------------------------------------------------------
 * Pie de la web. Va dentro de la plantilla del tema como un solo
 * bloque de shortcode: el contenido sale de la ficha unica.
 * ------------------------------------------------------------------ */

.aadepma-pie {
  background: var(--aad-azul-pie);
  color: #C9DCEF;
  font-family: var(--aad-texto);
  padding: 56px 16px 28px;
}
.aadepma-pie__interior {
  max-width: 1170px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.aadepma-pie__logo { display: block; height: auto; max-width: 260px; background: #fff; border-radius: var(--aad-radio); padding: 10px 14px; box-sizing: border-box; }
.aadepma-pie__lema { margin: 16px 0 0; font-size: .9375rem; line-height: 1.6; max-width: 34ch; }
.aadepma-pie__marca .aadepma-redes { margin-top: 18px; }
.aadepma-pie__marca .aadepma-redes a { background: transparent; border-color: rgba(255,255,255,.3); color: #fff !important; }
.aadepma-pie__marca .aadepma-redes a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.aadepma-pie__bloque h2 {
  margin: 0 0 14px !important;
  font-family: var(--aad-dato);
  font-size: .75rem !important;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aad-amarillo);
}
.aadepma-pie__lista, .aadepma-pie__horario { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.aadepma-pie__lista li { margin: 0 0 9px !important; }
.aadepma-pie a { color: #C9DCEF; text-decoration: none; }
.aadepma-pie a:hover { color: #fff; text-decoration: underline; }
.aadepma-pie__lista a { font-size: .9375rem; }
.aadepma-pie__tel { margin: 0 0 10px; }
.aadepma-pie__tel a { font-family: var(--aad-titulo); font-weight: 600; font-size: 1.3125rem; color: #fff; }
.aadepma-pie__bloque p { margin: 0 0 12px; font-size: .9375rem; line-height: 1.6; }
.aadepma-pie__bloque .aadepma-boton { margin-top: 4px; }
.aadepma-pie__horario li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px !important;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
.aadepma-pie__horario li span + span { color: #fff; }
.aadepma-pie__legal {
  max-width: 1170px;
  margin: 20px auto 0;
  font-size: .8125rem;
  color: #7FA6CC;
}

@media (max-width: 900px) {
  .aadepma-pie__interior { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .aadepma-pie { padding: 40px 16px 24px; }
  .aadepma-pie__interior { grid-template-columns: 1fr; gap: 28px; }
  .aadepma-pie__bloque .aadepma-boton { width: 100%; }
}

/* ------------------------------------------------------------------
 * Hero de la portada. Sustituye al de la plantilla del tema.
 * Sin foto sigue siendo correcto: se pinta solo con el azul de la marca.
 * ------------------------------------------------------------------ */

.aadepma-hero {
  background-color: var(--aad-azul-hondo);
  background-size: cover;
  background-position: center;
  color: #fff;
  font-family: var(--aad-texto);
  padding: 92px 16px 88px;
}
/* El hero vive dentro de un widget de Elementor, que lo encajona en una
   columna y le deja por encima la foto de archivo de la seccion. Estas reglas
   sacan el hero a todo el ancho y apagan el fondo de esa seccion concreta,
   solo la que lo contiene. Si el navegador no entiende :has(), no se aplica
   nada: el hero se queda encajonado, que es feo pero no esta roto. */
@supports selector(:has(*)) {
  .elementor-section:has(> .elementor-container .aadepma-hero) {
    padding: 0 !important;
    min-height: 0 !important;
    background-image: none !important;
    overflow-x: clip;
  }
  .elementor-section:has(> .elementor-container .aadepma-hero) .elementor-background-overlay {
    display: none;
  }
  .aadepma-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
  }
}

/* Con foto: el degradado va delante, mas opaco a la izquierda, que es donde
   cae el texto. Sin foto la regla no aplica y queda el azul liso. */
.aadepma-hero--foto {
  background-image:
    linear-gradient(90deg, rgba(1, 58, 115, .94) 0%, rgba(1, 58, 115, .82) 46%, rgba(1, 58, 115, .30) 100%),
    var(--aad-hero);
}
.aadepma-hero__interior { max-width: 1170px; margin: 0 auto; }
.aadepma-hero__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px !important;
  padding: 7px 14px;
  border: 1px solid rgba(253, 202, 35, .6);
  border-radius: var(--aad-radio);
  font-family: var(--aad-dato);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aad-amarillo);
}
.aadepma-hero__rotulo span { width: 7px; height: 7px; border-radius: 50%; background: var(--aad-amarillo); }
.aadepma-hero__titulo {
  margin: 0 0 20px !important;
  max-width: 16ch;
  font-family: var(--aad-titulo) !important;
  font-weight: 700;
  font-size: clamp(2.125rem, 1.2rem + 3.4vw, 3.875rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.02em;
  color: #fff !important;
  text-wrap: balance;
}
.aadepma-hero__entrada {
  margin: 0 0 18px !important;
  max-width: 58ch;
  font-size: clamp(1rem, .93rem + .3vw, 1.25rem);
  line-height: 1.6;
  color: #E4EDF7;
}
.aadepma-hero__negocio {
  margin: 0 0 30px !important;
  max-width: 54ch;
  padding-left: 16px;
  border-left: 3px solid var(--aad-amarillo);
  font-size: clamp(.9375rem, .88rem + .25vw, 1.125rem);
  line-height: 1.55;
  color: #fff;
}
.aadepma-hero__acciones { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.aadepma-hero__secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .75em 1.6em;
  border: 2px solid rgba(255, 255, 255, .75);
  border-radius: var(--aad-radio);
  font-family: var(--aad-titulo);
  font-weight: 600;
  font-size: 1.0625rem;
  color: #fff !important;
  text-decoration: none !important;
}
.aadepma-hero__secundario:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.aadepma-hero__secundario:focus-visible { outline: 3px solid var(--aad-amarillo); outline-offset: 2px; }

@media (max-width: 767px) {
  .aadepma-hero { padding: 56px 16px 52px; }
  .aadepma-hero__titulo { max-width: none; }
  .aadepma-hero__acciones { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .aadepma-hero .aadepma-boton, .aadepma-hero__secundario { width: 100%; white-space: normal; }
  /* En movil el texto llega hasta el borde derecho: el degradado se vuelve
     vertical y mas cerrado para que se lea sobre el cielo de la foto. */
  .aadepma-hero--foto {
    background-image:
      linear-gradient(180deg, rgba(1, 58, 115, .88) 0%, rgba(1, 58, 115, .93) 55%, rgba(1, 58, 115, .96) 100%),
      var(--aad-hero);
  }
}

/* ------------------------------------------------------------------
 * El H1 de la portada se salia 30 px del ancho de la ventana: el tema
 * lo pinta con un tamano fijo que no cabe. Se acota aqui, y de paso
 * ninguna pieza de Elementor vuelve a empujar la pagina de lado.
 * ------------------------------------------------------------------ */

.home .elementor-heading-title {
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.home .elementor-widget-container { min-width: 0; max-width: 100%; }

/* ------------------------------------------------------------------
 * Trabajos realizados
 * Cada caso es un expediente, no un anuncio: los datos comprobables van
 * arriba y con tipografía de dato; las fotos son las del propio trabajo.
 * ------------------------------------------------------------------ */
.aadepma-casos { display: grid; gap: 56px; margin: 8px 0 0; }

.aadepma-caso {
  border-top: 3px solid var(--aad-azul);
  padding-top: 24px;
}
.aadepma-caso__titulo {
  font-family: var(--aad-titulo);
  font-weight: 700;
  color: var(--aad-azul-hondo);
  margin: 0 0 10px;
  text-wrap: balance;
}
.aadepma-caso__sumario {
  margin: 0 0 20px;
  max-width: 62ch;
  color: var(--aad-acero-700);
}

/* La tira de datos: lo comprobable, separado de la prosa. */
.aadepma-caso__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin: 0 0 24px;
  border: 1px solid var(--aad-acero-100);
  border-radius: var(--aad-radio);
  background: var(--aad-frio);
  overflow: hidden;
}
.aadepma-caso__dato {
  flex: 1 1 200px;
  padding: 12px 16px;
  border-right: 1px solid var(--aad-acero-100);
}
.aadepma-caso__dato:last-child { border-right: 0; }
.aadepma-caso__dato dt {
  font-family: var(--aad-dato);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--aad-acero-500);
  margin: 0 0 4px;
}
.aadepma-caso__dato dd {
  margin: 0;
  font-weight: 700;
  color: var(--aad-acero-900);
  line-height: 1.35;
}

.aadepma-caso__fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 0 0 26px;
  align-items: start;
}
.aadepma-caso__foto { margin: 0; }
.aadepma-caso__foto img {
  display: block;
  width: 100%;
  /* height: auto es imprescindible: el atributo height del HTML gana sobre
     aspect-ratio si no se neutraliza aqui. */
  height: auto;
  /* Todas a la misma proporcion: si no, una foto vertical y otra horizontal
     dejan un hueco feo y los pies de foto no quedan a la misma altura. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--aad-radio);
  background: var(--aad-frio);
}
.aadepma-caso__foto figcaption {
  margin-top: 8px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--aad-acero-700);
}

.aadepma-caso__rotulo {
  font-family: var(--aad-titulo);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--aad-azul-hondo);
  margin: 0 0 8px;
}
.aadepma-caso__lista { margin: 0 0 22px; padding-left: 20px; max-width: 62ch; }
.aadepma-caso__lista li { margin-bottom: 6px; }
.aadepma-caso__resultado { margin: 0 0 22px; max-width: 62ch; }
.aadepma-caso__accion { margin-top: 4px; }

@media (max-width: 767px) {
  .aadepma-casos { gap: 44px; }
  .aadepma-caso__datos { display: block; }
  .aadepma-caso__dato { border-right: 0; border-bottom: 1px solid var(--aad-acero-100); }
  .aadepma-caso__dato:last-child { border-bottom: 0; }
  .aadepma-caso__fotos { grid-template-columns: 1fr; }
  .aadepma-caso__accion .aadepma-boton { width: 100%; }
}

/* ------------------------------------------------------------------
 * La barra superior del tema
 * Venía en el verde de la plantilla de demostración (#00C49A), que no es
 * de AADEPMA. Se pinta con el azul del logo. Nada más: el resto de colores
 * de UiCore se quedan como están, y aquí no entra naranja, que se reserva
 * para las llamadas a la acción.
 * ------------------------------------------------------------------ */
.uicore-top-bar { background-color: var(--aad-azul) !important; }
.uicore-top-bar,
.uicore-top-bar p,
.uicore-top-bar a,
.uicore-top-bar i { color: #fff !important; }
.uicore-top-bar a:hover,
.uicore-top-bar a:focus-visible { color: var(--aad-amarillo) !important; }
.uicore-top-bar a:focus-visible { outline: 2px solid var(--aad-amarillo); outline-offset: 2px; }

/* El enlace de la franja de guías de la portada es nuestro, y heredaba
   tambien el verde del tema. */
.aadepma-portada__guias a { color: var(--aad-azul); font-weight: 700; }
.aadepma-portada__guias a:hover { color: var(--aad-azul-hondo); }

/* ------------------------------------------------------------------
 * Los dos verdes que quedaban del tema de demostracion
 * ------------------------------------------------------------------ */

/* El telefono del bloque de contacto. Es un enlace de WhatsApp con su
   codigo de origen: aqui solo se cambia el color, nunca el destino. No es
   el CTA principal de la pantalla, asi que va en azul, no en naranja. */
.elementor-icon-list-item a,
.elementor-icon-list-item a .elementor-icon-list-text { color: var(--aad-azul) !important; }
.elementor-icon-list-item a:hover,
.elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--aad-azul-hondo) !important; }

/* El chat de Aira. El widget ya se pinta en azul por su cuenta (#0f4c81),
   pero el tema pinta de verde todos los button y le gana al boton de
   enviar. Se sube la especificidad y, de paso, se lleva el widget entero
   al azul exacto de la marca: dejar dos azules casi iguales en el mismo
   panel se ve peor que no tocarlo. Enviar es una accion de la conversacion,
   no la llamada a la accion de la pagina, asi que tampoco lleva naranja. */
.aira-panel .aira-pie button { background: var(--aad-azul) !important; color: #fff !important; }
.aira-panel .aira-pie button:disabled { background: var(--aad-acero-500) !important; }
.aira-panel .aira-cab { background: var(--aad-azul) !important; }
.aira-panel .aira-m.de-cliente { background: var(--aad-azul) !important; }
.aira-burbuja, .aira-lanzador { background: var(--aad-azul) !important; }

/* ------------------------------------------------------------------
 * La galería de «Instalaciones» de la portada
 * Misma rejilla y mismo 4:3 que las fichas de Proyectos, para que las dos
 * partes de la web se vean de la misma casa.
 * ------------------------------------------------------------------ */
.aadepma-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
  align-items: start;
}
.aadepma-galeria__foto { margin: 0; }
.aadepma-galeria__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--aad-radio);
  background: var(--aad-frio);
}
.aadepma-galeria__foto figcaption {
  margin-top: 8px;
  font-family: var(--aad-texto);
  font-size: .86rem;
  line-height: 1.45;
  color: var(--aad-acero-700);
}

@media (max-width: 767px) {
  /* Una por fila: dos columnas a 375 px dejan la foto y el pie ilegibles. */
  .aadepma-galeria { grid-template-columns: 1fr; gap: 18px; }
}
