/* Lo único que no viene del WordPress. Son tres cosas: la fila de contacto que
   ocupa el hueco del formulario, el plano que sustituye al mapa incrustado de
   Google y el formato de los tres textos legales, que en el original no
   existían. Todo lo demás de la web es el CSS que Divi servía. */

/* --- Vías de contacto, donde estaba el formulario ---------------------- */
.bf-acciones-modulo {
  margin-bottom: 30px;
}
.bf-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}
.bf-acciones .et_pb_button {
  display: inline-block;
  padding: 14px 24px !important;
  border: 0 !important;
  border-radius: 0;
  background: #0b5a47;
  color: #f7f3ee !important;
  font-family: "Jost", Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.2;
  text-transform: uppercase;
  transition: background-color 300ms ease, letter-spacing 300ms ease;
}
.bf-acciones .et_pb_button:hover {
  background: #7cc68d;
  color: #0b5a47 !important;
  letter-spacing: 3px;
}
/* El tema pinta una flecha con :after en todos sus botones al pasar el ratón.
   Aquí sobra: son tres acciones distintas, no tres veces la misma. */
.bf-acciones .et_pb_button:after {
  display: none !important;
}

/* --- El plano ---------------------------------------------------------- */
.bf-mapa {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
}
.bf-mapa img {
  display: block;
  width: 100%;
  height: 450px;
  object-fit: cover;
  /* El original ponía el marco de Google a 2900 px de ancho y 450 de alto, así
     que en cualquier pantalla se veía recortado por los lados. Igual aquí. */
}
.bf-mapa-pie {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 9px 18px;
  background: rgba(255, 255, 255, .95);
  color: #0b5a47;
  font-family: "Jost", Helvetica, Arial, Lucida, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.bf-mapa:hover .bf-mapa-pie {
  background: #0b5a47;
  color: #fff;
}
@media (max-width: 767px) {
  .bf-mapa img {
    height: 300px;
  }
}

/* --- Textos legales ---------------------------------------------------- */
/* El CSS que el WordPress servía a la página de la que sale su envoltorio
   venía depurado: no traía reglas para h2, ul ni li, porque su cuerpo era un
   título y nada más. Como estos textos sí llevan titulares y listas, hay que
   darles formato aquí o saldrían sin él. */
.bf-legal {
  text-align: left;
}
.bf-legal h2 {
  margin: 36px 0 14px;
  font-family: "Jost", Helvetica, Arial, Lucida, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: #0b5a47;
}
.bf-legal h2:first-child {
  margin-top: 0;
}
.bf-legal p {
  margin: 0 0 16px;
  line-height: 1.8;
}
.bf-legal ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.bf-legal li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
  line-height: 1.8;
}
.bf-legal li:before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  width: 9px;
  height: 2px;
  background: #7cc68d;
}
.bf-legal a {
  color: #0b5a47;
  text-decoration: underline;
}
.bf-legal .bf-fecha {
  margin-top: 34px;
  font-size: 14px;
  opacity: .75;
}

/* --- Titular de las tres páginas legales ------------------------------- */
/* El envoltorio del que salen no traía titular en el hero, sólo el logotipo.
   El resto del sitio sí lo pone, con estas mismas medidas: es el módulo de
   texto del hero de bodas y eventos, copiado. */
.bf-titulo-modulo {
  padding: 3px 136px !important;
  text-align: center;
}
h1.bf-titulo-pagina {
  margin: 0;
  padding: 0;
  font-family: "Jost", Helvetica, Arial, Lucida, sans-serif;
  font-size: 79px;
  font-weight: 500;
  line-height: 1.1em;
  color: #fff;
}
@media (max-width: 980px) {
  h1.bf-titulo-pagina { font-size: 62px; }
  .bf-titulo-modulo { padding: 3px !important; }
}
@media (max-width: 767px) {
  h1.bf-titulo-pagina { font-size: 40px; }
}

/* Divi estiliza por posición, y el módulo donde se injertan estos textos era
   el del titular de la página de finalizar la compra: sin estas reglas sus h2
   salen a 70 px y en marrón, y las listas con el punto del navegador además
   del guion. */
