/*
Theme Name: Hares Child
Theme URI: https://preview.wolfthemes.com/hares/landing/
Description: Hares Child theme
Author: WolfThemes
Author URI: https://wolfthemes.com
Template: hares
Version: 1.6.6
*/

/* ------------------------------------------------------------------
   Pie de pagina (shortcode [be_pie] en functions.php)
   Una sola reticula de tres columnas: los tres bloques comparten
   linea de salida, separacion y estilo de titulo.
   ------------------------------------------------------------------ */
.be-pie {
  padding: 4px 0;
}

.be-pie-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 50px;
  align-items: start;
}

/* Titulos de columna: el mismo trazo dorado en las tres */
.be-pie .be-pie-titulo {
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
}

.be-pie .be-pie-titulo::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 14px;
  background-color: #e6b75d;
}

/* Bloque 1: marca */
.be-pie .be-pie-logo {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
  margin: 0 0 24px;
}

.be-pie .be-pie-claim {
  max-width: 260px;
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.62);
}

.be-pie .be-pie-contacto {
  display: grid;
  gap: 14px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

/* el tema pone list-style-type: disc en "ul li", hay que ganarle aqui */
.be-pie .be-pie-contacto li,
.be-pie .be-pie-lista li {
  margin: 0;
  list-style: none;
}

.be-pie .be-pie-contacto li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 12px;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.be-pie .be-pie-contacto svg {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: #e6b75d;
}

.be-pie .be-pie-contacto a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.be-pie .be-pie-contacto a:hover {
  color: #e6b75d;
}

.be-pie .wvc-socials-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Bloque 2: horario y boton */
.be-pie .be-pie-horas {
  display: grid;
  gap: 18px;
  margin: 0 0 30px;
}

/* el tema subraya todos los dt (main.min.css) */
.be-pie .be-pie-hora dt {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
}

.be-pie .be-pie-hora dd {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

/* mismo boton que el del formulario de reserva.
   El color va con !important porque la fila del pie es de fuente clara y el
   tema pinta de blanco todos los enlaces que hay dentro. */
.be-pie .be-pie-btn {
  display: inline-block;
  padding: 13px 32px;
  border: 1px solid #e6b75d;
  background-color: #e6b75d;
  color: #1b1b1b !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.be-pie .be-pie-btn:hover,
.be-pie .be-pie-btn:focus {
  border-color: #f1d59b;
  background-color: #f1d59b;
  color: #1b1b1b !important;
}

/* Bloque 3: servicios, dos columnas de seis en el orden de la lista */
.be-pie .be-pie-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  column-gap: 26px;
  row-gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.be-pie .be-pie-lista li {
  position: relative;
  padding-left: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.be-pie .be-pie-lista li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 1px;
  background-color: #e6b75d;
}

@media (max-width: 1100px) {
  .be-pie-grid {
    gap: 38px;
  }
}

@media (max-width: 900px) {
  .be-pie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .be-pie .be-pie-marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .be-pie-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .be-pie .be-pie-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    column-gap: 18px;
  }
}

@media (max-width: 420px) {
  .be-pie .be-pie-lista {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }
}

/* Barra inferior: copyright y enlaces legales */
.site-infos .credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* El tema pone "opacity: .6" a TODO <a> y <span> de .site-infos
   (assets/css/main.min.css). Como estos enlaces van dentro de un <span>, las
   dos opacidades se multiplicaban: 0.6 x 0.6 = 0.36, o sea blanco a 92 sobre
   255, y de ahi que todo el bloque se viera apagado. Se anula la opacidad y el
   brillo se decide con el color, que si se puede graduar. */
.site-infos .copyright-text,
.site-infos .be-legal,
.site-infos .be-legal a,
.site-infos .be-firma,
.site-infos .be-firma a,
.site-infos .be-firma-texto {
  opacity: 1;
}

.site-infos .copyright-text {
  color: rgba(255, 255, 255, 0.72);
}

.site-infos .be-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
}

/* El tema remata la barra con ".credits a { color: #fff !important }", asi que
   sin !important aqui ningun color llega a pintarse: ni el graduado del reposo
   ni el dorado del hover. */
.site-infos .be-legal a {
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-infos .be-legal a:hover,
.site-infos .be-legal a:focus {
  color: #e6b75d !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Firma de Codesian */
.site-infos .be-firma {
  display: flex;
  justify-content: center;
}

.site-infos .be-firma a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8) !important;
  transition: color 0.2s ease;
}

.site-infos .be-firma a:hover,
.site-infos .be-firma a:focus {
  color: #e6b75d !important;
}

/* wordmark en SVG: blanco entero y a la altura que se pida, sin perder trazo.
   El logo es de un tercero, no se le cambia el color: el hover se lee en el
   "hecho por" en dorado y en este medio punto de opacidad que recupera. */
.site-infos .be-firma-logo {
  display: block;
  width: auto;
  height: 48px;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.site-infos .be-firma a:hover .be-firma-logo,
.site-infos .be-firma a:focus .be-firma-logo {
  opacity: 1;
}

/* Paginas legales: sin hero (functions.php), asi que el hueco de la cabecera
   -que va en absoluto por encima del contenido- lo pone este padding */
.be-legal-page .content-inner {
  padding-top: 150px;
  padding-bottom: 90px;
}

.be-legal-page .be-legal-titulo {
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: 30px;
  line-height: 1.2;
}

.be-legal-page .be-legal-titulo::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 22px;
  background-color: #e6b75d;
}

@media (max-width: 767px) {
  .be-legal-page .content-inner {
    padding-top: 120px;
    padding-bottom: 60px;
  }

  .be-legal-page .be-legal-titulo {
    font-size: 24px;
  }
}

/* Paginas legales: columna de lectura, que el tema las saca a todo lo ancho */
.page-template-default .page-entry-content > p,
.page-template-default .page-entry-content > ul,
.page-template-default .page-entry-content > h2,
.page-template-default .page-entry-content > h3 {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.page-template-default .page-entry-content h2 {
  margin-top: 46px;
  font-size: 20px;
}

.page-template-default .page-entry-content h3 {
  margin-top: 30px;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-template-default .page-entry-content ul {
  padding-left: 18px;
}

.page-template-default .page-entry-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}

/* Quiénes somos: fundir la foto con la textura del fondo */
#quienes-somos .wvc-single-image .wvc-img {
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

#quienes-somos .wvc-single-image img {
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}