/*
Theme Name: HP Roofing New
Theme URI: https://hproofingllc.com
Author: HP Roofing LLC powered by Valor 
Description: New custom WordPress theme for HP Roofing LLC based on the premium HP Roofing design. Built strictly with semantic HTML5 and pure CSS3 (no Tailwind).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: hp-roofing-new
Tags: business, custom-logo, custom-menu, featured-images, full-width-template, theme-options
*/

/* -------------------------------------------------------------
   DESIGN TOKENS (CSS Variables)
   ------------------------------------------------------------- */
:root {
    /* Color Palette */
    --color-primary: #0c4e33;
    --color-on-primary: #ffffff;
    --color-primary-container: #0a402a;
    --color-on-primary-container: #e2e9e7;
    --color-primary-fixed: #e2e9e7;
    --color-primary-fixed-dim: #6e9f88;
    --color-on-primary-fixed: #0c4e33;
    --color-on-primary-fixed-variant: #0a402a;
    
    --color-secondary: #6e9f88;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #e2e9e7;
    --color-on-secondary-container: #0c4e33;
    --color-secondary-fixed: #6e9f88;
    --color-secondary-fixed-dim: #5c8c76;
    --color-on-secondary-fixed: #ffffff;
    --color-on-secondary-fixed-variant: #e2e9e7;
    
    --color-tertiary: #000000;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #2a2a2a;
    --color-on-tertiary-container: #f0f1f3;
    --color-tertiary-fixed: #2a2a2a;
    --color-tertiary-fixed-dim: #000000;
    --color-on-tertiary-fixed: #ffffff;
    --color-on-tertiary-fixed-variant: #e2e9e7;

    --color-background: #f0f1f3;
    --color-on-background: #2a2a2a;
    
    --color-surface: #ffffff;
    --color-on-surface: #2a2a2a;
    --color-surface-dim: #f0f1f3;
    --color-surface-bright: #ffffff;
    --color-surface-tint: #6e9f88;
    --color-surface-variant: #e2e9e7;
    --color-on-surface-variant: #2a2a2a;
    
    --color-surface-container: #ffffff;
    --color-surface-container-low: #f0f1f3;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-high: #e2e9e7;
    --color-surface-container-highest: #e2e9e7;
    
    --color-inverse-surface: #000000;
    --color-inverse-on-surface: #ffffff;
    --color-inverse-primary: #6e9f88;

    --color-outline: #75777b;
    --color-outline-variant: #c5c6ca;
    
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    /* Border Radii */
    --radius-default: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* Layout Spacing */
    --spacing-base: 8px;
    --spacing-margin-mobile: 16px;
    --spacing-margin-desktop: 64px;
    --spacing-content-gap: 32px;
    --spacing-gutter: 24px;
    --spacing-section-gap: 120px;
    --nav-height: 90px;

    /* Typography */
    --font-headline: 'Syne', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
}

/* -------------------------------------------------------------
   BASE RESET & SETUPS
   ------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--color-background);
    color: var(--color-on-background);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body::selection {
    background-color: var(--color-secondary-fixed);
    color: var(--color-primary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Typography styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
}

.title-display {
    font-size: 3.5rem; /* 56px */
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.title-section {
    font-size: 2.75rem; /* 44px */
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
}

.title-card {
    font-size: 1.75rem; /* 28px */
    line-height: 1.3;
}

.text-lg {
    font-size: 1.125rem; /* 18px */
    line-height: 1.6;
}

.text-md {
    font-size: 1rem;
}

.text-sm {
    font-size: 0.875rem;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-secondary);
}

/* Material Symbols Outlined Integration */
.icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Neo Shadows */
.neo-shadow {
    box-shadow: 4px 4px 0px 0px var(--color-secondary-fixed);
}

.neo-shadow-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.neo-shadow-hover:hover {
    box-shadow: 6px 6px 0px 0px var(--color-secondary-fixed);
    transform: translate(-2px, -2px);
}

/* -------------------------------------------------------------
   BUTTON COMPONENTS
   ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-primary);
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-on-secondary);
}

.btn--secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn--secondary:hover {
    background-color: rgba(195, 244, 0, 0.1);
}

/* -------------------------------------------------------------
   NAVIGATION BAR
   ------------------------------------------------------------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background-color: rgba(248, 249, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid var(--color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--spacing-margin-desktop);
}

.navbar__brand {
    font-family: var(--font-headline);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

.navbar__brand img {
    width: 180px;
    height: auto;
    object-fit: contain;
}

.navbar__menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-content-gap);
    list-style: none;
}

.navbar__link {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.navbar__link:hover, .navbar__link--active {
    color: var(--color-secondary);
}

.navbar__link--active {
    border-bottom: 2px solid var(--color-secondary);
}

/* --- Dropdown Menus --- */
.menu-item-has-children {
    position: relative;
}

