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

/* --- Los iconos, que ya no vienen de la fuente de Divi. Generado. --- */
.et_pb_button:after, .et_pb_contact_submit:after, .et_pb_more_button:after, .et_pb_promo_button:after {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5.5-6.5L19 12l-6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5.5-6.5L19 12l-6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.et-pb-arrow-next:before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 34px;
  height: 34px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5.5-6.5L19 12l-6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5.5-6.5L19 12l-6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.et-pb-arrow-prev:before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 34px;
  height: 34px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H6m5.5-6.5L5 12l6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H6m5.5-6.5L5 12l6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.et_pb_scroll_top:before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V6m-6.5 5.5L12 5l6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V6m-6.5 5.5L12 5l6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.et-social-facebook a.icon:before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5V7c0-.7.3-1 1-1h1.5V3H14c-2.2 0-3.5 1.4-3.5 3.7V8.5H8V12h2.5v9H14v-9h2.4l.4-3.5z' fill='currentColor'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5V7c0-.7.3-1 1-1h1.5V3H14c-2.2 0-3.5 1.4-3.5 3.7V8.5H8V12h2.5v9H14v-9h2.4l.4-3.5z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.et-social-instagram a.icon:before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 1 0 0 13.4 6.7 6.7 0 0 0 0-13.4zm0 11a4.3 4.3 0 1 1 0-8.6 4.3 4.3 0 0 1 0 8.6zm6.9-11.3a1.6 1.6 0 1 1-3.1 0 1.6 1.6 0 0 1 3.1 0z' fill='currentColor'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 1 0 0 13.4 6.7 6.7 0 0 0 0-13.4zm0 11a4.3 4.3 0 1 1 0-8.6 4.3 4.3 0 0 1 0 8.6zm6.9-11.3a1.6 1.6 0 1 1-3.1 0 1.6 1.6 0 0 1 3.1 0z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
#et-info-phone:before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1z' fill='currentColor'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
#et-info-email:before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3z' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='m3 6 9 6 9-6' fill='none' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3z' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='m3 6 9 6 9-6' fill='none' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.et_overlay:before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='m16 16 4.5 4.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='m16 16 4.5 4.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.ico {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.ico-check-circulo {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='currentColor' d='M12 1.5A10.5 10.5 0 1 0 12 22.5 10.5 10.5 0 1 0 12 1.5zm5.1 7.3-6.4 7.2a1 1 0 0 1-1.5 0L6 12.6a1 1 0 1 1 1.5-1.3l2.5 2.8 5.6-6.3a1 1 0 1 1 1.5 1.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='currentColor' d='M12 1.5A10.5 10.5 0 1 0 12 22.5 10.5 10.5 0 1 0 12 1.5zm5.1 7.3-6.4 7.2a1 1 0 0 1-1.5 0L6 12.6a1 1 0 1 1 1.5-1.3l2.5 2.8 5.6-6.3a1 1 0 1 1 1.5 1.3z'/%3E%3C/svg%3E");
}
.ico-casa {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2.5 11.2h2.6V21h5.1v-5.6h3.6V21h5.1v-9.8h2.6z' fill='currentColor'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2.5 11.2h2.6V21h5.1v-5.6h3.6V21h5.1v-9.8h2.6z' fill='currentColor'/%3E%3C/svg%3E");
}
.ico-sobre {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3z' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='m3 6 9 6 9-6' fill='none' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3z' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='m3 6 9 6 9-6' fill='none' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
}
.ico-chincheta {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 2a7 7 0 0 0-7 7c0 4.9 7 13 7 13s7-8.1 7-13a7 7 0 0 0-7-7zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 2a7 7 0 0 0-7 7c0 4.9 7 13 7 13s7-8.1 7-13a7 7 0 0 0-7-7zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E");
}
.et_pb_slider .et-pb-arrow-prev::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H6m5.5-6.5L5 12l6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H6m5.5-6.5L5 12l6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.et_pb_slider .et-pb-arrow-next::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5.5-6.5L19 12l-6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5.5-6.5L19 12l-6.5 6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Lo que hacía el JavaScript de Divi y ya no está ---------------------
   Divi arranca con media página en `opacity: 0` y la va revelando con un
   observador al hacer scroll. Sin su JS, esa mitad no aparece nunca: la web se
   ve vacía y ni el HTML ni una captura lo delatan. Se muestra todo desde el
   primer pintado; la animación de entrada la hace ahora el CSS, sin depender de
   que nada la dispare. */
