@charset "utf-8";

/* Variables globales unificadas */
:root {
    /* Tipografías */
    --default-font: "Funnel Sans", sans-serif;
    --heading-font: "Funnel Display", sans-serif;
    --nav-font: "Funnel Sans", sans-serif;
    /* Paleta corporativa */
    --background-color: #f8f9fa;
    /* Gris claro para profundidad */
    --default-color: #000;
    /* Color de texto principal */
    --heading-color: #1a252f;
    /* Slate oscuro para encabezados */
    --accent-color: #000;
    --accent-green: #69A82F;
    --accent-color-rgb: 0, 0, 0;
    --surface-color: #fff;
    --contrast-color: #fff;
    /* Variables de UI */
    --box-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --box-shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.1);
    --border-radius-card: 12px;
    /* Colores de navegación */
    --nav-color: #000000;
    --nav-hover-color: var(--accent-green);
    --nav-mobile-background-color: #fff;
    --nav-dropdown-background-color: #fff;
    --nav-dropdown-color: #2c3e50;
    --nav-dropdown-hover-color: var(--accent-green);
    /* Header background - Efecto vidrio (glassmorphism) */
    --header-background-color: rgba(255, 255, 255, 0.9);
    /* Comportamiento de scroll */
    scroll-behavior: smooth
}

/* Presets de color */
.light-background {
    --background-color: #f8f9fa;
    --surface-color: #fff
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
    line-height: 1.7;
    /* Mejora la legibilidad */
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s
}

a:hover {
    color: color-mix(in srgb, var(--accent-green), transparent 25%);
    text-decoration: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-family: var(--heading-font)
}

/* Accesibilidad: estilos de foco visible para navegación por teclado (WCAG 2.4.7) */
:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 2px
}


/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
    --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
    color: var(--default-color);
    background-color: var(--background-color);
    padding: clamp(1rem, 2vw, 1.5rem) 0;
    position: relative
}

.page-title h1 {
    font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);
    font-weight: 600
}

.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--fs-small, 0.875rem);
    font-weight: 400
}

.page-title .breadcrumbs ol li+li {
    padding-left: 10px
}

.page-title .breadcrumbs ol li+li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 70%)
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details {
    --section-spacing: 5rem;
    --content-spacing: 4rem;
    --subtle-border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);

    /* Energy class scale — colour ramp from A (green) to G (red).
       Tones are muted to coexist with the brand accent without clashing. */
    --energy-A: #00865a;
    --energy-B: #50a05a;
    --energy-C: #a8b85a;
    --energy-D: #d8c84a;
    --energy-E: #e6a649;
    --energy-F: #d97a3a;
    --energy-G: #b53939
}

/* =============================================================
   1. HERO — identity + factual one-liner
============================================================= */
.portfolio-details .project-hero {
    margin-bottom: var(--section-spacing)
}

.portfolio-details .project-hero .hero-content {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 3rem
}

.portfolio-details .project-hero .hero-tags {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.portfolio-details .project-hero .project-category {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 500
}

.portfolio-details .project-hero .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fff;
    vertical-align: middle;
}

.portfolio-details .project-hero .status-badge.status-in-progress {
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.portfolio-details .project-hero .project-title {
    font-size: var(--fs-h1);
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1.25rem;
    color: var(--heading-color);
    letter-spacing: -0.02em
}

.portfolio-details .project-hero .project-summary {
    font-size: var(--fs-lead);
    line-height: 1.7;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    font-weight: 400;
    margin: 0 auto;
    max-width: 640px;
}

/* --- Key facts grid (5 columns of real client data + safe derivations) --- */
.portfolio-details .project-hero .project-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: clamp(1.25rem, 2vw, 2rem);
    padding-top: 3rem;
    border-top: var(--subtle-border)
}

/* C2 — at tablet (≤768px) auto-fit packs 5 fields into too-narrow cols;
   force 2 cols. On very small phones go single-column. */