.bf-legal h2 {
  font-size: 22px !important;
  color: #0b5a47 !important;
  text-align: left !important;   /* el módulo los centraba, y el texto no */
}
.bf-legal ul { list-style: none !important; }
.bf-legal li { list-style: none !important; }
/* La fila del envoltorio ocupa casi los 1440 px, y a esa anchura una línea de
   texto pasa de 160 caracteres. Se limita a una medida legible. */
.bf-legal { max-width: 820px; margin: 0 auto; }

/* --- Página de error --------------------------------------------------- */
/* La cabecera del tema es transparente y en el 404 no hay ninguna sección
   detrás: el menú quedaba en blanco sobre fondo claro, ilegible. Y la columna
   lateral ha perdido su único contenido, que era el buscador. */
.bf-404 #main-header { background-color: #0b5a47 !important; }
.bf-404 #main-content { background: #fff; }
.bf-404 #left-area { width: 100%; padding-right: 0; float: none; border: 0; }
.bf-404 #sidebar { display: none; }
/* El tema dibuja la separación de la columna lateral con un borde en el
   contenedor, no en la propia columna: sin quitarlo queda una línea vertical
   suelta a la derecha del texto. */
.bf-404 #content-area,
.bf-404 #left-area { background: none; }
.bf-404 #main-content .container:before { display: none; }
.bf-404 #content-area { padding: 40px 0 90px; }
.bf-404 .not-found-title { margin-bottom: 14px; color: #0b5a47; }
.bf-404-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.bf-404-acciones .et_pb_button {
  padding: 14px 24px !important;
  border: 0 !important;
  background: #0b5a47;
  color: #f7f3ee !important;
  font-family: "Jost", Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.bf-404-acciones .et_pb_button:hover { background: #7cc68d; color: #0b5a47 !important; }
.bf-404-acciones .et_pb_button:after { display: none !important; }

/* --- Área táctil en pantallas de dedo ---------------------------------- */
/* Los enlaces de texto del pie, de la barra superior y del bloque de contacto
   miden entre 17 y 22 px de alto. Es lo que traía el WordPress, medido en los
   dos, y es menos del mínimo de 24x24 que pide la WCAG 2.2: en un móvil se
   fallan al tocarlos.

   El área se amplía con un pseudo-elemento centrado y en posición absoluta, que
   no ocupa sitio en la maqueta: la página no se mueve un píxel y la copia sigue
   siendo idéntica al original. Las alturas están medidas para que dos áreas no
   se pisen: en el pie, las dos filas de enlaces legales quedan a 27 px una de
   otra en un móvil de 375. */
@media (pointer: coarse) {
  .bottom-nav a,
  #et-info a,
  #et-secondary-menu a,
  .et_pb_blurb_description a,
  .et-social-icon a {
    position: relative;
  }
  .bottom-nav a::after,
  #et-info a::after,
  #et-secondary-menu a::after,
  .et_pb_blurb_description a::after,
  .et-social-icon a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 26px;
    transform: translateY(-50%);
  }
  /* Los iconos sociales miden 17 px. El selector lleva el identificador porque
     si no pierde por especificidad contra la regla general de #et-info, y los
     iconos se quedaban con el área estrecha.

     Cuánto se puede ensanchar lo decide la distancia al vecino, no las ganas:
     en la barra superior los centros están a 29 px, así que un área más ancha
     que eso monta sobre el icono de al lado y el de encima se queda con los
     dos toques. En el pie están a 44 px y cabe más. */
  .et-social-icon a::after,
  #et-info .et-social-icon a::after,
  #et-secondary-menu .et-social-icon a::after {
    left: -6px;
    right: -6px;
    height: 40px;
  }
  #footer-bottom .et-social-icon a::after,
  #footer-bottom .et_pb_social_media_follow a::after {
    left: -13px;
    right: -13px;
    height: 40px;
  }
  /* El teléfono y el correo del bloque de contacto están sueltos, con 24 px de
     aire por encima y por debajo. */
  .et_pb_blurb_description a::after {
    height: 34px;
  }
  /* Los enlaces dentro de los párrafos de los textos legales se quedan como
     están: la propia WCAG 2.2 exceptúa del tamaño mínimo los enlaces en línea
     dentro de un bloque de texto, y ampliarlos ahí pisaría el renglón de
     arriba. */
}