.dropdown-icon {
    font-size: 0.6em;
    margin-left: 0.25rem;
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.2s ease;
}

.menu-item-has-children:hover .dropdown-icon {
    transform: rotate(180deg);
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 320px;
    background-color: var(--color-inverse-surface);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu li a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--color-inverse-on-surface);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}

.sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-secondary);
}


.navbar__actions {
    display: flex;
    align-items: center;
}

.navbar__btn {
    border: 1px solid var(--color-primary);
}

.navbar__toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0.5rem;
}

/* -------------------------------------------------------------
   HERO SECTION
   ------------------------------------------------------------- */
.hero {
    position: relative;
    min-h: 80vh;
    display: flex;
    align-items: center;
    padding: var(--spacing-section-gap) var(--spacing-margin-desktop);
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--color-surface-container-high);
}

.hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.hero__slide--active {
    opacity: 1;
}

.hero__bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(248, 249, 255, 0.95) 0%, rgba(248, 249, 255, 0.7) 40%, transparent 100%);
    z-index: 1;
}

.hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(26, 31, 51, 0.5); /* Semi-transparent dark */
    color: white;
    border: none;
    border-radius: var(--radius-full);
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(4px);
}

.hero__arrow:hover {
    background-color: var(--color-primary);
    transform: translateY(-50%) scale(1.1);
}

.hero__arrow--prev {
    left: 1.5rem;
}

.hero__arrow--next {
    right: 1.5rem;
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 clamp(3.5rem, 12vw, 6rem);
}

.hero-text-fade {
    opacity: 0;
    transform: translateY(10px);
}

.hero__badge, .title-display, .hero__desc {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero__badge {
    margin-bottom: 1.5rem;
}

.hero__desc {
    font-size: 1.125rem;
    color: var(--color-on-surface-variant);
    margin-bottom: 2rem;
    border-left: 4px solid var(--color-secondary-fixed);
    padding-left: 1rem;
    max-width: 650px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* -------------------------------------------------------------
   EXECUTION PROTOCOL (PROCESS) SECTION
   ------------------------------------------------------------- */
.section {
    padding: var(--spacing-section-gap) var(--spacing-margin-desktop);
}

.section--bright {
    background-color: var(--color-surface-bright);
    border-top: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--spacing-content-gap);
    gap: 1.5rem;
}

.section-header__desc {
    max-width: 450px;
    text-align: right;
    color: var(--color-on-surface-variant);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: var(--color-background);
    border: 1px solid var(--color-primary);
}

.process-card {
    padding: 2.5rem 2rem;
    border-right: 1px solid var(--color-primary);
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.process-card:last-child {
    border-right: none;
}

.process-card:hover {
    background-color: var(--color-surface-container-low);
}

.process-card__number {
    position: absolute;
    top: -1rem;
    right: 1rem;
    font-family: var(--font-headline);
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--color-secondary-fixed);
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.process-card:hover .process-card__number {
    opacity: 1;
}

.process-card__icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.process-card__title {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.process-card__desc {
    color: var(--color-on-surface-variant);
    font-size: 1rem;
}

/* Modifiers for Dynamic Background Images */
.process-card--has-bg {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.process-card--has-bg:hover {
    /* Prevent the light gray hover effect when an image is present */
    background-color: transparent !important;
}

.process-card--has-bg .process-card__title,
.process-card--has-bg .process-card__icon,
.process-card--has-bg .process-card__number {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.process-card--has-bg .process-card__desc {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* -------------------------------------------------------------
   ABOUT SECTION
   ------------------------------------------------------------- */
.section--lowest {
    background-color: var(--color-surface-container-lowest);
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-section-gap);
    align-items: center;
}

.about__subtitle {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-secondary);
    margin-bottom: 1rem;
}

.about__title {
    margin-bottom: 1.5rem;
}

.about__desc {
    color: var(--color-on-surface-variant);
    margin-bottom: 1.5rem;
}

.about__link {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.feature-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-outline-variant);
    background-color: var(--color-surface-container-lowest);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-card__icon-wrap {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
}

.feature-card__icon {
    font-size: 1.5rem;
}

.feature-card__title {
    font-size: 1.25rem;
    line-height: 1.2;
}

.feature-card__desc {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}

.about__actions {
    display: flex;
    gap: 1rem;
    margin-top: var(--spacing-content-gap);
    align-items: center;
}

/* -------------------------------------------------------------
   SERVICES GRID SECTION
   ------------------------------------------------------------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .services-grid { grid-template-columns: 1fr; }
}

.service-card {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: scale(1.02);
}

.service-card__bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.service-card__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 100%);
    z-index: 2;
    transition: background 0.3s ease;
}

.service-card:hover .service-card__overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.9) 100%);
}

.service-card__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 2rem;
}

.service-card__icon-wrap {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card__icon-wrap .icon {
    font-size: 3.5rem;
    color: var(--color-primary); /* #0a4e33 */
    /* Halo sutil para alto contraste sobre foto oscura */
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.85));
}

.service-card__title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    margin: 0;
}

