/* ==========================================================================
   PROHOMES - MASTER FIXES
   Version: 2.0.0
   Priority: This file loads LAST to override all other styles
   ========================================================================== */

/* ==========================================================================
   0. HEADER NAVIGATION - CUSTOM STYLING
   Blocksy manages ALL colors - we ONLY add visual effects
   ========================================================================== */

/* 
   HOVER: Bold effect (text-shadow) - let Blocksy handle color
*/
.ct-header [data-menu]>li>a:hover,
.ct-header nav li>a:hover,
nav[class*=menu] li>a:hover,
nav[class*=menu] li>.ct-menu-link:hover,
header .menu-item>a:hover {
    text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor !important;
}

/* 
   ACTIVE: Underline - let Blocksy handle color
*/
.ct-header [data-menu]>li.current-menu-item>a,
.ct-header [data-menu]>li.current_page_item>a,
nav[class*=menu] li[class*=current-menu-]>.ct-menu-link,
nav[class*=menu] li.current-menu-item>a,
header .menu-item.current-menu-item>a {
    text-decoration: underline !important;
    text-underline-offset: 5px !important;
    text-decoration-thickness: 2px !important;
}

/* ACTIVE + HOVER: Keep both effects */
.ct-header [data-menu]>li.current-menu-item>a:hover,
.ct-header [data-menu]>li.current_page_item>a:hover,
nav[class*=menu] li[class*=current-menu-]>.ct-menu-link:hover,
nav[class*=menu] li.current-menu-item>a:hover,
header .menu-item.current-menu-item>a:hover {
    text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   1. FIX DOUBLE ARROWS ON ALL LINKS
   ========================================================================== */

/* Remove ALL pseudo-element arrows - the text already contains → */
.ph-btn-link::after,
.ph-btn-link::before,
.ph-btn-link a::after,
.ph-btn-link a::before,
p.ph-btn-link::after,
p.ph-btn-link::before,
.wp-block-button__link::after,
.wp-block-button__link::before,
a[href*="→"]::after,
a[href*="→"]::before {
    content: none !important;
    display: none !important;
}

/* Blocksy may add icons - remove them */
[class*="ct-"] a::after,
[class*="ct-"] a::before {
    content: none !important;
}

/* Global underline offset for all underlined links */
a[style*="text-decoration: underline"],
a[style*="text-decoration:underline"],
[data-link=type-2] .entry-content a,
.entry-content p>a,
.entry-content a {
    text-underline-offset: 4px !important;
}

/* ==========================================================================
   2. HERO SECTION - CENTERING
   ========================================================================== */

/* Force hero content to be centered */
.ph-hero,
.ph-hero-cover {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ph-hero .wp-block-cover__inner-container,
.ph-hero-cover .wp-block-cover__inner-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.ph-hero .wp-block-group,
.ph-hero-cover .wp-block-group {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Hero text alignment */
.ph-hero h1,
.ph-hero-cover h1,
.ph-hero .wp-block-heading,
.ph-hero-cover .wp-block-heading {
    text-align: center !important;
    width: 100% !important;
}

.ph-hero p,
.ph-hero-cover p {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hero buttons centering */
.ph-hero .wp-block-buttons,
.ph-hero-cover .wp-block-buttons,
.ph-hero-buttons {
    justify-content: center !important;
    width: 100% !important;
}

/* ==========================================================================
   HERO LOGO - FORCE CENTER ALIGNMENT
   ========================================================================== */

/* Target ALL image blocks in hero to center */
.ph-hero .wp-block-image,
.ph-hero-cover .wp-block-image,
.ph-hero-cover .wp-block-cover__inner-container .wp-block-image {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
}

.ph-hero .wp-block-image figure,
.ph-hero-cover .wp-block-image figure,
.ph-hero-logo,
.ph-hero-logo figure {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.ph-hero .wp-block-image img,
.ph-hero-cover .wp-block-image img,
.ph-hero-logo img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* ==========================================================================
   HERO SEPARATOR - LIMIT WIDTH
   Note: Specific width and thickness are controlled further down
   ========================================================================== */

.ph-hero .wp-block-separator,
.ph-hero-cover .wp-block-separator,
.ph-hero hr,
.ph-hero-cover hr {
    /* Width and opacity controlled by more specific rule below */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* If separator has inline width, respect it but center it */
.ph-hero .wp-block-separator[style*="width"],
.ph-hero-cover .wp-block-separator[style*="width"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   3. COVER BLOCKS - CENTER LINKS
   ========================================================================== */

/* All cover block content should be centered */
.wp-block-cover .wp-block-cover__inner-container {
    text-align: center;
}

/* Force center alignment for paragraphs with links in cover blocks */
.wp-block-cover p.ph-btn-link,
.wp-block-cover .ph-btn-link,
.wp-block-cover p.has-text-align-center {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

.wp-block-cover .ph-btn-link a,
.wp-block-cover p.has-text-align-center a {
    display: inline-block !important;
}

/* Limit text width in cover blocks with centered content groups (excluding hero) */
.wp-block-cover:not(.ph-hero):not(.ph-hero-cover) .wp-block-group.is-layout-constrained {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Add underline offset to all underlined links in cover blocks */
.wp-block-cover a[style*="text-decoration"],
.wp-block-cover p a,
.ph-hero a,
.ph-hero-cover a {
    text-underline-offset: 4px !important;
}

/* ==========================================================================
   4. ABOUT SECTION - VERTICAL CENTERING
   ========================================================================== */

.ph-about-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}

.ph-about-section>.wp-block-column:last-child,
.ph-about-section .wp-block-column:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 4rem 3rem !important;
}

/* Constrain text width in text columns for better readability */
.ph-about-section .wp-block-column:nth-child(2)>* {
    max-width: 650px;
}

/* Push left-aligned and center-aligned text to the right */
.ph-about-section .wp-block-column:nth-child(2)>*:not(.has-text-align-right):not([style*="text-align:right"]) {
    margin-left: 4rem;
    /* Push text to the right */
}

/* Right-aligned elements align to the right edge of the constrained width */
.ph-about-section .wp-block-column:nth-child(2)>.has-text-align-right,
.ph-about-section .wp-block-column:nth-child(2)>[style*="text-align:right"] {
    margin-left: auto;
    /* Align to right edge */
}

/* General rule: constrain text in columns with vertically-centered content */
.wp-block-column.is-vertically-aligned-center>*:not(.wp-block-image):not(figure) {
    max-width: 650px;
}

/* Push left/center aligned text to the right */
.wp-block-column.is-vertically-aligned-center>*:not(.wp-block-image):not(figure):not(.has-text-align-right):not([style*="text-align:right"]) {
    margin-left: 4rem;
}

/* Right-aligned elements align to the right edge */
.wp-block-column.is-vertically-aligned-center>.has-text-align-right,
.wp-block-column.is-vertically-aligned-center>[style*="text-align:right"] {
    margin-left: auto;
}

/* About section link styling - color controlled by WordPress editor */
.ph-about-section .ph-btn-link a {
    text-decoration: underline !important;
}

/* ==========================================================================
   MOBILE SPLIT SECTIONS (About, Projects, etc.)
   ========================================================================== */
@media (max-width: 781px) {

    /* Stack columns */
    .ph-about-section {
        display: flex !important;
        flex-direction: column-reverse !important;
        grid-template-columns: 1fr !important;
    }

    /* Reset paddings and centering */
    .ph-about-section>.wp-block-column:last-child,
    .ph-about-section .wp-block-column:nth-child(2),
    .wp-block-column.is-vertically-aligned-center {
        padding: 3rem 2rem !important;
        align-items: center !important;
        text-align: center !important;
        min-height: auto !important;
    }

    /* Reset width constraints */
    .ph-about-section .wp-block-column:nth-child(2)>*,
    .wp-block-column.is-vertically-aligned-center>* {
        max-width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Reset desktop indentations */
    .ph-about-section .wp-block-column:nth-child(2)>*:not(.has-text-align-right):not([style*="text-align:right"]),
    .wp-block-column.is-vertically-aligned-center>*:not(.wp-block-image):not(figure):not(.has-text-align-right):not([style*="text-align:right"]) {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Fix Right-aligned elements on mobile (center them) */
    .ph-about-section .wp-block-column:nth-child(2)>.has-text-align-right,
    .wp-block-column.is-vertically-aligned-center>.has-text-align-right,
    .wp-block-column.is-vertically-aligned-center>[style*="text-align:right"] {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    /* Specifically fix the CTA link margins */
    .ph-btn-link[style*="margin"] {
        margin-top: 2rem !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* ==========================================================================
   5. SOLUCIONES TEASER - VERTICAL CENTERING
   ========================================================================== */

/* Vertical centering via flexbox - DO NOT override min-height from block */
.ph-soluciones-teaser {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure inner content group doesn't break flexbox centering */
.ph-soluciones-teaser>.wp-block-group {
    text-align: center !important;
    flex-grow: 0 !important;
    /* Don't stretch to fill container */
    flex-shrink: 0 !important;
    max-width: 800px !important;
    /* Limit text width for better readability */
    width: 100% !important;
}

.ph-soluciones-teaser p,
.ph-soluciones-teaser h2 {
    text-align: center !important;
}

.ph-soluciones-teaser .ph-btn-link {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

.ph-soluciones-teaser .ph-btn-link a {
    display: inline-block !important;
}

/* ==========================================================================
   6. TESTIMONIALS SECTION - INTERACTIVE SLIDER
   ========================================================================== */

.ph-testimonials-section {
    overflow: hidden;
}

.ph-testimonials-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1.5rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    /* scroll-behavior: smooth !important;  <-- REMOVED to allow for instant jumps */
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem 0 2rem 0 !important;
    cursor: grab !important;
}

.ph-testimonials-slider:active {
    cursor: grabbing !important;
}

.ph-testimonial-card {
    flex: 0 0 320px !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 0 !important;
    padding: 2rem !important;
    margin-right: 0 !important;
    /* Spacing handled by gap in parent */
}

.ph-testimonial-card p {
    color: #ffffff !important;
}

/* Scrollbar styling */
.ph-testimonials-slider::-webkit-scrollbar {
    height: 6px;
}

.ph-testimonials-slider::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.ph-testimonials-slider::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
}

.ph-testimonials-slider::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Testimonials dots - MUST BE VISIBLE AND CLICKABLE */
.ph-testimonials-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 2rem !important;
    padding: 1rem 0 !important;
}

.ph-testimonials-dot {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.ph-testimonials-dot:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    transform: scale(1.3) !important;
    border-color: #ffffff !important;
}

.ph-testimonials-dot.active {
    background: #ffffff !important;
    transform: scale(1.3) !important;
    border-color: #ffffff !important;
}

/* ==========================================================================
   7. STATS SECTION
   ========================================================================== */

.ph-stats-section {
    padding: 4rem 2rem !important;
}

.ph-stats-section .wp-block-columns {
    justify-content: center;
}

.ph-counter-item {
    text-align: center !important;
}

/* Don't override color - let editor settings take precedence */
.ph-counter-number {
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    /* Color is set in block editor - removed hardcoded color */
}

@media (max-width: 781px) {

    /* Target the container wrapping the two column groups */
    .ph-stats-section>.wp-block-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
        align-items: start !important;
    }

    /* Flatten the column groups so their children become grid items */
    .ph-stats-section .wp-block-columns {
        display: contents !important;
    }

    .ph-stats-section .wp-block-column {
        flex-basis: auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Reduce padding on mobile for better fit */
    .ph-stats-section .ph-counter-item {
        padding: 0 !important;
    }
}

/* ==========================================================================
   8. EQUIPO TEASER - BOTTOM RIGHT POSITIONING
   ========================================================================== */

.ph-equipo-teaser {
    min-height: 90vh !important;
    height: auto !important;
}

/* Also target the cover block itself */
.wp-block-cover.ph-equipo-teaser {
    min-height: 90vh !important;
}

/* Override any inline styles */
.ph-equipo-teaser[style*="min-height"] {
    min-height: 90vh !important;
}

/* Position content group at BOTTOM RIGHT quadrant */
.ph-equipo-teaser .wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    /* Push to bottom */
    align-items: flex-end !important;
    /* Push the whole group to the right side */
    height: 100% !important;
    min-height: inherit !important;
    padding-bottom: 4rem !important;
    padding-right: 4rem !important;
}

/* Mixed Alignment: Text elements LEFT, Link RIGHT (Desktop) */
.ph-equipo-teaser .wp-block-group h2,
.ph-equipo-teaser .wp-block-group p:not(.ph-btn-link) {
    text-align: left !important;
}

.ph-equipo-teaser .ph-btn-link {
    text-align: right !important;
    width: 100% !important;
    /* Ensure link can be right-aligned within the container */
}

/* WordPress classes (has-text-align-left/right) now control alignment for headings, paragraphs and the CTA link */

/* ==========================================================================
   9. CTA SECTION
   ========================================================================== */

.ph-cta-section {
    text-align: center !important;
}

.ph-cta-section h2,
.ph-cta-section p {
    text-align: center !important;
}

.ph-cta-section .ph-btn-link {
    text-align: center !important;
    display: block !important;
}

.ph-cta-section .ph-btn-link a {
    display: inline-block !important;
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
}

/* ==========================================================================
   9b. CTA METODO SECTION (Blue CTA with small separator)
   ========================================================================== */

.ph-cta-metodo {
    text-align: center !important;
}

.ph-cta-metodo .wp-block-separator,
.ph-cta-metodo hr {
    width: 60px !important;
    max-width: 60px !important;
    min-width: 60px !important;
    height: 3px !important;
    margin: 0 auto 2rem auto !important;
    border: none !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
}

.ph-cta-metodo h2,
.ph-cta-metodo p {
    text-align: center !important;
}

/* CTA metodo link colors controlled by WordPress editor */

/* Also apply to any blue background CTA with separator */
.has-ph-blue-background-color .wp-block-separator,
.has-ph-blue-background-color hr.wp-block-separator {
    width: 60px !important;
    max-width: 60px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: #ffffff !important;
    border: none !important;
    height: 3px !important;
    opacity: 1 !important;
}

/* ==========================================================================
   10. REMOVE GAPS BETWEEN SECTIONS
   ========================================================================== */

/* Remove Blocksy's vertical spacing when first element is a hero */
[data-vertical-spacing="top:bottom"] {
    padding-top: 0 !important;
}

/* Remove top spacing on pages with hero as first element */
.entry-content>.wp-block-cover:first-child,
.entry-content>.ph-hero:first-child,
.entry-content>.ph-hero-cover:first-child {
    margin-top: 0 !important;
}

/* Remove default WordPress block gaps */
.alignfull {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-columns.alignfull {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Entry content gap removal */
.entry-content>*:not(:last-child) {
    margin-bottom: 0;
}

/* Remove any top margin from entry-content itself */
.entry-content {
    margin-top: 0 !important;
}

/* Blocksy specific: Remove content area top padding for hero pages */
.ct-container-full[data-vertical-spacing*="top"] .entry-content {
    padding-top: 0 !important;
}

article.page .entry-content>.alignfull:first-child {
    margin-top: 0 !important;
}

/* ==========================================================================
   11. BUTTON OUTLINE STYLE FIX
   ========================================================================== */

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 8px !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
}

/* ==========================================================================
   12. HERO LOGO & SEPARATOR NUCLEAR OPTIONS
   ========================================================================== */

/* Nuclear option for hero logo centering - target EVERYTHING */
.wp-block-cover.ph-hero-cover figure.wp-block-image,
.wp-block-cover.ph-hero figure.wp-block-image,
.ph-hero-cover figure.wp-block-image,
.ph-hero figure.wp-block-image,
figure.wp-block-image.ph-hero-logo,
.ph-hero-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

.wp-block-cover.ph-hero-cover figure.wp-block-image img,
.wp-block-cover.ph-hero figure.wp-block-image img,
.ph-hero-cover figure.wp-block-image img,
.ph-hero figure.wp-block-image img,
figure.wp-block-image.ph-hero-logo img,
.ph-hero-logo img {
    margin: 0 auto !important;
    display: block !important;
}

/* Hero separator - strict width and thickness control */
.wp-block-cover.ph-hero-cover hr.wp-block-separator,
.wp-block-cover.ph-hero hr.wp-block-separator,
.ph-hero-cover hr.wp-block-separator,
.ph-hero hr.wp-block-separator,
.ph-hero-cover .wp-block-separator,
.ph-hero .wp-block-separator {
    width: 50px !important;
    max-width: 50px !important;
    min-width: 50px !important;
    margin: 2rem auto !important;
    border: none !important;
    border-top: 3px solid #f2ede4 !important;
    background: transparent !important;
    height: 0 !important;
    opacity: 1 !important;
    /* Remove transparency */
}

/* ==========================================================================
   13. GENERAL FIXES
   ========================================================================== */

/* Ensure cover blocks respect min-height from editor */
.wp-block-cover[style*="min-height: 90vh"],
.wp-block-cover[style*="min-height:90vh"] {
    min-height: 90vh !important;
}

/* Ensure images fill their containers */
.wp-block-image img {
    display: block;
}

.ph-about-image img,
.ph-about-section .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: 90vh !important;
    /* Limit image height to prevent overly tall sections */
    object-fit: cover !important;
}

/* Fix for any remaining alignment issues */
.has-text-align-center {
    text-align: center !important;
}

.has-text-align-right {
    text-align: right !important;
}

/* ==========================================================================
   14. VIDEO HERO - FILOSOFÍA PAGE
   ========================================================================== */

.ph-video-hero video {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Hide video controls overlay */
.ph-video-hero video::-webkit-media-controls {
    display: none !important;
}

/* Filosofía and Valores sections - two column layout */
.ph-filosofia-section,
.ph-valores-section {
    min-height: 60vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure columns don't wrap */
.ph-filosofia-section .wp-block-columns,
.ph-valores-section .wp-block-columns {
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

/* Title column - prevent wrapping */
.ph-filosofia-section h2,
.ph-valores-section h2 {
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

/* Content column alignment */
.ph-filosofia-section .wp-block-column:last-child,
.ph-valores-section .wp-block-column:last-child {
    padding-left: 2rem !important;
}

/* Valores list styling - single paragraph with line breaks */
.ph-valores-section .wp-block-column:last-child p {
    margin-bottom: 0 !important;
}

/* Responsive: stack on mobile */
@media (max-width: 782px) {

    .ph-filosofia-section .wp-block-columns,
    .ph-valores-section .wp-block-columns {
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }

    .ph-filosofia-section .wp-block-column,
    .ph-valores-section .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 0 !important;
    }

    /* Override the generic centering from line 302/310 for these specific sections */
    .ph-filosofia-section .wp-block-column>*,
    .ph-valores-section .wp-block-column>* {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .ph-filosofia-section .wp-block-column:last-child,
    .ph-valores-section .wp-block-column:last-child {
        padding-top: 1rem !important;
    }

    .ph-filosofia-section h2,
    .ph-valores-section h2 {
        white-space: normal !important;
        text-align: left !important;
    }
}

/* ==========================================================================
   15. SCROLL APPEARANCE ANIMATION
   ========================================================================== */

.ph-appear-animate {
    opacity: 0 !important;
    transform: translateX(-40px) !important;
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) var(--ph-appear-delay, 0s),
        transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) var(--ph-appear-delay, 0s) !important;
}

.ph-appear-animate.is-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ==========================================================================
   15b. MINIMAL SLIDESHOW
   ========================================================================== */

.ph-slideshow {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    display: flex !important;
    align-items: stretch !important;
}

.ph-slideshow img,
.ph-slideshow .wp-block-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 1.5s ease-in-out !important;
    margin: 0 !important;
}

.ph-slideshow img.is-active,
.ph-slideshow .wp-block-image.is-active,
.ph-slideshow .is-active img {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* Ensure the slideshow container itself takes space if not using images as static blocks */
@media (max-width: 781px) {
    .ph-slideshow {
        min-height: 300px !important;
        aspect-ratio: 4 / 3 !important;
    }
}

/* ==========================================================================
   16. FORMULA ANIMATION (Matrix Effect)
   ========================================================================== */

.ph-formula-container {
    position: relative;
    overflow: hidden;
    /* Contain the rain */
}

/* Ensure the text is invisible but takes up space during animation */
.ph-formula-target.is-animating {
    color: transparent !important;
}

/* The raining character */
.ph-rain-char {
    position: absolute;
    top: -40px;
    font-family: inherit;
    /* Use same font as target */
    font-weight: inherit;
    color: var(--ph-navy);
    pointer-events: none;
    user-select: none;
    line-height: 1;
    z-index: 10;
    transition: opacity 1s ease;
}

.ph-rain-char.is-solved {
    color: var(--ph-navy);
}

.ph-rain-char.ph-fade-out {
    opacity: 0 !important;
}

.ph-formula-target {
    transition: color 1s ease;
}

.ph-equipo-section {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.ph-team-grid {
    gap: 1.5rem !important;
}

.ph-team-grid .wp-block-column {
    flex: 1 1 0 !important;
}

.ph-team-member {
    text-align: left;
}

.ph-team-photo {
    aspect-ratio: 3 / 4 !important;
    /* Portrait orientation */
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

.ph-team-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    /* Focus on face */
    filter: grayscale(100%) !important;
    transition: filter 0.3s ease !important;
}

.ph-team-photo:hover img {
    filter: grayscale(0%) !important;
}

@media (max-width: 1024px) {
    .ph-team-photo img {
        filter: grayscale(0%) !important;
    }
}

/* Team member text */
.ph-team-member p {
    margin-bottom: 0.25rem !important;
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 1024px) {
    .ph-team-grid {
        flex-wrap: wrap !important;
    }

    .ph-team-grid .wp-block-column {
        flex: 0 0 calc(50% - 1rem) !important;
        max-width: calc(50% - 1rem) !important;
    }
}

@media (max-width: 600px) {
    .ph-team-grid .wp-block-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   16. PROYECTOS PAGE
   ========================================================================== */

.ph-proyectos-intro {
    text-align: center;
}

.ph-proyectos-grid-section {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.ph-proyectos-grid {
    gap: 2rem !important;
}

.ph-proyecto-card {
    flex: 1 1 0 !important;
}

.ph-proyecto-image {
    aspect-ratio: 5 / 4 !important;
    /* 5:4 proportion */
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

.ph-proyecto-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Crop to fill */
    object-position: center center !important;
    transition: transform 0.3s ease !important;
}

.ph-proyecto-card:hover .ph-proyecto-image img {
    transform: scale(1.05) !important;
}

/* Project name in blue */
.ph-proyecto-card p.has-ph-blue-color {
    color: var(--ph-blue, #0637EB) !important;
}

/* Testimonios section on proyectos page */
.ph-testimonios-proyectos {
    border-top: 1px solid #e5e5e5;
}

/* Responsive */
@media (max-width: 782px) {
    .ph-proyectos-grid {
        flex-wrap: wrap !important;
    }

    .ph-proyecto-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   17. CONTACTO PAGE - FORM STYLING
   ========================================================================== */

.ph-contacto-page {
    min-height: 90vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ph-contact-form {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: transparent !important;
    /* No white card */
    padding: 2rem 0;
}

/* Contact Form 7 wrapper */
.ph-contact-form .wpcf7 {
    width: 100%;
}

.ph-contact-form .wpcf7-form {
    width: 100%;
}

/* Form rows - 2 columns */
.ph-contact-form .ph-form-row {
    display: flex;
    gap: 3rem;
    margin-bottom: 2rem;
}

.ph-contact-form .ph-form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Make CF7's default <p> tags work as rows */
.ph-contact-form .wpcf7-form>p {
    display: block;
    margin-bottom: 0;
}

/* Input styling - LIGHT TEXT on dark background */
.ph-contact-form input[type="text"],
.ph-contact-form input[type="email"],
.ph-contact-form input[type="tel"],
.ph-contact-form textarea,
.ph-contact-form select.wpcf7-form-control {
    width: 100% !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 0.75rem 1rem !important;
    color: #f5f0e6 !important;
    /* Cream/light color */
    font-size: 1rem !important;
    outline: none !important;
    transition: border-color 0.3s ease !important;
    border-radius: 0px !important;
}

.ph-contact-form input::placeholder,
.ph-contact-form textarea::placeholder,
.ph-contact-form .wpcf7-form-control::placeholder {
    color: rgba(245, 240, 230, 0.7) !important;
    /* Light cream placeholder */
}

.ph-contact-form input:focus,
.ph-contact-form textarea:focus,
.ph-contact-form .wpcf7-form-control:focus {
    border-color: #ffffff !important;
}

/* Submit button row */
.ph-contact-form .ph-form-submit {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 2.5rem !important;
}

/* Submit button styling */
.ph-submit-btn,
.ph-contact-form input[type="submit"],
.ph-contact-form .wpcf7-submit {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    padding: 0.5rem 0 !important;
    transition: opacity 0.3s ease !important;
}

.ph-submit-btn:hover,
.ph-contact-form input[type="submit"]:hover,
.ph-contact-form .wpcf7-submit:hover {
    opacity: 0.8 !important;
    color: #ef6b0d !important;
}

/* CF7 validation and response messages */
.ph-contact-form .wpcf7-response-output {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    margin: 1rem 0 !important;
    padding: 1rem !important;
    border-radius: 4px !important;
}

.ph-contact-form .wpcf7-not-valid-tip {
    color: #ff6b6b !important;
    font-size: 0.875rem !important;
}

.ph-contact-form .wpcf7-spinner {
    display: none !important;
}

/* Acceptance checkbox & Legal links */
.ph-contact-form .wpcf7-acceptance {
    display: block !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom: 0.5rem !important;
}

.ph-contact-form .wpcf7-acceptance .wpcf7-form-control-wrap {
    display: inline !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.ph-contact-form .wpcf7-acceptance input[type="checkbox"] {
    width: auto !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.ph-contact-form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0 !important;
    border: none !important;
    border-bottom: none !important;
}

.ph-contact-form .wpcf7-acceptance a,
.ph-contact-form .ph-form-legal a {
    color: inherit !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-color: rgba(245, 240, 230, 0.35) !important;
    font-weight: 400 !important;
    transition: color 0.2s ease, text-decoration-color 0.2s ease !important;
}

.ph-contact-form .wpcf7-acceptance a:hover,
.ph-contact-form .ph-form-legal a:hover {
    color: #ef6b0d !important;
    text-decoration-color: #ef6b0d !important;
}

/* Labels if visible */
.ph-contact-form label {
    color: #f5f0e6 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.15rem !important;
    display: block !important;
}

/* Hide auto-injected <br> tags by CF7 that appear after labels */
.ph-contact-form .ph-form-field br {
    display: none !important;
}

/* Responsive */
@media (max-width: 600px) {
    .ph-contact-form {
        padding: 1rem 0;
    }

    .ph-contact-form .ph-form-row {
        flex-direction: column;
        gap: 1.5rem;
    }

    .ph-contact-form .ph-form-submit {
        justify-content: center !important;
    }
}

/* ==========================================================================
   18. FOOTER STYLING
   ========================================================================== */

/* Footer background */
footer,
.site-footer,
.ct-footer,
[data-footer] {
    background-color: var(--ph-navy, #1B2B4F) !important;
}

/* Footer container */
.ct-footer .ct-container,
.site-footer .ct-container {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

/* Footer text color */
footer,
footer *,
.site-footer,
.site-footer *,
.ct-footer,
.ct-footer * {
    color: #f5f0e6 !important;
    /* Cream/off-white */
}

/* Footer links */
footer a,
.site-footer a,
.ct-footer a {
    color: #f5f0e6 !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
}

footer a:hover,
.site-footer a:hover,
.ct-footer a:hover {
    opacity: 0.7 !important;
    color: #ef6b0d !important;
}

/* Footer logo */
.ct-footer .site-logo-container img,
.ct-footer .ct-footer-logo img,
footer .custom-logo {
    max-width: 200px !important;
    height: auto !important;
}

/* Footer tagline under logo */
.ct-footer .footer-tagline,
.ct-footer .site-description {
    font-size: 0.75rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    margin-top: 0.5rem !important;
    color: #f5f0e6 !important;
}

/* Footer columns spacing */
.ct-footer [class*="ct-footer-column"],
.ct-footer .footer-column {
    padding: 0 1rem !important;
}

/* Footer widget titles - hide or style */
.ct-footer .widget-title,
.ct-footer h4 {
    display: none !important;
    /* Hide widget titles */
}

/* Footer text size */
.ct-footer p,
.ct-footer .ct-widget p {
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    margin-bottom: 0.5rem !important;
}

/* Footer contact info styling */
.ct-footer .footer-contact p {
    margin-bottom: 0.25rem !important;
}

/* Remove default footer bottom bar if not needed */
.ct-footer-bottom,
.site-footer .footer-bottom {
    display: none !important;
}

/* ==========================================================================
   19. SOLUCIONES PAGE - SERVICE GRID
   ========================================================================== */

.ph-soluciones-grid {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.ph-soluciones-grid .wp-block-columns {
    gap: 2rem;
}

.ph-service-image {
    aspect-ratio: 1 / 1 !important;
    /* Square images */
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

.ph-service-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Crop to fill square */
    object-position: center center !important;
    filter: grayscale(100%) !important;
    transition: filter 0.3s ease !important;
}

.ph-service-image:hover img {
    filter: grayscale(0%) !important;
}

@media (max-width: 1024px) {
    .ph-service-image img {
        filter: grayscale(0%) !important;
    }
}

/* Ensure all columns have same width for consistent squares */
.ph-soluciones-grid .wp-block-column {
    flex: 1 1 0 !important;
}

/* Arrow list styling */
.ph-soluciones-grid .wp-block-column p {
    line-height: 2.2 !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .ph-about-section {
        grid-template-columns: 1fr !important;
    }

    .ph-about-section>.wp-block-column:first-child {
        min-height: 300px;
    }

    .ph-testimonial-card {
        flex: 0 0 280px !important;
        min-width: 280px !important;
    }
}



/* ==========================================================================
   ARTISAN HIGHLIGHT (Option 1)
   ========================================================================== */

.ph-highlight-marker {
    position: relative;
    display: inline-block;
    padding: 0.1em 0.6em;
    margin: 0 -0.2em;
    color: #FFFFFF !important;
    z-index: 1;
    font-style: normal;
    font-size: 1.3rem !important;
    /* Specific size for 'Cómo' */
    font-weight: 800 !important;
    /* Extrabold */
}

.ph-highlight-marker::before {
    content: "";
    position: absolute;
    top: 52%;
    left: 50%;
    width: 130%;
    /* Slightly wider than text for realistic stroke ends */
    height: 160%;
    /* Taller for better coverage */
    transform: translate(-50%, -50%) rotate(-1deg);
    background-image: url("/wp-content/uploads/2026/01/11441877.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* ==========================================================================
   17. QUIENES SOMOS PARALLAX
   ========================================================================== */

.ph-parallax-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 900px;
    flex-grow: 1;
    /* Stretch in flex container */
    overflow: hidden;
    background-color: #f2ede4;
    margin: 0 !important;
}

/* Force the column to be a flex container that stretches its child */
.ph-about-section>.wp-block-column:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
}

.ph-parallax-layer {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    /* Taller than container to allow travel */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

.ph-parallax-bg {
    z-index: 1;
}

.ph-parallax-fg {
    z-index: 2;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.ph-parallax-fg.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Specific placeholder images - relative to artifacts dir for now, 
   but JS will set them to full paths */
/* We will use generic IDs or placeholders that the JS will replace */

@media (max-width: 768px) {

    .ph-hero,
    .ph-hero-cover {
        min-height: 80vh !important;
    }

    .ph-parallax-container {
        min-height: 450px !important;
        /* Reduce excessive height on mobile */
        height: auto !important;
        padding-bottom: 133% !important;
        /* Portrait 3:4 ratio */
    }

    .ph-parallax-layer {
        height: 110%;
        /* Reduce travel room on mobile to prevent extreme cropping */
        top: -5%;
    }

    /* Aggressive Equipo Teaser Fixes */
    .ph-equipo-teaser,
    .wp-block-cover.ph-equipo-teaser,
    .ph-equipo-teaser[style*="min-height"] {
        min-height: auto !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        aspect-ratio: auto !important;
        background-color: var(--ph-navy, #1B2B4F) !important;
    }

    /* Fix image zoom and ensure full width display */
    .ph-equipo-teaser .wp-block-cover__image-background,
    .ph-equipo-teaser .has-parallax {
        background-attachment: scroll !important;
        background-size: 100% auto !important;
        /* Force full width visibility */
        background-repeat: no-repeat !important;
        background-position: center top !important;
        height: 100% !important;
    }

    .ph-equipo-teaser .wp-block-cover__inner-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        text-align: center !important;
        padding: 55vw 1.5rem 3rem 1.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        min-height: auto !important;
    }

    .ph-equipo-teaser .wp-block-group {
        padding: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ph-equipo-teaser h2,
    .ph-equipo-teaser p,
    .ph-equipo-teaser .ph-btn-link,
    .ph-equipo-teaser .ph-btn-link a {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        width: 100% !important;
    }

    .ph-testimonial-card {
        flex: 0 0 260px !important;
        min-width: 260px !important;
    }
}

/* ==========================================================================
   20. PULSATING UNDERLINE UTILITY
   ========================================================================== */

.ph-pulsate-underline {
    position: relative;
    display: inline-block;
    --ph-underline-color: #f2ede4;
    /* Default color */
}

.ph-pulsate-underline::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--ph-underline-color);
    border-radius: 2px;
    animation: ph-pulse-underline 4s infinite ease-in-out;
}

/* Color Utilities */
.ph-underline-black {
    --ph-underline-color: #000000 !important;
}

.ph-underline-blue {
    --ph-underline-color: #0637EB !important;
}

.ph-underline-white {
    --ph-underline-color: #FFFFFF !important;
}

.ph-underline-dark {
    --ph-underline-color: #1a1a1a !important;
}

@keyframes ph-pulse-underline {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* ==========================================================================
   21. HOMEPAGE LOGO VISIBILITY
   ========================================================================== */

/* Hide logo for homepage when header row is transparent */
.home [data-transparent-row="yes"] .site-logo-container {
    display: none !important;
}

/* ==========================================================================
   21b. EQUIPO PAGE HERO — MOBILE STACKED LAYOUT
   Modern technique: separate image and text completely.
   The block is split into two visual zones:
     • Top 75vw  → full-width 4:3 team photo (no text, no header interference)
     • Below     → title + subtitle on navy background
   Implementation: padding-top:75vw on the flex container pushes the inner
   container below the image zone. The image is anchored top with height:75vw
   and bottom:auto so it does not bleed into the text area.
   3-class selector (0-3-0) beats all competing !important rules at 0-1-0.
   Desktop: zero changes — all rules are inside max-width: 768px.
   ========================================================================== */

   @media (max-width: 768px) {

    .wp-block-cover.ph-hero-cover.ph-equipo-hero {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        /*
         * padding-top = header height (87px) + image height (75vw)
         * The first 87px is navy bg behind the transparent header,
         * then 75vw of team photo, then the text area below.
         */
        padding-top: calc(87px + 75vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        background-color: var(--ph-navy, #1B2B4F) !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    /* Image: starts below the header, exactly 75vw tall, does not stretch to block bottom */
    .ph-equipo-hero .wp-block-cover__image-background {
        top: 87px !important;
        height: 75vw !important;
        bottom: auto !important;
        object-fit: cover !important;
        object-position: center 20% !important;
    }

    /* Overlay not needed — navy bg provides contrast for text below the image */
    .ph-equipo-hero .wp-block-cover__background {
        display: none !important;
    }

    /* Inner container: sits in the space below the image, no extra padding */
    .ph-equipo-hero .wp-block-cover__inner-container {
        padding: 0 !important;
        width: 100% !important;
    }

    /* Tighten the group padding so text feels close to the image */
    .ph-equipo-hero .wp-block-group {
        padding-top: 1.5rem !important;
        padding-bottom: 2rem !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ==========================================================================
   22. MAP TRANSITION COMPONENT
   Merged from map-transition.css (was a separate render-blocking request).
   ========================================================================== */

.ph-map-transition {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 500px;
    max-height: 85vh;
    border-radius: 16px;
    overflow: hidden;
    background: #0a1628;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.45),
        inset 0 0 80px rgba(0, 0, 0, 0.3);
    margin: 3rem 0;
}

.ph-mt-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ph-mt-canvas .leaflet-container {
    background: transparent !important;
    font-family: inherit !important;
}

.ph-mt-canvas .leaflet-control-zoom,
.ph-mt-canvas .leaflet-control-attribution {
    display: none !important;
}

.leaflet-spainTiles-pane {
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.leaflet-spainTiles-pane .leaflet-tile {
    filter: sepia(40%) saturate(220%) brightness(0.55) hue-rotate(8deg) !important;
    mix-blend-mode: normal !important;
}

.leaflet-madridTiles-pane {
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.leaflet-madridTiles-pane .leaflet-tile {
    filter: brightness(0.8) contrast(500%) invert(100%) brightness(1.2) !important;
    mix-blend-mode: screen !important;
}

.ph-mt--tiles-swap .leaflet-spainTiles-pane { opacity: 0; }
.ph-mt--tiles-swap .leaflet-madridTiles-pane { opacity: 1; }

.leaflet-boundaryPane-pane {
    transition: opacity 1s ease-in-out;
}

.ph-mt--spain .leaflet-boundaryPane-pane path {
    filter: drop-shadow(0 0 6px rgba(212, 168, 67, 0.4));
}

.ph-mt--madrid .leaflet-boundaryPane-pane path {
    filter: drop-shadow(0 0 8px rgba(6, 55, 235, 0.3));
}

.ph-mt-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(10, 22, 40, 0.7) 100%);
}

.ph-mt-wave {
    --wave-x: 50%;
    --wave-y: 50%;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(
        circle at var(--wave-x) var(--wave-y),
        rgba(6, 55, 235, 0.45) 0%,
        rgba(6, 55, 235, 0.20) 30%,
        rgba(6, 55, 235, 0.05) 60%,
        transparent 80%
    );
    clip-path: circle(0% at var(--wave-x) var(--wave-y));
    opacity: 1;
    transition: clip-path 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-out;
}

.ph-mt-wave--active { clip-path: circle(150% at var(--wave-x) var(--wave-y)); }
.ph-mt-wave--fade   { opacity: 0; }

.ph-mt-ui {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ph-mt-label {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 320px;
}

.ph-mt-label--visible { opacity: 1; transform: translateY(0); }

.ph-mt-label__kicker {
    display: block;
    font-family: 'Inter', var(--ph-font-body, sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.4rem;
}

.ph-mt-label__title {
    display: block;
    font-family: 'Poppins', var(--ph-font-heading, sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.ph-mt-label__sub {
    display: block;
    font-family: 'Inter', var(--ph-font-body, sans-serif);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
}

.ph-mt-label--spain .ph-mt-label__kicker  { color: #D4A843; }
.ph-mt-label--madrid .ph-mt-label__kicker { color: #4A7DFF; }

.ph-mt-btn {
    pointer-events: auto;
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-family: 'Inter', var(--ph-font-body, sans-serif);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 0.65rem 1.6rem;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    outline: none;
}

.ph-mt-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.ph-mt-btn:active { transform: translateY(0); }
.ph-mt-arrow { display: inline-block; transition: transform 0.3s ease; }
.ph-mt-btn:hover .ph-mt-arrow { transform: translateX(3px); }
.ph-mt-btn__back { display: none; }
.ph-mt--madrid .ph-mt-btn__fwd { display: none; }
.ph-mt--madrid .ph-mt-btn__back { display: inline; }
.ph-mt--transitioning .ph-mt-btn,
.ph-mt--transitioning-back .ph-mt-btn { pointer-events: none; opacity: 0.4; }

.ph-mt-office-icon { background: none !important; border: none !important; }

.ph-mt-office-pin {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #D4A843 0%, #B8922E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 168, 67, 0.25);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: phMtPinPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ph-mt-office-pin--hq {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #0637eb 0%, #0529c2 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 24px rgba(6, 55, 235, 0.35);
    animation: phMtPinPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both, phMtPulse 3s ease-in-out 1s infinite;
}

.ph-mt-office-pin:hover { transform: scale(1.12); }

.ph-mt-office-pin--hq:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 36px rgba(6, 55, 235, 0.5);
    cursor: pointer;
}

.ph-mt-office-name {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Inter', var(--ph-font-body, sans-serif);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.ph-mt-marker-logo { width: 30px; height: auto; display: block; }
.ph-mt-marker-text { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; color: white; letter-spacing: -0.5px; }

.ph-mt-prop-icon { background: none !important; border: none !important; }

.ph-mt-prop-pin {
    width: 50px;
    height: 50px;
    background: #0637eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: phMtPinPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ph-mt-prop-pin .ph-mt-marker-logo { width: 26px; }

.ph-mt-prop-pin--hover {
    background: #ef6b0d !important;
    transform: scale(1.15);
    box-shadow: 0 8px 24px rgba(239, 107, 13, 0.4);
    z-index: 1000 !important;
}

.ph-mt-popup-wrap .leaflet-popup-content-wrapper {
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    border-top: 4px solid #0637eb;
    overflow: hidden;
}

.ph-mt-popup-wrap .leaflet-popup-content { margin: 0 !important; min-width: 220px; }
.ph-mt-popup-wrap .leaflet-popup-tip { background: white; }

.ph-mt-popup { padding: 18px 20px 20px; }

.ph-mt-popup__title {
    font-family: 'Poppins', var(--ph-font-heading, sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e8e8e8;
}

.ph-mt-popup__stats { display: flex; justify-content: space-around; gap: 12px; }
.ph-mt-popup__stat  { flex: 1; text-align: center; }
.ph-mt-popup__val   { display: block; font-size: 26px; font-weight: 700; color: #0637eb; line-height: 1.2; }
.ph-mt-popup__lbl   { display: block; font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }

.leaflet-constellationPane-pane path {
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

@keyframes phMtPinPop {
    0%   { opacity: 0; transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes phMtPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 24px rgba(6, 55, 235, 0.35); }
    50%       { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 40px rgba(6, 55, 235, 0.55), 0 0 60px rgba(6, 55, 235, 0.15); }
}

@media (max-width: 1024px) {
    .ph-map-transition { aspect-ratio: 4 / 3; min-height: 400px; border-radius: 12px; margin: 2rem 0; }
    .ph-mt-ui { padding: 1.5rem 1.8rem; }
    .ph-mt-label__title { font-size: clamp(1.3rem, 4vw, 1.8rem); }
    .ph-mt-office-pin { width: 48px; height: 48px; }
    .ph-mt-office-pin--hq { width: 54px; height: 54px; }
}

@media (max-width: 768px) {
    .ph-map-transition { aspect-ratio: 3 / 4; min-height: 450px; max-height: 70vh; border-radius: 10px; margin: 1.5rem 0; }
    .ph-mt-ui { padding: 1.2rem 1.4rem; }
    .ph-mt-label__kicker { font-size: 0.6rem; letter-spacing: 2px; }
    .ph-mt-label__title { font-size: 1.3rem; }
    .ph-mt-label__sub { font-size: 0.75rem; }
    .ph-mt-btn { font-size: 0.75rem; padding: 0.55rem 1.3rem; }
    .ph-mt-office-pin { width: 40px; height: 40px; }
    .ph-mt-office-pin--hq { width: 46px; height: 46px; }
    .ph-mt-office-name { font-size: 0.55rem; }
    .ph-mt-prop-pin { width: 40px; height: 40px; }
    .ph-mt-marker-logo { width: 22px; }
    .ph-mt-prop-pin .ph-mt-marker-logo { width: 20px; }
}

@media (max-width: 480px) {
    .ph-map-transition { border-radius: 8px; margin: 1rem 0; }
    .ph-mt-ui { padding: 1rem; }
    .ph-mt-office-name { display: none; }
}

/* ==========================================================================
   23. SPAIN REVEAL COMPONENT
   Merged from spain-reveal.css (was a separate render-blocking request).
   ========================================================================== */

.ph-spain-reveal {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 520px;
    max-height: 88vh;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    margin: 3rem 0;
}

.ph-sr-canvas {
    position: absolute;
    top: 5rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    -webkit-transform-origin: 55% 44%;
    transform-origin: 55% 44%;
    -webkit-transition: -webkit-transform 2s cubic-bezier(0.3, 0, 0.7, 1), opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 2s cubic-bezier(0.3, 0, 0.7, 1), opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.ph-spain-reveal.ph-sr--zooming .ph-sr-canvas {
    -webkit-transform: scale(5) translateZ(0);
    transform: scale(5) translateZ(0);
}

.ph-sr-canvas .leaflet-container { background: transparent !important; font-family: inherit !important; }
.ph-sr-canvas .leaflet-control-zoom,
.ph-sr-canvas .leaflet-control-attribution { display: none !important; }

.ph-spain-reveal.ph-sr--revealing .ph-sr-canvas { opacity: 0; pointer-events: none; }

.ph-sr-madrid-slot {
    position: absolute;
    top: 5rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.ph-spain-reveal.ph-sr--revealing .ph-sr-madrid-slot { opacity: 1; pointer-events: auto; }

.ph-sr-madrid-slot .ph-map-wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: transparent !important;
    box-shadow: none !important;
}

.ph-sr-madrid-slot .ph-map-instance {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ph-sr-text-overlay {
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    pointer-events: none;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 300;
    line-height: 1.2;
    margin: 0;
    padding: 0 1rem;
    color: #f2ede4;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.ph-sr-text-overlay.ph-sr-text--visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
    .ph-spain-reveal { aspect-ratio: 4 / 3; min-height: 420px; margin: 2rem 0; }
}

@media (max-width: 768px) {
    .ph-spain-reveal { aspect-ratio: 3 / 4; min-height: 460px; max-height: 75vh; margin: 1.5rem 0; }
}

@media (max-width: 480px) {
    .ph-spain-reveal { margin: 1rem 0; }
}