/* Arellano Theme - Custom styles */

html {
    scroll-behavior: smooth;
}

/* ─── Navbar ────────────────────────────────────────── */
.navbar-scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Logo: white by default (transparent bg), dark when scrolled */
.navbar-logo-img {
    transition: filter 0.3s ease;
}

.navbar-scrolled .navbar-logo-img {
    filter: brightness(0) saturate(100%);
}

/* Links: white by default, dark when scrolled */
.navbar-link {
    transition: color 0.3s ease;
}

.navbar-scrolled .navbar-link {
    color: #0F1E35 !important;
}

.navbar-scrolled .navbar-link:hover {
    color: #8DC53E !important;
}

/* Keep active link green always */
.navbar-link.text-arellano-green {
    color: #8DC53E !important;
}

/* Hamburger bars: white default, dark when scrolled */
.navbar-scrolled .hamburger-bar {
    background-color: #0F1E35 !important;
}

/* ─── Mobile Menu (fullscreen dark overlay) ────────── */
.mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 60px;
    padding-bottom: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}
/* ─── Hero Slider ───────────────────────────────────── */
/* Hide default Splide arrow SVGs in hero, show our custom images */
#home-hero-splide .splide__arrow {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    opacity: 0.7;
}

#home-hero-splide .splide__arrow:hover {
    opacity: 1;
}

#home-hero-splide .splide__arrow svg {
    display: none !important;
}

/* Hero pagination - bottom center */
#home-hero-splide .splide__pagination {
    bottom: 2rem;
    gap: 2px;
}
.splide__pagination__page.is-active {
    background-color: #8dc53e !important;
}
.splide__pagination__page {
    opacity: 1;
    background-color: white;
}
/* ─── Solutions Slider ──────────────────────────────── */
#solutions-splide .splide__arrow {
    background: rgba(255, 255, 255, 0.9) !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border: 1px solid #E5E7EB !important;
}

#solutions-splide .splide__arrow svg {
    fill: #1B2A4A !important;
    width: 1rem !important;
    height: 1rem !important;
}

/* ─── Clients Slider ────────────────────────────────── */
#clients-splide .splide__arrow {
    display: none !important;
}

/* ─── Line clamp utility ────────────────────────────── */
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Contact Form 7 — Arellano Style ──────────────────── */

/* Reset CF7 default wrappers */
.arellano-contact .wpcf7 { width: 100%; }
.arellano-contact .wpcf7-form { width: 100%; }
.arellano-contact .wpcf7-form br { display: none; }
.arellano-contact .wpcf7-form-control-wrap { display: block; }

/* Field grid rows (2 columns) */
.arellano-contact .cf7-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
@media (max-width: 640px) {
    .arellano-contact .cf7-row { grid-template-columns: 1fr; }
}

/* Individual field wrapper */
.arellano-contact .cf7-field { margin-bottom: 1rem; }

/* Labels */
.arellano-contact .cf7-field label,
.arellano-contact .wpcf7-form label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B7280;
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
}

/* Inputs & textarea — underline-only style */
.arellano-contact .wpcf7-form input[type="text"],
.arellano-contact .wpcf7-form input[type="email"],
.arellano-contact .wpcf7-form input[type="tel"],
.arellano-contact .wpcf7-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #D1D5DB;
    border-radius: 0;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #0F1E35;
    font-family: inherit;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease;
}

.arellano-contact .wpcf7-form input[type="text"]:focus,
.arellano-contact .wpcf7-form input[type="email"]:focus,
.arellano-contact .wpcf7-form input[type="tel"]:focus,
.arellano-contact .wpcf7-form textarea:focus {
    border-bottom-color: #8DC53E;
    box-shadow: none;
    outline: none;
}

.arellano-contact .wpcf7-form textarea {
    resize: none;
    min-height: 72px;
    display: block;
}

/* Submit button — verde Arellano, texto oscuro */
.arellano-contact .wpcf7-form input[type="submit"],
.arellano-contact .wpcf7-submit {
    background-color: #8DC53E;
    color: #0F1E35;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: inherit;
    padding: 0.75rem 2.5rem;
    border: none;
    border-radius: 0;
    cursor: pointer;
    margin-top: 0.75rem;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease;
    display: inline-block;
}

