@charset "utf-8";
/* CSS Document */
/*======================================
ARCADNOVA
STYLE.CSS
======================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --black:#080808;
    --cream:#FFFEF2;
    --white:#ffffff;

    --pink:#E6007E;
    --blue:#132075;
    --yellow:#F7A715;
    --green:#00C77D;

    --transition:.45s cubic-bezier(.22,.61,.36,1);

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--black);

    color:white;

    font-family:'Inter',sans-serif;

    overflow-x:hidden;

}


/*======================================
NAVBAR
======================================*/

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:
    background .45s ease,
    backdrop-filter .45s ease,
    box-shadow .45s ease,
    padding .45s ease;

}


/*======================================
HOME
======================================*/

/* Estado inicial del HOME */

header:not(.inner-page){

    background:transparent;

}


/* HOME cuando haces scroll */

header.scrolled{

    background:rgba(8,8,8,.88);

    backdrop-filter:blur(18px);

    box-shadow:0 8px 35px rgba(0,0,0,.45);

}


/*======================================
PÁGINAS INTERNAS
======================================*/

header.inner-page{

    background:#2a2b2a;

    backdrop-filter:none;

    box-shadow:none;

}


/* Mantener el mismo estado aunque haya scroll */

header.inner-page.scrolled{

    background:#2a2b2a;

    backdrop-filter:none;

    box-shadow:none;

}


.navbar{

    width:min(92%,1450px);

    height:90px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/*======================================
LOGO
======================================*/

.logo{

    width:180px;

    display:flex;

    align-items:center;

}

.logo img{

    width:100%;

    transition:.5s;

}

.logo:hover img{

    transform:scale(1.03);

}


/*======================================
MENU
======================================*/

nav ul{

    display:flex;

    gap:50px;

    list-style:none;

}

nav a{

    position:relative;

    color:white;

    text-decoration:none;

    font-size:.78rem;

    letter-spacing:.18em;

    transition:var(--transition);

    text-transform:uppercase;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:white;

    transition:.4s;

}

nav a:hover{

    letter-spacing:.24em;

}

nav a:hover::after{

    width:100%;

}


/*======================================
HAMBURGUESA
======================================*/

.menu{

    width:34px;

    height:24px;

    display:none;

    flex-direction:column;

    justify-content:space-between;

    cursor:pointer;

}

.menu span{

    width:100%;

    height:2px;

    background:white;

    transition:.4s;

}

.menu.active span:nth-child(1){

    transform:
    rotate(45deg)
    translateY(10px);

}

.menu.active span:nth-child(2){

    opacity:0;

}

.menu.active span:nth-child(3){

    transform:
    rotate(-45deg)
    translateY(-10px);

}


/*======================================
MENU MOBILE
======================================*/

@media(max-width:900px){

nav{

    position:fixed;

    top:0;

    right:-100%;

    width:100%;

    height:100vh;

    background:rgba(8,8,8,.97);

    backdrop-filter:blur(30px);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.6s cubic-bezier(.22,.61,.36,1);

    opacity:0;

}

nav.active{

    right:0;

    opacity:1;

}

nav ul{

    flex-direction:column;

    gap:45px;

}

nav a{

    font-size:1.4rem;

    letter-spacing:.22em;

}

.menu{

    display:flex;

    z-index:10001;

}

.hero-logo{

    width:90%;

}

.subtitle{

    font-size:.72rem;

    letter-spacing:.22em;

}

.categories{

    font-size:.68rem;

    line-height:2;

    gap:12px;

}

}

/* =====================================================
   VARIABLES
===================================================== */

:root {

    --av-bg: #fffef2;
    --av-dark: #050505;
    --av-text: #111;
    --av-muted: #666;
    --av-accent: #f6a513;
    --av-line: #deddd5;

    --av-container: 1400px;
}


/* =====================================================
   RESET
===================================================== */

.av-page *,
.av-page *::before,
.av-page *::after {
    box-sizing: border-box;
}

.av-page {
    margin: 0;
    background: var(--av-bg);
    color: var(--av-text);
    font-family: Arial, Helvetica, sans-serif;
}

.av-page img {
    max-width: 100%;
}


/* =====================================================
   CONTAINER
===================================================== */

.av-container {

    width: min(90%, var(--av-container));

    margin-inline: auto;

}


/* =====================================================
   HERO
===================================================== */

.av-hero {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background-image: url("../images/fotografia-profesional-en-queretaro.png");

    background-size: cover;

    background-position: center;

    color: white;

}


.av-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.65) 48%,
            rgba(0,0,0,.25) 100%
        );

}


