/* Aitor Carpintería. Escrito a mano; las medidas salen de haber medido el
   WordPress con el navegador, no de haberlo mirado. Los números raros
   -57.5938px, 28.7969px- son los que daba Divi al calcular sus porcentajes
   sobre 1440, y se dejan tal cual para que las alturas coincidan. */

:root {
  --marron-oscuro: #37130b;   /* barra superior, botones, pie de sección */
  --marron: #6c422c;
  --cobre: #9a643e;           /* antetítulos y iconos */
  --arena: #a67e57;           /* fondo de sección, siempre al 31 % */
  --titular: #0e0c19;
  --texto: #3c3a47;
  --claro: #f1f1f1;
  --blanco: #fff;

  --contenedor: 1152px;
  /* El medianil de Divi era el 5,5 % del contenedor: 63,36 px sobre 1152. */
  --medianil: 63.36px;
  --sombra-tarjeta: 0 24px 72px -12px rgba(0, 0, 0, .12);
  --radio: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Poppins, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--texto);
  background: var(--blanco);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cobre); }

h1, h2, h3, h4 {
  font-family: "Abril Fatface", Georgia, serif;
  font-weight: 500;
  color: var(--titular);
  margin: 0 0 10px;
}

h1 { font-size: 72px; line-height: 1.15; }
h2 { font-size: 50px; line-height: 1.2; }
h3 { font-size: 18px; line-height: 1.4; }
h4 { font-size: 15px; line-height: 1; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* El antetítulo que va encima de cada titular: Lato, versalitas espaciadas. */
.antetitulo {
  font-family: Lato, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cobre);
  margin: 0 0 8px;
}

.contenedor { width: 80%; max-width: var(--contenedor); margin: 0 auto; }

.separador { height: 28px; margin: 0; border: 0; border-top: 1px solid rgba(55, 19, 11, .18); }
.seccion { padding: 57.5938px 0; }
.fila { padding: 28.7969px 0; }

.seccion-arena { background: rgba(166, 126, 87, .31); }
.seccion-oscura { background: var(--marron-oscuro); color: rgba(255, 255, 255, .85); }
.seccion-oscura h1, .seccion-oscura h2, .seccion-oscura h3 { color: var(--blanco); }
.seccion-oscura .antetitulo { color: rgba(255, 255, 255, .72); }
/* En el original este bloque ocupaba media columna, no el ancho entero. */
.seccion-oscura .fila > * { max-width: 544px; }
.seccion-oscura .rejilla > * { max-width: none; }

/* ---------- Enlaces de salto y accesibilidad ---------- */

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blanco); color: var(--marron-oscuro); padding: 12px 20px;
}
.saltar:focus { left: 8px; top: 8px; }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprite-iconos { display: none; }

/* El WordPress guardaba este párrafo para el teléfono y lo escondía en
   pantallas mayores. Se conserva igual. */
.solo-telefono { display: none; }

.icono { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }

/* ---------- Barra superior ---------- */

.cabecera-fija { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }

.barra-superior {
  background: var(--marron-oscuro);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.barra-superior .contenedor {
  display: flex; align-items: center; gap: 20px;
  padding: 7px 0; flex-wrap: wrap; min-height: 31px;
}

.barra-superior a { color: var(--blanco); text-decoration: none; }
.barra-superior a:hover { text-decoration: underline; }

.barra-dato { display: inline-flex; align-items: center; gap: 7px; }
.barra-superior .icono { width: 12px; height: 12px; }

.barra-redes { margin-left: auto; display: flex; gap: 12px; }
.barra-redes .icono { width: 14px; height: 14px; }

/* ---------- Cabecera ---------- */

.cabecera {
  background: var(--blanco);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

.cabecera .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 94px;
}

.logo img { width: 89px; height: 75px; object-fit: contain; }

.menu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }

.menu a {
  font-size: 14px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--titular);
}

.menu a:hover, .menu .activo a { color: var(--cobre); }

.abrir-menu {
  display: none; background: none; border: 0; padding: 8px;
  color: var(--titular); cursor: pointer;
}
.abrir-menu span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background-size: cover; background-position: center;
  color: var(--blanco);
  padding: 182px 0 57.5938px;
}

.hero::before { content: ""; position: absolute; inset: 0; }

.hero .contenedor { position: relative; }
.hero h1 { color: var(--blanco); max-width: 544px; }
.hero-inicio h1 { font-family: Arvo, Georgia, serif; }
.hero .antetitulo { color: rgba(255, 255, 255, .82); }
.hero .tarjeta .antetitulo { color: var(--cobre); }
.hero .tarjeta h2, .hero .tarjeta p { color: var(--titular); }
.hero .tarjeta p { color: var(--texto); }
.hero p { max-width: 560px; }