@media (max-width: 767.98px) {
    .portfolio-details .project-hero .project-meta-grid {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 2rem;
    }
}
@media (max-width: 419.98px) {
    .portfolio-details .project-hero .project-meta-grid {
        grid-template-columns: 1fr;
    }
}

.portfolio-details .project-hero .project-meta-grid .meta-column {
    text-align: center
}

.portfolio-details .project-hero .project-meta-grid .meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    margin-bottom: 0.5rem
}

.portfolio-details .project-hero .project-meta-grid .meta-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--heading-color);
    line-height: 1.3;
}

.portfolio-details .project-hero .project-meta-grid .meta-sub {
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--default-color), transparent 45%);
    margin-top: 0.25rem;
    line-height: 1.3;
}

.portfolio-details .project-hero .project-meta-grid .meta-sub:empty {
    display: none;
}


/* =============================================================
   2. PHOTO GALLERY — Before / After tabs + swiper
============================================================= */
.portfolio-details .gallery-showcase {
    margin-bottom: var(--section-spacing)
}

.portfolio-details .gallery-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1.25rem;
    background-color: color-mix(in srgb, var(--surface-color), transparent 50%);
    border-radius: 999px;
    border: var(--subtle-border);
}

.portfolio-details .gallery-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: 0;
    background: transparent;
    border-radius: 999px;
    color: color-mix(in srgb, var(--default-color), transparent 35%);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.portfolio-details .gallery-tab:hover {
    color: var(--heading-color);
}

/* Active state — different colour per phase to telegraph the renovation
   journey: Before = red (worse-state photos), After = green (post-renovation).
   Inactive state stays neutral so the change is only signalled on selection. */
.portfolio-details .gallery-tab.is-active {
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.portfolio-details .gallery-tab[data-phase="before"].is-active {
    background-color: var(--energy-G);
}

/* "After" uses the brand green so it ties visually to the rest of the site
   (logo, CTAs, section underline) rather than the muted A-class swatch. */
.portfolio-details .gallery-tab[data-phase="after"].is-active {
    background-color: var(--accent-green);
}

/* Defensive: any active tab without a phase attribute keeps a sensible look. */
.portfolio-details .gallery-tab.is-active:not([data-phase]) {
    background-color: var(--surface-color);
    color: var(--heading-color);
}

.portfolio-details .gallery-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    height: 1.35rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--default-color), transparent 88%);
    font-size: 0.72rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--default-color), transparent 25%);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.portfolio-details .gallery-tab.is-active .gallery-tab-count {
    background-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.portfolio-details .main-visual {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

/* Smooth fade between Before / After gallery tabs.
   The .is-fading class is toggled by main.js around the swiper rebuild;
   the slider eases out, the slides swap while invisible, then it eases in. */
.portfolio-details .portfolio-details-slider {
    transition: opacity 0.28s ease, transform 0.28s ease;
    opacity: 1;
    transform: scale(1);
    transform-origin: center center;
    will-change: opacity, transform;
}

.portfolio-details .portfolio-details-slider.is-fading {
    opacity: 0;
    transform: scale(0.985);
}

.portfolio-details .main-visual .swiper-wrapper {
    height: auto !important
}

.portfolio-details .main-visual .swiper-slide img {
    width: 100%;
    height: clamp(280px, 40vw + 80px, 600px);
    object-fit: cover
}

.portfolio-details .main-visual .swiper-button-next,
.portfolio-details .main-visual .swiper-button-prev {
    width: 46px;
    height: 46px;
    /* Solid dark backdrop so the arrow stays visible on photos of any tone
       (the previous semi-white background blended into bright skies). */
    background-color: rgba(20, 20, 20, 0.55);
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    transition: background-color 0.25s ease, transform 0.25s ease;
    --swiper-navigation-color: #fff;
}

.portfolio-details .main-visual .swiper-button-next::after,
.portfolio-details .main-visual .swiper-button-prev::after {
    font-family: 'bootstrap-icons';
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.portfolio-details .main-visual .swiper-button-prev::after {
    content: '\f284';
}

.portfolio-details .main-visual .swiper-button-next::after {
    content: '\f285';
}

.portfolio-details .main-visual .swiper-button-next:hover,
.portfolio-details .main-visual .swiper-button-prev:hover {
    background-color: var(--accent-color);
    color: #fff;
    transform: scale(1.12);
}

.portfolio-details .main-visual .swiper-button-prev { left: 30px }
.portfolio-details .main-visual .swiper-button-next { right: 30px }

.portfolio-details .main-visual .swiper-pagination {
    bottom: 12px;
}

.portfolio-details .main-visual .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 0.6;
}

.portfolio-details .main-visual .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
    opacity: 1;
}

.portfolio-details .gallery-note {
    margin-top: 1rem;
    font-size: var(--fs-small);
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    text-align: center;
}


/* =============================================================
   3. ENERGY CLASS — Before vs After (the centerpiece)
============================================================= */
.portfolio-details .energy-ratings-showcase {
    padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
    background-color: color-mix(in srgb, var(--surface-color), transparent 50%);
    margin: var(--section-spacing) 0;
    border-radius: 8px;
}

.portfolio-details .energy-ratings-showcase[hidden] { display: none }

.portfolio-details .energy-ratings-showcase .ratings-header {
    text-align: center;
    margin-bottom: clamp(2rem, 3vw, 2.75rem);
}

.portfolio-details .energy-ratings-showcase .ratings-header h3 {
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
    font-weight: 300;
    margin-bottom: 0.75rem;
    color: var(--heading-color);
}

.portfolio-details .energy-ratings-showcase .ratings-header p {
    font-size: var(--fs-body);
    color: color-mix(in srgb, var(--default-color), transparent 25%);
    line-height: 1.7;
    max-width: 620px;
    margin: 0 auto;
}

.portfolio-details .energy-ratings-showcase .ratings-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 820px;
    margin: 0 auto;
}