/* -------------------------------------------------------------
   TECHNICAL SUPERIORITY (BENTO GRID) SECTION
   ------------------------------------------------------------- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-gutter);
}

.bento-item {
    border: 1px solid var(--color-primary);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}

.bento-item--wide {
    grid-column: span 8;
    background-color: var(--color-surface-container);
}

.bento-item--tall {
    grid-column: span 4;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bento-item--tall h3 {
    color: var(--color-on-primary);
}

.bento-item--full {
    grid-column: span 12;
    background-color: var(--color-surface-container-low);
    display: flex;
    align-items: center;
    gap: var(--spacing-content-gap);
    transition: border-color 0.3s ease;
}

.bento-item--full:hover {
    border-color: var(--color-secondary-fixed);
}

.bento-item__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bento-item__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.bento-item--tall .bento-item__icon {
    color: var(--color-secondary-fixed);
}

.bento-item__title {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.bento-item__desc {
    color: var(--color-on-surface-variant);
    max-width: 450px;
}

.bento-item--tall .bento-item__desc {
    color: var(--color-on-primary-container);
}

/* 2-Column Checklist for Bento Grid (Box 1) */
.offerings-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0;
}

.offerings-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 1.05rem;
    color: var(--color-on-surface);
    line-height: 1.4;
    font-weight: 500;
}

.offerings-list li .icon {
    font-size: 1.3rem;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

@media (max-width: 600px) {
    .offerings-list {
        grid-template-columns: 1fr;
    }
}

.bento-item__icon-wrap {
    flex-shrink: 0;
    padding: 1.5rem;
    background-color: var(--color-background);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-primary);
    display: flex;
    transition: background-color 0.3s ease;
}

.bento-item--full:hover .bento-item__icon-wrap {
    background-color: var(--color-secondary-fixed);
}

.bento-item__glow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 8rem;
    height: 8rem;
    background-color: var(--color-secondary-fixed);
    border-radius: var(--radius-full);
    filter: blur(48px);
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.bento-item:hover .bento-item__glow {
    opacity: 0.4;
}

/* -------------------------------------------------------------
   PORTFOLIO SECTION
   ------------------------------------------------------------- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.portfolio-card {
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-primary);
    background-color: var(--color-background);
}

.portfolio-card__img-wrap {
    aspect-ratio: 4/3;
    overflow: hidden;
}

.portfolio-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-card:hover .portfolio-card__img {
    transform: scale(1.05);
}

/* -------------------------------------------------------------
   FAQ SECTION (ACCORDIONS)
   ------------------------------------------------------------- */
.faq-wrap {
    max-width: 800px;
    margin: 0 auto;
}

.faq-accordion {
    margin-bottom: 1rem;
    background-color: var(--color-background);
    border: 1px solid var(--color-primary);
}

.faq-accordion__summary {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 700;
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    transition: background-color 0.3s ease;
}

/* Remove default webkit details marker */
.faq-accordion__summary::-webkit-details-marker {
    display: none;
}

.faq-accordion__summary:hover {
    background-color: var(--color-surface-container-low);
}

.faq-accordion__icon {
    color: var(--color-secondary);
    transition: transform 0.3s ease;
}

.faq-accordion[open] .faq-accordion__icon {
    transform: rotate(180deg);
}

.faq-accordion__content {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: var(--color-on-surface-variant);
    font-size: 1rem;
}

/* -------------------------------------------------------------
   CONTACT FORM / CTA SECTION
   ------------------------------------------------------------- */
.section--dark {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.section--dark h2 {
    color: var(--color-secondary-fixed);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-section-gap);
    align-items: center;
}

.contact__desc {
    color: var(--color-on-primary-container);
    margin-bottom: 2rem;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--color-on-primary-container);
}

