/* ============================================ FUSTERIA I EBANISTERIA R. CASTELL — style.css Carpintería artesanal · Lleida Diseño: lujo sobrio, paleta bone + carbon + bronze ============================================ */ /* ---------- VARIABLES (re-declaradas para fallback fuera del ) ---------- */ :root{ --bone:#F5F0EB; --bone-deep:#EDE6DD; --bone-warm:#EAE2D5; --carbon:#1A1A18; --carbon-soft:#26241F; --carbon-line:#33302A; --bronze:#8B6F47; --bronze-light:#A8895E; --bronze-deep:#6B5436; --line:rgba(26,26,24,.12); --line-soft:rgba(26,26,24,.06); --line-dark:rgba(245,240,235,.14); --line-dark-soft:rgba(245,240,235,.07); --text:#2A2722; --text-soft:#5A5249; --text-mute:#8A8278; --serif:'Cormorant Garamond', Georgia, serif; --sans:'Jost', system-ui, sans-serif; --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.22,1,.36,1); } /* ---------- LAYOUT BASE ---------- */ .container{ width:100%; max-width:1280px; margin:0 auto; padding:0 32px; } section{position:relative} /* ---------- TIPOGRAFÍA ---------- */ .hero-title,.section-title{ font-family:var(--serif); font-weight:400; } em{font-style:italic;color:var(--bronze)} .section-eyebrow{ display:inline-block; font-family:var(--sans); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--bronze); font-weight:500; margin-bottom:24px; position:relative; padding-left:48px; } .section-eyebrow::before{ content:""; position:absolute; left:0; top:50%; width:36px; height:1px; background:var(--bronze); } .section-header{ text-align:center; max-width:720px; margin:0 auto 80px; } .section-header .section-eyebrow{padding-left:0} .section-header .section-eyebrow::before{display:none} .section-title{ font-size:clamp(2.4rem,4.6vw,4rem); line-height:1.05; margin-bottom:24px; } .section-lead{ font-size:1.05rem; color:var(--text-soft); max-width:560px; margin:0 auto; } .section-header-dark .section-title{color:var(--bone)} .section-header-dark .section-lead{color:rgba(245,240,235,.65)} /* ---------- BOTONES ---------- */ .btn{ display:inline-flex; align-items:center; gap:12px; padding:18px 32px; font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; border:1px solid transparent; cursor:pointer; transition:all .5s var(--ease); position:relative; overflow:hidden; } .btn i{transition:transform .4s var(--ease)} .btn:hover i{transform:translateX(6px)} .btn-primary{ background:var(--carbon); color:var(--bone); border-color:var(--carbon); } .btn-primary:hover{ background:var(--bronze); border-color:var(--bronze); } .btn-ghost{ background:transparent; color:var(--bone); border-color:rgba(245,240,235,.4); } .btn-ghost:hover{ background:var(--bone); color:var(--carbon); border-color:var(--bone); } .btn-block{width:100%;justify-content:center} /* ============================================ HEADER ============================================ */ .site-header{ position:fixed; top:0;left:0;right:0; z-index:100; padding:24px 0; transition:all .5s var(--ease); } .site-header.scrolled{ background:rgba(245,240,235,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:14px 0; } .nav-container{ max-width:1440px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; gap:32px; } .brand{ display:flex; align-items:center; gap:14px; color:var(--bone); transition:color .4s var(--ease); } .site-header.scrolled .brand{color:var(--carbon)} .brand-mark{ width:44px;height:44px; display:grid;place-items:center; font-family:var(--serif); font-size:1.5rem; font-weight:500; color:var(--bronze); border:1px solid currentColor; letter-spacing:0; } .brand-text{ display:flex; flex-direction:column; line-height:1.1; } .brand-line-1{ font-family:var(--sans); font-size:9px; letter-spacing:.32em; text-transform:uppercase; opacity:.7; } .brand-line-2{ font-family:var(--serif); font-size:1.15rem; font-weight:500; letter-spacing:.02em; margin-top:2px; } .nav-main{ display:flex; align-items:center; gap:48px; } .nav-list{ list-style:none; display:flex; gap:36px; } .nav-link{ font-family:var(--sans); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone); font-weight:400; position:relative; padding:6px 0; transition:color .35s var(--ease); } .site-header.scrolled .nav-link{color:var(--text)} .nav-link::after{ content:""; position:absolute; left:0;right:0;bottom:0; height:1px; background:var(--bronze); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .nav-link:hover{color:var(--bronze)} .nav-link:hover::after{transform:scaleX(1)} .nav-cta{ font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone); padding:12px 22px; border:1px solid rgba(245,240,235,.45); transition:all .4s var(--ease); } .site-header.scrolled .nav-cta{ color:var(--carbon); border-color:var(--carbon); } .nav-cta:hover{ background:var(--bronze); border-color:var(--bronze); color:var(--bone) !important; } /* Hamburger */ .nav-toggle{ display:none; width:36px;height:36px; background:none; border:0; cursor:pointer; flex-direction:column; justify-content:center; gap:6px; } .nav-toggle span{ width:28px;height:1px; background:var(--bone); transition:all .35s var(--ease); } .site-header.scrolled .nav-toggle span{background:var(--carbon)} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--carbon)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--carbon)} /* Mobile menu */ .nav-mobile{ position:fixed; top:0;left:0;right:0; background:var(--bone); padding:120px 32px 60px; transform:translateY(-100%); transition:transform .55s var(--ease); z-index:90; border-bottom:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:24px; } .nav-mobile.open{transform:translateY(0)} .nav-mobile ul{ list-style:none; display:flex; flex-direction:column; gap:16px; text-align:center; } .nav-mobile a{ font-family:var(--serif); font-size:1.8rem; color:var(--carbon); } .nav-mobile-cta{ margin-top:16px; padding:16px 32px; background:var(--carbon); color:var(--bone); font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; } /* ============================================ HERO ============================================ */ .hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate; } .hero-media{ position:absolute; inset:-10% 0; z-index:-1; } .hero-img{ width:100%; height:100%; object-fit:cover; will-change:transform; transition:transform .1s linear; } .hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg,rgba(26,26,24,.45) 0%,rgba(26,26,24,.65) 100%), linear-gradient(90deg,rgba(26,26,24,.55) 0%,rgba(26,26,24,.2) 60%); } .hero-content{ position:relative; z-index:2; max-width:1280px; width:100%; margin:0 auto; padding:120px 40px 80px; color:var(--bone); } .hero-eyebrow{ display:inline-block; font-family:var(--sans); font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--bone); opacity:.8; padding-left:48px; position:relative; margin-bottom:32px; } .hero-eyebrow::before{ content:""; position:absolute; left:0;top:50%; width:36px;height:1px; background:var(--bronze); } .hero-title{ font-size:clamp(3rem,7vw,6.5rem); line-height:.98; font-weight:400; color:var(--bone); letter-spacing:-.02em; margin-bottom:32px; max-width:900px; } .hero-title em{ color:var(--bone); font-style:italic; font-weight:300; opacity:.85; } .hero-subtitle{ font-size:1.15rem; color:rgba(245,240,235,.78); max-width:560px; font-weight:300; margin-bottom:48px; line-height:1.6; } .hero-subtitle strong{ color:var(--bone); font-weight:400; } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; } .scroll-indicator{ position:absolute; bottom:36px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--bone); z-index:3; transition:opacity .4s var(--ease); } .scroll-indicator:hover{opacity:.7} .scroll-text{ font-family:var(--sans); font-size:10px; letter-spacing:.4em; text-transform:uppercase; opacity:.85; font-weight:400; padding-left:.4em; } .scroll-arrow{ display:block; color:var(--bronze); overflow:visible; } .scroll-arrow path{ opacity:.35; animation:scrollFade 1.8s ease-in-out infinite; } .scroll-arrow .scroll-arrow-second{ animation-delay:.25s; } @keyframes scrollFade{ 0%,100% {opacity:.2} 50% {opacity:1} } /* ============================================ PILARES ============================================ */ .pilares{ padding:120px 0; background:var(--bone-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .pilares-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; } .pilar{ text-align:center; padding:20px 36px; border-right:1px solid var(--line); transition:transform .5s var(--ease); } .pilar:last-child{border-right:0} .pilar:hover{transform:translateY(-6px)} .pilar-icon{ font-size:2rem; color:var(--bronze); margin-bottom:24px; display:inline-block; transition:transform .5s var(--ease); } .pilar:hover .pilar-icon{transform:scale(1.1)} .pilar h3{ font-family:var(--serif); font-size:1.4rem; margin-bottom:12px; font-weight:500; } .pilar p{ font-size:.92rem; color:var(--text-soft); line-height:1.6; } /* ============================================ SERVICIOS ============================================ */ .servicios{ padding:140px 0; background:var(--bone); } .servicios-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; } .servicio{ background:var(--bone-deep); position:relative; overflow:hidden; transition:transform .6s var(--ease), box-shadow .6s var(--ease); } .servicio:hover{ transform:translateY(-10px); box-shadow:0 32px 60px -28px rgba(26,26,24,.35); } .servicio-media{ overflow:hidden; aspect-ratio:4/3; background:var(--bone-warm); } .servicio-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); filter:grayscale(15%); } .servicio:hover .servicio-media img{ transform:scale(1.08); filter:grayscale(0); } .servicio-body{ padding:40px 36px 44px; position:relative; } .servicio-num{ display:block; font-family:var(--serif); font-size:.95rem; letter-spacing:.2em; color:var(--bronze); margin-bottom:14px; } .servicio-body h3{ font-size:1.7rem; margin-bottom:16px; font-weight:500; } .servicio-body p{ font-size:.95rem; color:var(--text-soft); line-height:1.65; margin-bottom:24px; } .servicio-link{ font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--carbon); display:inline-flex; align-items:center; gap:10px; font-weight:500; position:relative; padding-bottom:6px; transition:color .35s var(--ease); } .servicio-link::after{ content:""; position:absolute; left:0;right:0;bottom:0; height:1px; background:var(--bronze); transform:scaleX(.3); transform-origin:left; transition:transform .5s var(--ease); } .servicio-link i{transition:transform .4s var(--ease)} .servicio:hover .servicio-link{color:var(--bronze)} .servicio:hover .servicio-link::after{transform:scaleX(1)} .servicio:hover .servicio-link i{transform:translateX(6px)} /* ============================================ PROCESO ============================================ */ .proceso{ padding:140px 0; background:var(--carbon); color:var(--bone); position:relative; } .proceso::before{ content:""; position:absolute; top:0;left:50%; width:1px;height:60px; background:var(--bronze); transform:translateX(-50%); } .timeline{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:40px; position:relative; margin-top:60px; } .timeline::before{ content:""; position:absolute; top:34px;left:8%;right:8%; height:1px; background:linear-gradient(90deg,transparent,var(--bronze) 20%,var(--bronze) 80%,transparent); z-index:0; } .timeline-step{ position:relative; text-align:center; padding-top:0; z-index:1; } .timeline-num{ display:inline-grid; place-items:center; width:72px;height:72px; font-family:var(--serif); font-size:1.5rem; color:var(--bronze); border:1px solid var(--bronze); background:var(--carbon); border-radius:50%; margin-bottom:28px; letter-spacing:.04em; position:relative; transition:all .5s var(--ease); } .timeline-step:hover .timeline-num{ background:var(--bronze); color:var(--carbon); transform:scale(1.05); } .timeline-step h3{ font-family:var(--serif); font-size:1.4rem; color:var(--bone); font-weight:500; margin-bottom:14px; } .timeline-step p{ font-size:.92rem; color:rgba(245,240,235,.65); line-height:1.65; max-width:240px; margin:0 auto; } /* ============================================ PORTFOLIO ============================================ */ .portfolio{ padding:140px 0; background:var(--bone); } .portfolio-filters{ display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin-bottom:60px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .filter-btn{ background:none; border:0; padding:20px 28px; font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-soft); cursor:pointer; font-weight:500; position:relative; transition:color .35s var(--ease); } .filter-btn::after{ content:""; position:absolute; left:50%;bottom:-1px; width:0;height:2px; background:var(--bronze); transition:all .4s var(--ease); transform:translateX(-50%); } .filter-btn:hover{color:var(--carbon)} .filter-btn.is-active{color:var(--carbon)} .filter-btn.is-active::after{width:60%} .portfolio-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:240px; gap:16px; } .port-item{ position:relative; overflow:hidden; cursor:zoom-in; background:var(--bone-warm); transition:opacity .4s var(--ease), transform .5s var(--ease); } .port-tall{grid-row:span 2} .port-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease), filter .6s var(--ease); filter:grayscale(20%); } .port-item:hover img{ transform:scale(1.08); filter:grayscale(0); } .port-item figcaption{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(26,26,24,.85) 100%); display:flex; align-items:flex-end; padding:24px 28px; color:var(--bone); opacity:0; transition:opacity .5s var(--ease); } .port-item:hover figcaption{opacity:1} .port-item figcaption span{ font-family:var(--serif); font-size:1.1rem; font-style:italic; } .port-item.is-hidden{opacity:0;pointer-events:none;transform:scale(.95)} /* ============================================ NOSOTROS ============================================ */ .nosotros{ padding:140px 0; background:var(--bone-deep); position:relative; } .nosotros-grid{ display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; } .nosotros-text .section-eyebrow{padding-left:48px} .nosotros-text .section-eyebrow::before{display:block} .nosotros-text .section-title{ text-align:left; font-size:clamp(2.4rem,4vw,3.6rem); margin-bottom:36px; } .nosotros-text p{ font-size:1.02rem; color:var(--text-soft); line-height:1.85; margin-bottom:24px; max-width:520px; } .nosotros-stats{ display:flex; gap:48px; margin:48px 0 36px; padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .stat-num{ display:block; font-family:var(--serif); font-size:3rem; color:var(--bronze); font-weight:400; line-height:1; letter-spacing:-.02em; } .stat-label{ display:block; margin-top:8px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute); } .badge-trust{ display:inline-flex; align-items:center; gap:12px; padding:14px 22px; border:1px solid var(--bronze); color:var(--bronze); font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:500; } .badge-trust strong{color:var(--carbon);font-weight:600} .nosotros-media{ position:relative; aspect-ratio:4/5; } .nosotros-media img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; filter:grayscale(15%); } .nosotros-media-frame{ position:absolute; inset:24px -24px -24px 24px; border:1px solid var(--bronze); z-index:0; } /* ============================================ TESTIMONIOS ============================================ */ .testimonios{ padding:140px 0; background:var(--carbon); color:var(--bone); position:relative; text-align:center; } .testi-wrapper{ max-width:820px; margin:0 auto; } .testi-quote{ font-size:3rem; color:var(--bronze); opacity:.55; margin-bottom:24px; } .testi-text{ font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); font-style:italic; line-height:1.25; color:var(--bone); font-weight:300; letter-spacing:-.01em; margin-bottom:36px; } .testi-stars{ color:var(--bronze); font-size:14px; letter-spacing:6px; margin-bottom:28px; } .testi-author{ display:block; font-style:normal; } .testi-author span:first-child{ display:block; font-family:var(--serif); font-size:1.2rem; color:var(--bone); margin-bottom:6px; } .testi-source{ font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(245,240,235,.5); } /* ============================================ CONTACTO ============================================ */ .contacto{ padding:140px 0; background:var(--bone); } .contacto-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:start; } .form{ background:var(--bone-deep); padding:56px 48px; position:relative; border:1px solid var(--line); } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .form-field{ display:block; margin-bottom:24px; } .form-field span{ display:block; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-mute); margin-bottom:10px; font-weight:500; } .form-field input, .form-field select, .form-field textarea{ width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); padding:12px 0; font-family:var(--sans); font-size:15px; color:var(--carbon); font-weight:300; transition:border-color .4s var(--ease); border-radius:0; } .form-field textarea{resize:vertical;min-height:120px} .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:0; border-bottom-color:var(--bronze); } .form-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B6F47' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center; cursor:pointer; } .form-error{ display:block; margin-top:6px; font-size:11px; color:#b04a3c; letter-spacing:.04em; min-height:14px; } .form-check{ display:flex; gap:12px; align-items:flex-start; font-size:.85rem; color:var(--text-soft); margin:8px 0 28px; cursor:pointer; } .form-check input{ margin-top:3px; accent-color:var(--bronze); } .form-check a{ color:var(--bronze); text-decoration:underline; text-underline-offset:3px; } .form-success{ display:none; margin-top:24px; padding:20px 24px; background:var(--carbon); color:var(--bone); gap:18px; align-items:center; border-left:3px solid var(--bronze); animation:slideUp .6s var(--ease); } .form-success.show{display:flex} .form-success i{ width:36px;height:36px; display:grid;place-items:center; background:var(--bronze); color:var(--carbon); border-radius:50%; font-size:14px; } .form-success strong{ display:block; font-family:var(--serif); font-size:1.15rem; font-weight:500; color:var(--bone); margin-bottom:2px; } .form-success span{ font-size:.85rem; color:rgba(245,240,235,.7); letter-spacing:.02em; } @keyframes slideUp{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } .contacto-info{padding-top:8px} .info-block{ padding:24px 0; border-bottom:1px solid var(--line); } .info-block:first-child{padding-top:0} .info-label{ display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--bronze); margin-bottom:10px; font-weight:500; } .info-block p, .info-block a{ font-family:var(--serif); font-size:1.25rem; font-weight:400; color:var(--carbon); line-height:1.55; } .info-block a:hover{color:var(--bronze)} .map-wrap{ margin-top:36px; } .map-wrap iframe{ width:100%; display:block; } .map-link{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze); font-weight:500; transition:gap .35s var(--ease); } .map-link:hover{gap:14px} /* ============================================ FOOTER ============================================ */ .site-footer{ background:var(--carbon); color:rgba(245,240,235,.7); padding:100px 0 32px; border-top:1px solid var(--carbon-line); } .footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:60px; padding-bottom:60px; border-bottom:1px solid rgba(245,240,235,.08); } .brand-footer{color:var(--bone)} .brand-footer .brand-mark{color:var(--bronze);border-color:var(--bronze)} .footer-tagline{ margin-top:20px; font-family:var(--serif); font-size:1.1rem; font-style:italic; color:rgba(245,240,235,.55); max-width:300px; line-height:1.5; } .footer-col h4{ font-family:var(--sans); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--bronze); margin-bottom:24px; font-weight:500; } .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; } .footer-col a{ font-size:.92rem; color:rgba(245,240,235,.65); transition:color .35s var(--ease); } .footer-col a:hover{color:var(--bronze)} .footer-contact li{ font-size:.92rem; line-height:1.65; } .footer-bottom{ padding-top:32px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:.8rem; letter-spacing:.06em; color:rgba(245,240,235,.4); } .footer-legal{ display:flex; gap:12px; align-items:center; } .footer-legal a{color:rgba(245,240,235,.55);transition:color .35s var(--ease)} .footer-legal a:hover{color:var(--bronze)} .footer-legal .dot{opacity:.5} /* ============================================ LIGHTBOX ============================================ */ .lightbox{ position:fixed; inset:0; background:rgba(26,26,24,.96); z-index:999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .45s var(--ease); padding:40px; } .lightbox.open{opacity:1;pointer-events:auto} .lightbox img{ max-width:90%; max-height:80vh; object-fit:contain; transform:scale(.95); transition:transform .5s var(--ease); } .lightbox.open img{transform:scale(1)} .lightbox-close, .lightbox-nav{ position:absolute; background:none; border:1px solid rgba(245,240,235,.3); color:var(--bone); width:48px;height:48px; display:grid;place-items:center; cursor:pointer; font-size:1.1rem; transition:all .35s var(--ease); } .lightbox-close:hover, .lightbox-nav:hover{ background:var(--bronze); border-color:var(--bronze); } .lightbox-close{top:32px;right:32px} .lightbox-nav{top:50%;transform:translateY(-50%)} .lightbox-prev{left:32px} .lightbox-next{right:32px} .lightbox-caption{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); color:var(--bone); font-family:var(--serif); font-style:italic; font-size:1.1rem; } /* ============================================ MODALES ============================================ */ .modal{ position:fixed; inset:0; background:rgba(26,26,24,.85); z-index:998; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); padding:32px; } .modal.open{opacity:1;pointer-events:auto} .modal-content{ background:var(--bone); max-width:680px; width:100%; max-height:80vh; overflow-y:auto; padding:64px 56px 56px; position:relative; transform:translateY(20px); transition:transform .5s var(--ease); } .modal.open .modal-content{transform:translateY(0)} .modal-content h3{ font-family:var(--serif); font-size:2rem; margin-bottom:24px; color:var(--carbon); } .modal-content p{ margin-bottom:14px; font-size:.95rem; color:var(--text-soft); line-height:1.7; } .modal-close{ position:absolute; top:20px;right:20px; width:36px;height:36px; background:none; border:0; cursor:pointer; color:var(--carbon); font-size:1.2rem; transition:color .35s var(--ease); } .modal-close:hover{color:var(--bronze)} /* ============================================ REVEAL ANIMATION ============================================ */ .reveal{ opacity:0; transform:translateY(40px); transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); } .reveal.is-visible{ opacity:1; transform:translateY(0); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width:1100px){ .nav-list{gap:24px} .nav-cta{display:none} .pilares-grid{grid-template-columns:repeat(2,1fr)} .pilar{border-bottom:1px solid var(--line);padding:40px 24px} .pilar:nth-child(2){border-right:0} .pilar:nth-child(3),.pilar:nth-child(4){border-bottom:0} .servicios-grid{grid-template-columns:repeat(2,1fr);gap:28px} .timeline{grid-template-columns:repeat(2,1fr);gap:60px} .timeline::before{display:none} .portfolio-grid{grid-template-columns:repeat(3,1fr)} .nosotros-grid{gap:60px} .footer-grid{grid-template-columns:1fr 1fr;gap:48px} } @media (max-width:780px){ .container{padding:0 24px} .nav-container{padding:0 24px} .nav-main{display:none} .nav-toggle{display:flex} .site-header{padding:18px 0} .site-header.scrolled{padding:14px 0} .hero-content{padding:120px 24px 100px} .hero-title{font-size:clamp(2.6rem,9vw,4rem)} .hero-subtitle{font-size:1rem} .hero-actions .btn{padding:16px 24px;font-size:11px} .scroll-indicator{bottom:24px} .pilares{padding:80px 0} .pilares-grid{grid-template-columns:1fr} .pilar{border-right:0;border-bottom:1px solid var(--line);padding:32px 0} .pilar:last-child{border-bottom:0} .servicios,.proceso,.portfolio,.nosotros,.testimonios,.contacto{padding:90px 0} .section-header{margin-bottom:56px} .section-title{font-size:clamp(2rem,7vw,2.8rem)} .servicios-grid{grid-template-columns:1fr;gap:24px} .timeline{grid-template-columns:1fr;gap:48px} .timeline-step{text-align:left;padding-left:88px;position:relative} .timeline-step .timeline-num{ position:absolute; left:0;top:0; width:60px;height:60px; font-size:1.2rem; margin-bottom:0; } .timeline-step p{margin:0;max-width:100%} .portfolio-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px} .portfolio-filters{overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap} .filter-btn{padding:18px 20px;white-space:nowrap;flex-shrink:0} .nosotros-grid{grid-template-columns:1fr;gap:48px} .nosotros-text .section-title{text-align:left;font-size:2.2rem} .nosotros-stats{flex-wrap:wrap;gap:32px} .stat-num{font-size:2.4rem} .nosotros-media-frame{inset:16px -16px -16px 16px} .testi-text{font-size:1.5rem} .contacto-grid{grid-template-columns:1fr;gap:48px} .form{padding:36px 28px} .form-row{grid-template-columns:1fr;gap:0} .footer-grid{grid-template-columns:1fr;gap:40px;padding-bottom:40px} .footer-bottom{flex-direction:column;text-align:center;font-size:.75rem} .lightbox-close{top:16px;right:16px} .lightbox-prev{left:12px} .lightbox-next{right:12px} .lightbox-nav,.lightbox-close{width:42px;height:42px} .modal-content{padding:48px 28px 36px} } @media (max-width:480px){ .portfolio-grid{grid-template-columns:1fr;grid-auto-rows:240px} .port-tall{grid-row:span 1} .brand-line-1{font-size:8px} .brand-line-2{font-size:1rem} .brand-mark{width:38px;height:38px;font-size:1.2rem} } /* ---------- Reduce motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } .reveal{opacity:1;transform:none} }