/* --- One rating card per metric (envelope / global / co2) --- */
.portfolio-details .rating-card {
    padding: clamp(1.25rem, 2vw, 1.75rem);
    background-color: var(--surface-color);
    border-radius: 10px;
    border: var(--subtle-border);
}

.portfolio-details .rating-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.portfolio-details .rating-card-title {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--heading-color);
}

.portfolio-details .rating-card-jump {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
    white-space: nowrap;
}

.portfolio-details .rating-card-jump[data-direction="down"] {
    background-color: color-mix(in srgb, var(--energy-G), transparent 85%);
    color: var(--energy-G);
}

.portfolio-details .rating-card-jump[data-direction="flat"] {
    background-color: color-mix(in srgb, var(--default-color), transparent 88%);
    color: color-mix(in srgb, var(--default-color), transparent 25%);
}

/* --- A→G colour-coded scale with track + markers ----------- */
.portfolio-details .rating-scale {
    position: relative;
    margin: 0 0 1.25rem;
    padding-top: 1.75rem; /* room for "before" marker above the track */
    padding-bottom: 1.75rem; /* room for "after" marker below */
}

.portfolio-details .rating-scale-track {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
}

.portfolio-details .rating-scale-step {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.portfolio-details .rating-scale-step[data-class="A"] { background-color: var(--energy-A) }
.portfolio-details .rating-scale-step[data-class="B"] { background-color: var(--energy-B) }
.portfolio-details .rating-scale-step[data-class="C"] { background-color: var(--energy-C) }
.portfolio-details .rating-scale-step[data-class="D"] { background-color: var(--energy-D) }
.portfolio-details .rating-scale-step[data-class="E"] { background-color: var(--energy-E) }
.portfolio-details .rating-scale-step[data-class="F"] { background-color: var(--energy-F) }
.portfolio-details .rating-scale-step[data-class="G"] { background-color: var(--energy-G) }

.portfolio-details .rating-scale-markers {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.75rem;
    height: 26px;
    pointer-events: none;
}

.portfolio-details .rating-marker {
    /* --position is set inline (0..6) by the JS loader. */
    position: absolute;
    top: 50%;
    left: calc((var(--position, 0) + 0.5) * (100% / 7));
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    background: #fff;
    color: var(--heading-color);
    box-shadow: 0 0 0 2px var(--heading-color), 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: left 0.4s ease-out;
}

.portfolio-details .rating-marker.rating-marker-before {
    top: 0;
    background: #fff;
    color: color-mix(in srgb, var(--default-color), transparent 25%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--default-color), transparent 55%), 0 1px 3px rgba(0,0,0,0.15);
}

