/*
Theme Name: Sambito
Theme URI: https://sambitodigital.com
Author: Sambito
Author URI: https://sambitodigital.com
Description: Tema WordPress oficial de Sambito — agencia de branding. Landing de una sola página con secciones de Quiénes Somos, Servicios (acordeón), Proyectos, Clientes (carrusel) y Footer.
Version: 1.4.4
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sambito
Tags: one-page, branding, dark, agency, custom-colors, custom-menu, featured-images
*/

/* ========================================================
   1. RESET + VARIABLES
   ======================================================== */
:root{
    --bg:        #0a0a0a;
    --bg-2:      #101010;
    --bg-3:      #161616;
    --line:      #2a2a2a;
    --text:      #ffffff;
    --muted:     #b8b8b8;
    --accent:    #ffcb05;   /* amarillo Sambito */
    --accent-2:  #ffd42a;
    --radius:    14px;
    --container: 1200px;
    --ease:      cubic-bezier(.6,.2,.2,1);
    --font:      "Inter", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{
    scroll-behavior:smooth;
    overflow-x:hidden;
    max-width:100vw;
}
body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    max-width:100vw;
    position:relative;
}
a{ color:inherit; text-decoration:none; transition:color .25s var(--ease); }
a:hover{ color:var(--accent); }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ========================================================
   2. HEADER / NAV
   ======================================================== */
.site-header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    background:rgba(10,10,10,.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:background .3s var(--ease);
}
.site-header.is-scrolled{ background:rgba(10,10,10,.95); }

.nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:80px;
}
.nav-logo img{ height:54px; width:auto; }

.nav-menu{
    display:flex;
    align-items:center;
    gap:40px;
    list-style:none;
}
.nav-menu > li{ position:relative; }
.nav-menu > li > a,
.nav-menu > li > button{
    font-size:15px;
    font-weight:500;
    color:var(--text);
    padding:8px 2px;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.nav-menu > li.has-dropdown > button::after{
    content:"";
    width:6px; height:6px;
    background:var(--accent);
    border-radius:50%;
    display:inline-block;
}

/* Dropdown */
.nav-dropdown{
    position:absolute;
    top:calc(100% + 14px);
    left:-16px;
    min-width:230px;
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px;
    list-style:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:all .25s var(--ease);
    box-shadow:0 20px 40px rgba(0,0,0,.6);
}
.nav-menu > li.has-dropdown:hover .nav-dropdown,
.nav-menu > li.has-dropdown:focus-within .nav-dropdown,
.nav-menu > li.has-dropdown.is-open .nav-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.nav-dropdown li a{
    display:block;
    padding:10px 14px;
    font-size:14px;
    border-radius:8px;
    color:var(--muted);
}
.nav-dropdown li a:hover{
    background:rgba(255,203,5,.08);
    color:var(--accent);
}

/* Burger (mobile) */
.nav-burger{
    display:none;
    width:40px; height:40px;
    position:relative;
}
.nav-burger span{
    position:absolute;
    left:8px; right:8px;
    height:2px;
    background:var(--text);
    transition:.3s var(--ease);
}
.nav-burger span:nth-child(1){ top:14px; }
.nav-burger span:nth-child(2){ top:20px; }
.nav-burger span:nth-child(3){ top:26px; }
.nav-burger.is-open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity:0; }
.nav-burger.is-open span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* ========================================================
   3. HERO / QUIÉNES SOMOS
   ======================================================== */
