/* ============================================ ALAZAR DESARROLLOS INMOBILIARIOS Basado en estilo Armentano Desarrollos ============================================ */ /* Fuentes cargadas via en cada HTML con preconnect — ver de cada página */ /* ============= RESET & BASE ============= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --brown-dark: #111111; --copper: #444444; --brown-mid: #555555; --brown-light: #777777; --beige: #FFFFFF; --beige-alt: #F3F3F3; --amber: #FFFFFF; --white: #FFFFFF; --font-display: 'Barlow Condensed', sans-serif; --font-serif: 'EB Garamond', Georgia, serif; --font-ui: 'Roboto Condensed', sans-serif; --container: 1140px; --transition: 0.45s cubic-bezier(0.19, 1, 0.22, 1); } html { scroll-behavior: smooth; } body { font-family: var(--font-ui); background: var(--beige); color: var(--brown-dark); overflow-x: hidden; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } .container { max-width: var(--container); margin: 0 auto; padding: 0 40px; } /* ============= PAGE TRANSITION ============= */ .page-transition { display: none; } /* ============= FADE IN al cargar ============= */ body { animation: pageFadeIn 0.6s ease both; } @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============= HERO ANIMATIONS ============= */ #hero .hero-logo-top { animation: fromLeft 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s both; } #hero .hero-eyebrow { animation: fromLeft 0.8s cubic-bezier(0.22,1,0.36,1) 0.55s both; } #hero .hero-title { animation: fromBot 1.1s cubic-bezier(0.22,1,0.36,1) 0.7s both; } #hero .hero-dots { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 1.1s both; } #hero .hero-form-panel { animation: fromRight 1.0s cubic-bezier(0.22,1,0.36,1) 0.5s both; } #hero .hero-nav { animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 1.2s both; } /* ============= PAGE HERO ANIMATIONS ============= */ .page-hero .page-hero-label { animation: fromLeft 0.7s cubic-bezier(0.22,1,0.36,1) 0.6s both; } .page-hero .page-hero-title { animation: fromBot 1.1s cubic-bezier(0.22,1,0.36,1) 0.8s both; } .page-hero .page-hero-sub { animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 1.1s both; } /* ============= CONTACTO PAGE ============= */ .contacto-page-top .contacto-title { animation: fromBot 1.1s cubic-bezier(0.22,1,0.36,1) 0.7s both; } .contacto-page-top .contacto-sub { animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 1.1s both; } /* ============= SCROLL REVEAL ============= */ .reveal { opacity: 0; transform: translateY(28px); } .reveal.from-left { transform: translateX(-36px); } .reveal.from-right { transform: translateX(36px); } .reveal.scale-in { transform: scale(0.9); } .reveal.in-view { animation: revealUp 0.75s cubic-bezier(0.22,1,0.36,1) both; } .reveal.from-left.in-view { animation: revealLeft 0.75s cubic-bezier(0.22,1,0.36,1) both; } .reveal.from-right.in-view { animation: revealRight 0.75s cubic-bezier(0.22,1,0.36,1) both; } .reveal.scale-in.in-view { animation: revealScale 0.75s cubic-bezier(0.22,1,0.36,1) both; } /* Stagger delays */ .reveal.d1 { animation-delay: 0.05s; } .reveal.d2 { animation-delay: 0.12s; } .reveal.d3 { animation-delay: 0.19s; } .reveal.d4 { animation-delay: 0.26s; } .reveal.d5 { animation-delay: 0.33s; } /* ============= KEYFRAMES ============= */ @keyframes fromTop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } } @keyframes fromBot { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } } @keyframes fromLeft { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } } @keyframes fromRight { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes revealUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes revealLeft { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } } @keyframes revealRight { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } } @keyframes revealScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } } /* ============= HEADER ============= */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; transition: transform 0.5s cubic-bezier(0.19,1,0.22,1), opacity 0.4s ease, background var(--transition), padding var(--transition); } header.scrolled { background: var(--brown-dark); padding: 14px 40px; box-shadow: 0 2px 20px rgba(0,0,0,0.3); } /* Header oculto — home page, arranca invisible */ body.has-hero header { transform: translateY(-100%); opacity: 0; pointer-events: none; } /* Header visible — tras scroll o en páginas interiores */ body.has-hero header.header-visible { transform: translateY(0); opacity: 1; pointer-events: all; } .header-logo img { height: 52px; width: auto; transition: height var(--transition); } header.scrolled .header-logo img { height: 40px; } nav { display: flex; align-items: center; gap: 40px; } nav a { font-family: var(--font-ui); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); opacity: 0.85; transition: opacity 0.2s; } nav a:hover { opacity: 1; } nav .nav-divider { color: var(--copper); opacity: 0.5; } .header-wa { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); font-weight: 400; } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; outline: none; } .hamburger span { display: block; width: 24px; height: 1.5px; background: var(--white); transition: var(--transition); } /* ============= HERO ============= */ #hero { position: relative; height: 100vh; min-height: 640px; background-color: #111; overflow: hidden; display: flex; flex-direction: column; } /* Video de fondo */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 0; } /* Overlay oscuro semitransparente sobre la foto */ .hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); z-index: 1; } /* Contenedor de las dos columnas — ocupa todo menos la nav inferior */ .hero-inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: row; align-items: stretch; padding: 0 60px 0 60px; } /* ── COLUMNA IZQUIERDA ── */ .hero-left { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 0; } /* Logo */ .hero-logo-top { display: flex; align-items: flex-start; justify-content: center; margin-top: 48px; } .hero-logo-top img { height: 110px; width: auto; max-width: 100%; } /* Bloque de texto central */ .hero-tagline { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } /* Eyebrow / ubicación */ .hero-eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.55); } /* Título principal */ .hero-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(38px, 5.5vw, 72px); line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; } .hero-title strong { font-weight: 700; display: block; } .hero-claim { font-family: var(--font-serif); font-style: italic; font-size: clamp(0.95rem, 1.5vw, 1.15rem); color: rgba(255,255,255,0.7); margin-top: 20px; max-width: 380px; line-height: 1.55; } /* Indicadores de slide */ .hero-dots { display: flex; gap: 8px; align-items: center; padding-bottom: 4px; } .hero-dot { display: block; width: 28px; height: 4px; background: rgba(255,255,255,0.28); border-radius: 2px; transition: background 0.3s; } .hero-dot.active { background: #fff; width: 36px; } /* ── COLUMNA DERECHA: FORMULARIO ── */ .hero-form-panel { width: 380px; flex-shrink: 0; background: rgba(18, 18, 18, 0.92); backdrop-filter: blur(6px); display: flex; flex-direction: column; justify-content: center; padding: 36px 28px; margin: 32px 0; } .hero-form-title { font-family: var(--font-ui); font-size: 13px; font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: #fff; margin-bottom: 20px; } .hero-form input, .hero-form textarea { width: 100%; background: rgba(255,255,255,0.07); border: none; border-bottom: 1px solid rgba(255,255,255,0.14); padding: 10px 10px; color: #fff; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; outline: none; margin-bottom: 9px; display: block; transition: background 0.2s, border-color 0.2s; } .hero-form input::placeholder, .hero-form textarea::placeholder { color: rgba(255,255,255,0.32); } .hero-form input:focus, .hero-form textarea:focus { background: rgba(255,255,255,0.12); border-bottom-color: rgba(255,255,255,0.55); } .hero-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .hero-form textarea { resize: none; min-height: 66px; line-height: 1.5; } .hero-form-btn { width: 100%; background: #fff; color: #111; border: none; padding: 13px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; cursor: pointer; font-weight: 600; margin-top: 8px; transition: opacity 0.2s; } .hero-form-btn:hover { opacity: 0.85; } /* ── NAV INFERIOR ── */ .hero-nav { position: relative; z-index: 2; display: flex; align-items: stretch; background: rgba(0, 0, 0, 0.75); border-top: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px); flex-shrink: 0; } .hero-nav a { flex: 1; font-family: var(--font-ui); font-size: 11px; font-weight: 400; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.6); padding: 20px 8px; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(255,255,255,0.08); transition: color 0.2s, background 0.2s; } .hero-nav a:last-child { border-right: none; } .hero-nav a:hover { color: #fff; background: rgba(255,255,255,0.05); } .hero-nav-divider { display: none; } /* ============= PROJECTS LIST ============= */ #proyectos { background: var(--beige); } .projects-header { padding: 80px 40px 40px; text-align: center; } .projects-header h2 { font-family: var(--font-display); font-weight: 200; font-size: clamp(32px, 5vw, 55px); letter-spacing: 0.15em; text-transform: uppercase; color: var(--brown-mid); } .projects-header p { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--brown-mid); opacity: 0.7; margin-top: 12px; letter-spacing: 0.05em; } .project-item { position: relative; display: flex; align-items: center; justify-content: center; height: 220px; overflow: hidden; cursor: pointer; border-top: 1px solid rgba(0, 0, 0, 0.1); } .project-item:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } /* Background image — always loaded, revealed on hover */ .project-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity var(--transition); filter: brightness(0.65); } .project-item:hover .project-bg { opacity: 1; filter: brightness(0.55) blur(3px); } .project-name { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 300; font-size: clamp(18px, 3vw, 32px); letter-spacing: 0.3em; text-transform: uppercase; color: var(--brown-mid); transition: color var(--transition), letter-spacing var(--transition); } .project-item:hover .project-name { color: var(--white); letter-spacing: 0.45em; } .project-tag { position: absolute; right: 40px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: transparent; z-index: 2; transition: color var(--transition); } .project-item:hover .project-tag { color: rgba(255,255,255,0.5); } .project-arrow { position: absolute; right: 40px; opacity: 0; transform: translateX(-10px); transition: opacity var(--transition), transform var(--transition); color: var(--amber); z-index: 2; } .project-item:hover .project-arrow { opacity: 1; transform: translateX(0); } /* ============= HIGHLIGHT SECTION — EIBAR ============= */ #eibar { position: relative; overflow: hidden; min-height: 80vh; display: flex; align-items: center; overflow: hidden; background: var(--brown-dark); } .eibar-bg { position: absolute; inset: 0; background-image: url('../assets/images/eibar/eibar-01.jpg'); background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.35; } .eibar-content { position: relative; z-index: 2; padding: 100px 40px; max-width: var(--container); margin: 0 auto; width: 100%; } .eibar-label { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--amber); margin-bottom: 20px; } .eibar-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(48px, 8vw, 100px); line-height: 0.9; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; } .eibar-subtitle { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: rgba(255,255,255,0.6); margin-bottom: 48px; letter-spacing: 0.04em; } .eibar-stats { display: flex; gap: 60px; margin-bottom: 48px; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; gap: 4px; } .stat-number { font-family: var(--font-display); font-weight: 200; font-size: clamp(40px, 6vw, 80px); line-height: 1; color: var(--amber); letter-spacing: 0.02em; } .stat-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .btn-outline { display: inline-block; padding: 14px 36px; border: 1px solid rgba(255,255,255,0.3); font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white); transition: background var(--transition), border-color var(--transition); } .btn-outline:hover { background: var(--copper); border-color: var(--copper); } /* ============= SERVICIOS GRID ============= */ #servicios { background: var(--beige-alt); padding: 100px 40px; } .servicios-header { padding: 80px 40px 40px; text-align: center; } .servicios-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(30px, 4vw, 50px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown-mid); text-align: center; margin-bottom: 16px; } .servicios-sub { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--brown-mid); opacity: 0.7; text-align: center; margin-bottom: 60px; } .servicios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: var(--container); margin: 0 auto; } .servicio-card { position: relative; height: 340px; overflow: hidden; cursor: pointer; } .servicio-card-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); filter: brightness(0.7); } .servicio-card:hover .servicio-card-img { transform: scale(1.05); } .servicio-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%); } .servicio-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px; z-index: 2; } .servicio-card-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(18px, 3vw, 28px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); margin-bottom: 6px; } .servicio-card-desc { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.35s; } .servicio-card:hover .servicio-card-desc { opacity: 1; transform: translateY(0); } /* ============= PERFORACIONES ============= */ #perforaciones { position: relative; min-height: 60vh; display: flex; align-items: center; background: var(--brown-dark); overflow: hidden; } .perforaciones-bg { position: absolute; inset: 0; background-image: url('../assets/images/perforaciones/perforaciones-01.jpg'); background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.3; } .perforaciones-content { position: relative; z-index: 2; padding: 100px 40px; max-width: var(--container); margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 60px; } .perforaciones-text h2 { font-family: var(--font-display); font-weight: 200; font-size: clamp(40px, 6vw, 80px); line-height: 0.9; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); margin-bottom: 20px; } .perforaciones-text p { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 400px; } .perforaciones-specs { display: flex; flex-direction: column; gap: 24px; min-width: 0; flex: 1; max-width: 360px; } .spec-item { border-left: 2px solid var(--copper); padding-left: 20px; } .spec-item strong { display: block; font-family: var(--font-display); font-weight: 300; font-size: 22px; letter-spacing: 0.1em; color: var(--amber); } .spec-item span { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.4); } /* ============= CONTACTO ============= */ #contacto { background: var(--brown-dark); padding: 100px 40px; } #contacto.contacto-page-top { padding-top: 140px; } .contacto-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contacto-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(40px, 5vw, 70px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); line-height: 1.05; margin-bottom: 24px; } .contacto-sub { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: rgba(255,255,255,0.45); margin-bottom: 48px; line-height: 1.6; } .contacto-areas { display: flex; flex-direction: column; gap: 0; } .area-item { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .area-item:first-child { border-top: 1px solid rgba(255,255,255,0.08); } .area-name { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); } .area-phone { font-family: var(--font-display); font-size: 22px; font-weight: 300; letter-spacing: 0.1em; color: var(--amber); transition: color 0.2s; } .area-phone:hover { color: var(--white); } /* Form */ .contacto-form { display: flex; flex-direction: column; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.3); } .form-group input, .form-group select, .form-group textarea { background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding: 10px 0; font-family: var(--font-ui); font-size: 14px; color: var(--white); outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; border-radius: 0; } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.2); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-bottom-color: var(--amber); } .form-group select option { background: var(--brown-dark); color: var(--white); } .form-group textarea { resize: none; height: 80px; } .btn-submit { align-self: flex-start; margin-top: 8px; padding: 14px 40px; background: transparent; border: 1px solid rgba(255,255,255,0.2); font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--white); cursor: pointer; transition: background var(--transition), border-color var(--transition); } .btn-submit:hover { background: var(--copper); border-color: var(--copper); } /* ============= FOOTER ============= */ footer { background: #0a0a0a; padding: 36px 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .footer-logo img { height: 44px; width: auto; opacity: 0.7; } .footer-copy { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.15em; color: rgba(255,255,255,0.2); text-align: center; } .footer-links { display: flex; gap: 24px; justify-content: flex-end; } .footer-links a { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.25); transition: color 0.2s; } .footer-links a:hover { color: var(--amber); } /* ============= WHATSAPP BUTTON ============= */ .wa-button { position: fixed; bottom: 28px; right: 28px; z-index: 200; width: 52px; height: 52px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35); transition: transform 0.2s, box-shadow 0.2s; animation: waBounce 0.5s 1.5s ease backwards; } .wa-button:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5); } @keyframes waBounce { 0% { opacity: 0; transform: scale(0); } 60% { transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } } .wa-button svg { width: 26px; height: 26px; fill: white; } /* WA Dropdown */ .wa-dropdown { position: fixed; bottom: 90px; right: 28px; z-index: 199; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.3s, transform 0.3s; } .wa-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: all; } .wa-option { display: flex; align-items: center; gap: 12px; background: var(--brown-dark); padding: 10px 16px; border-radius: 4px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.3); transition: background 0.2s; } .wa-option:hover { background: var(--copper); } .wa-option-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); } .wa-option-number { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.05em; color: var(--amber); } /* ============= HOME INTRO STATEMENT ============= */ .home-intro { background: var(--beige); padding: 100px 40px; border-bottom: 1px solid rgba(0,0,0,0.08); } .home-intro-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .home-intro-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(28px, 3.5vw, 46px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brown-dark); line-height: 1.1; margin-bottom: 24px; } .home-intro-copy { font-family: var(--font-serif); font-size: clamp(15px, 1.5vw, 18px); color: var(--brown-mid); line-height: 1.8; } .home-intro-stats { display: flex; flex-direction: column; gap: 32px; border-left: 1px solid rgba(0,0,0,0.1); padding-left: 60px; } .home-stat { display: flex; flex-direction: column; gap: 4px; } .home-stat-number { font-family: var(--font-display); font-weight: 200; font-size: clamp(44px, 6vw, 72px); line-height: 1; color: var(--copper); letter-spacing: 0.02em; } .home-stat-label { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown-mid); opacity: 0.6; } /* ============= HOME CONTACTO CTA ============= */ .home-contacto-cta { background: var(--brown-dark); padding: 100px 40px; } .home-cta-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .home-cta-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(36px, 4.5vw, 60px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); line-height: 1.0; margin-bottom: 16px; } .home-cta-sub { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: rgba(255,255,255,0.4); margin-bottom: 36px; } .home-cta-right { display: flex; flex-direction: column; gap: 0; } .home-cta-phones { display: flex; flex-direction: column; margin-bottom: 36px; } /* ============= BTN DARK ============= */ .btn-dark { display: inline-block; padding: 14px 36px; background: var(--brown-dark); border: 1px solid var(--brown-dark); font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white); transition: background var(--transition), color var(--transition); } .btn-dark:hover { background: var(--copper); border-color: var(--copper); color: var(--white); } /* ============= NAV ACTIVE STATE ============= */ nav a.nav-active { opacity: 1; color: var(--amber); } /* ============= PAGE HERO (interior pages) ============= */ .page-hero { position: relative; height: 58vh; min-height: 440px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; overflow: hidden; background-color: var(--brown-dark); border-bottom: 1px solid rgba(255,255,255,0.12); } .page-hero--dark { height: 48vh; min-height: 360px; } .page-hero-bg { display: none; } .page-hero::after { display: none; } .page-hero-content { position: relative; z-index: 2; padding: 120px 40px 70px; max-width: var(--container); width: 100%; } .page-hero-label { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; } .page-hero-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(44px, 7vw, 88px); line-height: 0.9; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; } .page-hero-sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(14px, 1.6vw, 18px); color: rgba(255,255,255,0.55); letter-spacing: 0.04em; max-width: 520px; } /* ============= PROJECT ITEM AS ANCHOR ============= */ a.project-item { display: flex; color: inherit; } /* ============= TIERRA DE ALICANTE ============= */ .alicante-section { background: var(--brown-dark); padding: 100px 40px; } .alicante-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap; } .alicante-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(44px, 7vw, 88px); line-height: 0.9; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); margin-bottom: 12px; } .alicante-sub { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: rgba(255,255,255,0.5); margin-bottom: 24px; letter-spacing: 0.04em; } .alicante-detail { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-bottom: 20px; } .alicante-copy { font-family: var(--font-serif); font-size: 16px; color: rgba(255,255,255,0.4); line-height: 1.7; max-width: 420px; } .alicante-stats { display: flex; gap: 48px; flex-shrink: 0; } /* ============= EIBAR FEATURES ============= */ .eibar-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; } .eibar-feature-item { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 300; padding-left: 16px; border-left: 2px solid var(--copper); } /* ============= CTA SECTION ============= */ .cta-section { background: var(--beige); padding: 80px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; } .cta-text { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2.5vw, 26px); color: var(--brown-mid); letter-spacing: 0.04em; } .cta-section .btn-outline { color: var(--brown-dark); border-color: var(--brown-mid); } .cta-section .btn-outline:hover { background: var(--copper); border-color: var(--copper); color: var(--white); } /* ============= VIVIENDA DETALLE ============= */ .vivienda-detalle { background: var(--brown-dark); padding: 100px 40px; } .vivienda-detalle-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; } .vivienda-block-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(36px, 5vw, 64px); line-height: 0.9; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); margin-bottom: 10px; } .vivienda-block-sub { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: rgba(255,255,255,0.45); margin-bottom: 20px; } .vivienda-feature { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); font-weight: 300; margin-bottom: 20px; } .vivienda-copy { font-family: var(--font-serif); font-size: 16px; color: rgba(255,255,255,0.45); line-height: 1.7; } /* ============= VIVIENDA GALERIA ============= */ .vivienda-galeria { background: var(--beige-alt); } .galeria-grid { display: grid; grid-template-columns: repeat(3, 1fr); height: 260px; } .galeria-item { background-size: cover; background-position: center; filter: brightness(0.85); transition: filter var(--transition); } .galeria-item:hover { filter: brightness(1.0); } /* ============= PERFORACIONES PAGE SERVICIOS ============= */ .perf-servicios { background: var(--beige); padding: 100px 40px; } .perf-servicios-inner { max-width: var(--container); margin: 0 auto; } .perf-intro { text-align: center; margin-bottom: 64px; } .perf-section-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(32px, 4vw, 52px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brown-mid); line-height: 1.05; margin-bottom: 16px; } .perf-section-sub { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--brown-mid); opacity: 0.7; max-width: 560px; margin: 0 auto; line-height: 1.6; } .perf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .perf-card { background: var(--brown-dark); padding: 40px 32px; } .perf-card-title { font-family: var(--font-display); font-weight: 200; font-size: 24px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; } .perf-card-text { font-family: var(--font-serif); font-size: 15px; color: rgba(255,255,255,0.45); line-height: 1.7; } /* ============= MOBILE NAV ============= */ .mobile-menu { position: fixed; inset: 0; background-color: var(--brown-dark); z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; transform: translateX(100%); transition: transform var(--transition); } .mobile-menu.open { transform: translateX(0); } .mobile-menu a { font-family: var(--font-display); font-weight: 200; font-size: 42px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); opacity: 0.7; transition: opacity 0.2s, color 0.2s; } .mobile-menu a:hover { opacity: 1; color: var(--amber); } .mobile-close { position: absolute; top: 28px; right: 32px; font-size: 28px; color: rgba(255,255,255,0.4); cursor: pointer; background: none; border: none; line-height: 1; } /* ============= RESPONSIVE ============= */ /* ── TABLET (≤ 1024px) ── */ @media (max-width: 1024px) { .hero-inner { padding: 0 40px; } .hero-form-panel { width: 320px; padding: 28px 22px; } .home-intro-inner { grid-template-columns: 1fr; gap: 48px; } .home-intro-stats { flex-direction: row; border-left: none; padding-left: 0; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 40px; gap: 40px; flex-wrap: wrap; } .home-cta-inner { grid-template-columns: 1fr; gap: 40px; } .servicios-grid { grid-template-columns: 1fr 1fr; } .servicio-card { height: 280px; } .perforaciones-content { flex-direction: column; gap: 40px; } .perforaciones-specs { max-width: 100%; } .contacto-inner { grid-template-columns: 1fr; gap: 48px; } .perf-cards { grid-template-columns: 1fr 1fr; } .vivienda-detalle-inner { grid-template-columns: 1fr; gap: 60px; } footer { grid-template-columns: auto 1fr; gap: 16px 32px; } .footer-copy { grid-column: 1 / -1; order: 3; } .footer-links { justify-content: flex-end; } } /* ── MOBILE (≤ 768px) ── */ @media (max-width: 768px) { .container { padding: 0 20px; } header { padding: 20px 24px; } header.scrolled { padding: 12px 24px; } nav { display: none; } .header-wa { display: none; } .hamburger { display: flex; padding: 10px; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); } header { justify-content: center; } .header-logo img { height: 64px; } header.scrolled .header-logo img { height: 50px; } /* Hero */ #hero { height: auto; min-height: 100svh; } .hero-inner { flex-direction: column; padding: 20px 24px 24px; gap: 24px; overflow-y: auto; } .hero-left { padding: 36px 0 0 0; flex: 0 0 auto; justify-content: flex-start; gap: 56px; } .hero-logo-top { justify-content: center; } .hero-logo-top img { height: 90px; } .hero-form-panel { width: 100%; margin: 0; flex-shrink: 0; } .hero-form-row { grid-template-columns: 1fr; gap: 0; } .hero-nav a { font-size: 9px; letter-spacing: 0.2em; padding: 16px 4px; } /* Fix iOS background-attachment: fixed */ .eibar-bg, .perforaciones-bg { background-attachment: scroll; } /* Projects */ .projects-header { padding: 60px 24px 32px; } .project-item { height: 150px; } .project-tag { display: none; } .project-arrow { display: none; } /* Eibar */ .eibar-stats { gap: 24px; flex-wrap: wrap; } .eibar-content { padding: 60px 24px; } /* Page hero */ .page-hero { min-height: 260px; height: 42vh; } .page-hero-content { padding: 120px 24px 36px; } /* Servicios */ .servicios-header { padding: 60px 24px 32px; } .servicios-grid { grid-template-columns: 1fr; } .servicio-card { height: 220px; } #servicios { padding: 60px 24px; } /* Perforaciones */ .perforaciones-content { padding: 60px 24px; } /* Contacto */ .contacto-inner { grid-template-columns: 1fr; gap: 40px; } #contacto { padding: 60px 24px; } .form-row { grid-template-columns: 1fr; } .btn-submit { width: 100%; text-align: center; padding: 16px 40px; } /* Footer */ footer { grid-template-columns: 1fr; text-align: center; padding: 32px 24px; gap: 16px; } .footer-links { justify-content: center; flex-wrap: wrap; gap: 16px; } /* Alicante */ .alicante-section { padding: 60px 24px; } .alicante-inner { flex-direction: column; gap: 40px; } .alicante-stats { gap: 24px; flex-wrap: wrap; } .eibar-features { margin-bottom: 32px; } /* Galería */ .galeria-grid { grid-template-columns: 1fr; height: auto; } .galeria-item { height: 180px; } /* Vivienda */ .vivienda-detalle { padding: 60px 24px; } /* Perforaciones page */ .perf-servicios { padding: 60px 24px; } .perf-cards { grid-template-columns: 1fr; } /* CTA */ .cta-section { padding: 60px 24px; } /* Home sections */ .home-intro { padding: 60px 24px; } .home-contacto-cta { padding: 60px 24px; } .home-cta-inner { grid-template-columns: 1fr; gap: 48px; } /* Mobile menu */ .mobile-menu a { font-size: clamp(28px, 8vw, 42px); } .mobile-close { top: max(28px, calc(env(safe-area-inset-top, 0px) + 12px)); } /* WA — safe area para notch/home indicator */ .wa-button { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; } .wa-dropdown { right: 16px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } } /* ── SMALL MOBILE (≤ 480px) ── */ @media (max-width: 480px) { .page-hero-title { font-size: clamp(32px, 10vw, 56px); } .eibar-title { font-size: clamp(38px, 12vw, 72px); } .alicante-title { font-size: clamp(38px, 12vw, 72px); } .home-stat-number { font-size: clamp(36px, 10vw, 60px); } .stat-number { font-size: clamp(36px, 10vw, 72px); } } /* ============= GALERÍA SWIPE (Montalchino) ============= */ .swipe-slider { position: relative; width: 100%; background: var(--brown-dark); user-select: none; } .swipe-track { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .swipe-track::-webkit-scrollbar { display: none; } .swipe-slide { flex: 0 0 100%; position: relative; height: 72vh; min-height: 420px; scroll-snap-align: start; overflow: hidden; cursor: grab; } .swipe-slide:active { cursor: grabbing; } .swipe-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; filter: grayscale(20%); } /* Flechas */ .swipe-prev, .swipe-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.2); width: 50px; height: 50px; font-size: 26px; line-height: 1; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background var(--transition), border-color var(--transition); font-family: var(--font-display); font-weight: 200; } .swipe-prev { left: 24px; } .swipe-next { right: 24px; } .swipe-prev:hover, .swipe-next:hover { background: rgba(0,0,0,0.8); border-color: rgba(255,255,255,0.5); } /* Dots */ .swipe-dots { position: absolute; bottom: 24px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 10; } .swipe-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; transition: background 0.25s, transform 0.25s; border: none; padding: 0; } .swipe-dot.active { background: var(--white); transform: scale(1.25); } /* Caption */ .swipe-caption { position: absolute; bottom: 58px; left: 0; right: 0; text-align: center; font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.4); z-index: 10; padding: 0 80px; pointer-events: none; } /* Contador de slides */ .swipe-counter { position: absolute; top: 24px; right: 28px; font-family: var(--font-display); font-weight: 200; font-size: 14px; letter-spacing: 0.15em; color: rgba(255,255,255,0.35); z-index: 10; } /* Header de sección galería */ .galeria-header { background: var(--beige-alt); padding: 64px 40px 40px; text-align: center; } .galeria-header h2 { font-family: var(--font-display); font-weight: 200; font-size: clamp(26px, 3.5vw, 44px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown-dark); margin-bottom: 12px; } .galeria-header p { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--brown-mid); letter-spacing: 0.04em; } @media (max-width: 768px) { .swipe-slide { height: 60vw; min-height: 260px; } .swipe-prev, .swipe-next { width: 40px; height: 40px; font-size: 22px; } .swipe-prev { left: 12px; } .swipe-next { right: 12px; } .swipe-caption { padding: 0 52px; } .galeria-header { padding: 48px 24px 32px; } } /* ============= UCO DIVINO SLIDER (transform-based) ============= */ .uco-slider { position: relative; overflow: hidden; width: 100%; background: var(--brown-dark); user-select: none; } .uco-track { display: flex; transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } .uco-slide { flex: 0 0 100%; position: relative; height: 72vh; overflow: hidden; cursor: grab; } .uco-slide:active { cursor: grabbing; } .uco-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } @media (max-width: 768px) { .uco-slide { height: 60vw; min-height: 260px; } } /* ============= PROYECTO PREVIEW CARD (listing pages) ============= */ .proyectos-listing { background: var(--beige); } .proyectos-listing-header { padding: 80px 40px 60px; text-align: center; max-width: var(--container); margin: 0 auto; } .proyectos-listing-header h2 { font-family: var(--font-display); font-weight: 200; font-size: clamp(32px, 5vw, 55px); letter-spacing: 0.15em; text-transform: uppercase; color: var(--brown-mid); margin-bottom: 16px; } .proyectos-listing-header p { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--brown-mid); opacity: 0.7; letter-spacing: 0.05em; } .proyecto-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: 100%; } .proyecto-preview { position: relative; height: 560px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; } .proyecto-preview-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), filter 0.5s; filter: brightness(0.65); } .proyecto-preview:hover .proyecto-preview-bg { transform: scale(1.04); filter: brightness(0.50); } .proyecto-preview-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.2) 50%, transparent 100%); } .proyecto-preview-content { position: relative; z-index: 2; padding: 36px 32px; } .proyecto-preview-tag { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 10px; display: block; } .proyecto-preview-badge { display: inline-block; font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; padding: 3px 10px; margin-bottom: 12px; border-radius: 2px; } .proyecto-preview-badge--disponible { background: rgba(37, 211, 102, 0.2); color: #4cde82; border: 1px solid rgba(37, 211, 102, 0.35); } .proyecto-preview-badge--vendido { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.12); } .proyecto-preview-badge--proximamente { background: rgba(255,183,0,0.15); color: #ffb700; border: 1px solid rgba(255,183,0,0.3); } .proyecto-preview-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(30px, 3.5vw, 46px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); line-height: 0.95; margin-bottom: 10px; } .proyecto-preview-desc { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 20px; } .proyecto-preview-stats { display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .proyecto-stat { display: flex; flex-direction: column; gap: 2px; } .proyecto-stat-num { font-family: var(--font-display); font-weight: 200; font-size: 26px; letter-spacing: 0.05em; color: var(--white); line-height: 1; } .proyecto-stat-label { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); } .proyecto-preview-cta { display: inline-block; padding: 10px 24px; border: 1px solid rgba(255,255,255,0.3); font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white); opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.35s, background 0.3s, border-color 0.3s; } .proyecto-preview:hover .proyecto-preview-cta { opacity: 1; transform: translateY(0); } .proyecto-preview-cta:hover { background: rgba(255,255,255,0.15); } /* ============= DETALLE INFO SECTION ============= */ .detalle-info { background: var(--beige); padding: 100px 40px; } .detalle-info-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .detalle-text-label { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--copper); margin-bottom: 20px; display: block; } .detalle-text-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(32px, 4vw, 52px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brown-dark); line-height: 1.05; margin-bottom: 24px; } .detalle-text-body { font-family: var(--font-serif); font-size: clamp(15px, 1.4vw, 17px); color: var(--brown-mid); line-height: 1.8; margin-bottom: 32px; } .detalle-specs { display: flex; flex-direction: column; gap: 20px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 40px; } .detalle-spec-row { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.07); gap: 20px; } .detalle-spec-key { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown-mid); opacity: 0.6; flex-shrink: 0; } .detalle-spec-val { font-family: var(--font-display); font-size: 18px; font-weight: 300; letter-spacing: 0.08em; color: var(--brown-dark); text-align: right; } /* ============= CARACTERISTICAS GRID ============= */ .caract-section { background: var(--brown-dark); padding: 80px 40px; } .caract-section-inner { max-width: var(--container); margin: 0 auto; } .caract-section-header { text-align: center; margin-bottom: 56px; } .caract-section-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(28px, 3.5vw, 46px); letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); margin-bottom: 12px; } .caract-section-sub { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: rgba(255,255,255,0.4); } .caract-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .caract-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); padding: 32px; } .caract-num { font-family: var(--font-display); font-weight: 200; font-size: 40px; color: rgba(255,255,255,0.15); line-height: 1; margin-bottom: 12px; display: block; } .caract-title { font-family: var(--font-display); font-weight: 200; font-size: 18px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); margin-bottom: 10px; } .caract-text { font-family: var(--font-serif); font-size: 14px; color: rgba(255,255,255,0.4); line-height: 1.7; } /* ============= PLANO SECTION ============= */ .plano-section { background: var(--beige-alt); padding: 80px 40px; text-align: center; } .plano-section-inner { max-width: 900px; margin: 0 auto; } .plano-label { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--copper); margin-bottom: 12px; display: block; } .plano-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(26px, 3vw, 40px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brown-dark); margin-bottom: 40px; } .plano-section img { width: 100%; height: auto; max-width: 800px; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 8px 40px rgba(0,0,0,0.08); } /* ============= RESPONSIVE nuevos componentes ============= */ @media (max-width: 1024px) { .proyecto-preview-grid { grid-template-columns: 1fr 1fr; } .proyecto-preview { height: 460px; } .caract-grid { grid-template-columns: 1fr 1fr; } .detalle-info-inner { grid-template-columns: 1fr; gap: 56px; } } @media (max-width: 768px) { .proyecto-preview-grid { grid-template-columns: 1fr; } .proyecto-preview { height: 380px; } .proyecto-preview-content { padding: 28px 24px; } .caract-grid { grid-template-columns: 1fr; } .caract-section { padding: 60px 24px; } .detalle-info { padding: 60px 24px; } .plano-section { padding: 60px 24px; } .proyectos-listing-header { padding: 60px 24px 40px; } }