.portfolio-details .rating-marker.rating-marker-before::after,
.portfolio-details .rating-marker.rating-marker-after::after {
    content: attr(aria-label);
    position: absolute;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    white-space: nowrap;
}

.portfolio-details .rating-marker.rating-marker-before::after {
    bottom: calc(100% + 4px);
}

.portfolio-details .rating-marker.rating-marker-after {
    top: 100%;
    background: var(--accent-color);
    color: #fff;
    box-shadow: 0 0 0 2px var(--accent-color), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.portfolio-details .rating-marker.rating-marker-after::after {
    top: calc(100% + 4px);
}

/* --- Before / After pills under the scale ----------------- */
.portfolio-details .rating-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.portfolio-details .rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: var(--subtle-border);
    background-color: color-mix(in srgb, var(--surface-color), transparent 30%);
}

.portfolio-details .rating-pill-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--default-color), transparent 45%);
}

/* Class letter chip — colour-coded to match the A→G scale above so the
   reader's eye can connect "After: B" to the B cell on the bar without
   having to count positions. */
.portfolio-details .rating-pill-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.75rem;
    padding: 0 0.55rem;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    color: #fff;
    background-color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.portfolio-details .rating-pill-value[data-class="A"] { background-color: var(--energy-A) }
.portfolio-details .rating-pill-value[data-class="B"] { background-color: var(--energy-B) }
.portfolio-details .rating-pill-value[data-class="C"] { background-color: var(--energy-C) }
.portfolio-details .rating-pill-value[data-class="D"] { background-color: var(--energy-D) }
.portfolio-details .rating-pill-value[data-class="E"] { background-color: var(--energy-E) }
.portfolio-details .rating-pill-value[data-class="F"] { background-color: var(--energy-F) }
.portfolio-details .rating-pill-value[data-class="G"] { background-color: var(--energy-G) }

/* C and D backgrounds are light enough that white text fails contrast.
   Switch to dark text on those two specifically so the letter stays
   legible. Applied to both the scale steps and the pill values to keep
   the visual language consistent. */
.portfolio-details .rating-scale-step[data-class="C"],
.portfolio-details .rating-scale-step[data-class="D"],
.portfolio-details .rating-pill-value[data-class="C"],
.portfolio-details .rating-pill-value[data-class="D"] {
    color: rgba(0, 0, 0, 0.82);
}

.portfolio-details .rating-pill-arrow {
    color: color-mix(in srgb, var(--default-color), transparent 55%);
    font-size: 1.1rem;
}

.portfolio-details .ratings-note {
    margin: 1.75rem auto 0;
    max-width: 620px;
    text-align: center;
    font-size: var(--fs-small);
    color: color-mix(in srgb, var(--default-color), transparent 35%);
    font-style: italic;
}

@media (max-width: 575.98px) {
    .portfolio-details .rating-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* =============================================================
   4. FOOTER
============================================================= */
.portfolio-details .project-footer {
    padding-top: 3rem;
    border-top: var(--subtle-border)
}

.portfolio-details .project-footer .footer-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.portfolio-details .project-footer .footer-navigation .nav-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.3s ease
}

.portfolio-details .project-footer .footer-navigation .nav-link.all-projects {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-radius: 25px;
    color: var(--heading-color);
    font-weight: 500;
    transition: all 0.3s ease
}

.portfolio-details .project-footer .footer-navigation .nav-link.all-projects i {
    font-size: 1rem
}

.portfolio-details .project-footer .footer-navigation .nav-link.all-projects:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
    transform: translatey(-3px)
}