.hero-corto { padding: 130px 0 90px; }

/* Altura de cada hero, medida en el WordPress a 1440 px. */
.hero-inicio    { min-height: 900px;  padding: 213px 0 57.5938px; }
.hero-sobre     { min-height: 842px;  padding: 240px 0 115.2px; }
.hero-sobre::before, .hero-galeria::before, .hero-contacto::before {
  background: linear-gradient(90deg, rgba(55, 19, 11, .55), rgba(55, 19, 11, .12));
}
.hero-galeria   { min-height: 1050px; padding: 326px 0 201.6px; }
.hero-contacto  { min-height: 1125px; padding: 125px 0 0; }

/* Servicios y opiniones no llevan fotografía de fondo: van sobre el cobre de
   la casa con un velo degradado, y su titular es oscuro, no blanco. */
.hero-cobre { background-color: var(--cobre); }
.hero-cobre::before {
  background: linear-gradient(rgba(0, 0, 0, .29) 0%, rgba(255, 255, 255, .29) 100%);
}
.hero-cobre h1 { color: var(--titular); }
.hero-cobre .antetitulo { color: var(--marron-oscuro); }
.hero-cobre p { color: var(--texto); }
.hero-servicios { min-height: 810px;  padding: 182px 0 57.5938px; }
.hero-opiniones { min-height: 1161px; padding: 326px 0 201.6px; }

/* Franja con fotografía a lo ancho, dentro de contacto. */
.franja-contacto { background-size: cover; background-position: center; }
.cta-opiniones { background-size: cover; background-position: center; min-height: 539px;
                 display: flex; align-items: center; }
.hero-legal     { min-height: 493px;  padding: 125px 0 0;
                  display: flex; align-items: center; }

/* Las páginas sin hero empiezan por debajo de la cabecera flotante. */
.sin-hero { padding-top: 125px; }

/* ---------- Botones ---------- */

.boton {
  display: inline-block;
  font-size: 14px; font-weight: 700; line-height: 1.7;
  padding: 12px 24px; border-radius: 100px;
  background: var(--marron-oscuro); color: var(--blanco);
  text-decoration: none; border: 0; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.boton:hover { background: var(--cobre); color: var(--blanco); }

.boton-claro { background: var(--blanco); color: var(--marron-oscuro); }
.boton-claro:hover { background: var(--marron-oscuro); color: var(--blanco); }

/* ---------- Rejillas ---------- */

.rejilla { display: grid; gap: var(--medianil); }
.rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }

.rejilla-partida {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--medianil); align-items: center;
}

/* ---------- Tarjeta ---------- */

.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
  padding: 40px;
}

.tarjeta-suelta { box-shadow: var(--sombra-tarjeta); border-radius: var(--radio); }

/* ---------- Servicios (bloque con icono a la izquierda) ---------- */

.servicio { display: flex; gap: 15px; align-items: center; min-height: 31px; }
.servicio .icono { width: 24px; height: 24px; color: var(--marron-oscuro); flex: none; margin-top: 2px; }
.servicio h3 { font-family: Poppins, sans-serif; font-size: 14px; font-weight: 500; color: var(--texto); margin: 0; line-height: 1.6; }
.servicio p { font-size: 14px; line-height: 1.7; margin: 6px 0 0; }

.servicio-tarjeta { display: block; text-align: center; }

/* Variante alineada a la izquierda: el icono arriba, y debajo el título y la
   descripción. Es la que usan «Nosotros» y la galería. */
.servicio-bloque { display: block; text-align: left; }
.servicio-bloque .icono { width: 24px; height: 24px; color: var(--cobre); margin: 0 0 14px; }
.servicio-bloque h3 { font-family: "Abril Fatface", Georgia, serif; font-size: 18px;
                      color: var(--titular); }
.servicio-tarjeta .icono { width: 40px; height: 40px; color: var(--cobre); margin: 0 auto 14px; }
.servicio-tarjeta h3 { font-family: "Abril Fatface", Georgia, serif; font-size: 18px; color: var(--titular); }

/* ---------- Testimonios ---------- */

.testimonios { text-align: center; }
.testimonios .icono-comillas { width: 32px; height: 32px; color: var(--cobre); margin: 0 auto 10px; }
.testimonio p { font-size: 18px; font-weight: 700; line-height: 1.75; color: var(--titular); }
.testimonio cite { display: block; font-size: 14px; font-style: normal; font-weight: 500; margin-top: 10px; }
.estrellas { color: var(--cobre); letter-spacing: .1em; }

/* ---------- Bloque de contacto del pie ---------- */