.et_pb_section, .et_pb_row, .et_pb_module,
.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 botón de volver arriba lo enseñaba y escondía el JS de Divi. */
.et_pb_scroll_top { display: none; }
.et_pb_scroll_top.et-visible { display: block; }

/* --- El buscador que se ha ido -------------------------------------------
   Se conserva el hueco porque el `nav` va flotado contra él: sin el hueco, el
   menú entero se corre 40 px a la derecha y la cabecera deja de cuadrar. */
#et_top_search { pointer-events: none; }

/* --- Menú de móvil --------------------------------------------------------
   El original lo abría jQuery añadiendo la clase `opened` y pintando el `ul`
   con un `display` en línea. Aquí lo hace `web.js` con la misma clase, así que
   el CSS de Divi sigue valiendo tal cual; sólo hay que decirle que el menú
   abierto se ve, porque esa parte la ponía el JS y no la hoja. */
.et_mobile_menu { display: none; }
.mobile_nav.opened .et_mobile_menu { display: block; }

/* --- Botón flotante de WhatsApp ------------------------------------------
   Mismo sitio, mismo tamaño y mismo verde que el que ponía el plugin. */
.wa-flotante {
  position: fixed; right: 15px; bottom: 15px; z-index: 99999;
  display: flex; align-items: center; gap: 10px;
  color: #25D366; text-decoration: none;
}
.wa-flotante svg { width: 50px; height: 50px; display: block; }
.wa-flotante span {
  order: -1; display: none;           /* el plugin lo traía oculto */
  padding: 8px 12px; border-radius: 10px; margin: 0 10px;
  background-color: #25D366; color: #fff;
  font-size: 15px; line-height: 1.2;
}
@media print { .wa-flotante { display: none; } }

/* --- Formulario -----------------------------------------------------------
   Los avisos de error y de envío correcto los pintaba Divi por AJAX. */
.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; }

/* El texto de información básica del RGPD, debajo de la casilla. El original
   no lo llevaba: sólo el enlace a la política. */
/* El formulario va sobre la foto de un banco de carpintería, que es CLARA. El
   gris #666 que Divi da por defecto a los campos se pierde encima: medido en la
   captura, este texto y la etiqueta «Aviso Legal» eran ilegibles. El resto del
   formulario ya iba en blanco -«He leído y acepto…» se lee bien-, así que lo
   que faltaba era eso.
   La sombra no es decoración: sobre una foto el fondo cambia de un punto a
   otro, y es lo que sostiene el texto blanco cuando pasa por encima de una
   viruta clara. */