/*--------------------------------------------------------------
# Terms Of Service Section
--------------------------------------------------------------*/
.terms-of-service .tos-header {
    margin-bottom: clamp(2rem, 4vw, 3.75rem)
}

.terms-of-service .tos-header .last-updated {
    display: inline-block;
    padding: 8px 20px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-radius: 30px;
    color: var(--accent-color);
    font-size: var(--fs-small);
    margin-bottom: 20px
}

.terms-of-service .tos-header h2 {
    font-size: var(--fs-h2);
    margin-bottom: 15px
}

.terms-of-service .tos-header p {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-size: var(--fs-lead);
    max-width: min(700px, 92vw);
    margin: 0 auto
}

.terms-of-service .tos-content .content-section {
    margin-bottom: clamp(2rem, 4vw, 3.125rem);
    scroll-margin-top: 100px
}

.terms-of-service .tos-content .content-section:last-child {
    margin-bottom: 0
}

.terms-of-service .tos-content .content-section h3 {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.8rem);
    margin-bottom: 20px;
    color: var(--heading-color)
}

.terms-of-service .tos-content .content-section p {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    line-height: 1.7;
    margin-bottom: 20px
}

.terms-of-service .tos-content .content-section p:last-child {
    margin-bottom: 0
}

.terms-of-service .tos-content .content-section .info-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-radius: 15px;
    margin-top: 20px
}

.terms-of-service .tos-content .content-section .info-box i {
    font-size: 1.5rem;
    color: var(--accent-color);
    flex-shrink: 0
}

.terms-of-service .tos-content .content-section .info-box p {
    margin: 0;
    font-size: 0.95rem
}

.terms-of-service .tos-content .content-section .list-items {
    list-style: none;
    padding: 0;
    margin: 20px 0
}

.terms-of-service .tos-content .content-section .list-items li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: color-mix(in srgb, var(--default-color), transparent 20%)
}

.terms-of-service .tos-content .content-section .list-items li:last-child {
    margin-bottom: 0
}

.terms-of-service .tos-content .content-section .list-items li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-color)
}

.terms-of-service .tos-content .content-section .alert-box {
    display: flex;
    gap: 20px;
    padding: 25px;
    background-color: var(--surface-color);
    border-radius: 15px;
    border-left: 4px solid var(--accent-color);
    margin-top: 20px
}

.terms-of-service .tos-content .content-section .alert-box i {
    font-size: 2rem;
    color: var(--accent-color);
    flex-shrink: 0
}

.terms-of-service .tos-content .content-section .alert-box .alert-content h5 {
    font-size: 1.1rem;
    margin-bottom: 8px
}

.terms-of-service .tos-content .content-section .alert-box .alert-content p {
    margin: 0;
    font-size: 0.95rem
}

.terms-of-service .tos-content .content-section .prohibited-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 20px;
    margin-top: 20px
}


.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background-color: var(--surface-color);
    border-radius: 12px
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item i {
    color: #dc3545;
    font-size: 1.2rem
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item span {
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--default-color), transparent 20%)
}

.terms-of-service .tos-content .content-section .disclaimer-box {
    background-color: var(--surface-color);
    padding: 25px;
    border-radius: 15px;
    margin-top: 20px
}

.terms-of-service .tos-content .content-section .disclaimer-box p {
    margin-bottom: 15px;
    font-weight: 500
}

.terms-of-service .tos-content .content-section .disclaimer-box ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    font-size: 0.95rem
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li:last-child {
    margin-bottom: 0
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li::before {
    content: "•";
    position: absolute;
    left: 8px;
    color: var(--accent-color)
}

.terms-of-service .tos-content .content-section .notice-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-radius: 15px;
    margin-top: 20px
}

.terms-of-service .tos-content .content-section .notice-box i {
    font-size: 1.5rem;
    color: var(--accent-color);
    flex-shrink: 0
}

.terms-of-service .tos-content .content-section .notice-box p {
    margin: 0;
    font-size: 0.95rem
}