.contact-info-item__icon {
    color: var(--color-secondary-fixed);
}

.contact-box {
    background-color: var(--color-background);
    color: var(--color-on-background);
    padding: 2.5rem;
    border: 2px solid var(--color-secondary-fixed);
}

.form-group-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group-row--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.form-label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-primary);
    padding: 0.5rem 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-primary);
    outline: none;
    transition: border-color 0.3s ease;
}

.form-input::placeholder {
    color: var(--color-outline);
}

.form-input:focus {
    border-color: var(--color-secondary-fixed);
}

.form-input--textarea {
    resize: none;
}

.contact-box__btn {
    width: 100%;
    padding: 1rem;
    margin-top: 1rem;
    transition: transform 0.3s ease;
}

.contact-box__btn:hover {
    transform: scale(1.02);
}

/* -------------------------------------------------------------
   FOOTER SECTION
   ------------------------------------------------------------- */
.footer {
    background-color: var(--color-inverse-surface);
    border-top: 4px solid var(--color-primary);
    padding: var(--spacing-section-gap) var(--spacing-margin-desktop) 2.5rem var(--spacing-margin-desktop);
    color: var(--color-inverse-on-surface);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-col__logo {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-secondary-fixed);
}

.footer-col__logo img {
    width: 120px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.footer-col__desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    max-width: 250px;
}

.footer-socials {
    display: flex;
    gap: 1rem;
}

.footer-socials__link {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease, border-color 0.3s ease;
}

.footer-socials__link:hover {
    color: var(--color-secondary-fixed);
    border-color: var(--color-secondary-fixed);
}

.footer-socials__svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.footer-col__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-on-primary);
}

.footer-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-menu__link {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer-menu__link:hover {
    color: var(--color-secondary-fixed);
}

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-contact-item__icon {
    color: var(--color-secondary-fixed);
    margin-top: 0.2rem;
}

.footer-contact-item__text {
    font-size: 1rem;
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------------------
   SCROLL TO TOP BUTTON
   ------------------------------------------------------------- */
.scroll-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--color-primary);
    color: var(--color-surface);
    border: none;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.scroll-top-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background-color: var(--color-secondary);
    transform: translateY(-5px);
}

/* -------------------------------------------------------------
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .navbar {
        padding: 0 var(--spacing-margin-mobile);
    }
    
    .hero {
        padding: var(--spacing-section-gap) var(--spacing-margin-mobile);
    }
    
    .section {
        padding: var(--spacing-section-gap) var(--spacing-margin-mobile);
    }
    
    .footer {
        padding: var(--spacing-section-gap) var(--spacing-margin-mobile) 2rem var(--spacing-margin-mobile);
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .process-card {
        border-bottom: 1px solid var(--color-primary);
    }
    
    .process-card:nth-child(even) {
        border-right: none;
    }
    
    .process-card:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .about-grid, .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-content-gap);
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .section-header__desc {
        text-align: left;
    }
    
    .bento-grid {
        grid-template-columns: 1fr;
    }
    
    .bento-item--wide, .bento-item--tall, .bento-item--full {
        grid-column: span 12;
    }
    
    .bento-item--tall {
        min-height: 300px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 80px;
    }
    
    .title-display {
        font-size: 2.5rem;
    }
    
    .title-section {
        font-size: 2rem;
    }

    .navbar__menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-surface-bright);
        padding: 2rem var(--spacing-margin-mobile);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border-bottom: 1px solid var(--color-primary);
        align-items: flex-start;
    }
    
    .navbar__menu.is-active {
        display: flex;
    }
    
    .navbar__actions {
        display: flex;
    }
    
    .navbar__toggle {
        display: block;
    }

    .hero__skew-overlay {
        display: none;
    }
    
    .hero__bg-img {
        opacity: 0.2;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }
    
    .process-card {
        border-right: none;
        border-bottom: 1px solid var(--color-primary);
    }
    
    .process-card:last-child {
        border-bottom: none;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .faq-accordion__summary {
        font-size: 1.25rem;
        padding: 1.25rem;
    }

    .form-group-row,
    .form-group-row--3 {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* -------------------------------------------------------------
   CUSTOM LOGIN PAGE
   ------------------------------------------------------------- */
body.login {
    background: linear-gradient(rgba(1, 2, 4, 0.85), rgba(1, 2, 4, 0.85)), url('https://images.unsplash.com/photo-1635424709961-f3a150459ad4') center/cover no-repeat fixed;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
}

