/** * pages-common.css - Shared Page Components * Components used across multiple pages:breadcrumb,FAQ,CTA sections,* base card styles,contact-strip,legal pages,etc. * Loaded on ALL pages alongside main.css. * * @version 10.0.1 (INTERSTATE) */ :root{--primary:var(--color-primary,#228b22);--primary-dark:var(--color-primary-dark,#1a472a);--dark:#1a1a2e;--light:var(--color-bg-alt,#f8f9fa);--text:var(--color-text,#2d2d2d);--text-light:var(--color-text-muted,#666);} /* ============================================ SECTION HEADERS - Override garantido ============================================ */ .section-header{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;max-width:800px !important;margin-left:auto !important;margin-right:auto !important;margin-bottom:50px !important;padding:0 20px;} .section-title-wrapper{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:12px;margin-bottom:16px;width:100%;} /* ============================================================================= BREADCRUMB (Shared:About,Contact,Legal,Services,etc.) ============================================================================= */ .breadcrumb-nav{background:var(--light);border-bottom:1px solid #e5e7eb;padding:0.85rem 0;} .breadcrumb{display:flex;align-items:center;gap:0.5rem;list-style:none;padding:0;margin:0;font-size:0.9rem;} .breadcrumb li{display:flex;align-items:center;gap:0.5rem;color:var(--text-light);} .breadcrumb li + li::before{content:"›";color:#ccc;font-size:1.1rem;} .breadcrumb a{color:var(--primary);text-decoration:none;transition:color 0.2s;} .breadcrumb a:hover{color:var(--primary-dark);text-decoration:underline;} .breadcrumb [aria-current="page"]{color:var(--text);font-weight:600;} /* ============================================================================= FAQ SECTION (Home + Contact + Other pages) ============================================================================= */ .faq-section{padding:80px 0;background:var(--color-bg);} .faq-block{padding:80px 0;background:var(--color-bg-alt);} .faq-list{max-width:800px;margin:0 auto;} .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1100px;margin:0 auto;} .faq-column{display:flex;flex-direction:column;gap:0;} .faq-item{background:var(--color-bg,#fff);border-radius:12px;border:1px solid rgba(0,0,0,0.06);overflow:hidden;transition:border-color 0.3s,box-shadow 0.3s;} .faq-item:hover{border-color:rgba(34,139,34,0.2);box-shadow:0 4px 16px rgba(0,0,0,0.06);} .faq-item.active{border-color:var(--color-primary,#228b22);box-shadow:0 4px 20px rgba(34,139,34,0.1);} .faq-question{width:100%;padding:22px 24px;background:none;border:none;text-align:left;font-family:var(--font-primary);font-size:1rem;font-weight:600;color:var(--color-text);display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;transition:color var(--transition-fast);} .faq-question::after{content:'+';font-size:1.5rem;font-weight:300;color:var(--color-primary,#228b22);flex-shrink:0;transition:transform 0.3s;} .faq-item.active .faq-question::after{transform:rotate(45deg);} .faq-question:hover{color:var(--color-primary);} .faq-question svg{width:20px;height:20px;flex-shrink:0;transition:transform var(--transition-normal);} .faq-item.active .faq-question svg{transform:rotate(180deg);} .faq-answer{max-height:0;overflow:hidden;padding:0 24px;transition:max-height 0.4s ease,padding 0.4s ease;} .faq-item.active .faq-answer{max-height:500px;padding:0 24px 22px;} .faq-answer p{color:var(--color-text-muted);line-height:1.75;margin:0;} .faq-contact{background:var(--color-bg-alt);text-align:center;margin-top:50px;padding:30px;border-radius:12px;} .faq-contact p{margin-bottom:16px;color:var(--color-text-muted);} /* ============================================================================= CTA SECTION PATTERN (Shared across multiple pages) ============================================================================= */ .cta-section{padding:100px 0;background:linear-gradient(135deg,rgba(196,30,58,.95),rgba(154,24,48,.95)) center/cover,url('/assets/images/cta-bg.jpg') center/cover;color:#fff;text-align:center;} .cta-content{max-width:800px;margin:0 auto;} .cta-section h2{font-size:clamp(1.75rem,4vw,2.75rem);margin-bottom:20px;} .cta-section p{font-size:1.15rem;margin-bottom:30px;opacity:.95;} .cta-badge{display:inline-block;background:rgba(255,255,255,.2);color:#fff;padding:8px 20px;border-radius:50px;font-size:.85rem;font-weight:600;margin-bottom:20px;} .cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;} .cta-note{font-size:.9rem;opacity:.8;} .cta-section .btn-primary{background:#fff;color:var(--color-secondary);} .cta-section .btn-primary:hover{background:var(--color-gold-light);color:var(--color-text);} /* ============================================================================= FINAL CTA PATTERN (Home + About + Cities + Gallery + Services + etc.) ============================================================================= */ .final-cta-section{background:var(--color-bg-alt);text-align:center;padding:100px 0 180px;} .final-cta-content{max-width:700px;margin:0 auto;} .final-cta-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 30px;box-shadow:0 10px 30px rgba(34,139,34,.25);} .final-cta-icon svg{width:36px;height:36px;color:#fff;} .final-cta-section h2{font-size:clamp(1.75rem,4vw,2.5rem);color:var(--color-text);margin-bottom:16px;} .final-cta-section > .container > .final-cta-content > p{color:var(--color-text-muted);font-size:1.1rem;line-height:1.7;margin-bottom:30px;} .final-cta-actions{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:24px;} .final-cta-divider{color:var(--color-text-muted);font-size:.95rem;} .final-cta-phone{font-size:1.5rem;font-weight:700;color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast);} .final-cta-phone:hover{color:var(--color-primary-dark);} .final-cta-note{color:var(--color-text-muted);font-size:.9rem;margin:0;} /* ============================================================================= BASE SERVICE CARD (Home + Services pages) ============================================================================= */ .service-card{background:var(--color-bg);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition-normal);} .service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);} .service-card-image{height:200px;overflow:hidden;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));} .service-card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);} .service-card:hover .service-card-image img{transform:scale(1.08);} .service-card-content{padding:24px;} .service-card h3{font-family:var(--font-heading);font-size:1.25rem;color:var(--color-text);margin-bottom:12px;} .service-card p{color:var(--color-text-muted);font-size:.95rem;line-height:1.6;margin-bottom:16px;} .service-card-link{color:var(--color-primary);font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:gap var(--transition-fast);} .service-card-link:hover{gap:10px;color:var(--color-primary-dark);} .service-card-link svg{width:16px;height:16px;} .service-features{list-style:none;margin-bottom:24px;} .service-features li{display:flex;align-items:center;gap:10px;padding:8px 0;color:var(--color-text);font-size:.95rem;} .service-features svg{width:18px;height:18px;color:var(--color-primary);flex-shrink:0;} /* ============================================================================= BASE REVIEW CARD (Home + Reviews pages) ============================================================================= */ .review-card{background:var(--color-bg);padding:30px;border-radius:16px;box-shadow:var(--shadow-sm);} .review-stars{color:var(--color-gold);margin-bottom:16px;font-size:1.2rem;letter-spacing:2px;} .review-text{color:#555;font-style:italic;line-height:1.7;margin-bottom:20px;} .review-author{font-weight:600;color:var(--color-text);} .review-location{color:var(--color-text-muted);font-size:.9rem;} .review-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;} .review-avatar{width:48px;height:48px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:600;} .review-meta{display:flex;flex-direction:column;flex:1;} .review-meta .review-author{font-weight:600;color:var(--color-text);} .review-meta .review-location{font-size:.85rem;color:var(--color-text-muted);} .review-date{display:block;font-size:.8rem;color:var(--color-text-muted);margin-top:12px;} /* ============================================================================= CONTACT STRIP (Shared pattern) ============================================================================= */ .contact-strip-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;} .contact-strip-content h3{color:#fff;font-size:1.5rem;margin-bottom:8px;} .contact-strip-content p{color:rgba(255,255,255,.85);margin:0;} .contact-strip-actions{display:flex;align-items:center;gap:20px;} .contact-strip-phone{display:flex;align-items:center;gap:10px;color:#fff;font-size:1.25rem;font-weight:600;text-decoration:none;transition:opacity var(--transition-fast);} .contact-strip-phone:hover{opacity:.9;} .contact-strip-phone svg{width:24px;height:24px;} .contact-strip .btn-primary{background:#fff;color:var(--color-primary);} .contact-strip .btn-primary:hover{background:var(--color-gold-light);} /* ============================================================================= RESPONSIVE - SHARED COMPONENTS ============================================================================= */ @media (max-width:768px){.faq-grid{grid-template-columns:1fr;} .final-cta-section{padding:80px 0 140px;} .final-cta-actions{flex-direction:column;gap:16px;} .final-cta-phone{font-size:1.3rem;} .cta-buttons{flex-direction:column;} .contact-strip-inner{flex-direction:column;text-align:center;} .contact-strip-actions{flex-direction:column;width:100%;} .contact-strip-phone{font-size:1.1rem;}} /* ========================================================================== LEGAL PAGES (Shared:Accessibility,Privacy,Terms,etc.) ========================================================================== */ .legal-hero{background:linear-gradient(135deg,var(--dark) 0%,#1a2a44 100%);padding:8rem 0 3.5rem;text-align:center;} .legal-hero h1{font-size:clamp(2rem,4.5vw,2.8rem);color:#fff;font-weight:800;margin-bottom:0.6rem;} .legal-hero p{color:rgba(255,255,255,0.75);font-size:1.1rem;max-width:520px;margin:0 auto;} .legal-content-section{padding:3.5rem 0 5rem;background:#fff;} .legal-content{max-width:800px;margin:0 auto;} .legal-updated{font-size:0.88rem;color:var(--text-light);font-style:italic;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid #e5e7eb;} .legal-section{margin-bottom:2.5rem;} .legal-section h2{font-size:1.3rem;color:var(--text);margin-bottom:0.75rem;padding-bottom:0.5rem;border-bottom:2px solid var(--light);} .legal-section p{color:var(--text-light);line-height:1.75;margin-bottom:0.75rem;} .legal-section ul{padding-left:1.5rem;margin-bottom:1rem;} .legal-section li{color:var(--text-light);line-height:1.7;margin-bottom:0.4rem;} .legal-section li strong{color:var(--text);} .legal-section a{color:var(--primary);text-decoration:none;font-weight:500;} .legal-section a:hover{text-decoration:underline;} .legal-contact{background:var(--light);padding:1.25rem 1.5rem;border-radius:10px;border:1px solid #e5e7eb;margin:1rem 0 1.25rem;} .legal-contact p{margin-bottom:0.4rem;color:var(--text);} .legal-contact p:last-child{margin-bottom:0;} .legal-table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:0.85rem;} .legal-table th,.legal-table td{text-align:left;padding:0.65rem 0.75rem;border:1px solid #e5e7eb;} .legal-table th{background:#f8f9fa;font-weight:600;color:var(--text,#1a1a2e);font-size:0.82rem;} .legal-table td{color:var(--text-light,#555);} .legal-table td code{background:#f0f0f0;padding:0.15rem 0.4rem;border-radius:4px;font-size:0.8rem;font-family:monospace;} .legal-table tr:nth-child(even) td{background:#fafafa;} @media (max-width:768px){.legal-table{font-size:0.78rem;} .legal-table th,.legal-table td{padding:0.5rem;}} @media (max-width:768px){.legal-hero{padding:6rem 0 2.5rem;} .legal-content-section{padding:2.5rem 0 3.5rem;} .legal-section h2{font-size:1.15rem;}}