.terms-of-service .tos-contact {
    margin-top: 60px
}

.terms-of-service .tos-contact .contact-box {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 30px
}


.terms-of-service .tos-contact .contact-box .contact-icon {
    width: 60px;
    height: 60px;
    background-color: var(--accent-color);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.terms-of-service .tos-contact .contact-box .contact-icon i {
    font-size: 1.8rem;
    color: var(--contrast-color)
}

.terms-of-service .tos-contact .contact-box .contact-content {
    flex: 1
}

.terms-of-service .tos-contact .contact-box .contact-content h4 {
    font-size: 1.4rem;
    margin-bottom: 8px
}

.terms-of-service .tos-contact .contact-box .contact-content p {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin-bottom: 15px
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link:hover {
    transform: translatey(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
}

@media print {
    .terms-of-service .tos-contact {
        display: none
    }

    .terms-of-service .content-section {
        page-break-inside: avoid
    }
}

/*--------------------------------------------------------------
# Privacy 2 Section
--------------------------------------------------------------*/
.privacy-2 {
    font-size: var(--fs-body);
    line-height: 1.7
}

.privacy-2 .privacy-header {
    margin-bottom: clamp(2rem, 4vw, 3.75rem);
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem)
}

.privacy-2 .privacy-header .header-content {
    max-width: min(800px, 94vw);
    margin: 0 auto
}

.privacy-2 .privacy-header .header-content .last-updated {
    font-size: var(--fs-small);
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    margin-bottom: 20px
}

.privacy-2 .privacy-header .header-content h1 {
    font-size: var(--fs-h1);
    color: var(--heading-color);
    margin-bottom: 20px;
    font-weight: 600
}

.privacy-2 .privacy-header .header-content .intro-text {
    font-size: var(--fs-lead);
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    line-height: 1.6
}

.privacy-2 .privacy-content {
    max-width: min(800px, 94vw);
    margin: 0 auto clamp(2rem, 4vw, 3.75rem)
}

.privacy-2 .privacy-content .content-section {
    margin-bottom: clamp(2rem, 4vw, 3.125rem)
}

.privacy-2 .privacy-content .content-section:last-child {
    margin-bottom: 0
}

.privacy-2 .privacy-content .content-section h2 {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.8rem);
    color: var(--heading-color);
    margin-bottom: 25px;
    font-weight: 600
}

.privacy-2 .privacy-content .content-section h3 {
    font-size: clamp(1.125rem, 1.2vw + 0.5rem, 1.4rem);
    color: var(--heading-color);
    margin: 30px 0 20px;
    font-weight: 500
}

.privacy-2 .privacy-content .content-section p {
    margin-bottom: 20px
}

.privacy-2 .privacy-content .content-section p:last-child {
    margin-bottom: 0
}

.privacy-2 .privacy-content .content-section ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px
}

.privacy-2 .privacy-content .content-section ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px
}

.privacy-2 .privacy-content .content-section ul li:last-child {
    margin-bottom: 0
}

.privacy-2 .privacy-content .content-section ul li::before {
    content: "•";
    position: absolute;
    left: 8px;
    color: var(--accent-color)
}

.privacy-2 .privacy-contact {
    max-width: min(800px, 94vw);
    margin: 0 auto;
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%)
}

.privacy-2 .privacy-contact h2 {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.8rem);
    color: var(--heading-color);
    margin-bottom: 20px;
    font-weight: 600
}

.privacy-2 .privacy-contact p {
    margin-bottom: 20px
}

.privacy-2 .privacy-contact .contact-details {
    background-color: var(--surface-color);
    padding: 25px;
    border-radius: 10px
}

.privacy-2 .privacy-contact .contact-details p {
    margin-bottom: 10px
}

.privacy-2 .privacy-contact .contact-details p:last-child {
    margin-bottom: 0
}

.privacy-2 .privacy-contact .contact-details p strong {
    color: var(--heading-color);
    font-weight: 600
}

