/* Aluminios Gisbert - hoja única.
   Las medidas salen de medir el WordPress original con el navegador a 1440,
   981, 768 y 390 px, no de mirarlo: los tamaños de letra, los interlineados y
   los espaciados están copiados de esa medición. Los tres tramos son los que
   usaba el tema: escritorio por encima de 980, tableta de 768 a 980 y teléfono
   por debajo de 768. */

:root{
  --dorado:#a78e6e;
  --tinta:#333;
  --texto:#666;
  --negro:#222;
  --oscuro:#34343c;
  --linea:rgba(0,0,0,.08);
  --contenedor:80%;
}

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

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

body{
  margin:0;
  overflow-wrap:break-word;
  font-family:'Open Sans',Helvetica,Arial,Lucida,sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:1.7;
  color:var(--texto);
  background:#fff;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; border:0 }
a{ color:inherit }

/* El tema parte las palabras que no caben en su caja en vez de dejarlas
   desbordar. Sin esto, un titular de 100 px en una columna estrecha ocupa dos
   lineas donde el original ocupa cuatro. */
h1,h2,h3,h4{ margin:0; padding-bottom:10px; overflow-wrap:break-word;
  font-family:Merriweather,Georgia,'Times New Roman',serif; font-weight:500 }
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--dorado); color:#fff; padding:12px 20px; font-size:14px;
}
.saltar:focus{ left:0 }

.contenedor{ width:var(--contenedor); max-width:1152px; margin:0 auto }

/* ---------- barra superior ---------- */
.barra{
  position:absolute; left:0; right:0; top:0; z-index:60;
  background:var(--dorado); color:#fff;
}
.barra__interior{ display:flex; gap:16px; align-items:center; height:31px }
/* El relleno agranda la zona pulsable a los 24 px que pide la WCAG 2.5.8 sin
   mover nada: la barra mide 31 px y el enlace la ocupa entera. */
.barra__dato{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 0;
  font-size:12px; font-weight:600; line-height:1; color:#fff; text-decoration:none;
}
.barra__dato:hover{ text-decoration:underline }
.icono{ flex:none }

/* ---------- cabecera ---------- */
/* Va superpuesta a la primera sección, como en el original: la página empieza
   debajo de la barra dorada y el hero pasa por detrás del menú.
   Y va **transparente** mientras la página está arriba del todo: el
   rgba(52,52,60,.52) que se mide en el navegador es el del estado fijo, el que
   Divi aplica al hacer scroll. Ponerlo siempre dibuja una banda gris sobre las
   portadas claras que en el original no existe. */
.cabecera{
  position:absolute; left:0; right:0; top:31px; z-index:50;
  height:80px; background:rgba(52,52,60,.5);
}
/* En las páginas de portada clara no lleva velo: ahí el original la deja
   transparente y una banda gris no pinta nada. */
.cabecera--clara{ background:transparent }

/* El color del menú sí se aparta del original, y a propósito. Ahí los enlaces
   van en #d1d1d1 también sobre las portadas claras, donde quedan en 1,3:1 y no
   hay quien los lea. Sobre el hero de la portada -una fotografía oscura- se
   conserva el claro del original; sobre fondo claro se usan tonos oscuros. */