body.login h1 a {
    display: none;
}

.custom-login-title {
    text-align: center;
    margin-bottom: 2rem;
}

.custom-login-title .cl-logo {
    width: 240px;
    height: auto;
    max-height: none;
    display: block;
    margin: 0 auto 1.5rem auto;
    filter: brightness(0) invert(1); /* Ensure it is white against the dark background */
}

.custom-login-title .cl-title {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--color-surface);
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}

.custom-login-title .cl-desc {
    color: var(--color-surface-dim);
    font-size: 1rem;
}

body.login #login {
    width: 450px;
    max-width: 90%;
    padding: 0;
}

body.login #loginform {
    background-color: var(--color-surface);
    border: 2px solid var(--color-on-surface);
    box-shadow: 12px 12px 0 var(--color-primary);
    padding: 3rem;
    border-radius: 0;
    margin-top: 0;
}

body.login .login label {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    margin-bottom: 0.5rem;
    display: block;
}

body.login .login input[type="text"],
body.login .login input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-outline);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    box-shadow: none;
    margin-bottom: 1.5rem;
}

body.login .login input[type="text"]:focus,
body.login .login input[type="password"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

body.login .forgetmenot {
    display: none;
}

body.login .submit {
    width: 100%;
}

body.login .button-primary {
    width: 100%;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border: none;
    padding: 1rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: none;
    text-shadow: none;
    transition: background-color 0.3s ease;
}

body.login .button-primary:hover {
    background-color: var(--color-secondary);
}

/* Custom Forgot Password Link */
.custom-forgot-pass {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    font-weight: 700;
    text-decoration: none;
}

.custom-forgot-pass:hover {
    text-decoration: underline;
}

/* Header Dropdown Form */
.header-quote-dropdown {
    position: absolute;
    top: calc(100% + 20px);
    right: 0;
    width: 380px;
    max-height: 85vh;
    overflow-y: auto;
    background-color: var(--color-inverse-surface);
    color: var(--color-inverse-on-surface);
    padding: 2rem;
    border-top: 4px solid var(--color-primary);
    border-radius: var(--radius-default);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 999;
}

.header-quote-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-quote-dropdown .dropdown-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.header-quote-dropdown .dropdown-header h3 {
    color: var(--color-inverse-on-surface);
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.header-quote-dropdown .dropdown-header p {
    color: var(--color-inverse-on-surface);
    font-size: 0.9rem;
    opacity: 0.8;
}

.header-quote-dropdown .form-input {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-inverse-on-surface);
    padding: 0.6rem 1rem;
    width: 100%;
}

.header-quote-dropdown .form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.header-quote-dropdown select option {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
}

.header-quote-dropdown .dropdown-disclaimer {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1rem;
    text-align: center;
    line-height: 1.4;
}

/* Inverse Form Inputs (Dark Backgrounds) */
.hero-service-form .form-input {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-inverse-on-surface);
    padding: 0.6rem 1rem;
    width: 100%;
}

.hero-service-form .form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.hero-service-form .form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.hero-service-form select.form-input option {
    background-color: var(--color-inverse-surface);
    color: var(--color-inverse-on-surface);
}


@media (max-width: 768px) {
    .header-quote-dropdown {
        position: fixed;
        width: 100vw;
        max-width: 100vw;
        top: 75px; /* Altura aproximada de la barra en móvil */
        left: 0;
        right: 0;
        border-radius: 0;
        padding: 1.5rem;
    }

    /* Mobile Dropdown Overrides */
    .menu-item-has-children {
        width: 100%;
    }
    
    .sub-menu {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        background-color: transparent;
        box-shadow: none !important;
        padding-left: 1.5rem;
    }
    
    .menu-item-has-children:hover .sub-menu {
        display: block;
    }
    
    .sub-menu li a {
        color: var(--color-on-surface);
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    .sub-menu li a:hover {
        background-color: transparent;
    }
}

/* =========================================
   Directory Template Styles
   ========================================= */
.directory-list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 2rem;
}

