/*==================================================
AMARILLO STUDIO
RESPONSIVE.CSS
PARTE 1
HEADER + HERO
==================================================*/


/*=====================================
LAPTOP
=====================================*/

@media (max-width:1200px){

.hero-grid{

    gap:60px;

}

.hero h1{

    font-size:64px;

}

.hero p{

    width:100%;

    font-size:21px;

}

.editor{

    width:100%;

}

}


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

@media (max-width:992px){

.container{

    width:92%;

}

/* HEADER */

.header .container{

    height:76px;

}

.logo-title{

    font-size:34px;

}

.logo-subtitle{

    font-size:16px;

}

/* escritorio */

.desktop-btn{

    display:none !important;

}

/* hamburguesa */

.menu-toggle{

    display:flex !important;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    width:48px;

    height:48px;

    border:none;

    background:#FFC700;

    border-radius:12px;

    cursor:pointer;

    z-index:3000;

}

.menu-toggle span{

    width:24px;

    height:3px;

    background:#111;

    border-radius:20px;

    margin:3px 0;

    transition:.35s;

}

/* menú */

.menu{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    max-width:90%;

    height:100vh;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

    z-index:2500;

    box-shadow:-10px 0 40px rgba(0,0,0,.12);

}

.menu.active{

    right:0;

}

.menu ul{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:26px;

    width:100%;

    padding:0 40px;

}

.menu li{

    width:100%;

}

.menu a{

    display:block;

    width:100%;

    font-size:20px;

}

.mobile-btn{

    display:block !important;

    margin-top:20px;

}

.mobile-btn .btn-header{

    width:100%;

    justify-content:center;

}

/* HERO */

.hero{

    min-height:auto;

    padding-top:140px;

    padding-bottom:90px;

}

.hero-grid{

    grid-template-columns:1fr;

    gap:60px;

}

.hero-left{

    text-align:center;

    padding-right:0;

}

.hero h1{

    font-size:56px;

    letter-spacing:-2px;

}

.hero p{

    width:100%;

    font-size:20px;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-tech{

    justify-content:center;

}

.editor{

    width:100%;

    max-width:760px;

    margin:auto;

}

}


/*=====================================
CELULAR
=====================================*/

@media (max-width:768px){

.hero{

    padding-top:120px;

    padding-bottom:70px;

}

.hero h1{

    font-size:42px;

    line-height:1.05;

}

.hero p{

    font-size:18px;

}

.hero-buttons{

    flex-direction:column;

    gap:15px;

}

.btn-primary,
.btn-secondary{

    width:100%;

    justify-content:center;

}

.editor{

    border-radius:18px;

}

.editor-main{

    flex-direction:column;

}

.sidebar{

    display:none;

}

.code-area{

    padding:20px;

}

#code{

    font-size:14px;

    line-height:1.8;

}

}


/*=====================================
IPHONE
=====================================*/

@media (max-width:576px){

.container{

    width:90%;

}

.logo-title{

    font-size:28px;

}

.logo-subtitle{

    font-size:14px;

}

.hero h1{

    font-size:36px;

}

.hero p{

    font-size:17px;

}

.hero-badge{

    font-size:12px;

}

.editor-top{

    height:46px;

}

.tabs{

    display:none;

}

}

/*==================================================
RESPONSIVE
PARTE 2
SOLUTION + SERVICES
==================================================*/


/*=========================================
992px
=========================================*/

@media (max-width:992px){

/*==============================
SOLUTION
==============================*/

.solution{

    padding:90px 0;

}

.solution-grid,
.solution-grid.reverse{

    display:flex;

    flex-direction:column;

    gap:45px;

}

.solution-grid.reverse .solution-image{

    order:1;

}

.solution-grid.reverse .solution-text{

    order:2;

}

.solution-text{

    width:100%;

    text-align:center;

}

.solution-text h2{

    font-size:42px;

    line-height:1.15;

}

.solution-text p{

    width:100%;

    max-width:700px;

    margin:25px auto;

}

.solution-text ul{

    display:inline-block;

    text-align:left;

}

.solution-image{

    width:100%;

    display:flex;

    justify-content:center;

}

.solution-image img{

    width:100%;

    max-width:760px;

}


/*==============================
SERVICES
==============================*/

.services{

    padding:100px 0;

}

.services-list{

    gap:24px;

}

.service-item{

    grid-template-columns:1fr;

    gap:25px;

    text-align:center;

}

.number{

    font-size:56px;

}

.arrow{

    margin:auto;

}

}