.cabecera--clara .menu__lista a{ color:#5a5a5a }
.cabecera--clara .menu__lista a:hover,
.cabecera--clara .menu__lista a[aria-current="page"]{ color:#6f6047 }
.cabecera--clara .menu__boton{ color:var(--tinta) }
/* El menu acaba 72 px antes del borde: en el original ese hueco lo ocupa el
   icono de la lupa del buscador de WordPress, que aqui no existe porque no
   hay nada que buscar. Se conserva el hueco para que el menu caiga donde
   caia, sin poner un icono que no llevaria a ninguna parte. */
.cabecera__interior{
  display:flex; align-items:center; justify-content:space-between;
  height:80px; width:100%; max-width:1440px; padding:0 72px 0 34px;
}
.cabecera__logo img{ width:48px; height:48px }

/* Los enlaces se apoyan en el borde de abajo de la cabecera, como en el
   original: no están centrados en su altura. */
.menu__lista{ display:flex; align-items:flex-end; height:80px; gap:22px }
.menu__lista a{
  display:block; padding:16px 0 17px;
  font-size:14px; font-weight:400; line-height:1; letter-spacing:0;
  text-transform:uppercase; text-decoration:none; color:#e0e0e0;
}
.menu__lista a:hover{ color:#fff }
.menu__lista a[aria-current="page"]{ color:#fff }

.menu__boton{
  display:none; width:44px; height:44px; padding:0; margin:0;
  background:none; border:0; cursor:pointer; color:#fff;
}
.menu__barras,
.menu__barras::before,
.menu__barras::after{
  display:block; width:22px; height:2px; background:currentColor; margin:0 auto;
}
.menu__barras{ position:relative }
.menu__barras::before,.menu__barras::after{ content:''; position:absolute; left:0 }
.menu__barras::before{ top:-7px }
.menu__barras::after{ top:7px }

/* ---------- piezas comunes ---------- */
.boton{
  display:inline-block;
  padding:12px 50px;
  border:2px solid var(--dorado);
  font-size:16px; font-weight:600; line-height:1.7;
  color:var(--dorado); text-decoration:none; background:none;
  transition:background-color .2s,color .2s;
}
.boton:hover{ background:var(--dorado); color:#fff }
.boton--ancho{ min-width:min(485px,100%) }

.centrado{ text-align:center }

/* Las listas con filete de las tarjetas: cada renglón separado por una línea
   muy tenue, como en el original. */
.lista-filetes li{
  padding:8px 10px;
  border-bottom:1px solid var(--linea);
}
.lista-filetes p{
  font-family:Merriweather,Georgia,serif;
  font-size:16px; font-weight:500; line-height:1.8; color:var(--texto);
  text-align:center;
}
.lista-filetes li:first-child{ border-top:1px solid var(--linea) }

/* ---------- bloque de contacto, al pie de todas las páginas ---------- */
.contacto-pie{ padding:6vw 0 }
.contacto-pie__dato{ text-align:center; margin-bottom:60px }
.contacto-pie__dato:last-child{ margin-bottom:0 }
.contacto-pie h2{
  font-family:'Open Sans',Helvetica,Arial,sans-serif;
  font-size:14px; font-weight:600; line-height:1.4; color:var(--dorado);
  margin-bottom:0;
}
.contacto-pie p{
  font-family:Merriweather,Georgia,serif;
  font-size:24px; font-weight:500; line-height:1.4; color:#000;
}
.contacto-pie p a{ text-decoration:none }
.contacto-pie p a:hover{ color:var(--dorado) }
.contacto-pie__horario{ color:var(--texto) !important }

/* ---------- pie ---------- */
.pie{ background:#333; color:#bbb }
.pie__legales{ display:flex; gap:22px; padding:16px 0; flex-wrap:wrap }
.pie__legales a{
  padding:4px 0; margin:-4px 0;
  font-size:14px; font-weight:600; line-height:1.7; color:#bbb; text-decoration:none;
}
.pie__legales a:hover,
.pie__legales a[aria-current="page"]{ color:#fff }
.pie__firma{ background:var(--negro); color:#909090 }
.pie__firma .contenedor{
  padding:16px 0; font-size:14px; font-weight:700; line-height:1.7;
}
.pie__firma a{
  display:inline-block; padding:3px 0; margin:-3px 0;
  color:inherit; text-decoration:none;
}
.pie__firma a:hover{ color:#bbb }

/* ================= portada ================= */

/* El hero: foto de la fachada acristalada con un velo que oscurece hacia
   abajo, exactamente el degradado que servía el original. */
/* Los rellenos verticales van en vw porque en el original son porcentajes
   del ancho de la ventana: escritos en pixeles cuadran a 1440 y descuadran
   en cuanto la pantalla cambia de tamano. 2vw son los 28,8 px de relleno de
   fila de Divi y 4vw los 57,6 de seccion. */
.hero{
  position:relative;
  overflow:hidden;
  /* El velo del original va de 0 a 0,63, y con 0 arriba el título blanco cae
     sobre el cielo con 1,2:1 de contraste: ilegible. Medido sobre la foto, el
     velo tiene que llegar a 0,55 para que un texto grande alcance el 3:1 que
     pide la WCAG, así que el degradado arranca en 0,45 y termina en 0,72. Es
     el mismo velo azulado, sólo que también arriba. */
  background:
    linear-gradient(rgba(52,52,60,.45) 0%, rgba(52,52,60,.72) 100%),
    url(/assets/hero.webp) center/cover no-repeat;
}
.hero__fila{
  width:87%; max-width:1253px; margin:0 auto;
  padding:2vw 0 110px;
  display:flex; justify-content:flex-end;
}
.hero__caja{ width:47.25%; padding-top:100px }
/* Ancho fijo, mayor que su columna: así el título rompe en dos líneas por donde
   rompe en el original y se desborda hacia los lados por igual, centrado. */
.hero__titulo{
  margin:0 -61.5px;
  font-size:110px; font-weight:300; line-height:1.2; color:#fff; text-align:left;
}
/* En pantalla estrecha el original enseña otro bloque: nombre, reclamo y
   llamada. No es el mismo texto reducido, son módulos distintos. */
.hero__movil{ display:none }

/* Tarjeta blanca que pisa el hero por arriba. El paralelogramo asoma por su
   izquierda y queda por debajo de la tarjeta, como en el original. */
/* flow-root evita que el margen negativo de la tarjeta arrastre a la sección:
   la tarjeta sube 43 px y la sección se queda donde estaba, que es lo que hace
   el original. */
.presentacion{ display:flow-root; padding:4vw 0 0 }
.presentacion .contenedor{ position:relative }
.presentacion__caja{
  position:relative; z-index:1;
  margin-top:-100px;
  padding:calc(4vw + 29px) 100px 80px;
  background:#fff;
  box-shadow:0 10px 80px rgba(0,0,0,.1);
}
.presentacion__deco{
  position:absolute; left:-39px; top:-152px; width:220px; height:auto; z-index:0;
}
.presentacion h2{
  font-size:24px; font-weight:300; line-height:1.6; letter-spacing:.3em;
  text-transform:uppercase; color:var(--dorado); text-align:center;
}
.presentacion h3{
  margin-top:0;
  font-size:18px; font-weight:500; font-style:italic; line-height:1.8;
  color:var(--tinta); text-align:center;
}
.presentacion__boton{ margin-top:calc(2vw - 3px); text-align:center }

/* Los tres motivos, colocados en zigzag y con tamaños distintos: así estaban
   en el original y así se replican. */
.motivos{
  padding:45px 0 0;
  background:url(/assets/deco-banda.webp) 50% 0 no-repeat;
}
.motivos .contenedor{ padding-top:2vw }
.motivo{ margin-bottom:2.75% }
.motivo img{ width:48px; height:48px; margin-bottom:33px }
.motivo h2{
  display:block; width:fit-content; padding-bottom:0;
  font-weight:500; line-height:1.29; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tinta);
}
/* El rótulo es un bloque y el original lo tenía en línea: una caja de bloque
   mide el interlineado entero y una en línea sólo la altura de las letras, así
   que el párrafo baja un poco más cuanto mayor es el rótulo. El hueco de
   debajo se compensa por motivo para que el párrafo caiga donde caía. */
.motivo p{ font-size:16px; line-height:1.8 }
.motivo--uno p{ margin-top:15px }
.motivo--dos p{ margin-top:19px }
.motivo--tres p{ margin:15px auto 0 }

.motivo--uno{ text-align:left }
.motivo--uno h2{ font-size:24px }
.motivo--uno p{ width:400px; max-width:100% }

.motivo--dos{ text-align:right; margin-left:auto }
.motivo--dos h2{ font-size:48px; line-height:1.25; letter-spacing:.1em; margin-left:auto }
.motivo--dos img{ margin-left:auto }
.motivo--dos p{ width:600px; max-width:100%; margin-left:auto }

.motivo--tres{ text-align:center }
.motivo--tres h2{ font-size:28px; margin:0 auto }
.motivo--tres img{ margin-left:auto; margin-right:auto }
.motivo--tres p{ width:400px; max-width:100% }

.motivos__boton{ padding:56px 0 5px; text-align:center }

/* ---------- "Cómo podemos ayudarle" ---------- */
.ayuda{ padding:6vw 0 4vw }
.ayuda h2{
  width:800px; max-width:100%; margin:0 auto;
  font-size:70px; font-weight:300; line-height:1.4; color:var(--tinta); text-align:center;
}
.ayuda--servicios{ padding-bottom:15px }
.ayuda p{
  width:800px; max-width:100%; margin:0 auto;
  font-family:Merriweather,Georgia,serif;
  font-size:16px; line-height:2.2; text-align:center;
}

/* ---------- las tres tarjetas de servicios ---------- */
.tarjetas{ padding:calc(2vw + 142px) 0 18px }
.tarjetas__rejilla{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 5.47% }
/* La altura la marca el contenido mas 160 px de fondo, como en el original:
   con una altura fija, en pantallas estrechas -donde los renglones parten en
   dos lineas- la caja se queda corta. */
.tarjeta{
  position:relative;
  padding:0 20px 160px;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.tarjeta--aluminio{ background-image:url(/assets/serv-aluminio.webp) }
.tarjeta--complementos{ background-image:url(/assets/serv-complementos.webp) }
.tarjeta--pvc{ background-image:url(/assets/serv-pvc.webp) }
.tarjeta__contenido{ margin-top:-80px }
.tarjeta h2{
  padding:8px 0;
  background:#fff;
  font-size:24px; font-weight:500; line-height:1.6; color:var(--tinta); text-align:center;
}
.tarjeta .lista-filetes{ background:#fff }
.tarjeta .lista-filetes li{ border-bottom:1px solid var(--linea) }
.tarjeta .lista-filetes li:first-child{ border-top:0 }
.tarjeta__texto{
  padding:8px 10px 12px;
  background:#fff;
}
.tarjeta__texto p{
  font-family:Merriweather,Georgia,serif;
  font-size:16px; font-weight:500; line-height:1.8; color:var(--texto); text-align:center;
}

.reclamo{ padding:calc(2vw + 9px) 0 calc(9vw + 17px) }
.reclamo__caja{
  padding:9px 0;
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  text-align:center;
}
.reclamo__linea{
  font-size:22px; font-weight:500; line-height:1; color:var(--tinta);
  text-decoration:none;
}

.reclamo__linea:hover{ color:var(--dorado) }
.reclamo .contenedor{ position:relative }
.reclamo__deco{ position:absolute; right:-120px; top:-1px; width:220px }

/* ---------- "Ahorre tiempo, dinero y estrés" ---------- */
/* La franja de flechas es un PNG recortado con una fotografía detrás: por los
   huecos del dibujo se ve la foto, y por encima del dibujo asoma una banda de
   85 px de esa misma foto. Son dos capas, no una imagen. */
.ahorre{ padding:14px 0 0; overflow:hidden }
.ahorre__fila{ display:flex; align-items:flex-start; gap:0; padding-top:2vw }
.ahorre__imagen{ width:40%; position:relative }
.ahorre__imagen__marco{
  width:634px; height:838px; max-width:none; margin-left:-173px;
  padding-top:85px;
  background:url(/assets/deco-flechas-fondo.webp) center/cover no-repeat;
}
.ahorre__imagen img{ width:634px; max-width:none }
.ahorre__texto{
  width:60%;
  min-height:838px;
  padding:12.8vw 0 0 12.4vw;
  background:url(/assets/deco-hexagonos.webp) 0 0/cover no-repeat;
}
.ahorre__texto h2{
  width:37.6vw;
  font-size:70px; font-weight:300; line-height:1.2; color:var(--tinta);
}

/* ---------- "Razones para usar aluminio" ---------- */
.razones{
  padding:12vw 0 8vw;
  background:url(/assets/deco-diagonal.webp) 50% 0 no-repeat;
}
.razones h2{
  width:400px; max-width:100%; margin:2vw auto 0;
  font-size:36px; font-weight:500; line-height:1.4; color:#fff; text-align:center;
}
.razones__caja{
  width:600px; max-width:100%; margin:2vw auto 0;
  padding:2vw 0 0;
  background:#fff;
}
.razones__caja .lista-filetes li{ padding:16px 10px }
.razones__boton{ padding:50px 0 79px; text-align:center }

/* ================= páginas interiores ================= */

/* Cabecera de página: la misma composición en todas, cambia el fondo y de qué
   lado cae el título. */
.portada{
  padding:8vw 0 12vw;
  background-position:50% 0; background-repeat:no-repeat; background-size:cover;
}
.portada--claro{ background-color:#e6e0d6; padding:6vw 0 }
.portada h1{
  font-size:100px; font-weight:300; line-height:1.2; color:var(--tinta); text-align:center;
}
.portada__reclamo{
  width:600px; max-width:100%; margin:2.78% auto 0; padding-bottom:10px;
  font-family:Merriweather,Georgia,serif;
  font-size:24px; font-weight:300; line-height:1.6; letter-spacing:.3em;
  text-transform:uppercase; color:var(--tinta); text-align:center;
}
.portada__boton{ margin-top:2.78%; text-align:center }
/* El título de estas portadas ocupa media caja y rompe en dos líneas: si se
   le deja todo el ancho cabe en una y la portada mide 120 px menos. */
.portada--derecha h1{ width:45.1vw; margin-left:auto; text-align:right }
.portada--servicios h1{ position:relative; z-index:2; width:37.8vw; margin-bottom:-200px }
.portada--servicios > .contenedor{ padding:2vw 0 }
.portada--derecha .portada__reclamo{ margin-right:0; text-align:right }

.portada--quienes{ background-image:url(/assets/deco-cabecera-1.webp) }
.portada--galeria{ background-image:url(/assets/deco-cabecera-1.webp) }
.portada--legal{ background-image:url(/assets/deco-cabecera-2.webp) }
/* En el original el título desborda su fila hacia abajo: la fila mide 108 px y
   el título 250, así que el bloque de familias arranca en 252 aunque el texto
   siga bajando por encima de él. */
.portada--servicios{
  position:relative;
  padding:10vw 0 0;
  background:none;
}
/* La fotografía ocupa el 45% izquierdo, medido en el original a 1440, 768 y 390
   px: siempre el mismo porcentaje. Extenderla a todo el ancho -que fue el error
   de la primera versión- deja el título negro encima de los reflejos del
   cristal y no hay quien lo lea. */
.portada--servicios::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:45%; z-index:0;
  background:url(/assets/portada-servicios.webp) 50% 0/cover no-repeat;
}
.portada--servicios > *{ position:relative; z-index:1 }

/* ---------- servicios: las cuatro familias ---------- */
/* La franja de galones cae sobre la fotografía y no pasa de ella: se dibuja al
   ancho de la fila entera -para que los galones salgan del tamaño que salen en
   el original- pero sólo se ve el 43,7% izquierdo, que es donde acaba la foto.
   Sin ese recorte, los galones blancos se comen el título de la derecha. */
.familias{
  position:relative;
  width:80%; max-width:1152px; margin:0 auto;
  padding:200px 0 0;
}
.familias::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:43.7%; z-index:0;
  background:url(/assets/deco-servicios.webp) 0 50%/228.8% 100% no-repeat;
}
.familias__rejilla{ position:relative; z-index:1 }
.familias__rejilla{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) }
.familias__columna:first-child{ grid-column:1 }
.familia{ padding:40px 40px 50px }
.familia span{
  font-family:Merriweather,Georgia,serif;
  font-size:20px; font-weight:300; line-height:1.6; letter-spacing:.2em;
}
.familia--dorada{ background:var(--dorado); color:#fff }
.familia--blanca{ background:#fff; color:var(--tinta) }
.familia--pvc{ background:#fff; color:var(--dorado) }
.familia--arena{ background:#e6e0d6; color:var(--tinta) }

/* ---------- quiénes somos ---------- */
.tipologia{ display:flex; align-items:stretch }
.tipologia__texto{
  width:47.2%;
  padding:8vw 0 5vw 10vw;
}
.tipologia__texto h2{
  max-width:510px; margin-left:auto;
  font-size:24px; font-weight:300; line-height:1.6; letter-spacing:.3em;
  text-transform:uppercase; color:var(--tinta);
}
.tipologia__texto p{
  max-width:510px; margin-left:auto;
  font-family:Merriweather,Georgia,serif; font-size:16px; line-height:2.2;
}
.tipologia__texto h3{
  max-width:510px; margin:5vw 0 0 auto;
  font-size:65px; font-weight:300; line-height:1.2; color:var(--tinta);
}
/* La columna de la derecha son dos capas: la fotografía de una puerta y, por
   encima, la trama de galones que el tema repite en vertical a su tamaño real
   (600 px de ancho), sin estirarla. */
.tipologia__imagen{
  position:relative;
  width:52.8%;
  min-height:860px;
  background:url(/assets/foto-puerta.webp) 50% 0/cover no-repeat;
}
/* La trama va superpuesta y no aporta altura: con un alto propio estiraba la
   columna a 860 px tambien en el telefono, donde debe medir 350. */
.tipologia__imagen::before{
  content:''; position:absolute; inset:0;
  background:url(/assets/patron-galones.webp) 0 0 repeat-y;
}

.opiniones{
  padding:6vw 0;
  background:url(/assets/deco-quienes.webp) center/cover no-repeat;
}
.opiniones__interior{ width:900px; max-width:100%; margin:0 auto; text-align:center }
.opiniones img{ width:48px; height:48px; margin:0 auto 25px }
.opinion{ display:none }
.opinion[data-activa]{ display:block }
.opinion blockquote{
  width:665px; max-width:100%; margin:0 auto; padding-bottom:10px;
  font-family:Merriweather,Georgia,serif;
  font-size:26px; font-weight:300; line-height:1.6; color:#000;
}
.opinion cite{
  display:block; width:665px; max-width:100%; margin:0 auto;
  font-family:'Open Sans',Helvetica,Arial,sans-serif;
  font-size:15px; font-weight:700; font-style:normal; line-height:2; color:var(--dorado);
}
.opiniones__puntos{ display:flex; gap:0; justify-content:center; margin-top:62px; padding-bottom:calc(2vw + 1px) }
/* El punto sigue midiendo 7 px: el relleno solo agranda lo que se puede
   pulsar, y background-clip evita que el color lo ocupe. */
.opiniones__puntos button{
  width:25px; height:25px; padding:9px; border:0; border-radius:50%;
  background:rgba(167,142,110,.4); background-clip:content-box; cursor:pointer;
}
.opiniones__puntos button[aria-current="true"]{ background:var(--dorado) }

.plantilla{
  padding:6vw 0;
  background:url(/assets/deco-plantilla.webp) center/cover no-repeat;
}
.plantilla__rejilla{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 5.47% }
.plantilla__texto img{ width:80px; height:80px }
.plantilla__texto h2{
  width:500px; max-width:100%; margin-top:42px;
  font-size:48px; font-weight:500; line-height:1.4; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta);
}
.plantilla__texto p{
  width:500px; max-width:100%; margin-top:1px;
  font-family:Merriweather,Georgia,serif; font-size:16px; line-height:2.2;
}

/* ---------- galería ---------- */
.galeria{ padding:6vw 0 }
.galeria__rejilla{
  width:95%; max-width:1368px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:75px;
}
.galeria__rejilla a{ display:block; position:relative; background:#eee }
.galeria__rejilla picture{ display:block }
.galeria__rejilla img{ width:100%; aspect-ratio:400/516; object-fit:cover }
/* El velo al pasar por encima es el del original: dorado translúcido con una
   lupa en medio. */
.galeria__rejilla a::after{
  content:''; position:absolute; inset:0;
  background:rgba(167,142,110,.6) url(/assets/lupa.svg) center/32px no-repeat;
  opacity:0; transition:opacity .3s;
}
.galeria__rejilla a:hover::after,
.galeria__rejilla a:focus-visible::after{ opacity:1 }

/* ---------- contacto ---------- */
.contacto-cabecera__dato{ width:600px; max-width:100%; margin:32px 0 0 auto; text-align:right }
.contacto-cabecera__dato + .contacto-cabecera__dato{ margin-top:59px }
.contacto-cabecera__dato h2{
  font-family:'Open Sans',Helvetica,Arial,sans-serif;
  font-size:14px; font-weight:600; line-height:1.4; color:var(--dorado);
}
.contacto-cabecera__dato p{
  font-family:Merriweather,Georgia,serif;
  font-size:24px; font-weight:500; line-height:1.4; color:#000;
}
.contacto-cabecera__dato--horario p{ color:var(--texto) }
.contacto-cabecera__dato a{ text-decoration:none }
.contacto-cabecera__dato a:hover{ color:var(--dorado) }

/* El original incrustaba aquí un mapa de Google que sólo aparecía si el
   visitante aceptaba las cookies de marketing; sin aceptarlas dejaba 457 px en
   blanco. La copia enseña el mismo sitio con una imagen propia y un enlace: se
   ve siempre, no pide permiso a nadie y no manda la IP del visitante a Google. */
.mapa{ display:block; position:relative; height:457px; overflow:hidden }
.mapa img{ width:100%; height:100%; object-fit:cover }
.mapa__pie{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 24px;
  background:rgba(34,34,34,.86); color:#fff;
  font-size:14px; font-weight:600; text-align:center;
}

/* ---------- texto legal ---------- */
.legal{ padding:6vw 0 }
.legal h2{
  margin:32px 0 12px;
  font-size:22px; font-weight:500; line-height:1.5; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta);
}
.legal h2:first-child{ margin-top:0 }
.legal h3{ margin:24px 0 8px; font-size:18px; font-weight:500; color:var(--tinta) }
.legal p,.legal li{
  font-family:Merriweather,Georgia,serif;
  font-size:16px; line-height:2.1; color:var(--texto);
}
.legal p{ margin-bottom:16px }
.legal ul{ margin:0 0 16px; padding-left:22px; list-style:disc }
.legal li{ margin-bottom:6px }
/* El dorado de la marca da 3,1:1 sobre blanco, por debajo del 4,5 que pide la
   WCAG para texto normal. En los textos legales -que son nuevos, no copiados-
   se usa una version oscurecida del mismo tono, que da 5,3:1. En el resto de
   la web se conserva el color del original para no cambiarle el aspecto. */
.legal a{ color:#6f6047 }
.legal .tabla{ overflow-x:auto; margin-bottom:16px }
.legal table{ border-collapse:collapse; width:100%; min-width:520px }
.legal th,.legal td{
  padding:10px 12px; border:1px solid var(--linea);
  font-family:'Open Sans',Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.6; text-align:left; vertical-align:top;
}
.legal th{ background:#f7f5f2; font-weight:600; color:var(--tinta) }

/* ---------- 404 ---------- */
.error{ padding:120px 0 100px; text-align:center }
.error h1{ font-size:100px; font-weight:300; line-height:1.3; color:var(--tinta) }
.error p{ margin:24px 0 32px; font-family:Merriweather,Georgia,serif; font-size:16px; line-height:2 }


/* ================= tableta y teléfono: hasta 980 ================= */
/* Por debajo de 980 el tema deja de usar porcentajes y pasa a medidas fijas:
   50 px de relleno de sección, 30 de fila y un hero de 900 px de alto. Los
   tamaños de letra están medidos uno a uno en el original a 768 px, porque los
   reduce con proporciones distintas según el módulo (el h1 baja a 0,65 y el
   reclamo de portada sólo a 0,9). */
@media (max-width:980px){
  .menu{
    position:absolute; left:0; right:0; top:80px;
    display:none;
    padding:5%;
    background:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,.1);
  }
  .menu[data-abierto]{ display:block }
  .menu__lista{ display:block; height:auto }
  .menu__lista a{
    padding:10px 5%;
    border-bottom:1px solid rgba(0,0,0,.03);
    color:var(--tinta); font-size:14px; font-weight:600;
  }
  .menu__lista li:last-child a{ border-bottom:0 }
  .menu__lista a:hover,
  .menu__lista a[aria-current="page"]{ color:var(--dorado) }
  .menu__boton{ display:block; color:var(--tinta) }
  .cabecera__interior{ width:80%; max-width:none; padding:0 }
  .cabecera__logo img{ width:43px; height:43px }

  /* El hero cambia de contenido, no sólo de tamaño: el original oculta el
     titular grande y enseña nombre, reclamo y llamada. */
  .hero{ height:900px; padding:0; display:flex; align-items:center }
  .hero__fila{ width:80%; max-width:none; padding:0; display:block }
  .hero__caja{ display:none }
  /* El bloque del hero movil no ocupa toda la columna: deja 55 px a cada
     lado, y por eso el nombre parte en dos lineas en pantallas estrechas. */
  /* 45 px a cada lado, no 55: con 55 el bloque se queda en 202 px útiles,
     "ALUMINIOS" no cabe a 40 px y el navegador la parte por la mitad, que es
     como salía "ALUMINIO / S GISBERT". */
  .hero__movil{ display:block; padding:0 45px; text-align:center }
  .hero__movil .nombre{ overflow-wrap:normal }
  /* El original pinta estos tres textos en gris oscuro sobre la misma
     fotografía, donde se pierden del todo. Aquí van en blanco sobre el velo. */
  .hero__movil .nombre{
    display:block;
    font-family:'Open Sans',Helvetica,Arial,sans-serif;
    font-size:40px; font-weight:500; line-height:1; color:#fff;
    text-decoration:none;
  }
  .hero__movil .reclamo{
    display:block; margin-top:19px;
    font-size:15px; font-weight:700; line-height:1.7; color:#fff;
  }
  .hero__movil .llamada{
    display:inline-block; margin-top:81px;
    padding:10px 24px; border:2px solid rgba(255,255,255,.85);
    font-size:20px; font-weight:500; line-height:1.7; color:#fff;
    text-decoration:none;
  }
  .hero__movil .llamada:hover{ background:rgba(255,255,255,.15) }

  .presentacion{ padding:50px 0 0 }
  .presentacion__caja{ padding:30px 30px 80px }
  .presentacion__deco{ display:none }
  .presentacion h2{ font-size:18px }
  .presentacion h3{ font-size:16px }
  .presentacion__boton{ margin-top:26px }
  .boton--ancho{ min-width:0 }

  .motivos .contenedor{ padding-top:30px }
  .motivo{ text-align:center; margin-bottom:27px }
  .motivo img{ margin:0 auto 33px }
  .motivo h2{ font-size:22px !important; line-height:1.29; margin:0 auto }
  .motivo p{ width:400px !important; max-width:100%; margin-left:auto; margin-right:auto }
  .motivos__boton{ padding:56px 0 5px }

  .ayuda{ padding:80px 0 }
  .ayuda--servicios{ padding-bottom:15px }
  .ayuda h2{ font-size:40px; line-height:1.4 }
  .ayuda p{ font-size:14px; line-height:2.2 }

  .tarjetas{ padding:215px 0 18px }
  .tarjetas__rejilla{ grid-template-columns:1fr; gap:98px 0 }
  .tarjeta h2{ font-size:18px }
  .tarjeta .lista-filetes p,.tarjeta__texto p{ font-size:14px; line-height:1.8 }

  .reclamo{ padding:39px 0 133px }
  .reclamo__linea{ font-size:22px; line-height:1 }
  .reclamo__deco{ position:static; width:120px; margin:0 0 0 auto }

  .ahorre{ padding:14px 0 0 }
  .ahorre__fila{ display:block; padding-top:30px }
  .ahorre__imagen{ width:100% }
  .ahorre__imagen__marco{ width:707px; height:auto; max-width:none; margin:0 0 0 -15px }
  .ahorre__imagen img{ width:707px; max-width:none; margin:0 }
  .ahorre__texto{ width:100%; min-height:0; padding:60px 10% 80px }
  .ahorre__texto h2{ width:auto; font-size:40px; line-height:1.2 }

  .razones{ padding:12vw 0 8vw }
  .razones h2{ margin-top:30px; font-size:30px; line-height:1.4 }
  .razones__caja{ width:100%; margin-top:30px; padding-top:30px }
  .razones__caja .lista-filetes p{ font-size:14px }

  /* La cabecera acaba en y=111 y va superpuesta, así que el título necesita
     sitio por debajo. El original no se lo da y en el teléfono "Quiénes Somos"
     sale pisando el logotipo y el botón del menú; aquí se baja lo justo. */
  .portada{ padding:calc(6vw + 100px) 0 calc(10vw + 30px) }
  .portada h1{ width:auto; font-size:65px; line-height:1.2; text-align:center }
  /* Estos dos siguen alineados a la derecha, como en el original: en Servicios
     es lo que mantiene el título fuera de la fotografía de la izquierda. */
  .portada--derecha h1{ width:auto; font-size:65px; line-height:1.2; text-align:right }
  .portada__reclamo{ font-size:18px; line-height:1.6; text-align:center; margin:31px auto 0 }
  .portada__boton{ margin-top:30px }
  .portada--claro{ padding:80px 0 }
  .portada--servicios{ padding:calc(10vw + 76px) 0 0 }
  /* El título se queda en la mitad derecha para no caer sobre la fotografía:
     con todo el ancho, a 768 cabe en una línea y se mete encima del cristal. */
  .portada--servicios h1{ width:55%; margin:0 0 0 auto }
  .portada--servicios > .contenedor{ padding:30px 0 }

  .familias{ width:80%; padding:30px 0 0 }
  .familias__rejilla{ grid-template-columns:1fr }
  .familia span{ font-size:18px }

  .tipologia{ display:block }
  .tipologia__texto{ width:100%; padding:8vw 10% 5vw }
  .tipologia__texto h2{ max-width:none; font-size:18px }
  .tipologia__texto p{ max-width:none; font-size:14px }
  .tipologia__texto h3{ max-width:none; margin-top:44px; font-size:40px; line-height:1.2 }
  .tipologia__imagen{ width:100%; min-height:500px; margin-top:31px }

  .opiniones{ padding:80px 0 }
  .opiniones__interior{ width:80% }
  .opiniones img{ margin-bottom:30px }
  .opinion blockquote{ width:92.5%; font-size:22px }
  .opinion cite{ width:92.5% }
  .plantilla{ padding:80px 0 }
  .plantilla__rejilla{ grid-template-columns:1fr; gap:40px 0 }
  .plantilla__texto h2{ width:auto; font-size:36px }
  .plantilla__texto p{ width:auto; font-size:14px }

  .galeria{ padding:80px 0 }
  .galeria__rejilla{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:55px 5.57% }

  .contacto-cabecera__dato{ width:auto; text-align:center; margin:32px auto 0 }
  .contacto-cabecera__dato + .contacto-cabecera__dato{ margin-top:37px }
  .contacto-pie{ padding:80px 0 }
  .contacto-pie__dato{ margin-bottom:39px }
  .contacto-pie p{ font-size:20px }

  .pie__legales{ justify-content:center }
  .pie__firma .contenedor{ text-align:center }

  .legal{ padding:80px 0 }
  .legal h2{ font-size:20px }
  .legal p,.legal li{ font-size:14px; line-height:2 }
  .error h1{ font-size:65px }
}

/* ================= teléfono: hasta 767 ================= */
@media (max-width:767px){
  .barra__interior{ height:auto; justify-content:center; flex-wrap:wrap; gap:0 16px }

  .hero__movil .nombre{ font-size:40px; line-height:1.2 }
  .hero__movil .reclamo{ font-size:14px }

  .presentacion__caja{ padding:30px 20px }
  .presentacion h2{ font-size:16px }
  .presentacion h3{ font-size:14px }

  .motivo h2{ font-size:16px !important }
  .motivo p{ width:100% !important; font-size:16px }

  .ayuda h2{ font-size:30px }
  .ayuda p{ font-size:14px }

  .tarjeta h2{ font-size:16px }
  .tarjetas__rejilla{ gap:117px 0 }
  .reclamo__linea{ font-size:22px; line-height:1.1 }
  .reclamo__deco{ width:80px }

  .ahorre__imagen__marco{ width:359px; height:auto; margin:0 0 0 -8px }
  .ahorre__imagen img{ width:359px }
  .ahorre__texto{ padding:50px 8% 60px }
  .ahorre__texto h2{ font-size:30px; line-height:1.2 }

  .razones{ padding:35vw 0 20vw }
  .razones h2{ font-size:26px; line-height:1.4 }

  .portada h1,.portada--derecha h1{ font-size:42px; line-height:1.2 }
  .portada--servicios::before{ width:45% }
  .portada__reclamo{ font-size:16px }

  .familia{ padding:24px 24px 34px }
  .familia span{ font-size:16px }

  .tipologia__texto h2{ font-size:16px }
  .tipologia__texto h3{ font-size:30px; line-height:1.2 }
  .tipologia__imagen{ min-height:350px }

  .opinion blockquote{ font-size:18px }
  .opiniones img{ margin-bottom:30px }
  .plantilla__texto h2{ font-size:24px }

  /* En el teléfono, una columna y la foto entera: el original deja de recortar
     y cada imagen conserva su proporción. */
  .galeria__rejilla{ grid-template-columns:1fr; gap:42px }
  .galeria__rejilla img{ aspect-ratio:auto; object-fit:contain }

  .contacto-pie p{ font-size:16px }
  .mapa{ height:320px }

  .legal h2{ font-size:18px }
  .error h1{ font-size:42px }
}

/* El adorno del reclamo asoma 120 px por la derecha del contenedor; en
   pantallas estrechas eso se saldría de la ventana. */
@media (max-width:1200px) and (min-width:981px){
  .reclamo__deco{ right:0 }
}

/* En pantallas muy estrechas el nombre del hero, a 40 px, se sale. */
@media (max-width:360px){
  .hero__movil{ padding:0 30px }
}


@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}