/* ===== Tipografía ===== Instrument Sans, servida desde nuestro dominio (recursos/fonts -> sitio/fonts). Antes se usaba la del sistema: correcta, pero es la letra que ya tiene el visitante en todas las demas webs, y la pagina no se distinguia de ninguna otra. La variable cubre de 400 a 700 en un solo archivo de 30 KB. `font-display:swap` + preload en el : el texto se ve desde el primer fotograma con la letra del sistema y cambia sin bloquear nada. Las tres metricas de ajuste dejan la de reserva casi del mismo alto y ancho, asi que el cambio no mueve una linea (CLS 0,000 medido, no supuesto). */ @font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215, U+FEFF,U+FFFD; } @font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB, U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* La de reserva, ajustada para ocupar lo mismo mientras carga la buena. */ @font-face { font-family:"Reserva"; src:local("Segoe UI"),local("Helvetica Neue"),local("Arial"); size-adjust:97%; ascent-override:96%; descent-override:24%; line-gap-override:0%; } /* ===== Tokens ===== */ :root { --azul:#1F3A6E; --azul-osc:#152848; --azul-claro:#2E5296; --gris:#6E7681; --acento:#F59E0B; --acento-osc:#B45309; --wa:#25D366; --tinta:#101828; --tinta-2:#475467; --tinta-3:#667085; --linea:#E4E7EC; --linea-2:#F2F4F7; --fondo:#FFFFFF; --fondo-2:#F8FAFC; --fondo-3:#F1F5F9; /* escala de 8px */ --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2rem; --e5:3rem; --e6:4rem; --e7:6rem; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:24px; --r-full:999px; --s-1:0 1px 2px rgba(16,24,40,.05); --s-2:0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04); --s-3:0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04); --s-4:0 12px 32px rgba(16,24,40,.10), 0 4px 8px rgba(16,24,40,.04); --s-azul:0 8px 24px rgba(31,58,110,.24); --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.22,.61,.36,1); --barra:0px; } /* Transición entre páginas (Chrome). Donde no exista, la navegación es la normal de siempre: no se rompe nada. */ @view-transition { navigation:auto; } ::view-transition-old(root) { animation:vtSale .16s cubic-bezier(.4,0,1,1) both; } ::view-transition-new(root) { animation:vtEntra .26s var(--ease) both; } @keyframes vtSale { to { opacity:0; } } @keyframes vtEntra { from { opacity:0; transform:translateY(8px); } } @media (prefers-reduced-motion:reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation:none; } } /* ===== Reset ===== */ *,*::before,*::after { box-sizing:border-box; } * { margin:0; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } } body { font-family:"Instrument Sans","Reserva",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:1.0625rem; line-height:1.65; color:var(--tinta); background:var(--fondo); text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; padding-bottom:var(--barra); } img,svg,video { display:block; max-width:100%; height:auto; } a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; color:inherit; } h1,h2,h3,h4 { line-height:1.15; letter-spacing:-.022em; font-weight:700; text-wrap:balance; } h1 { font-size:clamp(2rem,5.2vw,3.25rem); letter-spacing:-.03em; } h2 { font-size:clamp(1.5rem,3.4vw,2.25rem); } h3 { font-size:clamp(1.125rem,2vw,1.375rem); letter-spacing:-.015em; } p { text-wrap:pretty; } :focus-visible { outline:2px solid var(--azul-claro); outline-offset:3px; border-radius:4px; } /* El azul del sistema al seleccionar texto no es de nadie; con el de la marca hasta copiar un telefono se ve de la casa. */ ::selection { background:rgba(46,82,150,.20); color:var(--tinta); } .heroe ::selection, .cta ::selection, .pie ::selection { background:rgba(255,255,255,.26); color:#fff; } /* ===== Layout ===== */ .env { width:100%; max-width:1140px; margin-inline:auto; padding-inline:var(--e3); } .sec { padding-block:clamp(var(--e5),7vw,var(--e7)); } .sec--gris { background:var(--fondo-2); } /* Dos secciones seguidas del mismo color suman su aire: 96 px abajo + 96 px arriba son 192 px de nada, y sin cambio de fondo que lo justifique el ojo lo lee como un hueco, no como respiro. Cuando SI cambia el fondo se deja entero: ahi cada bloque tiene que respirar dentro de su color. */ .sec:not(.sec--gris):not(.sec--linea) + .sec:not(.sec--gris):not(.sec--linea), .sec--gris + .sec--gris { padding-top:clamp(var(--e4),4vw,var(--e5)); } .sec--linea { border-top:1px solid var(--linea); } .centro { text-align:center; } /* A partir de portátil el cuerpo sube a 18 px: con un h2 de 36 px encima, 17 px se leía pequeño. Los bloques van medidos en ch, así que el ancho de texto no cambia. */ @media (min-width:1024px) { body { font-size:1.125rem; } } /* Un `display` de autor gana al atributo `hidden`, que solo trae el estilo del navegador. Sin esta linea, el aviso de error del formulario se veia siempre en /contacto/ (paso de verdad). */ [hidden] { display:none !important; } /* Saltar al contenido: en CSS y no con onfocus en el HTML, para que funcione sin JavaScript y sobreviva a una CSP mas estricta. */ .saltar { position:absolute; left:-9999px; top:0; z-index:99; background:var(--azul); color:#fff; padding:.75rem 1.1rem; border-radius:var(--r); font-weight:600; text-decoration:none; } .saltar:focus { left:1rem; top:1rem; } .medida { max-width:65ch; } .medida-c { max-width:65ch; margin-inline:auto; } .grid { display:grid; gap:var(--e3); } @media (min-width:640px) { .g-2 { grid-template-columns:repeat(2,1fr); } } @media (min-width:960px) { .g-3 { grid-template-columns:repeat(3,1fr); } .g-4 { grid-template-columns:repeat(4,1fr); } } /* En un telefono de 390 px, cuatro tarjetas de texto a dos columnas dejan lineas de tres palabras ("El telefono / esta operativo / todos los dias"). Dos columnas solo a partir de 560 px, que es donde la linea vuelve a tener un largo legible. */ @media (min-width:560px) and (max-width:959px) { .g-4 { grid-template-columns:repeat(2,1fr); } } .eyebrow { font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--azul-claro); margin-bottom:var(--e1); } .plomo { color:var(--tinta-2); font-size:1.0625rem; } /* ===== Botones ===== */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:.9rem 1.6rem; border-radius:var(--r-full); border:1px solid transparent; font-weight:600; font-size:1rem; letter-spacing:-.01em; cursor:pointer; transition:transform .16s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out); text-align:center; line-height:1.2; } .btn svg { width:1.15em; height:1.15em; flex:none; } .btn:hover { transform:translateY(-1px); } .btn:active { transform:translateY(0) scale(.985); transition-duration:.06s; } .btn--tel { background:var(--acento); color:#1A1206; box-shadow:0 2px 8px rgba(180,83,9,.18); } .btn--tel:hover { background:#FBB024; box-shadow:0 6px 18px rgba(180,83,9,.26); } .btn--wa { background:var(--wa); color:#04310F; box-shadow:0 2px 8px rgba(4,49,15,.16); } .btn--wa:hover { background:#31E074; } .btn--azul { background:var(--azul); color:#fff; box-shadow:var(--s-azul); } .btn--azul:hover { background:var(--azul-claro); } .btn--linea { background:transparent; border-color:rgba(255,255,255,.28); color:#fff; } .btn--linea:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); } .btn--fantasma { background:#fff; border-color:var(--linea); color:var(--tinta); box-shadow:var(--s-1); } .btn--fantasma:hover { border-color:var(--azul-claro); color:var(--azul); box-shadow:var(--s-2); } .btn--bloque { width:100%; } .btn--grande { padding:1.05rem 2rem; font-size:1.0625rem; } /* ===== Cabecera ===== */ @media (max-width:959px) { .cab { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.97); } } .cab { position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); /* el desenfoque se apaga en movil unas lineas mas abajo: es el tipico efecto que se ve precioso y hace tirones al hacer scroll en el telefono */ border-bottom:1px solid transparent; transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out); } .cab[data-scroll="1"] { border-bottom-color:var(--linea); box-shadow:var(--s-1); } .cab__in { display:flex; align-items:center; gap:var(--e2); height:68px; } .marca { display:flex; align-items:center; gap:.65rem; font-weight:700; letter-spacing:-.03em; font-size:1.0625rem; color:var(--azul); flex:none; } .marca img { height:38px; width:auto; } .marca > span { display:flex; flex-direction:column; line-height:1.08; } .marca .wm b { color:var(--azul); } .marca .wm i { font-style:normal; color:var(--gris); } .marca em { font-style:normal; font-size:.625rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); margin-top:1px; } @media (max-width:420px) { .marca { font-size:.9375rem; } .marca img { height:32px; } } .nav { display:none; margin-left:auto; align-items:center; gap:var(--e1); } @media (min-width:1024px) { .nav { display:flex; } } .nav a { padding:.5rem .8rem; border-radius:var(--r-sm); font-size:.9375rem; font-weight:500; color:var(--tinta-2); transition:color .16s var(--ease-out), background-color .16s var(--ease-out); } .nav a:hover { color:var(--azul); background:var(--fondo-3); } .cab__cta { margin-left:auto; display:flex; align-items:center; gap:.5rem; } @media (min-width:1024px) { .cab__cta { margin-left:var(--e2); } } .cab__tel { display:none; padding:.6rem 1.15rem; font-size:.9375rem; } @media (min-width:600px) { .cab__tel { display:inline-flex; } } .hamb { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--linea); border-radius:var(--r-sm); background:#fff; cursor:pointer; transition:border-color .16s var(--ease-out), background .16s var(--ease-out); } .hamb:hover { border-color:var(--azul-claro); } @media (min-width:1024px) { .hamb { display:none; } } .hamb svg { width:20px; height:20px; stroke:var(--tinta); } /* menú móvil */ .menu { position:fixed; inset:0; z-index:80; background:#fff; padding:var(--e3); display:flex; flex-direction:column; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-10px); transform-origin:top right; transition:opacity .14s cubic-bezier(.4,0,1,1), transform .16s cubic-bezier(.4,0,1,1), visibility .16s; } .menu[data-abierto="1"] { opacity:1; visibility:visible; transform:none; transition:opacity .2s var(--ease-out), transform .26s var(--ease), visibility .26s; } .menu__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--e3); } .menu__cerrar { width:42px; height:42px; border:1px solid var(--linea); border-radius:var(--r-sm); background:#fff; cursor:pointer; display:grid; place-items:center; } .menu__cerrar svg { width:20px; height:20px; stroke:var(--tinta); } .menu nav { display:flex; flex-direction:column; gap:2px; } .menu nav a { padding:.85rem .5rem; border-bottom:1px solid var(--linea-2); font-weight:500; font-size:1.0625rem; } .menu nav a small { display:block; color:var(--tinta-3); font-weight:400; font-size:.875rem; } .menu__pie { margin-top:auto; padding-top:var(--e3); display:grid; gap:var(--e1); } /* ===== Barra fija móvil ===== */ .barra { position:fixed; left:0; right:0; bottom:0; z-index:70; display:grid; grid-template-columns:1fr 1fr; gap:.5rem; padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--linea); transform:translateY(110%); transition:transform .3s var(--ease); } .barra[data-ver="1"] { transform:none; } .barra .btn { padding:.85rem 1rem; font-size:.9375rem; } /* El numero dentro del boton de llamar. En una caja estrecha, "Llamar ahora · 682 86 62 18" se partia en dos lineas y el icono quedaba descolgado. En pantallas pequenas se esconde el numero: el boton dice "Llamar ahora", que es lo unico que hace falta leer con una averia en casa — el numero sigue en la cabecera, en el pie y en el enlace. */ .btn__num { white-space:nowrap; } @media (max-width:479px) { .btn__num { display:none; } } @media (min-width:1024px) { .barra { display:none; } } /* ===== Franja de "le preguntamos por teléfono" ===== Cierra la sección de confianza. Es el "cómo" de la promesa del precio, y va entera en una línea a partir de tableta. */ .preguntas { margin-top:var(--e3); padding:var(--e3); background:var(--fondo-2); border:1px solid var(--linea); border-radius:var(--r-lg); display:grid; gap:var(--e2); } .preguntas__tit { display:flex; align-items:center; gap:.5rem; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-2); font-weight:700; } .preguntas__tit svg { width:16px; height:16px; stroke:var(--acento-osc); flex:none; } .preguntas ul { list-style:none; padding:0; display:grid; gap:.6rem; } .preguntas li { display:flex; align-items:flex-start; gap:.6rem; font-size:.9375rem; color:var(--tinta); } .preguntas li svg { width:18px; height:18px; stroke:var(--acento); flex:none; margin-top:2px; } @media (min-width:768px) { .preguntas { grid-template-columns:auto 1fr; align-items:center; gap:var(--e3); } /* gap de e3 y no e4: con la tipografia de la casa, "Con que nos vamos a encontrar" se partia en dos lineas y la fila quedaba descuadrada. */ .preguntas ul { grid-template-columns:repeat(3,1fr); gap:var(--e2); } .preguntas li { font-size:.9rem; } } /* ===== Tabla (relación de cookies) ===== En móvil una tabla de cuatro columnas no cabe: se desplaza dentro de su propia caja en vez de reventar el ancho de la página. */ .tabla-env { overflow-x:auto; margin-block:var(--e3); -webkit-overflow-scrolling:touch; } .tabla { border-collapse:collapse; width:100%; min-width:520px; font-size:.9375rem; } .tabla th, .tabla td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--linea); vertical-align:top; } .tabla thead th { font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-3); border-bottom:1px solid var(--linea); } .tabla code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.875rem; background:var(--fondo-3); padding:.1rem .35rem; border-radius:var(--r-sm); } /* ===== Prueba social (reseñas reales de Google) ===== Solo se imprime si datos.py trae reseñas de verdad. Las tarjetas no llevan foto ni comillas gigantes: en este sector, cuanto más adornada está una reseña, menos se cree. La cita manda y el resto se aparta. */ .cifras { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--e3) var(--e6); padding-block:var(--e3); border-block:1px solid var(--linea); } .cifra { text-align:center; } .cifra strong { display:block; font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.1; letter-spacing:-.03em; color:var(--azul); } .cifra span { font-size:.9375rem; color:var(--tinta-2); } .resena { background:#fff; border:1px solid var(--linea); border-radius:var(--r-lg); padding:var(--e3); display:grid; gap:var(--e2); align-content:start; box-shadow:var(--s-2); } .estrellas { display:flex; gap:2px; color:var(--acento); } .estrellas svg { width:16px; height:16px; } .resena blockquote { font-size:1rem; line-height:1.6; color:var(--tinta); } .resena figcaption { font-size:.875rem; color:var(--tinta-3); font-weight:500; } /* ===== Aviso de cookies ===== Solo se imprime si hay IDs de Google en datos.py. Dos botones del MISMO peso: rechazar tiene que costar lo mismo que aceptar (la AEPD sanciona lo contrario). Se coloca por encima de la barra móvil para no taparle los botones de llamar. Entra con transform+opacity, nunca empuja el contenido. */ .cookies { position:fixed; z-index:90; left:var(--e2); right:var(--e2); bottom:calc(var(--barra) + env(safe-area-inset-bottom) + var(--e2)); max-width:420px; padding:var(--e3); background:#fff; border:1px solid var(--linea); border-radius:var(--r-lg); box-shadow:var(--s-4); display:grid; gap:var(--e2); opacity:0; transform:translateY(12px) scale(.98); transition:opacity .28s var(--ease-out), transform .28s var(--ease-out); } .cookies[data-ver="1"] { opacity:1; transform:none; } .cookies__txt strong { display:block; font-size:.9375rem; margin-bottom:.25rem; } .cookies__txt p { font-size:.875rem; line-height:1.55; color:var(--tinta-2); } .cookies__txt a { color:var(--azul); text-decoration:underline; } .cookies__btns { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; } .cookies__btns .btn { padding:.7rem 1rem; font-size:.9375rem; justify-content:center; } @media (min-width:640px) { .cookies { right:auto; } } @media (prefers-reduced-motion:reduce) { .cookies { transition:none; opacity:1; transform:none; } } /* ===== Héroe ===== */ .heroe { position:relative; overflow:hidden; color:#fff; isolation:isolate; background:linear-gradient(160deg,#16305C 0%,var(--azul) 45%,#28497F 100%); } .heroe::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background: radial-gradient(70% 55% at 80% 0%,rgba(46,82,150,.85),transparent 60%), radial-gradient(50% 50% at 8% 100%,rgba(245,158,11,.14),transparent 65%); } .heroe::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.05; background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%); mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%); } .heroe__in { padding-block:clamp(var(--e4),8vw,5.5rem) clamp(var(--e4),7vw,var(--e6)); position:relative; } /* Foto a sangre detras del titular. El degradado va de azul solido donde esta el texto a casi transparente al otro lado: la foto se ve y el texto se lee. */ .heroe__fondo { position:absolute; inset:0; z-index:-2; overflow:hidden; } .heroe__fondo img { width:100%; height:100%; object-fit:cover; object-position:60% 45%; } .heroe--fondo::before { z-index:-1; opacity:1; background: linear-gradient(100deg,rgba(13,28,56,.96) 0%,rgba(17,36,72,.90) 38%, rgba(20,42,84,.62) 70%,rgba(24,48,94,.48) 100%), radial-gradient(60% 70% at 82% 30%,rgba(245,158,11,.10),transparent 70%); } @media (max-width:959px) { .heroe--fondo::before { background:linear-gradient(180deg,rgba(13,28,56,.94) 0%,rgba(16,34,68,.90) 55%, rgba(19,40,80,.86) 100%); } .heroe__fondo img { object-position:55% 40%; } } .heroe--fondo::after { opacity:.035; } /* Modo abstracto: sin fotos. Arcos concéntricos que recogen la forma del escudo del logo, más la trama técnica. Todo CSS: nítido en cualquier pantalla. */ .heroe--abstracto::before { z-index:-1; background: radial-gradient(46% 62% at 78% 12%,rgba(46,82,150,.85),transparent 62%), radial-gradient(38% 48% at 96% 88%,rgba(245,158,11,.13),transparent 68%), radial-gradient(30% 40% at 4% 96%,rgba(46,82,150,.5),transparent 70%); } .heroe__arcos { position:absolute; top:50%; right:-6%; transform:translateY(-50%); width:min(680px,58%); aspect-ratio:1; z-index:-1; opacity:.5; pointer-events:none; } .heroe__arcos svg { width:100%; height:100%; } .heroe__arcos circle { fill:none; stroke:rgba(255,255,255,.16); } .heroe__arcos .acento { stroke:rgba(245,158,11,.42); } @media (max-width:959px) { .heroe__arcos { right:-28%; width:78%; opacity:.34; } } /* --- Modo "madera": el bodegón completo, con su tabla, como fondo --- */ /* A: a sangre. La foto ocupa el héroe entero y el degradado azul la tapa donde va el texto. */ .heroe--madera .heroe__fondo img { object-position:70% 50%; } .heroe--madera::before { z-index:-1; background:linear-gradient(96deg,rgba(11,25,52,.97) 0%,rgba(14,31,64,.93) 34%, rgba(17,37,76,.72) 58%,rgba(20,43,88,.40) 100%); } /* B: panel. La foto vive en la mitad derecha y se funde hacia el azul con una máscara, así se ve la composición entera del bodegón sin recortarla. */ .heroe--maderapanel .heroe__fondo { left:auto; right:0; width:min(58%,780px); } .heroe--maderapanel .heroe__fondo img { object-position:center; } .heroe--maderapanel .heroe__fondo { -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%); } .heroe--maderapanel::before { z-index:-1; background: linear-gradient(90deg,rgba(11,25,52,.92) 0%,rgba(14,31,64,.55) 42%, rgba(17,37,76,.28) 62%,rgba(17,37,76,.22) 100%), radial-gradient(40% 60% at 92% 80%,rgba(245,158,11,.10),transparent 70%); } @media (max-width:959px) { .heroe--maderapanel .heroe__fondo { left:0; right:0; width:100%; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%); mask-image:linear-gradient(180deg,transparent 0%,#000 30%); } /* que se vean las herramientas y no el trozo vacio de la tabla */ .heroe--maderapanel .heroe__fondo img { object-position:58% 62%; } /* El velo se abre mucho mas abajo. Con el .66 de antes la madera no se distinguia y el heroe parecia un rectangulo azul plano: justo la version que se eligio POR la foto. Arriba sigue casi opaco, que es donde va el titular y donde hace falta el contraste. */ .heroe--maderapanel::before { background:linear-gradient(180deg,rgba(11,25,52,.95) 0%,rgba(13,29,60,.88) 34%, rgba(14,31,64,.66) 62%,rgba(14,31,64,.42) 100%); } } /* En tablet (600-959) la banda es mas ancha que alta y el mismo velo dejaba la mitad de abajo casi negra: se veia un rectangulo oscuro en vez de la mesa de trabajo. Se abre el tramo final; el titular sigue sobre el 95% de arriba. */ @media (min-width:600px) and (max-width:959px) { .heroe--maderapanel::before { background:linear-gradient(180deg,rgba(11,25,52,.94) 0%,rgba(13,29,60,.84) 30%, rgba(14,31,64,.56) 60%,rgba(14,31,64,.30) 100%); } .heroe--maderapanel .heroe__fondo img { object-position:56% 56%; } } /* Bodegón de herramientas recortado, flotando sobre el azul. La sombra la pone el CSS —no la foto— para que respete la luz de la página y el recorte quede limpio contra el fondo. */ .heroe__util { position:absolute; z-index:-1; pointer-events:none; right:clamp(1rem,4vw,4.5rem); top:50%; transform:translateY(-50%); width:min(430px,34%); filter:drop-shadow(0 22px 38px rgba(4,12,30,.5)) drop-shadow(0 4px 10px rgba(4,12,30,.3)); } .heroe__util img { width:100%; height:auto; } /* el contenido no invade la zona del bodegón: si no, la fila de datos se leería por debajo de las herramientas */ @media (min-width:960px) { .heroe--utiles .heroe__in > *:not(.heroe__util):not(.heroe__arcos), .heroe--maderapanel .heroe__in > * { max-width:60%; } .heroe--utiles .heroe__datos, .heroe--maderapanel .heroe__datos { grid-template-columns:repeat(2,1fr); max-width:60%; } } @media (max-width:1100px) and (min-width:768px) { .heroe__util { width:min(330px,32%); right:1.5rem; } } @media (max-width:767px) { /* En móvil iría detrás del texto: se coloca arriba a la derecha, sangrada y tenue, como marca de agua. El titular manda. */ .heroe__util { width:64%; right:-14%; top:auto; bottom:-6%; transform:none; opacity:.16; filter:none; } } .heroe--pag .heroe__in { padding-block:clamp(var(--e4),6vw,var(--e5)); } .heroe h1 { margin-bottom:var(--e2); } .heroe__sub { font-size:clamp(1rem,2vw,1.1875rem); line-height:1.55; color:rgba(255,255,255,.82); max-width:56ch; } .heroe__ctas { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--e4); } .heroe__ctas .btn { flex:1 1 auto; min-width:200px; } @media (min-width:640px) { .heroe__ctas .btn { flex:0 0 auto; } } /* Sin el punto verde, el chip no necesita el hueco de la izquierda. */ .chip24--liso { padding-left:.85rem; } .chip24 { display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .85rem .35rem .55rem; border-radius:var(--r-full); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); font-size:.875rem; font-weight:600; color:rgba(255,255,255,.94); margin-bottom:var(--e2); backdrop-filter:blur(6px); font-size:.8125rem; } /* Un solo verde en toda la web, y significa siempre lo mismo: hay alguien al otro lado. Se usa en el boton de WhatsApp y en este punto. Antes el punto era un #34D399 suelto, o sea un cuarto color de la paleta que no queria decir nada. */ .punto { position:relative; width:8px; height:8px; border-radius:50%; background:var(--wa); flex:none; } .punto::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--wa); animation:pulso 2.4s var(--ease-out) infinite; opacity:0; } @keyframes pulso { 0%{transform:scale(.6);opacity:.9} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} } @media (prefers-reduced-motion:reduce) { .punto::after { animation:none; } } .heroe__datos { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e2) var(--e3); margin-top:var(--e4); padding-top:var(--e3); border-top:1px solid rgba(255,255,255,.14); } @media (min-width:1200px) { .heroe__datos { grid-template-columns:repeat(4,1fr); gap:var(--e2); } } .heroe__grid .heroe__datos { grid-template-columns:repeat(2,1fr); } .heroe__dato { display:flex; align-items:center; gap:.6rem; font-size:.9375rem; color:rgba(255,255,255,.8); } /* En movil esta fila cae sobre la foto: se sube el contraste para que no dependa de lo clara que sea la madera detras. */ @media (max-width:959px) { .heroe__dato { color:rgba(255,255,255,.94); text-shadow:0 1px 2px rgba(6,15,34,.55); } } .heroe__dato svg { width:18px; height:18px; stroke:var(--acento); flex:none; } /* ===== Imagen del héroe ===== */ .heroe__grid { display:grid; gap:var(--e4); align-items:center; } @media (min-width:960px) { .heroe__grid { grid-template-columns:1.05fr .95fr; gap:var(--e5); } } .heroe__foto { position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 60px rgba(5,15,35,.45); aspect-ratio:4/3; background:#16305C; } @media (min-width:960px) { .heroe__foto { aspect-ratio:5/4; } } .heroe__foto img { width:100%; height:100%; object-fit:cover; } .heroe__foto::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(200deg,rgba(31,58,110,.12),rgba(10,22,48,.45)); } @media (max-width:959px) { .heroe__foto { aspect-ratio:16/10; margin-top:var(--e3); } } /* En movil la foto del heroe se oculta: el LCP pasa a ser el titular (instantaneo), que es lo que mas pesa en el Quality Score de Ads. Las fotos siguen mas abajo. */ @media (max-width:767px) { .heroe__foto { display:none; } } .heroe--madera .heroe__fondo, .heroe--maderapanel .heroe__fondo { z-index:-2; } /* ===== Foto en tarjeta ===== */ .tar.tar--foto { padding:0; overflow:hidden; display:flex; flex-direction:column; } .tar.tar--foto .tar__img { aspect-ratio:16/10; overflow:hidden; background:var(--fondo-3); } .tar.tar--foto .tar__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); will-change:transform; } a.tar--foto:hover .tar__img img { transform:scale(1.045); } .tar.tar--foto .tar__c { padding:var(--e3); display:flex; flex-direction:column; flex:1; } .tar.tar--foto .tar__eyebrow { font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--azul-claro); margin-bottom:.35rem; } /* ===== Galería ===== */ .galeria { display:grid; gap:var(--e2); grid-template-columns:repeat(2,1fr); } @media (min-width:900px) { .galeria { grid-template-columns:repeat(4,1fr); } } @media (min-width:900px) { .galeria--6 { grid-template-columns:repeat(6,1fr); } } @media (min-width:560px) and (max-width:899px) { .galeria--6 { grid-template-columns:repeat(3,1fr); } } /* Mosaico: una foto manda y cuatro la acompañan. Seis miniaturas iguales en fila se leían como banco de imágenes, que es lo contrario de lo que estas fotos demuestran. */ .galeria--mosaico { grid-template-columns:repeat(2,1fr); } .galeria--mosaico figure:first-child { grid-column:span 2; aspect-ratio:16/10; } @media (min-width:900px) { .galeria--mosaico { grid-template-columns:repeat(4,1fr); gap:var(--e3); } /* La grande ocupa dos columnas y dos filas, asi que su lado mide justo lo mismo de ancho que de alto: si se deja en `auto`, manda la proporcion de la foto (una vertical estira las filas y las cuatro pequeñas se quedan con un hueco debajo, que es como se veia). */ .galeria--mosaico figure:first-child { grid-column:span 2; grid-row:span 2; aspect-ratio:1; } } .galeria figure { margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:1; background:var(--fondo-3); border:1px solid var(--linea); box-shadow:var(--s-1); } .galeria img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } /* Encuadre: `cover` recorta siempre por el centro y en las fotos verticales del cliente el centro no es lo que hay que enseñar. */ .galeria img.enc-arriba { object-position:50% 14%; } .galeria img.enc-alto { object-position:50% 2%; } .galeria img.enc-abajo { object-position:50% 86%; } /* La primera tarjeta lleva mas contenido a proposito: se marca como principal para que el hueco de las otras se lea como jerarquia y no como descuido. */ .tar--destacada { border-color:#F5D8A6; box-shadow:0 1px 2px rgba(180,83,9,.10),0 8px 24px rgba(180,83,9,.08); } /* El icono de la destacada es el UNICO ambar de la rejilla: si dos tarjetas hermanas llevan fondos de color distinto, el color deja de significar "esta es la principal" y pasa a ser decoracion. */ .tar--destacada .tar__icono svg { stroke:var(--acento-osc); } .tar__rotulo { margin:var(--e2) 0 0; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3,#98A2B3); } .tar__lista { list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.35rem; } .tar__lista li { display:flex; align-items:flex-start; gap:.5rem; font-size:.9375rem; color:var(--tinta-2); } .tar__lista svg { width:15px; height:15px; flex:none; margin-top:.28em; stroke:var(--acento); } .galeria figure:hover img { transform:scale(1.05); } .galeria figure:focus-within img { transform:scale(1.05); } /* ===== Franja con foto ===== */ .franja { position:relative; overflow:hidden; } .franja__foto { position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--s-4); border:1px solid var(--linea); } .franja__foto img { width:100%; height:100%; object-fit:cover; } /* ===== Migas ===== */ .migas { font-size:.8125rem; color:rgba(255,255,255,.62); margin-bottom:var(--e3); } .migas ol { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; } .migas a { color:rgba(255,255,255,.8); border-bottom:1px solid transparent; transition:border-color .16s; } .migas a:hover { border-bottom-color:rgba(255,255,255,.5); } .migas li:not(:last-child)::after { content:"›"; margin-left:.4rem; opacity:.5; } /* ===== Tarjetas ===== */ .tar { background:#fff; border:1px solid var(--linea); border-radius:var(--r-lg); padding:var(--e3); box-shadow:var(--s-1); position:relative; /* columna para que el "Ver detalle" se pegue abajo: con textos de tres y de cuatro lineas, los enlaces quedaban a alturas distintas dentro de la misma fila y la rejilla se leia desordenada. */ display:flex; flex-direction:column; transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out); } a.tar:hover, .tar--hover:hover { transform:translateY(-3px); box-shadow:var(--s-3); border-color:#CBD5E1; } a.tar:active { transform:translateY(-1px) scale(.994); transition-duration:.07s; } .tar h3 { margin-bottom:.5rem; } /* En una fila de cuatro, unos titulos ocupan una linea y otros dos, asi que los parrafos empezaban a alturas distintas. Se reserva el alto de dos lineas para que arranquen todos en el mismo sitio. */ @media (min-width:960px) { .grid.g-4 > .tar > h3 { min-height:2.3em; } } .tar p { color:var(--tinta-2); font-size:.9688rem; } /* El icono va suelto, sin cuadrito de fondo. El cuadrado con degradado azul claro es EL adorno de plantilla de SaaS: aparece igual en mil webs y no aporta nada que no diga ya el icono. Quitandolo la reticula se lee mas editorial y el unico color de la fila vuelve a ser el de la tarjeta destacada, que es lo que si significa algo. */ .tar__icono { display:grid; place-items:center; justify-content:start; margin-bottom:var(--e2); transition:transform .22s var(--ease-out); transform-origin:left center; } .tar__icono svg { width:26px; height:26px; stroke:var(--azul); stroke-width:1.8; } a.tar:hover .tar__icono { transform:scale(1.06) rotate(-3deg); } .tar__mas { display:inline-flex; align-items:center; gap:.35rem; margin-top:auto; padding-top:var(--e2); align-self:flex-start; font-size:.9375rem; font-weight:600; color:var(--azul); } .tar__mas svg { width:15px; height:15px; transition:transform .22s var(--ease-out); } .tar--cta { display:flex; flex-direction:column; background:linear-gradient(160deg,#F8FAFF,#EEF3FB); border-color:#D7E2F4; } .tar--cta h3 { color:var(--azul); } a.tar:hover .tar__mas svg { transform:translateX(3px); } /* ===== Enlaces de servicio dentro de una tarjeta de zona ===== */ .tar__servicios { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:var(--e2); } .tar__servicios a { padding:.35rem .7rem; border-radius:var(--r-full); border:1px solid var(--linea); font-size:.8125rem; font-weight:600; color:var(--azul); background:#fff; transition:background-color .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out); } .tar__servicios a:hover { background:var(--azul); border-color:var(--azul); color:#fff; transform:translateY(-1px); } /* ===== Lista de comprobación ===== */ .checks { list-style:none; padding:0; display:grid; gap:.75rem; } .checks li { display:flex; gap:.75rem; align-items:flex-start; color:var(--tinta-2); } .checks svg { width:20px; height:20px; stroke:var(--azul-claro); flex:none; margin-top:.18rem; } /* ===== Pasos ===== */ .pasos { counter-reset:p; display:grid; gap:var(--e3); margin-top:var(--e3); } @media (min-width:900px) { .pasos { grid-template-columns:repeat(4,1fr); } } .paso { position:relative; padding-top:var(--e3); border-top:2px solid var(--linea); } .paso::before { counter-increment:p; content:"0" counter(p); position:absolute; top:-.9rem; left:0; background:var(--fondo-2); padding-right:.6rem; font-size:.8125rem; font-weight:700; letter-spacing:.06em; color:var(--azul-claro); } .paso h3 { font-size:1.0625rem; margin-bottom:.35rem; } .paso p { color:var(--tinta-2); font-size:.9375rem; } /* ===== Acordeón FAQ ===== */ .faq { border-top:1px solid var(--linea); max-width:74ch; } .faq details { border-bottom:1px solid var(--linea); } .faq summary { display:flex; justify-content:space-between; align-items:center; gap:var(--e2); padding:var(--e3) 0; cursor:pointer; font-weight:600; font-size:1.0625rem; list-style:none; transition:color .16s var(--ease-out); } .faq summary::-webkit-details-marker { display:none; } .faq summary:hover { color:var(--azul); } .faq summary::after { content:""; width:11px; height:11px; flex:none; border-right:2px solid var(--tinta-3); border-bottom:2px solid var(--tinta-3); transform:rotate(45deg) translateY(-3px); transition:transform .24s var(--ease-out); } .faq details[open] summary::after { transform:rotate(-135deg) translateY(-3px); } .faq__c { padding:0 0 var(--e3); color:var(--tinta-2); max-width:70ch; } .faq details[open] .faq__c { animation:abrir .28s var(--ease-out); } @keyframes abrir { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { .faq details[open] .faq__c { animation:none; } } /* ===== Bloque CTA ===== */ .cta { border-radius:var(--r-xl); padding:clamp(var(--e4),5vw,var(--e5)); color:#fff; text-align:center; background:linear-gradient(150deg,var(--azul-osc),var(--azul) 60%,#2B4E8C); box-shadow:var(--s-4); position:relative; overflow:hidden; } .cta::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 50% 0%,rgba(245,158,11,.16),transparent 70%); } .cta > * { position:relative; } .cta h2 { margin-bottom:var(--e2); } .cta p { color:rgba(255,255,255,.8); margin-inline:auto; max-width:52ch; } .cta__b { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:var(--e4); } /* ===== Nube de enlaces (SEO interno) ===== */ .nube { display:flex; flex-wrap:wrap; gap:.5rem; } .nube a { padding:.5rem .9rem; border-radius:var(--r-full); border:1px solid var(--linea); background:#fff; font-size:.875rem; color:var(--tinta-2); box-shadow:var(--s-1); transition:border-color .16s var(--ease-out), color .16s var(--ease-out), transform .16s var(--ease-out); } .nube a:hover { border-color:var(--azul-claro); color:var(--azul); transform:translateY(-1px); } /* En el pie, las mismas pastillas en blanco solido sobre el azul marino se comian el bloque entero: eran lo primero que veia el ojo, y son enlaces secundarios. Aqui van vacias, con el borde justo para que se lean como pastillas, y se rellenan al pasar por encima. */ .nube--oscura a { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.78); box-shadow:none; } .nube--oscura a:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.34); color:#fff; } /* ===== Formulario ===== */ .form { display:grid; gap:var(--e2); } .campo label { display:block; font-size:.875rem; font-weight:600; margin-bottom:.35rem; color:var(--tinta); } .campo input, .campo select, .campo textarea { width:100%; padding:.8rem .9rem; border:1px solid var(--linea); border-radius:var(--r-sm); background:#fff; font-size:1rem; transition:border-color .16s var(--ease-out), box-shadow .16s var(--ease-out); } .campo input:focus, .campo select:focus, .campo textarea:focus { outline:none; border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(46,82,150,.12); } .campo textarea { min-height:110px; resize:vertical; } /* El desplegable traia la flecha del sistema operativo: al lado de campos con borde y radio propios, canta que ese control no es de la casa. La flecha va dibujada en el fondo (SVG en data:, sin peticion) y se deja sitio a la derecha para que no pise el texto. */ .campo select { appearance:none; -webkit-appearance:none; padding-right:2.6rem; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .85rem center; background-size:18px 18px; } .campo select:hover { border-color:#CBD5E1; } .campo small { display:block; margin-top:.3rem; color:var(--tinta-3); font-size:.8125rem; } .rgpd { display:flex; gap:.6rem; align-items:flex-start; font-size:.8125rem; color:var(--tinta-3); } .rgpd input { width:18px; height:18px; flex:none; margin-top:.15rem; accent-color:var(--azul); } .rgpd a { color:var(--azul); text-decoration:underline; } /* ===== Estados del formulario ===== */ .campo input:user-invalid, .campo select:user-invalid, .campo textarea:user-invalid { border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.10); } .campo input:user-valid, .campo select:user-valid { border-color:#86C79B; } .campo__error { display:none; margin-top:.35rem; font-size:.8125rem; color:#B91C1C; font-weight:500; } .campo input:user-invalid ~ .campo__error, .campo select:user-invalid ~ .campo__error, .campo textarea:user-invalid ~ .campo__error { display:block; animation:abrir .22s var(--ease-out); } .aviso { display:flex; gap:.75rem; align-items:flex-start; padding:var(--e2); border-radius:var(--r); font-size:.9375rem; margin-bottom:var(--e2); animation:abrir .3s var(--ease-out); } .aviso svg { width:20px; height:20px; flex:none; margin-top:.1rem; } .aviso--error { background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; } .aviso--error svg { stroke:#DC2626; } .form[data-enviando="1"] button[type=submit] { opacity:.72; pointer-events:none; } .form[data-enviando="1"] button[type=submit]::after { content:""; width:16px; height:16px; margin-left:.6rem; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:girar .7s linear infinite; } @keyframes girar { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .form[data-enviando="1"] button[type=submit]::after { animation-duration:2s; } } /* ===== Éxito (página de gracias) ===== */ /* Mismo verde que el resto de la web (el del punto de "atendemos" y el de WhatsApp). Aqui habia otros dos tonos sueltos: entre los tres, la pagina tenia tres verdes distintos que no significaban nada distinto. */ .exito { width:88px; height:88px; margin-inline:auto; border-radius:50%; display:grid; place-items:center; background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.34); } .exito svg { width:44px; height:44px; stroke:#0F9D58; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; } .js .exito { animation:exitoEntra .5s var(--ease) both; } .js .exito path { stroke-dasharray:32; stroke-dashoffset:32; animation:exitoTraza .45s var(--ease-out) .22s both; } @keyframes exitoEntra { from { opacity:0; transform:scale(.82); } to { opacity:1; transform:none; } } @keyframes exitoTraza { to { stroke-dashoffset:0; } } @media (prefers-reduced-motion:reduce) { .js .exito, .js .exito path { animation:none; stroke-dashoffset:0; } } /* ===== Contenido largo ===== */ /* Medida de lectura: sin esto las guías salían a 84 caracteres por línea y se leen peor cuanto más largas son. */ .prosa { max-width:68ch; } .prosa h2 { margin-top:var(--e5); margin-bottom:var(--e2); font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem); } .prosa h2:first-child { margin-top:0; } .prosa h3 { margin-top:var(--e4); margin-bottom:var(--e1); } .prosa p { color:var(--tinta-2); margin-bottom:var(--e2); } .prosa ul { color:var(--tinta-2); padding-left:1.2rem; margin-bottom:var(--e2); } .prosa li { margin-bottom:.4rem; } .prosa strong { color:var(--tinta); font-weight:600; } .prosa a { color:var(--azul); text-decoration:underline; text-underline-offset:3px; } /* ===== Pie ===== */ .pie { background:#0C1B33; color:rgba(255,255,255,.62); padding-block:var(--e5) var(--e3); font-size:.9375rem; } .pie__grid { display:grid; gap:var(--e4); margin-bottom:var(--e4); } @media (min-width:768px) { .pie__grid { grid-template-columns:1.4fr 1fr 1fr 1fr; } } .pie__tit { color:#fff; font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin:0 0 var(--e2); } .pie ul { list-style:none; padding:0; display:grid; gap:.6rem; } .pie a { transition:color .16s var(--ease-out); } .pie a:hover { color:#fff; } .pie__marca { display:flex; align-items:center; gap:.6rem; color:#fff; font-weight:700; letter-spacing:-.03em; margin-bottom:var(--e2); font-size:1.0625rem; } .pie__marca img { height:36px; width:auto; } .pie__legal { border-top:1px solid rgba(255,255,255,.1); padding-top:var(--e3); display:flex; flex-wrap:wrap; gap:var(--e2); justify-content:space-between; font-size:.8125rem; } .pie__legal nav { display:flex; flex-wrap:wrap; gap:var(--e2); } /* ===== Tira de confianza ===== */ .tira { background:var(--fondo-2); border-block:1px solid var(--linea); padding-block:var(--e3); } .tira ul { list-style:none; padding:0; margin:0; display:grid; gap:var(--e2) var(--e4); grid-template-columns:repeat(2,1fr); } @media (min-width:900px) { .tira ul { grid-template-columns:repeat(4,1fr); } } .tira li { display:flex; align-items:center; gap:.6rem; font-size:.875rem; font-weight:500; color:var(--tinta-2); } .tira svg { width:19px; height:19px; stroke:var(--azul-claro); flex:none; } /* ===== Compactación en móvil ===== */ @media (max-width:639px) { .sec { padding-block:var(--e4); } .tar { padding:var(--e2) var(--e3); } /* En movil la tarjeta de servicio pasa a fila: la foto al lado, no encima. Las tres pasan de 1.500 px apiladas a unos 500. */ .tar.tar--foto { padding:0; display:grid; grid-template-columns:118px 1fr; align-items:stretch; } .tar.tar--foto .tar__img { aspect-ratio:auto; height:100%; } .tar.tar--foto .tar__c { padding:var(--e2); gap:.15rem; } .tar.tar--foto .tar__eyebrow { margin-bottom:.15rem; } .tar.tar--foto h3 { font-size:1.0625rem; } .tar.tar--foto p { font-size:.875rem; line-height:1.5; } .tar.tar--foto .tar__mas { font-size:.875rem; padding-top:.5rem !important; } .tar__icono { margin-bottom:var(--e1); } .tar__icono svg { width:23px; height:23px; } .tar h3 { font-size:1.0625rem; } .tar p { font-size:.9375rem; } .grid { gap:var(--e2); } .nube { gap:.4rem; } .nube a { padding:.4rem .75rem; font-size:.8125rem; } .pasos { gap:var(--e2); } .heroe__datos { gap:var(--e1) var(--e3); } .heroe__dato { font-size:.875rem; } } /* ===== Entrada del héroe ===== Escalonada, corta y sin JS. El titular arranca casi enseguida (60 ms) para no retrasar el LCP, que es lo que mide Google. */ .js .heroe--entrada > .env > *, .js .heroe--entrada .heroe__grid > div > * { animation:heroeEntra .62s var(--ease) both; } .js .heroe--entrada .migas { animation-delay:.02s; } .js .heroe--entrada .chip24 { animation-delay:.06s; } .js .heroe--entrada h1 { animation:none; } .js .heroe--entrada .heroe__sub { animation-delay:.16s; } .js .heroe--entrada .heroe__ctas { animation-delay:.24s; } .js .heroe--entrada .heroe__datos { animation-delay:.32s; } @keyframes heroeEntra { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } /* El titular sube desde una máscara, una línea detrás de otra. La máscara es un div con overflow oculto; lo que se mueve es solo un transform. */ h1 .lin { display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; } h1 .lin > * { display:block; } h1 .acento { color:var(--acento); } .js .heroe--entrada h1 .lin > * { animation:subeLinea .8s var(--ease) both; } .js .heroe--entrada h1 .lin:nth-child(1) > * { animation-delay:.10s; } .js .heroe--entrada h1 .lin:nth-child(2) > * { animation-delay:.20s; } @keyframes subeLinea { from { transform:translate3d(0,105%,0); } to { transform:translate3d(0,0,0); } } /* El momento de la portada: la foto EMERGE de la oscuridad y, un instante después, un destello la cruza. Dos capas encima del velo azul (z-index 0) y antes que el contenido en el DOM, así el texto siempre queda por delante. Solo opacidad y transform: nada que obligue al navegador a recalcular. */ .heroe__luz { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .heroe__luz::before { content:""; position:absolute; inset:0; opacity:0; background: radial-gradient(120% 90% at 62% 45%,rgba(7,17,38,0) 24%,rgba(7,17,38,.92) 100%), linear-gradient(180deg,rgba(7,17,38,.55),rgba(7,17,38,.85)); } .heroe__luz::after { content:""; position:absolute; top:-30%; bottom:-30%; left:-70%; width:52%; opacity:0; transform:translate3d(0,0,0); background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.10) 30%, rgba(255,255,255,.34) 50%,rgba(255,255,255,.10) 70%, transparent 100%); } .js .heroe--entrada .heroe__luz::before { animation:emerge 1.35s var(--ease) both; } .js .heroe--entrada .heroe__luz::after { animation:destello 1.45s cubic-bezier(.3,.7,.3,1) .45s both; } @keyframes emerge { from { opacity:1; } to { opacity:0; } } @keyframes destello { 0% { opacity:0; transform:translate3d(0,0,0); } 18% { opacity:1; } 82% { opacity:1; } 100% { opacity:0; transform:translate3d(330%,0,0); } } @media (prefers-reduced-motion:reduce) { .js .heroe--entrada h1 .lin > * { animation:none; } .js .heroe--entrada .heroe__luz::before, .js .heroe--entrada .heroe__luz::after { animation:none; opacity:0; } } .js .heroe--entrada .heroe__fondo { animation:heroeFondo 1.1s var(--ease) both; } @keyframes heroeFondo { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { .js .heroe--entrada > .env > *, .js .heroe--entrada .heroe__grid > div > *, .js .heroe--entrada .heroe__fondo { animation:none; } } /* paralaje del fondo del héroe: lo mueve el JS con una variable, no el scroll directo, para no forzar layout en cada frame */ /* will-change solo donde el paralaje corre de verdad: mantener una capa viva en movil cuesta memoria y no sirve para nada. */ @media (hover:hover) and (min-width:960px) { .heroe__fondo { will-change:transform; } } .heroe--entrada .heroe__fondo { transform:translate3d(0,var(--par,0px),0); } /* el icono del teléfono se inclina al pasar por encima: microdetalle que hace que el botón principal se sienta vivo */ .btn--tel svg { transition:transform .28s var(--ease); transform-origin:center; } .btn--tel:hover svg { transform:rotate(-12deg) scale(1.08); } @media (prefers-reduced-motion:reduce) { .btn--tel:hover svg { transform:none; } } /* los chips de zona entran escalonados */ .nube a { transition:border-color .16s var(--ease-out), color .16s var(--ease-out), transform .16s var(--ease-out), background-color .16s var(--ease-out); } .js .nube[data-anim].visto a { animation:chipEntra .4s var(--ease) both; } @keyframes chipEntra { from { opacity:0; transform:translateY(6px) scale(.97); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { .js .nube[data-anim].visto a { animation:none; } } /* ===== Mapa de cobertura ===== */ .mapa { position:relative; border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(155deg,#12305A,#1B3D70 55%,#16305C); border:1px solid rgba(255,255,255,.08); box-shadow:var(--s-4); } .mapa__svg { display:block; width:100%; height:auto; } .mapa__trama line { stroke:rgba(255,255,255,.05); stroke-width:1; } .mapa__anillo { fill:none; stroke:rgba(255,255,255,.10); stroke-width:1; } .mapa__anillo--acento { stroke:rgba(245,158,11,.22); stroke-dasharray:4 10; } .mapa__punto { cursor:pointer; } .mapa__zona { fill:transparent; } .mapa__nucleo { fill:var(--acento); transition:r .2s var(--ease-out); } .mapa__pulso { fill:none; stroke:var(--acento); stroke-width:1.6; transform-box:fill-box; transform-origin:center; opacity:0; animation:mapaPulso 3.4s var(--ease-out) infinite; animation-delay:var(--d,0s); } /* Fuera de pantalla no se anima nada: son animaciones infinitas y el compositor sigue trabajando aunque el mapa esté a tres pantallas. */ .mapa[data-quieto="1"] * { animation-play-state:paused !important; } @keyframes mapaPulso { 0% { transform:scale(1); opacity:.85; } 70% { transform:scale(3.6); opacity:0; } 100% { transform:scale(3.6); opacity:0; } } .mapa__txt { fill:rgba(255,255,255,.72); font-size:12.5px; font-weight:600; letter-spacing:-.01em; paint-order:stroke; stroke:rgba(10,24,48,.55); stroke-width:3px; stroke-linejoin:round; transition:fill .18s var(--ease-out); } .mapa__mar-txt { fill:rgba(173,209,238,.42); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; pointer-events:none; } .mapa__punto:hover .mapa__nucleo, .mapa__punto:focus-visible .mapa__nucleo { r:8.5; } .mapa__punto:hover .mapa__txt, .mapa__punto:focus-visible .mapa__txt { fill:#fff; } .mapa__punto:focus-visible { outline:none; } .mapa__punto:focus-visible .mapa__zona { stroke:#fff; stroke-width:2; } .mapa__halo { fill:rgba(245,158,11,.14); stroke:rgba(245,158,11,.45); stroke-width:1.5; transform-box:fill-box; transform-origin:center; animation:mapaHalo 3s ease-in-out infinite; } @keyframes mapaHalo { 0%,100% { transform:scale(1); opacity:.9; } 50% { transform:scale(1.12); opacity:.6; } } .mapa__punto--aqui .mapa__nucleo { fill:#fff; } .mapa__punto--aqui .mapa__txt { fill:#fff; font-weight:700; } @media (prefers-reduced-motion:reduce) { .mapa__halo { animation:none; } } .mapa__pie { display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:center; padding:var(--e2) var(--e3) var(--e3); color:rgba(255,255,255,.7); font-size:.875rem; } .mapa__leyenda { display:inline-flex; align-items:center; gap:.5rem; } .mapa__marca { width:9px; height:9px; border-radius:50%; background:var(--acento); flex:none; } /* En el movil las etiquetas se pisaban entre ellas ("Sant Andreu" encima de "Badalona", "Sants-Montjuic" encima de "l'Hospitalet"): a ese ancho no caben veintidos nombres. Se ocultan y mandan los chips de debajo, que ademas si se pueden tocar. En escritorio se quedan. */ /* El mapa es de escritorio. En el movil ocupa media pantalla para enseñar veintidos puntos naranjas cuyos nombres no caben —se pisaban entre ellos—, asi que ahi manda la lista: los mismos destinos, con su nombre y con un area que se puede tocar. */ @media (max-width:767px) { .mapa { display:none; } .mapa__pie { padding:var(--e2); font-size:.8125rem; } } @media (min-width:768px) { .zonas-movil { display:none; } } .zonas-movil__tit { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3); font-weight:700; margin-bottom:var(--e2); } .zonas-movil .nube a { font-size:.9375rem; } @media (prefers-reduced-motion:reduce) { .mapa__pulso { animation:none; opacity:.45; } } /* ===== Preguntas frecuentes a dos columnas ===== A 1440 px las preguntas ocupaban la mitad izquierda y la derecha se quedaba en blanco: media pantalla vacia justo antes del cierre. El titulo pasa a una columna propia que ademas acompaña el scroll, y ahi vive la salida para quien no encuentra su duda. */ .faq-cols { display:grid; gap:var(--e4); } @media (min-width:960px) { .faq-cols { grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:var(--e6); align-items:start; } .faq-cols__lado { position:sticky; top:calc(68px + var(--e4)); } } .faq-cols .faq { max-width:none; border-top:none; } .faq-cols .faq details:first-child { border-top:1px solid var(--linea); } .faq__ayuda { margin-top:var(--e3); padding-top:var(--e3); border-top:1px solid var(--linea); color:var(--tinta-2); font-size:.9375rem; } .faq__ayuda a { color:var(--azul); font-weight:600; } .faq__ayuda a:hover { text-decoration:underline; } /* ===== Columna lateral que acompaña el scroll ===== En las paginas de zona la tarjeta de llamada se quedaba arriba y debajo quedaba un hueco muerto de 300 px mientras el texto seguia. */ @media (min-width:960px) { .pegado { position:sticky; top:calc(68px + var(--e3)); } } /* ===== Heroe interno sin foto ===== Con el texto a la izquierda y nada a la derecha, la banda azul se veia coja. Se centra y se acorta: es una portada de pagina, no un heroe. */ .heroe--corto .heroe__in { padding-block:clamp(var(--e4),4.5vw,var(--e5)); } .heroe--corto h1 { margin-bottom:0; } .heroe--centro .heroe__in { text-align:center; } .heroe--centro .migas ol { justify-content:center; } .heroe--centro h1 { max-width:22ch; margin-inline:auto; } .heroe--centro .heroe__sub { margin-inline:auto; max-width:58ch; } .heroe--centro .heroe__ctas { justify-content:center; } /* Centrados en cuatro columnas iguales, los datos quedaban con el icono despegado del texto y frases partidas a mitad ("Presupuesto antes de / empezar"). En fila, cada uno ocupa lo que necesita y el grupo entero va centrado: se lee como una linea de garantias, que es lo que es. */ .heroe--centro .heroe__datos { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--e2) var(--e3); max-width:none; margin-inline:auto; } /* Un punto menos de cuerpo y las cuatro garantias caben en una sola linea a 1140 px: partidas en 3 + 1 la fila quedaba coja. */ @media (min-width:1024px) { .heroe--centro .heroe__dato { font-size:.9rem; } } /* ===== Indice de las guias ===== */ .indice { border:1px solid var(--linea); border-radius:var(--r-lg); padding:var(--e3); background:var(--fondo-2); margin-bottom:var(--e5); } .indice__t { font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:var(--e2); } /* Al saltar a un apartado, la cabecera fija se comia el titular. */ .prosa h2[id], [id] { scroll-margin-top:calc(68px + var(--e2)); } .indice ol { margin:0; padding-left:1.2rem; display:grid; gap:.4rem; color:var(--tinta-2); } .indice a { color:var(--azul); } .indice a:hover { text-decoration:underline; } /* ===== Animación de entrada ===== */ .js [data-anim] { opacity:0; transform:translateY(12px); transition:opacity .42s var(--ease-out), transform .46s var(--ease); } .js [data-anim].visto { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce) { .js [data-anim] { opacity:1 !important; transform:none !important; transition:none !important; } }