.av-hero-content {

    position: relative;

    z-index: 2;

}


.av-hero-info {

    width: min(520px, 100%);

}


.av-hero-icon {

    display: block;

    width: 80px;

    height: 80px;

    max-width: 80px;

    max-height: 80px;

    object-fit: contain;

    margin-bottom: 25px;

}


.av-hero h1 {

    margin: 0 0 25px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(3.5rem, 6vw, 6rem);

    font-weight: 400;

    line-height: .88;

}


.av-hero-info p {

    max-width: 470px;

    margin: 0;

    font-size: 15px;

    line-height: 1.7;

    color: rgba(255,255,255,.82);

}


/* =====================================================
   INFORMACIÓN
===================================================== */

.av-intro {

    padding: 55px 0;

    background: var(--av-bg);

}


.av-info-grid {

    display: grid;

    grid-template-columns:
        1.15fr
        1fr
        .9fr;

}


.av-info-column {

    padding: 0 45px;

}


.av-info-column:first-child {

    padding-left: 0;

}


.av-info-column:last-child {

    padding-right: 0;

}


.av-info-column + .av-info-column {

    border-left: 1px solid var(--av-line);

}


.av-info-column h2 {

    margin: 0 0 25px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 20px;

    font-weight: 400;

    text-transform: uppercase;

}


.av-list {

    margin: 0;

    padding: 0;

    list-style: none;

}


.av-list li {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 11px;

    font-size: 15px;

    line-height: 1.4;

}


.av-check {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 17px;

    height: 17px;

    border: 2px solid var(--av-accent);

    border-radius: 50%;

    color: var(--av-accent);

    font-size: .55rem;

    font-weight: bold;

}


.av-service-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 40px;

    height: 40px;

    color: #777;

    font-size: .9rem;

}


.av-benefits p {

    max-width: 250px;

    margin: 0 0 18px;

    font-size: 15px;

    line-height: 1.55;

}


/* =====================================================
   PROCESS
===================================================== */

.av-process {

    padding: 45px 0;

    border-top: 1px solid var(--av-line);

    border-bottom: 1px solid var(--av-line);

    background: #fff;

}


.av-section-heading {

    margin-bottom: 25px;

}


.av-section-heading h2 {

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 20px;

    font-weight: 400;

    text-transform: uppercase;

}


.av-process-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    border-top: 1px solid var(--av-line);

    border-bottom: 1px solid var(--av-line);

}


.av-process-step {

    position: relative;

    min-height: 130px;

    padding: 20px 25px;

    border-right: 1px solid var(--av-line);

}


.av-process-step:first-child {

    padding-left: 0;

}


.av-process-step:last-child {

    border-right: none;

}


.av-process-number {

    display: block;

    margin-bottom: 5px;

    color: var(--av-accent);

    font-family: Georgia, serif;

    font-size: 1.15rem;

}


.av-process-step h3 {

    margin: 0 0 8px;

    font-size: 18px;

    font-weight: 700;

    text-transform: uppercase;

}


.av-process-step p {

    max-width: 150px;

    margin: 0;

    color: var(--av-muted);

    font-size: 15px;

    line-height: 1.5;

}


/* línea rosa superior */

.av-process-step::before {

    content: "";

    position: absolute;

    top: -1px;

    left: 25px;

    width: 8px;

    height: 2px;

    background: var(--av-accent);

}


.av-process-step:first-child::before {

    left: 0;

}


/* =====================================================
   WORK
===================================================== */

.av-work {

    padding: 50px 0 60px;

    background: var(--av-bg);

}


