/* materialesdeconstruccionalfredo.com — hoja única del sitio estático. * * Sustituye a 1,4 MB de CSS que el WordPress repartía entre el tema Divi, sus * módulos y tres plugins. Cada medida de aquí sale de medir la web viva con el * navegador (bin/medir.py), no de mirarla: tipos, interlineados, anchos de * columna, sombras y puntos de ruptura. * * Los tres anchos de referencia son 1440, 768 y 390. Divi cambia de tamaños en * 980 px (tableta) y en 767 px (móvil), y aquí se respetan esos dos cortes. */ /* ---------------------------------------------------------------- variables */ :root { --naranja: #f28928; /* menú, iconos y botones sobre fondo claro */ --dorado: #e09900; /* barra superior */ --azul: #22577a; /* bandas de sección y texto de los botones */ --tinta: #111; /* titulares sobre claro */ --texto: rgba(0, 0, 0, .64); --gris: #666; --pie: #222; --titular: "Abril Fatface", Georgia, "Times New Roman", serif; --cuerpo: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --interfaz: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sombra-tarjeta: 0 24px 72px -12px rgba(0, 0, 0, .12); --alto-cabecera: 125px; /* 31 de la barra + 94 de la cabecera */ /* Divi encoge el aire de los héroes por un factor fijo al cambiar de tamaño: 115,2 -> 61,44 -> 31,2. Sale 0,5333 y 0,2708, y vale para los cuatro héroes del sitio, así que va aquí una sola vez. */ --esc: 1; } /* -------------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding-top: var(--alto-cabecera); font: 500 16px/1.7 var(--cuerpo); color: var(--gris); background: #fff; overflow-wrap: break-word; } img { max-width: 100%; height: auto; border: 0; display: block; } a { color: inherit; } h1, h2, h3, h4 { margin: 0 0 20px; font-family: var(--titular); font-size: 50px; line-height: 60px; font-weight: 400; /* Abril Fatface sólo tiene el 400; Divi pedía 500 y el navegador servía éste igualmente */ color: var(--tinta); } p { margin: 0 0 16px; } p:last-child { margin-bottom: 0; } .oculto-visualmente { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :where(a, button, summary):focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; } /* --------------------------------------------------------------- contenedor */ /* El de Divi: 80 % del ancho con tope de 1400 px. */ .caja { width: 80%; max-width: 1400px; margin: 0 auto; } /* La fila de las cuatro tarjetas de contacto ocupa todo el ancho hasta 1400, con 20 px de aire a cada lado: a 1440 sale exactamente 1400 desde x=20. */ .caja-ancha { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px; } .seccion { padding: 57.6px 0; } /* Cada bloque de contenido lleva su propio aire, como las filas de Divi. */ .fila { padding-top: 28.8px; padding-bottom: 28.8px; } .seccion-azul { background: var(--azul); } .seccion-azul :is(h1, h2, h3, h4, p) { color: #fff; } /* ------------------------------------------------------------------ iconos */ .icono { fill: currentColor; display: inline-block; vertical-align: -.125em; } /* ----------------------------------------------------------------- cabecera */ .barra-superior { position: fixed; inset: 0 0 auto; z-index: 60; height: 31px; background: var(--dorado); font: 600 12px/12px var(--interfaz); color: #fff; } .barra-superior .caja { display: flex; align-items: center; height: 100%; gap: 20px; } .barra-superior a { text-decoration: none; } .barra-superior a:hover { text-decoration: underline; } .barra-superior .icono { font-size: 12px; margin-right: 4px; } .cabecera { position: fixed; inset: 31px 0 auto; z-index: 55; height: 94px; background: #fff; box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1); } .cabecera .caja { display: flex; align-items: center; height: 100%; gap: 24px; } /* El menú no va centrado en la cabecera: cuelga a 40 px del borde de arriba, que es donde lo pone Divi. */ .menu { align-self: flex-start; padding-top: 40px; } .marca { flex: none; } .marca img { width: 294px; height: 75px; object-fit: contain; } /* La foto que acompaña a un texto ocupa su columna entera: a 1440 son 544 px y al apilarse pasa a los 614 que tiene la columna. */ .foto-columna { width: 100%; height: auto; } .menu { margin-left: auto; } .menu ul { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; } .menu a { font: 400 16px/14px var(--interfaz); text-transform: uppercase; color: var(--naranja); text-decoration: none; padding: 20px 0; display: inline-block; } .menu a:hover { opacity: .7; } .menu [aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; } .abrir-menu { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--dorado); font-size: 32px; line-height: 1; } /* ---------------------------------------------------------------- portada */ .heroe { position: relative; padding: calc(115.2px * var(--esc)) 0 calc(172.8px * var(--esc)); background: linear-gradient(rgba(0, 0, 0, .37) 0%, rgba(0, 0, 0, .47) 100%), var(--foto, none) center / cover no-repeat; color: #fff; } .heroe :is(h1, h2, h3, h4, p) { color: #fff; } .heroe-columna { max-width: 747px; } .heroe-columna p { max-width: 747px; } .heroe h4, .antetitulo { font: 500 14px/19.6px var(--cuerpo); text-transform: uppercase; letter-spacing: .5px; color: #fff; margin: 0 0 20px; } .heroe h1 { font-size: 72px; line-height: 82.8px; margin: 0 0 41px; } .heroe-columna p, .heroe .rejilla p { margin: 0 0 32px; } .heroe-columna p:last-child, .heroe .rejilla p:last-child { margin-bottom: 0; } .heroe p { font-size: 16px; line-height: 28px; } /* El corte diagonal que Divi pinta al pie del hero. El original lo hace con un SVG de fondo; aquí es la misma geometría con un clip, que no pesa nada. */ .corte-diagonal::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; /* El original mide 144 px de alto a 1440, 76,8 a 768 y 39 a 390: siempre el 10 % del ancho. Se consigue con un relleno en porcentaje, que se resuelve contra el ancho del contenedor. Con `aspect-ratio` el navegador móvil resolvía primero el alto y estiraba la página a 960 px de ancho. */ height: 0; padding-bottom: 10%; background: #fff; clip-path: polygon(100% 0, 0 100%, 100% 100%); } /* El hero de servicios lleva el velo más oscuro; el del reclamo final, plano. */ .heroe[style*="--velo: 1"] { background-image: linear-gradient(rgba(0,0,0,.6) 0%, rgba(0,0,0,.9) 100%), var(--foto); } .heroe[style*="--velo: 2"] { background-image: linear-gradient(rgba(0,0,0,.75) 0%, rgba(0,0,0,.75) 100%), var(--foto); } /* El hero de servicios recorta por abajo menos que el de la portada, y el reclamo final no recorta nada. */ .heroe-corto { padding: calc(115.2px * var(--esc)) 0 calc(43.2px * var(--esc)); } .heroe-cta { padding: calc(72px * var(--esc)) 0; } /* Esta foto conserva sus 600 px de alto en los tres tamaños. */ .foto-lateral { width: 444px; max-width: 100%; height: 600px; object-fit: cover; margin: 0 auto; border-radius: 2px; } /* Hero de la galería: fondo blanco, texto oscuro y la foto recortada por la misma máscara de franjas diagonales que usaba Divi. */ .heroe-claro { position: relative; padding: calc(115.2px * var(--esc)) 0; background: var(--foto) center / cover no-repeat; overflow: hidden; } .heroe-claro::after { content: ""; position: absolute; inset: -1px; background: url("/assets/img/mascara-galeria.svg?v=ef597c24a8") center / calc(100% + 2px) calc(100% + 2px) no-repeat; pointer-events: none; } .heroe-claro .caja { position: relative; z-index: 2; } .heroe-claro h1 { font-size: 72px; line-height: 82.8px; color: #0e0c19; margin: 0 0 41px; } .heroe-claro p { font-size: 16px; line-height: 28px; color: #3c3a47; } @media (min-width: 981px) { .heroe-claro .columna { max-width: 544px; } } .antetitulo-azul { color: var(--azul); text-align: center; } .antetitulo-naranja { color: var(--naranja); text-align: center; } .antetitulo { font: 500 14px/19.6px var(--cuerpo); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 20px; } /* ----------------------------------------------------------------- botones */ .boton { display: inline-flex; align-items: center; gap: 0; padding: 12px 24px; border: 0; border-radius: 100px; background: #fff; color: var(--azul); font: 700 14px/23.8px var(--cuerpo); text-decoration: none; transition: gap .2s ease, background-color .2s ease; } .boton .icono { font-size: 22.4px; width: 0; opacity: 0; transition: width .2s ease, opacity .2s ease; } .boton:hover { background: #f6f6f6; gap: 8px; } .boton:hover .icono { width: 1em; opacity: 1; } .boton-naranja { background: var(--naranja); color: #fff; } .boton-naranja:hover { background: #dd7715; } /* ----------------------------------------------------------------- tarjetas */ .rejilla { display: grid; gap: 63px; } .rejilla-3 { grid-template-columns: repeat(3, 1fr); } .rejilla-4 { grid-template-columns: repeat(4, 1fr); gap: 41.7px; } .rejilla-2 { grid-template-columns: repeat(2, 1fr); gap: 64px; } /* Reclamo final de la portada: titular a la izquierda, botón a la derecha, en la misma proporción 2/3 - 1/3 que usa el original. */ .rejilla-cta { grid-template-columns: 747fr 342fr; align-items: center; gap: 63px; } .cta-boton { margin: 0; text-align: right; } .tarjeta { background: #fff; padding: 30px; border-radius: 6px; box-shadow: var(--sombra-tarjeta); text-align: center; } /* En bloque: como texto en línea, la caja de línea añade unos píxeles y las tarjetas salen más altas que las del original. */ .tarjeta .icono, .prestacion .icono, .opinion .icono { display: block; } .tarjeta .icono { margin: 0 auto; } .tarjeta .icono { font-size: 32px; color: var(--azul); } .tarjeta h3, .tarjeta h4 { font-family: var(--titular); font-size: 18px; line-height: 25.2px; color: var(--tinta); margin: 30px 0 10px; } .tarjeta p { font-size: 16px; line-height: 28px; color: var(--texto); } /* Las cuatro de contacto llevan el icono en naranja. */ .tarjeta-contacto .icono { color: var(--naranja); } .tarjeta-contacto a { color: var(--azul); font-size: 14px; } /* Los teléfonos son enlaces para poder llamar desde el móvil, pero se pintan como texto: en el original no eran enlaces y no deben parecerlo. */ .tarjeta-contacto a[href^="tel:"] { color: inherit; font-size: inherit; text-decoration: none; } /* ------------------------------------------------------- listado numerado */ .servicios-numerados { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; } .servicios-numerados .numero { font: 500 16px/22.4px var(--cuerpo); text-transform: uppercase; color: #fff; margin: 0 0 19.6px; } .servicios-numerados h3 { font-size: 32px; line-height: 41.6px; color: #fff; margin: 0 0 20px; } .servicios-numerados li { list-style: none; margin: 0; } .servicios-numerados ol { margin: 0; padding: 0 0 10px; } /* --------------------------------------------------------------- opiniones */ .opinion .estrellas { color: var(--azul); font-size: 24px; line-height: 42px; letter-spacing: 4px; margin: 0 0 32px; } .opinion .texto { font: 700 18px/31.5px var(--cuerpo); color: #0e0c19; margin: 0 0 9px; } .opinion .firma { font-weight: 500; color: var(--texto); } .opinion .icono { font-size: 32px; color: var(--naranja); } /* ------------------------------------------------------------ blurbs planos */ .prestaciones { display: grid; gap: 57.6px 63px; } .prestaciones-4 { grid-template-columns: repeat(4, 1fr); column-gap: 64px; } .prestaciones-3 { grid-template-columns: repeat(3, 1fr); } .prestaciones-2 { grid-template-columns: repeat(2, 1fr); } .prestacion .icono { font-size: 32px; color: var(--naranja); } .prestacion h3 { font-family: var(--titular); font-size: 18px; line-height: 25.2px; margin: 30px 0 10px; } .prestacion p { font-size: 16px; line-height: 28px; color: var(--texto); } /* La galería alinea icono y texto en horizontal. */ .prestacion-lateral { display: flex; align-items: flex-start; gap: 15px; } .prestacion-lateral > .icono { flex: none; font-size: 40px; } .prestacion-lateral > div { flex: 1; min-width: 0; } .prestacion-lateral h3 { margin-top: 0; } /* ------------------------------------------------------------------- mapa */ .banda-mapa { display: block; position: relative; line-height: 0; } .banda-mapa img { width: 100%; height: 458px; object-fit: cover; object-position: center; } .banda-mapa .aviso { position: absolute; top: 16px; right: 24px; background: rgba(255, 255, 255, .95); color: var(--azul); font: 700 13px/1 var(--cuerpo); padding: 10px 16px; border-radius: 100px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .banda-mapa:hover .aviso { background: #fff; } /* ---------------------------------------------------------------- galería */ .mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 57.6px 41px; } .mosaico img { width: 100%; height: auto; border-radius: 2px; } /* La fila de la galería deja un 3 % a cada lado en los tres tamaños: 43 px a 1440, 23 a 768 y 12 a 390. */ .caja-mosaico { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: 3%; padding-right: 3%; } /* --------------------------------------------------------------- legales */ .legal { padding: 100px 0; } .legal .caja { max-width: 900px; } .legal h1 { font-size: 50px; line-height: 60px; margin-bottom: 40px; } .legal h2 { font-family: var(--cuerpo); font-size: 20px; line-height: 30px; font-weight: 700; color: var(--azul); margin: 42px 0 12px; } .legal h3 { font-family: var(--cuerpo); font-size: 17px; line-height: 27px; font-weight: 700; color: var(--tinta); margin: 28px 0 8px; } .legal p, .legal li { font-size: 16px; line-height: 28px; color: var(--texto); } .legal ul, .legal ol { padding-left: 22px; margin: 0 0 14px; } .legal li { margin-bottom: 6px; } .legal .ficha { background: #f7f7f7; border-left: 4px solid var(--naranja); padding: 20px 24px; margin: 0 0 24px; } .legal .ficha p { margin: 0 0 4px; } .legal table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; } .legal th, .legal td { border: 1px solid #e2e2e2; padding: 10px 12px; text-align: left; vertical-align: top; } .legal th { background: #f7f7f7; color: var(--tinta); font-family: var(--cuerpo); } .legal a { color: var(--azul); } .legal .fecha { font-size: 14px; color: #888; } /* -------------------------------------------------------------------- pie */ .pie { background: var(--pie); } .pie-abajo { background: rgba(0, 0, 0, .32); padding: 15px 0 5px; } .pie-abajo p { font: 500 14px/27.2px var(--interfaz); color: #bbb; margin: 0; } .pie-abajo a { color: #bbb; text-decoration: none; } .pie-abajo a:hover, .pie-abajo a:focus-visible { color: #fff; text-decoration: underline; } /* --------------------------------------------------------------- whatsapp */ .whatsapp { position: fixed; right: 15px; bottom: 15px; z-index: 70; width: 50px; height: 50px; display: grid; place-items: center; background: #25d366; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); color: #fff; } .whatsapp svg { width: 36px; height: 36px; fill: currentColor; } /* =============================================================== 980 px === */ @media (max-width: 980px) { :root { --alto-cabecera: 110px; } .cabecera { height: 80px; } .marca img { width: 169px; height: 43px; } /* Divi baja el cuerpo de 16/28 a 15/26,25 en tableta y a 14/24,5 en móvil. */ body, p, li { font-size: 15px; line-height: 26.25px; } /* Y cambia el aire: las secciones pasan de 57,6 a 50 y las filas de 28,8 a 30. Además, al apilarse, cada módulo deja 30 px por debajo. */ .seccion { padding: 50px 0; } .fila { padding-top: 30px; padding-bottom: 30px; } .heroe-columna > p:last-child, .heroe .rejilla p:last-child { margin-bottom: 30px; } .menu { display: none; } .abrir-menu { display: block; } /* El desplegable: lo abre bin/../plantilla/menu.js poniendo una clase en . Sin JavaScript el