/* carpinteriadealuminiomago.es
   Réplica de la maqueta que servía el WordPress con Divi. Cada medida sale de
   haber medido el original con el navegador: no hay ni un número a ojo.

   Rejilla de Divi: contenedor al 80% con tope de 1152, columnas separadas por
   un 5,5% del contenedor, secciones con 4% de aire arriba y abajo y filas con
   un 2%. Por debajo de 981px esos porcentajes pasan a 50 y 30px fijos, que es
   lo que hacía el tema. */

/* ---------------------------------------------------------------- tokens */
:root {
  --azul: #1d3557;
  --azul-medio: #457b9d;
  --azul-enlace: #2ea3f2;
  --tinta: #0e0c19;
  --texto: #3c3a47;
  --barra: #090028;
  --gris: #f7f7f7;
  --blanco: #fff;
  --negro: #000;

  --contenedor: 1152px;
  --gutter: 5.5%;
  --alto-barra: 31px;
  --alto-cabecera: 94px;
  --alto-cabecera-fija: 54px;
}

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

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

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  /* La misma pila que el tema: importa porque el ★ de las valoraciones no
     está en Poppins y lo dibuja la fuente siguiente. */
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  padding-top: calc(var(--alto-barra) + var(--alto-cabecera));
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  color: var(--tinta);
  margin: 0 0 10px;
  /* Divi le pone 10px por debajo a todo titular de módulo, más otros 10 de
     margen. Sin esto, cada titular de la página queda 20px más arriba que en
     el original. El h1 lleva 31,67, que es el margen normal de un módulo. */
  padding-bottom: 10px;
}

h1 { margin-bottom: 31.67px; }

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

ul, ol { margin: 0 0 1em; padding-left: 1em; }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--azul-enlace); outline-offset: 2px; }

/* ------------------------------------------------------------- iconos */
/* El sprite de símbolos no se ve, pero sin esconderlo un <svg> ocupa 300x150
   por omisión y empujaría toda la página hacia abajo. */
.sprite-iconos { display: none; }