.hero{
    padding:120px 0 50px;
    position:relative;
}
.eyebrow{
    display:block;
    font-size:28px;
    font-weight:600;
    color:var(--accent);
    letter-spacing:.01em;
    margin:0 0 22px;
    padding:0;
    border:0;
}
.hero h1{
    font-size:clamp(32px, 5vw, 56px);
    line-height:1.1;
    font-weight:700;
    max-width:900px;
    letter-spacing:-.01em;
}
.hero h1 .type-cursor{
    display:inline-block;
    width:3px;
    height:.9em;
    background:var(--accent);
    vertical-align:text-bottom;
    margin-left:4px;
    animation:blink 1s infinite;
}
@keyframes blink{
    0%,49%{ opacity:1; }
    50%,100%{ opacity:0; }
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:14px 28px;
    background:var(--accent);
    color:#000;
    font-weight:600;
    border:0;
    border-radius:999px;
    font-size:15px;
    font-family:inherit;
    cursor:pointer;
    margin-top:40px;
    transition:transform .25s var(--ease), background .25s var(--ease);
}
.btn:hover{
    transform:translateY(-2px);
    background:var(--accent-2);
    color:#000;
}
.btn .btn-arrow{
    width:22px; height:22px;
    border-radius:50%;
    background:#000;
    color:var(--accent);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

/* ========================================================
   4. SERVICIOS (acordeón)
   ======================================================== */
.section{ padding:50px 0; }
.section-title{
    font-size:28px;
    font-weight:600;
    color:#b4b4b4;
    margin-bottom:32px;
    padding-bottom:18px;
    border-bottom:1px solid #666;
}

.accordion-item{
    border-bottom:1px solid #666;
}
.accordion-trigger{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:28px 0;
    font-size:20px;
    font-weight:600;
    text-align:left;
    color:var(--text);
    transition:color .25s var(--ease);
}
.accordion-trigger:hover{ color:var(--accent); }

.accordion-icon{
    width:32px; height:32px;
    border-radius:50%;
    background:var(--accent);
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    flex-shrink:0;
    transition:transform .4s var(--ease);
}
.accordion-item.is-open .accordion-icon{ transform:rotate(45deg); }

.accordion-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .5s var(--ease);
}
.accordion-panel-inner{
    padding:0 0 28px;
    color:var(--muted);
    max-width:780px;
    font-size:15px;
    line-height:1.7;
}
.accordion-item.is-open .accordion-panel-inner p + p{ margin-top:10px; }

/* ========================================================
   5. PROYECTOS
   ======================================================== */
.projects-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
}
.project-card{
    position:relative;
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--bg-3);
    display:block;
}
.project-card img,
.project-card video{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s var(--ease);
}
.project-card:hover img,
.project-card:hover video{ transform:scale(1.05); }

.project-card .overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%);
    opacity:0;
    transition:opacity .4s var(--ease);
    display:flex;
    align-items:flex-end;
    padding:22px;
}
.project-card:hover .overlay{ opacity:1; }
.project-card .project-title{
    color:#fff;
    font-weight:600;
    font-size:18px;
    transform:translateY(10px);
    transition:transform .4s var(--ease);
}
.project-card:hover .project-title{ transform:translateY(0); }

/* ========================================================
   6. CLIENTES CARRUSEL
   ======================================================== */
.clients{
    padding:60px 0;
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.marquee{
    display:flex;
    gap:80px;
    animation:marquee 30s linear infinite;
    width:max-content;
}
.marquee:hover{ animation-play-state:paused; }
.marquee img{
    height:40px;
    width:auto;
    object-fit:contain;
    filter:brightness(0) invert(1);
    opacity:.85;
    transition:opacity .3s;
}
.marquee img:hover{ opacity:1; }
.marquee .client{
    flex-shrink:0;
    min-width:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    font-size:18px;
    letter-spacing:.04em;
}
@keyframes marquee{
    from{ transform:translateX(0); }
    to{   transform:translateX(-50%); }
}

/* ========================================================
   7. CONTACTO (sección con formulario)
   ======================================================== */
.contact-section{
    padding:40px 0 20px;
    color:var(--text);
}
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:start;
}
.contact-info .section-title{ margin-bottom:18px; }
.contact-info .contact-line{
    margin:0 0 6px;
    font-size:16px;
}
.contact-info .contact-line a{
    color:var(--text);
    text-decoration:none;
    transition:color .25s var(--ease);
}
.contact-info .contact-line a:hover{ color:var(--accent); }