/*=========================================
768px
=========================================*/

@media (max-width:768px){

.solution{

    padding:75px 0;

}

.solution-grid{

    gap:35px;

}

.solution-text h2{

    font-size:36px;

}

.solution-text p{

    font-size:17px;

}

.solution-text li{

    font-size:16px;

    margin-bottom:10px;

}

.solution-image img{

    border-radius:20px;

}

/*========================*/

.services{

    padding:80px 0;

}

.section-title{

    margin-bottom:60px;

}

.section-title h2{

    font-size:36px;

}

.section-title p{

    width:100%;

    font-size:17px;

}

.service-item{

    padding:30px;

}

.service-info h3{

    font-size:24px;

}

.service-info p{

    font-size:16px;

}

}


/*=========================================
576px
=========================================*/

@media (max-width:576px){

.solution{

    padding:60px 0;

}

.solution-text{

    text-align:left;

}

.solution-text h2{

    font-size:30px;

}

.solution-text p{

    font-size:16px;

}

.solution-text li{

    font-size:15px;

}

.solution-image img{

    border-radius:18px;

}

/*========================*/

.services{

    padding:70px 0;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:30px;

}

.section-title p{

    font-size:16px;

}

.service-item{

    padding:24px;

}

.number{

    font-size:42px;

}

.service-info h3{

    font-size:21px;

}

.service-info p{

    font-size:15px;

    line-height:1.7;

}

.arrow{

    width:46px;

    height:46px;

}

}/*==================================================
RESPONSIVE
PARTE 3
WHY + PROCESS
==================================================*/


/*=========================================
992px
=========================================*/

@media (max-width:992px){

/*==============================
WHY
==============================*/

.why{

    padding:100px 0;

}

.why-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:30px;

}

.why-item{

    display:flex;

    gap:25px;

    align-items:flex-start;

    padding:35px;

}

.why-number{

    min-width:70px;

    font-size:46px;

}

.why-content h3{

    font-size:26px;

    margin-bottom:12px;

}

.why-content p{

    font-size:17px;

    line-height:1.8;

}


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

.process{

    padding:100px 0;

}

.process-line{

    display:grid;

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

    gap:35px;

}

.process-line::before{

    display:none;

}

.step{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.circle{

    margin-bottom:20px;

}

.step h3{

    font-size:24px;

}

.step p{

    font-size:16px;

    line-height:1.8;

}

}


/*=========================================
768px
=========================================*/