.rgpd-basica {
  display: block;
  font-size: 12px; line-height: 1.5; margin: 10px 0 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .6);
}
.rgpd-basica a { text-decoration: underline; color: #fff; }
.rgpd-basica > strong { display: block; margin-bottom: 4px; }
/* Rejilla de dos columnas, el estándar del resto de las webs: el nombre del
   apartado a la izquierda y su contenido a la derecha. Se lee de un vistazo, y
   quien sólo busca «Derechos» lo encuentra sin leer el resto. */
.rgpd-campos {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 2px 12px;
}
.rgpd-que { font-weight: 600; }
/* Por debajo de 560 px la columna del nombre deja de caber sin partir palabras
   como «Conservación», así que se apilan. */
@media (max-width: 560px) {
  .rgpd-campos { grid-template-columns: 1fr; gap: 0; }
  .rgpd-que { margin-top: 6px; }
}
/* La etiqueta del campo de la casilla, con el mismo problema y del original. */
.et_pb_contact_form .et_pb_contact_field > label,
.et_pb_contact_form .et_pb_contact_field_options_title {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

/* --- Galería --------------------------------------------------------------
   La rejilla la sigue maquetando el CSS de Divi: el panel genera exactamente
   el mismo marcado que generaba el módulo de galería, con sus clases y su
   `first_in_row` / `last_in_row`. Aquí sólo va lo que Divi no tenía. */
.galeria-vacia { padding: 40px 0; color: #666; }
/* La paginación la genera ahora el panel, así que sus colores son de esta web:
   el gris por defecto de Divi (#999 sobre blanco) se queda en 2,85 de
   contraste. */
/* Con `!important`: el gris por defecto de Divi (#999 sobre blanco, 2,85 de
   contraste) gana por especificidad al selector corto. */
.et_pb_gallery_pagination ul li a { cursor: pointer; color: #595959 !important; }
.et_pb_gallery_pagination ul li a.active,
.et_pb_gallery_pagination ul li a:hover { color: #BA6C00 !important; font-weight: 700; }
/* Las fotos del panel salen todas al mismo alto: sin esto, una vertical y una
   apaisada seguidas descuadran la fila. Es el recorte que hacía WordPress al
   generar su miniatura de 400x284. */
.et_pb_gallery_image img { aspect-ratio: 400 / 284; object-fit: cover; }

/* Visor de la galería. Sustituye al Magnific Popup de Divi, que venía con
   jQuery detrás. */
.visor[hidden] { display: none; }
.visor {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(11,11,11,.92);
  display: flex; align-items: center; justify-content: center;
}
.visor img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.visor button {
  position: absolute; background: none; border: 0; cursor: pointer;
  color: #fff; padding: 12px; line-height: 0;
}
.visor .cerrar { top: 10px; right: 14px; }
.visor .antes  { left: 6px;  top: 50%; transform: translateY(-50%); }
.visor .luego  { right: 6px; top: 50%; transform: translateY(-50%); }
.visor svg { width: 34px; height: 34px; }
.visor .cuenta {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 14px;
}

/* --- Accesibilidad --------------------------------------------------------
   Foco visible: Divi lo quitaba en varios sitios y sin él no se puede navegar
   con el teclado. */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid #BA6C00; outline-offset: 2px;
}
/* Se esconde recortándolo, no sacándolo a `left: -9999px`: eso último es un
   elemento de 132 px de ancho fuera del lienzo, y cualquier barrido de
   desbordamiento horizontal lo cuenta como un fallo en todas las páginas. */
.salta-al-contenido {
  position: absolute; top: 0; left: 0; z-index: 100001;
  background: #BA6C00; color: #fff; padding: 12px 18px;
  clip-path: inset(50%); white-space: nowrap;
}
.salta-al-contenido:focus { clip-path: none; }

/* --- Páginas legales -------------------------------------------------------
   Los textos nuevos llevan encabezados, y el original no tenía ninguno: era un
   muro de párrafos. Se les da el mismo tipo y el mismo color que a los títulos
   de sección del resto de la web.

   Todo va bajo `.pagina-legal`, y no es cosmética: sin acotarlo, la regla del
   `h2` pisaba TODOS los `h2` de la web y les cambiaba la tipografía y el margen
   superior. Se veía como un desvío de 34 px que empezaba a media portada. */
.pagina-legal .et_pb_text_inner h2 {
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 22px; line-height: 1.3;
  color: #BA6C00; margin: 34px 0 12px;
}
.pagina-legal .et_pb_text_inner h2:first-child { margin-top: 0; }
.pagina-legal .et_pb_text_inner ul { padding-left: 1.2em; list-style: disc; margin-bottom: 1em; }
.pagina-legal .et_pb_text_inner li { padding-bottom: .4em; }
.pagina-legal .et_pb_text_inner code {
  /* El color hay que ponerlo: sobre el fondo oscuro de la sección el texto
     hereda blanco, y sobre este gris claro quedaba en 1,12 de contraste, o sea
     invisible. */
  background: #f2f2f2; color: #333;
  padding: 1px 5px; border-radius: 3px; font-size: .92em;
}
.fecha-legal { margin-top: 34px; font-size: 13px; color: #888; }

/* --- La cabecera que Divi montaba con JavaScript ---------------------------
   Divi calcula parte de la cabecera al cargar y la escribe como atributo
   `style` en el propio elemento. Eso viaja en el HTML rescatado y no hay que
   replicarlo: el `padding-left: 192px` del menú y el `padding-top` de la
   primera sección ya vienen puestos, con el valor que el JS calculó.

   Lo único que NO viaja es el tamaño del logotipo, que Divi ajusta al
   `data-height-percentage` sin escribirlo en ningún sitio. Sin esto sale a
   96x43 en vez de 163x73 y la cabecera entera encoge 14 px. Medido ancho a
   ancho con bin/medir_cabecera.py. */
#logo { height: 73px; width: auto; max-height: none; }

@media (max-width: 980px) {
  #logo { height: 43px; }
}

/* --- Carruseles -----------------------------------------------------------
   Divi los movía con jQuery y con estilos escritos al vuelo. Aquí el que se ve
   es el que lleva la clase `activo`, y `web.js` la va pasando con el mismo
   ritmo de cuatro segundos que tenía el original. Sin JavaScript se ve el
   primero, que es lo razonable: antes se veían todos apilados. */
/* OJO con la especificidad: Divi trae
   `.et_pb_slider .et_pb_slide:first-child { display: list-item }` para que sin
   su JavaScript se vea al menos el primer paso. Eso son dos clases y una
   pseudo-clase, más que las dos clases de un `.et_pb_slides .et_pb_slide`, así
   que el PRIMER paso no se ocultaba nunca: al pasar al segundo se quedaban los
   dos encima y los textos se montaban. No se ve al cargar, porque ahí el activo
   es justo el primero; sale a los cuatro segundos. */
.et_pb_slider .et_pb_slides .et_pb_slide { display: none !important; opacity: 1; }
.et_pb_slider .et_pb_slides .et_pb_slide.activo { display: list-item !important; }
.et_pb_slides .et_pb_slide.activo {
  display: list-item;
  /* Divi apila los pasos con `float: left; margin-right: -100%`, que es lo que
     le permite tenerlos superpuestos mientras los mueve. Con uno solo visible y
     sin su JavaScript, ese margen negativo corría el contenido del paso hacia
     la izquierda y el título salía cortado por el borde. */
  float: none !important;
  margin-right: 0 !important;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  /* Quien pide menos movimiento no quiere un carrusel que se mueve solo. */
  .et_pb_slides .et_pb_slide { transition: none !important; }
}

/* El mapa, que ya no es un iframe de Google sino una imagen de este dominio. */
.mapa-taller { display: block; line-height: 0; }
.mapa-taller img { width: 100%; height: 450px; object-fit: cover; display: block; }
@media (max-width: 767px) { .mapa-taller img { height: 300px; } }

/* --- Pantallas muy estrechas ----------------------------------------------
   Por debajo de 300 px (un Galaxy Fold cerrado mide 280) los bloques de
   Dirección, Horario y Email desbordan: Divi sangra el texto 60 px para dejar
   sitio al icono y ahí ya no cabe «El Espinar - Segovia». El original hace lo
   mismo. Aquí el icono pasa a ir encima del texto y el desbordamiento
   desaparece: es el único ancho donde la copia se aparta de la maqueta, y se
   aparta para no dejar la página con barra horizontal. */
@media (max-width: 300px) {
  .et_pb_blurb_position_left .et_pb_blurb_content { display: block; }
  .et_pb_blurb_position_left .et_pb_main_blurb_image,
  .et_pb_blurb_position_left .et_pb_blurb_container {
    display: block; width: auto; padding-left: 0; text-align: left;
  }
  .et_pb_blurb_position_left .et_pb_main_blurb_image { margin-bottom: 8px; }
}

/* --- Zonas pulsables ------------------------------------------------------
   Los enlaces en línea del pie y de la barra superior tienen 17 a 22 px de
   alto, y en una pantalla táctil eso es fallar el dedo. El mínimo razonable son
   24 px. Se consigue con relleno vertical: en un elemento en línea el relleno
   agranda el área que responde al dedo SIN mover un píxel de la maqueta, porque
   no entra en el cálculo de la línea. Es el arreglo que en otra web del parque
   pasó de 1.510 avisos a cero. */
/* En la barra superior el enlace envuelve un `<span>`, y lo que se mide -y lo
   que se pulsa- es el span. Los dos, y el enlace como `inline-block` para que
   el relleno cuente en su caja. */
#et-info a { display: inline-block; }
#et-info a,
#et-info span,
.pagina-legal .et_pb_text_inner p > a,
.pagina-legal .et_pb_text_inner li > a,
#footer-info a,
.bottom-nav a,
.et-social-icons a,
.rgpd-basica a {
  padding-top: 6px;
  padding-bottom: 6px;
}
.et-social-icons a.icon { padding-left: 4px; padding-right: 4px; }

/* El resto de lo que se pulsa y no llegaba a 24 px: la paginación de la
   galería, las flechas de los carruseles y el enlace a la política que va
   dentro de la casilla del formulario. */
.et_pb_gallery_pagination ul li a,
.et_pb_contact_field_checkbox label a,
.et_pb_slider .et-pb-arrow-prev-QUITADO,
.et_pb_slider .et-pb-arrow-next-QUITADO,
.et_pb_gallery_image a {
  padding-top: 6px;
  padding-bottom: 6px;
}
/* La rejilla de la galería es de enlaces con la foto dentro: el relleno movería
   la maqueta, así que se quita. Pero el enlace es `inline` y la foto `block`,
   de modo que la caja del enlace colapsaba a 19 px de alto -el de una línea de
   texto- y era eso lo que respondía al dedo, no la foto entera. */
.et_pb_gallery_image a { padding: 0; display: block; }

/* El enlace del logotipo y los puntos de los carruseles: los dos se pulsan y
   los dos se quedaban por debajo de 24 px. El logotipo puede crecer hacia
   dentro porque su contenedor es más alto que él; los puntos, no, así que se
   les agranda la zona con un pseudo-elemento que no ocupa sitio en la maqueta. */
.logo_container a { display: inline-block; padding: 4px 0; }
/* Relleno y margen negativo del mismo tamaño: la caja del enlace pasa de 8x19
   a 20x37 y la maqueta no se mueve un píxel, porque el margen devuelve lo que
   el relleno ocupa. Con un pseudo-elemento la zona también crecía, pero
   `getBoundingClientRect` seguía viendo 8x19 y no había forma de comprobarlo. */
/* Los puntos van absolutos al fondo del carrusel, y el botón que hay justo
   debajo se les monta encima: medido con el navegador, un clic en un punto lo
   recogía «Ver nuestros trabajos». Se levantan por encima. */
/* Absolutos, como en el original: medidos ahí están en `position: absolute`, y
   puestos en `relative` ocupan sitio en el flujo y estiran el carrusel 28 px.
   El `z-index` necesita que estén posicionados -en `static` no lo mira nadie-,
   y así se cumplen las dos cosas. */
.et-pb-controllers {
  position: absolute;
  bottom: 4%;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 3;
}
.et_pb_slider { position: relative; }
.et-pb-controllers a {
  display: inline-block;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  /* El margen negativo sólo en vertical. Con `-6px -6px` cada punto se montaba
     12 px sobre su vecino y el clic en uno lo recogía el de al lado: medido con
     el navegador, pulsar el punto 1 se lo llevaba el 2. En horizontal se deja a
     cero, que separa los puntos un poco más que en el original a cambio de que
     se puedan pulsar. */
  margin: -6px 0 !important;
  background-clip: content-box;
  border: 6px solid transparent;  /* el punto sigue midiendo 12x12 a la vista */
  box-sizing: border-box;
  /* El punto es un punto, no un número. Divi esconde el «1», el «2»… con un
     `text-indent: -9999px` que viaja en el CSS de UNA de las variantes del
     módulo: en /galeria/ estaba y en /nosotros/ no, así que allí se veían los
     números escritos en naranja sobre el fondo. Se recorta en vez de sacarlo a
     -9999px, que es un elemento fuera del lienzo en todas las páginas. */
  /* El número del paso («1», «2»…) se recorta, no se pone a `font-size: 0`:
     un texto de 0 px lo cuenta como «texto diminuto» cualquier revisión de
     accesibilidad, y con razón, porque no sabe que es un punto y no una letra. */
  text-indent: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}
.et-pb-controllers a.et-pb-active-control { background-color: #333; }
/* --- El interior del carrusel --------------------------------------------
   El CSS del módulo slider no viaja con la página, y sin él el contenido de
   cada paso ocupaba TODO el ancho: el titular y el botón salían pegados al
   borde izquierdo, como cortados. Medido en el original a 1440: el paso lleva
   69,11 px de relleno a cada lado y el bloque de texto otros 81,09.
   Van en porcentaje y no en píxeles, que es como los escribe Divi: 69,11 es el
   6 % de 1152 y 81,09 el 8 % de 1014. En píxeles cuadran a 1440 y se tuercen
   en todo lo demás. */
/* Hay DOS carruseles distintos y no llevan el mismo relleno. Los distingue
   `et_pb_slider_with_overlay`, que es el que tiene foto de fondo:

     con foto (nosotros)      slide 0 69,11px · texto 100px 81,09px
     testimonios (el resto)   slide 0        · texto 0 0 80px 0

   Poniéndoles el mismo relleno a los dos, las páginas con testimonios crecían
   28 px. Los porcentajes son los de Divi: 69,11 es el 6 % de 1152 y 81,09 el
   8 % de 1014. */
.et_pb_slider .et_pb_slide_description { padding: 0 0 80px; }
.et_pb_slider .et_pb_slide.et_pb_slider_with_overlay { padding: 0 6%; }
.et_pb_slider .et_pb_slide.et_pb_slider_with_overlay .et_pb_slide_description {
  padding: 100px 8%;
}

/* --- Las flechas del carrusel --------------------------------------------
   En el WordPress eran dos cuadrados de 48x48 colocados FUERA del carrusel, a
   izquierda y derecha, con un glifo de la fuente de iconos de Divi dentro y el
   texto «Anterior»/«Siguiente» oculto. Aquí salían dentro, en línea y con ese
   texto a la vista, porque ni la fuente ni el CSS del módulo viajan con la
   página. Y, peor, no hacían nada: el JavaScript tampoco viaja. Ahora
   funcionan (bin/../public/js/web.js) y se parecen a las del original. */
.et_pb_slider .et-pb-arrow-prev,
.et_pb_slider .et-pb-arrow-next {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s;
}
.et_pb_slider .et-pb-arrow-prev { left: -22px; }
.et_pb_slider .et-pb-arrow-next { right: -22px; }
/* Como en Divi: aparecen al acercarse al carrusel. Y siempre visibles con el
   dedo, donde no hay «acercarse». */
.et_pb_slider:hover .et-pb-arrow-prev,
.et_pb_slider:hover .et-pb-arrow-next,
.et_pb_slider .et-pb-arrow-prev:focus-visible,
.et_pb_slider .et-pb-arrow-next:focus-visible { opacity: 1; }
@media (hover: none) {
  .et_pb_slider .et-pb-arrow-prev,
  .et_pb_slider .et-pb-arrow-next { opacity: .85; }
}
/* El texto queda para el lector de pantalla; lo que se ve es la flecha. */
.et_pb_slider .et-pb-arrow-prev span,
.et_pb_slider .et-pb-arrow-next span {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.et_pb_slider .et-pb-arrow-prev::before,
.et_pb_slider .et-pb-arrow-next::before {
  content: ""; width: 26px; height: 26px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}

/* --- Contraste ------------------------------------------------------------
   Dos textos del original no llegaban al mínimo legible, medidos contra el
   píxel que tienen detrás y no contra lo que dice su hoja de estilo:

     · el correo de la barra superior, blanco sobre #BA6C00: 4,01 frente a 4,5
     · el copyright del pie, #666 sobre #171717: 3,12 frente a 4,5

   Se corrigen los dos, y sólo ahí. El naranja de marca no se toca en el resto
   de la web: se oscurece un punto la franja de arriba, que a simple vista es el
   mismo color y sube a 4,76. El gris del copyright pasa a #8C8C8C, 5,33.

   (El menú sale en los medidores con 1,23 y es un falso positivo: la cabecera
   es transparente y lo que hay detrás es la foto oscura del hero, no el blanco
   que devuelve `getComputedStyle`. Comprobado en la captura.) */
#top-header { background-color: #A86200 !important; }
#footer-info { color: #8C8C8C !important; }

/* --- El módulo «Síguenos» de Divi -----------------------------------------
   Divi carga el CSS de este módulo aparte, y no viajaba con la página: sin él
   la lista salía con viñetas, los botones perdían su cuadrado y -lo peor- el
   «Seguir» que va dentro de cada enlace, y que debería estar oculto, se veía
   escrito en naranja sobre el fondo rojo, con 1,25 de contraste. Las medidas
   son las del original: cuadrados de 32 px con el icono blanco dentro. */
.et_pb_social_media_follow {
  list-style: none !important;
  margin: 0; padding: 0; text-align: center;
}
.et_pb_social_media_follow li {
  display: inline-block !important;
  list-style: none !important;
  margin: 0 5px 8px;
}
/* Con `!important` en el tamaño: el CSS de Divi que llega deja el enlace en
   0x0 -su regla de módulo, la que le da los 32 px, es la que no viaja- y sin
   esto los dos botones existen pero no ocupan nada y no se ven. */
.et_pb_social_media_follow li a.icon {
  display: inline-block !important;
  width: 32px !important; height: 32px !important;
  padding: 0 !important;
  color: #fff;
  text-align: center;
  position: relative;
}
/* El nombre de la red va dentro del enlace para quien use lector de pantalla,
   pero no se pinta: el icono ya dice cuál es. */
.et_pb_social_media_follow_network_name {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.et_pb_social_media_follow li a.icon:before {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
}

/* --- El botón «Ver más» de los bloques ------------------------------------
   Su relleno viaja en el CSS del módulo CTA, que no llega: medido en el
   original son 4,2 px arriba y abajo, 9,8 a la izquierda y 28 a la derecha, y
   sin ellos el botón mide 25 px en vez de 32. Con tres por fila, la página se
   quedaba 20 px corta.

   Los números salen de ems sobre los 14 px del botón (0,3 · 2 · 0,3 · 0,7), que
   es como los escribe Divi; el hueco grande de la derecha es para la flecha que
   asoma al pasar el ratón. */
.et_pb_promo_button {
  padding: 0.3em 2em 0.3em 0.7em !important;
  /* Y el interlineado, que en Divi se hereda ABSOLUTO: 23,8 px, no un factor.
     Con el relleno puesto pero la línea en 15,6 el botón medía 24 px en vez de
     32. Es la misma trampa que descuadró la migración de fontaneriapolofi:
     escribir `line-height: 1.7` parece equivalente y sólo cuadra a 14 px. */
  line-height: 23.8px !important;
}