@media print {
    .privacy-2 {
        font-size: 12pt;
        line-height: 1.5
    }

    .privacy-2 .privacy-header {
        text-align: left;
        border-bottom: 1pt solid #000;
        padding-bottom: 20pt;
        margin-bottom: 30pt
    }

    .privacy-2 h1 {
        font-size: 24pt
    }

    .privacy-2 h2 {
        font-size: 18pt;
        page-break-after: avoid
    }

    .privacy-2 h3 {
        font-size: 14pt;
        page-break-after: avoid
    }

    .privacy-2 p,
    .privacy-2 ul {
        page-break-inside: avoid
    }

    .privacy-2 .contact-details {
        border: 1pt solid #000;
        padding: 15pt
    }
}







/*--------------------------------------------------------------
# Universal Responsiveness & Giant Monitor Overrides
--------------------------------------------------------------*/
/* Large Screens (Laptop/Desktop) - Standard Bootstrap adjustments usually suffice up to 1400px, 
   but we ensure container width maximizes available space */

/* Extra Large Screens (Large Desktop/Monitors) */

/* Giant / Ultra-Wide Monitors (4K+) */

/* Mobile Refinements */


/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters-wrapper {
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 5rem)
}

.portfolio .portfolio-filters {
    display: inline-flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    flex-wrap: wrap;
    justify-content: center
}

.portfolio .portfolio-filters::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 1px;
    background: color-mix(in srgb, var(--default-color), transparent 90%)
}

.portfolio .portfolio-filters li {
    position: relative;
    cursor: pointer;
    padding: 12px 0;
    font-size: var(--fs-small);
    font-weight: 400;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    transition: all 0.4s ease-out;
    letter-spacing: 0.5px;
    min-height: 44px;
    display: inline-flex;
    align-items: center
}

.portfolio .portfolio-filters li::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: all 0.4s ease-out;
    transform: translatex(-50%)
}

.portfolio .portfolio-filters li:hover {
    color: var(--default-color)
}

.portfolio .portfolio-filters li.filter-active {
    color: var(--default-color)
}

.portfolio .portfolio-filters li.filter-active::after {
    width: 100%
}


.portfolio .portfolio-card {
    background: var(--surface-color);
    transition: all 0.4s ease-out;
    overflow: hidden
}

.portfolio .portfolio-card:hover {
    transform: translatey(-8px)
}

.portfolio .portfolio-card:hover .image-container img {
    transform: scale(1.3)
}

.portfolio .portfolio-card:hover .overlay {
    opacity: 1;
    visibility: visible
}

.portfolio .portfolio-card:hover .content h3 {
    color: var(--accent-color)
}

.portfolio .image-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    border-radius: 8px
}

.portfolio .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease-out
}

/* Status badge — shown on portfolio cards for in-progress projects. */
.portfolio .image-container .status-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
}

.portfolio .image-container .status-badge.status-in-progress {
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.portfolio .image-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--accent-color), transparent 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-out;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

.portfolio .image-container .overlay-content {
    display: flex;
    gap: 20px;
    transform: translatey(20px);
    transition: transform 0.4s ease-out 0.1s
}

.portfolio .portfolio-card:hover .image-container .overlay-content {
    transform: translatey(0)
}

.portfolio .image-container .overlay-content a {
    width: 50px;
    height: 50px;
    min-width: 44px;
    min-height: 44px;
    background: var(--surface-color);
    color: var(--heading-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    font-size: 18px
}

.portfolio .image-container .overlay-content a:hover {
    background: var(--accent-color);
    color: #fff;
    transform: scale(1.2)
}

.portfolio .content {
    padding: 30px 0;
    text-align: center
}

.portfolio .content h3 {
    font-size: clamp(1rem, 0.8vw + 0.875rem, 1.25rem);
    font-weight: 400;
    margin-bottom: 8px;
    transition: color 0.3s ease;
    letter-spacing: 0.5px
}

.portfolio .content p {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-size: var(--fs-small);
    line-height: 1.6;
    margin: 0;
    letter-spacing: 0.3px
}

/* Portfolio usa Bootstrap col-lg-4 col-md-6; no se necesita CSS Grid manual */

/*--------------------------------------------------------------
# Service Details Page Custom Styles
--------------------------------------------------------------*/
.service-details-page .page-title {
    background-size: cover;
    background-position: center;
    /* fixed no funciona bien en iOS; usar scroll como default y
       mantener el efecto en pantallas grandes si el usuario tiene hover */
    background-attachment: scroll;
    color: #fff;
    padding: clamp(3rem, 6vw + 1rem, 7.5rem) 0;
    position: relative
}

@media (hover: hover) and (min-width: 992px) {
    .service-details-page .page-title {
        background-attachment: fixed;
    }
}

.service-details-page .page-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6)
}