.arellano-contact .wpcf7-form input[type="submit"]:hover,
.arellano-contact .wpcf7-submit:hover {
    background-color: #7AB032;
}

/* Validación — campo inválido */
.arellano-contact .wpcf7-not-valid {
    border-bottom-color: #EF4444 !important;
}
.arellano-contact .wpcf7-not-valid-tip {
    font-size: 0.7rem;
    color: #EF4444;
    margin-top: 0.25rem;
    display: block;
}

/* Respuesta del formulario */
.arellano-contact .wpcf7-response-output {
    margin-top: 1rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8rem;
    border-left: 3px solid;
    border-radius: 0;
}
.arellano-contact .wpcf7-mail-sent-ok {
    border-color: #8DC53E;
    color: #166534;
    background-color: #F0FDF4;
}
.arellano-contact .wpcf7-mail-sent-ng,
.arellano-contact .wpcf7-validation-errors,
.arellano-contact .wpcf7-spam-blocked,
.arellano-contact .wpcf7-acceptance-missing {
    border-color: #EF4444;
    color: #991B1B;
    background-color: #FEF2F2;
}

/* Spinner CF7 */
.arellano-contact .wpcf7-spinner {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* ─── Brands Ticker (marquee infinito) ─────────────────────── */
@keyframes brands-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.brands-ticker-track {
    display: flex;
    width: max-content;
    animation: brands-ticker-scroll var(--ticker-speed, 30s) linear infinite;
}

.brands-ticker-wrapper:hover .brands-ticker-track {
    animation-play-state: paused;
}

/* ─── Internal Slider ───────────────────────────────── */
.aportes-text-shadow {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

#aportes-splide .splide__pagination {
    bottom: 1.5rem;
}

#aportes-splide .splide__pagination__page {
    background: #ffffff !important;
    opacity: 1;
    width: 10px;
    height: 10px;
}

#aportes-splide .splide__pagination__page.is-active {
    background: #8DC53E !important;
    opacity: 1;
    transform: scale(1.2);
}

#aportes-splide .splide__arrow {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    opacity: 0.7;
}

#aportes-splide .splide__arrow:hover {
    opacity: 1;
}

#aportes-splide .splide__arrow svg {
    display: none !important;
}

/* ─── Pilares Estratégicos — hover icon swap ────────── */
.pilar-card:hover .pilar-icon-normal {
    opacity: 0;
}

.pilar-card:hover .pilar-icon-hover {
    opacity: 1 !important;
}

/* ─── Contributions anchor links ───────────────────── */
.contributions-anchor {
    white-space: nowrap;
}

/* ─── Aportes content (bullet lists inside rich text) ─ */
.aportes-content ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.aportes-content li {
    margin-bottom: 0.35rem;
}

/* ─── Team photo green arc ─────────────────────────── */
.team-photo-arc {
    position: relative;
}
.team-photo-arc::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(
        from 210deg,
        transparent 0deg,
        transparent 15deg,
        #8DC53E 25deg,
        #8DC53E 310deg,
        transparent 320deg,
        transparent 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
}

/* ─── WP Admin bar fix ──────────────────────────────── */
body.admin-bar .navbar-fixed {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .navbar-fixed {
        top: 46px;
    }
}

/* ─── Estudios Accordion ──────────────────────────── */
.estudio-desc,
.estudio-cta {
    display: none !important;
}
.estudio-item.active {
    background-color: #15253C;
    color: #fff;
}
.estudio-item.active .estudio-desc {
    display: block !important;
    animation: fadeInEstudio 0.3s ease;
}
.estudio-item.active .estudio-icon {
    display: none !important;
}
.estudio-item.active .estudio-cta {
    display: inline-block !important;
}
@keyframes fadeInEstudio {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Términos y Condiciones ──────────────────────── */
.terminos-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1rem;
}
.terminos-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0F1E35;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.terminos-content p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 0.5rem;
}

/* ─── Sectors Rich Text ───────────────────────────── */
.sectors-rich-text ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.25rem 0 0.5rem;
    color: #374151;
    font-size: 0.9375rem;
}
.sectors-rich-text ul ul {
    list-style: circle;
    margin: 0.15rem 0 0.25rem;
}
.sectors-rich-text li {
    margin-bottom: 0.15rem;
    line-height: 1.5;
}
.sectors-rich-text strong {
    color: #0F1E35;
    font-weight: 600;
}