.contact-form{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.contact-form .field{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.contact-form label{
    font-size:13px;
    color:var(--muted);
    letter-spacing:.01em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
    background:transparent;
    border:0;
    border-bottom:1px solid #666;
    color:var(--text);
    font:inherit;
    font-size:15px;
    padding:6px 0 8px;
    outline:none;
    width:100%;
    transition:border-color .25s var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus{ border-bottom-color:var(--accent); }
.contact-form .field.has-error input,
.contact-form .field.has-error textarea{ border-bottom-color:#ff4d4d; }

.contact-form .hp-field{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none;
}

.contact-form .check{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
    font-size:14px;
    color:var(--muted);
    cursor:pointer;
}
.contact-form .check input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:16px; height:16px;
    border:1px solid #666;
    border-radius:3px;
    background:transparent;
    cursor:pointer;
    flex-shrink:0;
    position:relative;
    transition:border-color .2s var(--ease), background .2s var(--ease);
}
.contact-form .check input[type="checkbox"]:checked{
    background:var(--accent);
    border-color:var(--accent);
}
.contact-form .check input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;
    left:4px; top:1px;
    width:5px; height:9px;
    border:solid #000;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}
.contact-form .check.has-error input[type="checkbox"]{ border-color:#ff4d4d; }
.contact-form .check a{ color:var(--text); text-decoration:underline; }

.form-feedback{
    min-height:1.2em;
    font-size:13px;
    color:var(--muted);
    margin:2px 0;
}
.form-feedback.is-error   { color:#ff6b6b; }
.form-feedback.is-success { color:#6be28a; }
.form-feedback.is-info    { color:var(--muted); }

.contact-form .form-submit{
    align-self:flex-start;
    margin-top:12px;
}
.contact-form .form-submit.is-loading{ opacity:.65; cursor:wait; }
.contact-form .form-submit:disabled{ cursor:not-allowed; }

/* ========================================================
   8. FOOTER (centrado siempre)
   ======================================================== */
.site-footer{
    padding:30px 0 36px;
    font-size:13px;
    color:var(--muted);
    border-top:1px solid var(--line);
    margin-top:24px;
}
.footer-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:10px;
}
.footer-copy{ letter-spacing:.01em; }
.footer-legal{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
}
.footer-legal a{
    color:var(--muted);
    text-decoration:underline;
    transition:color .25s var(--ease);
}
.footer-legal a:hover{ color:var(--accent); }
.footer-legal .sep{ color:var(--muted); }
.footer-socials{
    display:flex;
    gap:18px;
    margin-top:6px;
    justify-content:center;
}
.footer-socials a{
    display:inline-flex;
    width:32px; height:32px;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    transition:color .25s var(--ease);
}
.footer-socials a:hover{ color:var(--accent); }

/* ========================================================
   8. ANIMACIONES ENTRADA
   ======================================================== */
.fade-up{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.fade-up.is-visible{
    opacity:1;
    transform:translateY(0);
}

/* ========================================================
   9. RESPONSIVE
   ======================================================== */
@media (max-width: 900px){
    .nav-burger{ display:block; }
    .nav-menu{
        position:fixed;
        top:80px; right:0;
        width:80%; max-width:320px;
        height:calc(100vh - 80px);
        background:var(--bg-2);
        flex-direction:column;
        align-items:flex-start;
        padding:30px 24px;
        gap:20px;
        border-left:1px solid var(--line);
        transform:translateX(100%);
        transition:transform .35s var(--ease);
        will-change:transform;
    }
    .nav-menu.is-open{ transform:translateX(0); }
    .nav-dropdown{
        position:static;
        opacity:1; visibility:visible;
        transform:none;
        background:transparent;
        border:0;
        padding:8px 0 0 16px;
        box-shadow:none;
        display:none;
    }
    .nav-menu > li.has-dropdown.is-open .nav-dropdown{ display:block; }

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

    .contact-grid{
        grid-template-columns:1fr;
        gap:28px;
        text-align:center;
        justify-items:center;
    }
    .contact-info,
    .contact-form{ width:100%; max-width:420px; }
    .contact-info .section-title{ text-align:center; }
    .contact-form .check{ justify-content:center; }
}
@media (max-width: 560px){
    .hero{ padding:100px 0 36px; }
    .section{ padding:32px 0; }
    .projects-grid{ grid-template-columns:1fr; }
    .section-title,
    .eyebrow{ font-size:22px; }
    .accordion-trigger{ font-size:17px; padding:22px 0; }
    .footer-inner{ gap:12px; }
    .footer-legal{ font-size:12px; }
}