/* Fontanería Polofi — hoja única.
   Cada medida sale de medir el WordPress con el navegador, no de mirarlo:
   las cifras que llevan comentario están cotejadas contra origen/medidas/.

   Divi pedía `font-weight: 500` en casi todo, pero su URL de Google Fonts
   (300,400,600,700,800) no traía un Open Sans 500 y el navegador lo resolvía
   con el 400. Aquí se escribe 400 directamente: mismo render, sin sorpresas. */

:root {
  --azul: #082c4b;
  --rojo: #ee212b;
  --granate: #8e0000;
  --gris: #666;
  --gris-oscuro: #333;
  --negro-suave: #232323;
  --borde: #d8d8d8;
  --fondo-suave: #f9f9f9;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/opensans.woff2') format('woff2-variations'),
       url('/fonts/opensans.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 23.8px;       /* absoluto, como Divi: un factor se recalcularía
                                con el tamaño de cada elemento y descuadraría
                                todo lo que no vaya a 14px */
  color: var(--gris);
  background: #fff;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; border: 0; }
a { color: var(--rojo); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0; padding-bottom: 14px; }   /* el 1em de Divi sobre 14px */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; color: var(--gris-oscuro); }
ul { margin: 0; padding: 0; list-style: none; }

.contenedor { width: 80%; max-width: 1400px; margin: 0 auto; }   /* medido: 1152 a 1440 */
.contenedor-ancho { width: 90%; max-width: 1400px; margin: 0 auto; }  /* 1296 a 1440 */

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Fuera de la vista sin salirse del lienzo: con left:-9999px cualquier
   verificador de desbordamiento canta un falso positivo en todas las páginas. */
.salto-contenido {
  position: absolute; left: 8px; top: 8px; z-index: 100;
  background: #fff; color: var(--azul); padding: 12px 20px;
  transform: translateY(-200%);
}
.salto-contenido:focus { transform: none; }

/* ---------- cabecera ---------- */

/* La banda roja no está centrada en la franja azul: arranca en y=32 y la
   desborda 12px por abajo, tal como la pintaba Divi. */
.barra-aviso { background: var(--azul); height: 60px; }
.barra-aviso .contenedor-ancho {
  display: flex; align-items: flex-start; gap: 3%; height: 60px;
}
.barra-aviso .lema {
  flex: 0 0 31.33%;               /* medido: 406 sobre un contenedor de 1296 */
  margin: 25px 0 0; color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}

/* Banda roja con el filo derecho cortado a 25°: 40px de alto × tan(25°) = 18,65px */
.barra-aviso .banda {
  flex: 1 1 auto; position: relative; height: 40px; margin-top: 32px;
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 40px;
}
.barra-aviso .banda::before {
  content: ''; position: absolute; inset: 0; right: -28px;
  background: var(--rojo);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18.65px) 100%, 0 100%);
}
.barra-aviso .banda > * { position: relative; }
.barra-aviso .banda strong,
.barra-aviso .banda a {
  font-size: 16px; font-weight: 700; text-transform: uppercase; text-align: center;
}
.barra-aviso .banda strong { color: #000; }
.barra-aviso .banda a { color: #fff; }
.barra-aviso .banda a:hover { text-decoration: underline; }

.barra-datos { background: #fff; }
.barra-datos .contenedor-ancho {
  height: 99px; display: flex; align-items: flex-start; gap: 3%;
}
.marca { flex: 0 0 31.33%; padding-top: 20px; }   /* medido: logotipo en y=80 */
.marca img { width: 200px; height: 65px; display: block; }   /* medido */

.datos-cabecera { flex: 1 1 auto; display: flex; gap: 4.57%; min-width: 0; }
.dato { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start;
        gap: 15px; padding-top: 39px; }
.dato > div { flex: 1 1 auto; min-width: 0; }
.dato .icono {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--azul); color: var(--azul);
}
.dato .icono svg { width: 24px; height: 24px; }
.dato h4 { font-size: 16px; line-height: 16px; color: #333; margin: 0; padding-bottom: 10px; }
.dato p { margin: 0; padding-bottom: 0; font-size: 14px; color: var(--gris); }
.dato a { color: inherit; }

/* ---------- menú ---------- */

/* La barra del menú sobresale 30px sobre el contenido: en el original el
   contenido arranca en y=195 y la barra acaba en 225. */
.menu-principal { background: #fff; position: relative; z-index: 50; }
.menu-principal .barra-menu { margin-bottom: -30px; }
.menu-principal .contenedor-ancho { position: relative; }
.barra-menu {
  position: relative; height: 66px;                 /* medido */
  display: flex; align-items: stretch;
}
.barra-menu::before {
  content: ''; position: absolute; inset: 0;
  background: var(--azul);
  /* filo derecho a 20°: 66 × tan(20°) = 24,02px */
  clip-path: polygon(0 0, 100% 0, calc(100% - 24.02px) 100%, 0 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.barra-menu > * { position: relative; }

.abrir-menu {
  display: none; margin-left: auto; align-self: center;
  background: none; border: 0; padding: 12px 16px; cursor: pointer; color: #fff;
}
.abrir-menu svg { width: 26px; height: 26px; display: block; }

.navegacion { display: flex; align-items: center; padding-left: 41px; }
.navegacion > ul { display: flex; align-items: center; }
.navegacion > ul > li { position: relative; }
.navegacion > ul > li > a {
  display: block; padding: 8px 11px; line-height: 50px;
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.navegacion a:hover { text-decoration: none; opacity: .8; }
.navegacion .actual > a { opacity: .75; }

.navegacion > ul > li.con-hijos > a { padding-right: 31px; }   /* «Galería» arranca en x=425 */
.con-hijos > a::after {
  content: ''; position: absolute; right: 14px; top: 50%; margin-top: -5px;
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.submenu {
  position: absolute; top: 100%; left: 11px; z-index: 60;
  width: 240px; padding: 23px 0 20px;               /* medido: 240 de ancho */
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12);
  visibility: hidden; opacity: 0; transition: opacity .2s;
}
.con-hijos:hover > .submenu,
.con-hijos:focus-within > .submenu { visibility: visible; opacity: 1; }
.submenu li { margin-bottom: 5px; }              /* medido: entradas cada 33px */
.submenu li:last-child { margin-bottom: 0; }
.submenu a {
  display: block; padding: 0 20px; line-height: 28px;
  color: var(--negro-suave); font-size: 13px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
}
.submenu a:hover { color: var(--rojo); text-decoration: none; }

.boton-menu {
  margin-left: auto; display: flex; align-items: stretch; position: relative;
}
/* El fondo va en el propio enlace, recortado con clip-path. Con un
   pseudo-elemento en z-index:-1 el rojo se colaba detrás del azul de la barra. */
.boton-menu .cta {
  display: flex; align-items: center; justify-content: center;
  width: 141px; padding: 0;                 /* medido: el rojo va de 1194 a 1335 */
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  background: var(--rojo);
  clip-path: polygon(0 0, 100% 0, calc(100% - 24.02px) 100%, 0 100%);
}
.boton-menu .cta:hover { text-decoration: none; }
.boton-menu .flecha {
  display: flex; align-items: center; justify-content: center;
  width: 33px; color: #fff;                 /* medido: el conjunto mide 174 */
}
.boton-menu .flecha svg { width: 18px; height: 18px; }

/* ---------- secciones ---------- */

/* Divi montaba la página en filas de padding vertical 28,8px (2,5% de 1152)
   dentro de secciones sin padding propio; las cifras salen de origen/medidas/. */
.seccion { padding: 0; }
.seccion-pares { padding-top: 57.6px; }        /* medido: la primera fila arranca a 57 */
.seccion-servicios { padding-bottom: 57.6px; }
.seccion-vacia { height: 59px; }   /* la sección vacía que el constructor dejó en /servicios/ */ /* medido: sección acaba 58 tras la última fila */

.fila { padding: 28.8px 0; }
.fila-titulo { padding-bottom: 0; }

.rotulo {
  font-size: 30px; line-height: 30px; color: var(--granate);
  margin: 0; padding-bottom: 10px;
}
.par h3.rotulo-menor, .rotulo-menor {
  font-size: 22px; line-height: 22px; color: var(--granate);
  margin: 0; padding-bottom: 10px; font-weight: 400;
}

/* pares de texto e imagen: dos columnas de 544 con calle de 5,5%.
   Va en rejilla y no en flex porque con flex-basis:0 el padding del texto se
   suma fuera del reparto y las dos columnas dejan de medir lo mismo. */
.par {
  display: grid; align-items: center;
  grid-template-columns: 1fr 1fr; gap: 5.5%;
}
.par.invertido .foto { order: 2; }
.par .texto {
  padding-left: 15px;              /* medido: 767 sobre columna en 752 */
  /* Los tres bloques del WordPress cerraban con un <p>&nbsp;</p> del editor,
     que dejaba 23,8px de aire bajo el texto. Aquí ese hueco es padding: mismo
     resultado, sin un párrafo vacío que los lectores de pantalla anuncien. */
  padding-bottom: 23.8px;
}
.par .antetitulo {
  font-size: 23px; line-height: 23px; color: var(--granate);
  margin: 0; padding-bottom: 10px; font-weight: 400;
}
.par h1, .par h2 {
  font-size: 30px; line-height: 30px; color: var(--gris-oscuro);
  margin: 0; padding-bottom: 10px; font-weight: 400;
}
.par h3 {
  font-size: 22px; line-height: 22px; color: var(--gris-oscuro);
  margin: 0; padding-bottom: 10px; font-weight: 400;
}
.par .destacado { font-weight: 700; color: var(--azul); }
.par h3 .destacado { font-weight: 400; }
.par p { font-size: 14px; margin: 0; padding-bottom: 14px; }
.par .foto img { width: 100%; display: block; }

/* rejillas de tarjetas */
.rejilla { display: grid; gap: 5.5%; }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }

/* 31,7px de separación = 2,75% del ancho de la fila; sobre la columna, que es
   el elemento que manda en un margen porcentual, eso es un 9,27%. */
.columna-servicios > .tarjeta { margin-bottom: 9.27%; }
.columna-servicios > .tarjeta:last-child { margin-bottom: 0; }

.tarjeta img { width: 100%; display: block; }
.tarjeta h4 {
  font-size: 18px; line-height: 18px; color: var(--granate);
  margin: 30px 0 0; padding-bottom: 10px; font-weight: 400;
  text-transform: uppercase;                /* medido: así los pintaba el tema */
}
.tarjeta p { font-size: 14px; margin: 0; padding-bottom: 0; }

/* el recuadro de peritajes: fondo al 10% de negro y 11px de aire por dentro */
.aviso-destacado { background: rgba(0, 0, 0, .1); padding: 11px; }
.aviso-destacado h3 {
  font-size: 22px; line-height: 22px; color: var(--granate);
  margin: 0; padding-bottom: 10px; font-weight: 400; text-align: center;
}
.aviso-destacado p { margin: 0; padding-bottom: 14px; text-align: center; }
.aviso-destacado p:last-child { padding-bottom: 0; }

/* El título de las páginas interiores es el entry-title del tema: 26px y gris,
   no el rótulo granate de 30 que llevan las secciones de la portada. */
.titulo-pagina {
  font-size: 26px; line-height: 26px; color: var(--gris-oscuro);
  margin: 0; padding-bottom: 10px; font-weight: 400;
}
.seccion-interior { padding: 57.6px 0; }
.seccion-interior .fila { padding: 28.8px 0; }
.tras-titulo { padding-top: 32px; }   /* medido: el contenido cae en 349 y el título acaba en 317 */

/* Este par no era de columnas iguales: las dos arrancan arriba, no centradas. */
.par.sin-sangria { align-items: start; }
.par.sin-sangria .texto { padding-left: 0; padding-bottom: 0; }
.ventajas { padding-left: 14px; }
.ventajas h4 {
  font-size: 18px; line-height: 18px; color: var(--gris-oscuro);
  margin: 0; padding-bottom: 10px; font-weight: 400;
}

/* ---------- galerías ---------- */

/* Cuatro columnas de 240 con 63,36 de calle, que es el 5,5% de 1152.
   Va en flex y no en rejilla porque un row-gap en porcentaje se resuelve contra
   la altura del contenedor, que aquí es automática, y se queda en nada; un
   margen inferior en porcentaje sí se mide contra el ancho, como en Divi. */
.galeria {
  display: flex; flex-wrap: wrap;
  column-gap: 5.5%; margin-bottom: -5.5%;
}
.galeria a { flex: 0 0 20.875%; display: block; overflow: hidden; margin-bottom: 5.5%; }
.galeria img { width: 100%; display: block; transition: transform .3s; }
.galeria a:hover img { transform: scale(1.04); }

/* ---------- prosa ---------- */

/* La escala del tema, medida en la página «Nosotros» del WordPress. */
.prosa { font-size: 14px; color: var(--gris); }
.prosa h2 { font-size: 26px; line-height: 26px; color: var(--gris-oscuro);
            margin: 0; padding-bottom: 10px; font-weight: 400; }
.prosa h3 { font-size: 22px; line-height: 22px; color: var(--granate);
            margin: 0; padding-bottom: 10px; font-weight: 400; }
.prosa h4 { font-size: 18px; line-height: 18px; color: var(--gris-oscuro);
            margin: 0; padding-bottom: 10px; font-weight: 400; }
.prosa p { margin: 0; padding-bottom: 14px; }
.prosa ul { list-style: disc; line-height: 26px; margin: 0; padding: 0 0 14px 14px; }
.prosa li { line-height: 26px; margin: 0; }
.prosa a { color: var(--rojo); }
.prosa .granate { color: var(--granate); }
.prosa .centrado { text-align: center; }
.prosa table {
  border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: 13px;
  /* en pantalla estrecha la tabla se desplaza dentro de su caja: la página
     nunca hace scroll horizontal */
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
@media (min-width: 700px) { .prosa table { display: table; } }
.prosa th, .prosa td { border: 1px solid var(--borde); padding: 8px 10px;
                       text-align: left; vertical-align: top; }
.prosa th { background: var(--fondo-suave); font-weight: 600; color: var(--gris-oscuro); }

/* En los textos legales, que son largos, cada apartado necesita aire por arriba. */
.prosa-legal h2 { margin-top: 30px; }
.prosa-legal h2:first-of-type { margin-top: 18px; }

/* ---------- pie ---------- */

/* Dos bloques azules: el de columnas y tarjetas, y el de créditos y Kit Digital.
   Medido: el primero arranca con 61px de aire y el segundo cierra con 57,6. */
.pie { background: var(--azul); color: #fff; padding-top: 61px; }
.pie a { color: #fff; }
.pie-cierre { padding-bottom: 57.6px; }

.pie h4 {
  width: 80%;                      /* medido: 273 sobre una columna de 342 */
  font-size: 18px; line-height: 22px; font-weight: 600; color: #fff;
  text-transform: uppercase;
  padding-bottom: 15px; margin-bottom: 32px; position: relative;
}
.pie h4::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%;
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.pie h4::before {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 9px; height: 9px;
  background: var(--rojo);
}

.columnas-pie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.5%; }
.columnas-pie p { font-size: 13px; color: #fff; padding-bottom: 13px;
                  text-align: justify; }   /* medido: así iban en el tema */
.columnas-pie ul { width: 80%; padding-bottom: 14px; }   /* medido: 273 sobre 342 */
.columnas-pie li {
  font-size: 14px; line-height: 26px; padding: 6px 0; margin-bottom: 5px;
  border-bottom: 1px dotted rgba(255,255,255,.35);
}
.columnas-pie li a { font-size: 13px; }
.columnas-pie li::before {
  content: '\203A'; color: var(--rojo); font-size: 18px; margin-right: 10px; line-height: 1;
}

/* medido: esta fila abre con 29px y cierra a ras, sin padding abajo */
.tarjetas-pie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5.5%; padding-bottom: 0; }
.tarjeta-pie {
  border: 1px solid rgba(255,255,255,.35); padding: 16px;
  display: flex; align-items: flex-start;
}
.tarjeta-pie .icono { flex: 0 0 40px; color: var(--rojo); }
.tarjeta-pie .icono svg { width: 40px; height: 40px; display: block; }
.tarjeta-pie .texto { padding-left: 15px; flex: 1 1 auto; min-width: 0; }
.tarjeta-pie h4 {
  width: auto;
  font-family: 'Roboto', 'Open Sans', sans-serif; font-weight: 500;
  font-size: 18px; line-height: 18px; text-transform: uppercase;
  padding: 0 0 10px; margin: 0;
}
.tarjeta-pie h4::before, .tarjeta-pie h4::after { content: none; }
/* El WordPress ponía estos datos a 10px, que en la mano no se leen. Subidos a
   13 por decisión del cliente: es lo único de la maqueta que se aparta a
   propósito del original. */
.tarjeta-pie p { font-size: 13px; line-height: 23.8px; margin: 0;
                 padding-bottom: 0; color: #fff; }
.tarjeta-pie a { color: #fff; }

/* Los enlaces del pie son texto en línea de 18-19px de alto: por debajo de los
   24 que hacen falta para acertarlos con el dedo. El relleno agranda la caja y
   el margen negativo lo devuelve, así que la zona pulsable crece y la maqueta
   se queda donde estaba. */
.columnas-pie li a, .tarjeta-pie a, .creditos a, .datos-contacto a,
.dato a, .barra-aviso .banda a {
  display: inline-block; padding: 4px 3px; margin: -4px -3px;
}
/* Los enlaces de dentro de un párrafo no se tocan: agrandar su caja los haría
   solaparse entre líneas, y son justo la excepción que contempla la norma para
   el tamaño mínimo de objetivo (WCAG 2.2, 2.5.8: enlaces en línea). */

.creditos { text-align: center; }
.creditos p { margin: 0; padding-bottom: 0; font-size: 14px; color: var(--gris); }
.creditos a { color: #fff; }

.franja-kit img { display: block; width: 100%; height: auto; }

/* ---------- flotantes ---------- */

.whatsapp-flotante {
  position: fixed; right: 20px; bottom: 55px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.whatsapp-flotante:hover { text-decoration: none; }
.whatsapp-flotante svg { width: 26px; height: 26px; }

.subir {
  position: fixed; right: 20px; bottom: 8px; z-index: 60;
  width: 38px; height: 38px; border: 0; border-radius: 3px;
  background: var(--rojo); color: #fff; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.subir.visible { display: flex; }
.subir svg { width: 18px; height: 18px; }

/* ---------- piezas concretas ---------- */

/* Las nueve tarjetas de servicios iban en tres columnas de tres; se conservan
   como columnas para que al apilarse en móvil salgan en el mismo orden. */

.datos-contacto h3 {
  font-size: 20px; line-height: 26px; color: var(--granate);
  margin: 0 0 8px; font-weight: 400;
}
.datos-contacto h3 + p { margin-bottom: 22px; }
.datos-contacto a { color: var(--gris); }
.datos-contacto .mapa a { color: var(--rojo); }

/* ---------- contacto y formulario ---------- */

.seccion-contacto { padding: 57.6px 0 0; }
.seccion-contacto .fila { padding: 28.8px 0; }
.seccion-mapa { padding: 57.6px 0; }
.seccion-mapa .fila { padding: 0; }
.seccion-galeria-contacto { padding: 57.6px 0; }
.seccion-galeria-contacto .fila { padding: 28.8px 0; }
/* Esta galería iba con la calle estrecha de Divi (gutters2): 3% en vez de 5,5%. */
.seccion-galeria-contacto .galeria { column-gap: 3%; margin-bottom: -3%; }
.seccion-galeria-contacto .galeria a { flex: 0 0 22.75%; margin-bottom: 3%; }

.par.contacto { align-items: start; gap: 5.5%; }
.par.contacto .texto { padding: 0; }

/* Divi sacaba los campos 19px fuera de la columna y se los devolvía como
   padding de cada campo; medido: formulario en x=54 sobre una columna en 72. */
.formulario { margin: 0 -19px; }
.formulario .campo { margin: 0 0 18px; padding: 0 19px; }
.formulario label { display: block; font-size: 14px; color: var(--gris-oscuro); }
.formulario input[type="text"],
.formulario input[type="tel"],
.formulario input[type="email"],
.formulario textarea {
  width: 100%; padding: 16px; border-radius: 0;
  font-family: inherit; font-size: 16px; line-height: 28.8px; color: var(--gris-oscuro);
  background: transparent; border: 2px solid rgba(0, 0, 0, .1);
}
.formulario input::placeholder, .formulario textarea::placeholder {
  color: #999; opacity: 1;
}
.formulario textarea { resize: vertical; height: 150px; }
.formulario input:focus-visible, .formulario textarea:focus-visible,
.formulario button:focus-visible, .formulario [type="checkbox"]:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 2px;
}

.consentimiento { padding: 0 19px; margin-bottom: 18px; }
.rotulo-campo {
  display: block; font-size: 14px; font-weight: 600; color: var(--gris);
  line-height: 23.8px; padding-bottom: 6px;
}
.consentimiento .casilla { display: flex; align-items: flex-start; gap: 10px; }
/* La casilla nativa mide 13px: no hay dedo que la acierte. A 24 sí, y es la
   única de la página que hay que marcar por obligación legal. */
.consentimiento input {
  flex: 0 0 auto; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--rojo);
}
.consentimiento label { font-size: 16px; line-height: 28.8px; color: var(--gris); }
/* En el WordPress este enlace salía blanco sobre blanco, es decir invisible.
   Es el que la ley obliga a mostrar, así que aquí se lee. */
.consentimiento label a { color: var(--rojo); font-weight: 700; }

.pie-formulario {
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
  padding: 0 19px;
}
.formulario .suma { display: flex; align-items: center; gap: 10px; }
.formulario .operacion { font-size: 14px; color: var(--gris); white-space: nowrap; }
.formulario .suma input[type="text"] { width: 50px; padding: 16px 8px; text-align: center; }
.formulario button {
  padding: 18px 28px; border: 0; cursor: pointer;
  background: var(--azul); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700;
  line-height: 23.8px;             /* medido: ni mayúsculas ni espaciado extra */
}
.formulario button:hover { background: #0b3c66; }
/* El campo trampa: invisible para quien mira, rellenable para un robot. */
.formulario .trampa {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.aviso-rgpd {
  margin: 18px 19px 0; padding: 0 0 0 12px;
  font-size: 12px; line-height: 1.6; color: var(--gris);
  border-left: 3px solid var(--borde);
}

.datos-contacto h3 {
  font-size: 36px; line-height: 50.4px; color: var(--gris-oscuro);
  margin: 0; padding-bottom: 10px; font-weight: 400;
}
.datos-contacto p {
  font-size: 18px; line-height: 32.4px; color: var(--gris); padding-bottom: 14px;
}
.datos-contacto a { color: var(--gris); }
.datos-contacto a:hover { color: var(--rojo); }

.mapa { display: block; }
.mapa img { width: 100%; height: auto; display: block; }
.pie-mapa {
  display: block; padding-top: 8px; font-size: 12px; color: var(--gris);
}
.pie-mapa .fuente { color: #999; }
.mapa:hover { text-decoration: none; }

.mensaje-formulario { padding: 14px 16px; margin-bottom: 20px; font-size: 14px; }
.mensaje-formulario.bien { background: #edf7ed; border: 1px solid #b6ddb6; color: #1e5c1e; }
.mensaje-formulario.mal { background: #fdecec; border: 1px solid #f0b6b6; color: #8e0000; }

/* ---------- puntos de ruptura (los de Divi: 980 y 767) ---------- */

@media (max-width: 980px) {
  .contenedor, .contenedor-ancho { width: 90%; }
  .barra-aviso { height: auto; padding: 10px 0; }
  .barra-aviso .contenedor-ancho { flex-direction: column; gap: 10px; }
  .barra-aviso .lema { flex: none; text-align: center; }
  .barra-aviso .banda { width: 100%; padding: 0 20px; }
  .barra-aviso .banda::before { right: 0; clip-path: none; }

  .barra-datos .contenedor-ancho { flex-direction: column; gap: 20px; padding: 20px 0; }
  .marca { flex: none; }
  .datos-cabecera { width: 100%; flex-wrap: wrap; gap: 20px; }
  .dato { flex: 1 1 240px; }

  .par, .par.invertido, .par.contacto { grid-template-columns: 1fr; gap: 24px; }
  .par.invertido .foto { order: 0; }
  .par .texto, .par.invertido .texto { padding-left: 0; }
  /* el formulario recupera su margen: fuera de la calle ancha no hace falta */
  .formulario { margin: 0; }
  .formulario .campo, .consentimiento, .pie-formulario { padding-left: 0; padding-right: 0; }
  .aviso-rgpd { margin-left: 0; margin-right: 0; }
  .rejilla-3 { grid-template-columns: repeat(2, 1fr); gap: 30px 40px; }
  .rejilla-4 { grid-template-columns: repeat(2, 1fr); gap: 30px 40px; }
  .galeria { grid-template-columns: repeat(3, 1fr); }
  .columnas-pie { grid-template-columns: 1fr; gap: 40px; }
  .tarjetas-pie { grid-template-columns: repeat(2, 1fr); gap: 30px; }

  .abrir-menu { display: block; }
  .navegacion {
    display: none; position: absolute; top: 66px; left: 0; right: 0; z-index: 70;
    background: #fff; padding: 10px 0; box-shadow: 0 6px 14px rgba(0,0,0,.15);
  }
  .navegacion.abierta { display: block; }
  .navegacion > ul { flex-direction: column; align-items: stretch; }
  .navegacion > ul > li > a { color: var(--azul); line-height: 44px; padding: 0 20px; }
  .con-hijos > a::after { float: right; margin-top: 18px; }
  .submenu {
    position: static; width: auto; visibility: visible; opacity: 1;
    box-shadow: none; padding: 0 0 8px 16px; display: none;
  }
  .con-hijos.desplegado > .submenu { display: block; }
  .boton-menu .flecha { display: none; }
  .boton-menu .cta { width: auto; padding: 0 22px; }
}

@media (max-width: 767px) {
  .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .tarjetas-pie { grid-template-columns: 1fr; }
  .seccion { padding: 36px 0; }
  .rotulo, .titulo-pagina, .par h1, .par h2 { font-size: 26px; line-height: 30px; }
  .barra-aviso .banda { flex-direction: column; height: auto; padding: 8px 16px; }
  .barra-aviso .banda strong, .barra-aviso .banda a { font-size: 14px; }
  .dato { flex: 1 1 100%; }
}

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

/* ---------- caja de imagen ampliada ---------- */

/* Las medidas son las del lightbox que traía Divi (Magnific Popup), sacadas de
   su hoja: fondo #0b0b0b al 80%, la imagen con 40px de aire arriba y abajo y su
   sombra, la equis de 44 y las flechas de 48. */

.caja-imagen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 0 8px;
  opacity: 0; visibility: hidden;
  /* La visibilidad cambia de golpe al abrir y espera al desvanecido al cerrar.
     Si se transiciona, durante esos milisegundos la caja no admite el foco y
     el teclado se queda fuera. */
  transition: opacity .35s ease-out, visibility 0s .35s;
}
.caja-imagen::before {
  content: ''; position: absolute; inset: 0; background: #0b0b0b; opacity: .8;
}
.caja-imagen.abierta {
  opacity: 1; visibility: visible;
  transition: opacity .35s ease-out, visibility 0s;
}
body.con-caja { overflow: hidden; }
/* con la imagen ampliada delante, los flotantes estorban y chocan con el contador */
body.con-caja .whatsapp-flotante, body.con-caja .subir { display: none; }

.caja-imagen figure {
  position: relative; margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 0;
}
.caja-imagen img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: calc(100vh - 80px);
  box-shadow: 0 0 8px rgba(0, 0, 0, .6);
}
.caja-imagen .contador {
  position: absolute; right: 0; bottom: 18px;
  color: #ccc; font-size: 12px; line-height: 18px;
  pointer-events: none;            /* no es pulsable, y tapaba la equis */
}

.caja-imagen button {
  position: absolute; z-index: 2;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  color: #fff; display: flex; align-items: center; justify-content: center;
  transition: opacity .2s;
}
.caja-imagen .cerrar {
  top: 0; right: 0; width: 44px; height: 44px; opacity: .65;
}
.caja-imagen .anterior, .caja-imagen .siguiente {
  top: 50%; margin-top: -24px; width: 48px; height: 48px; opacity: .55;
}
.caja-imagen .anterior { left: 10px; }
.caja-imagen .siguiente { right: 10px; }
.caja-imagen button:hover, .caja-imagen button:focus-visible { opacity: 1; }
.caja-imagen button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.caja-imagen .cerrar svg { width: 26px; height: 26px; }
.caja-imagen .anterior svg, .caja-imagen .siguiente svg { width: 34px; height: 34px; }

@media (max-width: 767px) {
  /* Magnific pasaba aquí a la equis pequeña con fondo, fija en la esquina */
  .caja-imagen figure { padding: 0; }
  .caja-imagen img { max-height: calc(100vh - 70px); }
  .caja-imagen .cerrar {
    position: fixed; width: 35px; height: 35px;
    background: rgba(0, 0, 0, .6); opacity: 1;
  }
  .caja-imagen .cerrar svg { width: 20px; height: 20px; }
  .caja-imagen .anterior, .caja-imagen .siguiente {
    width: 40px; height: 40px; margin-top: -20px; opacity: .8;
    background: rgba(0, 0, 0, .45);
  }
  /* a la izquierda: en la esquina derecha está la equis, y el contador le
     robaba los toques */
  .caja-imagen .contador {
    position: fixed; left: 8px; right: auto; bottom: auto; top: 10px; z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caja-imagen { transition: none; }
}