/* --- El titular del bloque de contacto entre 981 y 1179 px -------------- */
/* En ese tramo el diseño ya es el de escritorio pero el contenedor todavía es
   estrecho, y la columna de un tercio deja 105-126 px de texto. "nosotras"
   mide 132 px a 36 px de Jost, así que no cabe y el navegador la parte por la
   mitad: en un iPad horizontal se leía «Contac / ta con / nosotr / as».

   Viene del WordPress, que trae `overflow-wrap: break-word` en todos sus
   módulos de texto. Se baja el cuerpo a 28 px sólo en ese tramo, que es lo
   justo para que la palabra entre entera (132 x 28/36 = 103 px). A partir de
   1180 el titular vuelve a su tamaño de siempre. Son 26 px y no 28 porque a
   981 justo, que es el primer ancho del tramo, la caja se queda en 104 px.

   El selector lleva `.et_pb_with_border` para alcanzar sólo a esa tarjeta: los
   otros titulares en columnas de un tercio de la portada -Plantas, Ramos,
   Centros- son palabras cortas que caben y no hay por qué tocarlos. */
@media (min-width: 981px) and (max-width: 1179px) {
  .et_pb_with_border.et_pb_column_1_3 h2 {
    font-size: 26px !important;
    line-height: 1.2em;
  }
}

/* --- Palabras largas en pantallas muy estrechas ------------------------- */
/* Sólo hasta 365 px, que es donde de verdad hay titulares cuyas palabras no
   caben: "Decoración" mide 211 px en una caja de 172 a 320, y 211 en 204 a 360.
   A 375 ya cabe todo. El tope va ahí y no más arriba porque `hyphens: auto`
   parte cuando el algoritmo lo prefiere, no sólo cuando hace falta: a 375
   partía «flo-res» en un rótulo que entraba entero, y eso se aleja del
   original sin arreglar nada.

   El WordPress parte las que no caben por donde llega, sin guion, y se lee
   «Decora ción».

   Con hyphens: auto y el lang="es" que ya declara la página, el navegador parte
   por sílabas y pone el guion, que es como se hace en tipografía. No se toca el
   tamaño de nada, así que la maqueta es la misma.

   Se deja fuera lo que no es una palabra: una dirección de correo o un nombre
   de usuario partidos con guion se leerían mal, y ahí es mejor el corte seco
   del navegador. */
@media (max-width: 365px) {
  h1, h2, h3, h4,
  .et_pb_module_header {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  a[href^="mailto"], a[href^="tel"],
  .et_pb_blurb_description,
  .bf-legal {
    hyphens: none;
    -webkit-hyphens: none;
  }
}

/* El rótulo que lleva el nombre de usuario de Instagram no se parte por
   sílabas: un guion dentro de un @usuario invita a teclearlo mal. En pantallas
   por debajo de 360 px la palabra no cabe a 34 px -mide 284 y la caja son
   256- así que baja a 30, que es lo justo para que entre entera. */
.bf-usuario {
  hyphens: none !important;
  -webkit-hyphens: none !important;
}
@media (max-width: 359px) {
  .bf-usuario { font-size: 30px !important; }
}

/* --- Crédito de mantenimiento en el pie --------------------------------- */
/* Va algo más discreto que el nombre del cliente, que es de quien es la web.
   Nada de `white-space: nowrap`: a 320 y 375 px el texto mide 303 px y la caja
   256, así que se recortaba por la derecha sin que la caja creciera, y por eso
   no lo cazaba una comprobación de desborde. */
.bf-credito {
  opacity: .75;
}
@media (max-width: 600px) {
  .bf-credito {
    display: block;
    margin-top: 4px;
  }
  /* Sin la barra, que en línea aparte ya no separa nada. */
  .bf-barra { display: none; }
}

/* El botón flotante de WhatsApp se posa en la esquina inferior derecha y, al
   llegar al final de la página, se comía la última línea del pie. Se le deja
   sitio: 50 px de botón, 15 de separación y un poco de aire. */
@media (max-width: 980px) {
  #footer-bottom {
    padding-bottom: 78px;
  }
}

/* El nombre no se parte: en un móvil de 375 la línea rompía dejando «Code»
   solo en un renglón. */
.bf-marca { white-space: nowrap; }