.av-work-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

}


.av-work-card {

    display: block;

    color: inherit;

    text-decoration: none;

}


.av-work-image {

    position: relative;

    aspect-ratio: 4 / 2.5;

    overflow: hidden;

    background: #111;

}


.av-work-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;

}


.av-work-card:hover img {

    transform: scale(1.04);

}


.av-work-link {

    margin-top: 25px;

    text-align: center;

}


.av-work-link a {

    color: var(--av-accent);

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-decoration: none;

}


.av-work-link span {

    margin-left: 8px;

}


/* =====================================================
   FAQ
===================================================== */

.av-faq {

    padding: 40px 0 55px;

    border-top: 1px solid var(--av-line);

    background: var(--av-bg);

}


.av-faq-grid {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 60px;

}


.av-faq-list {

    min-width: 0;

}


.av-faq-item {

    border-top: 1px solid var(--av-line);

}


.av-faq-item:last-child {

    border-bottom: 1px solid var(--av-line);

}


.av-faq-item summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 13px 0;

    cursor: pointer;

    list-style: none;

    font-size: 15px;

    font-weight: 500;

}


.av-faq-item summary::-webkit-details-marker {

    display: none;

}


.av-faq-item summary span {

    color: #777;

    font-size: .9rem;

    transition: transform .3s ease;

}


.av-faq-item[open] summary span {

    transform: rotate(180deg);

}


.av-faq-answer {

    padding: 0 25px 18px 0;

}


.av-faq-answer p {

    max-width: 550px;

    margin: 0;

    color: var(--av-muted);

    font-size: 15px;

    line-height: 1.6;

}


.av-faq-description {

    padding-left: 40px;

    border-left: 1px solid var(--av-line);

}


.av-faq-description p {

    max-width: 360px;

    margin: 0 0 20px;

    color: #555;

    font-size: 15px;

    line-height: 1.65;

}


/* =====================================================
   CTA
===================================================== */

.av-cta {

    position: relative;

    overflow: hidden;

    padding: 80px 0;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.94),
            rgba(0,0,0,.72)
        ),

        url("img/cta-audiovisual.jpg")
        center / cover;

    color: white;

}


.av-cta-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

}


.av-cta-label {

    display: block;

    margin-bottom: 15px;

    font-size: .65rem;

    letter-spacing: .15em;

}


.av-cta h2 {

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.5rem, 5vw, 5rem);

    font-weight: 400;

    line-height: .9;

}


.av-cta-action {

    width: min(330px, 100%);

}


.av-cta-action p {

    margin: 0 0 20px;

    color: #bbb;

    font-size: 15px;

    line-height: 1.6;

}


.av-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    width: 100%;

    padding: 15px 20px;

    background: white;

    color: #111;

    font-size: .68rem;

    font-weight: 700;

    text-decoration: none;

}


