:root { --tinta:#1a2332; --papel:#faf7f2; --papel-claro:#fffdf9; --turquesa:#2fa8bf; --dorado:#c9a86a; --texto-sec:#5a5648; --borde:#e8e2d8; --footer-texto:#a8b0ba; --f-titulo:'Bricolage Grotesque',sans-serif; --f-texto:'Source Sans 3',sans-serif; } *,*::before,*::after { box-sizing:border-box; } body { margin:0; font-family:var(--f-texto); font-size:1.0625rem; line-height:1.6; color:var(--texto-sec); background:var(--papel-claro); } h1,h2,h3,h4 { font-family:var(--f-titulo); color:var(--tinta); line-height:1.15; margin:0 0 .5em; } h1 { font-size:clamp(2rem,5vw,3rem); font-weight:700; } h2 { font-size:clamp(1.4rem,3vw,1.9rem); font-weight:600; } h3 { font-size:1.15rem; font-weight:600; } a { color:var(--turquesa); text-decoration:none; } a:hover { text-decoration:underline; } img { max-width:100%; height:auto; } .contenedor { max-width:1080px; margin:0 auto; padding:0 1.25rem; } .seccion { padding:3.5rem 0; } .seccion--papel { background:var(--papel); } .seccion--clara { background:var(--papel-claro); } .seccion--tinta { background:var(--tinta); } .seccion--tinta h2,.seccion--tinta h3 { color:var(--papel); } .seccion--tinta p { color:var(--footer-texto); } .kicker { font-family:var(--f-texto); font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--turquesa); } .btn { display:inline-block; background:var(--tinta); color:var(--papel); font-family:var(--f-texto); font-weight:600; font-size:.95rem; padding:.7em 1.6em; border-radius:3px; border:1px solid var(--tinta); } .btn:hover { background:var(--turquesa); border-color:var(--turquesa); text-decoration:none; } .btn--fantasma { background:transparent; color:var(--tinta); } /* Barrido del botón: el mismo haz que revela el titular de la home (ver «La captura»), a escala de botón. Dos pseudo-elementos porque conviven dos disparos: al aparecer y al hover. Con uno solo, salir del hover devolvería el elemento a la regla .es-visible y reejecutaría la animación de entrada. */ .btn--haz { position:relative; overflow:hidden; } .btn--haz::before, .btn--haz::after { content:""; position:absolute; left:0; right:0; top:-3px; height:3px; opacity:0; pointer-events:none; background:linear-gradient(90deg,transparent 4%,#ffe08a 50%,transparent 96%); box-shadow:0 0 16px 2px rgba(255,214,110,.55); } .btn--haz.es-visible::after { animation:btn-haz 1.2s cubic-bezier(.45,0,.55,1) forwards; } /* entrada, una vez */ .btn--haz:hover::before { animation:btn-haz .9s cubic-bezier(.45,0,.55,1) forwards; } /* repetible */ @keyframes btn-haz { from { top:-3px; opacity:1; } 92% { opacity:1; } to { top:100%; opacity:0; } } @media (prefers-reduced-motion:reduce) { .btn--haz::before, .btn--haz::after { display:none; } } .tarjeta { background:var(--papel); border:1px solid var(--borde); border-top:3px solid var(--turquesa); border-radius:4px; padding:1.5rem; } .screen-reader-text { position:absolute; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; } .cabecera { position:sticky; top:0; z-index:50; background:var(--papel-claro); box-shadow:0 2px 4px rgba(26,35,50,.04), 0 8px 24px rgba(26,35,50,.08); } .cabecera__fila { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.6rem; padding-bottom:.6rem; } .cabecera__logo img { display:block; height:48px; width:auto; } .cabecera__nav { display:flex; align-items:center; gap:1.2rem; } .cabecera__nav .menu { display:flex; gap:1.2rem; list-style:none; margin:0; padding:0; } .cabecera__nav a { color:var(--tinta); font-weight:600; font-size:.95rem; } .cabecera__nav a:hover { color:var(--turquesa); text-decoration:none; } .cabecera__burger { display:none; background:none; border:1px solid var(--borde); border-radius:4px; font-size:1.3rem; color:var(--tinta); padding:.2em .5em; } .pie { padding:2.5rem 0 1rem; } .pie__cols { display:grid; grid-template-columns:auto 1fr 1fr 1fr; gap:2.5rem; align-items:start; } .pie__logo img { height:64px; width:auto; display:block; } .pie__menu { list-style:none; margin:0; padding:0; } .pie__menu a { color:var(--footer-texto); font-size:.9rem; line-height:1.9; } .pie__menu a:hover { color:var(--papel); } .pie__copy { border-top:1px solid #2a3542; margin-top:1.5rem; padding-top:1rem; font-size:.8rem; color:#5f6b78; } @media (max-width:820px) { .cabecera__burger { display:block; } .cabecera__nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--papel-claro); box-shadow:0 12px 24px rgba(26,35,50,.10); flex-direction:column; padding:1rem; } .cabecera__nav.abierto { display:flex; } .cabecera__nav .menu { flex-direction:column; gap:.6rem; } .pie__cols { grid-template-columns:1fr; } } .hero { background:#f4f9fb url('../img/home_main_image.png') right center/cover no-repeat; padding:5.5rem 0 3.5rem; } .hero { background-image:image-set(url('../img/home_main_image.webp') type('image/webp'), url('../img/home_main_image.png') type('image/png')); } .hero__titulo { margin-bottom:.5em; } /* «La captura»: haz de luz que revela el titular al cargar. Dos capas de texto: fantasma (trazo hueco, sin digitalizar) y nítida, descubierta de arriba abajo al paso del haz. Haz amarillo claro con halo cálido; recorre el hero entero. */ .hero { position:relative; overflow:hidden; } .captura { position:relative; font-size:clamp(2.2rem,5.4vw,3.5rem); line-height:1.1; } .captura__fantasma { color:transparent; -webkit-text-stroke:1px rgba(26,35,50,.28); filter:blur(1px); } .captura__nitida { position:absolute; inset:0; color:var(--tinta); clip-path:inset(0 0 100% 0); animation:captura 3.8s cubic-bezier(.45,0,.55,1) .5s forwards; } .captura__nitida em { font-style:normal; color:var(--turquesa); } /* el haz ahora barre todo el hero: el texto se descubre solo mientras el haz cruza su franja (~30-55%) */ @keyframes captura { 0%,30% { clip-path:inset(0 0 100% 0); } 55%,100% { clip-path:inset(0 0 -10% 0); } } .hero__haz { position:absolute; left:0; right:0; height:3px; pointer-events:none; opacity:0; background:linear-gradient(90deg,transparent 4%,#ffe08a 50%,transparent 96%); box-shadow:0 0 16px 2px rgba(255,214,110,.55), 0 0 48px 10px rgba(255,196,70,.25); animation:hero-haz 3.8s cubic-bezier(.45,0,.55,1) .5s forwards; } @keyframes hero-haz { from { top:0; opacity:1; } 92% { opacity:1; } to { top:100%; opacity:0; } } @media (prefers-reduced-motion:reduce) { .captura__fantasma { visibility:hidden; } /* conserva el alto; el texto lo pone la capa nítida */ .captura__nitida { animation:none; clip-path:none; } .hero__haz { display:none; } } .hero__ctas { display:flex; gap:.8rem; flex-wrap:wrap; } .hero__lema { margin:2rem 0 0; padding-top:1.2rem; max-width:30ch; font-family:var(--f-titulo); font-weight:600; font-size:clamp(1.1rem,2.4vw,1.45rem); line-height:1.35; color:var(--tinta); } .servicios3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem; } .enlace-claro { color:var(--papel); border-bottom:1px solid var(--turquesa); } .equipo { display:grid; grid-template-columns:1.4fr 1fr; gap:2.5rem; align-items:center; } .equipo picture { margin:0 auto; } /* caja de imagen uniforme en toda la web: mismas dimensiones que la de /about/ (540:510). aspect-ratio + object-fit:cover fuerzan la caja aunque la fuente tenga otra proporción. */ .equipo img { width:100%; max-width:340px; aspect-ratio:18/17; object-fit:cover; border-radius:16px; border:1px solid var(--borde); display:block; } .cta-final { text-align:center; } /* el .5em heredado de h2 deja el botón pegado al titular; aquí va solo, sin texto de apoyo */ .cta-final h2 { margin-bottom:2.2rem; } @media (max-width:820px) { .servicios3,.equipo { grid-template-columns:1fr; } .hero { background-position:70% center; } } .pagina-cab { padding:2.2rem 0; } .pagina-cab h1 { color:var(--papel); font-size:clamp(1.6rem,4vw,2.2rem); margin:0; } .pagina-cab__miga { font-size:.75rem; color:var(--footer-texto); margin:0 0 .3em; } .pagina-cab__miga a { color:var(--footer-texto); } .contenido-pagina { max-width:760px; } /* fecha de vigencia de los textos legales: la exige el propio apartado de modificaciones */ .doc-fecha { font-size:.8rem; color:var(--texto-sec); opacity:.8; margin-top:-.6em; padding-bottom:.6em; border-bottom:1px solid var(--borde); } .contenido-pagina h2 { margin-top:1.6em; } .contenido-pagina ul { padding-left:1.2em; } .lista-servicios { columns:2; gap:2.5rem; } .servicio-ancla { scroll-margin-top:80px; } @media (max-width:820px){ .lista-servicios { columns:1; } } .fichas { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .ficha img { border-radius:3px; margin-bottom:.6rem; object-fit:cover; aspect-ratio:3/2; } @media (max-width:820px){ .fichas { grid-template-columns:1fr; } } input[name="vinfra-hp"] { position:absolute; left:-9999px; } /* el span que CF7 envuelve alrededor del honeypot deja hueco en la retícula si no se saca del flujo */ .wpcf7-form-control-wrap[data-name="vinfra-hp"] { position:absolute; left:-9999px; } /* --- Formulario de contacto: ficha de archivo --- etiqueta en versalitas sobre regla fina, sin cajas; el foco engrosa la regla en turquesa en vez de dibujar un recuadro. --- */ .form-ficha { background:var(--papel); border:1px solid var(--borde); border-radius:4px; padding:2rem 1.75rem; } .ff__kicker { margin:0 0 1.75rem; padding-left:.8rem; border-left:3px solid var(--turquesa); font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--turquesa); } .ff__fila { display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; } .ff__campo { display:block; margin-bottom:1.5rem; } .ff__label { display:block; margin-bottom:.3rem; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-sec); transition:color .15s ease; } .ff__campo:focus-within .ff__label { color:var(--turquesa); } .ff__campo .wpcf7-form-control-wrap { display:block; } .form-ficha input[type="text"], .form-ficha input[type="email"], .form-ficha textarea { width:100%; padding:.45rem 0; font-family:var(--f-texto); font-size:1.0625rem; color:var(--tinta); background:transparent; border:0; border-bottom:1.5px solid var(--borde); border-radius:0; transition:border-color .15s ease, box-shadow .15s ease; } .form-ficha textarea { min-height:8.5rem; resize:vertical; line-height:1.6; } .form-ficha input:hover, .form-ficha textarea:hover { border-bottom-color:var(--texto-sec); } /* box-shadow en vez de engrosar el borde: no desplaza el contenido al enfocar */ .form-ficha input:focus, .form-ficha textarea:focus { outline:none; border-bottom-color:var(--turquesa); box-shadow:0 1.5px 0 0 var(--turquesa); } .form-ficha ::placeholder { color:var(--texto-sec); opacity:.5; } .ff__pie { margin-top:.25rem; padding-top:1.5rem; border-top:1px solid var(--borde); } .ff__rgpd { margin-bottom:1.25rem; font-size:.92rem; line-height:1.5; } .ff__rgpd .wpcf7-list-item { margin:0; } .ff__rgpd label { display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; } .ff__rgpd input[type="checkbox"] { flex:0 0 auto; width:1.05rem; height:1.05rem; margin-top:.18rem; accent-color:var(--turquesa); } .form-ficha input[type="submit"] { width:auto; padding:.7em 1.8em; font-family:var(--f-texto); font-weight:600; font-size:.95rem; color:var(--papel); background:var(--tinta); border:1px solid var(--tinta); border-radius:3px; cursor:pointer; transition:background-color .15s ease, border-color .15s ease; } .form-ficha input[type="submit"]:hover { background:var(--turquesa); border-color:var(--turquesa); box-shadow:none; } /* validación: la regla del campo pasa a rojo y el aviso cuelga debajo de la propia regla */ .form-ficha .wpcf7-not-valid { border-bottom-color:#b3261e; } .form-ficha .wpcf7-not-valid-tip { margin-top:.35rem; font-size:.82rem; color:#b3261e; } .form-ficha .wpcf7-response-output { margin:1.25rem 0 0; padding:.8rem 1rem; border:1px solid var(--borde); border-left:3px solid var(--texto-sec); border-radius:3px; font-size:.95rem; } .form-ficha form.sent .wpcf7-response-output { border-left-color:var(--turquesa); } .form-ficha form.invalid .wpcf7-response-output, .form-ficha form.failed .wpcf7-response-output { border-left-color:#b3261e; } .form-ficha .wpcf7-spinner { margin:0 0 0 .8rem; } @media (max-width:820px) { .ff__fila { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { .form-ficha *, .ff__label { transition:none; } } .contacto-cols { display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; } @media (max-width:820px) { .contacto-cols { grid-template-columns:1fr; } } .screen-reader-text:focus { position:static; width:auto; height:auto; clip:auto; overflow:visible; background:var(--papel); color:var(--tinta); padding:.5em 1em; z-index:100; } .cabecera__logo { display:flex; align-items:center; gap:.55rem; text-decoration:none; } .cabecera__logo:hover { text-decoration:none; } .franja-zeutschel { display:flex; align-items:center; gap:2.5rem; } .franja-zeutschel > div { flex:1; } /* mismo tamaño que los chips de fabricante de /services/, para que el logo no compita con el titular */ .franja-zeutschel__chip { flex:0 0 auto; background:#fff; border-radius:8px; padding:.9rem; display:flex; align-items:center; justify-content:center; transition:transform .15s ease; } .franja-zeutschel__chip img { width:88px; height:88px; display:block; } .franja-zeutschel__chip:hover { transform:scale(1.04); } @media (max-width:820px) { .franja-zeutschel { flex-direction:column; align-items:flex-start; } .franja-zeutschel__chip { align-self:center; } } .servicios-intro { display:grid; grid-template-columns:1.4fr 1fr; gap:2.5rem; align-items:center; } .servicios-intro picture { margin-left:auto; } /* imagen pegada a la derecha al no llenar su columna */ .servicios-intro picture img { width:100%; max-width:340px; aspect-ratio:18/17; object-fit:cover; border-radius:16px; border:1px solid var(--borde); display:block; } .lista-servicios li { list-style:none; position:relative; padding-left:1.4em; margin-bottom:.45em; } .lista-servicios li::before { content:""; position:absolute; left:0; top:.42em; width:.6em; height:.6em; border-radius:2px; background:var(--turquesa); } .lista-servicios { padding-left:0; } .servicio-ancla__num { font-family:var(--f-titulo); font-weight:700; font-size:2.4rem; color:var(--dorado); line-height:1; margin:0 0 .1em; } .fabricantes { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.4rem; } /* about: texto + imagen recuperada de la web antigua (team02), mismo patrón que servicios-intro */ .about-intro, .serie-c { display:grid; grid-template-columns:1.4fr 1fr; gap:2.5rem; align-items:center; } /* márgenes de borde del texto entran en la altura del grid item (no colapsan): los anulo para que el centrado vertical se calcule sobre el texto visible, no sobre la caja */ .about-intro .contenido-pagina > :first-child, .serie-c .contenido-pagina > :first-child, .motor .contenido-pagina > :first-child { margin-top:0; } .about-intro .contenido-pagina > :last-child, .serie-c .contenido-pagina > :last-child, .motor .contenido-pagina > :last-child { margin-bottom:0; } /* Hijo directo: son la foto grande de la columna derecha. Acotado con > para no alcanzar las imágenes que van dentro del texto (p. ej. la banda de sellos junto al botón). */ .about-intro picture, .serie-c > picture { margin:0 auto; } .about-intro picture img, .serie-c > picture img { width:100%; max-width:340px; aspect-ratio:18/17; object-fit:cover; border-radius:16px; border:1px solid var(--borde); display:block; } /* resalte solo tipográfico: peso y color de tinta, sin trazo de fondo */ .marca { font-weight:600; color:var(--tinta); } /* "El motor de la digitalización": vídeo + texto, lado invertido respecto a la Serie C para dar ritmo. El vídeo lleva controls (WCAG 2.2.2: pausa para movimiento >5s). */ /* sin margin-top: desde que el vídeo tiene sección propia, el padding de .seccion ya separa */ .motor { display:grid; grid-template-columns:1.3fr 1fr; gap:2.5rem; align-items:center; } /* height:auto imprescindible: el atributo height="720" del