/* Carrocerías Alcas
   ---------------------------------------------------------------------
   Los valores de este fichero no son de gusto propio: salen de medir el
   WordPress que había antes (tema CarService) con el navegador, propiedad
   computada a propiedad computada. Donde se aparta del original está dicho
   en un comentario y el motivo.

   Índice
     1. Base y tipografía
     2. Rejilla
     3. Cabecera
     4. Portada: carrusel del hero
     5. Cabecera de página interior
     6. Títulos de sección
     7. Botones
     8. Hexágonos de icono
     9. Tarjetas de servicio
    10. Carruseles (testimonios y fotos)
    11. Acordeón
    12. Galería
    13. Formulario de contacto
    14. Datos de contacto
    15. Pie
    16. Móvil
   --------------------------------------------------------------------- */

/* 1. Base y tipografía ------------------------------------------------ */

@font-face{font-family:"Open Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url(../../fonts/open-sans-300-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url(../../fonts/open-sans-300-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:300;font-display:swap;
  src:url(../../fonts/open-sans-300-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:300;font-display:swap;
  src:url(../../fonts/open-sans-300-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(../../fonts/open-sans-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(../../fonts/open-sans-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(../../fonts/open-sans-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(../../fonts/open-sans-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url(../../fonts/open-sans-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url(../../fonts/open-sans-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:800;font-display:swap;
  src:url(../../fonts/open-sans-800-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:800;font-display:swap;
  src:url(../../fonts/open-sans-800-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --azul:#1e69b8;
  --texto:#777;
  --titulo:#333;
  --tenue:#999;
  --gris:#f5f5f5;
  --linea:#e2e6e7;
  --apagado:#a4aab3;
  --ancho:1170px;
}

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

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

body{
  margin:0;
  background:#fff;
  color:var(--texto);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;border:0;display:block}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:none}
ul{margin:0;padding:0;list-style:none}

h1,h2,h3,h4,h5,h6{margin:0;color:var(--titulo);font-weight:400}
p{margin:0}

/* el cuerpo de texto de las páginas */
.texto p{font-size:18px;font-weight:300;line-height:32px;color:var(--texto)}
.texto p + p{margin-top:24px}
.texto ul{margin-top:20px}
.texto ul li{
  font-size:18px;font-weight:300;line-height:32px;
  padding-left:22px;position:relative;
}
.texto ul li::before{
  content:"";position:absolute;left:0;top:14px;
  width:6px;height:6px;border-radius:50%;background:var(--azul);
}
.texto a{color:var(--azul)}
.texto a:hover{text-decoration:underline}
.texto h2{font-size:26px;font-weight:600;line-height:36px;letter-spacing:1px;margin:44px 0 18px}
.texto h3{font-size:20px;font-weight:600;line-height:30px;letter-spacing:1px;margin:34px 0 14px}
.texto h2:first-child,.texto h3:first-child{margin-top:0}
.texto table{border-collapse:collapse;width:100%;margin-top:24px;font-size:15px;font-weight:300;line-height:26px}
.texto th,.texto td{border:1px solid var(--linea);padding:10px 14px;text-align:left;vertical-align:top}
.texto th{font-weight:600;color:var(--titulo);background:var(--gris)}

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

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

/* 2. Rejilla ---------------------------------------------------------- */

.contenedor{width:var(--ancho);margin:0 auto}

/* La rejilla separa con `gap`, no con margen negativo y relleno. Aparte de
   ser más corto, evita la trampa que ya mordió una vez: un `margin:0 -15px`
   pisa el `margin:0 auto` de `contenedor` cuando las dos clases caen en el
   mismo elemento, y el bloque entero se va contra el borde izquierdo. */
.columnas{display:flex;flex-wrap:wrap;gap:0 30px}
/* Anchos calculados con la medianil de 30px descontada, para que una columna
   de tres caiga en 370px dentro del contenedor de 1170, que es exactamente lo
   que medía en el tema anterior. */
.col-3{width:calc((100% - 90px) / 4)}
.col-4{width:calc((100% - 60px) / 3)}
.col-6{width:calc((100% - 30px) / 2)}
.col-8{width:calc((200% - 120px) / 3)}
.col-12{width:100%}

.seccion{padding:70px 0}
.seccion-gris{background:var(--gris)}
.seccion-sin-borde{padding-top:0}
.centrado{text-align:center}
/* Los textos legales van a todo el ancho del contenedor y en cuerpo 14/26,
   que es como los servía el tema. Medido en el aviso legal del WordPress. */
.texto-legal p,.texto-legal li{font-size:14px;font-weight:400;line-height:26px;color:var(--texto)}
.texto-legal p{margin-top:24px}
.texto-legal p:first-child{margin-top:0}
.texto-legal p + p{margin-top:24px}
.texto-legal ul{margin-top:16px}
.texto-legal ul li{padding-left:20px}
.texto-legal ul li::before{top:10px;width:5px;height:5px}
.texto-legal h2{font-size:18px;font-weight:600;line-height:28px;letter-spacing:1px;margin:38px 0 6px}
.texto-legal h2:first-child{margin-top:0}
.texto-legal .dato{margin-top:2px;font-size:14px;line-height:26px}
.texto-legal .dato:first-of-type{margin-top:10px}

/* 3. Cabecera --------------------------------------------------------- */

.barra-superior{background:var(--gris)}
.barra-superior .contenedor{display:flex;align-items:stretch;height:50px}

.datos-cabecera{display:flex}
.datos-cabecera > *{
  display:flex;align-items:center;gap:9px;
  padding:15px 20px;
  font-size:13px;font-weight:500;line-height:20px;color:var(--tenue);
  border-right:1px solid var(--linea);
}
.datos-cabecera > *:first-child{border-left:1px solid var(--linea)}
.datos-cabecera a{color:var(--tenue)}
.datos-cabecera a:hover{color:var(--azul)}
.datos-cabecera .icono{width:15px;height:15px;color:var(--apagado);flex:0 0 auto}

.redes{display:flex;margin-left:auto}
.redes a{
  width:48px;height:49px;
  display:flex;align-items:center;justify-content:center;
  color:var(--apagado);
  border-left:1px solid var(--linea);
}
.redes a:last-child{border-right:1px solid var(--linea)}
.redes a:hover{color:var(--azul)}
.redes .icono{width:14px;height:14px}

.cabecera{padding:26px 0}
.cabecera .contenedor{display:flex;align-items:center;height:50px}

.marca{font-size:34px;font-weight:800;line-height:1;letter-spacing:0;color:var(--azul);white-space:nowrap}
.marca a{color:var(--azul)}

.navegacion{margin-left:auto}
.navegacion ul{display:flex;gap:26px}
.navegacion a{
  display:block;padding:12px 0;
  font-size:16px;font-weight:400;line-height:26px;color:var(--texto);
}
.navegacion a:hover{color:var(--azul)}
.navegacion .activo{color:var(--azul)}

/* el interruptor del menú sólo aparece en móvil (§16) */
.interruptor{
  display:none;margin-left:auto;
  width:46px;height:46px;padding:0;
  background:none;border:1px solid var(--linea);color:var(--azul);
  cursor:pointer;
}
.interruptor span,.interruptor span::before,.interruptor span::after{
  content:"";display:block;position:relative;
  width:20px;height:2px;margin:0 auto;background:currentColor;
}
.interruptor span::before{top:-6px}
.interruptor span::after{top:4px}

/* 4. Portada: carrusel del hero --------------------------------------- */

.hero{position:relative;height:600px;overflow:hidden;background:var(--gris)}
.hero-diapositiva{
  position:absolute;inset:0;
  opacity:0;transition:opacity .9s ease;
  /* `center top`, no `center`: es el `data-bgposition` que llevaba cada
     diapositiva del Revolution Slider. Centrado, el rótulo de la nave se
     queda fuera de cuadro. */
  background-size:cover;background-position:center top;
}
.hero-diapositiva.visible{opacity:1}
/* Sin velo sobre la foto: el original no lo llevaba (comprobado con el estilo
   computado del `slotholder`, sin `background-color` ni `filter`). Ponerle uno
   haría el texto más legible, pero ya no sería la misma pantalla. */

/* El contenido del hero va centrado, como lo colocaba el Revolution Slider:
   el hexágono arriba, el titular, la entradilla y el botón, todo en el eje. */
.hero-texto{
  position:absolute;inset:0;z-index:2;
  width:var(--ancho);margin:0 auto;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
}
.hero-texto[hidden]{display:none}
.hero-texto .hexagono{margin:0 33.49px 30px}
.hero-texto h2{
  margin-bottom:56px;
  font-size:42px;font-weight:800;line-height:44px;letter-spacing:1px;
  color:#fff;text-transform:uppercase;max-width:1170px;
}
.hero-texto p{
  margin-bottom:63px;
  font-size:21px;font-weight:300;line-height:32px;color:#fff;max-width:1080px;
}
/* La llamada del hero es texto suelto, no un botón: en el original no tiene
   ni fondo ni borde, sólo blanco en negrita. */
.hero-enlace{
  font-size:16px;font-weight:800;line-height:1;letter-spacing:.3px;
  color:#fff;text-transform:uppercase;
}
.hero-enlace:hover{color:#fff;text-decoration:underline}

/* Las flechas sólo aparecen al pasar por encima, igual que en el original. */
.hero-flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:100px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);color:#fff;border:0;cursor:pointer;
  font-size:26px;line-height:1;
  opacity:0;transition:opacity .3s ease,background .2s ease;
}
.hero:hover .hero-flecha,.hero-flecha:focus-visible{opacity:1}
.hero-flecha:hover{background:var(--azul)}
.hero-anterior{left:0}
.hero-siguiente{right:0}

/* 5. Cabecera de página interior -------------------------------------- */

.cabecera-pagina{
  background:var(--gris);
  box-shadow:0 1px 4px rgba(0,0,0,.05) inset;
}
.cabecera-pagina .contenedor{
  height:100px;display:flex;align-items:center;justify-content:space-between;
}
.cabecera-pagina h1{
  font-size:26px;font-weight:600;line-height:34px;letter-spacing:1px;
  text-transform:uppercase;color:var(--titulo);
}
.migas{display:flex;gap:8px;font-size:13px;font-weight:400;color:var(--tenue);text-transform:uppercase}
.migas a{color:var(--tenue)}
.migas a:hover{color:var(--azul)}
.migas .actual{color:var(--azul)}

/* 6. Títulos de sección ----------------------------------------------- */

.titulo-seccion{
  font-size:33px;font-weight:300;line-height:44px;letter-spacing:1px;
  color:var(--titulo);text-transform:uppercase;text-align:center;
}
.subtitulo-seccion{
  margin-top:34px;text-align:center;
  font-size:18px;font-weight:300;line-height:32px;color:var(--texto);
}
.raya{width:70px;height:2px;background:var(--azul);margin:26px auto 0}
.raya-corta{width:40px;margin-top:16px}
.raya-izquierda{margin-left:0;margin-right:0}

.titulo-lateral{
  font-size:26px;font-weight:300;line-height:34px;letter-spacing:1px;
  color:var(--titulo);text-transform:uppercase;
}
.titulo-lateral-pequeno{font-size:18px;font-weight:600;line-height:28px;margin-top:44px}

/* la banda de cifras de «Nosotros» */
.cifras{background:var(--gris);padding:54px 0 50px;text-align:center}
.cifra{font-size:46px;font-weight:300;line-height:1;color:var(--apagado)}
.cifra-pie{
  margin-top:18px;
  font-size:15px;font-weight:600;letter-spacing:1px;color:var(--titulo);text-transform:uppercase;
}

/* sección partida: media pantalla de foto, media de texto */
.partido{display:flex;align-items:stretch;background:var(--gris)}
.partido-foto{width:50%;min-height:600px;background-size:cover;background-position:center}
.partido-texto{width:50%;display:flex;align-items:center;padding:60px 0}
.partido-caja{width:585px;padding:0 30px}
.partido-caja .titulo-seccion,.partido-caja .subtitulo-seccion{text-align:center}

/* Las marcas se leen hacia abajo, no de izquierda a derecha: cinco por
   columna, como las ordenaba el original. */
.marcas{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(5,auto);grid-auto-flow:column;
  gap:14px 20px;margin-top:34px;
}
.marcas li{
  position:relative;padding-left:28px;
  font-size:16px;font-weight:300;line-height:26px;color:var(--texto);
}
.marcas li::before{
  content:"";position:absolute;left:2px;top:8px;
  width:11px;height:6px;
  border-left:2px solid var(--azul);border-bottom:2px solid var(--azul);
  transform:rotate(-45deg);
}

h3.destacado{font-size:22px;font-weight:400;line-height:34px;letter-spacing:1px;color:var(--titulo)}
h4.destacado{font-size:18px;font-weight:600;line-height:28px;letter-spacing:1px;color:var(--titulo)}

/* 7. Botones ---------------------------------------------------------- */

.boton{
  display:inline-block;
  padding:19px 30px 20px;
  background:var(--azul);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:1px;line-height:normal;
  text-transform:uppercase;text-align:center;
  border:0;cursor:pointer;
  transition:background .2s ease;
}
.boton:hover{background:#17538f;color:#fff}

.franja-llamada{background:var(--gris);padding:50px 0}
.franja-llamada .contenedor{display:flex;align-items:center;justify-content:center;gap:70px}
.franja-llamada h3{
  font-size:22px;font-weight:400;line-height:34px;letter-spacing:1px;color:var(--titulo);
  text-transform:uppercase;
}

/* 8. Hexágonos de icono ----------------------------------------------- */

.hexagono{
  position:relative;
  width:116px;height:66.97px;
  margin:33.49px auto;
  border-left:2px solid var(--azul);
  border-right:2px solid var(--azul);
}
.hexagono::before,.hexagono::after{
  content:"";position:absolute;z-index:1;
  width:82.02px;height:82.02px;
  left:14.99px;
  transform:scaleY(.5774) rotate(-45deg);
  background:inherit;
}
.hexagono::before{top:-41.01px;border-top:2.83px solid var(--azul);border-right:2.83px solid var(--azul)}
.hexagono::after{bottom:-41.01px;border-bottom:2.83px solid var(--azul);border-left:2.83px solid var(--azul)}
.hexagono .icono{
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;color:var(--azul);
}

.ventajas{margin-top:30px;text-align:center}
.ventajas h4{margin-top:34px;font-size:18px;font-weight:600;line-height:28px;letter-spacing:1px;text-transform:uppercase}
.ventajas p{margin-top:20px;font-size:14px;font-weight:400;line-height:24px}

/* 9. Tarjetas de servicio --------------------------------------------- */

.servicios{display:flex;flex-wrap:wrap;margin:-15px}
.servicios > li{width:33.3333%;padding:15px}
.tarjeta{display:block;position:relative;overflow:hidden;background:#fff}
.tarjeta img{width:100%;transition:transform .5s ease}
.tarjeta:hover img{transform:scale(1.06)}
.tarjeta h4{
  padding:22px 0 0;
  font-size:18px;font-weight:600;line-height:28px;letter-spacing:1px;
  color:var(--titulo);text-transform:uppercase;
}
.tarjeta:hover h4{color:var(--azul)}

/* Las tarjetas de la portada, servicios y novedades van pegadas, con el
   rótulo sobre una banda gris y un filete blanco de separación, tal como
   las servía el tema. */
.servicios-juntos{margin:0;display:flex;flex-wrap:wrap}
.servicios-juntos > li{padding:0;border-right:1px solid #fff;border-bottom:1px solid #fff}
.servicios-juntos > li:nth-child(3n){border-right:0}
.servicios-juntos .tarjeta h4{
  margin:0;padding:20px 22px;background:var(--gris);
  font-size:18px;font-weight:400;letter-spacing:.4px;text-transform:uppercase;
}

/* bloques de «Nuestra compañía»: tres columnas que fluyen */
.bloques{columns:3;column-gap:30px}
.bloque{break-inside:avoid;display:inline-block;width:100%;margin-bottom:44px}
.bloque h4{
  font-size:18px;font-weight:600;line-height:28px;letter-spacing:1px;
  color:var(--titulo);text-transform:uppercase;
}
.bloque-cuerpo{display:flex;gap:22px;align-items:flex-start;margin-top:22px}
.icono-bloque{flex:0 0 auto;width:46px;height:46px;color:var(--azul)}
.bloque p{font-size:16px;font-weight:300;line-height:28px}
.bloque p + p{margin-top:16px}
.bloque strong{font-weight:600;color:var(--titulo)}

/* 10. Carruseles ------------------------------------------------------ */

.carrusel{position:relative;overflow:hidden}
.carrusel-pista{display:flex;transition:transform .5s ease}
.carrusel-pista > li{flex:0 0 auto}

/* Los testimonios van sobre una fotografía oscurecida, a sangre. En el
   WordPress esas dos fotos se cargaban del servidor de demos del autor del
   tema; aquí se sirven las del propio cliente. */
/* Sin velo: la fila del original no tiene color de fondo ni pseudoelemento,
   la fotografía ya es oscura de por sí. Oscurecerla más cambiaría la pantalla. */
.testimonios{
  position:relative;padding:70px 0 66px;
  background-size:cover;background-position:center;
}
.testimonios .contenedor{position:relative;z-index:2}
.testimonios .hexagono{margin-bottom:44px}
/* variante maciza, la que lleva el hero */
.hexagono-relleno{background:var(--azul);border-color:var(--azul)}
.hexagono-relleno::before{border-top-color:var(--azul);border-right-color:var(--azul)}
.hexagono-relleno::after{border-bottom-color:var(--azul);border-left-color:var(--azul)}
.hexagono-relleno .icono{color:#fff}

.hexagono-claro{border-color:rgba(255,255,255,.55)}
.hexagono-claro::before{border-top-color:rgba(255,255,255,.55);border-right-color:rgba(255,255,255,.55)}
.hexagono-claro::after{border-bottom-color:rgba(255,255,255,.55);border-left-color:rgba(255,255,255,.55)}
.hexagono-claro .icono{color:#fff}

.testimonio{text-align:center;padding:0 60px}
.testimonio p{font-size:21px;font-weight:300;font-style:italic;line-height:36px;color:#fff}
.testimonio h6{
  margin-top:34px;padding-top:26px;position:relative;
  font-size:14px;font-weight:600;letter-spacing:1px;color:#fff;text-transform:uppercase;
}
.testimonio h6::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:44px;height:1px;background:rgba(255,255,255,.6);
}

/* Los testimonios se pasan con dos flechas redondas a los lados, como en el
   original. Los puntos quedan sólo para lectores de pantalla y para el móvil,
   donde las flechas no caben. */
.carrusel-flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.65);background:none;color:#fff;
  font-size:22px;line-height:1;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.carrusel-flecha:hover{background:rgba(255,255,255,.16);border-color:#fff}
.carrusel-anterior{left:0}
.carrusel-siguiente{right:0}

.puntos{display:flex;justify-content:center;gap:10px;margin-top:34px}
.puntos button{
  width:11px;height:11px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);background:none;cursor:pointer;
}
.puntos button[aria-current="true"]{border-color:#fff;background:#fff}

.fotos-pie{display:flex;flex-wrap:wrap}
.fotos-pie > li{width:25%;position:relative}
.fotos-pie img{width:100%}
.fotos-pie p{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 20px;
  background:rgba(0,0,0,.45);color:#fff;
  font-size:15px;font-weight:400;letter-spacing:1px;text-transform:uppercase;
}

/* 11. Acordeón -------------------------------------------------------- */

.acordeon{margin-top:40px;border-top:1px solid var(--linea)}
.acordeon > li{border-bottom:1px solid var(--linea)}
.acordeon h4{margin:0}
.acordeon button{
  width:100%;padding:20px 40px 20px 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;
  font-size:16px;font-weight:600;line-height:26px;letter-spacing:1px;
  color:var(--titulo);text-transform:uppercase;
  position:relative;
}
.acordeon button::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:300;color:var(--azul);
}
.acordeon button[aria-expanded="true"]{color:var(--azul)}
.acordeon button[aria-expanded="true"]::after{content:"–"}
.acordeon .panel{padding:0 0 24px}
.acordeon .panel p{font-size:16px;font-weight:300;line-height:28px}
.acordeon .panel p + p{margin-top:16px}
.acordeon .panel[hidden]{display:none}

/* 12. Galería --------------------------------------------------------- */

.galeria{display:flex;flex-wrap:wrap;margin:-10px}
.galeria > li{width:20%;padding:10px}
.galeria a{display:block;position:relative;overflow:hidden;background:#000}
.galeria img{width:100%;transition:transform .5s ease,opacity .3s ease}
.galeria a:hover img{transform:scale(1.08);opacity:.8}

/* 13. Formulario de contacto ------------------------------------------ */

.formulario label{
  display:block;margin-bottom:8px;
  font-size:13px;font-weight:600;letter-spacing:1px;color:var(--titulo);text-transform:uppercase;
}
.formulario input,.formulario textarea{
  width:100%;padding:14px 16px;
  font-family:inherit;font-size:16px;font-weight:300;line-height:26px;color:var(--titulo);
  background:#fff;border:1px solid var(--linea);border-radius:0;
}
.formulario input:focus,.formulario textarea:focus{outline:2px solid var(--azul);outline-offset:-2px}
.formulario textarea{min-height:180px;resize:vertical}
.formulario .campo + .campo{margin-top:20px}
.formulario .campo-alto,.formulario .campo-alto textarea{height:100%}
.formulario textarea{min-height:198px}
.pie-formulario{
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  margin-top:34px;
}
.pie-formulario .nota{margin:0;font-size:16px;font-weight:300;line-height:26px}
.consentimiento{margin-top:26px;font-size:14px;font-weight:300;line-height:24px;color:var(--tenue)}
.consentimiento a{color:var(--azul)}
.consentimiento a:hover{text-decoration:underline}
.texto .dato{font-size:16px;line-height:28px}
.texto .dato + .dato{margin-top:2px}
.fecha-actualizacion{margin-top:44px;font-size:14px;font-style:italic;color:var(--tenue)}
.formulario .nota{margin-top:16px;font-size:15px;font-weight:300;line-height:26px}
.formulario .aviso{
  margin-top:20px;padding:16px 18px;
  font-size:15px;font-weight:300;line-height:24px;
  border-left:3px solid var(--azul);background:var(--gris);
}
.formulario .aviso.error{border-left-color:#b3261e}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 14. Datos de contacto ----------------------------------------------- */

.bloques-contacto{display:flex;flex-wrap:wrap;margin:0 -15px}
.bloques-contacto > div{width:33.3333%;padding:0 15px}
.bloques-contacto h3{
  font-size:22px;font-weight:400;line-height:34px;letter-spacing:1px;color:var(--titulo);
}
.bloque-dato{display:flex;gap:24px;align-items:flex-start;margin-top:26px}
.bloque-dato .hexagono{flex:0 0 auto;width:70px;height:40.4px;margin:24px 0 24px 2px}
.bloque-dato .hexagono::before,.bloque-dato .hexagono::after{width:49.5px;height:49.5px;left:9px}
.bloque-dato .hexagono::before{top:-24.7px}
.bloque-dato .hexagono::after{bottom:-24.7px}
.bloque-dato .hexagono .icono{width:28px;height:28px}
.bloque-dato p{font-size:16px;font-weight:300;line-height:28px}

.mapa-estatico{display:block;margin-top:40px;border:1px solid var(--linea)}
.mapa-estatico img{width:100%}
.pie-mapa{margin-top:14px;font-size:15px;font-weight:300;line-height:26px;text-align:center}

/* 15. Pie ------------------------------------------------------------- */

.pie{padding:30px 0}
.pie .contenedor{border-top:1px solid var(--linea);padding-top:36px;text-align:center}
.pie-legal{font-size:14px;font-weight:400;line-height:24px;color:var(--texto)}
.pie-legal a{color:var(--texto)}
.pie-legal a:hover{color:var(--azul)}
.pie-copyright{margin-top:14px;font-size:14px;font-weight:400;line-height:24px;color:var(--apagado)}
.pie-copyright a{color:var(--texto)}
.pie-copyright a:hover{color:var(--azul)}

.arriba{
  position:fixed;right:24px;bottom:24px;z-index:20;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gris);border:1px solid var(--linea);color:var(--apagado);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.arriba.visible{opacity:1;pointer-events:auto}
.arriba:hover{color:var(--azul);border-color:var(--azul)}

/* 16. Móvil ------------------------------------------------------------
   Aquí es donde esta web se aparta a propósito del WordPress anterior.
   Aquél servía la cabecera clavada a 1170px sin punto de ruptura: en un
   teléfono de 390px el documento medía 1170 de ancho, no había menú de
   ninguna clase y el sitio se navegaba arrastrando de lado. Medido con
   Chrome el 29/08/2026 en las nueve páginas.
   --------------------------------------------------------------------- */

@media (max-width:1229px){
  :root{--ancho:100%}
  .contenedor{width:100%;padding:0 30px}
  .hero-texto{width:100%;padding:0 30px}
}

@media (max-width:1229px){
  .partido-caja{width:100%;max-width:585px;margin:0 auto}
}

@media (max-width:991px){
  .bloques{columns:2}
  .partido{flex-direction:column}
  .partido-foto{width:100%;min-height:340px}
  .partido-texto{width:100%;padding:50px 20px}
  .servicios-juntos > li{width:50%}
  .servicios-juntos > li:nth-child(3n){border-right:1px solid #fff}
  .servicios-juntos > li:nth-child(2n){border-right:0}
  .testimonio{padding:0 40px}
  .servicios > li{width:50%}
  .galeria > li{width:33.3333%}
  .fotos-pie > li{width:50%}
  .bloques-contacto > div{width:100%}
  .bloques-contacto > div + div{margin-top:40px}
  .col-4,.col-6,.col-8{width:100%}
  .col-6 + .col-6,.col-8 + .col-4{margin-top:40px}
  .columnas{gap:0}
  .hero{height:460px}
  .hero-texto h2{font-size:32px;line-height:38px}
  .hero-texto p{font-size:18px;line-height:28px}
}

@media (max-width:767px){
  .barra-superior .contenedor{height:auto;flex-direction:column;padding:0}
  .datos-cabecera{flex-direction:column;width:100%}
  .datos-cabecera > *{
    justify-content:center;
    border:0;border-bottom:1px solid var(--linea);
  }
  .datos-cabecera > *:first-child{border-left:0}
  .redes{margin:0;justify-content:center;width:100%;border-bottom:1px solid var(--linea)}
  .redes a{border:0}

  .cabecera{padding:18px 0}
  .cabecera .contenedor{height:auto}
  .marca{font-size:24px}
  .interruptor{display:block}
  .navegacion{
    display:none;
    position:absolute;left:0;right:0;top:100%;z-index:30;
    margin:0;background:#fff;border-top:1px solid var(--linea);
    box-shadow:0 8px 16px rgba(0,0,0,.08);
  }
  .cabecera{position:relative}
  .navegacion.abierta{display:block}
  .navegacion ul{flex-direction:column;gap:0}
  .navegacion a{
    padding:16px 30px;border-bottom:1px solid var(--linea);
    font-size:15px;letter-spacing:1px;text-transform:uppercase;
  }

  .contenedor{padding:0 20px}
  .hero-texto{padding:0 20px}
  .hero{height:400px}
  .hero-texto h2{font-size:26px;line-height:32px}
  .hero-flecha{width:36px;height:52px}

  .seccion{padding:44px 0}
  .titulo-seccion{font-size:24px;line-height:32px}
  .subtitulo-seccion{margin-top:22px;font-size:16px;line-height:28px}
  .texto p,.texto ul li{font-size:16px;line-height:28px}

  .cabecera-pagina .contenedor{height:auto;padding:22px 20px;flex-direction:column;align-items:flex-start;gap:8px}
  .cabecera-pagina h1{font-size:21px;line-height:28px}

  .servicios > li{width:100%}
  .servicios-juntos > li{width:100%;border-right:0}
  .servicios-juntos > li:nth-child(3n){border-right:0}
  .galeria > li{width:50%}
  .fotos-pie > li{width:100%}
  .bloques{columns:1}
  .marcas{grid-template-columns:repeat(2,1fr)}
  .cifras{padding:36px 0 32px}
  .cifras .col-4 + .col-4{margin-top:30px}
  .cifra{font-size:36px}
  .testimonio{padding:0}
  .testimonios .hexagono{margin-bottom:30px}
  .pie-formulario{flex-direction:column;align-items:stretch;gap:20px}
  .pie-formulario .boton{width:100%}
  .titulo-lateral{font-size:20px;line-height:28px}

  .franja-llamada{padding:36px 0}
  .franja-llamada .contenedor{flex-direction:column;gap:24px;text-align:center}
  .franja-llamada h3{font-size:18px;line-height:28px}

  .testimonio{padding:0}
  .testimonios{padding:44px 0}

  .arriba{right:14px;bottom:14px}
}