.av-cta-button span {

    font-size: 1rem;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .av-info-grid {

        grid-template-columns: 1fr 1fr;

        gap: 35px;

    }


    .av-info-column:last-child {

        grid-column: 1 / -1;

        padding: 30px 0 0;

        border-top: 1px solid var(--av-line);

        border-left: none;

    }


    .av-benefits {

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        gap: 25px;

    }


    .av-benefits h2 {

        grid-column: 1 / -1;

    }


    .av-benefits p {

        margin: 0;

    }


    .av-process-grid {

        grid-template-columns: repeat(3, 1fr);

    }


    .av-process-step:nth-child(3) {

        border-right: none;

    }


    .av-process-step:nth-child(-n+3) {

        border-bottom: 1px solid var(--av-line);

    }


    .av-process-step:nth-child(4)::before,
    .av-process-step:nth-child(5)::before {

        top: -1px;

    }


    .av-work-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .av-faq-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .av-faq-description {

        padding: 30px 0 0;

        border-top: 1px solid var(--av-line);

        border-left: none;

    }


    .av-cta-content {

        align-items: flex-start;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .av-container {

        width: min(88%, var(--av-container));

    }


    /* HERO */

    .av-hero {

        min-height: 580px;

        background-position: 62% center;

    }


    .av-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.92) 0%,
                rgba(0,0,0,.65) 100%
            );

    }


    .av-hero-icon {

        width: 65px;

        height: 65px;

        max-width: 65px;

        max-height: 65px;

        margin-bottom: 20px;

    }


    .av-hero h1 {

        font-size: clamp(3rem, 14vw, 3rem);

    }


    .av-hero-info p {

        font-size: .85rem;

    }


    /* INFO */

    .av-intro {

        padding: 45px 0;

    }


    .av-info-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .av-info-column {

        padding: 0;

    }


    .av-info-column + .av-info-column {

        padding-top: 30px;

        border-top: 1px solid var(--av-line);

        border-left: none;

    }


    .av-info-column:last-child {

        padding-top: 30px;

    }


    .av-benefits {

        display: block;

    }


    .av-benefits h2 {

        margin-bottom: 20px;

    }


    .av-benefits p {

        margin-bottom: 12px;

    }


    /* PROCESS */

    .av-process {

        padding: 40px 0;

    }


    .av-process-grid {

        grid-template-columns: 1fr;

    }


    .av-process-step {

        min-height: auto;

        padding: 20px 0;

        border-right: none;

        border-bottom: 1px solid var(--av-line);

    }


    .av-process-step:last-child {

        border-bottom: none;

    }


    .av-process-step::before,
    .av-process-step:first-child::before {

        left: 0;

    }


    .av-process-step p {

        max-width: 100%;

    }


    /* WORK */

    .av-work {

        padding: 45px 0;

    }


    .av-work-grid {

        grid-template-columns: 1fr 1fr;

        gap: 8px;

    }


    .av-work-image {

        aspect-ratio: 4 / 3;

    }


    /* FAQ */

    .av-faq {

        padding: 40px 0;

    }


    .av-faq-description {

        padding-top: 25px;

    }


    /* CTA */

    .av-cta {

        padding: 75px 0;

        background-position: 70% center;

    }


    .av-cta-content {

        flex-direction: column;

        gap: 40px;

    }


    .av-cta-action {

        width: 100%;

    }

}

/*==================================================
FOOTER
==================================================*/

.footer{

    background:#080808;

    border-top:1px solid rgba(255,255,255,.08);

    padding:45px 0;

}

.footer-container{

    width:min(92%,1400px);

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    align-items:center;

    gap:25px;

}

.footer-logo img{

    width:220px;

}

.footer-copy{

    text-align:center;

    color:#ddd;

    line-height:2;

    letter-spacing:.18em;

    text-transform:uppercase;

    font-size:.82rem;

}

.footer-text{

    color:white;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:.22em;

    line-height:2;

}

.footer-star{

    display:flex;

    justify-content:flex-end;

}

.footer-star img{

    width:65px;

}

/*==================================================
ANIMACIONES
==================================================*/

.contact-info,

.contact-form{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.reveal.active .contact-info{

    opacity:1;

    transform:none;

}

.reveal.active .contact-form{

    opacity:1;

    transform:none;

    transition-delay:.25s;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1100px){

.contact-container{

    grid-template-columns:1fr;

    gap:70px;

}

.contact::after{

    width:520px;

    height:520px;

    right:-170px;

}

.footer-container{

    grid-template-columns:1fr;

    text-align:center;

    gap:45px;

}

.footer-star{

    justify-content:center;

}

}

@media(max-width:768px){

.contact{

    padding:90px 0 50px;

}

.contact-info h2{

    font-size:4.2rem;

}

.contact-description{

    font-size:1.15rem;

    line-height:1.7;

}

.contact-details a,

.contact-details span{

    font-size:1.15rem;

}

.contact-social i{

    font-size:1.6rem;

}

.contact-social span{

    font-size:1rem;

}

.btn-contact{

    width:100%;

}

.contact::after{

    width:360px;

    height:360px;

    right:-180px;

    opacity:.08;

}

.footer-logo img{

    width:180px;

}

.footer-star img{

    width:48px;

}

}