.icono {
  width: 1em; height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

/* --------------------------------------------------------- barra superior */
.barra-superior {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--alto-barra);
  background: var(--barra);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.barra-superior .contenedor {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.barra-superior a { text-decoration: none; }
.barra-superior a:hover { opacity: .7; }

.barra-dato { display: inline-flex; align-items: center; gap: 6px; }
.barra-dato .icono { width: 13px; height: 13px; }

.barra-redes { display: inline-flex; align-items: center; gap: 12px; }
.barra-redes .icono { width: 14px; height: 14px; }

/* -------------------------------------------------------------- cabecera */
.cabecera {
  position: fixed;
  inset: var(--alto-barra) 0 auto;
  z-index: 99;
  height: var(--alto-cabecera);
  background: var(--blanco);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
  transition: height .3s ease;
}

.cabecera .contenedor {
  display: flex;
  align-items: center;
  height: 100%;
}

.marca { margin: 0 auto 0 4px; }
.marca img {
  width: 138px; height: 75px;
  object-fit: contain;
  transition: width .3s ease, height .3s ease;
}

body.encogida .cabecera { height: var(--alto-cabecera-fija); }
body.encogida .marca img { width: 79px; height: 43px; }

.navegacion ul {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0; padding: 0;
  list-style: none;
}

.navegacion a {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(0, 0, 0, .6);
}

.navegacion a:hover { opacity: .8; }
.navegacion a.activo { color: var(--azul-enlace); }

.buscar-abrir, .interruptor {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 22px;
  cursor: pointer;
  color: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
}

.buscar-abrir .icono { width: 18px; height: 18px; }

/* buscador desplegable, el mismo gesto que hacía el tema */
.buscador {
  position: absolute;
  inset: 100% 0 auto;
  background: var(--blanco);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  display: none;
}
.buscador[open], .buscador.abierto { display: block; }
.buscador form { display: flex; padding: 14px 0; }
.buscador input {
  flex: 1;
  border: 0;
  border-bottom: 1px solid #ddd;
  font: 500 16px/1.75 'Poppins', Helvetica, Arial, sans-serif;
  color: var(--texto);
  padding: 8px 0;
  background: none;
}
.buscador input:focus { outline: none; border-bottom-color: var(--azul); }
.resultados-busqueda { margin: 0; padding: 0 0 14px; list-style: none; font-size: 15px; }
.resultados-busqueda li { padding: 4px 0; }
.resultados-busqueda a { color: var(--azul); text-decoration: none; font-weight: 600; }

/* hamburguesa */
.interruptor { display: none; width: 32px; height: 32px; justify-content: center; }
.interruptor span {
  position: relative;
  width: 22px; height: 2px;
  background: var(--tinta);
  display: block;
}
.interruptor span::before, .interruptor span::after {
  content: ''; position: absolute; left: 0;
  width: 22px; height: 2px; background: var(--tinta);
}
.interruptor span::before { top: -7px; }
.interruptor span::after { top: 7px; }
.interruptor[aria-expanded="true"] span { background: transparent; }
.interruptor[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.interruptor[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

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

.seccion { padding: 4% 0; position: relative; }
.seccion > .contenedor,
.hero-quienes > .contenedor,
.hero-servicios > .contenedor { position: relative; z-index: 2; }

/* La fila de Divi lleva un 2% de aire arriba y abajo, y ese porcentaje se
   mide contra el ancho de la ventana, no contra el del contenedor. De ahí
   `2vw` y no `2%`: con `2%` saldrían 23px donde el original pone 28,8. */
.fila { padding: 2vw 0; }

/* Aire de secciones que el tema traía cambiado a mano. Van como clase y no
   como atributo `style`, porque la CSP de esta web no admite estilos en línea
   y los descartaría en silencio. */
.seccion.pad-0, .fila.pad-0 { padding: 0; }
.fila.pad-0-2 { padding: 0 0 2vw; }
.seccion.pad-2-0 { padding: 2px 0 0; }
.seccion.pad-10-4 { padding: 10px 0 4%; }
.seccion.pad-4-14 { padding: 4% 0 14px; }
.seccion.pad-4-0 { padding: 4% 0 0; }
.seccion.pad-4-0-0 { padding: 4px 0 0; }
.seccion.pad-4-8 { padding: 4% 0 8px; }
.seccion.pad-4-40 { padding: 4% 0 40px; }
.seccion.pad-4-47 { padding: 4% 0 47px; }
.seccion.pad-0-4 { padding: 0 0 4%; }
.seccion.pad-18-9 { padding: 18px 0 9px; }
.seccion.pad-72 { padding: 5% 0; }
.seccion.pad-144 { padding: 10% 0; }
.seccion.pad-115-0 { padding: 8% 0 0; }
.seccion.pad-115 { padding: 8% 0; }
.seccion.pad-4-115 { padding: 4% 0 8%; }

/* Las columnas de Divi: un medianil del 5,5% del ancho de la fila y el resto
   repartido. `n/m` mide n columnas más los n-1 medianiles que van dentro. */
.columnas { display: flex; flex-wrap: wrap; column-gap: var(--gutter); row-gap: 30px; }
.columnas > * { width: 100%; }

.columnas-2 > *, .c-1-2 { width: calc((100% - var(--gutter)) / 2); }
.columnas-3 > *, .c-1-3 { width: calc((100% - 2 * var(--gutter)) / 3); }
.columnas-4 > *, .c-1-4 { width: calc((100% - 3 * var(--gutter)) / 4); }
.columnas-6 > *, .c-1-6 { width: calc((100% - 5 * var(--gutter)) / 6); }

.c-2-3 { width: calc((100% - 2 * var(--gutter)) / 3 * 2 + var(--gutter)); }
.c-3-4 { width: calc((100% - 3 * var(--gutter)) / 4 * 3 + 2 * var(--gutter)); }
.c-2-5 { width: calc((100% - 4 * var(--gutter)) / 5 * 2 + var(--gutter)); }
.c-3-5 { width: calc((100% - 4 * var(--gutter)) / 5 * 3 + 2 * var(--gutter)); }

.modulo { margin-bottom: 31.67px; }
.mas-aire { margin-bottom: 36px; }

/* --------------------------------------------------------- tipografía */
h1, .h1 { font-size: 72px; line-height: 1.15; }
h2, .h2 { font-size: 50px; line-height: 1.2; }
h3, .h3 { font-size: 32px; line-height: 1.3; }
.titulillo { font-size: 18px; line-height: 1.4; font-family: 'Abril Fatface', Georgia, serif;
             font-weight: 500; color: var(--tinta); display: block; }

.antetitulo {
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0 0 10px;
}

.centrado { text-align: center; }

/* ----------------------------------------------------------- botones */
.boton {
  display: inline-block;
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
  padding: 12px 24px;
  border: 0;
  border-radius: 100px;
  background: var(--azul);
  color: var(--blanco);
  cursor: pointer;
  transition: opacity .2s ease;
}
.boton:hover { opacity: .85; }
.boton-claro { background: var(--blanco); color: var(--azul); }
.boton-medio { background: var(--azul-medio); }

/* -------------------------------------------------------------- héroes */
.hero { background-size: cover; background-position: center; }
.hero-inicio {
  /* El original le puso altura mínima a mano: 855 en escritorio y 900 por
     debajo de 981px. Sin esto, la portada empieza 155px más arriba. */
  min-height: 855px;
  padding: 10% 0;
  background-image: url('/assets/img/hero-inicio.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--blanco);
  text-align: center;
}
.hero-inicio h1, .hero-inicio .antetitulo { color: var(--blanco); }
.hero-inicio .antetitulo { letter-spacing: 1px; }
.hero-inicio p { max-width: none; }

.hero-oscuro {
  background-size: cover;
  background-position: center;
  padding: 4% 0;
}
.hero-contacto {
  background-image: linear-gradient(var(--azul) 0%, rgba(255, 255, 255, 0) 100%),
                    url('/assets/img/hero-contacto.jpg');
}
.hero-trabajos {
  background-image: linear-gradient(var(--azul) 0%, rgba(255, 255, 255, 0) 100%),
                    url('/assets/img/hero-ultimos-trabajos.jpg');
}
.hero-elegirnos {
  background-image: url('/assets/img/hero-por-que-elegirnos.jpg');
}
.hero-oscuro .tarjeta {
  background: var(--azul);
  color: var(--blanco);
  padding: 60px;
  max-width: calc(100% - var(--gutter));
  margin-left: auto;
}
.hero-oscuro .tarjeta h1 { color: var(--blanco); }

/* Los dos héroes de forma rara del tema. Divi los resolvía pintando ENCIMA
   del fondo un SVG blanco con el negativo de la figura: lo que se ve del
   fondo es el hueco que el SVG deja. Se replica igual, con los mismos
   trazados sacados del original. */
.mascara {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: calc(100% + 2px) calc(100% + 2px);
  pointer-events: none;
}

.hero-quienes {
  position: relative;
  overflow: hidden;
  padding: 0;
  background-image: url('/assets/img/hero-quienes-somos.jpg');
  /* El original la traía en una capa de paralaje de 1069px de alto que
     empezaba 25px por encima de la sección; recortarla a la altura de la
     sección enseñaría otro trozo de la foto. */
  background-size: 100% auto;
  background-position: center -30px;
  background-repeat: no-repeat;
}
.hero-quienes .mascara { background-image: url('/assets/img/mascara-quienes-somos.svg'); }

.hero-servicios {
  position: relative;
  overflow: hidden;
  padding: 0;
  background-color: var(--azul);
  background-image: linear-gradient(rgba(0, 0, 0, .29) 0%, rgba(255, 255, 255, 0) 100%);
}
.hero-servicios .mascara { background-image: url('/assets/img/mascara-servicios.svg'); }

/* ------------------------------------------------------------- toggles */
.toggle {
  border: 1px solid #d8d8d8;
  padding: 20.8px 20px;
  margin-bottom: 31.67px;
  background: var(--blanco);
}
.toggle:last-child { margin-bottom: 0; }
.toggle-titulo::-webkit-details-marker { display: none; }
.toggle-titulo {
  list-style: none;
  font-family: 'Abril Fatface', Georgia, serif;
  padding-bottom: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--tinta);
  margin: 0;
  padding: 0 30px 0 0;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.toggle-titulo::after {
  content: '';
  position: absolute;
  right: 4px; top: 50%;
  width: 12px; height: 2px;
  background: var(--tinta);
  transform: translateY(-50%);
}
.toggle-titulo::before {
  content: '';
  position: absolute;
  right: 9px; top: 50%;
  width: 2px; height: 12px;
  background: var(--tinta);
  transform: translateY(-50%);
}
.toggle[open] > .toggle-titulo::before { display: none; }
.toggle[open] > .toggle-titulo { color: var(--azul); }
.toggle-cuerpo { padding-top: 21.6px; }

/* --------------------------------------------------------------- blurbs */
.blurb { margin-bottom: 0; }
.blurb-icono { color: var(--azul); font-size: 32px; line-height: 1; margin-bottom: 30px;
               padding: 0; }
.blurb-icono .icono { width: 1em; height: 1em; }
.titulillo { margin-bottom: 10px; }

/* blurb en línea: icono a la izquierda, texto a la derecha */
.blurb-linea { display: flex; gap: 15px; }
/* La caja del icono mide siempre lo mismo aunque el dibujo sea más pequeño:
   40px en los bloques grandes y 32 en la tira de ventajas. De ahí sale el
   ancho del texto que va al lado. */
.blurb-linea .blurb-icono { font-size: 40px; width: 40px; flex: none; margin: 0; }
.blurb-linea .blurb-icono.icono-24 { font-size: 24px; width: 32px; }

/* ---------------------------------------------------------- testimonios */
.testimonio {
  background: var(--azul);
  color: var(--blanco);
  padding: 20px;
  height: 100%;
}
.testimonio p { font-size: 18px; font-weight: 700; line-height: 1.75; margin-bottom: 27.97px; }
.testimonio .estrellas { color: var(--blanco); letter-spacing: 4px; font-size: 24px;
                         font-weight: 700; line-height: 42px; margin-bottom: 27.97px; }
.testimonio .autor { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
.testimonio .titulillo { color: var(--blanco); }
.testimonio .cargo { font-size: 16px; font-weight: 500; margin: 0; }

/* ------------------------------------------------------------ contacto */
.datos-contacto a { color: var(--azul); text-decoration: none; }
.datos-contacto a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- formulario */
.seccion-formulario { background: var(--azul); }
.tarjeta-formulario { background: var(--blanco); padding: 60px; }
.fila.tarjeta-formulario { padding: 60px; }

.formulario { margin-top: 30px; }
.campos { display: flex; flex-wrap: wrap; gap: 20px; }
.campos > * { width: 100%; }
.campos .medio { width: calc(50% - 10px); }

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario textarea {
  width: 100%;
  font: 500 16px/1.75 'Poppins', Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: transparent;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  padding: 17.5px 16px;
}
.formulario textarea { min-height: 150px; resize: vertical; display: block; }
.formulario input::placeholder, .formulario textarea::placeholder { color: #999; opacity: 1; }

.titulo-campo {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  margin: 20px 0 6px;
}
.consentimiento { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.7; }
.consentimiento a { font-weight: 700; color: inherit; }

.pie-formulario {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 5px;
}
.suma { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.formulario .suma input { width: 50px; padding: 15.5px 8px; text-align: center; }

.aviso-formulario { margin: 20px 0 0; font-size: 15px; }
.aviso-formulario:empty { display: none; }
.aviso-formulario.error { color: #b00020; }
.aviso-formulario.bien { color: #1b7f3b; }

/* trampa para robots: invisible para las personas, apetecible para un robot */
.tarro { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------- llamadas */
.llamada { background: var(--blanco); padding: 60px; text-align: center; }
.llamada h2 { margin-bottom: 0; }
.llamada .grande { margin-bottom: 19px; }
.seccion-llamada {
  background-image: linear-gradient(65deg, var(--negro) 0%, rgba(255, 255, 255, 0) 100%);
  background-color: var(--azul);
  padding: 72px 0;
}

.franja-oscura {
  background-color: var(--azul);
  background-image: linear-gradient(90deg, var(--azul) 40%, rgba(0, 0, 0, .5) 100%),
                    url('/assets/img/promesa.jpg');
  background-size: cover;
  background-position: center;
  color: var(--blanco);
}
.franja-oscura .antetitulo { color: var(--azul-medio); }

.tarjeta-blanca { background: var(--blanco); color: var(--texto); padding: 60px; }

/* -------------------------------------------------------------- cifras */
.cifra { padding: 30px; color: var(--blanco); }
.cifra .numero { font-family: 'Abril Fatface', Georgia, serif; font-size: 60px; line-height: 1.2; }
.cifra-media { background: var(--azul-medio); }
.cifra-negra { background: var(--negro); }
.cifra .titulillo { color: var(--blanco); margin: 10px 0; }

/* ------------------------------------------------------------- galería */
.galeria { margin: 0; }
.galeria .fila-fotos { display: flex; gap: 11px; margin-bottom: 11px; }
.galeria .fila-fotos:last-child { margin-bottom: 0; }
.galeria a {
  flex: var(--proporcion) 1 0;
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--proporcion);
}
/* Las cinco proporciones que hay en la galería. Van como clase por lo mismo
   que las de arriba: la CSP no deja escribirlas en un atributo `style`. */
.r-3-4    { --proporcion: .75; }
.r-17-30  { --proporcion: .566667; }
.r-4-3    { --proporcion: 1.333333; }
.r-16-9   { --proporcion: 1.775148; }
.r-9-16   { --proporcion: .563333; }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria a:hover img { opacity: .85; }

.lupa {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, .92);
  display: none;
  align-items: center;
  justify-content: center;
}
.lupa[open] { display: flex; }
.lupa img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; }
.lupa button {
  position: absolute;
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 40px; line-height: 1; padding: 10px 18px;
}
.lupa .cerrar { top: 10px; right: 10px; font-size: 32px; }
.lupa .anterior { left: 4px; }
.lupa .siguiente { right: 4px; }

/* ------------------------------------------------------------ kit digital */
.kit-digital { padding: 3px 0 6px; }
.kit-digital img { width: 100%; }

/* ----------------------------------------------------------------- pie */
.pie { background: var(--negro); color: var(--blanco); padding: 4% 0 0; }
.pie h2, .pie h3, .pie .titulo-lista { color: var(--blanco); }
.pie .titulo-lista {
  font-family: 'Abril Fatface', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  display: block;
  margin-bottom: 10px;
}
.pie ol { margin: 0; padding: 0 0 14px; list-style-position: inside; }
.pie li { font-size: 16px; line-height: 26px; }
.pie-marca { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; }
.pie-marca img { width: 397px; height: 216px; object-fit: contain; }
.pie-enlaces { display: flex; gap: 22px; flex-wrap: wrap; }
.pie-enlaces a { font-size: 14px; line-height: 1; text-decoration: none; }
.pie-enlaces a:hover { text-decoration: underline; }
.pie-copyright { font-size: 16px; margin: 31.67px 0 0; }
.pie-copyright a { color: var(--blanco); text-decoration: none; }
.pie-copyright a:hover { text-decoration: underline; }

/* --------------------------------------------------------- whatsapp */
.whatsapp {
  position: fixed;
  right: 15px; bottom: 55px;
  z-index: 90;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.whatsapp .icono { width: 30px; height: 30px; fill: #fff; }
/* La usa la lupa de la galería: con la CSP puesta no se puede tocar
   `body.style` desde el JavaScript. */
body.sin-scroll { overflow: hidden; }

/* -------------------------------------------------------- texto legal */
.texto-legal h1 { font-size: 50px; line-height: 1.2; margin-bottom: 30px; }
.texto-legal h2 { font-size: 22px; line-height: 1.4; margin: 40px 0 10px; }
.texto-legal h3 { font-size: 18px; line-height: 1.4; margin: 30px 0 8px; }
.texto-legal ul { padding-left: 1.4em; }
.texto-legal li { line-height: 26px; }
.texto-legal .tabla { overflow-x: auto; margin: 0 0 1em; }
.texto-legal table { width: 100%; border-collapse: collapse; margin: 0; min-width: 320px; }
.texto-legal th, .texto-legal td {
  border: 1px solid #e2e2e2; padding: 10px; text-align: left; vertical-align: top;
  font-size: 15px; line-height: 1.6;
}
.texto-legal a { color: var(--azul); }

/* -------------------------------------------------------- afinados */
.grande { font-size: 18px; line-height: 1.75; }
@media (max-width: 980px) { .grande { font-size: 16px; } }

.testimonio .autor { display: block; padding-left: 55px; }
.a-la-derecha { text-align: right; }
.ano { color: var(--azul); margin-bottom: 10px; }

/* El botón de enviar del formulario es un pelo más alto que el resto, igual
   que en el original. */
.formulario button.boton { padding: 13.6px 24px; }

/* ------------------------------------------------ piezas de cada página */
/* Las imágenes de contenido llenan su columna, como hacía el tema. Las de
   marca (cabecera y pie) llevan su medida escrita y quedan fuera. */
.seccion img, .kit-digital img { width: 100%; }

.claro, .claro h1, .claro h2 { color: var(--blanco); }
h1.claro, h2.claro { color: var(--blanco); }


/* Tarjetas que en el original SON la fila: llevan ellas el aire, no la fila,
   o el bloque saldría 57px más alto. */
.fila.tarjeta-blanca, .fila.tarjeta-azul, .fila.llamada-azul { padding: 60px; }
.tarjeta-azul { background: var(--azul); color: var(--blanco); padding: 60px; }
.tarjeta-azul h1, .tarjeta-azul h2 { color: var(--blanco); }
.llamada-azul { background: var(--azul); color: var(--blanco); padding: 60px; }
.llamada-azul h2 { color: var(--blanco); }

/* héroe de «por qué elegirnos»: la tira blanca con tres ventajas y la celda
   azul del botón, pegada al fondo de la sección */
.tira-ventajas { background: var(--blanco); }
.tira-ventajas .blurb-linea { padding-top: 30px; }
.celda-boton { background: var(--azul-medio); padding: 50px 20px; }
.celda-boton .boton { line-height: 1.7; }
.titulillo-pequeno { font-size: 14px; line-height: 1.5; }
.tira-ventajas .titulillo { font-size: 14px; line-height: 1.5; }
.tira-ventajas p { font-size: 14px; line-height: 1.75; }

.sangria-arriba { padding-top: 20px; }

.enlaces-404 { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.enlaces-404 a { color: var(--azul); font-weight: 600; }

.red-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid #ddd;
  color: var(--azul);
  text-decoration: none;
}
.red-social .icono { width: 14px; height: 14px; }

/* Pie de foto de la galería: en el original sólo aparece al pasar por
   encima, y por eso no sale en ninguna captura. */
.galeria .caption {
  position: absolute;
  inset: auto 0 0;
  background: var(--negro);
  color: var(--blanco);
  font: 300 12px/22px -apple-system, Helvetica, Arial, sans-serif;
  padding: 0 6px;
  opacity: 0;
  transition: opacity .2s ease;
}
.galeria a:hover .caption, .galeria a:focus-visible .caption { opacity: 1; }

/* Fila anidada dentro de una columna: el tema le pone 2,75% del ancho del
   contenedor por arriba y por abajo, que a 1440 son 31,67px. */
.fila-interior { padding: 31.67px 0; }
.fila-interior:first-child { padding-top: 31.67px; }
.mar-115 { margin-bottom: 115.2px; }
.col-foto-servicios { padding: 32.875px 0; }
@media (max-width: 980px) {
  .fila-interior { padding: 15px 0; }
  .mar-115 { margin-bottom: 30px; }
  .col-foto-servicios { padding: 0; }
}

/* ============================================================ tableta */
@media (max-width: 980px) {
  :root { --alto-cabecera: 80px; --alto-cabecera-fija: 80px; }
  body { font-size: 15px; padding-top: calc(var(--alto-barra) + var(--alto-cabecera)); }

  .navegacion { display: none; }
  .interruptor { display: flex; }
  .buscar-abrir { margin-left: auto; }
  .marca { margin-right: 0; }
  .marca img { width: 79px; height: 43px; }
  body.encogida .marca img { width: 79px; height: 43px; }

  .navegacion.abierta {
    display: block;
    position: absolute;
    inset: 100% 0 auto;
    background: var(--blanco);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    padding: 10px 0;
  }
  .navegacion.abierta ul { flex-direction: column; align-items: stretch; gap: 0; }
  .navegacion.abierta li { border-bottom: 1px solid #eee; }
  .navegacion.abierta li:last-child { border-bottom: 0; }
  .navegacion.abierta a { display: block; padding: 14px 10%; }

  /* Por debajo de 981px el tema cambia el 4% de las secciones por 50px
     fijos, pero conserva los porcentajes que se pusieron a mano y los
     píxeles sueltos. Hay que repetir cada uno o el 50px se los come. */
  .seccion { padding: 50px 0; }
  .seccion.pad-4-14 { padding: 50px 0 14px; }
  .seccion.pad-4-8  { padding: 50px 0 8px; }
  .seccion.pad-4-40 { padding: 50px 0 40px; }
  .seccion.pad-4-47 { padding: 50px 0 47px; }
  .seccion.pad-4-0  { padding: 50px 0 0; }
  .seccion.pad-0-4  { padding: 0 0 50px; }
  .seccion.pad-10-4 { padding: 10px 0 50px; }
  .seccion.pad-4-115 { padding: 50px 0 8%; }
  .pie { padding: 50px 0 0; }
  .fila { padding: 30px 0; }
  .fila.tarjeta-formulario, .fila.tarjeta-blanca, .fila.tarjeta-azul,
  .fila.llamada-azul { padding: 30px; }
  .llamada { padding: 30px; }
  .formulario input[type="text"], .formulario input[type="email"],
  .formulario input[type="tel"], .formulario textarea { padding: 16px; }
  h1 { margin-bottom: 20px; }

  /* Divi no apila todo por igual en tableta: las columnas de un cuarto se
     quedan de dos en dos y las de un sexto de tres en tres. Lo demás pasa a
     ancho completo. */
  .columnas > *, .c-1-2, .c-1-3, .c-2-3, .c-3-4, .c-2-5, .c-3-5 { width: 100%; }
  .columnas-4 > *, .c-1-4 { width: calc((100% - var(--gutter)) / 2); }
  .columnas-6 > *, .c-1-6 { width: calc((100% - 2 * var(--gutter)) / 3); }

  h1, .h1 { font-size: 40px; }
  h2, .h2 { font-size: 28px; }
  h3, .h3 { font-size: 22px; }
  .titulillo { font-size: 15px; }
  .antetitulo { font-size: 13px; }
  .toggle-titulo { font-size: 15px; }
  .testimonio p { font-size: 16px; }
  .estrellas { font-size: 15px; }
  .cifra .numero { font-size: 44px; }
  .pie .titulo-lista { font-size: 22px; }
  .pie li, .pie-copyright { font-size: 15px; }
  .texto-legal h1 { font-size: 28px; }
  .texto-legal h2 { font-size: 19px; }

  .hero-inicio { min-height: 900px; }
  .hero-mascara .foto { display: none; }
  .hero-diagonal .diagonal { display: none; }

  /* En tableta las fotos van de dos en dos. El original las deja casi todas
     solas -su algoritmo justificado no consigue meter dos- y la página le
     sale de 23.000px; de dos en dos se parece más a lo que enseña en las
     filas donde sí le caben, y se recorre. */
  .galeria .fila-fotos { flex-wrap: wrap; }
  .galeria a { min-width: calc(50% - 5.5px); }


}

/* ============================================================= teléfono */
@media (max-width: 767px) {
  body { font-size: 14px; }

  h1, .h1 { font-size: 24px; }
  h2, .h2 { font-size: 20px; }
  h3, .h3 { font-size: 17px; }
  .titulillo { font-size: 14px; }
  .toggle-titulo { font-size: 14px; }
  .estrellas { font-size: 14px; }
  .pie .titulo-lista { font-size: 17px; }
  .pie li, .pie-copyright, .texto-legal li { font-size: 14px; }
  .texto-legal h1 { font-size: 24px; }

  .barra-superior { font-size: 11px; }
  .barra-superior .contenedor { gap: 10px; }
  /* En el teléfono el original no enseña el icono de Facebook en la barra. */
  .barra-redes { display: none; }

  .campos .medio { width: 100%; }
  .columnas-4 > *, .c-1-4, .columnas-6 > *, .c-1-6 { width: 100%; }
  .fila.tarjeta-formulario, .fila.tarjeta-blanca, .fila.tarjeta-azul,
  .fila.llamada-azul { padding: 20px; }
  .llamada, .tarjeta-azul { padding: 20px; }
  .pie-formulario { flex-wrap: wrap; justify-content: flex-start; }

  .galeria a { min-width: 100%; }
  .galeria .fila-fotos { gap: 11px; }
  .pie-marca img { width: 238px; height: 129px; }
}