/* ========================================================================== MT Systems — hoja de estilos Sustituye la dependencia de Tailwind CDN (ver auditoría, punto I-04): esto es CSS plano, sin build step, listo para producción. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Libre+Baskerville:ital@1&display=swap'); :root{ --midnight:#060816; --navy:#0b0d1d; --navy-2:#11142a; --orange:#f06432; --orange-hover:#ff7444; --orange-ink:#1a0a03; /* texto oscuro sobre naranja: fix de contraste (ver auditoría) */ --lavender:#727bb7; --cream:#f8f7f3; --paper:#f1f0ec; --silver:#a8aabc; --silver-dim:#7c7f92; --ink:#090b18; --border:rgba(255,255,255,0.09); --border-soft:rgba(255,255,255,0.06); --font-body:'Inter',system-ui,-apple-system,sans-serif; --font-hand:'Libre Baskerville',Baskerville,'Times New Roman',serif; --container:1340px; /* --- Decoración ambiental ------------------------------------------- Toda la "atmósfera" del sitio (orbes de luz, anillos, acentos de las tarjetas de caso) se controla desde estas cinco variables. Subir o bajar la intensidad de todo el sitio es tocar solo esto — no hay opacidades sueltas repartidas por la hoja. Para la variante marcada: . -------------------------------------------------------------------- */ --deco-orb-orange:0.10; --deco-orb-lavender:0.075; --deco-ring:0.09; --deco-dot:0.5; --deco-card-accent:0.24; } :root[data-deco="bold"]{ --deco-orb-orange:0.19; --deco-orb-lavender:0.15; --deco-ring:0.17; --deco-dot:0.85; --deco-card-accent:0.36; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;} } body{ margin:0; background:var(--midnight); color:var(--cream); font-family:var(--font-body); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} button{font-family:inherit;} .section-pad{ max-width:var(--container); margin:0 auto; padding-left:24px; padding-right:24px; } .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:0.18em; color:var(--orange); font-weight:600; display:inline-block; margin-bottom:20px; } .heading-hero{ font-size:clamp(38px,6vw,90px); line-height:1.08; letter-spacing:-0.03em; font-weight:400; margin:0 0 28px; } .heading-section{ font-size:clamp(32px,4.5vw,60px); line-height:1.12; letter-spacing:-0.02em; font-weight:400; margin:0 0 20px; } .hand-accent{ font-family:var(--font-hand); font-style:italic; color:var(--orange); font-weight:400; display:block; } .lede{ color:var(--silver); font-size:clamp(17px,2vw,21px); max-width:44ch; line-height:1.65; } /* ---------- Botones ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 30px; border-radius:999px; font-weight:600; font-size:16px; border:1.5px solid transparent; cursor:pointer; transition:transform .2s ease, background .2s ease, border-color .2s ease; white-space:nowrap; } .btn:hover{transform:translateY(-1px);} .btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px;} /* Texto oscuro sobre naranja: pasa contraste AA (6.1:1) frente al blanco (3.2:1). */ .btn-primary{background:var(--orange);color:var(--orange-ink);} .btn-primary:hover{background:var(--orange-hover);} .btn-outline{background:transparent;color:var(--cream);border-color:var(--border);} .btn-outline:hover{border-color:var(--orange);color:var(--orange);} .btn-block{width:100%;} /* ---------- Header ---------- */ header.site{ position:sticky;top:0;z-index:40; background:rgba(6,8,22,0.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft); } header.site .bar{ max-width:var(--container); margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; } header.site .logo{display:flex;align-items:center;flex:none;} header.site .logo img{height:26px;width:auto;} header.site .btn{padding:11px 24px;font-size:14px;} header.site .bar-actions{display:flex;align-items:center;gap:14px;flex:none;} /* ---------- Navegación principal ---------- */ .nav-main{display:flex;align-items:center;gap:26px;} .nav-main a{ position:relative; padding:6px 0; font-size:14px; color:var(--silver); white-space:nowrap; transition:color .15s; } .nav-main a:hover{color:#fff;} .nav-main a.is-active{color:#fff;} .nav-main a.is-active::after{ content:""; position:absolute;left:0;right:0;bottom:-1px;height:2px; background:var(--orange);border-radius:2px; } /* Botón hamburguesa: oculto en escritorio */ .nav-toggle{ display:none; width:38px;height:38px; align-items:center;justify-content:center; background:transparent; border:1px solid var(--border); border-radius:10px; color:var(--silver); cursor:pointer; padding:0; transition:border-color .15s,color .15s; } .nav-toggle:hover{border-color:var(--orange);color:var(--orange);} .nav-toggle svg{width:18px;height:18px;} .nav-toggle .icon-close{display:none;} .nav-toggle[aria-expanded="true"] .icon-open{display:none;} .nav-toggle[aria-expanded="true"] .icon-close{display:block;} /* El enlace de contacto que solo aparece dentro del menú desplegable */ .nav-main .nav-cta{display:none;} @media (max-width:980px){ .nav-main{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; /* Opaco a propósito: el menú desplegable debe leerse sin que se transparente lo que hay detrás (con la foto del hero detrás, el efecto cristal estorba). */ background:var(--midnight); border-bottom:1px solid var(--border); padding:4px 24px 16px; } .nav-main.is-open{display:flex;} .nav-main a{ padding:14px 0; font-size:15.5px; border-bottom:1px solid var(--border-soft); } .nav-main a:last-child{border-bottom:none;} .nav-main a.is-active::after{display:none;} .nav-main a.is-active{color:var(--orange);} .nav-toggle{display:flex;} } @media (max-width:560px){ /* A este ancho el CTA no cabe junto al logo: se muestra dentro del menú. */ header.site .bar-actions > .btn{display:none;} .nav-main .nav-cta{ display:block; margin-top:14px; text-align:center; color:var(--orange-ink); background:var(--orange); border-radius:999px; font-weight:600; border-bottom:none; } } /* El header pegajoso no debe tapar el título al saltar a un ancla */ section[id]{scroll-margin-top:84px;} .lang-switch{ display:flex;align-items:center;justify-content:center; width:34px;height:34px; border-radius:50%; border:1px solid var(--border); font-size:12px;font-weight:600; color:var(--silver); transition:border-color .15s, color .15s; } .lang-switch:hover{border-color:var(--orange);color:var(--orange);} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;padding:96px 0 80px;} .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; } .hero-media{ position:relative; border-radius:28px; overflow:hidden; aspect-ratio:4/5; background:var(--navy); } .hero-media img{width:100%;height:100%;object-fit:cover;} .hero-media::after{ content:""; position:absolute;inset:0; background:linear-gradient(200deg, rgba(6,8,22,0) 30%, rgba(6,8,22,0.55) 100%); } .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;} @media (max-width:980px){ .hero{padding:56px 0 48px;} .hero-grid{grid-template-columns:1fr;gap:36px;} .hero-media{order:-1;aspect-ratio:16/10;} } /* ---------- Secciones genéricas ---------- */ section{padding:104px 0;position:relative;} @media (max-width:768px){ section{padding:64px 0;} } /* El contenido siempre por encima de la capa decorativa */ .section-pad{position:relative;z-index:1;} .section-head{max-width:640px;margin:0 0 56px;} .section-head.center{margin-left:auto;margin-right:auto;text-align:center;} /* ---------- Capa decorativa (orbes + anillos) ---------- Puramente ambiental: sin imágenes, sin peso extra, no captura clics y nunca afecta al layout. Vive detrás del contenido y se recorta contra los bordes de su sección, que es lo que produce el efecto de "sangrado". -------------------------------------------------------- */ .deco{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; } .deco > *{position:absolute;display:block;} .orb{border-radius:50%;} .orb-orange{ background:radial-gradient(circle, rgba(240,100,50,var(--deco-orb-orange)), rgba(240,100,50,0) 68%); } .orb-lavender{ background:radial-gradient(circle, rgba(114,123,183,var(--deco-orb-lavender)), rgba(114,123,183,0) 68%); } .ring{ border-radius:50%; border:1px solid rgba(255,255,255,var(--deco-ring)); } .ring-lav{border-color:rgba(114,123,183,calc(var(--deco-ring) * 1.9));} .dot{ width:7px;height:7px;border-radius:50%; background:var(--orange); opacity:var(--deco-dot); } /* --- Colocación por sección --- */ .hero .orb-a{width:840px;height:840px;top:-330px;left:-280px;} .hero .orb-b{width:700px;height:700px;bottom:-400px;right:-180px;} .hero .ring-a{width:560px;height:560px;top:-150px;left:-210px;} .hero .ring-b{width:880px;height:880px;top:-300px;left:-360px;} .hero .dot-a{top:120px;left:330px;} #sectores .orb-a{width:760px;height:760px;top:-200px;right:-300px;} #sectores .ring-a{width:640px;height:640px;bottom:-320px;left:-240px;} #sectores .dot-a{bottom:52px;left:376px;} #equipo .orb-a{width:680px;height:680px;top:40px;left:-320px;} #contacto .orb-a{width:820px;height:820px;bottom:-360px;right:-260px;} #contacto .ring-a{width:720px;height:720px;bottom:-380px;right:-250px;} #beneficios .ring-a{width:600px;height:600px;top:-260px;right:-220px;} #metodo .orb-a{width:620px;height:620px;bottom:-300px;left:-260px;} @media (max-width:768px){ /* En móvil los anillos grandes no aportan y sí ensucian: solo queda la luz. */ .ring{display:none;} .dot{display:none;} .hero .orb-a{width:520px;height:520px;top:-220px;left:-200px;} .hero .orb-b{width:440px;height:440px;bottom:-260px;right:-140px;} #sectores .orb-a{width:480px;height:480px;top:-140px;right:-200px;} #equipo .orb-a{width:440px;height:440px;left:-220px;} #contacto .orb-a{width:520px;height:520px;bottom:-240px;right:-180px;} #metodo .orb-a{width:420px;height:420px;bottom:-200px;left:-180px;} } /* ---------- Soluciones ---------- */ .solutions-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:20px; overflow:hidden; } .solution-card{ background:var(--midnight); padding:36px 28px; display:flex; flex-direction:column; gap:18px; } .solution-card .icon{ width:42px;height:42px; display:flex;align-items:center;justify-content:center; border-radius:12px; background:rgba(240,100,50,0.12); color:var(--orange); } .solution-card .icon svg{width:22px;height:22px;} .solution-card h3{font-size:18px;font-weight:600;margin:0;color:#fff;} .solution-card p{margin:0;color:var(--silver);font-size:14.5px;line-height:1.6;} @media (max-width:980px){ .solutions-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .solutions-grid{grid-template-columns:1fr;} } /* ---------- Sectores ---------- */ .sectors-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;} .sector-list{list-style:none;margin:0;padding:0;} .sector-list li{ border-top:1px solid var(--border-soft); } .sector-list li:last-child{border-bottom:1px solid var(--border-soft);} /* Cada sector es una fila; las que ya tienen página propia son enlaces. */ .sector-list a, .sector-list .no-link{ display:flex;align-items:center;justify-content:space-between;gap:18px; padding:20px 0; font-size:18px; color:var(--cream); } .sector-list a{transition:color .15s, padding-left .15s;} .sector-list a:hover{color:var(--orange);padding-left:8px;} .sector-list a:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px;} .sector-list .arrow{ flex:none;width:20px;height:20px; color:var(--silver-dim); opacity:.6; transition:opacity .15s, transform .15s, color .15s; } .sector-list a:hover .arrow{opacity:1;color:var(--orange);transform:translateX(3px);} .sector-list .soon{ flex:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--silver-dim);opacity:.6; } .case-cards{display:grid;gap:20px;} /* Tarjetas de caso: base oscura + acento de color en radial, la misma fórmula (radial sobre lineal) que da el aire "aesthetic" sin arriesgar contraste — el texto siempre cae sobre zona oscura, nunca sobre naranja. */ .case-card{ position:relative; overflow:hidden; isolation:isolate; border-radius:24px; padding:32px; color:#fff; border:1px solid rgba(255,255,255,0.10); } .case-card > *{position:relative;z-index:1;} .case-card::before, .case-card::after{ content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,calc(var(--deco-ring) * 2.1)); pointer-events:none; } .case-card::before{width:250px;height:250px;top:-86px;right:-64px;} .case-card::after{width:400px;height:400px;top:-160px;right:-140px;} .case-dot{ position:absolute; width:8px;height:8px;border-radius:50%; background:var(--orange); opacity:calc(var(--deco-dot) + 0.15); top:38px;right:52px; pointer-events:none; } .case-card-1{ background: radial-gradient(115% 85% at 12% 6%, rgba(240,100,50,var(--deco-card-accent)), rgba(240,100,50,0) 58%), linear-gradient(155deg,#1d1330,#0c0e1e 72%); } .case-card-2{ background: radial-gradient(115% 85% at 12% 6%, rgba(114,123,183,calc(var(--deco-card-accent) + 0.06)), rgba(114,123,183,0) 58%), linear-gradient(155deg,#161a3a,#0b0d1e 72%); } .case-card .stat{ font-size:46px; font-weight:600; line-height:1; margin-bottom:10px; font-variant-numeric:tabular-nums; } .case-card-1 .stat{color:var(--orange);} .case-card-2 .stat{color:#9aa4e0;} .case-card .stat-label{font-size:17px;font-weight:600;margin-bottom:10px;color:#fff;} .case-card p{margin:0;font-size:14.5px;color:var(--silver);line-height:1.55;} /* Enlace a la página de casos, bajo las dos tarjetas de la home */ .cases-link{ display:inline-flex;align-items:center;gap:10px; justify-self:start; font-size:15px;font-weight:600;color:var(--orange); } .cases-link .arrow{flex:none;width:18px;height:18px;transition:transform .15s;} .cases-link:hover .arrow{transform:translateX(3px);} .cases-link:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px;} @media (max-width:900px){ .sectors-layout{grid-template-columns:1fr;gap:40px;} } /* ---------- Metodología ---------- */ .method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;} .method-grid-4{grid-template-columns:repeat(4,1fr);} .method-step{ border-top:2px solid var(--orange); padding-top:24px; } .method-step .num{font-family:var(--font-body);font-size:13px;color:var(--silver-dim);letter-spacing:0.1em;margin-bottom:14px;display:block;} .method-step h3{font-size:clamp(20px,2vw,25px);font-weight:600;margin:0 0 16px;color:#fff;letter-spacing:-0.01em;line-height:1.25;} .method-step p{margin:0;color:var(--silver);font-size:15px;line-height:1.6;max-width:34ch;} @media (max-width:980px){ .method-grid-4{grid-template-columns:1fr 1fr;gap:40px;} } @media (max-width:820px){ .method-grid{grid-template-columns:1fr;gap:40px;} .method-grid-4{grid-template-columns:1fr;gap:40px;} } /* ---------- Equipo ---------- */ /* Quiénes somos: texto corrido, sin fichas de persona. Dos columnas en pantallas anchas para que los párrafos no queden en líneas larguísimas; una sola columna por debajo de 860px. */ .team-copy{ columns:2; column-gap:56px; max-width:104ch; } .team-copy p{ margin:0 0 18px; color:var(--silver); font-size:15.5px; line-height:1.7; break-inside:avoid; } .team-copy p:last-child{margin-bottom:0;} .team-copy p:first-child{ /* La entrada, algo mayor: es la promesa que sostiene el resto. */ font-size:17px; color:#e8e7e3; } @media (max-width:860px){ .team-copy{columns:1;max-width:64ch;} .team-copy p{font-size:15px;} .team-copy p:first-child{font-size:16px;} } /* ---------- Tecnología ---------- */ .tech-panel{ display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px; background:var(--navy); border:1px solid var(--border); border-radius:32px; padding:56px; align-items:center; } .tech-panel p.lede{margin-bottom:18px;} .tech-note{font-size:13.5px;color:var(--silver-dim);} .tech-note code{font-family:ui-monospace,'SF Mono',monospace;background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:5px;color:var(--silver);} .tech-items{display:grid;gap:22px;} .tech-item{border-left:2px solid var(--border);padding-left:20px;} .tech-item h4{margin:0 0 4px;font-size:16px;color:#fff;font-weight:600;} .tech-item span{color:var(--silver-dim);font-size:14px;} @media (max-width:900px){ .tech-panel{grid-template-columns:1fr;padding:36px 28px;gap:32px;} } /* ---------- Contacto ---------- */ .contact-panel{ display:grid;grid-template-columns:1fr 1fr;gap:56px; background:var(--navy); border:1px solid var(--border); border-radius:36px; padding:clamp(28px,4vw,72px); } .contact-info h2{margin:0 0 12px;} .contact-info .lede{margin-bottom:36px;} .contact-channels{display:grid;gap:18px;margin-top:8px;} .channel{ display:flex;align-items:center;gap:14px; padding:16px 18px; border:1px solid var(--border); border-radius:16px; } .channel .icon{width:36px;height:36px;border-radius:10px;background:rgba(240,100,50,0.12);color:var(--orange);display:flex;align-items:center;justify-content:center;flex:none;} .channel .icon svg{width:18px;height:18px;} .channel .label{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--silver-dim);margin-bottom:2px;} .channel .value{font-weight:600;color:#fff;} form.audit-form{display:flex;flex-direction:column;gap:16px;} .field{display:flex;flex-direction:column;gap:6px;} .field label{font-size:12.5px;color:var(--silver-dim);} .optional-tag{font-style:italic;opacity:0.75;} .field input,.field textarea{ width:100%; background:var(--midnight); border:1px solid var(--border); border-radius:16px; padding:15px 18px; color:var(--cream); font-family:inherit; font-size:15px; outline:none; transition:border-color .15s; } .field input:focus,.field textarea:focus{border-color:var(--orange);} .field textarea{resize:vertical;min-height:110px;} .form-status{font-size:14px;min-height:20px;} .form-status[data-state="ok"]{color:#5fbf8f;} .form-status[data-state="error"]{color:#ef6a5f;} @media (max-width:900px){ .contact-panel{grid-template-columns:1fr;gap:40px;} } /* ---------- Footer ---------- */ footer.site{border-top:1px solid var(--border-soft);padding:48px 0;} footer.site .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;} footer.site .brand{display:flex;align-items:center;gap:14px;} footer.site .brand img{height:20px;} footer.site .tagline{font-family:var(--font-hand);font-style:italic;font-size:22px;color:var(--orange);} footer.site .legal{display:flex;gap:20px;font-size:13px;color:var(--silver-dim);} footer.site .legal a:hover{color:var(--orange);} /* ========================================================================== Páginas sectoriales (/sectores/…) Reutilizan el mismo sistema de color, tipografía y decoración de la home. ========================================================================== */ .breadcrumb{ display:flex;align-items:center;gap:9px;flex-wrap:wrap; font-size:13px;color:var(--silver-dim); margin-bottom:22px; } .breadcrumb a{transition:color .15s;} .breadcrumb a:hover{color:var(--orange);} .breadcrumb .sep{opacity:.45;} .page-hero{padding:64px 0 56px;} .page-hero h1{ font-size:clamp(31px,4.4vw,56px); line-height:1.1;letter-spacing:-0.02em;font-weight:400; margin:0 0 22px;max-width:16ch; } .page-hero .lede{max-width:54ch;} .page-hero .lede + .lede{margin-top:14px;} .page-hero .hero-ctas{margin-top:30px;} /* --- Filas de "dónde puede aportar valor" (tarjetas con borde propio) --- */ .value-rows{display:grid;gap:20px;margin-top:8px;} .value-row{ border:1px solid var(--border); border-radius:22px; padding:clamp(26px,3vw,38px); background:var(--navy); } .value-row .vr-head{ display:flex;align-items:center;gap:16px; margin-bottom:18px; } .value-row .num{ display:inline-flex;align-items:center;justify-content:center; flex:none;width:40px;height:40px;border-radius:50%; background:rgba(240,100,50,0.12); border:1px solid rgba(240,100,50,0.38); color:var(--orange);font-size:14px;font-weight:600;letter-spacing:0; } .value-row h3{ font-size:clamp(19px,2vw,24px);font-weight:500; margin:0;color:#fff;line-height:1.25;letter-spacing:-0.01em; } .value-row .vr-body > p{ color:var(--silver);font-size:15.5px;line-height:1.7; margin:0 0 18px;max-width:64ch; } .value-row ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;} .value-row li{ position:relative;padding-left:20px; color:var(--silver);font-size:15px;line-height:1.55; } .value-row li::before{ content:"";position:absolute;left:0;top:9px; width:5px;height:5px;border-radius:50%; background:var(--orange);opacity:.8; } .value-row .vr-note{ margin:0;max-width:62ch; font-size:14.5px;line-height:1.65;color:var(--silver-dim); border-left:2px solid rgba(240,100,50,0.42); padding-left:16px; } .value-row .vr-body > *:last-child{margin-bottom:0;} @media (max-width:600px){ .value-row{padding:24px 20px;} .value-row .vr-head{gap:12px;} } /* --- Tarjeta de dato real (prueba) --- */ .proof-card{ position:relative;overflow:hidden; border-radius:24px;padding:clamp(26px,3vw,36px); border:1px solid rgba(255,255,255,0.10); background: radial-gradient(115% 85% at 10% 6%, rgba(240,100,50,var(--deco-card-accent)), rgba(240,100,50,0) 58%), linear-gradient(155deg,#1d1330,#0c0e1e 72%); display:flex;gap:30px;align-items:center;flex-wrap:wrap; } .proof-card::before{ content:"";position:absolute;border-radius:50%; border:1px solid rgba(255,255,255,calc(var(--deco-ring) * 2.1)); width:340px;height:340px;top:-130px;right:-90px;pointer-events:none; } .proof-card > *{position:relative;z-index:1;} .proof-card .pc-stat{ font-size:clamp(46px,6vw,64px);font-weight:600;color:var(--orange); line-height:1;font-variant-numeric:tabular-nums;flex:none; } .proof-card .pc-text{ margin:0;color:var(--silver);font-size:15.5px;line-height:1.65;max-width:52ch; } .proof-card .pc-text strong{color:#fff;font-weight:600;} /* --- Beneficios --- */ .benefit-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--border);border:1px solid var(--border); border-radius:20px;overflow:hidden; } .benefit{background:var(--midnight);padding:28px 26px;} .benefit .n{ display:block;font-size:12px;color:var(--orange); letter-spacing:0.1em;margin-bottom:10px; } .benefit p{margin:0;color:var(--silver);font-size:15px;line-height:1.6;} @media (max-width:900px){ .benefit-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .benefit-grid{grid-template-columns:1fr;} } /* --- Metodología en versión compacta (para las sectoriales) --- */ .method-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;} .method-strip .ms{border-top:2px solid var(--orange);padding-top:18px;} .method-strip h3{margin:0 0 9px;font-size:16.5px;color:#fff;font-weight:600;} .method-strip p{margin:0;color:var(--silver);font-size:14.5px;line-height:1.6;} @media (max-width:980px){ .method-strip{grid-template-columns:1fr 1fr;gap:28px;} } @media (max-width:600px){ .method-strip{grid-template-columns:1fr;gap:26px;} } /* --- Panel de cierre conceptual --- */ .essay-panel{ background:var(--navy); border:1px solid var(--border); border-radius:28px; padding:clamp(28px,4vw,54px); max-width:920px; } .essay-panel h2{margin:0 0 20px;} .essay-panel p{ margin:0 0 16px;color:var(--silver); font-size:16px;line-height:1.75;max-width:66ch; } .essay-panel p:last-child{margin-bottom:0;} /* --- Otras sectoriales al pie --- */ .more-sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .more-sector{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:20px 22px; border:1px solid var(--border);border-radius:16px; color:var(--cream);font-size:15.5px; transition:border-color .15s,color .15s; } .more-sector:hover{border-color:var(--orange);color:var(--orange);} .more-sector.is-soon{opacity:.5;} .more-sector .soon{ font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--silver-dim); } @media (max-width:820px){ .more-sectors{grid-template-columns:1fr;} } /* ========================================================================== Casos de éxito (/casos.html) Mismo sistema de color, tipografía y decoración; patrón de tarjeta propio: identidad del cliente + estado + qué se automatizó + dato + testimonio. ========================================================================== */ /* Hero de una sola columna (esta página no lleva foto) */ .hero-solo{max-width:900px;} .hero-solo h1{max-width:26ch;} .hero-solo .lede{max-width:60ch;} .hero-solo .lede + .lede{margin-top:14px;} /* Resumen honesto bajo el hero: cuántos hay y en qué estado */ .hero-facts{ display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px; margin-top:32px;padding-top:24px; border-top:1px solid var(--border-soft); } .hero-facts .hf{display:flex;align-items:baseline;gap:9px;} .hero-facts .hf-n{ font-size:26px;font-weight:600;color:var(--orange);line-height:1; font-variant-numeric:tabular-nums; } .hero-facts .hf-t{font-size:14px;color:var(--silver);} /* Aviso interno: se borra al publicar (mismo criterio que las páginas legales) */ .dev-note{ background:var(--navy); border:1px dashed var(--border); border-radius:16px; padding:20px 24px; margin-bottom:34px; font-size:14px;line-height:1.7;color:var(--silver); max-width:78ch; } .dev-note strong{color:#fff;} .dev-note a{color:var(--orange);} /* --- Tarjeta de caso --- */ .cases{display:grid;gap:22px;} .case-study{ border:1px solid var(--border); border-radius:24px; background:var(--navy); padding:clamp(26px,3vw,40px); } .cs-head{ display:flex;align-items:center;gap:20px;flex-wrap:wrap; padding-bottom:24px;margin-bottom:26px; border-bottom:1px solid var(--border-soft); } /* Hueco del logo: si no hay archivo, muestra el monograma del cliente. Se sustituye el por sin tocar nada más. */ .cs-logo{ flex:none;width:132px;height:64px;border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,0.04); display:flex;align-items:center;justify-content:center; overflow:hidden; } .cs-logo img{max-width:104px;max-height:44px;width:auto;height:auto;object-fit:contain;} .cs-logo .mono{ font-family:var(--font-hand);font-style:italic; font-size:23px;color:var(--orange);letter-spacing:0.01em; } .cs-id{flex:1 1 240px;min-width:0;} .cs-id h2{ margin:0 0 5px;font-size:clamp(20px,2.2vw,26px);font-weight:500; color:#fff;letter-spacing:-0.01em;line-height:1.25; } .cs-id .cs-meta{margin:0;font-size:14px;color:var(--silver-dim);} .cs-status{ flex:none;margin-left:auto; display:inline-flex;align-items:center;gap:9px; padding:8px 15px;border-radius:999px; font-size:11.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase; border:1px solid transparent; } .cs-status .pip{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;} .cs-status.is-live{color:#5fbf8f;border-color:rgba(95,191,143,0.40);background:rgba(95,191,143,0.10);} .cs-status.is-dev{color:#9aa4e0;border-color:rgba(154,164,224,0.40);background:rgba(154,164,224,0.10);} .cs-body{display:grid;grid-template-columns:1.3fr 0.7fr;gap:36px;align-items:start;} .cs-what > p{ margin:0 0 20px;color:var(--silver); font-size:15.5px;line-height:1.7;max-width:62ch; } .cs-what > p:last-child{margin-bottom:0;} .cs-what ul + p{margin-top:20px;} .cs-what h3{ margin:0 0 14px;font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:0.16em;color:var(--orange); } .cs-what ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;} .cs-what li{ position:relative;padding-left:20px; color:var(--silver);font-size:15px;line-height:1.55; } .cs-what li::before{ content:"";position:absolute;left:0;top:9px; width:5px;height:5px;border-radius:50%; background:var(--orange);opacity:.8; } .cs-side{display:grid;gap:20px;} /* Dato medido */ .cs-metric{ position:relative;overflow:hidden; border-radius:20px;padding:24px; border:1px solid rgba(255,255,255,0.10); background: radial-gradient(120% 90% at 12% 6%, rgba(240,100,50,var(--deco-card-accent)), rgba(240,100,50,0) 60%), linear-gradient(155deg,#1d1330,#0c0e1e 72%); } .cs-metric > *{position:relative;z-index:1;} .cs-metric .m-stat{ font-size:clamp(38px,4.2vw,48px);font-weight:600;color:var(--orange); line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums; } .cs-metric .m-label{margin:0;color:var(--silver);font-size:14.5px;line-height:1.55;} .cs-metric .m-label strong{color:#fff;font-weight:600;} /* Proyecto en desarrollo: mismo hueco, sin cifra inventada */ .cs-metric.is-open{ background: radial-gradient(120% 90% at 12% 6%, rgba(114,123,183,calc(var(--deco-card-accent) + 0.06)), rgba(114,123,183,0) 60%), linear-gradient(155deg,#161a3a,#0b0d1e 72%); } .cs-metric.is-open .m-stat{color:#9aa4e0;font-size:clamp(17px,2vw,20px);line-height:1.3;} /* Testimonio */ .cs-quote{border-left:2px solid rgba(240,100,50,0.42);padding-left:18px;} .cs-quote blockquote{ margin:0 0 12px; font-family:var(--font-hand);font-style:italic; font-size:15.5px;line-height:1.75;color:var(--cream); } .cs-quote cite{display:block;font-style:normal;font-size:13px;color:var(--silver-dim);line-height:1.5;} /* Marca de borrador: cada texto pendiente de confirmar con el cliente */ .cs-draft{ display:inline-block;margin-top:12px; padding:4px 9px;border-radius:7px; border:1px dashed var(--border); font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase; color:var(--silver-dim); } @media (max-width:980px){ .cs-body{grid-template-columns:1fr;gap:28px;} .cs-side{grid-template-columns:1fr 1fr;gap:22px;align-items:start;} } @media (max-width:700px){ .cs-side{grid-template-columns:1fr;} .cs-status{margin-left:0;} } @media (max-width:560px){ .cs-head{gap:16px;padding-bottom:20px;margin-bottom:22px;} .cs-logo{width:108px;height:56px;} } /* Variante de 4 columnas del bloque de sectores al pie */ .more-sectors.cols-4{grid-template-columns:repeat(4,1fr);} .more-sectors.cols-4 .more-sector{font-size:14.5px;padding:18px 18px;} @media (max-width:1080px){ .more-sectors.cols-4{grid-template-columns:1fr 1fr;} } @media (max-width:620px){ .more-sectors.cols-4{grid-template-columns:1fr;} } /* ---------- Reveal on scroll ---------- */ .reveal{opacity:1;transform:none;} @media (prefers-reduced-motion:no-preference){ .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;} .reveal.is-visible{opacity:1;transform:none;} } /* ========================================================================== Página de casos de éxito — rediseño editorial Todo va namespaced bajo .cases-editorial: ninguna de estas reglas puede afectar a las otras páginas del sitio. ========================================================================== */ @media (max-width:900px) { .cases-editorial .story-opening, .cases-editorial .story-reverse .story-opening, .cases-editorial .story-compact .story-opening, .cases-editorial .story-development .story-opening{grid-template-columns:minmax(0,1fr);gap:35px;} .cases-editorial .story-reverse .story-intro, .cases-editorial .story-reverse .cs-metric{grid-column:auto;grid-row:auto;} .cases-editorial .story-featured .cs-metric{padding:0;} .cases-editorial .story-featured .cs-metric .m-stat{font-size:clamp(5.5rem,15vw,8rem);} .cases-editorial .story-featured .m-label{max-width:48ch;} .cases-editorial .story-featured .m-label strong{font-size:1.25rem;} .cases-editorial .story-context{max-width:65ch;} .cases-editorial .story-featured > .story-details{max-width:none;margin:0;} .cases-editorial .cs-quote{max-width:90%;} .cases-editorial .story-reverse > .cs-quote{margin-right:5%;} .cases-editorial .story-development .story-intro{display:contents;} .cases-editorial .story-development .story-context{grid-row:1;} .cases-editorial .story-development .story-details{grid-row:2;} .cases-editorial .story-development .cs-quote{grid-row:3;margin-top:10px;} } @media (max-width:620px) { .cases-editorial .page-hero{padding:38px 0 70px;} .cases-editorial .hero-solo h1{font-size:clamp(2rem,7.8vw,3rem);margin-bottom:30px;line-height:1.22;} .cases-editorial .hero-narrative{grid-template-columns:minmax(0,1fr);gap:20px;} .cases-editorial .hero-narrative .lede{font-size:1rem;line-height:1.8;} .cases-editorial .hero-facts{gap:16px 24px;margin-top:28px;} .cases-editorial .hero-facts .hf{gap:8px;} .cases-editorial .hero-facts .hf-n{font-size:1.5rem;} .cases-editorial .hero-ctas .btn{white-space:normal;text-align:center;max-width:100%;padding:14px 22px;} .cases-editorial .dev-note{padding-left:15px;margin-bottom:55px;} .cases-editorial .cs-head{column-gap:14px;row-gap:22px;} .cases-editorial .cs-id h2{font-size:2rem;} .cases-editorial .cs-status{font-size:.8125rem;} .cases-editorial .story-context{font-size:1rem;line-height:1.85;} .cases-editorial .story-featured .cs-metric .m-stat{font-size:clamp(4.75rem,22vw,7rem);} .cases-editorial .story-flow{ display:grid;grid-template-columns:minmax(0,1fr);gap:0; margin:36px 0 30px;padding:18px 0; } .cases-editorial .story-flow li{display:flex;flex-direction:column;align-items:flex-start;font-size:1rem;} .cases-editorial .story-flow li:not(:last-child)::after{content:'↓';margin:5px 0;color:var(--orange);line-height:1.2;} .cases-editorial .cs-what li{padding-left:20px;} .cases-editorial .cs-quote, .cases-editorial .story-reverse > .cs-quote, .cases-editorial .story-compact > .cs-quote{margin:46px 0 0;max-width:none;padding-top:25px;} .cases-editorial .cs-quote blockquote{font-size:1.25rem;line-height:1.8;} .cases-editorial .case-study + .case-study{margin-top:75px;padding-top:52px;} .cases-editorial .stories-in-progress{margin-top:80px;padding-top:50px;} .cases-editorial .building-heading{margin-bottom:48px;} .cases-editorial .building-heading .heading-section{font-size:2.25rem;} .cases-editorial .stories-in-progress .case-study + .case-study{margin-top:60px;padding-top:45px;} .cases-editorial #criterio{padding:75px 0 12px;} .cases-editorial .story-development .cs-quote{margin-top:0;} } .cases-editorial .page-hero > .deco, .cases-editorial #casos > .deco, .cases-editorial #criterio > .deco{display:none;} .cases-editorial .page-hero .section-pad, .cases-editorial #casos > .section-pad, .cases-editorial #criterio > .section-pad{max-width:1220px;} .cases-editorial .page-hero{padding:64px 0 100px;} .cases-editorial .hero-solo{max-width:none;} .cases-editorial .hero-solo h1{ max-width:1080px;margin:0 0 48px; font-size:clamp(2.4rem,4.65vw,4.25rem);line-height:1.16; letter-spacing:-.045em;text-wrap:balance; } .cases-editorial .hero-solo .hand-accent{margin-top:9px;letter-spacing:-.045em;} .cases-editorial .hero-narrative{ display:grid;grid-template-columns:1fr 1fr;gap:8%;max-width:1080px; } .cases-editorial .hero-narrative .lede{ margin:0;max-width:none;font-size:1.0625rem;line-height:1.8; } .cases-editorial .hero-facts{ max-width:1080px;margin-top:40px;padding-top:25px;gap:20px 42px; } .cases-editorial .hero-facts .hf-n{font-size:1.75rem;font-weight:400;} .cases-editorial .hero-ctas{margin-top:30px;} .cases-editorial .page-hero .eyebrow, .cases-editorial #casos .eyebrow, .cases-editorial #criterio .eyebrow{font-size:.75rem;} .cases-editorial #casos{padding:16px 0 0;} .cases-editorial #casos > .section-pad > .section-head{ max-width:790px;margin-bottom:30px; } .cases-editorial #casos > .section-pad > .section-head .heading-section{ font-size:clamp(2rem,3.4vw,3rem);max-width:25ch;line-height:1.18; } .cases-editorial .dev-note{ background:none;border:0;border-left:1px solid var(--border); border-radius:0;padding:0 0 0 20px;max-width:85ch; margin:0 0 80px;font-size:.875rem;line-height:1.75; } .cases-editorial .cases{display:block;} .cases-editorial .case-study{ background:none;border:0;border-radius:0;padding:0;position:relative; } .cases-editorial .case-study + .case-study{ border-top:1px solid var(--border);margin-top:130px;padding-top:80px; } .cases-editorial .story-opening{ display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); column-gap:9%;align-items:start; } .cases-editorial .story-intro, .cases-editorial .story-details{min-width:0;} .cases-editorial .cs-head{ display:grid;grid-template-columns:auto minmax(0,1fr); column-gap:20px;row-gap:26px; margin:0 0 28px;padding:0;border:0; } .cases-editorial .cs-logo{ grid-column:1;grid-row:1; width:auto;min-width:36px;height:32px;border:0;border-radius:0; background:none;justify-content:flex-start;overflow:visible; } .cases-editorial .cs-logo .mono{font-size:1.25rem;color:var(--orange);} .cases-editorial .cs-logo img{max-width:104px;max-height:36px;} .cases-editorial .cs-id{grid-column:1 / -1;grid-row:2;} .cases-editorial .cs-id h2{ margin:0 0 17px;font-size:clamp(2rem,3.6vw,3.25rem); font-weight:400;line-height:1.15;letter-spacing:-.04em;text-wrap:balance; } .cases-editorial .cs-id .cs-meta{font-size:.875rem;color:var(--silver);line-height:1.65;} .cases-editorial .cs-status{ grid-column:2;grid-row:1;justify-self:start; margin:0;padding:0;border:0;background:none;border-radius:0; font-size:.8125rem;font-weight:400;letter-spacing:0;text-transform:none; color:var(--silver);line-height:1.5; } .cases-editorial .cs-status .pip{width:5px;height:5px;} .cases-editorial .cs-status.is-live .pip{background:var(--orange);} .cases-editorial .cs-status.is-dev{color:#9aa4e0;} .cases-editorial .story-context{ margin:0;max-width:58ch;color:var(--silver);font-size:1.0625rem;line-height:1.85; } .cases-editorial .cs-metric, .cases-editorial .cs-metric.is-open{ border:0;border-radius:0;background:none;padding:0;overflow:visible; } .cases-editorial .story-featured .cs-metric{align-self:center;padding:32px 0 0;} .cases-editorial .story-featured .cs-metric .m-stat{ font-size:clamp(5.5rem,11.5vw,9.625rem);font-weight:300; line-height:1.05;letter-spacing:-.075em;white-space:nowrap; margin:0 0 20px;color:var(--orange); } .cases-editorial .cs-metric .m-label{ max-width:30ch;font-size:1rem;line-height:1.8;margin:0; } .cases-editorial .story-featured .m-label strong{ display:block;font-weight:400;font-size:1.375rem;line-height:1.45; color:var(--cream);margin-bottom:14px; } .cases-editorial .story-flow{ display:flex;align-items:baseline;flex-wrap:wrap;gap:18px 0; list-style:none;margin:56px 0 38px;padding:25px 0; border-top:1px solid var(--border);border-bottom:1px solid var(--border); } .cases-editorial .story-flow li{ display:flex;align-items:baseline;font-size:.9375rem;color:var(--cream);line-height:1.5; } .cases-editorial .story-flow li:not(:last-child)::after{ content:'→';color:var(--orange);margin:0 clamp(15px,2.5vw,38px); } .cases-editorial .story-featured > .story-details{max-width:850px;} .cases-editorial .cs-what h3{ font-size:.8125rem;line-height:1.6;letter-spacing:.11em; margin:0 0 24px;color:var(--orange);font-weight:500; } .cases-editorial .cs-what ul{gap:18px;} .cases-editorial .cs-what li{ font-size:1rem;line-height:1.8;padding-left:24px;max-width:78ch; } .cases-editorial .cs-what li::before{ width:8px;height:1px;top:.9em;border-radius:0;opacity:1; } .cases-editorial .cs-what > p{ font-size:1rem;line-height:1.8;max-width:70ch; } .cases-editorial .cs-what ul + p{margin-top:30px;} .cases-editorial .cs-quote{ position:relative;border:0;padding:30px 0 0; max-width:850px;margin:74px 0 0 auto; } .cases-editorial .cs-quote::before{ content:'';position:absolute;top:0;left:0;width:44px;height:2px;background:var(--orange); } .cases-editorial .cs-quote blockquote{ margin:0 0 24px;font-size:clamp(1.25rem,2.1vw,1.75rem); font-weight:400;line-height:1.75;letter-spacing:-.018em; } .cases-editorial .cs-quote cite{font-size:.875rem;color:var(--silver);} .cases-editorial .cs-draft{ display:block;width:fit-content;max-width:100%; padding:0;margin-top:10px;border:0;border-radius:0; font-size:.8125rem;line-height:1.6;letter-spacing:0; text-transform:none;color:var(--silver); } .cases-editorial .story-reverse .story-opening{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); } .cases-editorial .story-reverse .story-intro{grid-column:2;grid-row:1;} .cases-editorial .story-reverse .cs-metric{grid-column:1;grid-row:1;} .cases-editorial .story-reverse .cs-metric .m-stat{color:#9aa4e0;} .cases-editorial .story-reverse > .story-details{margin-left:auto;max-width:780px;} .cases-editorial .story-reverse > .cs-quote{margin-left:0;margin-right:10%;} .cases-editorial .story-compact .story-opening{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%; } .cases-editorial .story-compact .cs-id h2{font-size:clamp(2rem,3vw,2.75rem);} .cases-editorial .story-compact .story-details{padding-top:5px;} .cases-editorial .story-compact .cs-metric{ margin-top:32px;padding-top:20px;border-top:1px solid var(--border); } .cases-editorial .story-compact .cs-metric .m-stat{ margin:0 0 4px;font-size:1rem;font-weight:500;color:var(--silver);line-height:1.6; } .cases-editorial .story-compact .m-label{max-width:none;font-size:1rem;} .cases-editorial .story-compact .m-label strong{font-weight:400;color:var(--silver);} .cases-editorial .story-compact .cs-metric .cs-draft{color:#9aa4e0;} .cases-editorial .story-compact > .cs-quote{max-width:740px;margin-top:60px;} .cases-editorial .story-compact .cs-quote blockquote{font-size:clamp(1.25rem,1.8vw,1.5rem);} .cases-editorial .stories-in-progress{ margin-top:135px;padding:80px 0 0;border-top:1px solid var(--border); } .cases-editorial .building-heading{margin-bottom:70px;} .cases-editorial .building-heading .heading-section{ font-size:clamp(2.3rem,4.3vw,3.75rem);line-height:1.18; } .cases-editorial .building-heading .hand-accent{color:#9aa4e0;} .cases-editorial .story-development{max-width:1040px;} .cases-editorial .story-development > .cs-head{max-width:700px;margin-bottom:30px;} .cases-editorial .story-development .cs-id h2{font-size:clamp(1.75rem,2.8vw,2.5rem);} .cases-editorial .story-development .story-opening{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%; } .cases-editorial .story-development .story-context{font-size:1rem;} .cases-editorial .story-development .cs-quote{margin:40px 0 0;padding-top:25px;} .cases-editorial .story-development .cs-quote blockquote{font-size:1.125rem;line-height:1.85;} .cases-editorial .story-development .cs-what h3{color:#9aa4e0;} .cases-editorial .story-development .cs-what li::before{background:#9aa4e0;} .cases-editorial .story-development .cs-metric.is-open{ margin-top:32px;padding-top:18px;border-top:1px solid var(--border-soft); } .cases-editorial .story-development .cs-metric.is-open .m-stat{ font-size:.875rem;line-height:1.6;font-weight:400;color:var(--silver);margin-bottom:8px; } .cases-editorial .story-development .cs-metric.is-open .m-label{ font-size:.875rem;line-height:1.8;max-width:none; } .cases-editorial .story-development .cs-metric.is-open .m-label strong{font-weight:400;color:var(--silver);} .cases-editorial .story-development-offset{margin-left:auto;} .cases-editorial .stories-in-progress .case-study + .case-study{margin-top:80px;padding-top:60px;} .cases-editorial #criterio{padding:110px 0 40px;} .cases-editorial #criterio .essay-panel{ border:0;border-radius:0;background:none;max-width:880px; padding:35px 0 0;margin:0 auto;border-top:1px solid var(--border); } .cases-editorial #criterio .essay-panel h2{font-size:clamp(1.75rem,3.2vw,2.5rem);} .cases-editorial #criterio .essay-panel p{max-width:76ch;line-height:1.85;} .cases-editorial .page-hero .reveal, .cases-editorial #casos .reveal, .cases-editorial #criterio .reveal{opacity:1;transform:none;transition:none;} .cases-editorial .automation-details{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .cases-editorial .automation-details summary{ display:flex;align-items:center;justify-content:space-between;gap:24px; min-height:64px;padding:18px 0;cursor:pointer;list-style:none; color:var(--cream); } .cases-editorial .automation-details summary::-webkit-details-marker{display:none;} .cases-editorial .automation-details summary::marker{content:'';} .cases-editorial .automation-details summary::after{ content:'+';flex:none;color:var(--orange);font-size:1.5rem; font-weight:300;line-height:1; } .cases-editorial .automation-details[open] summary::after{content:'−';} .cases-editorial .automation-details summary h3{ margin:0;font-size:1rem;line-height:1.6;letter-spacing:0; text-transform:none;font-weight:500;color:inherit; } .cases-editorial .automation-details summary:hover{color:var(--orange);} .cases-editorial .automation-details summary:focus-visible{ outline:2px solid var(--orange);outline-offset:5px;border-radius:2px; } .cases-editorial .automation-details > ul{padding:8px 0 28px;} .cases-editorial .automation-details + p{margin-top:24px;}