.service-details-page .page-title .container {
    position: relative;
    z-index: 2
}

.service-details-page .page-title h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px
}

.service-details-page .page-title p {
    font-size: var(--fs-lead);
    color: rgba(255, 255, 255, 0.9);
    max-width: min(600px, 92vw)
}

.service-details-page .breadcrumbs ol {
    margin-top: 20px
}

.service-details-page .breadcrumbs ol li,
.service-details-page .breadcrumbs ol li a {
    color: rgba(255, 255, 255, 0.8)
}

.service-details-page .breadcrumbs ol li+li::before {
    color: rgba(255, 255, 255, 0.6)
}

/* Service Cards */
/* Large Icon */
/* Infrared Thermography Apps List */
/* CTA Section */
#contact-cta {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/parallax-bg.webp) center center no-repeat;
    background-size: cover;
    background-attachment: scroll;
    padding: clamp(2.5rem, 5vw, 5rem) 0
}

@media (hover: hover) and (min-width: 992px) {
    #contact-cta { background-attachment: fixed; }
}

/* Corrige background-attachment: fixed para iOS/móviles */

/* PHP Email Form Messages (needed on inner pages that don't load main.css)
------------------------------*/
.php-email-form .error-message {
    display: none;
}

.php-email-form .sent-message {
    display: none;
}

.php-email-form .loading {
    display: none;
}


/*--------------------------------------------------------------
# Mobile polish — portfolio + inner pages (Tier 2: C1, C3, C5, C8)
#   C1 — portfolio filter chips wrap tighter at <576px
#   C3 — rating markers / labels shrink at <576px
#   C5 — gallery swiper navigation moves closer to edges at <576px
#   C8 — breadcrumbs reduce size at <576px
--------------------------------------------------------------*/
@media (max-width: 575.98px) {

    /* C8 — Breadcrumbs */
    .page-title .breadcrumbs ol {
        font-size: 0.8rem;
    }
    .page-title .breadcrumbs ol li + li {
        padding-left: 8px;
    }
    .page-title .breadcrumbs ol li + li::before {
        padding-right: 8px;
    }

    /* C1 — Portfolio filters */
    .portfolio .portfolio-filters {
        gap: 0.5rem 1rem;
        font-size: 0.875rem;
        padding-bottom: 0.5rem;
    }
    .portfolio .portfolio-filters::after {
        display: none;
    }
    .portfolio .portfolio-filters li {
        padding: 8px 0;
        min-height: 40px;
    }

    /* C3 — Rating markers shrink and labels stay on one line */
    .portfolio-details .rating-marker {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }
    .portfolio-details .rating-marker.rating-marker-before::after,
    .portfolio-details .rating-marker.rating-marker-after::after {
        font-size: 0.55rem;
        letter-spacing: 0.02em;
    }

    /* C5 — Gallery swiper buttons closer to slide edges, smaller hit area */
    .portfolio-details .main-visual .swiper-button-prev {
        left: 10px;
        width: 38px;
        height: 38px;
    }
    .portfolio-details .main-visual .swiper-button-next {
        right: 10px;
        width: 38px;
        height: 38px;
    }
    .portfolio-details .main-visual .swiper-button-next::after,
    .portfolio-details .main-visual .swiper-button-prev::after {
        font-size: 0.9rem;
    }
}