/** * CAP Abogados — hoja de estilos. * * Transcrita del mockup capabogados-mockup-unificado (1).html, líneas 34-124 y * 150-527. Se descartaron la sección 2 (sistema de vistas del prototipo) y la * sección 3 (marcadores de contenido pendiente y notas internas), que eran * andamiaje y no forman parte del diseño. * * No modificar valores visuales: este archivo es la referencia contra la que se * compara el sitio publicado. */ /* ========================================================================== 0. TIPOGRAFÍAS AUTOALOJADAS (Cinzel y Montserrat, subconjunto latin) ========================================================================== */ @font-face{ font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/cinzel-400.woff2') format('woff2'); } @font-face{ font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cinzel-500.woff2') format('woff2'); } @font-face{ font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/cinzel-600.woff2') format('woff2'); } @font-face{ font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/montserrat-300.woff2') format('woff2'); } @font-face{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-400.woff2') format('woff2'); } @font-face{ font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-500.woff2') format('woff2'); } @font-face{ font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-600.woff2') format('woff2'); } @font-face{ font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-700.woff2') format('woff2'); } /* ========================================================================== 1. TOKENS DE MARCA (conservados del mockup original) ========================================================================== */ :root{ --negro:#111111; --gris-osc:#5C5C5C; --gris-med:#8C8C8C; --gris-cla:#D9D9D9; --gris-hue:#F1F0EE; --blanco:#FFFFFF; --display: 'Cinzel', serif; --body: 'Montserrat', sans-serif; --maxw: 1280px; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family: var(--body); color: var(--negro); background: var(--blanco); line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{display:block; max-width:100%;} a{color:inherit; text-decoration:none;} ul{list-style:none;} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;} @media(min-width:768px){ .wrap{padding:0 40px;} } @media(min-width:1024px){ .wrap{padding:0 80px;} } .eyebrow{ font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.25em; text-transform:uppercase; color:var(--gris-osc); margin-bottom:14px; display:flex; align-items:center; gap:10px; } .eyebrow::before{content:"◆"; font-size:8px; color:var(--gris-med);} h1,h2,h3{font-family:var(--display); font-weight:500; letter-spacing:.01em; color:var(--negro);} /* Botones (conservados; se añade .btn-light para tarjetas de fondo negro) */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:17px 34px; border-radius:3px; cursor:pointer; transition: all .2s ease; white-space:normal; text-align:center; border:1px solid transparent; } .btn-primary{ background:var(--negro); color:var(--blanco); border-color:var(--negro); } .btn-primary:hover{ background:var(--gris-osc); border-color:var(--gris-osc); } .btn-secondary{ background:transparent; color:var(--negro); border-color:var(--negro); } .btn-secondary:hover{ background:var(--negro); color:var(--blanco); } .btn-light{ background:var(--blanco); color:var(--negro); border-color:var(--blanco); } .btn-light:hover{ background:var(--gris-cla); border-color:var(--gris-cla); } .btn-outline-light{ background:transparent; color:var(--blanco); border-color:rgba(255,255,255,.5); } .btn-outline-light:hover{ background:var(--blanco); color:var(--negro); border-color:var(--blanco); } .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--negro); outline-offset:2px; } .link-underline{ position:relative; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding-bottom:4px; } .link-underline::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0%; background:var(--negro); transition:width .25s ease; } .link-underline:hover::after{width:100%;} /* Placeholder de fotografía (conservado). El data-label indica la regla de imagen de la vertical según PDF §4. */ .ph{ position:relative; overflow:hidden; background: repeating-linear-gradient(135deg, #d7d5d0 0 2px, #e7e5e0 2px 4px); filter:grayscale(1); } .ph::after{ content: attr(data-label); position:absolute; left:14px; bottom:14px; right:14px; font-family:var(--body); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--blanco); background:rgba(17,17,17,.72); padding:8px 12px; border-radius:2px; } /* Animación de aparición (conservada) */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; } .reveal.in{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal{opacity:1; transform:none; transition:none;} .btn, .link-underline::after, .servicio-card, .caso-card{transition:none;} } /* ========================================================================== 4. HEADER + NAVEGACIÓN ========================================================================== */ header{ position:sticky; top:0; z-index:50; background:var(--blanco); border-bottom:1px solid transparent; transition:border-color .25s ease; } header.scrolled{ border-bottom-color:var(--gris-cla); } .headbar{ display:flex; align-items:center; justify-content:space-between; height:84px; } .logo{ font-family:var(--display); font-size:26px; letter-spacing:.12em; } .logo small{ display:block; font-family:var(--body); font-size:8px; letter-spacing:.32em; color:var(--gris-osc); font-weight:600; margin-top:2px;} nav.desktop-nav{ display:none; gap:36px; align-items:center; } nav.desktop-nav a{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--negro); position:relative; padding:4px 0;} nav.desktop-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--negro);transition:width .2s ease;} nav.desktop-nav a:hover::after{width:100%;} nav.desktop-nav a.active::after{width:100%;} .head-actions{ display:flex; align-items:center; gap:20px; } .menu-btn{ display:flex; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px; } .menu-btn span{ width:22px; height:1px; background:var(--negro); display:block; } @media(min-width:1024px){ nav.desktop-nav{display:flex;} .menu-btn{display:none;} } .head-cta{ display:none; } @media(min-width:1024px){ .head-cta{display:inline-flex; padding:14px 24px; font-size:12px;} } /* Menú móvil desplegable */ .mobile-nav{ display:none; position:fixed; left:0; right:0; top:84px; bottom:0; z-index:49; background:var(--blanco); padding:32px 24px; flex-direction:column; gap:4px; overflow-y:auto; } .mobile-nav.open{ display:flex; } .mobile-nav a{ font-size:16px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:16px 0; border-bottom:1px solid var(--gris-cla); } .mobile-nav a.active{ color:var(--gris-osc); } .mobile-nav .btn{ margin-top:24px; } body.nav-open{ overflow:hidden; } /* ========================================================================== 5. HERO (Home y verticales) ========================================================================== */ .hero{ padding:56px 0 64px; } @media(min-width:1024px){ .hero{padding:88px 0 96px;} } .hero-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; } @media(min-width:1024px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:64px; } } .hero h1{ font-size:34px; line-height:1.18; margin-bottom:22px; } @media(min-width:768px){ .hero h1{font-size:44px;} } @media(min-width:1024px){ .hero h1{font-size:52px; line-height:1.15;} } .hero p.lead{ font-size:16px; color:var(--gris-osc); max-width:520px; margin-bottom:34px; font-weight:400; } .hero-ctas{ display:flex; flex-direction:column; gap:14px; align-items:stretch; } @media(min-width:560px){ .hero-ctas{flex-direction:row; align-items:center;} } .hero-photo{ aspect-ratio:4/5; border-radius:4px; } @media(min-width:1024px){ .hero-photo{ aspect-ratio:5/6; } } .cta-note{ margin-top:14px; font-size:12px; color:var(--gris-med); } /* ========================================================================== 6. SECCIONES GENÉRICAS ========================================================================== */ section{ padding:64px 0; } @media(min-width:1024px){ section{ padding:104px 0; } } .section-head{ max-width:680px; margin-bottom:48px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head.center .eyebrow{ justify-content:center; } .section-head h2{ font-size:28px; line-height:1.25; } @media(min-width:1024px){ .section-head h2{ font-size:36px; } } .section-head p.sub{ margin-top:16px; font-size:15px; color:var(--gris-osc); } .bg-hue{ background:var(--gris-hue); } /* ========================================================================== 7. HOME · BIFURCACIÓN (PDF §6.2) — Empresas dominante ========================================================================== */ .bifurca{ display:grid; grid-template-columns:1fr; gap:22px; align-items:stretch; } @media(min-width:960px){ .bifurca{ grid-template-columns:1.35fr 1fr; gap:28px; } } .bi-card{ border:1px solid var(--gris-cla); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; background:var(--blanco); transition:transform .25s ease, border-color .25s ease; } .bi-card:hover{ transform:translateY(-4px); border-color:var(--gris-osc); } .bi-card .bi-photo{ aspect-ratio:16/7; } .bi-card .bi-body{ padding:32px 28px 36px; display:flex; flex-direction:column; flex:1; } @media(min-width:1024px){ .bi-card .bi-body{ padding:40px 40px 44px; } } .bi-card h3{ font-size:24px; margin-bottom:14px; } @media(min-width:1024px){ .bi-card h3{ font-size:28px; } } .bi-card p{ font-size:14.5px; color:var(--gris-osc); margin-bottom:26px; } .bi-card .btn{ margin-top:auto; align-self:flex-start; } /* Variante dominante (Empresas): fondo negro, mayor peso visual */ .bi-card.dominant{ background:var(--negro); border-color:var(--negro); } .bi-card.dominant h3{ color:var(--blanco); } .bi-card.dominant p{ color:var(--gris-cla); } .bi-card.dominant .eyebrow{ color:var(--gris-cla); } .bi-card.dominant .eyebrow::before{ color:var(--gris-med); } @media(min-width:960px){ .bi-card.dominant .bi-photo{ aspect-ratio:16/8; } } /* ========================================================================== 8. AUTORIDAD DE FIRMA (PDF §6.3) + contadores pendientes ========================================================================== */ .auth-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; } @media(min-width:960px){ .auth-grid{ grid-template-columns:1.05fr .95fr; gap:64px; } } .auth-photo{ aspect-ratio:4/3; border-radius:4px; } .auth-text p{ font-size:15px; color:var(--gris-osc); margin-bottom:18px; } .stats-row{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:36px; border-top:1px solid var(--gris-cla); padding-top:32px; } @media(min-width:640px){ .stats-row{ grid-template-columns:repeat(3,1fr); } } .stat .stat-num{ font-family:var(--display); font-size:26px; margin-bottom:6px; line-height:1.2; } .stat .stat-label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-osc); font-weight:600; } /* ========================================================================== 9. MARCO LEGAL (PDF §6.4) — tres tarjetas ========================================================================== */ .leyes-grid{ display:grid; grid-template-columns:1fr; gap:20px; } @media(min-width:900px){ .leyes-grid{ grid-template-columns:repeat(3,1fr); } } .ley-card{ border:1px solid var(--gris-cla); border-radius:6px; padding:36px 28px; background:var(--blanco); transition:border-color .25s ease, transform .25s ease; } .ley-card:hover{ border-color:var(--gris-osc); transform:translateY(-4px); } .ley-num{ font-family:var(--display); font-size:34px; margin-bottom:6px; } .ley-sub{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gris-osc); margin-bottom:16px; } .ley-card p{ font-size:14px; color:var(--gris-osc); } /* ========================================================================== 10. TARJETAS DE SERVICIO / RUTAS / CAMINOS (conservadas) ========================================================================== */ .servicio-card{ display:grid; grid-template-columns:1fr; border:1px solid var(--gris-cla); border-radius:6px; overflow:hidden; margin-bottom:28px; background:var(--blanco); transition:border-color .25s ease, transform .25s ease; } .servicio-card:hover{ border-color:var(--gris-osc); transform:translateY(-4px); } @media(min-width:768px){ .servicio-card{ grid-template-columns:.85fr 1.15fr; } } @media(min-width:768px){ .servicio-card.flip{ grid-template-columns:1.15fr .85fr; } .servicio-card.flip .servicio-photo{ order:2; } } .servicio-photo{ aspect-ratio:4/3; } @media(min-width:768px){ .servicio-photo{ aspect-ratio:auto; height:100%; } } .servicio-body{ padding:32px 28px; display:flex; flex-direction:column; justify-content:center; } @media(min-width:1024px){ .servicio-body{ padding:48px; } } .servicio-body h3{ font-size:24px; margin-bottom:14px; } .servicio-body .quien{ font-size:13.5px; color:var(--negro); background:var(--gris-hue); border-left:2px solid var(--negro); padding:12px 16px; border-radius:0 3px 3px 0; margin-bottom:18px; } .servicio-body .quien b{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; display:block; color:var(--gris-osc); margin-bottom:4px; } .servicio-body .logra-label{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--gris-osc); margin-bottom:8px; } .servicio-body ul{ margin:0 0 24px; display:flex; flex-direction:column; gap:9px; } .servicio-body li{ font-size:14px; color:var(--gris-osc); padding-left:18px; position:relative; } .servicio-body li::before{ content:"◆"; position:absolute; left:0; top:2px; font-size:7px; color:var(--gris-med); } /* ========================================================================== 11. SÍNTOMAS DE CRISIS (PDF §7.2) ========================================================================== */ .sintomas-list{ display:grid; grid-template-columns:1fr; gap:14px; max-width:820px; } @media(min-width:768px){ .sintomas-list{ grid-template-columns:1fr 1fr; } } .sintoma{ display:flex; gap:14px; align-items:flex-start; border:1px solid var(--gris-cla); border-radius:6px; padding:20px 22px; font-size:14.5px; background:var(--blanco); } .sintoma::before{ content:"◆"; font-size:8px; color:var(--gris-med); margin-top:8px; flex-shrink:0; } /* ========================================================================== 12. BENEFICIOS / DIFERENCIALES (conservado) ========================================================================== */ .beneficios-grid{ display:grid; grid-template-columns:1fr; gap:36px; } @media(min-width:600px){ .beneficios-grid{ grid-template-columns:1fr 1fr; } } @media(min-width:1024px){ .beneficios-grid{ grid-template-columns:repeat(4,1fr); gap:32px; } } .beneficio-icon{ width:44px; height:44px; border:1px solid var(--negro); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-family:var(--display); font-size:15px; } .beneficio h3{ font-family:var(--body); font-weight:600; font-size:16px; text-transform:none; margin-bottom:8px; letter-spacing:0; } .beneficio p{ font-size:14px; color:var(--gris-osc); } /* ========================================================================== 13. PROCESO — TIMELINE (conservado; ampliado a 6 pasos) ========================================================================== */ .timeline{ display:grid; grid-template-columns:1fr; gap:0; } @media(min-width:700px){ .timeline{ grid-template-columns:1fr 1fr; column-gap:32px; } } @media(min-width:1100px){ .timeline{ grid-template-columns:repeat(6,1fr); column-gap:0; } } .tl-step{ position:relative; padding:0 0 40px 44px; } .tl-step::before{ content:""; position:absolute; left:15px; top:32px; bottom:0; width:1px; background:var(--gris-cla); } .tl-step:last-child::before{ display:none; } @media(min-width:700px) and (max-width:1099px){ .tl-step::before{ display:none; } } @media(min-width:1100px){ .tl-step{ padding:44px 20px 0 0; } .tl-step::before{ display:block; left:0; right:0; top:15px; bottom:auto; height:1px; width:auto; } .tl-step:last-child::before{ display:none; } } .tl-num{ position:absolute; left:0; top:0; width:32px; height:32px; border:1px solid var(--negro); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:13px; background:var(--blanco); z-index:2; } @media(min-width:1100px){ .tl-num{ position:static; margin-bottom:22px; } } .tl-step h3{ font-family:var(--body); font-weight:600; font-size:15px; margin-bottom:8px; letter-spacing:0; } .tl-step p{ font-size:13px; color:var(--gris-osc); } /* ========================================================================== 14. CASOS (PDF §7.6) — plantillas con marcadores ========================================================================== */ .casos-track{ display:grid; grid-template-columns:1fr; gap:20px; } @media(min-width:768px){ .casos-track{ grid-template-columns:repeat(3,1fr); } } .caso-card{ border:1px solid var(--gris-cla); border-radius:6px; padding:32px 26px; background:var(--blanco); transition:border-color .25s ease, transform .25s ease;} .caso-card:hover{ border-color:var(--gris-osc); transform:translateY(-4px); } .caso-num{ font-family:var(--display); font-size:22px; margin-bottom:14px; line-height:1.3; } .caso-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--gris-osc); margin-bottom:10px; } .caso-card p{ font-size:14px; color:var(--gris-osc); } /* ========================================================================== 15. TESTIMONIOS (PDF §8.5) — sección negra conservada ========================================================================== */ .testi{ background:var(--negro); color:var(--blanco); } .testi .eyebrow{ color:var(--gris-cla); justify-content:center; } .testi .eyebrow::before{ color:var(--gris-med); } .testi-quote{ max-width:760px; margin:0 auto; text-align:center; } .testi-quote blockquote{ font-family:var(--display); font-weight:400; font-size:20px; line-height:1.5; margin-bottom:28px; } @media(min-width:1024px){ .testi-quote blockquote{ font-size:26px; } } .testi-meta{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-cla); } .testi-dots{ display:flex; gap:8px; justify-content:center; margin-top:36px; } .testi-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); } .testi-dots span.active{ background:var(--blanco); } /* ========================================================================== 16. FINANCIACIÓN DE HONORARIOS (PDF §8.6) ========================================================================== */ .financia{ border:1px solid var(--gris-cla); border-radius:6px; background:var(--blanco); display:grid; grid-template-columns:1fr; overflow:hidden; } @media(min-width:900px){ .financia{ grid-template-columns:1.1fr .9fr; } } .financia-body{ padding:40px 30px; } @media(min-width:1024px){ .financia-body{ padding:56px; } } .financia-body h3{ font-size:26px; margin-bottom:14px; } .financia-body p{ font-size:15px; color:var(--gris-osc); margin-bottom:26px; } .financia-photo{ aspect-ratio:16/9; } @media(min-width:900px){ .financia-photo{ aspect-ratio:auto; height:100%; } } /* ========================================================================== 17. FAQ (conservado; respuestas más largas) ========================================================================== */ .faq-item{ border-bottom:1px solid var(--gris-cla); } .faq-q{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; cursor:pointer; } .faq-q h3{ font-family:var(--body); font-weight:500; font-size:15px; letter-spacing:0; } @media(min-width:1024px){ .faq-q h3{font-size:16px;} } .faq-plus{ width:20px; height:20px; position:relative; flex-shrink:0; } .faq-plus::before,.faq-plus::after{ content:""; position:absolute; background:var(--negro); transition:transform .25s ease; } .faq-plus::before{ left:0; top:50%; width:100%; height:1px; } .faq-plus::after{ top:0; left:50%; width:1px; height:100%; } .faq-item.open .faq-plus::after{ transform:scaleY(0); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; } .faq-a p{ padding:0 0 24px; font-size:14px; color:var(--gris-osc); max-width:640px; } .faq-item.open .faq-a{ max-height:420px; } /* ========================================================================== 18. RECURSOS / BLOG (PDF §5 y §6.5) ========================================================================== */ .chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; } .chip{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--gris-cla); color:var(--gris-osc); padding:9px 16px; border-radius:20px; background:var(--blanco); cursor:pointer; transition:all .2s ease; } .chip.active, .chip:hover{ background:var(--negro); color:var(--blanco); border-color:var(--negro); } .blog-grid{ display:grid; grid-template-columns:1fr; gap:20px; } @media(min-width:768px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } } .blog-card{ border:1px solid var(--gris-cla); border-radius:6px; overflow:hidden; background:var(--blanco); transition:border-color .25s ease, transform .25s ease; } .blog-card:hover{ border-color:var(--gris-osc); transform:translateY(-4px); } .blog-photo{ aspect-ratio:16/9; } .blog-body{ padding:24px 22px 28px; } .blog-tag{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gris-osc); margin-bottom:10px; } .blog-body h3{ font-family:var(--body); font-weight:600; font-size:15.5px; letter-spacing:0; line-height:1.45; } .blog-card.hidden{ display:none; } /* ========================================================================== 19. CTA FINAL + FORMULARIOS ========================================================================== */ .cta-final{ background:var(--gris-hue); text-align:center; } .cta-final h2{ font-size:28px; margin-bottom:16px; } @media(min-width:1024px){ .cta-final h2{ font-size:38px; } } .cta-final p.cta-sub{ color:var(--gris-osc); margin-bottom:36px; font-size:14.5px; max-width:560px; margin-left:auto; margin-right:auto; } .cta-final.dark{ background:var(--negro); } .cta-final.dark h2{ color:var(--blanco); } .cta-final.dark p.cta-sub{ color:var(--gris-cla); } .form-card{ background:var(--blanco); border:1px solid var(--gris-cla); border-radius:6px; padding:30px 24px; max-width:720px; margin:0 auto; text-align:left; } @media(min-width:768px){ .form-card{ padding:44px 48px; } } .form-card label.f-label{ display:block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-osc); margin-bottom:8px; } .f-row{ display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:18px; } @media(min-width:640px){ .f-row.cols-2{ grid-template-columns:1fr 1fr; } } .form-card input[type=text], .form-card input[type=tel], .form-card input[type=email], .form-card textarea{ width:100%; font-family:var(--body); font-size:14px; color:var(--negro); border:1px solid var(--gris-cla); border-radius:3px; padding:14px 16px; background:var(--blanco); transition:border-color .2s ease; } .form-card input:focus, .form-card textarea:focus{ border-color:var(--negro); outline:none; } .form-card textarea{ min-height:110px; resize:vertical; } /* Selector de perfil empresa / persona (PDF §9: enrutamiento de leads) */ .seg{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--negro); border-radius:3px; overflow:hidden; margin-bottom:4px; } .seg-opt{ position:relative; } .seg-opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; } .seg-opt span{ display:block; text-align:center; padding:14px 10px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--negro); background:var(--blanco); transition:all .2s ease; cursor:pointer; } .seg-opt input:checked + span{ background:var(--negro); color:var(--blanco); } .seg-opt input:focus-visible + span{ outline:2px solid var(--negro); outline-offset:-3px; } .seg-hint{ font-size:12px; color:var(--gris-med); margin-bottom:18px; } .f-consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--gris-osc); margin:6px 0 24px; } .f-consent input{ margin-top:3px; } .form-card .btn{ width:100%; } .form-ok{ text-align:center; padding:28px 10px; } .form-ok h3{ font-family:var(--body); font-weight:600; font-size:17px; letter-spacing:0; margin-bottom:10px; } .form-ok p{ font-size:14px; color:var(--gris-osc); } /* Datos de contacto por vertical (vista Contacto) */ .contact-cards{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:48px; } @media(min-width:768px){ .contact-cards{ grid-template-columns:1fr 1fr; } } .contact-card{ border:1px solid var(--gris-cla); border-radius:6px; padding:30px 26px; background:var(--blanco); text-align:left; } .contact-card h3{ font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px; } .contact-card li{ font-size:14px; color:var(--gris-osc); margin-bottom:10px; } /* ========================================================================== 20. FOOTER ========================================================================== */ footer{ background:var(--blanco); border-top:1px solid var(--gris-cla); padding:64px 0 28px; } .foot-grid{ display:grid; grid-template-columns:1fr; gap:36px; margin-bottom:48px; } @media(min-width:768px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px; } } .foot-brand .logo{ margin-bottom:14px; display:inline-block; } .foot-brand p{ font-size:13px; color:var(--gris-osc); max-width:250px; } .foot-col h5{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; color:var(--gris-osc); } .foot-col li{ margin-bottom:11px; font-size:14px; } .foot-col a:hover{ color:var(--gris-osc); } .foot-bottom{ border-top:1px solid var(--gris-cla); padding-top:26px; display:flex; flex-direction:column; gap:16px; font-size:12px; color:var(--gris-med); } @media(min-width:768px){ .foot-bottom{ flex-direction:row; justify-content:space-between; align-items:center; } } .foot-social{ display:flex; gap:16px; } .foot-legal{ font-size:11.5px; color:var(--gris-med); max-width:820px; margin-top:18px; } /* ========================================================================== 21. ELEMENTOS FLOTANTES (conservados) ========================================================================== */ .wa-float{ position:fixed; right:22px; bottom:96px; width:54px; height:54px; border-radius:50%; background:var(--negro); display:flex; align-items:center; justify-content:center; z-index:60; box-shadow:0 6px 20px rgba(0,0,0,.25); cursor:pointer; } @media(min-width:1024px){ .wa-float{ bottom:22px; } } .mobile-cta-bar{ position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--blanco); border-top:1px solid var(--gris-cla); display:flex; gap:10px; padding:12px 16px; box-shadow:0 -4px 16px rgba(0,0,0,.06); } .mobile-cta-bar .btn-primary{ flex:1; padding:14px; font-size:12px; } .mobile-cta-bar .wa-btn{ width:48px; height:48px; border:1px solid var(--negro); border-radius:3px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } @media(min-width:1024px){ .mobile-cta-bar{display:none;} } body{ padding-bottom:78px; } @media(min-width:1024px){ body{ padding-bottom:0; } } /* ========================================================================== 22. AÑADIDOS DEL TEMA ========================================================================== */ .cap-skip-link{ position:absolute; left:8px; top:-48px; z-index:100; background:var(--negro); color:var(--blanco); padding:12px 18px; border-radius:3px; font-family:var(--body); font-size:13px; font-weight:600; text-decoration:none; transition:top .15s ease; } .cap-skip-link:focus{ top:8px; } /* -------------------------------------------------------------------------- .reveal — la animación se activa solo si hay JavaScript La sección 1 trae del mockup `.reveal{opacity:0; transform:translateY(22px)}` y `.reveal.in{opacity:1; transform:none}`: la clase `.in` la añade un IntersectionObserver al entrar el bloque en pantalla. El problema de servir eso tal cual es que `.reveal` marca casi todo el contenido de las páginas, así que cualquier cosa que impida al script ejecutarse —un 404 tras un despliegue a medias, un bloqueador, una red que se corta a mitad de la descarga— no dejaría «una página sin animación»: dejaría una página en blanco, con el texto ahí pero invisible. Es un modo de fallo demasiado caro para un adorno. Por eso el estado por defecto es «visible», y ocultar es lo que hay que pedir explícitamente: el script añade `js` al elemento raíz como primera instrucción, y solo entonces se esconde lo que aún no ha entrado en pantalla. Sin script, todo se lee. La última regla replica la excepción de `prefers-reduced-motion` de la sección 1: sin ella, este bloque —más específico y posterior— se la comería y quien pidió que nada se moviera vería el contenido aparecer de golpe al desplazarse, que es justo lo que quería evitar. -------------------------------------------------------------------------- */ .reveal{ opacity:1; transform:none; } .js .reveal:not(.in){ opacity:0; transform:translateY(22px); } @media (prefers-reduced-motion: reduce){ .js .reveal:not(.in){ opacity:1; transform:none; } } /* -------------------------------------------------------------------------- FAQ — el `.faq-q` es un