/* Lo que esta web añade al CSS que ya traía Extra.
   Nada de aquí redecora: son los remiendos de quitarle WordPress. Cada bloque
   dice qué arregla y por qué hace falta. */

/* --- Lo que hacía el JavaScript del constructor y ya no está --------------
   Los módulos con animación de entrada nacen en `opacity: 0` y el JS los
   revelaba al entrar en pantalla. Sin él no aparecen nunca: la página se ve
   vacía y ni el HTML ni una captura lo delatan. Se muestran desde el primer
   pintado. */
.et_animated, .et-waypoint, .et_pb_animation_top, .et_pb_animation_left,
.et_pb_animation_right, .et_pb_animation_bottom, .et_pb_animation_fade_in {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* --- El buscador que se ha ido -------------------------------------------
   Se conserva el hueco porque el menú va alineado contra él. */
.sin-buscador { visibility: hidden; pointer-events: none; }

/* --- El mapa ---------------------------------------------------------------
   Una imagen con el mismo `width` y `height` que tenía el iframe, en línea y
   con `max-width: 100%` como él: ocupa lo mismo a cualquier ancho. */
img.mapa { max-width: 100%; object-fit: cover; vertical-align: baseline; }
/* El enlace, `inline-block`: siendo `inline` con la imagen dentro, su caja
   colapsaba al alto de una línea y al dedo sólo le respondían 19 px de los 300
   del mapa. Como `inline-block` envuelve la imagen y apoya su línea base donde
   la apoyaba el iframe, así que la maqueta no se mueve. */
.mapa-estatico { display: inline-block; max-width: 100%; }

/* --- El carrusel de logotipos ---------------------------------------------
   slick calculaba el ancho de cada paso en píxeles; aquí lo reparte el CSS de
   tres en tres y `web.js` sólo desplaza la pista. Sin JavaScript se ven los tres
   primeros, quietos. */
.carrusel .slick-list { overflow: hidden; }
.carrusel .slick-track { display: flex; width: auto; }
.carrusel .slick-slide { float: none; flex: 0 0 33.3333%; height: auto; display: block; }

/* --- Formulario ------------------------------------------------------------ */
.campo-senuelo { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-aviso { padding: 14px 16px; margin-bottom: 18px; font-size: 15px; line-height: 1.5; }
.form-aviso[hidden] { display: none; }
.form-aviso.bien { background: #1f7a3d; color: #fff; }
.form-aviso.mal  { background: #b3261e; color: #fff; }
.et_pb_contact p.campo-mal input,
.et_pb_contact p.campo-mal textarea { outline: 2px solid #b3261e; }

/* --- Información básica de protección de datos (/contacto/) -------------- */
.rgpd-basica { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0 0; }
.rgpd-basica dt { font-weight: 700; }
.rgpd-basica dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
@media (max-width: 560px) {
  .rgpd-basica { grid-template-columns: 1fr; gap: 0; }
  .rgpd-basica dt { margin-top: 8px; }
  .rgpd-basica dt:first-child { margin-top: 0; }
}

/* --- Contraste (decisión del 15/09/2026) ----------------------------------
   Lo único de esta copia que cambia un color del original, y a propósito: los
   tres grises del tema no llegaban al 4,5:1 que pide la WCAG para texto normal.
   Los valores están calculados, no a ojo:
     menú, blanco al 60 % sobre #3E5062       4,19:1  →  al 80 %  6,02:1
     cuerpo, negro al 50 % sobre blanco       3,98:1  →  al 65 %  7,00:1
     presentación de la portada, #2F3854 50 %  2,74:1  →  al 80 %  6,25:1
   Lo de la portada va acotado con `.home`: Divi numera sus módulos por página, y
   el `.et_pb_text_6` de otra página puede ser otra cosa. */
#et-navigation li a, #et-menu li > ul li a { color: rgba(255, 255, 255, .8); }
body { color: rgba(0, 0, 0, .65); }
.home .et_pb_text_6.et_pb_text,
.home .et_pb_cta_0.et_pb_promo .et_pb_promo_description div,
.home .et_pb_cta_1.et_pb_promo .et_pb_promo_description div,
.home .et_pb_cta_2.et_pb_promo .et_pb_promo_description div { color: rgba(47, 56, 84, .8) !important; }

/* --- Textos legales -------------------------------------------------------- */
.legal-fecha { font-style: italic; opacity: .8; }

/* --- Visor de fotos ---------------------------------------------------------
   Sustituye al Magnific Popup que traían Divi y el plugin del carrusel. Mismo
   comportamiento que el original: la foto se abre encima de la página, no en
   otra pestaña. Sin JavaScript el enlace sigue llevando a la imagen. */
.visor-foto[hidden] { display: none; }
.visor-foto {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(11, 11, 11, .9);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px;
}
.visor-foto img {
  max-width: 92vw; max-height: 86vh;
  width: auto; height: auto; object-fit: contain;
  background: #fff;
}
/* La equis va con DOS clases a propósito: Extra pinta todo `button` con una
   regla cuyo selector acaba en `button:not(.et_pb_menu__icon)`, que gana a una
   sola clase y la dejaba en negro al 60 % sobre el fondo oscuro del visor. Se
   veía el hueco pero no la equis. El disco la sostiene también sobre una foto
   clara. */
.visor-foto .visor-cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 48px; height: 48px; padding: 11px;
  background: rgba(0, 0, 0, .55); border: 0; border-radius: 50%;
  cursor: pointer; color: #fff; transition: background .2s ease;
}
.visor-foto .visor-cerrar svg { width: 100%; height: 100%; display: block; }
.visor-foto .visor-cerrar:hover,
.visor-foto .visor-cerrar:focus-visible { background: rgba(0, 0, 0, .8); color: #e8c31a; }
/* Los enlaces de ampliación que el original dejó con el `href` vacío y sin foto
   dentro: no llevan a ninguna parte y recargaban la página al pulsarlos. */
a.et_pb_lightbox_image[href=""] { pointer-events: none; }