/* Arretaz Soluciones Informáticas. Sigue la línea gráfica de la propuesta en Eleventy: verdes profundos sobre un fondo crema, Asap, cabeceras con foto bajo una capa verde, tarjetas de servicio con foto y una cabecera que se aclara al bajar. Lo nuevo: el soporte remoto siempre a la vista (botón en la cabecera y botón flotante) y cinco servicios como protagonistas. Sin JavaScript todo se ve y se puede usar: la clase «js» de activa solo lo que necesita el script (cabecera transparente, menú a pantalla completa, aparición al desplazarse). */ @font-face { font-family: 'Asap'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fuentes/asap-latin.woff2) format('woff2'); } :root { /* La paleta sale del logo: del carbón (#283f3d) al petróleo (#216463) y de ahí a la salvia (#7a9a72). El único color vivo, --accion, es para el soporte remoto */ --verde-900: #17332f; --verde-700: #216463; --verde-500: #7a9a72; --verde-300: #b7cdae; --verde-100: #e3ece0; --verde-50: #f1f6ee; --accion: #4fd6a8; --accion-osc: #0d2925; --noche: #0f1f1d; --pie: #0a1513; --crema: #faf8f5; --arena: #eef1ec; --blanco: #fff; --gris-700: #374151; --gris-600: #4b5563; --gris-300: #d1d5db; --texto-fuente: 'Asap', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --cab: 4.5rem; --ancho: 1240px; --ancho-texto: 44rem; --lateral: clamp(1rem, 4vw, 2rem); --suave: cubic-bezier(0.16, 1, 0.3, 1); --sombra: 0 1px 4px rgba(9, 22, 20, 0.06), 0 8px 24px rgba(9, 22, 20, 0.07); } *, *::before, *::after { box-sizing: border-box; } html { font-size: 106.25%; /* 17 px: todo lo que va en rem crece un punto */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 1rem); } body { margin: 0; background: var(--crema); color: var(--noche); font: 400 1.0625rem/1.75 var(--texto-fuente); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } body.menu-abierto { overflow: hidden; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { text-wrap: balance; } :focus-visible { outline: 3px solid var(--verde-500); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--verde-300); color: var(--verde-900); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .saltar { position: fixed; left: 1rem; top: -4rem; z-index: 2000; background: var(--verde-900); color: var(--blanco); padding: .6rem 1rem; border-radius: 0 0 8px 8px; transition: top .2s; } .saltar:focus { top: 0; } .contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--lateral)); margin-inline: auto; padding-inline: var(--lateral); } .contenedor--texto { max-width: calc(var(--ancho-texto) + 2 * var(--lateral)); } /* ------------------------------------------------------------------ Cabecera */ .cabecera { position: fixed; inset: 0 0 auto 0; z-index: 1000; color: var(--noche); transition: color .35s ease; } /* El fondo va en un pseudoelemento: un backdrop-filter en la propia cabecera haría que el menú a pantalla completa (position: fixed) se midiera contra ella y no contra la ventana */ .cabecera::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(250, 248, 245, 0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(13, 27, 42, 0.08); transition: opacity .35s ease; } .cabecera__barra { max-width: calc(var(--ancho) + 2 * var(--lateral)); margin-inline: auto; padding: 0 var(--lateral); min-height: var(--cab); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; } .marca { display: block; position: relative; z-index: 1101; } .marca img { height: 32px; width: auto; } .marca__claro { display: none !important; } /* Con JavaScript, la cabecera es transparente sobre la foto hasta que se baja */ .js .cabecera:not(.cabecera--fondo) { color: var(--blanco); } .js .cabecera:not(.cabecera--fondo)::before { opacity: 0; } .js .cabecera:not(.cabecera--fondo) .marca__claro, .js body.menu-abierto .marca__claro { display: block !important; } .js .cabecera:not(.cabecera--fondo) .marca__oscuro, .js body.menu-abierto .marca__oscuro { display: none; } .menu-boton { display: none; } .js .menu-boton { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; z-index: 1101; color: inherit; padding: 0; } .menu-boton__rayas, .menu-boton__rayas::before, .menu-boton__rayas::after { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .4s var(--suave), opacity .2s, background .3s; } .menu-boton__rayas { position: relative; } .menu-boton__rayas::before, .menu-boton__rayas::after { content: ''; position: absolute; left: 0; } .menu-boton__rayas::before { top: -7px; } .menu-boton__rayas::after { top: 7px; } .menu-boton[aria-expanded='true'] { color: var(--blanco); } .menu-boton[aria-expanded='true'] .menu-boton__rayas { background: transparent; } .menu-boton[aria-expanded='true'] .menu-boton__rayas::before { transform: translateY(7px) rotate(45deg); } .menu-boton[aria-expanded='true'] .menu-boton__rayas::after { transform: translateY(-7px) rotate(-45deg); } /* Menú, sin JavaScript: una lista normal debajo de la barra */ .menu { width: 100%; padding-bottom: .75rem; } .menu__lista { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; } .menu a { text-decoration: none; } .menu__lista a { display: inline-block; padding: .35rem 0; font-weight: 600; font-size: .95rem; } .menu__sub { display: flex; flex-wrap: wrap; gap: 0 1rem; } .menu__sub a { font-weight: 500; font-size: .85rem; opacity: .85; } .menu a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--verde-500); text-decoration-thickness: 2px; text-underline-offset: .4em; } /* Botón de soporte remoto (menú y barra) */ .soporte-boton { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 700; font-size: .9rem; line-height: 1; padding: .7rem 1.1rem; border-radius: 999px; background: var(--verde-700); color: var(--blanco); transition: background .2s, transform .2s; } .soporte-boton svg { width: 20px; height: 20px; flex: none; } .soporte-boton:hover { background: var(--verde-900); transform: translateY(-1px); } .soporte-boton--barra { display: none; } .soporte-boton--menu { margin: .5rem 0 1rem; } /* Menú en móvil y tableta: a pantalla completa */ @media (max-width: 1023.98px) { .js .cabecera__barra { flex-wrap: nowrap; } .js .menu { position: fixed; inset: 0; z-index: 1099; width: auto; margin: 0; padding: calc(var(--cab) + 1.5rem) var(--lateral) 3rem; background: var(--verde-900); color: var(--blanco); overflow-y: auto; clip-path: circle(0 at calc(100% - 44px) 36px); visibility: hidden; transition: clip-path .7s var(--suave), visibility 0s .7s; } .js .menu.abierto { clip-path: circle(150% at calc(100% - 44px) 36px); visibility: visible; transition: clip-path .7s var(--suave), visibility 0s; } .js .menu > * { max-width: 30rem; margin-inline: auto; } .js .menu__lista { display: block; } .js .menu__lista > li { border-bottom: 1px solid rgba(255, 255, 255, .1); } .js .menu__lista > li > a { display: block; padding: .9rem 0; font-size: clamp(1.25rem, 4.5vw, 1.6rem); font-weight: 700; } .js .menu__sub { display: block; padding: 0 0 .75rem 1rem; } .js .menu__sub a { display: block; padding: .35rem 0; font-size: 1rem; font-weight: 500; opacity: .75; } .js .menu a:hover { color: var(--verde-300); } .js .soporte-boton--menu { display: flex; justify-content: center; width: 100%; padding: 1rem 1.25rem; font-size: 1.05rem; background: var(--accion); color: var(--accion-osc); margin: 0 auto 1.25rem; } .js .soporte-boton--menu:hover { background: var(--blanco); } } /* Menú en escritorio: en línea, con los servicios en un desplegable */ @media (min-width: 1024px) { :root { --cab: 5rem; } .cabecera__barra { flex-wrap: nowrap; } .js .menu-boton { display: none; } .marca img { height: 36px; } .menu { width: auto; padding: 0; display: flex; align-items: center; gap: 2rem; } .soporte-boton--menu { display: none; } .soporte-boton--barra { display: inline-flex; } .menu__lista { flex-wrap: nowrap; align-items: center; gap: 2rem; } .menu__lista a { font-size: .95rem; letter-spacing: .01em; transition: color .2s; } .menu__lista > li > a:hover { color: var(--verde-700); } .js .cabecera:not(.cabecera--fondo) .menu__lista > li > a:hover { color: var(--verde-300); } .menu__con-sub { position: relative; } .menu__con-sub > a::after { content: ''; display: inline-block; margin-left: .45rem; vertical-align: .15em; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; transition: transform .2s; } .menu__con-sub:hover > a::after, .menu__con-sub:focus-within > a::after { transform: rotate(180deg); } .menu__sub { display: block; position: absolute; top: 100%; left: 50%; min-width: 19rem; padding: .5rem 0; margin-top: .5rem; background: var(--blanco); color: var(--gris-700); border-radius: 12px; box-shadow: 0 16px 48px rgba(9, 22, 20, .2); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s, transform .2s, visibility 0s .2s; } .menu__con-sub::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: .75rem; } .menu__con-sub:hover .menu__sub, .menu__con-sub:focus-within .menu__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .2s, visibility 0s; } .menu__sub a { display: block; padding: .55rem 1.5rem; font-size: .92rem; font-weight: 600; opacity: 1; color: var(--gris-700); white-space: nowrap; } .menu__sub a:hover { background: var(--verde-100); color: var(--verde-900); } /* En la barra, el botón de soporte pasa del petróleo (fondo claro) al color vivo (sobre la foto) */ .js .cabecera:not(.cabecera--fondo) .soporte-boton--barra { background: var(--accion); color: var(--accion-osc); } .js .cabecera:not(.cabecera--fondo) .soporte-boton--barra:hover { background: var(--blanco); } } /* ------------------------------------------------------------------ Cabeceras de página */ .hero { position: relative; isolation: isolate; color: var(--blanco); overflow: hidden; background: var(--verde-900); } .hero__foto { position: absolute; inset: 0; z-index: -2; } .hero__foto img { width: 100%; height: 100%; object-fit: cover; } /* La capa: de casi negro a verde, para que el título se lea sobre cualquier foto */ .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(9, 22, 20, .9) 0%, rgba(14, 34, 30, .74) 48%, rgba(23, 51, 47, .42) 100%); } .hero__marca { position: absolute; z-index: -1; color: var(--blanco); opacity: .08; pointer-events: none; right: 1%; bottom: -22%; width: min(26rem, 52vw); height: auto; } .hero__marca .chevron__der { opacity: .7; } .hero--pagina { min-height: clamp(21rem, 50svh, 30rem); display: flex; align-items: flex-end; padding: calc(var(--cab) + 2rem) 0 3.75rem; } .hero--pagina:has(+ .destacados--flotante) { padding-bottom: 6.5rem; } .hero__contenido { position: relative; } .hero__titulo { font-size: clamp(2.2rem, 6vw, 4.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; margin: 0; max-width: 20ch; color: var(--blanco); clip-path: inset(0 100% 0 0); animation: revelar .9s var(--suave) .15s forwards; } @keyframes revelar { to { clip-path: inset(0 0 0 0); } } .hero__subtitulo { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--verde-300); margin: .75rem 0 0; max-width: 40rem; opacity: 0; transform: translateY(10px); animation: subir .6s var(--suave) .45s forwards; } @keyframes subir { to { opacity: 1; transform: none; } } .migas { margin-bottom: 1rem; } .migas ol { display: flex; flex-wrap: wrap; gap: .1rem .35rem; font-size: .85rem; color: rgba(255, 255, 255, .8); } .migas li + li::before { content: '/'; margin-right: .35rem; opacity: .5; } .migas a { text-decoration: none; } .migas a:hover { text-decoration: underline; } .migas [aria-current='page'] { color: var(--blanco); font-weight: 600; } /* Portada: el título manda, alineado a la izquierda; el logo ya está en la cabecera */ .hero--portada { min-height: min(100svh, 56rem); display: flex; align-items: center; padding: calc(var(--cab) + 2rem) 0 5rem; } .hero--portada .hero__marca { right: -3%; bottom: -14%; width: min(44rem, 70vw); opacity: .09; } .hero--portada .hero__titulo { max-width: 15ch; font-size: clamp(2.6rem, 7.2vw, 5.25rem); line-height: 1.02; letter-spacing: -.035em; } .hero--portada .hero__subtitulo { max-width: 32rem; margin-top: 1.25rem; color: rgba(255, 255, 255, .88); font-size: clamp(1.1rem, 2.3vw, 1.35rem); } .hero--portada .botones { margin-top: 2.25rem; } /* ------------------------------------------------------------------ Botones */ .botones { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin: 1.75rem 0 0; } .botones--centro { justify-content: center; } .boton { display: inline-block; text-decoration: none; text-align: center; cursor: pointer; font: 700 .95rem/1.2 var(--texto-fuente); padding: .85rem 1.9rem; border-radius: 999px; background: var(--verde-700); color: var(--blanco); border: 2px solid var(--verde-700); transition: transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s; } .boton:hover { background: var(--verde-900); border-color: var(--verde-900); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(9, 22, 20, .2); } .boton--claro { background: var(--blanco); color: var(--verde-900); border-color: var(--blanco); } .boton--claro:hover { background: var(--verde-100); border-color: var(--verde-100); } .boton--linea { background: transparent; color: var(--verde-700); } .boton--linea:hover { background: var(--verde-700); border-color: var(--verde-700); color: var(--blanco); } .boton--linea-clara { background: transparent; color: var(--blanco); border-color: rgba(255, 255, 255, .6); } .boton--linea-clara:hover { background: rgba(255, 255, 255, .12); border-color: var(--blanco); } .enlace-flecha { font-weight: 700; color: var(--verde-700); text-decoration: none; } .enlace-flecha::after { content: '\2192'; display: inline-block; margin-left: .4rem; transition: transform .2s; } .enlace-flecha:hover { color: var(--verde-900); } .enlace-flecha:hover::after { transform: translateX(4px); } /* ------------------------------------------------------------------ Secciones y texto */ .seccion { padding: 4.5rem 0 5rem; } .seccion--arena { background: var(--arena); } .seccion--sin-arriba { padding-top: 0; } .seccion--pie-valores { padding-top: 2.75rem; padding-bottom: 2.5rem; } .seccion--tras-destacados { padding-top: 4rem; } .seccion--otros { padding-bottom: 6rem; } .seccion__cabeza { margin-bottom: 3rem; } .seccion__cabeza h2 { font-size: clamp(1.75rem, 3.8vw, 2.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: var(--verde-900); margin: 0 0 1.1rem; } .etiqueta { display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1.25rem; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-700); } .etiqueta::before { content: ''; width: 1.75rem; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--verde-500), var(--verde-700)); } .seccion--oscura { position: relative; overflow: hidden; color: var(--blanco); background: radial-gradient(60rem 30rem at 85% -10%, rgba(122, 154, 114, .22), transparent 60%), radial-gradient(50rem 30rem at 0% 110%, rgba(33, 100, 99, .35), transparent 60%), var(--verde-900); } .seccion--oscura::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px); background-size: 26px 26px; mask-image: linear-gradient(to bottom, #000, transparent 85%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); pointer-events: none; } .seccion--oscura > .contenedor { position: relative; } .seccion--oscura .seccion__cabeza h2 { color: var(--blanco); } .seccion--oscura .seccion__cabeza p { color: rgba(255, 255, 255, .76); } .seccion--oscura .etiqueta { color: var(--verde-300); } .seccion--oscura .etiqueta::before { background: linear-gradient(90deg, var(--verde-300), var(--verde-500)); } .seccion__cabeza p { color: var(--gris-600); max-width: 40rem; margin: 0; line-height: 1.75; } .seccion__cabeza--centro { text-align: center; } .seccion__cabeza--centro p { margin-inline: auto; } .seccion__pie { text-align: center; margin: 3.5rem 0 0; } .texto h2, .contenido-servicio > h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); line-height: 1.2; letter-spacing: -.01em; color: var(--verde-900); margin: 3rem 0 1rem; } .texto h2:first-child, .contenido-servicio > h2:first-child { margin-top: 0; } .texto h3 { font-size: 1.2rem; color: var(--verde-700); margin: 2rem 0 .5rem; } .texto p { color: var(--gris-700); margin-bottom: 1.3rem; } .texto strong { color: var(--noche); } .texto a { color: var(--verde-700); font-weight: 600; text-underline-offset: .2em; } .texto a:hover { color: var(--verde-900); } .texto ul, .texto ol { margin: 0 0 1.3rem; } .texto li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; color: var(--gris-700); } .texto ul li::before { content: ''; position: absolute; left: .15rem; top: .62em; border: 5px solid transparent; border-left: 7px solid var(--verde-500); border-right-width: 0; transition: transform .25s; } .texto ul li:hover::before { transform: translateX(3px); } .texto ol { counter-reset: paso; } .texto ol li { padding-left: 2.4rem; counter-increment: paso; min-height: 1.9rem; } .texto ol li::before { content: counter(paso); position: absolute; left: 0; top: .1em; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--verde-100); color: var(--verde-900); font-weight: 800; font-size: .85rem; display: grid; place-items: center; } .texto hr { border: 0; border-top: 1px solid var(--gris-300); margin: 2rem 0; } .texto table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .95rem; } .texto th, .texto td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--gris-300); vertical-align: top; } .texto th { background: var(--verde-50); color: var(--verde-900); font-weight: 700; white-space: nowrap; } .texto td { color: var(--gris-700); } .mapa-sitio ul { margin: .5rem 0 .5rem 1rem; } /* El cuerpo de una página de servicio: texto en columna y apartados a todo lo ancho */ .contenido-servicio { max-width: 68rem; } .contenido-servicio > p, .contenido-servicio > h2, .contenido-servicio > ul { max-width: var(--ancho-texto); margin-inline: auto; } .contenido-servicio > p { color: var(--gris-700); margin-bottom: 1.1rem; font-size: 1.1rem; } .contenido-servicio > p:has(+ .bloque) { margin-bottom: 2.25rem; } .contenido-servicio > p a { color: var(--verde-700); font-weight: 600; } /* ------------------------------------------------------------------ Apartados y recuadros */ .contenido-servicio { counter-reset: bloque; } .bloque { counter-increment: bloque; position: relative; overflow: hidden; background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra); padding: clamp(1.75rem, 4.5vw, 3rem); margin: 2.25rem 0; border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--verde-500), var(--verde-700)) 1; } .bloque__cabeza::after { content: counter(bloque, decimal-leading-zero); content: counter(bloque, decimal-leading-zero) / ''; margin-left: auto; padding-left: 1rem; font-size: clamp(2.6rem, 7vw, 4.5rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--verde-100); } .bloque__cabeza { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.5rem; } .bloque__icono { flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--verde-100); color: var(--verde-700); display: grid; place-items: center; } .bloque__icono svg { width: 1.6rem; height: 1.6rem; } .bloque__cabeza h2 { margin: 0; font-size: clamp(1.3rem, 2.8vw, 1.75rem); line-height: 1.15; color: var(--verde-900); letter-spacing: -.02em; } .bloque__cuerpo p { color: var(--gris-700); max-width: 62ch; margin-bottom: 1.2rem; } .bloque__cuerpo h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-700); margin: 1.5rem 0 .6rem; } .bloque__cuerpo ul { columns: 2 17rem; column-gap: 2.5rem; background: var(--verde-50); border-radius: 12px; padding: 1.25rem 1.5rem 1rem; margin: .5rem 0 0; } .bloque__cuerpo li { position: relative; padding-left: 1.7rem; margin-bottom: .6rem; break-inside: avoid; color: var(--gris-700); } .bloque__cuerpo li::before { content: ''; position: absolute; left: .3rem; top: .35em; width: .4rem; height: .75rem; border: solid var(--verde-700); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .bloque__cuerpo strong { color: var(--noche); } .bloque__cuerpo :last-child { margin-bottom: 0; } .bloque__cuerpo ul li:last-child { margin-bottom: .6rem; } .aviso { display: flex; gap: 1.25rem; align-items: flex-start; background: var(--verde-100); border-left: 4px solid var(--verde-500); border-radius: 12px; padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem); margin: 2.75rem 0; } .aviso__icono { flex: none; width: 2.5rem; height: 2.5rem; color: var(--verde-700); } .aviso__icono svg { width: 100%; height: 100%; } .aviso__texto { min-width: 0; } .aviso__texto p { color: var(--gris-700); margin: 0 0 .75rem; font-size: .98rem; line-height: 1.65; } .aviso__texto :last-child { margin-bottom: 0; } .aviso__texto h2, .aviso__texto h3 { font-size: 1.2rem; color: var(--verde-900); margin: 0 0 .6rem; } .aviso__texto a { color: var(--verde-700); font-weight: 700; } .aviso--grande { padding: 2rem clamp(1.25rem, 3vw, 2.25rem); } /* Ideas cortas con icono, sobre el borde de la cabecera */ .destacados__lista { display: grid; gap: 1.5rem; } .destacados--flotante { position: relative; z-index: 2; margin-top: -4rem; } .destacados:not(.destacados--flotante) { margin-top: 2.5rem; } .destacado { background: var(--blanco); border-radius: 14px; box-shadow: var(--sombra); padding: 2.25rem 1.75rem; text-align: center; transition: transform .3s, box-shadow .3s; } .destacado:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(13, 27, 42, .12); } .destacado__icono { display: block; width: 44px; height: 44px; margin: 0 auto .9rem; color: var(--verde-700); } .destacado__icono svg { width: 100%; height: 100%; } .destacado__titulo { font-size: 1.1rem; color: var(--verde-900); margin: 0 0 .35rem; } .destacado p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--gris-600); } /* ------------------------------------------------------------------ Tarjetas de servicio */ .tarjetas { display: grid; gap: 1.5rem; } .tarjeta { position: relative; overflow: hidden; border-radius: 16px; background: var(--noche); color: var(--blanco); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; transition: transform .4s var(--suave), box-shadow .4s; } .tarjeta { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); } .tarjeta:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(9, 22, 20, .32); } .tarjeta__foto { position: absolute; inset: 0; z-index: -2; } .tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--suave); } .tarjeta:hover .tarjeta__foto img { transform: scale(1.05); } .tarjeta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(9, 22, 20, .93) 0%, rgba(9, 22, 20, .58) 52%, rgba(9, 22, 20, .12) 100%); } .tarjeta__cuerpo { padding: 2rem; } .tarjeta__icono { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); margin-bottom: 1.2rem; color: var(--verde-300); } .tarjeta__icono svg { width: 1.4rem; height: 1.4rem; } .tarjeta__numero { position: absolute; top: .9rem; right: 1.25rem; font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: rgba(255, 255, 255, .2); } .tarjeta__titulo { font-size: 1.4rem; line-height: 1.2; margin: 0 0 .6rem; color: var(--blanco); letter-spacing: -.01em; } .tarjeta__claves { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.1rem; } .tarjeta__claves li { font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: .22rem .65rem; border-radius: 999px; color: var(--blanco); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); } .tarjetas--cuatro .tarjeta__claves { display: none; } .tarjeta__enlace { color: inherit; text-decoration: none; } .tarjeta__enlace::after { content: ''; position: absolute; inset: 0; z-index: 3; } .tarjeta__enlace:focus-visible { outline: none; } .tarjeta:has(.tarjeta__enlace:focus-visible) { outline: 3px solid var(--verde-300); outline-offset: 3px; } .tarjeta p { margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .78); max-width: 34rem; } .tarjeta__mas { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--verde-300); } .tarjeta__mas::after { content: '\2192'; display: inline-block; margin-left: .4rem; transition: transform .2s; } .tarjeta:hover .tarjeta__mas::after { transform: translateX(4px); } /* ------------------------------------------------------------------ Portada */ .presentacion { display: grid; gap: 2.5rem; align-items: center; } .presentacion__texto h2 { margin-top: 0; } .cifras { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .cifra { width: 9.25rem; height: 9.25rem; border-radius: 50%; border: 3px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(var(--crema), var(--crema)) padding-box, linear-gradient(135deg, var(--verde-500), var(--verde-700)) border-box; text-align: center; padding: 1rem; transition: transform .3s; } .cifra:hover { transform: scale(1.05); } .cifra__numero { font-size: clamp(1.7rem, 4.2vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; color: var(--verde-700); line-height: 1.1; } .cifra__texto { font-size: .82rem; color: var(--gris-600); margin-top: .35rem; line-height: 1.3; } .banda-soporte { background: var(--verde-100); border-block: 1px solid rgba(33, 100, 99, .16); } .banda-soporte__interior { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; padding-block: 3rem; } .banda-soporte__icono { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--verde-700); color: var(--blanco); display: grid; place-items: center; } .banda-soporte__icono svg { width: 1.75rem; height: 1.75rem; } .banda-soporte__texto { flex: 1 1 18rem; } .banda-soporte h2 { font-size: 1.4rem; color: var(--verde-900); margin: 0 0 .3rem; } .banda-soporte p { margin: 0; color: var(--gris-700); } .cerca__rejilla { display: grid; gap: 2.5rem; align-items: center; } .cerca__foto { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; aspect-ratio: 4 / 3; box-shadow: 0 24px 60px rgba(9, 22, 20, .22); background: var(--verde-900); } .cerca__foto a { position: absolute; inset: 0; display: block; } .cerca__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .7s var(--suave); } .cerca__foto:hover img { transform: scale(1.03); } .cerca__texto h2 { font-size: clamp(1.75rem, 3.8vw, 2.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: var(--verde-900); margin: 0 0 1rem; } .cerca__texto > p { color: var(--gris-700); font-size: 1.08rem; margin: 0 0 1.25rem; max-width: 34rem; } .cerca__direccion { display: flex; align-items: flex-start; gap: .75rem; color: var(--verde-900) !important; font-weight: 700; font-size: 1rem !important; } .cerca__direccion svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--verde-700); margin-top: .1rem; } /* ------------------------------------------------------------------ Quiénes somos y contacto */ .dos-columnas { display: grid; gap: 2rem; } .dos-columnas__item h2 { font-size: 1.4rem; color: var(--verde-900); margin: 0 0 .6rem; } .dos-columnas__item p { color: var(--gris-700); margin: 0; } .contacto { display: grid; gap: 1.5rem; margin: 3rem 0 0; } .contacto__tarjeta { background: var(--blanco); border-radius: 14px; padding: 2.5rem 1.75rem; text-align: center; box-shadow: var(--sombra); transition: transform .3s, box-shadow .3s; } .contacto__tarjeta:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(13, 27, 42, .12); } .contacto__icono { display: block; width: 44px; height: 44px; margin: 0 auto 1rem; color: var(--verde-700); } .contacto__icono svg { width: 100%; height: 100%; } .contacto__tarjeta h2 { font-size: 1.05rem; color: var(--verde-900); margin: 0 0 .5rem; } .contacto__tarjeta p { margin: 0; color: var(--gris-700); font-size: .98rem; line-height: 1.6; } .contacto__tarjeta a { color: var(--verde-700); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; overflow-wrap: anywhere; } .contacto__tarjeta a:hover { border-color: var(--verde-700); } /* Página de contacto: el formulario a un lado y los datos al otro */ .contacto-pagina { display: grid; gap: 4rem; } .contacto-pagina__formulario > .texto { margin-bottom: 2.25rem; } .contacto.contacto--lista { grid-template-columns: 1fr; margin: 0; align-content: start; gap: 1.25rem; } .contacto--lista .contacto__tarjeta { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; text-align: left; padding: 1.75rem; } .contacto--lista .contacto__icono { width: 2.75rem; height: 2.75rem; margin: 0; } .contacto--lista .contacto__tarjeta h2 { margin-bottom: .35rem; } /* Formulario (lo envía ideforms) */ .formulario { display: grid; gap: 1.5rem; } .formulario p { margin: 0; } .formulario__cuadricula { display: grid; gap: 1.5rem; } .formulario label { display: block; margin-bottom: .5rem; font-weight: 700; font-size: .92rem; color: var(--verde-900); } .formulario input:not([type='checkbox']), .formulario select, .formulario textarea { width: 100%; font: inherit; font-size: 1rem; line-height: 1.4; padding: .9rem 1.05rem; border: 2px solid var(--gris-300); border-radius: 12px; background: var(--blanco); color: var(--noche); transition: border-color .2s, box-shadow .2s; } .formulario textarea { resize: vertical; min-height: 9.5rem; } .formulario select { appearance: none; -webkit-appearance: none; padding-right: 3rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--verde-700) 50%), linear-gradient(135deg, var(--verde-700) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; } .formulario input:not([type='checkbox']):focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--verde-700); box-shadow: 0 0 0 4px rgba(33, 100, 99, .18); } .formulario__acepto { display: flex; gap: .85rem; align-items: flex-start; } .formulario__acepto input { flex: none; width: 1.35rem; height: 1.35rem; margin: .15rem 0 0; accent-color: var(--verde-700); } .formulario__acepto label { margin: 0; font-weight: 500; font-size: .92rem; line-height: 1.55; color: var(--gris-600); } .formulario__acepto a, .formulario__enviar small a { color: var(--verde-700); font-weight: 700; } .formulario__enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; } .formulario__enviar small { font-size: .9rem; color: var(--gris-600); } .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ideforms-error, .ideforms-success { margin: 0; padding: 1rem 1.2rem; border-radius: 12px; font-weight: 600; line-height: 1.5; } .ideforms-error { color: #8a2f2c; background: #fef2f2; border: 1px solid #fecaca; } .ideforms-success { color: var(--verde-900); background: var(--verde-100); border: 1px solid var(--verde-300); } .mapa { position: relative; height: clamp(18rem, 50svh, 30rem); overflow: hidden; } .mapa__enlace { display: block; width: 100%; height: 100%; position: relative; } .mapa__enlace img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--suave); } .mapa__enlace:hover img { transform: scale(1.03); } .mapa__pastilla { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; background: rgba(27, 67, 50, .92); color: var(--blanco); padding: .75rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: .95rem; } .mapa__pastilla svg { width: 1.15rem; height: 1.15rem; } /* ------------------------------------------------------------------ Cierre y pie */ .cierre { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--verde-900) 0%, var(--verde-700) 100%); padding: 6.5rem var(--lateral); text-align: center; color: var(--blanco); } .cierre .hero__marca { right: -4%; bottom: -30%; width: min(30rem, 70vw); opacity: .1; } .cierre__interior { max-width: 40rem; margin-inline: auto; } .cierre h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; color: var(--blanco); margin: 0 0 .75rem; } .cierre p { color: rgba(255, 255, 255, .82); font-size: 1.08rem; margin: 0; } .cierre .botones { margin-top: 2.5rem; } .pie { position: relative; overflow: hidden; background: var(--pie); color: rgba(255, 255, 255, .58); padding: 4.5rem 0 6rem; font-size: .92rem; border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--verde-500), var(--verde-700), transparent) 1; } .pie > .contenedor { position: relative; } .pie__marca { position: absolute; right: -3rem; bottom: -4rem; width: 22rem; color: var(--blanco); opacity: .04; pointer-events: none; } .pie__logo { width: 150px; height: auto; margin: 0 0 1.5rem; } .pie__rejilla { display: grid; gap: 2.5rem; margin-bottom: 3rem; } .pie__titulo { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .4); margin: 0 0 1rem; } .pie p { margin: 0 0 .5rem; line-height: 1.6; } .pie ul { display: flex; flex-direction: column; gap: .5rem; } .pie a { color: rgba(255, 255, 255, .62); text-decoration: none; transition: color .2s; } .pie a:hover { color: var(--verde-300); } .pie__contacto a { color: var(--verde-300); } .pie__final { display: flex; flex-direction: column; gap: .35rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .82rem; } .pie__final p { margin: 0; color: rgba(255, 255, 255, .4); } .pie__final a { color: var(--verde-500); } .pie__subir { color: rgba(255, 255, 255, .4) !important; } /* ------------------------------------------------------------------ Soporte remoto */ .soporte-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900; display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.4rem .9rem 1.2rem; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 1rem; line-height: 1; letter-spacing: .01em; background: var(--verde-900); color: var(--blanco); box-shadow: 0 10px 34px rgba(9, 22, 20, .4), 0 0 0 3px rgba(255, 255, 255, .9); transition: transform .3s var(--suave), box-shadow .3s; } .soporte-flotante__punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accion); box-shadow: 0 0 0 0 rgba(79, 214, 168, .7); animation: punto 2.2s ease-out infinite; } @keyframes punto { 0% { box-shadow: 0 0 0 0 rgba(79, 214, 168, .65); } 70%, 100% { box-shadow: 0 0 0 9px rgba(79, 214, 168, 0); } } .soporte-flotante:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 40px rgba(13, 27, 42, .45), 0 0 0 3px #fff; } body.menu-abierto .soporte-flotante { display: none; } .soporte { width: min(92vw, 30rem); max-height: 92svh; margin: auto; padding: 2rem 1.75rem 1.5rem; border: 0; border-radius: 22px; background: var(--blanco); color: var(--noche); box-shadow: 0 30px 90px rgba(0, 0, 0, .35); overflow-y: auto; } .soporte[open] { animation: entrar .35s var(--suave); } .soporte::backdrop { background: rgba(13, 27, 42, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @keyframes entrar { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } } .soporte__cerrar { position: absolute; top: .9rem; right: .9rem; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: var(--arena); color: var(--gris-600); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .2s; } .soporte__cerrar:hover { background: var(--verde-100); color: var(--noche); } .soporte__cabeza { display: flex; align-items: center; gap: .9rem; margin: 0 2.5rem 1rem 0; } .soporte__icono { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--verde-100); color: var(--verde-700); display: grid; place-items: center; } .soporte__icono svg { width: 1.4rem; height: 1.4rem; } .soporte__cabeza h2 { margin: 0; font-size: 1.4rem; line-height: 1.15; color: var(--verde-900); } .soporte__ayuda { font-size: .95rem; line-height: 1.55; color: var(--gris-600); margin: 0 0 1.25rem; } .soporte__estado { min-height: 1.3em; margin: .75rem 0 0; font-size: .88rem; color: var(--gris-600); } .soporte__estado--error { color: #a94442; } .soporte__pie { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--arena); font-size: .88rem; color: var(--gris-600); } .soporte__pie a { color: var(--verde-700); font-weight: 700; } /* El formulario que rellena el plugin de ISL Online: no cambiar sus clases ni identificadores */ .soporte .session-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--verde-700); margin: 0 0 .5rem; } .soporte .form-content { display: flex; flex-direction: column; gap: .75rem; } .soporte .alert { padding: .55rem .8rem; border-radius: 8px; font-size: .88rem; line-height: 1.4; margin-bottom: .5rem; } .soporte .alert-danger { color: #a94442; background: #fef2f2; border: 1px solid #fecaca; } .soporte .alert-warning { color: #8a6d3b; background: #fefce8; border: 1px solid #fde68a; } .soporte .collapse { display: none; } .soporte .collapse.in, .soporte .collapse.show { display: block; } .soporte .form-group { margin-bottom: .5rem; position: relative; } .soporte .form-control { width: 100%; height: 3.4rem; padding: .5rem 1rem; font: 600 1.35rem/1 var(--texto-fuente); letter-spacing: .06em; text-align: center; border: 2px solid var(--gris-300); border-radius: 12px; color: var(--noche); background: var(--blanco); transition: border-color .2s, box-shadow .2s; } .soporte .form-control::placeholder { color: #9ca3af; letter-spacing: .04em; } .soporte .form-control:focus { outline: none; border-color: var(--verde-500); box-shadow: 0 0 0 4px rgba(82, 183, 136, .25); } .soporte #btn-isl-join { display: block; width: 100%; padding: 1rem; background: linear-gradient(135deg, var(--verde-700), var(--verde-900)); color: var(--blanco); text-decoration: none; font: 800 1.05rem/1 var(--texto-fuente); border-radius: 12px; text-align: center; cursor: pointer; transition: transform .2s, box-shadow .2s; } .soporte #btn-isl-join:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(45, 106, 79, .3); } .soporte .loader-icon { display: none; } .soporte #session-info-box { margin-bottom: .5rem; font-size: .9rem; } /* ------------------------------------------------------------------ Aparición al desplazarse */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--suave), transform .9s var(--suave); } .js .reveal.visible { opacity: 1; transform: none; } .destacados__lista > :nth-child(2), .tarjetas > :nth-child(2), .cifras > :nth-child(2), .contacto > :nth-child(2) { transition-delay: .08s; } .destacados__lista > :nth-child(3), .tarjetas > :nth-child(3), .cifras > :nth-child(3), .contacto > :nth-child(3) { transition-delay: .16s; } .tarjetas > :nth-child(4), .contacto > :nth-child(4) { transition-delay: .24s; } .tarjetas > :nth-child(5) { transition-delay: .32s; } /* ------------------------------------------------------------------ Pantallas grandes */ @media (min-width: 640px) { .formulario__cuadricula { grid-template-columns: 1fr 1fr; } .destacados__lista { grid-template-columns: repeat(2, 1fr); } .tarjetas { grid-template-columns: repeat(2, 1fr); } .tarjetas--bento > :first-child { grid-column: 1 / -1; } .tarjetas--cuatro { grid-template-columns: repeat(2, 1fr); } .contacto { grid-template-columns: repeat(2, 1fr); } .pie__rejilla { grid-template-columns: repeat(2, 1fr); } .pie__final { flex-direction: row; justify-content: space-between; align-items: center; } .dos-columnas { grid-template-columns: repeat(2, 1fr); gap: 3rem; } } @media (min-width: 768px) { .tarjeta { min-height: 340px; } } @media (min-width: 900px) { .cerca__rejilla { grid-template-columns: 1.05fr 1fr; gap: 4rem; } .tarjetas--dos { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .presentacion { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; } .cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .cifra { width: 100%; height: auto; max-width: 10rem; margin-inline: auto; aspect-ratio: 1; padding: .5rem; } .contacto-pagina { grid-template-columns: 1.4fr 1fr; gap: 5rem; } .destacados__lista { grid-template-columns: repeat(3, 1fr); } .tarjetas { grid-template-columns: repeat(3, 1fr); } /* Bento de cinco: el primero grande y alto; dos apilados; y los dos últimos, de distinto ancho */ .tarjetas--bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(21rem, auto); } .tarjetas--bento .tarjeta { min-height: 0; } .tarjetas--bento > :nth-child(1) { grid-column: 1 / span 7; grid-row: 1 / span 2; } .tarjetas--bento > :nth-child(2) { grid-column: 8 / span 5; grid-row: 1; } .tarjetas--bento > :nth-child(3) { grid-column: 8 / span 5; grid-row: 2; } .tarjetas--bento > :nth-child(4) { grid-column: 1 / span 5; grid-row: 3; } .tarjetas--bento > :nth-child(5) { grid-column: 6 / span 7; grid-row: 3; } .tarjetas--bento > :nth-child(1) .tarjeta__titulo { font-size: clamp(1.8rem, 2.6vw, 2.4rem); letter-spacing: -.02em; } .tarjetas--bento > :nth-child(1) p { font-size: 1.05rem; max-width: 30rem; } .tarjetas--bento > :nth-child(1) .tarjeta__numero { font-size: 4.5rem; } .tarjetas--cuatro { grid-template-columns: repeat(4, 1fr); } .tarjetas--dos { grid-template-columns: repeat(2, 1fr); } .tarjeta { min-height: 360px; } .tarjetas--cuatro .tarjeta { min-height: 320px; } .contacto { grid-template-columns: repeat(4, 1fr); } .pie__rejilla { grid-template-columns: 1.3fr 1fr 1.2fr 1fr; } .seccion { padding: 6rem 0 6.5rem; } .seccion--sin-arriba { padding-top: 0; } .seccion--pie-valores { padding-top: 3.5rem; padding-bottom: 3.5rem; } .seccion--tras-destacados { padding-top: 4.5rem; } } @media (min-width: 1440px) { .tarjetas { gap: 1.5rem; } .tarjeta { min-height: 400px; } .tarjetas--bento .tarjeta { min-height: 0; } } @media (max-width: 479.98px) { .soporte-flotante { right: .85rem; bottom: .85rem; } .soporte { padding: 1.75rem 1.25rem 1.25rem; } } /* ------------------------------------------------------------------ Accesibilidad e impresión */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } .hero__titulo, .hero__subtitulo, .hero__logo { clip-path: none; opacity: 1; transform: none; } } @media print { .cabecera, .soporte-flotante, .soporte, .hero__scroll, .pie__subir, .banda-soporte { display: none !important; } .hero { min-height: 0; padding: 1rem 0; background: none; color: #000; } .hero::before, .hero::after, .hero__foto { display: none; } .hero__titulo, .hero__subtitulo { color: #000; clip-path: none; opacity: 1; transform: none; } body { background: #fff; color: #000; } .js .reveal { opacity: 1; transform: none; } }