/* ========================================================= GRUPO EPAL — Sistema de diseño ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap'); :root{ --black: #08090b; --dark: #0d0f12; --dark-2: #14171c; --dark-3: #1e2229; --line-dark: rgba(255,255,255,.10); --orange: #f3701f; --orange-2: #ff8f45; --orange-3: #c9540d; --white: #ffffff; --off: #f6f5f3; --line: #e6e3de; --gray: #6b6b6b; --gray-2: #9b9b9b; --ink: #14161a; --fh: 'Barlow Condensed', 'Arial Narrow', sans-serif; --fb: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --max: 1280px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--fb); color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.6; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; cursor:pointer; border:0; background:none; } ::selection{ background:var(--orange); color:#fff; } /* scrollbar */ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:var(--dark); } ::-webkit-scrollbar-thumb{ background:var(--orange-3); } ::-webkit-scrollbar-thumb:hover{ background:var(--orange); } .wrap{ max-width:var(--max); margin:0 auto; padding:0 34px; } /* ---------- Tipografía ---------- */ h1,h2,h3,h4{ font-family:var(--fh); font-weight:700; text-transform:uppercase; line-height:1; margin:0; letter-spacing:.005em; } .eyebrow{ display:inline-flex; align-items:center; gap:12px; font-family:var(--fh); font-weight:600; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--orange); margin:0 0 16px; } .eyebrow::before{ content:''; width:34px; height:2px; background:var(--orange); } .sec-title{ font-size:clamp(32px,4.6vw,56px); margin-bottom:26px; } .sec-title .thin{ font-weight:500; color:var(--gray-2); } .section-dark .sec-title .thin{ color:rgba(255,255,255,.45); } .lede{ font-size:18px; line-height:1.75; color:var(--gray); max-width:740px; font-weight:300; } .section-dark .lede{ color:rgba(255,255,255,.72); } /* ---------- Botones ---------- */ .btn{ position:relative; display:inline-flex; align-items:center; gap:12px; font-family:var(--fh); font-weight:600; font-size:16px; letter-spacing:.09em; text-transform:uppercase; padding:16px 34px; border:1px solid transparent; overflow:hidden; transition:color .35s var(--ease), border-color .35s var(--ease); z-index:0; } .btn span{ position:relative; z-index:2; } .btn::after{ content:''; position:absolute; inset:0; z-index:1; background:var(--orange); transform:translateY(101%); transition:transform .45s var(--ease-out); } .btn:hover::after{ transform:translateY(0); } .btn .arw{ position:relative; z-index:2; transition:transform .35s var(--ease); } .btn:hover .arw{ transform:translateX(5px); } .btn-solid{ background:var(--orange); color:#fff; } .btn-solid::after{ background:var(--ink); } .btn-solid:hover{ color:#fff; } .btn-ghost{ border-color:rgba(255,255,255,.4); color:#fff; } .btn-ghost:hover{ color:#fff; border-color:var(--orange); } .btn-dark{ border-color:var(--ink); color:var(--ink); } .btn-dark:hover{ color:#fff; border-color:var(--orange); } /* ---------- Reveal on scroll ---------- */ /* Estado final por defecto: sin JS todo se ve normal. Solo cuando hay JS (.js en ) se ocultan para animarlos. */ .reveal{ transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); } .js .reveal:not(.in){ opacity:0; transform:translateY(34px); } .reveal.d1{ transition-delay:.09s } .reveal.d2{ transition-delay:.18s } .reveal.d3{ transition-delay:.27s } .reveal.d4{ transition-delay:.36s } .reveal-x{ transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); } .js .reveal-x:not(.in){ opacity:0; transform:translateX(-40px); } /* Cortina que se desliza (no usa clip-path sobre el propio elemento: eso impide que el navegador lo detecte como visible y la foto nunca aparecía) */ .clip{ position:relative; } .clip::after{ content:''; position:absolute; inset:0; z-index:4; background:var(--dark); transform-origin:right center; transition:transform 1.05s var(--ease-out); transform:scaleX(0); } .js .clip:not(.in)::after{ transform:scaleX(1); } @media (prefers-reduced-motion: reduce){ .reveal,.reveal-x{ opacity:1 !important; transform:none !important; } .clip::after{ display:none !important; } } /* ---------- Preloader ---------- */ #preloader{ position:fixed; inset:0; z-index:9999; background:var(--black); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:24px; transition:opacity .6s ease, visibility .6s ease; } #preloader.done{ opacity:0; visibility:hidden; } #preloader .pl-logo{ width:78px; opacity:.95; animation:plPulse 1.6s ease-in-out infinite; } #preloader .pl-bar{ width:170px; height:2px; background:rgba(255,255,255,.14); overflow:hidden; } #preloader .pl-bar i{ display:block; height:100%; width:40%; background:var(--orange); animation:plSlide 1.1s ease-in-out infinite; } @keyframes plPulse{ 0%,100%{opacity:.5} 50%{opacity:1} } @keyframes plSlide{ 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)} } /* ---------- Header ---------- */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:900; padding:24px 0; transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0)); } .site-header.solid{ background:rgba(10,11,13,.96); backdrop-filter:blur(10px); padding:14px 0; box-shadow:0 10px 34px rgba(0,0,0,.35); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:26px; } .brand{ display:flex; align-items:center; gap:14px; } .brand img{ height:54px; width:auto; transition:height .4s var(--ease); } .site-header.solid .brand img{ height:42px; } .brand-txt{ display:flex; flex-direction:column; line-height:1; } .brand-txt b{ font-family:var(--fh); font-weight:700; font-size:26px; color:#fff; letter-spacing:.03em; text-transform:uppercase; transition:font-size .4s var(--ease); } .brand-txt i{ font-style:normal; font-family:var(--fh); font-weight:500; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--orange); margin-top:5px; } .site-header.solid .brand-txt b{ font-size:22px; } .progress{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--orange); transition:width .1s linear; } .main-nav{ display:flex; align-items:center; gap:38px; } .main-nav > a{ font-family:var(--fh); font-weight:600; font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:#fff; position:relative; padding:6px 0; } .main-nav > a::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--orange); transition:width .38s var(--ease-out); } .main-nav > a:hover::after, .main-nav > a.active::after{ width:100%; } .main-nav > a.active{ color:var(--orange); } .nav-cta{ padding:13px 26px !important; font-size:15px !important; } .nav-cta::after{ background:var(--ink) !important; } .nav-toggle{ display:none; width:34px; height:24px; position:relative; } .nav-toggle i{ position:absolute; left:0; height:2px; width:100%; background:#fff; transition:.35s var(--ease); } .nav-toggle i:nth-child(1){ top:2px } .nav-toggle i:nth-child(2){ top:11px } .nav-toggle i:nth-child(3){ top:20px } .nav-toggle.on i:nth-child(1){ top:11px; transform:rotate(45deg) } .nav-toggle.on i:nth-child(2){ opacity:0 } .nav-toggle.on i:nth-child(3){ top:11px; transform:rotate(-45deg) } /* ---------- Hero ---------- */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--black); } .hero-media{ position:absolute; inset:-6% 0; will-change:transform; } .hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; } .hero::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(105deg, rgba(6,7,9,.92) 0%, rgba(6,7,9,.6) 45%, rgba(6,7,9,.3) 70%, rgba(6,7,9,.75) 100%); } .hero::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px); } .hero .wrap{ position:relative; z-index:3; padding-top:90px; } .hero-tag{ display:inline-flex; align-items:center; gap:12px; color:#fff; font-family:var(--fh); letter-spacing:.26em; font-size:13px; text-transform:uppercase; margin-bottom:26px; border:1px solid rgba(255,255,255,.25); padding:9px 18px; backdrop-filter:blur(4px); } .hero-tag .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); animation:blink 2s infinite; } @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} } .hero h1{ font-size:clamp(44px,6.4vw,92px); color:#fff; max-width:min(94%,1000px); margin-bottom:26px; } .hero h1 .ln{ display:block; overflow:hidden; } .hero h1 .ln i{ display:block; font-style:normal; transition:transform 1.05s var(--ease-out); } .js .hero:not(.ready) h1 .ln i{ transform:translateY(105%); } .hero h1 .ln:nth-child(1) i{ transition-delay:.15s } .hero h1 .ln:nth-child(2) i{ transition-delay:.28s } .hero h1 em{ font-style:normal; color:var(--orange); } .hero p{ font-size:19px; font-weight:300; color:rgba(255,255,255,.82); max-width:600px; margin:0 0 36px; } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; } .hero-side{ position:absolute; right:38px; top:50%; transform:translateY(-50%) rotate(180deg); z-index:3; writing-mode:vertical-rl; font-family:var(--fh); letter-spacing:.32em; font-size:12px; text-transform:uppercase; color:rgba(255,255,255,.45); } .scroll-cue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:12px; font-family:var(--fh); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.6); } .scroll-cue .track{ width:1px; height:46px; background:rgba(255,255,255,.25); position:relative; overflow:hidden; } .scroll-cue .track::after{ content:''; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--orange); animation:cue 2s infinite; } @keyframes cue{ 0%{transform:translateY(-100%)} 100%{transform:translateY(260%)} } /* ---------- Marquee ---------- */ .marquee{ background:var(--orange); overflow:hidden; padding:16px 0; } .marquee-track{ display:flex; gap:0; width:max-content; animation:mq 32s linear infinite; } .marquee:hover .marquee-track{ animation-play-state:paused; } .marquee span{ font-family:var(--fh); font-weight:700; font-size:19px; letter-spacing:.14em; text-transform:uppercase; color:#fff; padding:0 28px; display:inline-flex; align-items:center; gap:28px; white-space:nowrap; } .marquee span::after{ content:'◆'; font-size:10px; opacity:.65; } @keyframes mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ---------- Page hero ---------- */ .page-hero{ position:relative; min-height:64vh; display:flex; align-items:flex-end; background:var(--black); overflow:hidden; } .page-hero .ph-media{ position:absolute; inset:-5% 0; } .page-hero img{ width:100%; height:100%; object-fit:cover; opacity:.62; } .page-hero::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,9,11,.8) 0%, rgba(8,9,11,.22) 42%, rgba(8,9,11,.94) 100%); } .page-hero .wrap{ position:relative; z-index:2; padding-bottom:64px; padding-top:150px; } .page-hero h1{ color:#fff; font-size:clamp(44px,7vw,86px); } .crumb{ font-family:var(--fh); letter-spacing:.2em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.55); margin-bottom:18px; } .crumb a{ color:var(--orange); } .crumb a:hover{ text-decoration:underline; } /* ---------- Secciones ---------- */ .section{ padding:120px 0; position:relative; } .section.sm{ padding:84px 0; } .section-dark{ background:var(--dark); color:#fff; } .section-dark .sec-title{ color:#fff; } .section-off{ background:var(--off); } .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:56px; flex-wrap:wrap; } .sec-num{ font-family:var(--fh); font-size:15px; letter-spacing:.2em; color:var(--orange); border:1px solid currentColor; padding:5px 12px; align-self:flex-start; } /* ---------- Stats ---------- */ .stats{ background:var(--black); color:#fff; padding:0; border-top:1px solid var(--line-dark); } .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); } .stat{ padding:62px 26px; text-align:center; border-right:1px solid var(--line-dark); position:relative; overflow:hidden; } .stat:last-child{ border-right:0; } .stat::before{ content:''; position:absolute; inset:auto 0 0 0; height:3px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out); } .stat:hover::before{ transform:scaleX(1); } .stat .n{ font-family:var(--fh); font-weight:800; font-size:clamp(42px,5.4vw,66px); line-height:1; color:#fff; display:flex; align-items:baseline; justify-content:center; gap:2px; } .stat .n .suf{ color:var(--orange); } .stat .l{ margin-top:12px; font-family:var(--fh); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); } /* ---------- Cards especialidades ---------- */ .cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); } .card{ position:relative; padding:46px 34px 40px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; transition:color .4s var(--ease); background:var(--white); } .card::before{ content:''; position:absolute; inset:0; background:var(--ink); transform:translateY(100%); transition:transform .55s var(--ease-out); z-index:0; } .card:hover::before{ transform:translateY(0); } .card > *{ position:relative; z-index:1; } .card .ico{ width:56px; height:56px; margin-bottom:26px; object-fit:contain; color:var(--orange); fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; opacity:.88; transition:color .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease); } .card:hover .ico{ color:#fff; opacity:1; transform:translateY(-4px) scale(1.06); } .card .idx{ position:absolute; top:24px; right:26px; font-family:var(--fh); font-size:13px; letter-spacing:.15em; color:var(--gray-2); z-index:1; } .card h3{ font-size:22px; margin-bottom:14px; transition:color .4s var(--ease); } .card p{ font-size:15px; color:var(--gray); line-height:1.7; margin:0 0 20px; font-weight:300; transition:color .4s var(--ease); } .card .lnk{ font-family:var(--fh); font-weight:600; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); display:inline-flex; gap:8px; } .card .lnk span{ transition:transform .35s var(--ease); } .card:hover .lnk span{ transform:translateX(6px); } .card:hover h3{ color:#fff; } .card:hover p{ color:rgba(255,255,255,.7); } .card:hover .idx{ color:rgba(255,255,255,.4); } /* ---------- Split ---------- */ .split{ display:grid; grid-template-columns:1fr 1fr; } .split-media{ position:relative; min-height:520px; overflow:hidden; } .split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out); } .split:hover .split-media img{ transform:scale(1.05); } .split-badge{ position:absolute; z-index:2; left:0; top:0; background:var(--orange); color:#fff; padding:26px 32px; font-family:var(--fh); } .split-badge b{ display:block; font-size:44px; line-height:1; font-weight:800; } .split-badge i{ font-style:normal; font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.9; } .split-text{ position:relative; padding:96px 70px; display:flex; flex-direction:column; justify-content:center; } .split-text p{ font-size:16.5px; line-height:1.85; color:var(--gray); font-weight:300; margin:0 0 20px; } .split-dark .split-text{ background:var(--dark); color:#fff; } .split-dark .split-text p{ color:rgba(255,255,255,.72); } .split-dark .split-text h2{ color:#fff; } .split.rev .split-media{ order:2; } /* ---------- Acordeón (misión/visión/valores) ---------- */ .acc{ border-top:1px solid var(--line); } .section-dark .acc, .section-dark .acc-item{ border-color:var(--line-dark); } .acc-item{ border-bottom:1px solid var(--line); } .acc-head{ width:100%; display:flex; align-items:center; gap:24px; padding:30px 0; text-align:left; font-family:var(--fh); font-size:clamp(22px,2.6vw,30px); font-weight:700; text-transform:uppercase; color:inherit; transition:color .3s var(--ease); } .acc-head:hover{ color:var(--orange); } .acc-head .k{ font-size:14px; letter-spacing:.2em; color:var(--orange); min-width:34px; } .acc-head .pm{ margin-left:auto; width:22px; height:22px; position:relative; flex:none; } .acc-head .pm::before, .acc-head .pm::after{ content:''; position:absolute; background:currentColor; transition:transform .4s var(--ease), opacity .3s; } .acc-head .pm::before{ top:10px; left:0; width:22px; height:2px; } .acc-head .pm::after{ left:10px; top:0; width:2px; height:22px; } .acc-item.open .acc-head{ color:var(--orange); } .acc-item.open .pm::after{ transform:scaleY(0); } .acc-body{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease-out); } .acc-body .inner{ padding:0 0 30px 58px; font-size:16.5px; line-height:1.85; color:var(--gray); font-weight:300; max-width:820px; } .section-dark .acc-body .inner{ color:rgba(255,255,255,.7); } /* ---------- Valores ---------- */ .values{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-left:1px solid var(--line-dark); } .val{ padding:38px 26px; border-right:1px solid var(--line-dark); transition:background .4s var(--ease); } .val:hover{ background:rgba(243,112,31,.09); } .val .vn{ font-family:var(--fh); font-size:13px; letter-spacing:.2em; color:var(--orange); margin-bottom:16px; } .val h4{ font-size:19px; margin-bottom:10px; color:#fff; } .val p{ margin:0; font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.6); font-weight:300; } /* ---------- Proyectos ---------- */ .filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; } .filters button{ font-family:var(--fh); font-weight:600; font-size:14px; letter-spacing:.12em; text-transform:uppercase; padding:11px 22px; border:1px solid var(--line); color:var(--gray); transition:.32s var(--ease); } .section-dark .filters button{ border-color:var(--line-dark); color:rgba(255,255,255,.6); } .filters button:hover{ border-color:var(--orange); color:var(--orange); } .filters button.on{ background:var(--orange); border-color:var(--orange); color:#fff; } .pgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; } .pgrid.mix .p-item:nth-child(3n+1){ grid-column:span 2; } .p-item{ transition:opacity .45s var(--ease), transform .45s var(--ease); } .p-item.hide{ display:none; } .p-card{ position:relative; display:block; overflow:hidden; height:400px; background:var(--dark); cursor:pointer; } .pgrid.mix .p-item:nth-child(3n+1) .p-card{ height:460px; } .p-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out), filter .6s var(--ease); } .p-card:hover img{ transform:scale(1.07); } .p-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,7,9,.95) 0%, rgba(6,7,9,.28) 52%, rgba(6,7,9,.05) 78%); transition:opacity .5s var(--ease); } .p-info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px; color:#fff; } .p-info .tag{ display:inline-block; font-family:var(--fh); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--orange); border:1px solid rgba(243,112,31,.55); padding:5px 12px; margin-bottom:14px; } .p-info h3{ font-size:28px; margin-bottom:10px; } .p-info p{ font-size:14.5px; color:rgba(255,255,255,.75); max-width:520px; margin:0; font-weight:300; max-height:0; opacity:0; overflow:hidden; transition:max-height .55s var(--ease-out), opacity .45s var(--ease); } .p-card:hover .p-info p{ max-height:120px; opacity:1; } .p-plus{ position:absolute; top:26px; right:26px; z-index:2; width:46px; height:46px; border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; font-weight:300; opacity:0; transform:scale(.8); transition:.45s var(--ease-out); backdrop-filter:blur(4px); } .p-card:hover .p-plus{ opacity:1; transform:none; background:var(--orange); border-color:var(--orange); } /* ---------- Galería ---------- */ .gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .gal a{ position:relative; overflow:hidden; height:300px; display:block; cursor:pointer; } .gal a:first-child{ grid-column:span 2; height:300px; } .gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); } .gal a:hover img{ transform:scale(1.08); } .gal a::after{ content:'+'; position:absolute; inset:0; background:rgba(243,112,31,.82); color:#fff; display:flex; align-items:center; justify-content:center; font-size:40px; font-weight:200; opacity:0; transition:opacity .4s var(--ease); } .gal a:hover::after{ opacity:1; } /* ---------- Lightbox ---------- */ #lightbox{ position:fixed; inset:0; z-index:1000; background:rgba(5,6,8,.96); display:none; align-items:center; justify-content:center; padding:5vh 6vw; opacity:0; transition:opacity .35s ease; } #lightbox.show{ display:flex; opacity:1; } #lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; box-shadow:0 30px 70px rgba(0,0,0,.6); } #lightbox .lb-close{ position:absolute; top:26px; right:34px; color:#fff; font-size:38px; line-height:1; font-weight:200; } #lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:44px; font-weight:200; padding:20px; opacity:.6; transition:opacity .3s, color .3s; } #lightbox .lb-nav:hover{ opacity:1; color:var(--orange); } #lightbox .lb-prev{ left:14px } #lightbox .lb-next{ right:14px } #lightbox .lb-cap{ position:absolute; bottom:24px; left:0; right:0; text-align:center; color:rgba(255,255,255,.75); font-family:var(--fh); letter-spacing:.18em; text-transform:uppercase; font-size:13px; } /* ---------- Quote / testimonio ---------- */ .quote{ background:var(--black); color:#fff; padding:110px 0; position:relative; overflow:hidden; } .quote::before{ content:'“'; position:absolute; top:-60px; left:4%; font-family:var(--fh); font-size:320px; color:rgba(243,112,31,.12); line-height:1; } .quote .wrap{ position:relative; z-index:2; } .q-slide{ display:none; } .q-slide.on{ display:block; animation:qIn .7s var(--ease-out); } @keyframes qIn{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} } .q-slide p{ font-size:clamp(21px,2.9vw,34px); line-height:1.48; max-width:960px; font-weight:300; margin:0 0 28px; } .q-who{ font-family:var(--fh); letter-spacing:.16em; text-transform:uppercase; color:var(--orange); font-size:14px; } .q-dots{ display:flex; gap:10px; margin-top:40px; } .q-dots button{ width:34px; height:3px; background:rgba(255,255,255,.22); transition:background .35s; } .q-dots button.on{ background:var(--orange); } /* ---------- Proceso ---------- */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; } .step{ padding:0 30px 0 0; position:relative; } .step .sn{ font-family:var(--fh); font-weight:800; font-size:54px; color:transparent; -webkit-text-stroke:1.5px var(--orange); line-height:1; margin-bottom:18px; } .step h4{ font-size:20px; margin-bottom:12px; } .step p{ font-size:15px; color:var(--gray); line-height:1.7; font-weight:300; margin:0; } .section-dark .step p{ color:rgba(255,255,255,.65); } .step::after{ content:''; position:absolute; top:26px; right:16px; width:calc(100% - 90px); height:1px; background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); } .step:last-child::after{ display:none; } /* ---------- CTA band ---------- */ .cta-band{ position:relative; overflow:hidden; background:var(--dark); color:#fff; padding:96px 0; text-align:center; } .cta-band::before{ content:''; position:absolute; inset:0; opacity:.16; background:url('../img/obras/2025_04_30-Air-11-copy-2048x1364.webp') center/cover; } .cta-band .wrap{ position:relative; z-index:2; } .cta-band h2{ font-size:clamp(30px,4.4vw,52px); margin-bottom:18px; } .cta-band p{ color:rgba(255,255,255,.75); font-weight:300; max-width:620px; margin:0 auto 34px; font-size:17px; } /* ---------- Contacto ---------- */ .contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; } .info-item{ padding:22px 0; border-bottom:1px solid var(--line-dark); display:flex; gap:20px; align-items:flex-start; } .info-item .ic{ width:38px; height:38px; border:1px solid var(--orange); color:var(--orange); display:flex; align-items:center; justify-content:center; flex:none; font-size:15px; } .info-item h4{ font-family:var(--fh); font-size:13px; letter-spacing:.16em; color:var(--orange); margin:0 0 6px; } .info-item p{ margin:0; font-size:16px; color:rgba(255,255,255,.85); line-height:1.6; font-weight:300; } .info-item a:hover{ color:var(--orange); } .form-card{ background:var(--dark-2); padding:44px; border:1px solid var(--line-dark); } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } .full{ grid-column:1/-1; } .field{ position:relative; } .field input, .field textarea{ width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.22); padding:16px 2px 12px; font-family:var(--fb); font-size:15.5px; color:#fff; transition:border-color .35s var(--ease); } .field textarea{ resize:vertical; min-height:110px; } .field label{ position:absolute; left:2px; top:16px; font-size:15px; color:rgba(255,255,255,.45); pointer-events:none; transition:.32s var(--ease); font-weight:300; } .field input:focus, .field textarea:focus{ outline:0; border-color:var(--orange); } .field input:focus ~ label, .field textarea:focus ~ label, .field input:not(:placeholder-shown) ~ label, .field textarea:not(:placeholder-shown) ~ label{ top:-8px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); font-family:var(--fh); font-weight:600; } .field input::placeholder, .field textarea::placeholder{ color:transparent; } #form-status{ margin-top:16px; font-size:14.5px; font-weight:500; min-height:20px; } #form-status.ok{ color:#4ade80 } #form-status.err{ color:#f87171 } .form-note{ font-size:12.5px; color:rgba(255,255,255,.4); margin-top:16px; font-weight:300; } .map-wrap{ height:320px; border:1px solid var(--line-dark); margin-top:32px; } .map-wrap iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.9) contrast(.85); } /* ---------- Footer ---------- */ .site-footer{ background:var(--black); color:rgba(255,255,255,.65); padding:88px 0 0; border-top:1px solid var(--line-dark); } .f-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:48px; padding-bottom:60px; } .f-grid h4{ color:#fff; font-size:15px; letter-spacing:.14em; margin:0 0 22px; } .f-grid p, .f-grid li, .f-grid a{ font-size:14.5px; line-height:1.85; font-weight:300; } .f-grid ul li{ margin-bottom:8px; } .f-grid ul li a{ position:relative; transition:color .3s, padding-left .3s; } .f-grid ul li a:hover{ color:var(--orange); padding-left:12px; } .f-grid ul li a::before{ content:'→'; position:absolute; left:-4px; opacity:0; transition:.3s; color:var(--orange); } .f-grid ul li a:hover::before{ opacity:1; left:-2px; } .f-lockup{ display:flex; align-items:center; gap:14px; margin-bottom:22px; } .f-lockup img{ height:56px; width:auto; } .f-lockup span{ display:flex; flex-direction:column; line-height:1; } .f-lockup b{ font-family:var(--fh); font-weight:700; font-size:25px; color:#fff; letter-spacing:.03em; text-transform:uppercase; } .f-lockup i{ font-style:normal; font-family:var(--fh); font-weight:500; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--orange); margin-top:5px; } .f-social{ display:flex; gap:12px; margin-top:22px; } .f-social a{ width:40px; height:40px; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:14px; transition:.35s var(--ease); } .f-social a:hover{ background:var(--orange); border-color:var(--orange); color:#fff; transform:translateY(-3px); } .f-bottom{ border-top:1px solid var(--line-dark); padding:24px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.4); } /* ---------- Back to top ---------- */ #toTop{ position:fixed; right:26px; bottom:26px; z-index:800; width:48px; height:48px; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; opacity:0; visibility:hidden; transform:translateY(14px); transition:.4s var(--ease); } #toTop.on{ opacity:1; visibility:visible; transform:none; } #toTop:hover{ background:var(--ink); } /* ---------- WhatsApp flotante ---------- */ #wa{ position:fixed; left:26px; bottom:26px; z-index:800; height:48px; padding:0 20px; background:#25D366; color:#fff; display:flex; align-items:center; gap:10px; border-radius:40px; font-family:var(--fh); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:14px; box-shadow:0 10px 26px rgba(37,211,102,.32); transition:.35s var(--ease); } #wa:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(37,211,102,.45); } #wa .wa-icon{ width:20px; height:20px; flex:none; fill:currentColor; } .f-social .wa-icon{ width:16px; height:16px; fill:currentColor; } /* ---------- Responsive ---------- */ @media (max-width:1100px){ .split{ grid-template-columns:1fr; } .split.rev .split-media{ order:0; } .split-media{ min-height:380px; } .split-text{ padding:64px 40px; } .cards{ grid-template-columns:repeat(2,1fr); } .stats-grid{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(2){ border-right:0 } .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line-dark) } .values{ grid-template-columns:repeat(2,1fr); } .steps{ grid-template-columns:repeat(2,1fr); gap:44px 0; } .step::after{ display:none; } .contact-grid{ grid-template-columns:1fr; gap:48px; } .f-grid{ grid-template-columns:1fr 1fr; } .gal{ grid-template-columns:repeat(2,1fr); } .gal a:first-child{ grid-column:span 2; } } @media (max-width:760px){ .wrap{ padding:0 20px; } .section{ padding:78px 0; } .brand img{ height:42px; } .site-header.solid .brand img{ height:36px; } .brand-txt b{ font-size:19px; } .site-header.solid .brand-txt b{ font-size:17px; } .brand-txt i{ font-size:8.5px; letter-spacing:.2em; } .hero-side{ display:none; } .scroll-cue{ display:none; } .hero{ padding:120px 0 80px; min-height:0; } .hero .wrap{ padding-top:0; } .hero h1{ font-size:38px; } .hero h1 .ln{ overflow:visible; } .hero h1 .ln i{ transform:none !important; } .hero p{ font-size:16.5px; } .hero-actions .btn{ width:100%; justify-content:center; } .sec-num{ display:none; } .sec-head{ margin-bottom:36px; } .marquee span{ font-size:16px; padding:0 18px; gap:18px; } .cards{ grid-template-columns:1fr; } .pgrid{ grid-template-columns:1fr; } .pgrid.mix .p-item:nth-child(3n+1){ grid-column:auto; } .pgrid.mix .p-item:nth-child(3n+1) .p-card{ height:400px; } .values{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; } .form-grid{ grid-template-columns:1fr; } .form-card{ padding:30px 22px; } .f-grid{ grid-template-columns:1fr; } .gal{ grid-template-columns:1fr; } .gal a:first-child{ grid-column:auto; } .split-text{ padding:52px 24px; } .acc-body .inner{ padding-left:0; } #wa span{ display:none; } #wa{ padding:0; width:48px; justify-content:center; } } /* ========================================================= AMPLIACIÓN 2026 — nav desplegable, idioma, modales, sección naranja, página Experiencia, mapa de Cobertura, formulario de Bolsa de trabajo ========================================================= */ /* ---------- Sección naranja (Experiencia en Inicio) ---------- */ .section-orange{ background:var(--orange); color:#fff; } .section-orange .sec-title{ color:#fff; } .section-orange .sec-title .thin{ color:rgba(255,255,255,.72); font-weight:500; } .section-orange .eyebrow{ color:#fff; } .section-orange .eyebrow::before{ background:#fff; } .section-orange .sec-num{ color:#fff; border-color:rgba(255,255,255,.65); } .section-orange .lede{ color:rgba(255,255,255,.9); } /* Resaltado naranja para palabras sueltas dentro de un título */ .hl-orange{ background:var(--orange); color:#fff !important; font-weight:700; padding:2px 12px 4px; display:inline-block; line-height:1.05; } /* Símbolo de marca en la esquina del bloque de texto */ .split-logo{ position:absolute; z-index:3; top:28px; right:32px; } .split-logo img{ display:block; position:static; height:54px; width:auto; object-fit:contain; } /* ---------- Nav: grupos desplegables ---------- */ .main-nav{ gap:30px; } .nav-group{ position:relative; } .nav-group-btn{ font-family:var(--fh); font-weight:600; font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:6px 0; display:inline-flex; align-items:center; gap:8px; position:relative; } .nav-group-btn::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--orange); transition:width .38s var(--ease-out); } .nav-group:hover .nav-group-btn::after, .nav-group-btn.active::after{ width:100%; } .nav-group-btn.active{ color:var(--orange); } .nav-group-btn .caret{ width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .3s var(--ease); flex:none; } .nav-group:hover .nav-group-btn .caret, .nav-group-btn[aria-expanded="true"] .caret{ transform:rotate(-135deg) translate(-3px,-3px); } .nav-drop{ position:absolute; top:100%; left:-18px; min-width:238px; background:rgba(10,11,13,.98); backdrop-filter:blur(10px); border:1px solid var(--line-dark); border-top:2px solid var(--orange); padding:10px 0; margin-top:14px; opacity:0; visibility:hidden; transform:translateY(10px); transition:.32s var(--ease-out); box-shadow:0 22px 46px rgba(0,0,0,.45); } .nav-group:hover .nav-drop, .nav-group.open .nav-drop{ opacity:1; visibility:visible; transform:none; } .nav-drop a{ display:block; padding:11px 24px; font-family:var(--fh); font-weight:600; font-size:14.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82); transition:color .28s var(--ease), background .28s var(--ease), padding-left .28s var(--ease); } .nav-drop a:hover{ color:#fff; background:rgba(243,112,31,.16); padding-left:30px; } .nav-drop a.active{ color:var(--orange); } /* ---------- Selector de idioma ---------- */ .lang{ position:relative; } .lang-btn{ display:inline-flex; align-items:center; gap:8px; min-height:38px; color:#fff; font-family:var(--fh); font-weight:600; font-size:14px; letter-spacing:.12em; border:1px solid rgba(255,255,255,.28); padding:7px 11px; transition:.3s var(--ease); } .lang-btn:hover, .lang.open .lang-btn{ border-color:var(--orange); color:var(--orange); } .lang-current-flag,.lang-flag{ font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif; line-height:1; } .lang-current-flag{ font-size:18px; } .lang-caret{ width:6px; height:6px; margin-left:1px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease); } .lang.open .lang-caret{ transform:rotate(225deg) translate(-1px,-1px); } .lang-drop{ position:absolute; top:100%; right:0; margin-top:10px; min-width:228px; background:rgba(10,11,13,.98); backdrop-filter:blur(10px); border:1px solid var(--line-dark); border-top:2px solid var(--orange); padding:8px 0; opacity:0; visibility:hidden; transform:translateY(10px); transition:.32s var(--ease-out); box-shadow:0 22px 46px rgba(0,0,0,.45); z-index:5; } .lang.open .lang-drop{ opacity:1; visibility:visible; transform:none; } .lang-drop button{ display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 16px; color:rgba(255,255,255,.82); font-family:var(--fb); font-size:14.5px; font-weight:400; transition:.25s var(--ease); } .lang-drop .lang-flag{ font-size:19px; } .lang-drop small{ color:rgba(255,255,255,.36); font:600 10px/1 var(--fh); letter-spacing:.14em; } .lang-drop button:hover{ background:rgba(243,112,31,.16); color:#fff; } .lang-drop button.on{ color:var(--orange); background:rgba(243,112,31,.1); font-weight:600; } .lang-drop button.on small{ color:var(--orange); } /* ---------- Modal genérico (especialidades) ---------- */ #modal{ position:fixed; inset:0; z-index:1000; background:rgba(5,6,8,.94); display:none; align-items:center; justify-content:center; padding:5vh 5vw; opacity:0; transition:opacity .32s ease; } #modal.show{ display:flex; opacity:1; } .modal-box{ background:var(--dark-2); border:1px solid var(--line-dark); border-top:3px solid var(--orange); max-width:660px; width:100%; max-height:88vh; overflow:auto; position:relative; box-shadow:0 34px 70px rgba(0,0,0,.6); } .modal-box .m-media{ height:300px; background:var(--dark-3); position:relative; overflow:hidden; } .modal-box .m-media img{ width:100%; height:100%; object-fit:cover; } .modal-box .m-body{ padding:32px 36px 38px; color:#fff; } .modal-box .m-tag{ display:inline-block; font-family:var(--fh); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--orange); border:1px solid rgba(243,112,31,.55); padding:5px 12px; margin-bottom:14px; } .modal-box h3{ font-size:28px; margin-bottom:10px; color:#fff; } .modal-box .m-loc{ font-family:var(--fh); letter-spacing:.14em; text-transform:uppercase; font-size:13px; color:rgba(255,255,255,.6); margin:0 0 16px; } .modal-box .m-desc{ font-size:15.5px; line-height:1.75; color:rgba(255,255,255,.75); font-weight:300; margin:0; } .modal-close{ position:absolute; top:12px; right:14px; z-index:4; width:42px; height:42px; background:rgba(8,9,11,.7); color:#fff; font-size:28px; line-height:1; font-weight:200; display:flex; align-items:center; justify-content:center; transition:.3s var(--ease); } .modal-close:hover{ background:var(--orange); } /* Placeholder de foto pendiente */ .ph-photo{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:20px; color:rgba(255,255,255,.62); background: repeating-linear-gradient(45deg, rgba(243,112,31,.1) 0 14px, transparent 14px 28px), var(--dark-3); border:1px dashed rgba(243,112,31,.5); } .ph-photo b{ font-family:var(--fh); font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:var(--orange); } .ph-photo span{ font-size:13px; font-weight:300; max-width:300px; line-height:1.6; } /* ---------- Página Experiencia ---------- */ .exp-intro{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; } .exp-intro .lede{ max-width:none; } .disc-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); } .section-dark .disc-grid{ border-color:var(--line-dark); } .disc{ position:relative; padding:40px 30px 36px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; background:var(--white); transition:background .4s var(--ease); } .section-dark .disc{ background:transparent; border-color:var(--line-dark); } .disc::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out); } .disc:hover::before{ transform:scaleX(1); } .disc .dn{ font-family:var(--fh); font-weight:800; font-size:46px; line-height:1; color:transparent; -webkit-text-stroke:1.5px var(--orange); margin-bottom:18px; } .disc h4{ font-size:20px; margin-bottom:12px; } .section-dark .disc h4{ color:#fff; } .disc p{ margin:0; font-size:14.5px; line-height:1.75; color:var(--gray); font-weight:300; } .section-dark .disc p{ color:rgba(255,255,255,.65); } .figband{ background:var(--black); color:#fff; border-top:1px solid var(--line-dark); } .figband-grid{ display:grid; grid-template-columns:repeat(4,1fr); } .fig{ padding:56px 26px; text-align:center; border-right:1px solid var(--line-dark); } .fig:last-child{ border-right:0; } .fig b{ display:block; font-family:var(--fh); font-weight:800; font-size:clamp(38px,4.8vw,58px); line-height:1; color:#fff; } .fig b .suf{ color:var(--orange); } .fig i{ font-style:normal; display:block; margin-top:12px; font-family:var(--fh); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); } /* ---------- Cobertura: mapa esquemático de México ---------- */ .map-panel{ position:relative; } .mx-map{ display:grid; grid-template-columns:repeat(9, minmax(0,1fr)); gap:8px; max-width:820px; margin:0 auto; } .mx-tile{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-weight:700; font-size:clamp(10px,1.25vw,15px); letter-spacing:.06em; background:var(--dark-3); color:rgba(255,255,255,.4); border:1px solid transparent; transition:.28s var(--ease); cursor:default; } .mx-tile.on{ background:var(--orange); color:#fff; cursor:pointer; } .mx-tile.on:hover, .mx-tile.on.act{ background:#fff; color:var(--orange-3); transform:translateY(-3px); } .mx-tile.has:after{ content:''; position:absolute; top:5px; right:5px; width:6px; height:6px; background:#fff; border-radius:50%; } .mx-tile.on:hover:after, .mx-tile.on.act:after{ background:var(--orange); } .mx-tip{ position:absolute; z-index:6; width:min(330px, 84vw); background:rgba(10,11,13,.98); border:1px solid var(--line-dark); border-top:2px solid var(--orange); padding:18px 20px; box-shadow:0 22px 46px rgba(0,0,0,.55); pointer-events:none; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s var(--ease), transform .22s var(--ease); } .mx-tip.show{ opacity:1; visibility:visible; transform:none; } .mx-tip h5{ font-family:var(--fh); font-weight:700; font-size:18px; text-transform:uppercase; color:#fff; margin:0 0 4px; } .mx-tip .tip-meta{ font-family:var(--fh); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--orange); margin:0 0 12px; } .mx-tip ul{ margin:0; } .mx-tip li{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.78); font-weight:300; padding-left:14px; position:relative; margin-bottom:7px; } .mx-tip li::before{ content:''; position:absolute; left:0; top:8px; width:6px; height:1px; background:var(--orange); } .mx-tip li b{ color:#fff; font-weight:600; } .mx-tip .tip-none{ font-size:13.5px; color:rgba(255,255,255,.6); font-weight:300; margin:0; line-height:1.6; } .map-legend{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center; margin-top:34px; } .map-legend span{ display:inline-flex; align-items:center; gap:9px; font-family:var(--fh); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); } .map-legend i{ width:15px; height:15px; flex:none; } .map-legend i.l-on{ background:var(--orange); } .map-legend i.l-off{ background:var(--dark-3); } .map-legend i.l-has{ background:var(--orange); position:relative; } .map-legend i.l-has::after{ content:''; position:absolute; top:2px; right:2px; width:5px; height:5px; background:#fff; border-radius:50%; } .map-note{ text-align:center; margin:22px auto 0; max-width:620px; font-size:13.5px; font-weight:300; color:rgba(255,255,255,.45); line-height:1.7; } /* Lista de cobertura por estado (acordeón, respaldo accesible + móvil) */ .cov-list{ max-width:920px; margin:0 auto; } /* ---------- Formulario de Bolsa de trabajo ---------- */ .form-progress{ margin-bottom:28px; } .form-progress .fp-bar{ height:3px; background:rgba(255,255,255,.14); position:relative; overflow:hidden; } .form-progress .fp-bar i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--orange); transition:width .4s var(--ease-out); } .form-progress .fp-txt{ display:flex; justify-content:space-between; gap:12px; margin-top:10px; font-family:var(--fh); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); } .form-progress .fp-txt b{ color:var(--orange); font-weight:600; } .field select{ width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.22); padding:16px 2px 12px; font-family:var(--fb); font-size:15.5px; color:#fff; transition:border-color .35s var(--ease); appearance:none; cursor:pointer; } .field select:focus{ outline:0; border-color:var(--orange); } .field select option{ background:var(--dark-2); color:#fff; } .field.sel{ padding-top:16px; } .field.sel > label{ top:-6px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); font-family:var(--fh); font-weight:600; } .field.sel::after{ content:''; position:absolute; right:6px; bottom:20px; width:7px; height:7px; border-right:2px solid var(--orange); border-bottom:2px solid var(--orange); transform:rotate(45deg); pointer-events:none; } .field.bad input, .field.bad select, .field.bad textarea{ border-bottom-color:#f87171; } .field .hint{ display:block; margin-top:7px; font-size:12.5px; color:rgba(255,255,255,.4); font-weight:300; } /* El mensaje de error SIEMPRE ocupa su espacio (solo cambia la opacidad). Si se mostrara con display:none/block, la página se recorrería al validar y el botón de enviar se movería justo debajo del cursor del usuario. */ .err-msg{ display:block; margin-top:7px; font-size:12.5px; color:#f87171; font-weight:400; min-height:17px; opacity:0; transition:opacity .25s var(--ease); } .bad .err-msg{ opacity:1; } .filedrop{ border:1px dashed rgba(255,255,255,.28); padding:24px; text-align:center; transition:.3s var(--ease); cursor:pointer; display:block; } .filedrop:hover, .filedrop.over{ border-color:var(--orange); background:rgba(243,112,31,.07); } .filedrop b{ display:block; font-family:var(--fh); font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:6px; } .filedrop span{ font-size:13px; color:rgba(255,255,255,.5); font-weight:300; } .filedrop input[type=file]{ display:none; } .why-card{ background:var(--dark-2); border:1px solid var(--line-dark); padding:36px 32px; } .why-card h3{ font-size:24px; color:#fff; margin-bottom:8px; } .why-card > p{ color:rgba(255,255,255,.55); font-size:14.5px; font-weight:300; margin:0 0 24px; line-height:1.7; } .why-list li{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-dark); } .why-list li:last-child{ border-bottom:0; } .why-list .wn{ font-family:var(--fh); font-weight:700; font-size:13px; letter-spacing:.14em; color:var(--orange); flex:none; padding-top:3px; } .why-list h4{ font-size:17px; color:#fff; margin:0 0 5px; } .why-list p{ margin:0; font-size:14px; line-height:1.65; color:rgba(255,255,255,.6); font-weight:300; } /* ---------- Responsive de lo nuevo ---------- */ @media (max-width:1100px){ .disc-grid{ grid-template-columns:repeat(2,1fr); } .figband-grid{ grid-template-columns:repeat(2,1fr); } .fig:nth-child(2){ border-right:0 } .fig:nth-child(1),.fig:nth-child(2){ border-bottom:1px solid var(--line-dark) } .exp-intro{ grid-template-columns:1fr; gap:32px; } } /* El menú pasa a hamburguesa antes, porque ahora hay más elementos */ @media (max-width:1000px){ .main-nav{ position:fixed; inset:0 0 0 auto; width:88vw; max-width:380px; height:100dvh; background:var(--black); flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:112px 34px 40px; gap:4px; transform:translateX(100%); transition:transform .5s var(--ease-out); border-left:1px solid var(--line-dark); overflow-y:auto; } .main-nav.open{ transform:none; } .main-nav > a{ font-size:24px; padding:12px 0; width:100%; } .nav-toggle{ display:block; z-index:950; } .nav-cta{ margin-top:18px; width:100%; justify-content:center; } .nav-group{ width:100%; } .nav-group-btn{ font-size:24px; padding:12px 0; width:100%; justify-content:space-between; } .nav-drop{ position:static; opacity:1; visibility:visible; transform:none; margin:0 0 8px; padding:0 0 0 4px; background:none; backdrop-filter:none; border:0; border-left:2px solid rgba(243,112,31,.5); box-shadow:none; min-width:0; max-height:0; overflow:hidden; transition:max-height .4s var(--ease-out); } .nav-group.open .nav-drop{ max-height:340px; } .nav-drop a{ padding:10px 16px; font-size:16px; } .nav-drop a:hover{ padding-left:20px; background:none; } .lang{ width:100%; margin-top:20px; } .lang-btn{ width:100%; justify-content:center; padding:13px; font-size:15px; } .lang-drop{ position:static; opacity:1; visibility:visible; transform:none; margin-top:6px; background:none; border:0; border-left:2px solid rgba(243,112,31,.5); box-shadow:none; max-height:0; overflow:hidden; padding:0; transition:max-height .35s var(--ease-out); } .lang.open .lang-drop{ max-height:200px; padding:6px 0; } } @media (max-width:760px){ .split-logo{ top:18px; right:18px; } .split-logo img{ height:42px; } .disc-grid{ grid-template-columns:1fr; } .figband-grid{ grid-template-columns:1fr; } .fig{ border-right:0; border-bottom:1px solid var(--line-dark); padding:40px 20px; } .fig:last-child{ border-bottom:0; } .mx-map{ gap:5px; } .mx-tile{ font-size:9px; } .modal-box .m-media{ height:210px; } .modal-box .m-body{ padding:24px 22px 28px; } .why-card{ padding:28px 22px; } .map-legend{ gap:14px; } } /* Titular de hero largo (nuevo copy 2026) */ .hero h1.long{ font-size:clamp(29px,3.85vw,55px); max-width:min(96%,1090px); line-height:1.12; } .hero h1.long .ln{ overflow:hidden; } .hero h1 .ln:nth-child(3) i{ transition-delay:.40s } .hero h1 .ln:nth-child(4) i{ transition-delay:.52s } @media (max-width:760px){ .hero h1.long{ font-size:27px; line-height:1.2; } } /* Párrafos múltiples dentro de un .lede */ .lede p{ margin:0 0 18px; } .lede p:last-child{ margin-bottom:0; } /* Tarjeta de proyecto sin foto real todavía */ .p-card.noimg{ cursor:default; } .p-card.noimg .p-plus{ display:none; } .p-card.noimg::after{ background:linear-gradient(0deg, rgba(6,7,9,.95) 0%, rgba(6,7,9,.45) 62%, rgba(6,7,9,.2) 100%); } /* el degradado ::after de la tarjeta queda ENCIMA del placeholder para que el texto contraste */ /* Etiqueta "filtrar por" */ .filters .f-lbl{ font-family:var(--fh); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-2); align-self:center; margin-right:6px; } .section-dark .filters .f-lbl{ color:rgba(255,255,255,.45); } /* Listado de cobertura por estado */ .cov-ul li{ position:relative; padding-left:18px; margin-bottom:10px; font-size:15px; line-height:1.65; color:var(--gray); font-weight:300; } .cov-ul li:last-child{ margin-bottom:0; } .cov-ul li::before{ content:''; position:absolute; left:0; top:11px; width:9px; height:1px; background:var(--orange); } .cov-ul li b{ color:var(--ink); font-weight:600; } .cov-ul li i{ font-style:normal; color:var(--gray-2); } .section-dark .cov-ul li{ color:rgba(255,255,255,.7); } .section-dark .cov-ul li b{ color:#fff; } /* Bolsa de trabajo: mensaje de confirmación más visible */ #rh-status,#prov-status{ margin-top:16px; font-size:14.5px; font-weight:400; min-height:20px; line-height:1.65; } #rh-status.ok,#prov-status.ok{ color:#4ade80; background:rgba(74,222,128,.08); border-left:2px solid #4ade80; padding:14px 16px; } #rh-status.err,#prov-status.err{ color:#f87171; } #rh-status b,#prov-status b{ font-weight:600; } /* Las tarjetas blancas dentro de la sección naranja heredaban color:#fff y el título quedaba invisible. Se devuelve el color de texto oscuro. */ .section-orange .cards{ border-color:rgba(255,255,255,.45); } .section-orange .card h3{ color:var(--ink); } .section-orange .card:hover h3{ color:#fff; } .section-orange .card .idx{ color:var(--gray-2); } .section-orange .card:hover .idx{ color:rgba(255,255,255,.4); } /* ========================================================= CAMBIOS SOLICITADOS — Inicio y cobertura nacional ========================================================= */ .section-home-experience{ background:var(--white); color:var(--ink); } .section-home-experience .experience-title{ display:block; width:max-content; max-width:100%; margin-bottom:26px; padding:8px 16px 10px; color:#fff; background:var(--orange); line-height:1; } .section-home-experience .cards{ border-color:var(--line); } .section-home-experience .card{ background:#fff; } .map-controls{ display:flex; justify-content:space-between; align-items:center; gap:30px; margin-bottom:25px; } .map-national{ display:block; font:800 58px/1 var(--fh); color:var(--orange); } .map-controls p{ color:rgba(255,255,255,.72); font-size:13px; margin:8px 0 0; } .map-controls label{ display:block; color:rgba(255,255,255,.68); font-family:var(--fh); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:9px; } .map-controls select{ min-width:250px; max-width:100%; padding:12px 40px 12px 14px; color:#fff; background:var(--dark-3); border:1px solid rgba(255,255,255,.28); } .map-controls select:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; } .mexico-map{ display:block; width:100%; height:auto; max-height:640px; overflow:visible; background:radial-gradient(ellipse at 50% 58%, rgba(255,255,255,.05), transparent 72%); } .mx-state{ fill:var(--orange); stroke:#101216; stroke-width:1; stroke-linejoin:round; cursor:pointer; transition:fill .2s var(--ease), stroke .2s var(--ease); vector-effect:non-scaling-stroke; outline:none; } .mx-state.has{ fill:var(--orange); } .mx-state:hover,.mx-state.act,.mx-state:focus-visible{ fill:var(--orange-2); stroke:#fff; stroke-width:1.8; } .mx-state:focus-visible{ filter:drop-shadow(0 0 5px rgba(255,255,255,.8)); } .work-dot{ fill:#fff; stroke:#3b1a08; stroke-width:2.5; pointer-events:none; vector-effect:non-scaling-stroke; } .state-label{ font:700 10px var(--fh); fill:#14161a; pointer-events:none; letter-spacing:.02em; } .state-detail{ border-top:1px solid var(--line-dark); padding:27px 0 0; margin-top:30px; min-height:170px; } .state-detail-header{ display:flex; align-items:center; justify-content:space-between; gap:20px; } .state-detail-header h3{ font-size:34px; color:#fff; } .state-detail-header>span{ font-family:var(--fh); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.66); } .state-detail-header>span::before{ content:'●'; color:var(--orange); font-size:8px; margin-right:8px; } .state-detail-intro,.state-project-count,.state-no-projects{ color:rgba(255,255,255,.62); } .state-detail-intro{ font-size:14px; margin:10px 0 18px; } .state-project-count{ font:600 12px var(--fh); letter-spacing:.12em; text-transform:uppercase; } .state-detail ul{ max-height:260px; overflow:auto; display:grid; grid-template-columns:1fr 1fr; gap:0 30px; margin:17px 0; padding-right:12px; } .state-detail li{ border-top:1px solid var(--line-dark); padding:14px 0; font-size:13px; line-height:1.6; } .state-detail li b{ display:block; color:#fff; font-weight:600; } .state-detail li span{ display:block; color:rgba(255,255,255,.58); font-size:11px; margin-top:3px; } .state-no-projects{ font-size:14px; } .map-quote{ display:inline-flex; gap:14px; align-items:center; margin-top:12px; padding-bottom:5px; color:#fff; border-bottom:1px solid currentColor; font:600 14px var(--fh); letter-spacing:.08em; text-transform:uppercase; } .map-legend i.l-on{ background:var(--orange); } .map-note a{ color:inherit; text-decoration:underline; text-underline-offset:3px; } /* Portada gráfica para proyectos documentados que aún no tienen fotografía. */ .project-cover{ position:absolute; inset:0; overflow:hidden; color:#fff; background: linear-gradient(135deg, rgba(243,112,31,.96), rgba(132,49,7,.94)), var(--dark-3); } .project-cover::before,.project-cover::after{ content:''; position:absolute; inset:-12%; transform:rotate(-7deg); opacity:.38; background: repeating-linear-gradient(90deg, transparent 0 74px, rgba(255,255,255,.28) 74px 76px), repeating-linear-gradient(0deg, transparent 0 54px, rgba(255,255,255,.18) 54px 56px); } .project-cover::after{ inset:22% -5% auto; height:42%; transform:skewY(-8deg); border-top:3px solid rgba(255,255,255,.72); border-bottom:3px solid rgba(255,255,255,.42); background:repeating-linear-gradient(135deg, transparent 0 46px, rgba(255,255,255,.55) 46px 49px); } .project-cover span{ position:absolute; right:24px; top:15px; font:800 clamp(68px,9vw,132px)/1 var(--fh); color:rgba(255,255,255,.13); letter-spacing:.04em; } .project-cover i{ position:absolute; left:32px; top:31px; width:36px; height:4px; background:#fff; } .project-cover b{ position:absolute; left:32px; top:49px; font:700 13px var(--fh); letter-spacing:.2em; text-transform:uppercase; } @media (max-width:760px){ .map-controls{ align-items:flex-start; flex-direction:column; gap:20px; margin-bottom:18px; } .map-controls>div:last-child,.map-controls select{ width:100%; } .map-controls select{ font-size:16px; } .map-national{ font-size:50px; } .mexico-map{ min-height:250px; } .state-label{ font-size:12px; } .state-detail-header{ display:block; } .state-detail-header h3{ font-size:30px; margin-bottom:8px; } .state-detail ul{ grid-template-columns:1fr; max-height:310px; } } /* ---------- Página Proveedores ---------- */ .provider-hero-lede{ max-width:680px; margin:20px 0 0; color:rgba(255,255,255,.76); font-size:18px; line-height:1.7; font-weight:300; } .supplier-section{ background:var(--off); } .supplier-head{ display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:end; margin-bottom:50px; } .supplier-head .sec-title{ margin-bottom:0; } .supplier-lede{ max-width:690px; margin:0 0 6px auto; color:var(--gray); font-size:17px; line-height:1.75; font-weight:300; } .supplier-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); } .supplier-card{ position:relative; min-height:330px; padding:42px 36px; background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out); } .supplier-card:hover{ z-index:2; transform:translateY(-7px); box-shadow:0 22px 46px rgba(20,22,26,.1); } .supplier-card::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:4px; background:var(--orange); transition:width .45s var(--ease-out); } .supplier-card:hover::after{ width:100%; } .supplier-num{ position:absolute; top:31px; right:32px; color:var(--gray-2); font:600 12px/1 var(--fh); letter-spacing:.16em; } .supplier-card svg{ width:54px; height:54px; margin-bottom:28px; color:var(--orange); fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .supplier-card h3{ font-size:25px; margin-bottom:16px; } .supplier-card p{ margin:0; color:var(--gray); font-size:15px; line-height:1.75; font-weight:300; } .supplier-contact{ display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; margin-top:24px; padding:42px 44px; background:var(--dark); color:#fff; } .supplier-contact>div>span{ display:block; margin-bottom:10px; color:var(--orange); font:600 12px/1 var(--fh); letter-spacing:.18em; text-transform:uppercase; } .supplier-contact h3{ font-size:31px; margin-bottom:10px; } .supplier-contact p{ max-width:720px; margin:0; color:rgba(255,255,255,.62); font-size:15px; line-height:1.7; font-weight:300; } .supplier-contact .btn{ white-space:nowrap; } @media (max-width:900px){ .supplier-head{ grid-template-columns:1fr; gap:22px; } .supplier-lede{ margin-left:0; } .supplier-grid{ grid-template-columns:1fr; } .supplier-card{ min-height:0; } .supplier-contact{ grid-template-columns:1fr; gap:26px; } .supplier-contact .btn{ width:max-content; } } @media (max-width:560px){ .supplier-card{ padding:34px 26px; } .supplier-contact{ padding:34px 26px; } .supplier-contact .btn{ width:100%; justify-content:center; } } .provider-register .contact-grid{ align-items:start; } .provider-register .form-card>h3{ color:#fff; font-size:29px; margin-bottom:9px; } .provider-form-intro{ margin:0 0 27px; color:rgba(255,255,255,.55); font-size:15px; line-height:1.7; font-weight:300; } .provider-requirements{ margin-top:44px; border-top:1px solid var(--line-dark); } .provider-requirements>h3{ color:#fff; font-size:24px; padding:28px 0 14px; } .provider-requirements li{ display:grid; grid-template-columns:44px 1fr; gap:15px; padding:17px 0; border-bottom:1px solid var(--line-dark); } .provider-requirements li span{ color:var(--orange); font:600 12px/1.6 var(--fh); letter-spacing:.14em; } .provider-requirements li p{ margin:0; color:rgba(255,255,255,.65); font-size:14.5px; line-height:1.65; font-weight:300; } /* ---------- Página Experiencia: presentación editorial ---------- */ .experience-hero{ min-height:78vh; } .experience-hero img{ opacity:.72; filter:saturate(.82) contrast(1.04); } .experience-hero::before{ background:linear-gradient(90deg,rgba(8,9,11,.9) 0%,rgba(8,9,11,.62) 48%,rgba(8,9,11,.18) 100%),linear-gradient(0deg,rgba(8,9,11,.85),transparent 58%); } .experience-hero .wrap{ padding-bottom:82px; } .experience-hero-kicker{ margin:0 0 15px; color:var(--orange); font:600 13px/1 var(--fh); letter-spacing:.22em; text-transform:uppercase; } .experience-hero h1{ max-width:850px; font-size:clamp(62px,9vw,116px); line-height:.82; } .experience-hero h1 em{ display:block; color:var(--orange); font-style:normal; font-weight:500; } .experience-hero-lede{ max-width:670px; margin:28px 0 0; color:rgba(255,255,255,.78); font-size:18px; line-height:1.7; font-weight:300; } .experience-story{ display:grid; grid-template-columns:.82fr 1.18fr; gap:64px; align-items:stretch; } .experience-story-copy>p{ margin:0 0 22px; color:var(--gray); font-size:16px; line-height:1.85; font-weight:300; } .experience-note{ margin-top:34px; padding:30px 32px; background:var(--dark); color:#fff; border-left:4px solid var(--orange); } .experience-note>span{ display:block; margin-bottom:10px; color:var(--orange); font:600 12px/1 var(--fh); letter-spacing:.18em; text-transform:uppercase; } .experience-note p{ margin:0; color:rgba(255,255,255,.68); font-size:14.5px; line-height:1.75; font-weight:300; } .experience-visual{ display:grid; grid-template-columns:1.15fr .85fr; gap:16px; min-height:520px; } .experience-visual figure{ position:relative; margin:0; overflow:hidden; background:var(--dark); } .experience-visual img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); } .experience-visual figure:hover img{ transform:scale(1.04); } .experience-model{ margin-bottom:70px !important; } .experience-build{ margin-top:70px !important; } .experience-visual figcaption{ position:absolute; left:0; bottom:0; display:flex; align-items:center; gap:12px; min-width:170px; padding:16px 20px; background:var(--orange); color:#fff; font:600 13px/1 var(--fh); letter-spacing:.13em; text-transform:uppercase; } .experience-visual figcaption b{ color:rgba(255,255,255,.65); font-size:11px; } .experience-process{ display:grid; grid-template-columns:repeat(5,1fr); margin-top:64px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .experience-process>div{ position:relative; padding:24px 22px; border-right:1px solid var(--line); } .experience-process>div:last-child{ border-right:0; } .experience-process>div:not(:last-child)::after{ content:'→'; position:absolute; right:-8px; top:50%; z-index:2; color:var(--orange); background:#fff; transform:translateY(-50%); } .experience-process span{ display:block; margin-bottom:9px; color:var(--orange); font:600 11px/1 var(--fh); letter-spacing:.15em; } .experience-process b{ display:block; font:600 16px/1.15 var(--fh); text-transform:uppercase; } .disc-grid-premium{ grid-template-columns:repeat(2,1fr); } .disc-grid-premium .disc{ display:grid; grid-template-columns:84px 1fr; grid-template-rows:auto 1fr; gap:8px 24px; min-height:205px; padding:36px 34px; } .disc-grid-premium .disc .dn{ grid-row:1/3; margin:0; font-size:58px; } .disc-grid-premium .disc h4{ margin:2px 0 8px; font-size:25px; } .disc-grid-premium .disc p{ font-size:14.5px; line-height:1.72; } .disc-grid-premium .disc:hover{ background:rgba(243,112,31,.055); } @media (max-width:1000px){ .experience-story{ grid-template-columns:1fr; } .experience-visual{ min-height:470px; } .experience-process{ grid-template-columns:1fr; border:1px solid var(--line); } .experience-process>div{ display:grid; grid-template-columns:44px 1fr; align-items:center; padding:18px 20px; border-right:0; border-bottom:1px solid var(--line); } .experience-process>div:last-child{ border-bottom:0; } .experience-process>div:not(:last-child)::after{ content:'↓'; right:20px; top:auto; bottom:-10px; transform:none; padding:0 4px; } .experience-process span{ margin:0; } } @media (max-width:760px){ .experience-hero{ min-height:76vh; } .experience-hero .wrap{ padding-bottom:56px; } .experience-hero h1{ font-size:clamp(44px,12.5vw,52px); line-height:.88; } .experience-hero-lede{ font-size:16px; } .experience-story{ gap:42px; } .experience-visual{ grid-template-columns:1fr; min-height:0; } .experience-visual figure{ height:330px; margin:0 !important; } .disc-grid-premium{ grid-template-columns:1fr; } .disc-grid-premium .disc{ grid-template-columns:62px 1fr; min-height:0; padding:30px 24px; } .disc-grid-premium .disc .dn{ font-size:44px; } .disc-grid-premium .disc h4{ font-size:22px; } }