/* ========================================================================== CP PROYECTOS Y SERVICIOS — stylesheet Tokens derived from the brand mark: ink black / signal teal, diagonal cut. Las tipografías (Google Fonts) y los íconos (Bootstrap Icons) se cargan desde el del HTML sin bloquear el render (antes había un @import que retrasaba toda la página). ========================================================================== */ :root{ --ink:#0b0d0e; --ink-soft:#1c2022; --paper:#f4f3f0; --paper-2:#eceae5; --teal:#1f92ac; --teal-deep:#153f49; --teal-bright:#2fb0cc; --steel:#9aa3a6; --steel-line:rgba(11,13,14,.14); --white:#ffffff; /* Stacks con fallback: el texto se ve al instante mientras llega la fuente web */ --font-display:'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif; --font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --container:1240px; --gutter:clamp(20px, 5vw, 64px); --nav-h:84px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth; scroll-padding-top: var(--nav-h);} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} } body{ margin:0; font-family:var(--font-body); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} ul{list-style:none; margin:0; padding:0;} button{font-family:inherit;} /* Reserva el espacio de los íconos mientras carga la fuente (evita saltos de layout) */ .bi{display:inline-block; min-width:1em; min-height:1em;} .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); } .section{padding:clamp(72px,10vw,140px) 0;} .section-tight{padding:clamp(48px,7vw,96px) 0;} .eyebrow{ font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.14em; color:var(--teal-deep); margin:0 0 14px; } .eyebrow span{color:var(--teal);} h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:.98; margin:0; letter-spacing:-.01em; } h2.section-title{ font-size:clamp(38px,5.4vw,68px); max-width:14ch; } p{line-height:1.65; color:#3a3f41;} .lede{font-size:clamp(17px,1.6vw,20px); max-width:52ch; color:#2d3234;} .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:600; font-size:15px; padding:15px 26px; border-radius:2px; border:1px solid var(--ink); cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); white-space:nowrap; } .btn-primary{background:var(--ink); color:var(--paper);} .btn-primary:hover{background:var(--teal); border-color:var(--teal); color:#fff;} .btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);} .btn-outline:hover{background:var(--ink); color:var(--paper);} .btn-light{border-color:rgba(255,255,255,.4); color:#fff;} .btn-light:hover{background:#fff; color:var(--ink); border-color:#fff;} /* ---------- Skip link ---------- */ .skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:2000; } .skip-link:focus{left:12px; top:12px;} /* ---------- NAVBAR ---------- */ .navbar{ position:fixed; top:0; left:0; right:0; z-index:1100; height:var(--nav-h); display:flex; align-items:center; background:rgba(244,243,240,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--steel-line); transition:box-shadow .4s var(--ease), height .4s var(--ease); } .navbar.is-solid{ height:74px; box-shadow:0 8px 30px rgba(11,13,14,.08); } .nav-inner{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; } .brand{display:flex; align-items:center; gap:12px;} .brand img{height:40px; width:auto; transition:height .4s var(--ease);} .navbar.is-solid .brand img{height:34px;} .nav-links{display:flex; align-items:center; gap:36px;} .nav-links a{ font-size:14.5px; font-weight:500; color:var(--ink); position:relative; padding:6px 0; } .nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--teal); transition:width .3s var(--ease); } .nav-links a:hover::after{width:100%;} .nav-cta{display:flex; align-items:center; gap:18px;} .nav-cta .btn{padding:12px 22px; font-size:14px;} .hamburger{ display:none; flex-direction:column; justify-content:center; gap:6px; width:44px; height:44px; border:none; background:transparent; cursor:pointer; padding:0; z-index:1100; } .hamburger span{ display:block; width:26px; height:2px; background:var(--ink); transition:transform .35s var(--ease), opacity .35s var(--ease); } .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);} .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;} .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} /* Mobile offcanvas menu (oculto con visibility para que no sea alcanzable con Tab cuando está cerrado) */ .mobile-menu{ position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:1050; background:var(--ink); color:#fff; display:flex; flex-direction:column; justify-content:center; padding:40px var(--gutter) 60px; transform:translateX(100%); visibility:hidden; transition:transform .45s var(--ease), visibility 0s linear .45s; overflow-y:auto; } .mobile-menu.is-open{transform:translateX(0); visibility:visible; transition-delay:0s;} .mobile-menu a{ font-family:var(--font-display); font-weight:700; font-size:clamp(32px,10vw,46px); color:#fff; display:block; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); } .mobile-menu .mm-cta{margin-top:30px; white-space:normal; text-align:center; justify-content:center; width:100%;} .mobile-menu .mm-contact{margin-top:40px; display:flex; flex-direction:column; gap:10px; font-size:15px; color:rgba(255,255,255,.65);} .mobile-menu-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); } .mobile-menu-backdrop.is-open{opacity:1; pointer-events:auto;} body.menu-open, body.lb-open{overflow:hidden;} @media (max-width: 991px){ .nav-links, .nav-cta .btn-outline{display:none;} .hamburger{display:flex;} .nav-cta{gap:0;} /* En móvil se evita el backdrop-filter (costoso al hacer scroll); el fondo casi opaco se ve igual */ .navbar{ background:rgba(244,243,240,.97); backdrop-filter:none; -webkit-backdrop-filter:none; } } /* ---------- HERO ---------- */ .hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; background:var(--ink); overflow:hidden; padding-top:var(--nav-h); } .hero-media{position:absolute; inset:0;} .hero-media img{width:100%; height:100%; object-fit:cover; opacity:.55;} .hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,13,14,.4) 0%, rgba(11,13,14,.6) 55%, rgba(11,13,14,.96) 100%); } .hero-media::before{ content:''; position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at 85% 10%, rgba(31,146,172,.35), transparent 55%); mix-blend-mode:screen; } .hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--teal-deep), var(--teal-bright)); z-index:2; } .hero-inner{ position:relative; z-index:3; width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter) 90px; color:#fff; } .hero-kicker{ display:flex; align-items:center; gap:12px; margin-bottom:22px; font-size:14px; letter-spacing:.1em; color:rgba(255,255,255,.75); font-weight:500; } .hero-kicker .dot{width:8px; height:8px; border-radius:50%; background:var(--teal-bright);} .hero h1{ font-size:clamp(48px,9vw,118px); color:#fff; max-width:16ch; } .hero h1 em{ font-style:normal; color:var(--teal-bright); } .hero-sub{ margin-top:26px; max-width:46ch; font-size:clamp(16px,1.6vw,19px); color:rgba(255,255,255,.8); } .hero-actions{margin-top:38px; display:flex; gap:16px; flex-wrap:wrap;} .hero-areas{ margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(255,255,255,.2); } .hero-areas div{ padding:18px 14px 0; border-left:1px solid rgba(255,255,255,.2); font-size:13px; letter-spacing:.06em; color:rgba(255,255,255,.7); font-weight:500; } .hero-areas div:first-child{border-left:none;} .hero-areas strong{display:block; color:#fff; font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:0; margin-bottom:4px;} .scroll-cue{ position:absolute; right:var(--gutter); bottom:28px; z-index:2; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.6); font-size:12px; letter-spacing:.1em; } .scroll-cue .line{width:1px; height:34px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;} /* Animación con transform (corre en el compositor, sin repintar layout) */ .scroll-cue .line::after{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--teal-bright); transform:translateY(-100%); animation:scrollLine 2.2s ease-in-out infinite; will-change:transform; } @keyframes scrollLine{ 0%{transform:translateY(-100%);} 50%{transform:translateY(0);} 100%{transform:translateY(100%);} } @media (max-width:767px){ .hero-areas{grid-template-columns:repeat(2,1fr); row-gap:16px;} .hero-areas div:nth-child(3){border-left:none;} .scroll-cue{display:none;} } /* ---------- INTRO / PRESENTACIÓN ---------- */ .intro{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,6vw,90px); align-items:start; } .intro-figure{position:relative;} .intro-figure img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;} .intro-figure .fig-tag{ position:absolute; left:-1px; bottom:-1px; background:var(--ink); color:var(--paper); padding:14px 20px; font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.04em; } .intro-quote{ font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,30px); line-height:1.25; color:var(--ink); margin:28px 0 24px; max-width:22ch; border-left:3px solid var(--teal); padding-left:22px; } .intro-meta{display:flex; gap:40px; margin-top:36px; flex-wrap:wrap;} .intro-meta div strong{display:block; font-family:var(--font-display); font-size:34px; font-weight:800; color:var(--teal-deep);} .intro-meta div span{font-size:13px; color:#5a5f61;} @media (max-width:900px){ .intro{grid-template-columns:1fr;} } /* ---------- ÁREAS DE TRABAJO (asymmetric editorial grid) ---------- */ .areas-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(120px,auto); gap:2px; background:var(--ink); } .area-card{ position:relative; overflow:hidden; background:var(--ink); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; min-height:260px; grid-column:span 6; } .area-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; transition:transform .7s var(--ease), opacity .5s var(--ease);} .area-card::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,13,14,0) 20%, rgba(11,13,14,.92) 100%); z-index:1;} .area-card:hover img{transform:scale(1.06); opacity:.65;} .area-num{position:relative; z-index:2; font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--teal-bright); letter-spacing:.08em;} .area-card h3{position:relative; z-index:2; font-size:clamp(26px,3vw,38px); margin-top:10px; color:#fff;} .area-card p{position:relative; z-index:2; color:rgba(255,255,255,.78); margin-top:10px; max-width:36ch; font-size:14.5px;} .area-link{position:relative; z-index:2; margin-top:16px; font-size:13.5px; font-weight:600; color:var(--teal-bright); display:inline-flex; align-items:center; gap:8px;} @media (min-width:900px){ .area-card:nth-child(1){grid-column:span 4; min-height:440px;} .area-card:nth-child(2){grid-column:span 2; min-height:440px;} .area-card:nth-child(3){grid-column:span 2; min-height:340px;} .area-card:nth-child(4){grid-column:span 4; min-height:340px;} } /* ---------- LLAVE EN MANO (process) ---------- */ .keyprocess{ background:var(--ink); color:#fff; position:relative; } .keyprocess .container{position:relative;} .keyprocess h2, .keyprocess .eyebrow{color:#fff;} .keyprocess .eyebrow{color:var(--teal-bright);} .keyprocess .lede{color:rgba(255,255,255,.72);} .kp-track{ margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; } .kp-track::before{ content:''; position:absolute; top:14px; left:0; right:0; height:1px; background:rgba(255,255,255,.18); } .kp-step{padding:0 24px 0 0; position:relative;} .kp-step .kp-dot{display:block; width:10px; height:10px; border-radius:50%; background:var(--teal-bright); margin-bottom:22px; position:relative; z-index:2;} .kp-step h3{font-size:clamp(19px,2vw,23px); font-weight:700; margin-bottom:10px;} .kp-step p{color:rgba(255,255,255,.65); font-size:14.5px;} .kp-step .kp-tag{font-family:var(--font-display); font-size:13px; color:var(--teal-bright); letter-spacing:.08em; margin-bottom:8px; display:block;} @media (max-width:900px){ .kp-track{grid-template-columns:1fr; gap:36px;} .kp-track::before{display:none;} } .kp-scope{ margin-top:70px; display:grid; grid-template-columns:1fr 1fr; gap:40px; border-top:1px solid rgba(255,255,255,.15); padding-top:44px; } /* Antes h5; ahora h3 (jerarquía correcta para SEO) con el mismo aspecto visual */ .kp-scope-block h3{ font-family:var(--font-display); font-size:17px; font-weight:700; line-height:normal; letter-spacing:.04em; margin:28px 0 14px; color:var(--teal-bright); } .kp-scope-block ul li{padding:9px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:15px; color:rgba(255,255,255,.85);} @media (max-width:700px){.kp-scope{grid-template-columns:1fr;}} /* ---------- SERVICE DEEP-DIVE SECTIONS ---------- */ .service-split{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; } .service-split .sv-media{position:relative; min-height:420px;} .service-split .sv-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .service-split .sv-text{padding:clamp(40px,6vw,90px); display:flex; flex-direction:column; justify-content:center;} .service-split.reverse{direction:rtl;} .service-split.reverse > *{direction:ltr;} .sv-list{margin-top:28px; display:grid; gap:0;} .sv-list li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--steel-line); font-size:15.5px; color:#2d3234; } .sv-list li::before{content:''; width:6px; height:6px; background:var(--teal); flex:none; border-radius:50%;} .sv-brands{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap;} .sv-brands span{ font-size:12.5px; letter-spacing:.05em; padding:8px 14px; border:1px solid var(--steel-line); color:#5a5f61; } @media (max-width:900px){ .service-split{grid-template-columns:1fr;} .service-split .sv-media{min-height:300px;} } .bg-paper2{background:var(--paper-2);} .bg-paper{background:var(--paper);} /* ---------- GALLERY / FILTERABLE CAROUSEL ---------- */ .gallery-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:38px; } .filters{display:flex; gap:10px; flex-wrap:wrap;} .filter-btn{ padding:11px 20px; border:1px solid var(--steel-line); background:transparent; color:var(--ink); font-size:13.5px; font-weight:600; letter-spacing:.02em; cursor:pointer; border-radius:2px; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .filter-btn:hover{border-color:var(--ink);} .filter-btn.is-active{background:var(--ink); color:var(--paper); border-color:var(--ink);} .gallery-meta{font-size:13.5px; color:#6a6f71;} /* min-height = alto de una tarjeta (ancho × 5/4): reserva el espacio antes de que la galería se genere y evita saltos de layout */ .gallery-stage{ position:relative; overflow-x:auto; overflow-y:hidden; min-height:calc(min(72vw,560px) * 1.25); scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .gallery-stage::-webkit-scrollbar{display:none;} .gallery-track{ display:flex; gap:16px; } .gallery-item{ position:relative; flex:0 0 auto; width:min(72vw,560px); aspect-ratio:4/5; overflow:hidden; cursor:pointer; background:var(--ink); scroll-snap-align:start; } .gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);} .gallery-item:hover img{transform:scale(1.05);} .gallery-item .gi-tag{ position:absolute; left:16px; bottom:16px; z-index:2; color:#fff; font-family:var(--font-display); font-weight:700; letter-spacing:.03em; font-size:16px; } .gallery-item::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%); pointer-events:none;} /* Sin backdrop-filter: con decenas de tarjetas era muy costoso de renderizar */ .gallery-item .gi-expand{ position:absolute; top:14px; right:14px; z-index:2; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.32); display:flex; align-items:center; justify-content:center; color:#fff; } .gallery-nav{display:flex; align-items:center; gap:18px; margin-top:28px;} .gnav-btn{ width:52px; height:52px; border-radius:50%; border:1px solid var(--steel-line); background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s var(--ease), border-color .3s var(--ease); } .gnav-btn:hover{background:var(--ink); border-color:var(--ink); color:#fff;} .gallery-count{font-size:13.5px; color:#6a6f71; font-variant-numeric:tabular-nums;} @media (max-width:600px){ .gallery-item{width:88vw;} .gallery-stage{min-height:calc(88vw * 1.25);} } /* Lightbox (visibility evita que sus botones reciban foco mientras está cerrado) */ .lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(8,9,10,.96); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s var(--ease), visibility 0s linear .35s; padding:40px var(--gutter); } .lightbox.is-open{opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;} .lightbox img{max-width:min(920px,90vw); max-height:80vh; object-fit:contain;} .lightbox-close{position:absolute; top:24px; right:var(--gutter); width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; cursor:pointer;} .lightbox-cat{position:absolute; top:32px; left:var(--gutter); color:#fff; font-family:var(--font-display); letter-spacing:.06em; font-size:14px;} .lightbox-arrow{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; cursor:pointer;} .lightbox-prev{left:var(--gutter);} .lightbox-next{right:var(--gutter);} @media (max-width:700px){ .lightbox-arrow{width:42px; height:42px;} .lightbox-prev{left:10px;} .lightbox-next{right:10px;} } /* ---------- PROCESO / METODOLOGÍA ---------- */ .process-list{margin-top:56px; border-top:1px solid var(--steel-line);} .process-row{ display:grid; grid-template-columns:90px 1fr 1.4fr; gap:28px; padding:34px 0; border-bottom:1px solid var(--steel-line); align-items:start; } .process-row .pr-num{font-family:var(--font-display); font-size:34px; font-weight:800; color:var(--steel);} .process-row h3{font-size:clamp(20px,2.2vw,25px); font-weight:700;} @media (max-width:760px){ .process-row{grid-template-columns:50px 1fr; } .process-row h3{grid-column:2;} .process-row p{grid-column:2;} } /* ---------- TRABAJOS DESTACADOS ---------- */ .works-list{margin-top:50px; display:grid; gap:0; border-top:1px solid var(--steel-line);} .work-row{ display:grid; grid-template-columns:1.3fr 2fr auto; gap:24px; align-items:center; padding:28px 0; border-bottom:1px solid var(--steel-line); transition:padding-left .35s var(--ease), background .35s var(--ease); } .work-row:hover{padding-left:14px; background:rgba(31,146,172,.05);} .work-row .wr-client{font-family:var(--font-display); font-weight:700; font-size:clamp(19px,2.2vw,25px);} .work-row .wr-desc{color:#5a5f61; font-size:14.5px;} .work-row .wr-tag{ font-size:12px; letter-spacing:.06em; color:var(--teal-deep); border:1px solid var(--steel-line); padding:7px 12px; white-space:nowrap; } @media (max-width:760px){ .work-row{grid-template-columns:1fr; gap:8px;} } /* ---------- CTA BANNER ---------- */ .cta-banner{ background:linear-gradient(120deg, var(--teal-deep), var(--ink) 70%); color:#fff; position:relative; overflow:hidden; } .cta-banner-inner{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; } .cta-banner h2{color:#fff; font-size:clamp(30px,4.4vw,52px); max-width:16ch;} .cta-banner p{color:rgba(255,255,255,.75); margin-top:10px; max-width:42ch;} /* ---------- CONTACTO ---------- */ .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px);} .contact-info{ margin-top:36px; padding:6px 0 0; border-top:1px solid var(--steel-line); } .contact-info li{ display:flex; align-items:center; gap:18px; padding:20px 0; border-bottom:1px solid var(--steel-line); transition:padding-left .3s var(--ease); } .contact-info li:hover{padding-left:6px;} .ci-icon{ flex:none; width:46px; height:46px; border-radius:50%; background:var(--paper-2); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--teal-deep); border:1px solid var(--steel-line); } .ci-text{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0;} .ci-label{font-size:12px; letter-spacing:.08em; color:var(--steel); text-transform:uppercase;} .contact-info a:not(.ci-go){font-size:18px; font-weight:600; color:var(--ink);} .contact-info a:not(.ci-go):hover{color:var(--teal);} .ci-plain{font-size:18px; font-weight:600; color:var(--ink);} .ci-go{ flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--steel-line); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .contact-info li:hover .ci-go{background:var(--ink); color:#fff; border-color:var(--ink); transform:rotate(45deg);} @media (max-width:420px){ .ci-label, .contact-info a:not(.ci-go), .ci-plain{font-size:16px;} .contact-info li{gap:12px;} } .form-field{margin-bottom:20px;} .form-field label{display:block; font-size:12.5px; letter-spacing:.06em; color:var(--steel); text-transform:uppercase; margin-bottom:8px;} .form-field input, .form-field select, .form-field textarea{ width:100%; border:none; border-bottom:1px solid var(--steel-line); background:transparent; padding:12px 4px; font-family:var(--font-body); font-size:15.5px; color:var(--ink); transition:border-color .3s var(--ease); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none; border-color:var(--teal);} .form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;} @media (max-width:700px){ .contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} } /* ---------- FOOTER ---------- */ .footer{background:var(--paper-2); border-top:1px solid var(--steel-line); padding:clamp(56px,7vw,90px) 0 30px;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;} .footer-brand img{height:38px; width:auto;} .footer-brand p{margin-top:18px; max-width:32ch; font-size:14.5px;} /* Antes h5; ahora

con el mismo aspecto (evita saltos de nivel de encabezado) */ .footer-h{font-family:var(--font-display); font-size:15px; font-weight:700; line-height:normal; letter-spacing:.04em; margin:25px 0 18px; color:var(--ink);} .footer ul li{margin-bottom:11px; font-size:14.5px;} .footer ul li a:hover{color:var(--teal);} .footer-bottom{ margin-top:60px; padding-top:24px; border-top:1px solid var(--steel-line); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; color:#6a6f71; } .footer-bottom a{font-weight:600; color:var(--ink);} .footer-bottom a:hover{color:var(--teal);} @media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;} } @media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} } /* ---------- Scroll reveal ---------- Solo se oculta si JavaScript está activo (clase .js en ): sin JS o si el script falla, el contenido queda visible (mejor para SEO y accesibilidad). */ .js .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);} .js .reveal.is-visible{opacity:1; transform:translateY(0);} /* ---------- Placeholder tag (remove once real photos are added) ---------- */ .ph-tag{ position:absolute; top:12px; left:12px; z-index:3; font-size:10.5px; letter-spacing:.08em; background:rgba(244,243,240,.9); color:var(--ink); padding:5px 9px; font-weight:600; } /* ---------- Toast / modal for mail fallback ---------- */ .mail-modal-backdrop{position:fixed; inset:0; background:rgba(8,9,10,.6); z-index:2100; display:none; align-items:center; justify-content:center; padding:20px;} .mail-modal-backdrop.is-open{display:flex;} .mail-modal{background:#fff; max-width:420px; width:100%; padding:32px; text-align:center;} .mail-modal h4{font-size:22px; margin-bottom:12px;} .mail-modal p{margin-bottom:22px;} .mail-modal .btn{width:100%; justify-content:center; margin-bottom:10px;} /* focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; } .gallery-item:focus-visible{outline:2px solid var(--teal); outline-offset:-4px;}