.pie { background-size: cover; background-position: center; padding: 57.5938px 0; }

/* Las cuatro franjas del pie, con el mismo reparto que tenían las filas de
   Divi: 181 + 292 + 161 + 86 px de contenido entre los dos rellenos de la
   sección. */
.pie-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;
             padding: 28.7969px 0; }

.pie-dato {
  background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra-tarjeta);
  padding: 30px; display: flex; gap: 16px; align-items: center; min-height: 123px;
}
.pie-dato .icono { width: 26px; height: 26px; color: var(--marron-oscuro); flex: none; }
.pie-dato h3 { font-size: 16px; font-family: Poppins, sans-serif; font-weight: 700;
               margin: 0 0 10px; }
.pie-dato p { font-size: 14px; margin: 0; }
.pie-dato a { color: var(--texto); text-decoration: none; }
.pie-dato a:hover { color: var(--cobre); }

.pie-cuerpo {
  background: var(--blanco);
  border-radius: var(--radio); box-shadow: var(--sombra-tarjeta); padding: 30px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: center;
  min-height: 292px;
}

.pie-cuerpo h3 { font-size: 18px; margin-bottom: 10px; }
.pie-cuerpo img { width: 276px; height: 232px; object-fit: contain; }
.pie-enlaces { list-style: none; margin: 0; padding: 0; }
.pie-enlaces li { padding: 11px 0; }
.pie-enlaces a { color: var(--texto); text-decoration: none; font-size: 14px; }
.pie-enlaces a:hover { color: var(--cobre); }
.pie-horario p { font-size: 14px; margin: 0 0 16px; padding: 0; }
.pie-horario p:last-child { margin-bottom: 0; }

.pie-kit {
  background: var(--blanco);
  border-radius: var(--radio); box-shadow: var(--sombra-tarjeta);
  padding: 28.7969px 22px; margin-top: 28.7969px;
}
.pie-kit img { width: 100%; height: auto; }

.pie-firma { text-align: right; font-size: 14px; color: var(--blanco);
             padding: 28.7969px 0; margin: 0; }

/* ---------- Galería ---------- */

.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.galeria button {
  padding: 0; border: 0; background: none; cursor: pointer; display: block;
  position: relative; overflow: hidden; border-radius: 2px;
}

.galeria img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

.galeria button::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(55, 19, 11, .55); opacity: 0; transition: opacity .25s ease;
}
.galeria button:hover::after, .galeria button:focus-visible::after { opacity: 1; }

.galeria .lupa {
  position: absolute; inset: 0; margin: auto; width: 40px; height: 40px;
  color: var(--blanco); opacity: 0; transition: opacity .25s ease; z-index: 1;
}
.galeria button:hover .lupa, .galeria button:focus-visible .lupa { opacity: 1; }

/* La lupa: propia, sin librería. */
.visor {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 5, 3, .94);
  display: flex; align-items: center; justify-content: center;
}
.visor[hidden] { display: none; }
.visor img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; }

.visor button {
  position: absolute; background: none; border: 0; color: var(--blanco);
  font-size: 40px; line-height: 1; cursor: pointer; padding: 12px 18px;
}
.visor .cerrar { top: 10px; right: 14px; font-size: 34px; }
.visor .previa { left: 8px; top: 50%; transform: translateY(-50%); }
.visor .siguiente { right: 8px; top: 50%; transform: translateY(-50%); }
.visor .contador {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: rgba(255, 255, 255, .7); font-size: 14px;
}

/* ---------- Formulario ---------- */

.formulario { display: grid; gap: 16px; }
.formulario label { font-size: 14px; font-weight: 600; color: var(--titular); display: block; margin-bottom: 6px; }

.formulario input, .formulario textarea {
  width: 100%; font: inherit; font-size: 15px; font-weight: 400;
  padding: 12px 14px; border: 1px solid #d8d2cc; border-radius: var(--radio);
  background: var(--blanco); color: var(--texto);
}
.formulario input:focus, .formulario textarea:focus {
  outline: 2px solid var(--cobre); outline-offset: 1px; border-color: transparent;
}
.formulario textarea { min-height: 150px; resize: vertical; }

.trampa { position: absolute; left: -9999px; }

