/* ========================================================================= * aerotermia-core · landing.css * ========================================================================= * Basado 1:1 en landing-aerotermia.html. Añade estilos nuevos para: * - sección .administradores (colaboración con administradores de finca) * - feedback de formularios (.aero-form-feedback, .is-error, .is-ok) * - estado de botones mientras envían (aria-busy) * * Cambios 2026-04-14: * - Accesibilidad: estados :focus-visible visibles para navegación con * teclado en enlaces, botones, inputs y elementos interactivos. * - Las reglas antiguas con outline:none se mantienen, pero ahora hay un * anillo de foco global por :focus-visible que cumple WCAG 2.1 2.4.7. * ========================================================================= */ :root { --verde-principal: #00A651; --verde-oscuro: #006837; --verde-claro: #7CC242; --naranja: #F5A623; --naranja-hover: #E09000; --gris-oscuro: #1A1A2E; --gris-medio: #4A4A5A; --gris-claro: #F7F8FA; --blanco: #FFFFFF; --focus-ring: 0 0 0 3px rgba(0, 166, 81, 0.45); --focus-ring-dark: 0 0 0 3px rgba(124, 194, 66, 0.7); } /* Reset local (no global) — la página blank-canvas añade body.aero-landing-page. Usamos :where() para que el selector tenga especificidad 0,1,0 y cualquier override por clase (.hero-content p, .administradores-lead, etc.) pueda aplicarse sin pelearse por especificidad. */ body.aero-landing-page, body.aero-landing-page * { box-sizing: border-box; } body.aero-landing-page { margin: 0; padding: 0; font-family: 'Inter', sans-serif; color: var(--gris-oscuro); line-height: 1.6; overflow-x: hidden; background: var(--blanco); } .aero-landing-page :where(h1, h2, h3, h4, p, ul, li) { margin: 0; padding: 0; } /* Accesibilidad — anillo de foco visible solo con teclado. :focus-visible evita que aparezca al hacer click con el ratón. Cubre enlaces, botones, inputs y controles. */ .aero-landing-page a:focus-visible, .aero-landing-page button:focus-visible, .aero-landing-page input:focus-visible, .aero-landing-page select:focus-visible, .aero-landing-page textarea:focus-visible, .aero-landing-page [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; } /* Variante con más contraste sobre fondos oscuros (hero, CTA final, header fijo). */ .aero-landing-page header a:focus-visible, .aero-landing-page .hero a:focus-visible, .aero-landing-page .hero button:focus-visible, .aero-landing-page .cta-section a:focus-visible, .aero-landing-page .cta-section button:focus-visible, .aero-landing-page .cta-section input:focus-visible, .aero-landing-page footer a:focus-visible { box-shadow: var(--focus-ring-dark); } /* ===== HEADER ===== */ .aero-landing-page header { position: fixed; top: 0; width: 100%; background: var(--blanco); box-shadow: 0 2px 20px rgba(0,0,0,0.08); z-index: 1000; padding: 0 5%; } /* Evita que la WP admin bar tape el header cuando el usuario está logueado. Nota: WordPress ya aplica margin-top a (32 o 46 px según breakpoint), así que para la hero solo hace falta desplazar el header fixed; el hero sigue con su margin-top: 75px y colapsa con el body flush bajo el header. */ body.admin-bar.aero-landing-page header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar.aero-landing-page header { top: 46px; } } .header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 75px; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .logo-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--verde-principal), var(--verde-claro)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; } .logo-text { font-size: 1.3rem; font-weight: 700; color: var(--verde-oscuro); } .logo-text span { color: var(--verde-claro); } .aero-landing-page nav { display: flex; align-items: center; gap: 30px; } .aero-landing-page nav a { text-decoration: none; color: var(--gris-medio); font-weight: 500; font-size: 0.9rem; transition: color 0.3s; } .aero-landing-page nav a:hover { color: var(--verde-principal); } .btn-header { background: var(--verde-principal); color: white !important; padding: 10px 24px; border-radius: 25px; font-weight: 600; transition: background 0.3s, color 0.3s, border-color 0.3s; } .btn-header:hover { background: var(--verde-oscuro); } /* Variante "outline" para CTAs secundarios (Acceso) */ .btn-header-outline { background: transparent; color: var(--verde-principal) !important; border: 2px solid var(--verde-principal); padding: 8px 22px; /* compensar el border de 2px */ } .btn-header-outline:hover { background: var(--verde-principal); color: white !important; border-color: var(--verde-principal); } /* ===== HERO ===== */ .hero { margin-top: 75px; background: linear-gradient(135deg, #001a0e 0%, #003d1f 40%, #00552b 100%); min-height: 90vh; display: flex; align-items: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 70%; height: 200%; background: radial-gradient(ellipse, rgba(0,166,81,0.15) 0%, transparent 70%); } .hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: linear-gradient(to top, var(--blanco), transparent); } .hero-inner { max-width: 1200px; margin: 0 auto; padding: 80px 5%; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; } .hero-content h1 { font-size: 3rem; font-weight: 800; color: var(--blanco); line-height: 1.15; margin-bottom: 20px; } .hero-content h1 span { background: linear-gradient(90deg, var(--verde-claro), #A8E063); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-content p { color: rgba(255,255,255,0.8); font-size: 1.15rem; margin-bottom: 45px; line-height: 1.7; } .hero-badges { display: flex; gap: 15px; margin-bottom: 35px; flex-wrap: wrap; } .badge { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 20px; color: rgba(255,255,255,0.9); font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.15); } .badge i { color: var(--verde-claro); } .hero-btns { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 10px; } .btn-primary { background: var(--naranja); color: var(--blanco); padding: 15px 35px; border-radius: 30px; text-decoration: none; font-weight: 700; font-size: 1rem; transition: all 0.3s; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .btn-primary:hover { background: var(--naranja-hover); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(245,166,35,0.4); } .btn-secondary { background: transparent; color: var(--blanco); padding: 15px 35px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 1rem; border: 2px solid rgba(255,255,255,0.3); transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; } .btn-secondary:hover { border-color: var(--verde-claro); color: var(--verde-claro); } /* Lead Form in Hero */ .hero-form { background: var(--blanco); border-radius: 20px; padding: 40px; box-shadow: 0 25px 60px rgba(0,0,0,0.3); } .hero-form h3 { font-size: 1.4rem; color: var(--gris-oscuro); margin-bottom: 5px; } .hero-form .form-sub { color: var(--gris-medio); font-size: 0.9rem; margin-bottom: 25px; } /* ===== Form styling compartido ===== */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gris-oscuro); margin-bottom: 6px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 2px solid #E5E7EB; border-radius: 10px; font-size: 0.95rem; font-family: inherit; transition: border-color 0.3s; outline: none; background: #FFF; color: var(--gris-oscuro); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--verde-principal); } .form-group input.is-error, .form-group select.is-error, .form-group textarea.is-error { border-color: #dc2626; } .form-group textarea { resize: vertical; min-height: 90px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-check { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; } .form-check input[type="checkbox"] { margin-top: 4px; accent-color: var(--verde-principal); } .form-check label { font-size: 0.78rem; color: var(--gris-medio); line-height: 1.4; } .btn-form { width: 100%; background: var(--verde-principal); color: white; padding: 14px; border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.3s; font-family: inherit; } .btn-form:hover { background: var(--verde-oscuro); } .btn-form:disabled, .btn-cta:disabled, .btn-form[aria-busy="true"], .btn-cta[aria-busy="true"] { opacity: 0.65; cursor: progress; pointer-events: none; } .aero-form-feedback { margin-top: 14px; font-size: 0.88rem; color: var(--gris-medio); min-height: 1.2em; } .aero-form-feedback.is-ok { color: var(--verde-oscuro); font-weight: 600; } .aero-form-feedback.is-error { color: #b91c1c; font-weight: 600; } /* ===== BENEFICIOS ===== */ .beneficios { padding: 100px 5%; background: var(--blanco); } .section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; } .section-tag { display: inline-block; background: rgba(0,166,81,0.1); color: var(--verde-principal); padding: 6px 18px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; margin-bottom: 15px; } .section-tag.orange { background: rgba(245,166,35,0.12); color: var(--naranja-hover); } .section-header h2 { font-size: 2.3rem; font-weight: 800; color: var(--gris-oscuro); margin-bottom: 15px; line-height: 1.2; } .section-header p { color: var(--gris-medio); font-size: 1.05rem; } .beneficios-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .beneficio-card { background: var(--gris-claro); border-radius: 18px; padding: 40px 30px; transition: all 0.3s; border: 2px solid transparent; } .beneficio-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.08); border-color: var(--verde-claro); } .beneficio-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--verde-principal), var(--verde-claro)); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; margin-bottom: 20px; } .beneficio-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; color: var(--gris-oscuro); } .beneficio-card p { color: var(--gris-medio); font-size: 0.95rem; line-height: 1.6; } /* ===== COMO FUNCIONA ===== */ .proceso { padding: 100px 5%; background: var(--gris-claro); } .proceso-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; } .paso-card { text-align: center; position: relative; padding: 30px 20px; } .paso-num { width: 56px; height: 56px; background: var(--verde-principal); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; margin: 0 auto 20px; } .paso-card h4 { font-size: 1.05rem; font-weight: 700; color: var(--gris-oscuro); margin-bottom: 10px; } .paso-card p { color: var(--gris-medio); font-size: 0.9rem; line-height: 1.5; } /* ===== AYUDAS ===== */ .ayudas { padding: 100px 5%; background: var(--blanco); } .ayudas-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .ayudas-content h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 20px; color: var(--gris-oscuro); } .ayudas-content p { color: var(--gris-medio); margin-bottom: 25px; font-size: 1rem; line-height: 1.7; } .ayuda-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; padding: 18px; background: var(--gris-claro); border-radius: 12px; } .ayuda-item i { color: var(--verde-principal); font-size: 1.2rem; margin-top: 3px; } .ayuda-item h4 { font-size: 1rem; font-weight: 700; color: var(--gris-oscuro); margin-bottom: 4px; } .ayuda-item p { margin: 0; font-size: 0.9rem; } .ayudas-visual { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border-radius: 20px; padding: 50px; text-align: center; } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } .stat-box { background: white; border-radius: 14px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .stat-box .number { font-size: 2.2rem; font-weight: 800; color: var(--verde-principal); } .stat-box .label { font-size: 0.85rem; color: var(--gris-medio); margin-top: 5px; } /* ===== ADMINISTRADORES DE FINCAS ===== */ .administradores { padding: 100px 5%; background: linear-gradient(180deg, #F4F8F5 0%, #E8F1EA 100%); position: relative; overflow: hidden; } .administradores::before { content: ''; position: absolute; top: -40%; left: -10%; width: 60%; height: 180%; background: radial-gradient(ellipse, rgba(0,166,81,0.07) 0%, transparent 70%); pointer-events: none; } .administradores-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: start; position: relative; z-index: 2; } .administradores-content h2 { font-size: 2.2rem; font-weight: 800; margin: 15px 0 20px; color: var(--gris-oscuro); line-height: 1.2; } .administradores-lead { color: var(--gris-medio); font-size: 1.05rem; line-height: 1.7; margin-bottom: 35px; } .admin-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .admin-benefit { display: flex; align-items: flex-start; gap: 14px; padding: 20px; background: var(--blanco); border-radius: 14px; border: 1px solid rgba(245,166,35,0.15); box-shadow: 0 4px 18px rgba(0,0,0,0.04); } .admin-benefit-icon { width: 44px; height: 44px; min-width: 44px; background: linear-gradient(135deg, var(--naranja), #FFCA6B); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.1rem; } .admin-benefit h4 { font-size: 1rem; font-weight: 700; color: var(--gris-oscuro); margin-bottom: 4px; } .admin-benefit p { font-size: 0.88rem; color: var(--gris-medio); line-height: 1.5; } .administradores-form { background: var(--blanco); border-radius: 20px; padding: 40px; box-shadow: 0 25px 60px rgba(0,0,0,0.1); border-top: 4px solid var(--naranja); } .administradores-form h3 { font-size: 1.4rem; color: var(--gris-oscuro); margin-bottom: 5px; } .administradores-form .form-sub { color: var(--gris-medio); font-size: 0.9rem; margin-bottom: 25px; } .admin-form .btn-form { background: var(--naranja); } .admin-form .btn-form:hover { background: var(--naranja-hover); } /* ===== CTA FINAL ===== */ .cta-section { padding: 100px 5%; background: linear-gradient(135deg, #001a0e, #003d1f); text-align: center; position: relative; } .cta-section h2 { font-size: 2.5rem; font-weight: 800; color: white; margin-bottom: 15px; } .cta-section p { color: rgba(255,255,255,0.8); font-size: 1.1rem; max-width: 600px; margin: 0 auto 35px; } .cta-form-wrap { max-width: 550px; margin: 0 auto; } .cta-form-inline { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 16px; padding: 30px; border: 1px solid rgba(255,255,255,0.15); } .cta-form-inline .form-row-inline { display: flex; gap: 10px; margin-bottom: 12px; } .cta-form-inline input { flex: 1; padding: 14px 18px; border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; background: rgba(255,255,255,0.08); color: white; font-size: 0.95rem; font-family: inherit; outline: none; } .cta-form-inline input::placeholder { color: rgba(255,255,255,0.5); } .cta-form-inline input:focus { border-color: var(--verde-claro); } .cta-form-inline input.is-error { border-color: #f87171; } .btn-cta { width: 100%; padding: 14px; background: var(--naranja); color: white; border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.3s; } .btn-cta:hover { background: var(--naranja-hover); } .cta-phone { margin-top: 25px; color: rgba(255,255,255,0.7); font-size: 0.95rem; } .cta-phone a { color: var(--verde-claro); text-decoration: none; font-weight: 700; font-size: 1.1rem; } /* ===== FOOTER ===== */ .aero-landing-page footer { background: var(--gris-oscuro); color: rgba(255,255,255,0.7); padding: 60px 5% 30px; } .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; margin-bottom: 40px; } .footer-brand p { font-size: 0.9rem; line-height: 1.6; margin-top: 15px; } .footer-col h4 { color: white; font-size: 0.95rem; font-weight: 700; margin-bottom: 22px; } .footer-col a { display: block; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.88rem; margin-bottom: 10px; transition: color 0.3s; } .footer-col a:hover { color: var(--verde-claro); } .footer-bottom { max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 25px; display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; } .footer-bottom a { color: rgba(255,255,255,0.5); text-decoration: none; margin-left: 20px; } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { .aero-landing-page { overflow-x: hidden; } .hero { min-height: auto; } .hero-inner { grid-template-columns: 1fr; padding: 60px 5%; gap: 40px; } .hero-content h1 { font-size: 2.2rem; } .hero-content p { margin-bottom: 30px; } .hero-btns { margin-top: 6px; } .beneficios-grid { grid-template-columns: 1fr; } .beneficios, .proceso, .ayudas, .administradores, .cta-section { padding: 70px 5%; } .proceso-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .ayudas-inner { grid-template-columns: 1fr; gap: 40px; max-width: 100%; } .ayudas-visual { padding: 35px; width: 100%; box-sizing: border-box; } .administradores-inner { grid-template-columns: 1fr; gap: 40px; max-width: 100%; } .administradores-content, .administradores-form-wrap { min-width: 0; width: 100%; } .administradores-form { width: 100%; box-sizing: border-box; } .admin-benefits { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; } /* En móvil colapsamos la nav pero dejamos visible el botón "Acceso" para que el portal sea alcanzable desde el teléfono. */ .aero-landing-page nav { display: flex; gap: 0; } .aero-landing-page nav > a:not(.btn-header-outline) { display: none; } .aero-landing-page nav .btn-header-outline { padding: 7px 18px; font-size: 0.85rem; } } @media (max-width: 560px) { .aero-landing-page { overflow-x: hidden; } .hero-content h1 { font-size: 1.9rem; } .hero-badges { gap: 10px; margin-bottom: 25px; } .badge { font-size: 0.78rem; padding: 6px 12px; } .form-row { grid-template-columns: 1fr; } .hero-form, .administradores-form { padding: 28px 20px; width: 100%; box-sizing: border-box; } .cta-section h2 { font-size: 2rem; } .cta-section { padding: 70px 5%; } .cta-form-wrap { width: 100%; box-sizing: border-box; } .section-header { margin-bottom: 40px; } .section-header h2, .ayudas-content h2, .administradores-content h2 { font-size: 1.7rem; } .proceso-grid { grid-template-columns: 1fr; gap: 15px; } .paso-card { padding: 20px 15px; } .ayudas-visual { padding: 28px 20px; border-radius: 16px; } .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .stat-box { padding: 18px 10px; } .stat-box .number { font-size: 1.8rem; } .stat-box .label { font-size: 0.78rem; } .ayuda-item { padding: 14px; gap: 12px; } .admin-benefit { padding: 14px; gap: 12px; } .cta-form-inline .form-row-inline { flex-direction: column; } .footer-inner { grid-template-columns: 1fr; gap: 30px; padding: 0 5%; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; padding-left: 5%; padding-right: 5%; } .footer-bottom a { margin-left: 0; margin-right: 12px; } .btn-primary, .btn-secondary { padding: 13px 28px; font-size: 0.95rem; } .hero-btns { gap: 12px; } }