/* =========================================================
NOVANTIS — CSS base unificado (móvil-first)
Versión optimizada: sin duplicados, mismas funciones
- Se han fusionado variantes repetidas (video-corporativo, hero-buttons, btn-sound)
- Se evita competir con LCP (hero) y se mantiene accesibilidad
========================================================= */
/* ------------------------------
Variables (paleta y escala)
------------------------------ */
:root{
/* Colores corporativos */
--c-primary:#003366; /* Titulares */
--c-accent:#0077b6; /* Enlaces */
--c-cta:#b34700; /* CTA accesible (AA) */
--c-cta-hover:#8f3700;
--c-cta-focus:#ffd8bf;
/* Neutros */
--c-bg:#ffffff;
--c-bg-soft:#f7fbff;
--c-card:#ffffff;
--c-text:#1f2937;
--c-muted:#6b7280;
/* Navegación */
--c-antracita:#1E1E1E; /* Panel móvil */
--menu-border:rgba(255,255,255,.10);
/* Dimensiones */
--container:1100px;
--header-h:64px;
--radius:14px;
/* Sombras */
--shadow-sm:0 4px 10px rgba(0,0,0,.06);
--shadow-md:0 10px 24px rgba(0,0,0,.10);
/* Espaciado y tipografía fluidos */
--space-1:.5rem; /* ~8px */
--space-2:1rem; /* ~16px */
--space-3:1.5rem; /* ~24px */
--space-4:2rem; /* ~32px */
--h1: clamp(1.6rem, 1.2rem + 3.2vw, 2.6rem);
--h2: clamp(1.3rem, 1.1rem + 2.2vw, 1.8rem);
--h3: clamp(1.15rem, 1rem + 1.4vw, 1.25rem);
--font-scale-1: clamp(0.95rem, 0.9rem + 0.5vw, 1.05rem);
--font-scale-2: clamp(1.05rem, 0.9rem + 0.9vw, 1.25rem);
/* Borde y sombra UI genérica */
--border: 1px solid rgba(0,0,0,.08);
--shadow: 0 8px 24px rgba(0,0,0,.08);
/* Cookies (altura reservada si aplica) */
--cookie-h:0px;
}
/* =========================================================
Reset y base tipográfica
========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ overflow-x:hidden; }
body{
margin:0; min-height:100vh; display:flex; flex-direction:column;
font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
font-weight:400; line-height:1.6;
color:var(--c-text); background:var(--c-bg);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }
:focus-visible{ outline:3px solid rgba(0,119,182,.5); outline-offset:2px; border-radius:6px; }
a,button,input,textarea{ touch-action:manipulation; }
/* Accesibilidad: utilitarios */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Alias compatibilidad */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Contenedor */
.container{ width:100%; max-width: var(--container); margin-inline:auto; padding-inline: 15px; }
/* Titulares y textos */
h1,h2,h3{
color:var(--c-primary); margin:0 0 .85rem; line-height:1.3; letter-spacing:-.015em;
}
h1{ font-weight:700; font-size:var(--h1); }
h2{ font-weight:700; font-size:var(--h2); }
h3{ font-weight:600; font-size:var(--h3); }
p{ margin:0 0 1rem; }
.texto-justificado{ text-align:justify; }
@media (max-width:600px){ .texto-justificado{ text-align:left; } }
/* Secciones */
.section{ padding:clamp(2rem,3vw,4rem) 0; }
.section--soft{ background:var(--c-bg-soft); }
/* Enlaces */
a{ color:var(--c-accent); }
a:hover{ text-decoration:underline; }
/* =========================================================
Header y navegación
========================================================= */
header{ background:var(--c-primary); position:sticky; top:0; z-index:20000; }
.site-header{ transition:box-shadow .2s ease; border-bottom:12px solid #fff; }
.scrolled .site-header{ box-shadow:0 8px 20px rgba(0,0,0,.08); }
.header-container{ display:flex; align-items:center; gap:.75rem; padding:.6rem max(14px, env(safe-area-inset-right)) .6rem max(14px, env(safe-area-inset-left)); }
.logo{ width:auto; height:60px; display:flex; align-items:center; flex-shrink:0; margin-left:0; }
.logo img, .logo svg{ display:block; height:100%; width:auto; }
.menu-toggle{ background:none; border:none; color:#fff; font-size:1.7rem; width:44px; height:44px; display:none; place-items:center; margin-left:auto; cursor:pointer; }
/* Nav escritorio */
#main-nav{ display:flex; align-items:center; gap:20px; margin-left:auto; }
#main-nav a{ color:#fff; text-decoration:none; font-weight:600; padding:0 10px; display:inline-flex; align-items:center; gap:6px; }
@media (min-width:992px){
#main-nav a{ position:relative; }
#main-nav a::after{ content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:2px; background:currentColor; opacity:0; transform:scaleX(.2); transform-origin:center; transition:opacity .2s, transform .2s; }
#main-nav a:hover::after{ opacity:.7; transform:scaleX(1); }
}
/* Nav móvil + overlay (una sola versión) */
@media (max-width:991px){
.menu-toggle{ display:inline-grid; }
#main-nav{
position:fixed; top:var(--header-h); left:0; right:0; background:var(--c-antracita); color:#fff; border-radius:0 0 16px 16px; box-shadow:0 12px 28px rgba(0,0,0,.25); z-index:13000;
display:block; padding:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease; max-height:calc(100vh - var(--header-h) - var(--cookie-h)); overflow:auto; -webkit-overflow-scrolling:touch;
}
#main-nav.active{ opacity:1; visibility:visible; pointer-events:auto; }
#main-nav a{ display:flex; align-items:center; gap:12px; padding:14px 16px; color:#fff; border-top:1px solid var(--menu-border); -webkit-tap-highlight-color:transparent; position:relative; z-index:1; }
#main-nav a:first-child{ border-top:0; }
#main-nav a i{ background:#fff; color:#0B4B87; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 2px 4px rgba(0,0,0,.10); transition:background-color .25s, color .25s, transform .15s; }
#main-nav a:hover i, #main-nav a:active i{ background:#0077b6; color:#fff; transform:translateY(-1px); }
.nav-cta{ position:sticky; bottom:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.22)); padding:10px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.10); }
.nav-cta .btn-cta-nav{ width:100%; }
.nav-overlay{ position:fixed; top:var(--header-h); right:0; bottom:0; left:0; background:rgba(0,0,0,.75); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:12900; }
html.nav-open .nav-overlay{ opacity:1; pointer-events:auto; }
html.nav-open .site-header{ border-bottom:0 !important; }
}
/* Franja inferior del header sin cambiar la altura (evita el salto) */
.site-header{ border-bottom:0 !important; position:sticky; top:0; z-index:20000; }
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:12px; background:#fff; pointer-events:none; transition:height .18s ease; }
html.nav-open .site-header::after{ height:0; }
html.nav-open, html.nav-open body{ overflow: hidden; }
@media (max-width: 991px){ #main-nav, .nav-overlay{ top: var(--header-h) !important; } }
/* =========================================================
Hero reutilizable (imagen o vídeo)
========================================================= */
.inicio-hero{ position:relative; min-height:100svh; overflow:hidden; }
.hero-estructura{
position:relative; width:100%; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:clamp(24px,4vw,40px) 16px; text-align:center; color:#fff; overflow:hidden;
isolation:isolate; /* evita repintados sobre LCP */
}
.hero-estructura::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.55)); will-change:opacity,transform; backface-visibility:hidden; }
.hero-estructura .hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-1; }
.contenido-hero{ position:relative; z-index:1; width:min(1000px,92vw); margin-inline:auto; color:#fff; background:rgba(0,0,0,.18); border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.10); padding:clamp(.8rem,2vw,1.2rem); backdrop-filter:none; -webkit-backdrop-filter:none; }
@media (min-width:992px){ .contenido-hero{ backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px); } }
/* Asegura que el hero no sea perezoso */
.inicio-hero, .hero-estructura, .hero-estructura .hero-media{ content-visibility:visible !important; contain:none !important; }
/* =========================================================
Botones (CTA unificado)
========================================================= */
.btn-cta{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.2rem; border-radius:12px; background:var(--c-cta); color:#fff; font-weight:700; text-decoration:none; border:1px solid transparent; box-shadow:0 6px 18px rgba(179,71,0,.22); transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease; white-space:nowrap; hyphens:none; word-break:normal; }
.btn-cta:hover{ transform:translateY(-2px); background:var(--c-cta-hover); box-shadow:0 12px 28px rgba(143,55,0,.28); }
.btn-cta:focus-visible{ outline:3px solid var(--c-cta-focus); outline-offset:2px; box-shadow:0 0 0 2px #fff,0 0 0 6px var(--c-cta-focus); }
/* CTA dentro del nav */
.btn-cta-nav{ display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1.1rem; border-radius:999px; font-weight:700; text-decoration:none; background:var(--c-cta); color:#fff; text-transform:uppercase; border:2px solid transparent; transition:transform .15s, background-color .2s, box-shadow .25s; box-shadow:0 6px 18px rgba(179,71,0,.22); }
.btn-cta-nav:hover{ transform:translateY(-2px); background:var(--c-cta-hover); box-shadow:0 12px 28px rgba(143,55,0,.28); }
@media (max-width: 991px){ nav .nav-cta { width:100%; padding:0 15px; margin-top:10px; } nav .btn-cta-nav { display:block; width:100%; background-color:#e26a00; color:#fff; text-align:center; padding:12px 0; border-radius:6px; font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:.5px; } nav .btn-cta-nav:hover{ background-color:#c85d00; } }
/* =========================================================
Rejillas y tarjetas reutilizables
========================================================= */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:clamp(16px, 2.2vw, 24px); max-width:1180px; margin-inline:auto; padding-inline:6px; }
.card{ background:var(--c-card); border:1px solid #e6edf6; border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:clamp(16px, 2.2vw, 20px); display:flex; flex-direction:column; gap:.5rem; text-align:left; transition:transform .18s ease, box-shadow .18s ease; }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card .icon{ font-size:2rem; color:var(--c-accent); }
.card h3{ margin:.2rem 0 .2rem; }
.card p{ color:#444; margin:0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.card .btn-cta, .card .btn{ margin-top:auto; align-self:flex-start; }
/* Variante pasos (metodología) */
.cards--steps .card{ text-align:center; align-items:center; }
.card--step .step{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:999px; background:var(--c-cta); color:#fff; font-weight:800; margin-bottom:.65rem; box-shadow:0 6px 14px rgba(255,122,0,.28), 0 0 0 2px rgba(255,122,0,.18) inset; }
/* CTA bajo grids */
.cta-servicios{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:16px 0 8px; }
/* =========================================================
Página: Nosotros (equipo y entregables)
========================================================= */
.page-header{ text-align:left; }
.page-header h1{ font-size:var(--h1); line-height:1.2; margin:0 0 var(--space-2); }
.page-subtitle{ font-size:var(--font-scale-2); margin:0; }
.deliverables{ list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.deliverables li{ display:flex; align-items:flex-start; gap:.5rem; }
.deliverables i{ line-height:1.4; }
.team-item{ display:grid; gap: var(--space-2); align-items:center; }
.team-figure{ margin:0; }
.team-photo{ width:220px; height:220px; border-radius:50%; object-fit:cover; box-shadow: var(--shadow); }
.team-meta h3{ font-size:var(--h3); margin:0 0 .25rem; }
.link-ext{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.25rem; text-decoration:underline; }
@media (min-width:768px){ .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } .team-item{ grid-template-columns: auto 1fr; gap: var(--space-3); } .team-photo{ width:240px; height:240px; } }
@media (min-width:1100px){ .cards{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* =========================================================
Servicios (grid y tipografía)
========================================================= */
.grid-services{ display:grid; gap: var(--space-2); }
.service-item{ background:#fff; border: var(--border); border-radius: var(--radius); padding: var(--space-3); box-shadow: var(--shadow); }
.service-item h3{ margin:0 0 .25rem; font-size: var(--h3); }
.service-item .icon{ font-size:1.2rem; margin-right:.5rem; vertical-align:middle; }
@media (min-width:768px){ .grid-services{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .grid-services{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* =========================================================
Breadcrumb (versión única)
========================================================= */
.section--crumbs{ padding-top: 12px; padding-bottom: 0; }
.crumbs{ background: var(--c-bg-soft); border: 1px solid #e6edf6; border-radius: 16px; padding: 12px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; box-shadow: var(--shadow-sm); }
.crumbs-back{ color:var(--c-accent); text-decoration:underline; white-space:nowrap; flex:0 0 auto; }
.crumbs-list{ list-style:none; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; padding:0; color:var(--c-muted); }
.crumbs-list a{ color:var(--c-accent); text-decoration:none; }
.crumbs-list a:hover{ text-decoration:underline; }
.crumbs-list li + li::before{ content:"/"; margin:0 6px; color:#9aa7b2; }
.crumbs-list li[aria-current="page"]{ color:#8aa0b4; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 768px){ .crumbs{ flex-direction:column; align-items:flex-start; padding:12px; gap:6px; } .crumbs-back{ order:-1; } .crumbs-list{ gap:6px; max-width:100%; } .crumbs-list li[aria-current="page"]{ display:inline-block; max-width:100%; white-space:nowrap; } }
.breadcrumb-nav{ width:auto !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
/* =========================================================
FAQ (acordeón)
========================================================= */
.faq-container{ display:grid; gap: var(--space-2); }
.faq-item{ border: var(--border); border-radius: var(--radius); background:#fff; box-shadow: var(--shadow); overflow:hidden; }
.faq-question{ width:100%; text-align:left; padding: var(--space-3); font: inherit; font-weight:600; font-size: var(--h3); background:transparent; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.faq-question:focus-visible{ outline:2px solid #000; outline-offset:2px; }
.faq-item.open .faq-question::after{ content:"–"; }
.faq-question::after{ content:"+"; font-weight:700; transform: translateY(-1px); }
.faq-answer{ padding: 0 var(--space-3) var(--space-3); }
.faq-cta-final{ text-align:center; }
/* =========================================================
Blog — listado
========================================================= */
.blog-card .card-link{ display:block; color:inherit; text-decoration:none; }
.blog-card .card-link:focus-visible{ outline:2px solid #000; outline-offset:3px; border-radius: var(--radius); }
.blog-figure{ margin:0 0 var(--space-2); }
.blog-picture{ display:block; aspect-ratio: 1200 / 630; overflow:hidden; border-radius: calc(var(--radius) - 2px); }
.blog-picture img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-title{ font-size: var(--h3); margin: 0 0 .25rem; }
.blog-meta{ margin: 0 0 var(--space-2); font-size: .95em; opacity:.8; }
@media (min-width:768px){ .blog-listado .grid-services{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .blog-listado .grid-services{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* =========================================================
Contacto — formulario y mapa
========================================================= */
.contact-form .field{ margin-bottom: var(--space-2); }
.contact-form label{ display:block; font-weight:600; margin-bottom:.35rem; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form textarea{ width:100%; padding:.8rem 1rem; border:var(--border); border-radius:12px; background:#fff; box-shadow: inset 0 1px 0 rgba(0,0,0,.02); }
.contact-form textarea{ resize:vertical; min-height:160px; }
.contact-form .checkbox-line{ display:flex; align-items:flex-start; gap:.6rem; }
.contact-form .checkbox-line input{ margin-top:.25rem; }
.error-list{ background:#fff4f4; border:1px solid #f5c2c7; color:#b4232a; padding: var(--space-2); border-radius:12px; margin-bottom: var(--space-2); }
.error-list a{ text-decoration:underline; }
.error-text{ display:block; color:#b4232a; margin-top:.35rem; }
.is-invalid{ border-color:#b4232a !important; outline:0; }
.mapa{ width:100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow:hidden; }
.mapa iframe{ width:100%; height:100%; border:0; display:block; }
@media (min-width:768px){ .contacto .grid-services{ grid-template-columns: 2fr 1fr; align-items:start; } }
/* =========================================================
Botones flotantes y ScrollTop
========================================================= */
.botones-flotantes{ position:fixed; right:18px; bottom:calc(18px + var(--cookie-h)); z-index:12800; transition:bottom .25s ease; }
.boton-flotante{ width:48px; height:48px; background:#25D366; color:#fff; border-radius:50%; font-size:22px; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 2px 10px rgba(0,0,0,.3); transition:transform .3s ease, background .3s ease; }
.boton-flotante.whatsapp:hover{ background:#1ebe5b; transform:scale(1.08); }
@media (max-width:768px){ .botones-flotantes{ right:10px; } .boton-flotante{ width:45px; height:45px; font-size:20px; } }
#scrollTop{ position:fixed; right:18px; bottom:calc(78px + var(--cookie-h)); z-index:12700; width:44px; height:44px; border-radius:999px; border:1px solid #e6edf6; background:#fff; color:var(--c-primary); font-size:18px; box-shadow:0 10px 24px rgba(16,24,40,.12); display:grid; place-items:center; cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s, transform .25s, background .2s, color .2s; }
#scrollTop:hover{ background:var(--c-accent); color:#fff; }
#scrollTop.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
@media (max-width:768px){ #scrollTop{ right:12px; bottom:calc(70px + var(--cookie-h)); } }
/* =========================================================
Footer (versión única, coherente)
========================================================= */
footer{ background:#003366; color:#fff; text-align:center; padding:20px 15px; font-size:.95rem; margin-top:auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
footer a{ color:#fff; text-decoration:underline; }
footer a:hover{ color:#ccc; }
.footer-nap{ font-style:normal; max-width:780px; margin:0 auto 10px; }
.footer-nap p{ margin:6px 0; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.footer-nap a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }
.footer-nap a:hover{ text-decoration:underline; }
.footer-nap i{ width:1.1rem; text-align:center; }
.enlaces-legales{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:8px 0; }
.enlaces-legales a{ color:inherit; text-decoration:none; }
.enlaces-legales a:hover{ text-decoration:underline; }
@media (max-width:767px){ footer, .footer-nap, .enlaces-legales, footer p{ text-align:left !important; } .footer-nap p{ justify-content:flex-start; } .enlaces-legales{ justify-content:flex-start; } }
/* =========================================================
Preferencias de movimiento
========================================================= */
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }
/* =========================================================
Alineación responsive por página
========================================================= */
@media (min-width: 992px){
.page-header, .nosotros p, .nosotros li,
.servicios p, .servicios li,
.faq p, .faq li,
.blog-listado p, .blog-listado li,
.contacto p, .contacto li, .contacto label{ text-align:justify; text-justify:inter-word; }
.nosotros p, .servicios p, .faq p, .blog-listado .excerpt, .contacto p{ max-width:75ch; }
}
/* Separadores blancos entre bloques */
.separator-white{ height:16px; background:#fff; }
/* Lead centrado */
.lead-center{ max-width:62ch; margin-inline:auto; text-align:center; }
/* Caja azul para relacionados */
.caja-azul{ background: var(--c-bg-soft); border:1px solid #e6edf6; border-radius: var(--radius); padding: var(--space-3); box-shadow: var(--shadow-sm); }
.caja-azul h3{ margin-top:0; }
.caja-azul ul{ margin:0; padding-left:1.1rem; }
/* =========================================================
Historia (título + tarjeta centrada)
========================================================= */
.section.historia .cards{ display:flex; flex-direction:column; row-gap:2rem; margin-top:2rem; }
.section.historia .card{ max-width:800px; width:100%; margin-inline:auto; }
.section.historia .card p{ text-align:justify; text-justify:inter-word; hyphens:auto; }
@media (max-width:767px){ .section.historia .cards{ row-gap:1rem; margin-top:1.25rem; } }
/* =========================================================
Skip link accesible
========================================================= */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:fixed; left:16px; top:16px; width:auto; height:auto; padding:.6rem .9rem; background:#000; color:#fff; border-radius:8px; z-index:99999; outline:2px solid #fff; outline-offset:2px; }
/* =========================================================
Hyphenation móvil (párrafos)
========================================================= */
@media (max-width: 768px){ .container{ padding-left:16px; padding-right:16px; } h1, h2, h3, h4, p{ word-wrap:break-word; } p{ text-align:justify; text-justify:inter-word; hyphens:auto; word-break:break-word; } h1, h2, h3, h4, h5, h6{ hyphens:manual; word-break:normal; } html{ -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; } }
/* =========================================================
FORM — honeypot oculto
========================================================= */
.hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path: inset(50%); white-space:nowrap; border:0; padding:0; margin:0; }
/* =========================================================
Contacto — ajustes de espaciamiento
========================================================= */
.contact-form form{ gap:18px; }
.contact-form .field{ margin-bottom:0; }
.contact-form .aviso-legal{ margin-top:18px; padding:12px 14px; border-radius:12px; }
.contact-form .aviso-legal + .g-recaptcha{ margin-top:14px; display:inline-block; }
.contact-form .g-recaptcha + .btn-cta{ margin-top:14px; }
.contact-form label{ margin-bottom:.4rem; line-height:1.3; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form textarea{ padding:12px 14px; }
@media (max-width: 600px){ .contact-form form{ gap:20px; } .contact-form .aviso-legal{ margin-top:20px; } .contact-form .g-recaptcha + .btn-cta{ width:100%; } }
.page-header h1, .page-subtitle { text-align:justify; }
@media (max-width: 768px){ .page-header h1, .page-subtitle { text-align:left; } }
/* =========================================================
COOKIE BANNER — SINGLE SOURCE OF TRUTH (.is-open)
========================================================= */
.cookie-banner{ display:block !important; position:fixed !important; z-index:2147483647 !important; left:50% !important; bottom:clamp(12px, 2vw, 20px) !important; width:min(680px, calc(100% - 24px)) !important; background:#fff !important; color:#1f2937 !important; border:1px solid #e6edf6 !important; border-radius:16px !important; box-shadow:0 10px 24px rgba(16,24,40,.12) !important; padding:16px 18px !important; transform:translateX(-50%) translateY(24px) !important; opacity:0 !important; pointer-events:none !important; transition:transform .35s ease, opacity .35s ease !important; }
.cookie-banner.is-open, .cookie-banner.show{ transform:translateX(-50%) translateY(0) !important; opacity:1 !important; pointer-events:auto !important; }
.cookie-content{ max-width:1100px; margin:0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.cookie-text h3{ margin:0 0 .25rem; font-size:1.05rem; font-weight:700; color:var(--c-primary, #003366); }
.cookie-text p{ margin:0; line-height:1.5; }
.cookie-text a{ color:var(--c-accent, #0077b6); text-decoration:underline; }
.cookie-buttons{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.btn-cookie{ border:1px solid #dfe7f2; background:#f6faff; color:#00366; padding:.6rem 1rem; border-radius:999px; font-weight:700; cursor:pointer; transition: background .2s, transform .15s, box-shadow .2s; }
.btn-cookie.rechazar:hover{ background:#e2ecfb; transform:translateY(-1px); }
.btn-cookie.aceptar{ background:var(--c-cta, #b34700); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(179,71,0,.22); }
.btn-cookie.aceptar:hover{ background:var(--c-cta-hover, #8f3700); transform:translateY(-1px); box-shadow:0 12px 28px rgba(143,55,0,.28); }
@media (max-width:540px){ .cookie-content{ flex-direction:column; align-items:stretch; gap:12px; } .cookie-buttons{ width:100%; } .btn-cookie{ width:100%; } }
@media (prefers-color-scheme: dark){ .cookie-banner{ background:#0f172a !important; color:#e5e7eb !important; border-color:#1f2a44 !important; } .cookie-text h3{ color:#cfe3ff; } .btn-cookie{ background:#111827; color:#e5e7eb; border-color:#2b364f; } .btn-cookie.rechazar:hover{ background:#1f2937; } }
/* ===== Header & Logo — responsive ===== */
@media (min-width:769px) and (max-width:991px){ .header-container{ justify-content:space-between; padding-left:12px !important; padding-right:16px !important; } .logo{ height:60px !important; } .menu-toggle{ display:inline-grid; margin-left:0 !important; } }
@media (max-width:768px){ .header-container{ justify-content:space-between; padding-left:8px !important; padding-right:12px !important; } .logo{ height:60px !important; } .menu-toggle{ display:inline-grid; margin-left:0 !important; } }
/* ===== Respaldo institucional (monocromo) ===== */
.logos { padding-top: 2rem; padding-bottom: 2rem; }
.logos .lead-center { max-width: 70ch; margin: .75rem auto 2rem; text-align:justify; }
.logos__grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); align-items:center; justify-items:center; }
@media (min-width: 640px){ .logos__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ .logos__grid { grid-template-columns: repeat(6, 1fr); } }
.logos__item{ margin:0; padding: .75rem 1rem; border-radius: 14px; display:grid; place-items:center; transition: transform .2s ease, opacity .2s ease; opacity:.95; }
.logos__item:hover { transform: translateY(-2px); opacity: 1; }
.logos__item img{ display:block; height:48px; max-width:100%; object-fit:contain; filter: grayscale(1) contrast(1.05) brightness(0); opacity:.9; transition: opacity .2s ease, filter .2s ease; }
.logos__item:hover img { opacity:1; }
.logos--light { background:#fff; }
.logos--light .logos__item { background: rgba(15,23,42,.03); border: 1px solid rgba(15,23,42,.06); }
.logos--light .logos__item:hover { background: rgba(15,23,42,.05); }
.logos--light .logos__item img { filter: grayscale(1) contrast(1.05) brightness(0); }
.logos--dark { background:#0f172a; color:#e6eaf2; }
.logos--dark .logos__item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.logos--dark .logos__item:hover { background: rgba(255,255,255,.08); }
.logos--dark .logos__item img { filter: grayscale(1) contrast(1.05) invert(1) brightness(1.1); }
@media (prefers-reduced-motion: reduce){ .logos__item, .logos__item img { transition:none; } }
/* =========================================================
MÉTRICAS / RESULTADOS EN NÚMEROS (metricas)
========================================================= */
.metricas{ background: var(--c-bg-soft); padding: clamp(2rem, 3vw, 4rem) 0; }
.metricas__title{ text-align:center; margin-bottom: clamp(1rem, 2vw, 1.5rem); color: var(--c-primary); font-size: var(--h2); }
.metricas__grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px, 2.2vw, 24px); max-width: 1180px; margin-inline:auto; padding-inline:6px; content-visibility:auto; contain-intrinsic-size:1px 340px; }
@media (min-width: 768px){ .metricas__grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.metricas__card{ background: var(--c-card); border: 1px solid #e6edf6; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(16px, 2.2vw, 20px); text-align:center; transition: transform .18s ease, box-shadow .18s ease; contain:content; }
.metricas__card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.metricas__value{ font-variant-numeric: tabular-nums lining-nums; line-height:1; font-weight:800; font-size: clamp(2rem, 5vw, 2.6rem); color: var(--c-primary); }
.metricas__label{ margin-top:.5rem; color:#444; font-size: var(--font-scale-1); }
.metricas.metricas--dark{ background: #0f172a; }
.metricas.metricas--dark .metricas__title{ color:#e5e7eb; }
.metricas.metricas--dark .metricas__card{ background:#111827; border-color:#1f2a44; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.metricas.metricas--dark .metricas__value{ color:#fff; }
.metricas.metricas--dark .metricas__label{ color:#cbd5e1; }
@media (prefers-reduced-motion: reduce){ .metricas__card{ transition:none; } }
/* =========================================================
VIDEO CORPORATIVO — versión única, sin duplicados
- Móvil: ancho cómodo, sin overlay pesado
- Desktop: mockup compacto
========================================================= */
.video-corporativo{ text-align:center; padding: 1.25rem 1rem; }
.video-corporativo .container{ display:flex; flex-direction:column; align-items:center; }
.video-corporativo .video-wrapper{ position:relative; width:100%; max-width:420px; margin:0 auto; border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.video-corporativo .video-corp{ width:100%; height:auto; max-height:65dvh; object-fit:contain; display:block; border-radius:0; }
.video-actions{ margin-top:.75rem; }
.video-actions .btn-cta{ display:block; margin:0 auto; }
/* Botón de sonido redondo (móvil + escritorio) */
.btn-sound-round{ position:absolute; right:10px; bottom:10px; width:42px; height:42px; border-radius:999px; border:none; display:grid; place-items:center; padding:0; background: rgba(255,255,255,.95); color:#003976; cursor:pointer; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: transform .15s ease, box-shadow .2s ease, background .2s ease; text-indent:-9999px; overflow:hidden; }
.btn-sound-round::before{ content: attr(data-icon); text-indent:0; display:block; text-align:center; line-height:42px; font-size:1rem; }
.btn-sound-round:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.25); }
.btn-sound-round:focus-visible{ outline:3px solid #66a3ff; outline-offset:2px; }
/* Responsive tamaños */
@media (min-width: 769px){ .video-corporativo .video-wrapper{ max-width:300px; } }
@media (max-width: 480px){ .video-corporativo{ padding-top:1rem; padding-bottom:.75rem; } .video-corporativo .video-wrapper{ max-width:360px; } }
/* =========================================================
Proyectos: tarjetas con CTA alineado
========================================================= */
.proyectos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; align-items:stretch; }
.proyecto-card{ display:grid !important; grid-template-rows: auto 1fr auto; background:#fff; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.08); overflow:hidden; height:100%; }
.proyecto-card > img{ width:100%; height:220px; object-fit:cover; display:block; }
.proyecto-card > h3, .proyecto-card > .meta, .proyecto-card > p{ padding:0 18px; margin: .5rem 0; }
.proyecto-card > h3{ margin-top:14px; }
.proyecto-card > .meta{ color:#37506b; }
.proyecto-card > a.btn-cta, .proyecto-card .content > a.btn-cta{ align-self:flex-start; margin: 0 18px 18px; }
/* =========================================================
Botonera del HERO (centrada y uniforme)
========================================================= */
.hero-buttons{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:.4rem; }
.hero-buttons .btn-cta{ min-width:170px; padding:.9rem 1.2rem; border-radius:12px; font-weight:700; text-align:center; line-height:1.2; }
.btn-primary{ background: var(--c-cta); color:#fff; border:2px solid var(--c-cta); box-shadow:0 6px 18px rgba(179,71,0,.22); }
.btn-primary:hover{ background: var(--c-cta-hover); border-color: var(--c-cta-hover); box-shadow:0 12px 28px rgba(143,55,0,.28); }
.btn-outline{ background:transparent; color:#fff; border:2px solid #fff; box-shadow:none; }
.btn-outline:hover{ background:#fff; color:#1f2937; border-color:#fff; transform:translateY(-2px); }
.hero-buttons .btn-cta:focus-visible{ outline:3px solid var(--c-cta-focus); outline-offset:2px; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 6px var(--c-cta-focus); }
@media (max-width: 480px){ .hero-buttons .btn-cta{ width:100%; } }
/* =========================================================
Ajustes varios / calidad de vida
========================================================= */
/* Equipo (Nosotros) en 1 columna y tarjeta a la izquierda */
.nosotros .cards{ grid-template-columns:1fr; justify-items:start; max-width: var(--container); margin-inline:auto; }
.nosotros .cards .card{ width:100%; }
@media (min-width:768px){ .nosotros .team-item{ grid-template-columns:240px 1fr; } }
.entregables-servicio{ margin-top:2.5rem; }
@media (min-width:768px){ .entregables-servicio{ margin-top:3rem; } }
/* Evitar que el hero compita con LCP */
.hero-estructura .hero-media{ will-change:transform; }
.contenido-hero h1 {
color: #fff; /* Forzamos blanco */
}
/* === CTA 'Hablemos de tu proyecto' — targeteando .container.cta-servicios === */
section[aria-labelledby="titulo-cta"] .container.cta-servicios{
/* ocupa todo el ancho y centra su contenido */
width:100%;
max-width:100%;
margin-left:0;
margin-right:0;
display:grid !important; /* más fuerte que flex heredado */
place-items:center !important; /* centra en ambos ejes */
text-align:center !important; /* por si el hijo es inline */
gap:0;
}
section[aria-labelledby="titulo-cta"] .container.cta-servicios > .btn-cta{
display:inline-flex !important; /* evita que algún reset lo cambie */
margin:0 auto !important; /* por si hay márgenes heredados */
float:none !important; /* neutraliza floats antiguos */
align-self:center !important; /* por si hay align-self heredado */
justify-self:center !important; /* por si el grid intenta estirarlo */
}
/* (opcional) si existiera algún wrapper extra dentro */
section[aria-labelledby="titulo-cta"] .container.cta-servicios > *{
justify-self:center !important;
align-self:center !important;
}
.nav-cta {
display: none !important;
}
/* Equipo: en móvil, centrar la foto */
@media (max-width: 768px) {
.team-item {
flex-direction: column; /* apila imagen y texto */
align-items: center; /* centra horizontalmente */
text-align: center; /* centra el texto */
}
.team-item .team-figure {
display: flex;
justify-content: center;
margin-bottom: 1rem; /* espacio entre foto y texto */
}
.team-item .team-photo {
margin: 0 auto; /* fuerza centrado */
}
}
/* Equipo: en móvil, centrar la foto */
@media (max-width: 768px) {
.team-item {
flex-direction: column; /* apila imagen y texto */
align-items: center; /* centra horizontalmente */
text-align: center; /* centra el texto */
}
.team-item .team-figure {
display: flex;
justify-content: center;
margin-bottom: 1rem; /* espacio entre foto y texto */
}
.team-item .team-photo {
margin: 0 auto; /* fuerza centrado */
}
}
/* Centrar el botón dentro de la tarjeta de proyectos */
.proyecto-card .btn-metodologia {
margin: 1rem auto 0; /* auto = lo centra horizontalmente */
display: inline-flex; /* mantiene el estilo de botón */
align-self: center; /* asegura centrado en el flex-column */
float: none; /* evita que otros estilos lo desplacen */
}
/* Equipo: en móvil, centrar foto y texto (cambiar a flex) */
@media (max-width: 768px) {
.team-item{
display:flex; /* ← antes era grid */
flex-direction:column;
align-items:center;
text-align:center;
}
.team-item .team-figure{
display:flex;
justify-content:center;
margin-bottom:1rem;
width:100%;
}
.team-item .team-photo{
margin:0 auto; /* fuerza centrado */
}
}
/* Botón "Ver metodología" centrado en la tarjeta */
.proyecto-card .btn-metodologia{
margin:1rem auto 0; /* auto = centrado horizontal */
display:inline-flex;
align-self:center; /* por si el contenedor es flex */
justify-self:center; /* por si el contenedor es grid */
float:none;
}
.proyecto-card .content{
display:flex;
flex-direction:column;
min-height:240px; /* ya lo tienes */
}
.proyecto-card .btn-metodologia{
margin-top:auto; /* baja el botón al fondo */
align-self:center; /* lo centra horizontalmente */
justify-self:center; /* por si algún layout cambia a grid */
display:inline-flex;
float:none;
}
/* ===== Listado ===== */
.proyectos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.proyecto-card{display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.08);overflow:hidden}
.proyecto-card img{width:100%;height:220px;object-fit:cover;display:block}
.proyecto-card .content{padding:18px;display:flex;flex-direction:column;gap:.5rem;min-height:240px}
.proyecto-card .meta{color:#37506b}
/* Centrar el botón dentro de la tarjeta */
.btn-metodologia{
margin-top:auto; /* se mantiene pegado al fondo del contenido */
align-self:center; /* centra horizontalmente en el flex-column */
display:inline-flex; /* asegura dimensiones del botón */
}
/* Centrar SIEMPRE el botón de metodología dentro de la tarjeta */
.proyecto-card .content {
display:flex;
flex-direction:column;
text-align:center;
}
.proyecto-card .content > a.btn-cta.btn-metodologia{
margin-top:auto;
margin-left:auto;
margin-right:auto;
margin-bottom:18px;
align-self:center !important;
display:inline-block;
float:none !important;
}
/* centra el contenido del header como el resto de la página */
.header-container{
max-width: var(--container);
margin-inline: auto;
padding-inline: 15px; /* igual a .container */
}
/* antes: #main-nav { margin-left:auto; } */
#main-nav{
margin-left: clamp(16px, 3vw, 40px); /* separación limpia vs logo */
}
@media (min-width: 992px){
.header-container{ justify-content: space-between; }
}
.header-container{max-width:var(--container);margin-inline:auto;padding-inline:15px;}
#main-nav{margin-left:clamp(16px,3vw,40px);} /* hueco lógico respecto al logo */
/* grid de contacto */
@media (min-width: 992px){
.contacto .grid-services{
grid-template-columns: 2fr 1fr; /* ya lo tienes, mantenlo */
column-gap: clamp(20px, 3vw, 36px);
}
/* tarjeta derecha “pegajosa” para lecturas largas */
.contacto .contact-nap{
position: sticky;
top: calc(var(--header-h) + 16px);
}
}
.page-header{margin-bottom: .5rem;}
.page-header h1{margin-bottom:.4rem;}
.page-subtitle{max-width: 70ch;}
.contact-form .g-recaptcha{margin-top:12px;}
.contact-form .g-recaptcha + .btn-cta{margin-top:14px;}
/* Centrar el header */
.main-header .header-container {
display: flex;
justify-content: space-between; /* Logo a la izq, menú a la der */
align-items: center;
max-width: 1200px; /* o el ancho que uses */
margin: 0 auto; /* centra dentro de la página */
padding: 0 20px; /* espacio lateral */
}
/* Ajuste fino del menú */
#main-nav {
margin-left: 40px; /* equilibra la distancia entre logo y menú */
}
.proyecto-card img {
aspect-ratio: 16/9;
object-fit: cover;
width: 100%;
height: auto;
}
.proyecto-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.proyecto-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
header .logo img {
height: auto; /* Mantiene proporción */
max-height: 60px; /* Ajusta según lo que quieras de alto */
width: auto; /* No forzar ancho fijo */
}
header .logo img {
max-height: 60px;
object-fit: contain; /* No se deforma nunca */
}
/* Ajustar el icono hamburguesa en móvil */
.menu-toggle {
margin-right: 10px; /* ajusta el espacio al borde */
}
/* ===== Desktop (por defecto) ===== */
.header-container{
/* padding simétrico para la barra en escritorio */
padding: .6rem max(24px, env(safe-area-inset-right))
.6rem max(24px, env(safe-area-inset-left));
display:flex;
align-items:center;
gap:.75rem;
}
.menu-toggle{ display:none; } /* No mostrar hamburguesa en escritorio */
#main-nav{
display:flex;
align-items:center;
gap:20px;
margin-left:auto; /* Empuja el menú a la derecha */
}
/* ===== Móvil / tablet ===== */
@media (max-width: 991px){
.header-container{
justify-content:space-between;
padding: .6rem 12px; /* un poco menos de padding lateral */
}
.menu-toggle{
display:inline-grid; /* muestra el hamburguesa */
margin-left:auto;
margin-right:8px; /* separa del borde derecho */
width:44px; height:44px;
place-items:center;
}
/* Tu menú desplegable móvil como ya lo tienes */
#main-nav{
position:fixed;
top:var(--header-h);
left:0; right:0;
background:var(--c-antracita);
color:#fff;
border-radius:0 0 16px 16px;
box-shadow:0 12px 28px rgba(0,0,0,.25);
z-index:13000;
display:block;
padding:0;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .18s ease;
max-height:calc(100vh - var(--header-h) - var(--cookie-h));
overflow:auto;
-webkit-overflow-scrolling:touch;
}
#main-nav.active{ opacity:1; visibility:visible; pointer-events:auto; }
}
/* No recortar el texto en la sección "Nuestra historia" */
.section.historia .card p,
.historia .card p {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
}
/* ===== HEADER — Single Source of Truth ===== */
header{ background:var(--c-primary); position:sticky; top:0; z-index:20000; }
.site-header{ border-bottom:0 !important; position:sticky; top:0; z-index:20000; }
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:12px; background:#fff; pointer-events:none; transition:height .18s ease; }
html.nav-open .site-header::after{ height:0; }
.header-container{
display:flex; align-items:center; gap:.75rem;
height: var(--header-h); /* usa tu variable */
max-width: var(--container);
margin-inline:auto;
padding-inline: 15px;
}
/* Logo SIEMPRE a la izquierda */
.logo{ width:auto; height:60px; display:flex; align-items:center; flex-shrink:0; margin:0; }
.logo img, .logo svg{ height:100%; width:auto; display:block; }
/* Menú a la derecha en escritorio */
#main-nav{ margin-left:auto; display:flex; align-items:center; gap:20px; }
#main-nav a{ color:#fff; text-decoration:none; font-weight:600; padding:0 10px; display:inline-flex; align-items:center; gap:6px; }
/* Hamburguesa (oculta en desktop) */
.menu-toggle{ display:none; background:none; border:none; color:#fff; font-size:1.7rem; width:44px; height:44px; place-items:center; margin-left:12px; cursor:pointer; }
/* Hover underline en desktop */
@media (min-width:992px){
#main-nav a{ position:relative; }
#main-nav a::after{
content:""; position:absolute; left:10px; right:10px; bottom:-6px;
height:2px; background:currentColor; opacity:0; transform:scaleX(.2);
transform-origin:center; transition:opacity .2s, transform .2s;
}
#main-nav a:hover::after{ opacity:.7; transform:scaleX(1); }
}
/* Nav móvil */
@media (max-width:991px){
.header-container{ justify-content:space-between; padding-inline:12px; }
.menu-toggle{ display:inline-grid; margin-left:auto; margin-right:8px; }
#main-nav{
position:fixed; top:var(--header-h); left:0; right:0;
background:var(--c-antracita); color:#fff;
border-radius:0 0 16px 16px; box-shadow:0 12px 28px rgba(0,0,0,.25);
display:block; padding:0; opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .18s ease;
max-height:calc(100vh - var(--header-h) - var(--cookie-h));
overflow:auto; -webkit-overflow-scrolling:touch; z-index:13000;
}
#main-nav.active{ opacity:1; visibility:visible; pointer-events:auto; }
#main-nav a{ display:flex; align-items:center; gap:12px; padding:14px 16px; color:#fff; border-top:1px solid var(--menu-border); }
#main-nav a:first-child{ border-top:0; }
.nav-overlay{ position:fixed; top:var(--header-h); right:0; bottom:0; left:0; background:rgba(0,0,0,.75); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:12900; }
html.nav-open .nav-overlay{ opacity:1; pointer-events:auto; }
}
/* Imagen del logo sin deformación */
header .logo img{ max-height:60px; width:auto; height:auto; object-fit:contain; }
@media (min-width: 992px){
#main-nav { margin-left: 40px; } /* o usa clamp(20px, 4vw, 60px) */
}
#main-nav a i {
font-size: 0.95em;
line-height: 1;
display: inline-flex;
align-items: center;
}
:root {
--header-h: 64px; /* base */
}
@media (min-width: 992px){
:root {
--header-h: 80px; /* escritorio */
}
.header-container {
height: var(--header-h);
}
header .logo img {
max-height: 70px; /* crece proporcional al header */
}
}
/* Logo: nunca deformar */
.site-header .logo { /* el ![]()
*/
display: block !important;
height: auto !important;
max-height: 60px; /* controla tamaño sin deformar */
width: auto !important; /* mantiene proporción */
}
/* Wrapper del logo bien alineado */
.logo-telefono {
display: flex;
align-items: center;
padding-right: clamp(16px, 3vw, 40px); /* un poco más “hacia la derecha” */
}
/* Más separación con el menú si lo quieres */
#main-nav { margin-left: clamp(32px, 6vw, 120px); }
@media (min-width: 1200px){
.site-header .logo { max-height: 64px; }
}
/* Logo: nunca deformar y un poco más grande en desktop */
.site-header .logo {
display: block !important;
width: auto !important;
height: auto !important;
max-height: 60px; /* base */
}
/* más tamaño según ancho de pantalla */
@media (min-width: 1200px){
.site-header .logo { max-height: 68px; }
}
@media (min-width: 1440px){
.site-header .logo { max-height: 72px; }
}
/* Empujar un poco el menú (más aire a la derecha del logo) */
.logo-telefono{
display:flex; align-items:center;
padding-left: clamp(16px, 3vw, 32px); /* separa del borde izq. */
margin-right: clamp(20px, 4vw, 56px); /* empuja el menú */
}
/* Si prefieres tocar el propio nav en lugar del wrapper del logo: */
/* #main-nav { margin-left: clamp(24px, 5vw, 72px); } */
@media (min-width: 992px){
#main-nav {
margin-left: 150px; /* o el valor que prefieras */
}
}
/* Mueve solo el logo hacia la izquierda en escritorio */
@media (min-width: 992px) {
.logo-telefono {
margin-left: -100px; /* ajusta el valor según lo pegado que quieras */
}
}
/* FAB Formulario (al lado del de WhatsApp) */
.boton-flotante.formulario{
right: 92px; /* deja espacio al WA */
background:#0ea5e9;
}
.boton-flotante.formulario:hover{ filter:brightness(1.08); }
/* Panel mini-formulario */
.mini-form{
position: fixed;
right: 16px;
bottom: 92px;
width: min(360px, 92vw);
background: #fff;
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0,0,0,.25);
border: 1px solid #e5e7eb;
padding: 14px;
z-index: 1100;
animation: mfSlide .18s ease-out;
}
@keyframes mfSlide{ from { transform: translateY(8px); opacity:0 } to { transform: none; opacity:1 } }
.mini-form[hidden]{ display:none !important; }
.mini-form__head{
display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.25rem;
}
.mini-form__head h3{ margin:0; font-size:1.05rem; color:#0f172a }
.mini-form__sub{ margin:.15rem 0 .6rem; color:#475569; font-size:.92rem }
.mini-form__close{
border:none; background:transparent; font-size:1.6rem; line-height:1;
cursor:pointer; color:#64748b; padding:.1rem .25rem; border-radius:8px;
}
.mini-form__close:hover{ background:#f1f5f9; color:#0f172a }
.mini-form__group{ border:none; padding:0; margin:.25rem 0 .35rem }
.mini-form__legend{ font-weight:600; margin-bottom:.25rem; color:#0f172a }
.mini-form__checks{ display:grid; grid-template-columns:1fr 1fr; gap:.35rem .75rem; font-size:.92rem }
.mini-form__checks label{ display:flex; gap:.35rem; align-items:center }
.mini-form__row{ margin:.45rem 0 }
.mini-form__row.two{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem }
.mini-form__row.chk{ font-size:.92rem }
.mini-form__row label{ display:block; color:#0f172a; font-weight:600; font-size:.92rem }
.mini-form__row input,
.mini-form__row textarea{
width:100%; margin-top:.25rem; padding:.55rem .6rem; border:1px solid #cbd5e1; border-radius:10px;
font:inherit; color:#0f172a; background:#fff;
}
.mini-form__row input:focus,
.mini-form__row textarea:focus{ outline:3px solid #bfdbfe; border-color:#60a5fa }
.mini-form__errores{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; border-radius:10px; padding:.5rem .6rem; font-size:.9rem; margin:.35rem 0 }
.mini-form__actions{ display:flex; justify-content:flex-end; margin-top:.35rem }
/* ocultar floats cuando el mini-form recibe foco (igual que haces con el de contacto) */
.botones-flotantes.is-hidden{ opacity:0; pointer-events:none; }
@media (max-width: 480px){
.mini-form{ right: 8px; bottom: 82px; width: 94vw; }
.boton-flotante.formulario{ right: 84px; }
}
/* ===== FABs (WhatsApp + Form) ===== */
.botones-flotantes{
position: fixed;
right: calc(16px + env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom));
display: grid;
gap: 12px;
z-index: 1100;
}
.boton-flotante{
width: 56px; height: 56px;
border-radius: 999px;
display: grid; place-items: center;
box-shadow: 0 8px 20px rgba(0,0,0,.25);
transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
will-change: transform;
}
.boton-flotante:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.boton-flotante.whatsapp{ background:#25D366; color:#fff; }
.boton-flotante.formulario{ background:#1e90ff; color:#fff; }
.boton-flotante .icon,
.boton-flotante i{ width: 22px; height: 22px; color:#fff; fill:#fff; }
/* ==== Mini formulario: anclado al FAB, con max-height + scroll ==== */
.mini-form{
position: fixed;
right: calc(16px + env(safe-area-inset-right) + 56px + 12px); /* 56 ancho FAB + 12 gap */
bottom: calc(16px + env(safe-area-inset-bottom));
width: min(420px, 92vw);
max-height: min(78vh, 720px);
overflow: auto;
background: #fff;
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0,0,0,.28);
padding: 16px;
z-index: 1150;
opacity: 0;
transform: translateY(8px) scale(.98);
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
}
.mini-form.is-open{
opacity: 1;
transform: none;
pointer-events: auto;
}
.mini-form__overlay{
position: fixed; inset: 0;
background: rgba(0,0,0,.25);
z-index: 1140;
opacity: 0; pointer-events: none;
transition: opacity .15s ease;
}
.mini-form__overlay.is-open{ opacity: 1; pointer-events: auto; }
/* Cabecera y estilos menores (opcionales si ya los tienes) */
.mini-form__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mini-form__close{ border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer; }
.mini-form__sub{ margin:.25rem 0 1rem; color:#64748b; }
.mini-form__group{ margin: 8px 0 12px; }
.mini-form__checks{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.mini-form__row{ margin:10px 0; }
.mini-form__row.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mini-form__row input, .mini-form__row textarea{
width:100%; border:1px solid #dbe2ea; border-radius:10px; padding:10px 12px; font:inherit;
}
.mini-form__errores{ color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; padding:8px 10px; border-radius:10px; margin-top:6px; }
@media (max-width: 640px){
.mini-form{
right: 8px; left: 8px;
bottom: calc(8px + env(safe-area-inset-bottom));
width: auto; max-height: 80vh;
}
.mini-form__checks{ grid-template-columns:1fr; }
.mini-form__row.two{ grid-template-columns:1fr; }
}
/* Honeypot invisible y no interactivo */
.hp{
position:absolute !important;
left:-10000px !important;
width:1px !important;
height:1px !important;
opacity:0 !important;
pointer-events:none !important;
}
/* ===================== FABs (WhatsApp, Subir, Formulario) ===================== */
.botones-flotantes{
position:fixed;
right:clamp(12px,2vw,18px);
bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
display:flex;
flex-direction:column; /* Orden: arriba → abajo (WA, ↑, Form) */
align-items:flex-end;
gap:10px; /* <— espacio reducido */
z-index:2147483000;
pointer-events:none; /* sólo los botones reciben click */
}
.botones-flotantes.is-hidden{opacity:.0;transform:translateY(12px);pointer-events:none;transition:.18s}
.botones-flotantes .boton-flotante{
pointer-events:auto;
width:56px;height:56px;border-radius:999px;
display:grid;place-items:center;
color:#fff;background:#1e96ff; /* color por defecto (se sobrescribe por variante) */
box-shadow:0 10px 24px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.12);
transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
border:0;
}
@media (max-width:480px){
.botones-flotantes .boton-flotante{width:54px;height:54px}
.botones-flotantes{gap:9px}
}
.boton-flotante:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.14)}
.boton-flotante:active{transform:translateY(0)}
.boton-flotante:focus-visible{outline:3px solid #9ecbff;outline-offset:2px}
/* Iconos internos en blanco (FA o SVG) */
.boton-flotante i,
.boton-flotante .icon{width:26px;height:26px;line-height:1;color:currentColor;fill:currentColor}
.boton-flotante svg{display:block}
/* Variantes */
.boton--wa{background:#25D366;color:#fff} /* WhatsApp */
.boton--form{background:#1e96ff;color:#fff} /* Formulario (azul) */
.boton--light{background:#fff;color:#0b4a7f;border:1px solid rgba(0,0,0,.08)} /* Subir */
#scrollTop[hidden]{display:none !important}
/* ===================== Mini-form (overlay + panel) ===================== */
.mini-form__overlay{
position:fixed;inset:0;background:rgba(15,23,42,.36);
opacity:0;pointer-events:none;transition:opacity .15s;z-index:9997
}
.mini-form__overlay.is-open{opacity:1;pointer-events:auto}
.mini-form{
position:fixed;
right:clamp(12px,2vw,18px);
bottom:calc(env(safe-area-inset-bottom,0px) + 86px); /* deja hueco a los FABs */
width:380px;max-width:calc(100% - 32px);
background:#fff;border-radius:16px;
box-shadow:0 20px 40px rgba(0,0,0,.18),0 2px 10px rgba(0,0,0,.1);
padding:16px;transform:translateY(12px);opacity:0;
transition:transform .15s ease,opacity .15s ease;z-index:9998
}
.mini-form.is-open{opacity:1;transform:translateY(0)}
@media (max-width:640px){
.mini-form{right:12px;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 80px);width:auto}
}
.mini-form__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.mini-form__head h3{margin:0;font-size:1.05rem}
.mini-form__close{border:0;background:#f3f4f6;width:36px;height:36px;border-radius:10px;cursor:pointer}
.mini-form__sub{margin:.2rem 0 .6rem;color:#475569}
.mini-form__group{margin:0 0 .6rem}
.mini-form__legend{font-weight:600;margin-bottom:.35rem}
.mini-form__checks{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .75rem}
.mini-form__row{margin:.5rem 0}
.mini-form__row.two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.mini-form__row input,.mini-form__row textarea{width:100%;border:1px solid #d7dde5;border-radius:10px;padding:.6rem .7rem}
.mini-form__row input:focus,.mini-form__row textarea:focus{outline:3px solid #9ecbff;outline-offset:1px;border-color:#93c5fd}
.mini-form__row.chk{margin:.35rem 0}
.mini-form__errores{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:10px;padding:.5rem .75rem;margin:.4rem 0}
.mini-form__actions{display:flex;justify-content:flex-end;margin-top:.4rem}
.mini-form__actions .btn-cta{padding:.6rem 1rem;border-radius:10px}
/* Ajuste para que los FABs nunca tapen el panel */
@media (min-width:641px){
.mini-form{max-height:calc(100vh - 120px);overflow:auto}
}
/* === FABs: tamaño original + alineación vertical === */
.botones-flotantes{
position: fixed;
right: clamp(12px, 2vw, 16px);
bottom: calc(16px + var(--cookie-h, 0px));
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px; /* juntos pero con aire */
z-index: 2147483000;
}
/* tamaño de los botones como antes */
.botones-flotantes .boton-flotante{
width: 48px;
height: 48px;
border-radius: 999px;
display: grid;
place-items: center;
box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
/* tamaño de los iconos como antes */
.botones-flotantes .boton-flotante i,
.botones-flotantes .boton-flotante .icon{
width: 22px;
height: 22px;
font-size: 22px; /* para el glifo ↑ */
line-height: 1;
}
/* variantes de color */
.boton--wa{ background:#25D366; color:#fff; }
.boton--form{ background:#1e90ff; color:#fff; }
.boton--light{ background:#fff; color:#0b4a7f; border:1px solid rgba(0,0,0,.08); }
/* anula el posicionamiento antiguo del #scrollTop cuando está dentro del wrapper */
#scrollTop{
position: static !important;
right: auto !important;
bottom: auto !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
#scrollTop[hidden]{ display:none !important; } /* sigue ocultándose con JS */
/* === Colores definitivos de los FABs (override) === */
.boton--wa{
background:#25D366 !important; /* verde WhatsApp */
color:#fff !important;
}
.boton--wa:hover{ background:#1ebe5b !important; }
.boton--form{
background:#b34700 !important; /* azul formulario */
color:#fff !important;
}
/* Iconos en blanco dentro del botón del formulario (FA o SVG) */
.boton--form .icon,
.boton--form i{
width:22px; height:22px;
color:#fff !important;
fill:#fff !important;
line-height:1;
}
/* Botón “subir” claro (si lo usas) */
.boton--light{
background:#fff !important;
color:#0b4a7f !important;
border:1px solid rgba(0,0,0,.08) !important;
}
/* ===== FIX mini-form en móvil: altura, scroll y layout ===== */
.mini-form{
/* límite de altura SIEMPRE + scroll suave */
max-height: calc(100dvh - 24px - env(safe-area-inset-bottom,0px));
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
@supports (height: 100svh){
.mini-form{ max-height: calc(100svh - 24px - env(safe-area-inset-bottom,0px)); }
}
/* móvil: márgenes laterales, ancho fluido, sin transform que desplaza en iOS */
@media (max-width: 640px){
.mini-form{
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom,0px));
width: auto;
transform: none;
}
/* Servicios en 1 columna y filas dobles en 1 col */
.mini-form__checks{ grid-template-columns: 1fr; }
.mini-form__row.two{ grid-template-columns: 1fr; gap: 10px; }
/* Cabecera fija para que el botón de cerrar no se pierda */
.mini-form__head{
position: sticky;
top: 0;
background: #fff;
padding-top: 6px;
z-index: 2;
}
}
/* Botón de cerrar más limpio en iOS */
.mini-form__close{
width: 36px; height: 36px;
border-radius: 999px;
background: #f3f4f6;
border: 1px solid #dbe2ea;
}
/* Identificador/clase del contenedor del formulario flotante */
#contact-float {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9999;
max-height: calc(100vh - 48px);
overflow: auto;
}
/* Fuerza en escritorio que NO use top */
@media (min-width: 992px){
#contact-float {
top: auto !important;
bottom: 24px !important;
transform: none !important;
}
}
/* Mini-form siempre abajo; nunca usa top en desktop */
@media (min-width: 992px){
#mini-form{
position: fixed;
top: auto !important;
bottom: calc(16px + var(--cookie-h, 0px)) !important;
right: calc(16px + env(safe-area-inset-right)) !important;
transform: none !important;
}
}
.mapa {
position: relative;
width: 100%;
height: 350px; /* altura estándar */
max-width: 100%;
border-radius: 8px; /* opcional: bordes redondeados */
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* opcional: sombra sutil */
}
.mapa iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Ajuste para móviles: que sea más bajo */
@media (max-width: 768px) {
.mapa {
height: 250px;
}
}
.mapa {
position: relative;
width: 100%;
height: 350px; /* altura estándar en escritorio */
border-radius: 8px; /* mismo estilo que las demás cajas */
overflow: hidden;
margin-top: 1rem;
}
.mapa iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Ajuste en móviles */
@media (max-width: 768px) {
.mapa {
height: 250px;
}
}
/* ===== Servicios: micro-animación sutil (tarjeta + icono) ===== */
.service-item{
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
will-change: transform;
}
.service-item:hover{
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,.12);
border-color: rgba(0,0,0,.12);
}
/* Icono: leve “lift” y pulso muy suave */
.service-item .icon{
display:inline-block;
transition: transform .22s ease, color .2s ease, opacity .2s ease;
transform: translateY(0);
opacity: .95;
}
.service-item:hover .icon{
transform: translateY(-2px) scale(1.04);
opacity: 1;
}
/* Enlaces del título: subrayado animado (sin cambiar layout) */
.service-item h3 a{
text-decoration: none;
background:
linear-gradient(currentColor, currentColor) left bottom / 0% 2px no-repeat;
transition: background-size .22s ease;
}
.service-item:hover h3 a,
.service-item h3 a:focus-visible{
background-size: 100% 2px;
}
/* Respeta usuarios con “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
.service-item, .service-item .icon, .service-item h3 a{
transition: none !important;
transform: none !important;
background: none !important;
}
}
/* ===== Reveal suave al entrar en viewport ===== */
.reveal{
opacity: 0;
transform: translateY(12px);
}
.reveal.is-in{
animation: fadeUp .45s ease-out both;
animation-delay: var(--d, 0ms); /* escalonado opcional */
}
@keyframes fadeUp{
from{ opacity:0; transform: translateY(12px); }
to{ opacity:1; transform: none; }
}
/* Si el usuario prefiere reducir movimiento, no animamos */
@media (prefers-reduced-motion: reduce){
.reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
}
/* Kicker del video */
.video-kicker{
margin: .25rem 0 .6rem;
font-weight:700;
letter-spacing:.2px;
color:#0b4a7f;
opacity:.95;
}
/* Dispositivo flotante + fade-in sutil (solo desktop) */
@media (min-width: 769px){
.device-float{
animation: floatIn .45s ease-out both;
box-shadow:
0 18px 40px rgba(0,0,0,.18),
0 2px 0 rgba(255,255,255,.06) inset;
transform: translateY(0);
will-change: transform, box-shadow;
}
.device-float:hover{
transform: translateY(-2px);
box-shadow:
0 22px 48px rgba(0,0,0,.22),
0 2px 0 rgba(255,255,255,.08) inset;
transition: transform .2s ease, box-shadow .25s ease;
}
@keyframes floatIn{
from{ transform: translateY(8px); opacity:0 }
to { transform: translateY(0); opacity:1 }
}
}
/* Círculo numerado – animación al hover/focus */
.card--step .step{
position: relative;
width: 44px; height: 44px;
border-radius: 999px;
background: var(--c-cta);
color:#fff; font-weight:800;
display:grid; place-items:center;
box-shadow: 0 6px 14px rgba(255,122,0,.28), 0 0 0 2px rgba(255,122,0,.18) inset;
transition: transform .18s ease, box-shadow .25s ease;
}
.card--step:hover .step,
.card--step:focus-within .step{
transform: translateY(-2px) scale(1.03);
box-shadow: 0 10px 20px rgba(255,122,0,.32), 0 0 0 3px rgba(255,122,0,.22) inset;
}
/* Timeline vertical en desktop */
@media (min-width: 992px){
.cards--steps{
position: relative;
grid-template-columns: 1fr; /* apilados en 1 col */
max-width: 760px;
margin-inline: auto;
}
.cards--steps::before{
content:"";
position:absolute;
left: 32px; /* alineado al centro del .step (44px) */
top: 24px; bottom: 24px;
width: 2px;
background: linear-gradient(#e6edf6, #ccd9e8);
border-radius: 2px;
}
.card--step{
position: relative;
padding-left: 64px; /* deja hueco para el eje */
}
.card--step .step{
position: absolute;
left: 10px; top: 18px;
}
/* Nodo sobre la línea (sutil) */
.card--step::after{
content:"";
position:absolute;
left: 32px; top: 38px;
transform: translate(-50%, -50%);
width: 10px; height: 10px; border-radius: 50%;
background: #fff;
border: 2px solid rgba(0,0,0,.08);
box-shadow: 0 0 0 3px rgba(255,122,0,.08);
}
}
.metricas__icon{
display:inline-block;
font-size: clamp(1.2rem, 2.6vw, 1.6rem);
margin-bottom: .35rem;
opacity:.95;
}
/* Entrada sutil: ya usas .reveal/.is-in; afinamos para métricas */
.metricas__card.reveal{
opacity:0;
transform: translateY(8px) scale(.98);
}
.metricas__card.is-in{
opacity:1;
transform: none;
transition: transform .35s ease, opacity .35s ease, box-shadow .25s ease;
}
.metricas__card:hover{
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.metricas__grid{
display:grid;
gap:1.5rem;
grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
max-width:900px;
margin:0 auto;
background:#fff;
border-radius:1rem;
padding:2rem 1.5rem;
box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.metricas__card{
text-align:center;
padding:1rem;
}
.metricas__value{
font-size:2rem;
font-weight:700;
color:#0b3760;
margin-bottom:.25rem;
}
.metricas__label{
font-size:.95rem;
color:#555;
}
.metricas__icon {
font-size: 2rem;
color: #003366;
margin-bottom: 0.5rem;
display: block;
}
/* Icono: estado base y transición */
.metricas__icon{
display:inline-block;
font-size: clamp(1.2rem, 2.6vw, 1.6rem);
color:#0b4a7f; /* tono corporativo oscuro */
margin-bottom:.4rem;
opacity:.96;
transform-origin:50% 60%;
transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}
/* Entrada sutil usando tus clases reveal/is-in */
.metricas__card.reveal .metricas__icon{
opacity:0;
transform: translateY(6px) scale(.92);
}
.metricas__card.is-in .metricas__icon{
animation: metricIconIn .45s cubic-bezier(.22,.9,.24,1) both;
}
@keyframes metricIconIn{
0% { opacity:0; transform: translateY(6px) scale(.92) }
60% { opacity:1; transform: translateY(-2px) scale(1.06) }
100% { opacity:1; transform: translateY(0) scale(1.0) }
}
/* Hover/Focus: pequeño “lift” */
.metricas__card:hover .metricas__icon,
.metricas__card:focus-within .metricas__icon{
transform: translateY(-1px) scale(1.03);
filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}
/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
.metricas__icon{ transition:none !important; }
.metricas__card.reveal .metricas__icon,
.metricas__card.is-in .metricas__icon{ animation:none !important; opacity:1; transform:none; }
}
/* Estilo del texto de las métricas */
.metricas__label {
text-align: center;
font-weight: 600; /* seminegrita, si quieres full usa 700 */
font-size: 0.95rem; /* ajusta según tu diseño */
line-height: 1.4;
margin-top: .3rem;
color: #0b2447; /* tono oscuro corporativo */
}
.metricas__value {
font-weight: 700; /* negrita fuerte */
text-align: center;
font-size: clamp(1.6rem, 3.2vw, 2.2rem);
color: #0b2447;
margin-bottom: .2rem;
}
/* ===== MÉTRICAS — versión premium ===== */
.metricas {
background: var(--c-bg-soft);
}
.metricas__grid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: clamp(14px, 2.2vw, 22px);
max-width: 1100px;
margin-inline:auto;
padding-inline: 10px;
}
@media (min-width: 768px){
.metricas__grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.metricas__card{
position: relative;
text-align:center;
background:#fff;
border: 1px solid rgba(15,23,42,.08);
border-radius: 16px;
padding: clamp(18px, 2.4vw, 24px);
box-shadow: 0 8px 22px rgba(0,0,0,.06);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.metricas__card:hover{
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0,0,0,.10);
border-color: rgba(15,23,42,.12);
}
/* Icono arriba */
.metricas__icon{
display:inline-grid;
place-items:center;
width: 42px; height: 42px;
margin-inline:auto;
margin-bottom:.35rem;
font-size: 1.35rem; /* si usas emoji */
color: #0b4a7f;
/* si prefieres “badge”: descomenta
background: #eef5ff;
border-radius: 999px;
*/
}
/* Número potente */
.metricas__value{
font-variant-numeric: tabular-nums lining-nums;
font-weight: 800;
font-size: clamp(1.9rem, 5vw, 2.4rem);
line-height: 1;
color: var(--c-primary);
margin: .1rem 0 .15rem;
}
/* Etiqueta centrada + negrita (móvil y escritorio) */
.metricas__label{
font-weight: 700; /* ← negrita */
text-align: center; /* ← centrado */
font-size: var(--font-scale-1);
color: #243b55;
letter-spacing: .1px;
margin: .35rem 0 0;
}
/* Modo oscuro (opcional) */
@media (prefers-color-scheme: dark){
.metricas{ background: #0f172a; }
.metricas__card{
background:#0f172a;
border-color:#1f2a44;
box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.metricas__value{ color:#fff; }
.metricas__label{ color:#cbd5e1; font-weight: 700; }
.metricas__icon{ color:#9ecbff; }
}
/* ===== MÉTRICAS PREMIUM ===== */
/* Centrado + negrita en cualquier pantalla */
.metricas__card {
text-align: center;
}
.metricas__label {
font-weight: 600; /* negrita elegante */
text-align: center; /* centrado horizontal */
margin-top: 0.25rem;
line-height: 1.4;
}
/* Valor destacado */
.metricas__value {
font-size: 2rem;
font-weight: 700;
display: inline-block;
margin: 0.25rem 0;
transition: transform 0.3s ease;
}
/* Pulse al finalizar */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.metricas__value.pulse {
animation: pulse 0.5s ease;
}
/* --- FIX pasos: mostrar números sí o sí --- */
.card--step .step{
font: inherit;
color:#fff;
position:relative;
z-index:1;
}
/* Anula cualquier icono inyectado por otras librerías */
.card--step .step::before,
.card--step .step::after{
content: none !important;
}
/* Si quieres que se numere solo sin depender del HTML: */
.cards--steps{ counter-reset: pasos; }
.card--step .step{ counter-increment: pasos; }
.card--step .step::after{
content: counter(pasos);
position: relative;
z-index: 1;
/* hereda el estilo del círculo que ya tienes */
}
/* Métricas: tamaño/alineación del icono FA */
.metricas__icon {
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:.35rem;
}
.metricas__icon i{
font-size: clamp(1.4rem, 3vw, 1.8rem);
color: var(--c-primary);
line-height:1;
}
/* Paso: icono dentro del círculo */
.card--step .step{
display:grid; place-items:center;
}
.card--step .step i{
font-size: 1.1rem; /* sube/baja si lo ves pequeño */
line-height:1;
color:#fff; /* el círculo ya es naranja corporativo */
}
.cards--services {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:1.5rem;
}
.service-card {
text-align:center;
padding:1.6rem 1.2rem;
border-radius:16px;
background:#fff;
box-shadow:0 4px 12px rgba(0,0,0,.08);
transition:transform .25s ease, box-shadow .25s ease;
}
.service-card:hover {
transform:translateY(-6px);
box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.service-icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:64px; height:64px;
border-radius:50%;
background:var(--c-primary, #003366);
color:#fff;
font-size:1.5rem;
margin-bottom:.75rem;
box-shadow:0 4px 10px rgba(0,0,0,.15);
transition:transform .25s ease, background .25s ease;
}
.service-card:hover .service-icon {
transform:scale(1.1);
background:#0d6efd;
}
.service-card h3 {
margin:.4rem 0 .6rem;
font-size:1.1rem;
font-weight:600;
}
.service-card h3 a {
color:inherit;
text-decoration:none;
}
.service-card h3 a:hover {
color:var(--c-primary, #003366);
}
.service-card p {
font-size:.95rem;
color:#555;
}
.cards--steps {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:1.5rem;
}
.step-card {
text-align:center;
padding:1.6rem 1.2rem;
border-radius:16px;
background:#fff;
box-shadow:0 4px 12px rgba(0,0,0,.08);
transition:transform .25s ease, box-shadow .25s ease;
}
.step-card:hover {
transform:translateY(-6px);
box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.step-icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:56px; height:56px;
border-radius:50%;
background:var(--c-primary, #003366);
color:#fff;
font-weight:600;
font-size:1.2rem;
margin-bottom:.75rem;
box-shadow:0 4px 10px rgba(0,0,0,.15);
transition:transform .25s ease, background .25s ease;
}
.step-card:hover .step-icon {
transform:scale(1.1);
background:#0d6efd;
}
.step-card h3 {
margin:.4rem 0 .6rem;
font-size:1.05rem;
font-weight:600;
}
.step-card p {
font-size:.92rem;
color:#555;
}
/* Icono redondo coherente (servicios/metricas/pasos) */
.card-icon{
display:inline-grid; place-items:center;
width:52px; height:52px; margin-bottom:.6rem;
border-radius:999px; font-size:1.15rem; font-weight:700;
background: var(--c-primary); color:#fff;
box-shadow: 0 6px 14px rgba(0,0,0,.12), 0 0 0 2px rgba(255,255,255,.35) inset;
}
/* Lista con checks (sin dependencias) */
.bullet-check{ list-style:none; padding-left:0; display:grid; gap:.45rem; }
.bullet-check li{
position:relative; padding-left:1.6rem;
}
.bullet-check li::before{
content:"✔"; position:absolute; left:.2rem; top:.15rem;
font-weight:800; font-size:.95rem; color: var(--c-accent);
}
/* Ajuste de tarjetas “Nosotros” para alinear con el resto */
.nosotros .cards .card{
text-align:left;
}
.nosotros .cards .card > .card-icon{
margin-bottom:.4rem;
}
/* === Estilo unificado de tarjetas === */
.card {
background: #fff;
border-radius: 12px;
padding: 2rem 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
text-align: center; /* Centramos todo */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Animación sutil al hacer hover */
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
/* Icono redondo superior */
.card-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: #0b2c5f; /* Azul corporativo */
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 1rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
transition: transform 0.3s ease, background 0.3s ease;
}
/* Animación del icono */
.card:hover .card-icon {
transform: scale(1.1);
background: #c65102; /* Naranja corporativo en hover */
}
/* Título centrado */
.card h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #0b2c5f;
text-align: center;
}
/* Texto */
.card p,
.card ul {
font-size: 1rem;
line-height: 1.6;
color: #444;
text-align: center;
margin: 0;
padding: 0;
}
/* Listas dentro de cards */
.card ul {
list-style: none;
padding: 0;
}
.card ul li {
margin: 0.5rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.card ul li::before {
content: "✔";
color: #0b9444; /* Verde check */
font-weight: bold;
margin-right: 0.5rem;
}
/* === Card unificada: centro + animación === */
.card{
background:#fff;
border:1px solid #e6edf6;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,.06);
padding:clamp(16px,2.2vw,20px);
text-align:center;
display:flex; flex-direction:column; align-items:center; justify-content:center;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.12); border-color:rgba(0,0,0,.08); }
.card h3{ margin:.35rem 0 .5rem; font-weight:800; text-align:center; }
/* Servicios: que el herede el color y tamaño del badge */
.card .icon{ font-size:22px; }
/* ===== Métricas centradas y en negrita (móvil y desktop) ===== */
.metricas__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:768px){ .metricas__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.metricas__card{
text-align:center;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:clamp(16px,2.2vw,22px);
}
.metricas__value{
font-variant-numeric:tabular-nums lining-nums;
font-weight:800; font-size:clamp(2rem,5vw,2.6rem);
line-height:1; color:var(--c-primary);
margin:.15rem 0 .2rem;
}
.metricas__label{
font-weight:700; text-align:center;
margin-top:.2rem; color:#223; font-size:var(--font-scale-1);
}
/* Entrada con scale-up suave cuando aparece en viewport (ya usas .reveal) */
.metricas__card.reveal{ opacity:0; transform:translateY(8px) scale(.98); }
.metricas__card.is-in{ opacity:1; transform:none; transition:transform .35s ease, opacity .35s ease; }
/* ===== Cómo trabajamos (pasos centrados y con mismo badge) ===== */
.cards--steps .card{ align-items:center; text-align:center; padding:clamp(16px,2vw,22px); }
.card--step .step{
background:#b34700; /* tu naranja corporativo para diferenciar pasos */
box-shadow:0 10px 22px rgba(179,71,0,.22), 0 0 0 3px rgba(179,71,0,.12) inset;
font-weight:800; font-size:20px;
}
/* En desktop, mantiene la línea vertical sutil */
@media (min-width:992px){
.cards--steps{
position:relative; max-width:760px; margin-inline:auto;
grid-template-columns:1fr;
}
.cards--steps::before{
content:""; position:absolute; left:50%; transform:translateX(-50%);
top:24px; bottom:24px; width:2px; border-radius:2px;
background:linear-gradient(#e6edf6,#ccd9e8);
}
}
/* Respeto a reduced motion */
@media (prefers-reduced-motion:reduce){
.card, .card .icon, .card-icon, .metricas__icon, .card--step .step,
.metricas__card.reveal{ transition:none !important; transform:none !important; }
}
.metric-card .icon {
background: #C7510E; /* Naranja corporativo */
color: #fff; /* Icono en blanco */
border-radius: 50%;
padding: 15px;
font-size: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* sombra neutra y suave */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.metric-card .icon:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
/* === ICONOS CORPORATIVOS UNIFICADOS === */
.card-icon,
.metric-card .icon,
.servicio-card .icon,
.timeline-step .icon {
background: #C7510E; /* Naranja corporativo */
color: #fff; /* Icono blanco */
border-radius: 50%; /* Círculo */
padding: 15px;
font-size: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* sombra suave neutra */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-icon:hover,
.metric-card .icon:hover,
.servicio-card .icon:hover,
.timeline-step .icon:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
/* === Tarjetas: párrafos y listas justificados en todas las secciones === */
.card p,
.card ul,
.card li,
.service-card p,
.step-card p,
.cards--steps .card p,
.metricas__card p,
.proyecto-card p,
.deliverables li {
text-align: justify;
text-justify: inter-word; /* mejora la separación entre palabras */
}
/* Si alguna lista de tarjetas estaba centrada por flex, la alineamos a la izquierda */
.card ul {
display: block; /* por si alguna se puso en flex */
padding-left: 1.1rem; /* sangría cómoda para viñetas */
}
.card ul li {
display: list-item; /* asegura comportamiento de lista normal */
justify-content: flex-start; /* neutraliza centrado previo si existía */
}
/* === ICONOS DE TARJETAS === */
.card-icon {
background: #0a3971; /* azul corporativo de fondo */
color: #fff; /* icono en blanco */
border-radius: 50%; /* círculo perfecto */
display: flex;
align-items: center;
justify-content: center;
width: 70px; /* tamaño estándar */
height: 70px;
font-size: 28px; /* tamaño del icono */
margin: 0 auto 15px auto; /* centrado y separación */
box-shadow: 0 4px 10px rgba(205, 83, 0, 0.35); /* 👈 sombra naranja */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Animación suave al pasar el ratón */
.card-icon:hover {
transform: scale(1.08);
box-shadow: 0 6px 14px rgba(205, 83, 0, 0.45);
}
/* Texto debajo de los iconos centrado y justificado */
.card h3,
.card p,
.card ul {
text-align: justify;
}
/* Mantener títulos centrados */
.card h3 {
text-align: center;
font-weight: 700;
margin-bottom: 10px;
}
/* Métricas: icono plano, sin sombra ni efecto hover */
.metricas__icon{
width:64px; height:64px;
border-radius:999px;
display:grid; place-items:center;
background:#0b4a7f; /* tu azul corporativo */
color:#fff;
box-shadow:none !important; /* <- quita la sombra */
filter:none !important;
transform:none !important;
}
.metricas__icon i{ line-height:1; font-size:1.2rem; }
/* No “lift” en hover solo para métricas */
.metricas__card:hover .metricas__icon,
.metricas__card:focus-within .metricas__icon{
box-shadow:none !important;
transform:none !important;
}
/* === Texto justificado en todas las tarjetas === */
.card p{
display:block !important;
-webkit-line-clamp:unset !important;
-webkit-box-orient:unset !important;
overflow:visible !important;
text-align:justify !important;
text-justify:inter-word !important;
margin: 0.5rem 0; /* un poco de aire arriba/abajo */
}
/* Justificado sin “ríos”: guionado + ajustes de saltos */
.card p{
text-align: justify !important;
text-justify: inter-word !important;
hyphens: auto; /* estándar */
-webkit-hyphens: auto; /* Safari/iOS */
-ms-hyphens: auto; /* IE/legacy */
word-break: normal;
overflow-wrap: normal;
}
@supports (text-wrap: pretty){
.card p{ text-wrap: pretty; } /* mejora espaciado en Chrome/Edge nuevos */
}
/* En pantallas muy estrechas es mejor alinear a la izquierda */
@media (max-width: 600px){
.card p{ text-align: left !important; }
}
.metricas__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #003366; /* azul corporativo */
margin-bottom: 10px;
box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}
.metricas__icon i {
color: #fff; /* <-- icono en blanco */
font-size: 28px;
}
.service-card p {
text-align: left; /* alineado natural */
word-spacing: normal; /* elimina espacios forzados */
hyphens: auto; /* permite cortar palabras si es necesario */
line-height: 1.5; /* mejora la lectura */
}
.text-responsive {
text-align: justify;
hyphens: auto;
}
@media (max-width: 768px) {
.text-responsive {
text-align: left;
word-spacing: normal;
}
}
/* Servicios: icono redondo unificado (ambas variantes) */
.service-card .service-icon,
.service-item .icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:64px;
height:64px;
border-radius:50%;
background: var(--c-primary, #003366);
color:#fff;
font-size:1.5rem; /* tamaño del glifo FA */
margin-bottom:.75rem;
box-shadow:0 4px 10px rgba(0,0,0,.15);
transition: transform .25s ease, background .25s ease;
}
.service-card:hover .service-icon,
.service-item:hover .icon {
transform: scale(1.1);
background:#0d6efd;
}
/* Asegura que el glifo herede el color blanco */
.service-card .service-icon i,
.service-item .icon { color:#fff; line-height:1; }
/* Forzar layout en columna y centrado de iconos */
.service-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center; /* opcional: centra títulos y párrafos */
}
/* Icono redondo centrado */
.service-item .icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--c-primary, #003366);
color: #fff;
font-size: 1.5rem;
margin-bottom: .75rem;
box-shadow: 0 4px 10px rgba(0,0,0,.15);
transition: transform .25s ease, background .25s ease;
}
.service-item:hover .icon {
transform: scale(1.1);
background: #0d6efd;
}
/* ======== POR QUÉ ELEGIRNOS - Ajustes finos ======== */
#por-que-elegirnos {
padding-block: 2.5rem; /* respiro vertical */
scroll-margin-top: 96px; /* evita quedar oculto tras el header al usar anchors */
}
#por-que-elegirnos .page-subtitle {
max-width: 75ch; /* legibilidad óptima */
margin: 0 auto 1.2rem; /* centra el subtítulo en contenedor */
}
/* Listado más cómodo de leer */
#por-que-elegirnos ul {
margin: 1.2rem 0; /* separación con párrafos */
padding-left: 1.25rem; /* sangría estándar de bullets */
max-width: 80ch; /* coherente con subtítulo */
}
#por-que-elegirnos li {
margin: 0.4rem 0; /* espacio entre bullets */
line-height: 1.6;
}
/* Párrafos con buen ritmo vertical */
#por-que-elegirnos p {
margin-bottom: 1.2rem;
}
/* CTA coherente con tu estilo y bien separada */
#por-que-elegirnos .cta-servicios {
margin-top: 1.8rem;
display: flex;
justify-content: center; /* centra el botón en todas las resoluciones */
}
#por-que-elegirnos .btn-cta {
/* hereda tus estilos globales; solo aseguramos tactilidad */
min-width: 260px;
text-align: center;
}
/* Justificado en escritorio y alineado a la izquierda en móvil (coherente con tu web) */
@media (max-width: 767px) {
#por-que-elegirnos .page-subtitle,
#por-que-elegirnos p,
#por-que-elegirnos li {
text-align: left;
}
}
@media (min-width: 768px) {
#por-que-elegirnos .page-subtitle,
#por-que-elegirnos p,
#por-que-elegirnos li {
text-align: justify;
hyphens: auto;
}
}
/* ===== POR QUÉ ELEGIRNOS (Home Compacto) ===== */
#pq-home {
background: #f8fafc; /* ligero contraste con el hero y carrusel */
padding-block: 2.5rem;
}
#pq-home ul {
margin: 1.2rem 0;
padding-left: 1.25rem;
max-width: 75ch;
}
#pq-home li {
margin: 0.4rem 0;
line-height: 1.6;
}
/* CTA centrada */
#pq-home .cta-servicios {
margin-top: 1.8rem;
display: flex;
justify-content: center;
}
#pq-home .btn-cta {
min-width: 240px;
text-align: center;
}
/* ===== Home Cards: ajustes suaves sin romper tu estilo ===== */
#pq-home-cards { background: #f8fafc; padding-block: 2.5rem; }
#pq-home-cards .page-subtitle {
max-width: 75ch;
margin: 0 auto 1.25rem;
}
/* Asegura altura homogénea y buen espaciado dentro de cada tarjeta */
#pq-home-cards .pqhc-card {
display: grid;
grid-template-rows: auto auto 1fr; /* icono, título, texto estira */
gap: .4rem;
padding-bottom: 1rem; /* respira un poco más */
}
/* Iconos algo más visibles en home */
#pq-home-cards .icon {
font-size: 1.5rem;
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
border-radius: 12px;
background: #eef2f7;
}
/* Grid: 1 columna en móvil, 3 en escritorio (si tu .grid-services no lo fuerza ya) */
@media (min-width: 768px) {
#pq-home-cards .grid-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
}
/* CTA centrada */
#pq-home-cards .cta-servicios {
margin-top: 1.5rem;
display: flex;
justify-content: center;
}
#pq-home-cards .btn-cta { min-width: 240px; text-align: center; }
/* Coherencia de texto: izquierda en móvil, justificado en escritorio */
@media (max-width: 767px) {
#pq-home-cards .page-subtitle,
#pq-home-cards p,
#pq-home-cards li { text-align: left; }
}
@media (min-width: 768px) {
#pq-home-cards .page-subtitle,
#pq-home-cards p,
#pq-home-cards li { text-align: justify; hyphens: auto; }
}
/* ===== Home 4 Cards con iconos azules ===== */
#pq-home-cards { background: #f8fafc; padding-block: 2.5rem; }
#pq-home-cards .page-subtitle {
max-width: 75ch;
margin: 0 auto 1.25rem;
}
/* Tarjetas uniformes */
#pq-home-cards .pqhc-card {
display: grid;
grid-template-rows: auto auto 1fr;
gap: .5rem;
padding: 1rem;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 10px rgba(15,23,42,.06);
opacity: 0; /* animación scroll */
transform: translateY(30px);
transition: all 0.6s ease;
}
/* Estado visible al hacer scroll */
#pq-home-cards .pqhc-card.visible {
opacity: 1;
transform: translateY(0);
}
/* Iconos uniformes */
#pq-home-cards .icon-wrapper {
width: 60px; height: 60px;
border-radius: 50%;
background: #003366 /* azul corporativo */
color: #fff;
display: grid;
place-items: center;
font-size: 1.4rem;
margin-bottom: .5rem;
}
/* Grid responsive */
@media (min-width: 768px) {
#pq-home-cards .grid-services {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1024px) {
#pq-home-cards .grid-services {
grid-template-columns: repeat(4, 1fr);
}
}
/* CTA centrada */
#pq-home-cards .cta-servicios {
margin-top: 1.8rem;
display: flex;
justify-content: center;
}
#pq-home-cards .btn-cta {
min-width: 240px;
text-align: center;
}
/* Texto: izquierda en móvil, justificado en escritorio */
@media (max-width: 767px) {
#pq-home-cards .page-subtitle,
#pq-home-cards p { text-align: left; }
}
@media (min-width: 768px) {
#pq-home-cards .page-subtitle,
#pq-home-cards p { text-align: justify; hyphens: auto; }
}
/* ===== Sección "Por qué elegirnos" ===== */
#pq-home-cards {
background: #f8fafc;
padding-block: 2.5rem;
}
#pq-home-cards .page-subtitle {
max-width: 75ch;
margin: 0 auto 1.5rem;
}
/* Tarjetas con iconos iguales al index */
#pq-home-cards .pqhc-card {
text-align: center; /* centrado igual que en index */
padding: 1.5rem 1rem;
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 10px rgba(15,23,42,.08);
transition: transform .3s ease;
}
#pq-home-cards .pqhc-card:hover {
transform: translateY(-5px);
}
/* Iconos uniformes */
#pq-home-cards .icon-wrapper {
width: 70px;
height: 70px;
border-radius: 50%;
background: #003366; /* azul corporativo */
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.6rem;
margin: 0 auto 1rem; /* centrado + separación inferior */
}
/* Grid responsive */
#pq-home-cards .grid-services {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
#pq-home-cards .grid-services {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
#pq-home-cards .grid-services {
grid-template-columns: repeat(4, 1fr);
}
}
/* CTA centrada */
#pq-home-cards .cta-servicios {
margin-top: 2rem;
display: flex;
justify-content: center;
}
#pq-home-cards .btn-cta {
min-width: 240px;
text-align: center;
}
/* Animación scroll: fade-up */
#pq-home-cards .reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .6s ease, transform .6s ease;
}
#pq-home-cards .reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ===== Hover efecto tarjetas (solo desktop) ===== */
@media (hover: hover) and (pointer: fine) {
#pq-home-cards .pqhc-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#pq-home-cards .pqhc-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
}
/* ===== Hover efecto tarjetas (solo desktop) ===== */
@media (hover: hover) and (pointer: fine) {
#pq-home-cards .pqhc-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#pq-home-cards .pqhc-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
/* Efecto también en el icono */
#pq-home-cards .pqhc-card .icon-wrapper {
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#pq-home-cards .pqhc-card:hover .icon-wrapper {
background-color: #0d6efd; /* azul más intenso */
box-shadow: 0 0 12px rgba(13,110,253,0.5);
}
}
/* Evitar scroll lateral fantasma */
html, body {
overflow-x: hidden;
}
/* Ajustar tarjetas en móviles */
@media (max-width: 768px) {
.grid-services {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.service-item {
transform: none !important; /* desactiva animación rara en móvil */
opacity: 1 !important; /* asegúrate de que siempre se ven */
}
}
/* Reveal global coherente */
.reveal{
opacity: 0;
transform: translateY(24px);
transition: opacity .5s ease, transform .5s ease;
will-change: opacity, transform;
}
.reveal.visible{
opacity: 1;
transform: none;
}
/* Móvil: sin animación (evita saltos) */
@media (max-width: 767px){
.reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}
@media (max-width: 768px){
.grid-services{
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .6s ease, transform .6s ease;
will-change: opacity, transform;
}
.reveal.visible {
opacity: 1;
transform: none;
}
.reveal.visible {
opacity: 1;
transform: none;
}
/* Delays progresivos */
.grid-services .service-item:nth-child(1) { transition-delay: 0s; }
.grid-services .service-item:nth-child(2) { transition-delay: .1s; }
.grid-services .service-item:nth-child(3) { transition-delay: .2s; }
.grid-services .service-item:nth-child(4) { transition-delay: .3s; }
.grid-services .service-item:nth-child(5) { transition-delay: .4s; }
.grid-services .service-item:nth-child(6) { transition-delay: .5s; }
/* Lo mismo para las tarjetas de "¿Por qué elegir Novantis?" */
#pq-home-cards .pqhc-card:nth-child(1) { transition-delay: 0s; }
#pq-home-cards .pqhc-card:nth-child(2) { transition-delay: .15s; }
#pq-home-cards .pqhc-card:nth-child(3) { transition-delay: .3s; }
@media (max-width: 768px){
.reveal { transform: translateY(12px); }
}
/* ===== Scroll Reveal básico ===== */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
will-change: opacity, transform;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* En pantallas pequeñas reducimos un poco el movimiento */
@media (max-width: 768px) {
.reveal {
transform: translateY(20px);
}
}