.directory-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    background-color: var(--color-inverse-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.directory-item__img {
    width: 100%;
    height: 300px;
}

.directory-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.directory-item__content {
    padding: 2rem;
    color: var(--color-inverse-on-surface);
}

.directory-item__content h2 {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.directory-item__content p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    opacity: 0.9;
}

@media (min-width: 900px) {
    .directory-item {
        grid-template-columns: 1fr 1fr;
    }
    
    .directory-item__img {
        height: 400px;
    }
    
    /* Alternate image position on desktop */
    .directory-item:nth-child(even) .directory-item__img {
        order: 2;
    }
    .directory-item:nth-child(even) .directory-item__content {
        order: 1;
    }
}

/* =========================================
   Blog Template Styles
   ========================================= */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.blog-card {
    background-color: var(--color-inverse-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.blog-card__img {
    width: 100%;
    height: 200px;
    background-color: rgba(255,255,255,0.05);
}

.blog-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card__img img {
    transform: scale(1.05);
}

.blog-card__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-card__content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card__date {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-card__title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.blog-card__title a {
    color: var(--color-inverse-on-surface);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card__title a:hover {
    color: var(--color-primary);
}

.blog-card__excerpt {
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    transition: gap 0.3s ease;
}

.blog-card__link:hover {
    gap: 0.8rem;
}

/* =========================================
   About Us Template Styles
   ========================================= */

/* Hero Section */
.about-hero {
    position: relative;
    width: 100%;
    min-height: 400px;
    background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?q=80&w=2070&auto=format&fit=crop'); /* Replace with actual house image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-hero__overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Gradient adapted to make centered text readable */
    background: linear-gradient(to bottom, rgba(10, 31, 28, 0.8) 0%, rgba(10, 31, 28, 0.8) 100%);
    z-index: 1;
}

.about-hero__content {
    position: relative;
    z-index: 2;
    padding: 4rem 1rem;
    max-width: 800px; /* Restrict width to match design */
    margin: 0 auto;
    text-align: center;
}

.about-hero__subtitle {
    display: block;
    color: #a3d9b1; /* Light mint/primary accent */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.about-hero__title {
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.about-hero__text {
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Story Section */
.about-story {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    padding: 0 1.5rem; /* Margen lateral en móviles */
}

.about-story__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
}

/* Partner Callout CTA */
.partner-callout {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background-color: rgba(26, 31, 51, 0.03); /* Subtle light background */
    border: 1px solid rgba(26, 31, 51, 0.08);
    padding: 1.5rem;
    border-radius: var(--radius-large, 12px);
    margin-top: 2rem;
}

.partner-callout__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background-color: rgba(14, 82, 56, 0.1); /* Very light version of primary green */
    color: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.partner-callout__icon .material-symbols-outlined {
    font-size: 1.75rem;
}

.partner-callout__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.partner-callout__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.partner-callout__text {
    margin: 0;
}

.partner-callout__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.partner-callout__link:hover {
    color: var(--color-secondary);
    text-decoration: underline;
    transform: translateX(4px);
}

.partner-callout__link .material-symbols-outlined {
    font-size: 1.2rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background-color: #f8f9fa; /* Very light gray */
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius-md);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card__icon-wrapper {
    width: 40px;
    height: 40px;
    background-color: #e6f0e9; /* Light green tint */
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.stat-card__icon-wrapper .material-symbols-outlined {
    color: var(--color-primary);
    font-size: 1.25rem;
}

.stat-card__number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin-bottom: 0.25rem;
    line-height: 1;
}

.stat-card__label {
    font-size: 0.85rem;
    color: var(--color-on-surface-variant);
}

@media (min-width: 992px) {
    .about-story {
        grid-template-columns: 1fr 1fr; /* Split into 2 columns */
        align-items: start;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr; /* 2x2 grid */
    }
}

/* =========================================
   Contact Us Template Styles
   ========================================= */

/* Hero Section */
.contact-hero {
    position: relative;
    width: 100%;
    min-height: 350px;
    background-color: #0d2a23; /* Very dark green matching image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-hero__content {
    position: relative;
    z-index: 2;
    padding: 4rem 1rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.contact-hero__subtitle {
    display: block;
    color: #a3d9b1; /* Light mint/primary accent */
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.contact-hero__title {
    color: #ffffff;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.contact-hero__text {
    color: #ffffff;
    font-size: 1.15rem;
    line-height: 1.6;
    opacity: 0.95;
}

/* Split Layout */
.contact-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    padding: 0 1.5rem; /* Agrega espacio a los lados en moviles */
}

/* Contact Info Column */
.contact-info__blocks {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-info__block {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.contact-info__icon {
    width: 48px;
    height: 48px;
    background-color: #e6f0e9; /* Light green tint */
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info__icon .material-symbols-outlined {
    color: var(--color-primary);
    font-size: 1.4rem;
}

.contact-info__text {
    display: flex;
    flex-direction: column;
    padding-top: 0.2rem;
}

.contact-info__label {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.contact-info__value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-on-surface);
    text-decoration: none;
    line-height: 1.3;
}

.contact-info__value[href]:hover {
    color: var(--color-primary);
}

.contact-info__subtext {
    font-size: 0.9rem;
    color: var(--color-on-surface-variant);
    margin-top: 0.25rem;
}

/* Minimal Form Card Styling */
.contact-form-minimal-card {
    background-color: var(--color-surface);
    padding: 1.5rem; /* Relleno delgado para móviles (campos más anchos) */
    border: 2px solid var(--color-primary);
    box-shadow: 4px 4px 0px rgba(10,31,28,0.2);
}

@media (min-width: 768px) {
    .contact-form-minimal-card {
        padding: 3rem; /* Relleno grueso para computadoras (como diseño original) */
    }
}

/* Minimal Form Styling (Underline Style matching Image 3) */
.contact-form-minimal .form-group {
    margin-bottom: 2rem; /* Mayor separación vertical para pantallas táctiles */
}

.contact-form-minimal .form-label {
    display: block !important;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.contact-form-minimal .form-input {
    background-color: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0.7rem !important; /* Más altura para el área táctil */
    font-size: 1.05rem !important;
    color: var(--color-on-surface) !important;
    transition: opacity 0.3s ease !important;
}

.contact-form-minimal .form-input::placeholder {
    color: #999999 !important;
    font-weight: 400 !important;
}

.contact-form-minimal .form-input:focus {
    box-shadow: none !important;
    outline: none !important;
    opacity: 0.8;
}

/* Fix select dropdown padding for minimal look */
.contact-form-minimal select.form-input {
    padding-left: 0 !important;
    cursor: pointer;
}

/* Responsive Grid */
@media (min-width: 992px) {
    .contact-split {
        grid-template-columns: 5fr 7fr; /* Left is slightly narrower than right */
        align-items: start;
    }
}

/* =========================================
   Blog Entry Typography & Styling
   ========================================= */
.entry-content p {
    margin-bottom: 1.8rem;
    line-height: 1.8;
}

.entry-content h2, 
.entry-content h3 {
    color: var(--color-primary);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.entry-content h2 {
    font-size: 2rem;
}

.entry-content h3 {
    font-size: 1.5rem;
}

.entry-content ul, 
.entry-content ol {
    margin-bottom: 1.8rem;
    padding-left: 1.5rem;
}

.entry-content li {
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

.entry-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--color-on-surface-variant);
    font-size: 1.2rem;
}

/* ==========================================================================
   PORTFOLIO A/B TESTING WIDGET
   ========================================================================== */

.ab-testing-divider {
    text-align: center;
    margin: 5rem 0;
    position: relative;
}

.ab-testing-divider__line {
    border: 0;
    height: 1px;
    background: repeating-linear-gradient(to right, transparent, transparent 10px, var(--color-outline) 10px, var(--color-outline) 20px);
    opacity: 0.5;
}

.ab-testing-divider__text {
    display: inline-block;
    background-color: var(--color-surface);
    color: var(--color-on-surface-variant);
    padding: 0 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    top: -10px;
}

.widget-gallery__wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-large, 12px);
    background-color: var(--color-surface-container-lowest);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.widget-gallery__iframe {
    width: 100%;
    min-height: 480px;
    border: none;
    overflow-x: hidden;
    display: block;
}

/* ==========================================================================
   EXTERNAL FAQ WIDGET
   ========================================================================== */

.external-faq-widget {
    width: 100%;
    min-height: 550px;
    height: 100%;
    overflow: hidden; /* Previene scroll horizontal en moviles */
}

.external-faq-widget iframe {
    min-height: 550px;
}

/* ==========================================================================
   HERO SPLIT LAYOUT (Slider + Form)
   ========================================================================== */

.hero-split-layout {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first: stacked */
    min-height: auto;
}

.hero-split-layout__slider {
    position: relative;
    width: 100%;
    min-height: 50vh;
}

.hero-split-layout__form {
    padding: 3rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface-container);
}

.hero-form-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Protect dynamic text */
.hero-split-layout__slider .hero__content {
    max-width: 90%;
    word-wrap: break-word;
}

.hero-split-layout__slider .title-display {
    line-height: 1.1;
}

/* Desktop layout */
@media (min-width: 1024px) {
    .hero-split-layout {
        grid-template-columns: 55% 45%; /* Definir columnas visuales */
        min-height: 85vh;
        align-items: center; /* Centrar verticalmente */
    }
    
    .hero-split-layout__slider {
        grid-column: 1 / -1; /* OVERLAY: Abarcar 100% del ancho */
        grid-row: 1;
        min-height: 100%;
        z-index: 1;
    }
    
    .hero-split-layout__form {
        grid-column: 2; /* Colocarse en la columna derecha */
        grid-row: 1;
        z-index: 2;
        padding: 2rem 3rem;
        background-color: transparent !important; /* Quitar fondo de la envoltura */
        pointer-events: none; /* Dejar pasar los clics hacia la imagen/flechas de abajo */
    }

    .hero-form-container {
        pointer-events: auto; /* Reactivar los clics solo para la caja blanca */
    }
    
    .hero-split-layout__slider .hero__content {
        max-width: 55%; /* Proteger texto de chocar con formulario */
    }
    
    .hero-split-layout__slider .hero__arrow {
        z-index: 3; /* Forzar que la flecha flote por encima de todo */
    }
}

/* -------------------------------------------------------------
   NEW SINGLE SERVICE CPT LAYOUT
   ------------------------------------------------------------- */
/* Hero Section */
.service-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background-color: var(--color-tertiary);
    overflow: hidden;
}

.service-hero__slider-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.service-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.service-hero__slide.active {
    opacity: 1;
}

.service-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%);
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: background 0.3s ease;
    z-index: 10;
}
.slider-btn:hover { background: var(--color-primary); }
.prev-btn { left: 20px; }
.next-btn { right: 20px; }

.service-hero__content-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    width: 100%;
    padding: 60px var(--spacing-margin-desktop);
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .service-hero__content-grid {
        grid-template-columns: 1fr;
        padding-top: 100px;
        text-align: center;
    }
}

.service-hero__title {
    font-size: 4rem;
    color: white;
    line-height: 1.1;
    margin-bottom: 10px;
}

.service-hero__highlight {
    font-size: 2.2rem;
    color: var(--color-secondary);
    margin-bottom: 20px;
}

.service-hero__desc {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
    max-width: 600px;
}
@media (max-width: 992px) { .service-hero__desc { margin: 0 auto 30px; } }

.service-hero__form-card {
    max-width: 450px;
    margin-left: auto;
}
@media (max-width: 992px) { .service-hero__form-card { margin: 0 auto; } }

.form-card__header h3 { font-size: 1.8rem; margin-bottom: 5px; }
.form-card__header p { color: var(--color-on-surface-variant); margin-bottom: 20px; }

/* Features Section */
.service-features { padding: 80px var(--spacing-margin-desktop); }
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
@media (max-width: 1200px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .benefits-grid { grid-template-columns: 1fr; } }

.benefit-card {
    padding: 30px;
    border-radius: 12px;
    text-align: left;
    transition: transform 0.3s;
}
.benefit-card:hover { transform: translateY(-5px); }
.benefit-card__icon { font-size: 40px; color: var(--color-primary); margin-bottom: 15px; }
.benefit-card__title { font-size: 1.4rem; margin-bottom: 10px; }
.benefit-card__desc { color: var(--color-on-surface-variant); font-size: 0.95rem; }

/* Materials Section */
.service-materials { padding: 80px var(--spacing-margin-desktop); }
.materials-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1000px;
    margin: 0 auto;
    gap: 60px;
    align-items: center;
}
@media (max-width: 992px) { .materials-layout { grid-template-columns: 1fr; } }

.materials__side-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    position: sticky;
    top: 120px;
}

.materials-list { display: flex; flex-direction: column; gap: 20px; }
.material-row {
    display: flex;
    gap: 25px;
    padding: 25px;
    border-radius: 12px;
    align-items: center;
}
@media (max-width: 600px) { .material-row { flex-direction: column; text-align: center; } }

.material-row__img-wrap { flex-shrink: 0; }
.material-row__img { width: 120px; height: 120px; border-radius: 8px; object-fit: cover; }
.material-row__badge { margin-bottom: 10px; }
.material-row__title { font-size: 1.6rem; margin-bottom: 5px; }
.material-row__desc { color: var(--color-on-surface-variant); margin: 0; }

/* CTA Banner */
.service-cta { position: relative; }
.service-cta__banner {
    height: 400px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.service-cta__box {
    max-width: 1000px;
    margin: -100px auto 0;
    padding: 50px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    background: var(--color-primary);
    color: white;
}
@media (max-width: 768px) {
    .service-cta__box {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        margin: -50px 20px 0;
    }
}
.service-cta__text h2 { color: white; font-size: 2.5rem; margin-bottom: 5px; }
.service-cta__text p { font-size: 1.2rem; opacity: 0.9; margin: 0; }