@media (max-width:768px){

.why{

    padding:80px 0;

}

.why-item{

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.why-number{

    margin-bottom:10px;

    font-size:40px;

}

.why-content h3{

    font-size:23px;

}

.why-content p{

    font-size:16px;

}

.process{

    padding:80px 0;

}

.process-line{

    grid-template-columns:1fr;

}

.step{

    text-align:center;

}

.circle{

    margin:0 auto 20px;

}

.step h3{

    font-size:22px;

}

.step p{

    font-size:15px;

}

}


/*=========================================
576px
=========================================*/

@media (max-width:576px){

.why{

    padding:65px 0;

}

.why-item{

    padding:25px;

}

.why-number{

    font-size:34px;

}

.why-content h3{

    font-size:20px;

}

.why-content p{

    font-size:15px;

}

.process{

    padding:65px 0;

}

.step{

    padding:25px;

}

.circle{

    width:60px;

    height:60px;

    font-size:22px;

}

.step h3{

    font-size:20px;

}

.step p{

    font-size:15px;

    line-height:1.7;

}

}

/*==================================================
RESPONSIVE
PARTE 4
CTA + CONTACTO + FOOTER
==================================================*/


/*=========================================
992px
=========================================*/

@media (max-width:992px){

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

.cta{

    padding:110px 0;

    text-align:center;

}

.cta h2{

    font-size:48px;

    line-height:1.1;

}

.cta p{

    max-width:700px;

    margin:25px auto 40px;

    font-size:18px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}


/*==============================
CONTACTO
==============================*/

.contact{

    padding:100px 0;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:60px;

}

.contact-info{

    text-align:center;

}

.contact-info h2{

    font-size:42px;

}

.contact-info p{

    max-width:700px;

    margin:auto;

}

.contact-form{

    max-width:760px;

    margin:auto;

}


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

.footer{

    padding:70px 0 35px;

}

.footer-grid{

    display:grid;

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

    gap:45px;

}

.footer-logo{

    grid-column:1 / -1;

    text-align:center;

}

}


/*=========================================
768px
=========================================*/

@media (max-width:768px){

.cta{

    padding:85px 0;

}

.cta h2{

    font-size:38px;

}

.cta p{

    font-size:17px;

}

.cta-buttons{

    flex-direction:column;

}

.cta-buttons a{

    width:100%;

    justify-content:center;

}

/*========================*/

.contact{

    padding:80px 0;

}

.contact-info h2{

    font-size:34px;

}

.contact-info p{

    font-size:17px;

}

.contact-form{

    padding:30px;

}

/*========================*/

.footer{

    padding:60px 0 25px;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

    gap:35px;

}

.footer ul{

    padding:0;

}

.footer li{

    list-style:none;

}

}


/*=========================================
576px
=========================================*/

@media (max-width:576px){

.cta{

    padding:70px 0;

}

.cta h2{

    font-size:30px;

}

.cta p{

    font-size:16px;

}

.contact{

    padding:65px 0;

}

.contact-info h2{

    font-size:28px;

}

.contact-info p{

    font-size:16px;

}

.contact-form{

    padding:22px;

}

.contact-form input,
.contact-form textarea{

    font-size:15px;

}

.footer{

    padding:50px 0 20px;

}

.footer h3{

    font-size:22px;

}

.footer p,
.footer a{

    font-size:15px;

}

.copyright{

    margin-top:35px;

    font-size:14px;

}

}/*==================================================
RESPONSIVE
PARTE 5
AJUSTES GLOBALES
==================================================*/


/*=========================================
GLOBAL
=========================================*/

html{

    overflow-x:hidden;

    scroll-behavior:smooth;

}

body{

    overflow-x:hidden;

}

img{

    max-width:100%;

    height:auto;

    display:block;

}

video{

    max-width:100%;

    height:auto;

}

iframe{

    max-width:100%;

}

section{

    overflow:hidden;

}

.container{

    width:min(92%,1200px);

    margin:auto;

}


/*=========================================
BOTONES
=========================================*/

@media (max-width:768px){

.btn-primary,
.btn-secondary,
.btn-header{

    width:100%;

    justify-content:center;

}

}


/*=========================================
FORMULARIOS
=========================================*/

@media (max-width:768px){

input,
textarea,
select{

    width:100%;

    max-width:100%;

    box-sizing:border-box;

}

}


/*=========================================
EDITOR
=========================================*/

@media (max-width:768px){

.editor{

    overflow:hidden;

}

.editor pre{

    overflow:auto;

    -webkit-overflow-scrolling:touch;

}

}


/*=========================================
TABLAS
=========================================*/

@media (max-width:768px){

table{

    display:block;

    overflow-x:auto;

    white-space:nowrap;

}

}


/*=========================================
UTILIDADES
=========================================*/

.hidden-mobile{

    display:block;

}

.show-mobile{

    display:none;

}

@media(max-width:768px){

.hidden-mobile{

    display:none !important;

}

.show-mobile{

    display:block !important;

}

}


/*=========================================
IPHONE SAFE AREA
=========================================*/

@supports (padding:max(0px)){

.header{

    padding-left:max(15px,env(safe-area-inset-left));

    padding-right:max(15px,env(safe-area-inset-right));

}

.footer{

    padding-bottom:max(20px,env(safe-area-inset-bottom));

}

}


/*=========================================
REDUCCIÓN DE ANIMACIONES
=========================================*/

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}


@media (max-width:768px){

.hero{

    overflow:hidden;

}

.hero-image,
.hero-right{

    width:100%;
    margin-top:35px;

}

.hero-image img,
.hero-right img{

    width:100%;
    max-width:100%;
    height:auto;
    object-fit:contain;

}

}