.consentimiento { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.consentimiento input { width: auto; margin-top: 4px; flex: none; }
.consentimiento label { font-weight: 500; margin: 0; }

.suma { display: flex; gap: 12px; align-items: center; }
.suma input { max-width: 90px; }

.aviso { padding: 14px 16px; border-radius: var(--radio); font-size: 14px; }
.aviso-bien { background: #e8f2e8; color: #1f4d22; }
.aviso-mal { background: #f7e6e4; color: #7a2418; }

/* ---------- Texto legal ---------- */

.texto-legal { max-width: 100%; }
.texto-legal h2 { font-size: 26px; margin: 34px 0 12px; }
.texto-legal h3 { font-size: 18px; margin: 24px 0 8px; }
.texto-legal p, .texto-legal li { font-size: 15px; line-height: 1.8; }
.texto-legal ul { padding-left: 20px; }
.texto-legal li { margin-bottom: 8px; }

.tabla { overflow-x: auto; margin: 18px 0 26px; }
.tabla table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tabla th, .tabla td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #e5ded7; vertical-align: top; }
.tabla th { width: 34%; font-weight: 600; color: var(--titular); }

/* ---------- Migas ---------- */

.migas { font-size: 13px; padding: 14px 0 0; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.migas li::after { content: "›"; margin-left: 8px; color: #b3a99f; }
.migas li:last-child::after { content: ""; }
.migas a { color: var(--cobre); text-decoration: none; }

/* ---------- Tableta ---------- */

@media (max-width: 980px) {
  body { font-size: 15px; line-height: 1.75; }
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 15px; }
  .contenedor { width: 80%; }
  .seccion { padding: 50px 0; }
  .fila { padding: 30px 0; }
  .hero { padding: 120px 0 50px; }

  .abrir-menu { display: block; }
  .cabecera .contenedor { min-height: 74px; }
  .hero-inicio, .hero-sobre, .hero-servicios, .hero-galeria,
  .hero-opiniones, .hero-contacto {
    min-height: 0; padding: 150px 0 50px;
  }
  .hero-legal { min-height: 0; padding: 130px 0 50px; }
  /* Las franjas con fotografía también pierden su altura fija: en el teléfono
     la marca el contenido, como hacía el original. */
  .cta-opiniones, .franja-contacto { min-height: 0; }
  .sin-hero { padding-top: 105px; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanco); box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
    padding: 8px 0;
  }
  .menu.abierto { display: flex; }
  .menu li { border-top: 1px solid #eee; }
  .menu li:first-child { border-top: 0; }
  .menu a { display: block; padding: 13px 10%; }
  .cabecera .contenedor { position: relative; }

  /* Divi apilaba TODAS sus columnas a ancho completo por debajo de 981 px, no
     sólo las de dos. Aquí igual, o las páginas salen mucho más cortas que el
     original en la tableta. */
  .rejilla, .rejilla-2, .rejilla-3, .rejilla-4,
  .rejilla-partida, .pie-cuerpo, .pie-datos { grid-template-columns: 1fr; }
  /* La galería es la excepción: dos por fila. El algoritmo justificado de
     Envira no conseguía meter dos a este ancho y dejaba casi todas solas, con
     lo que la página se iba a más de catorce mil píxeles. */
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .seccion-oscura .fila > * { max-width: none; }
  .tarjeta { padding: 30px; }
}

/* ---------- Teléfono ---------- */

@media (max-width: 640px) {
  body { font-size: 14px; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 14px; }
  .seccion { padding: 40px 0; }
  .hero-inicio, .hero-sobre, .hero-servicios, .hero-galeria,
  .hero-opiniones, .hero-contacto { padding: 130px 0 40px; }
  .hero-legal { padding: 120px 0 40px; }
  .sin-hero { padding-top: 100px; }
  .solo-telefono { display: block; }
  .logo img { width: 64px; height: 54px; }
  .cabecera .contenedor { min-height: 62px; }
  .rejilla, .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
  .pie-datos { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr; }
  .barra-superior .contenedor { gap: 10px 16px; font-size: 11px; }
  .barra-redes { margin-left: 0; }
  .tarjeta { padding: 24px; }
  .pie-cuerpo { padding: 26px 24px; }
  .texto-legal .tabla th { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* La clase que pone el JavaScript al abrir la lupa: sin ella, el fondo se
   desplaza por debajo de la foto. */
.sin-desplazar { overflow: hidden; }

/* Bloques que sólo aparecen en algunas páginas. */
.texto-centrado { text-align: center; }
.texto-centrado .rejilla { text-align: left; }

.columna-servicios { display: grid; gap: 31px; align-content: start; }

.seccion-cierre { padding: 0; }
.seccion-cierre .rejilla-partida { gap: 0; align-items: stretch; }
.seccion-cierre .cierre-texto { padding: 70px 60px 70px 0; align-self: center; }
.seccion-cierre .cierre-foto { display: flex; align-items: center; }
.seccion-cierre .cierre-foto img { width: 100%; }

@media (max-width: 980px) {
  .seccion-cierre .cierre-texto { padding: 50px 0; }
}

.centrada { margin-left: auto; margin-right: auto; }