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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:#333;
    background:#fff;
}

/*=========================================
CONTENEDOR
=========================================*/

.contenedor{

    width:90%;
    max-width:1200px;

    margin:auto;

}

/*=========================================
HEADER
=========================================*/

header{

    width:100%;

    height:90px;

    background:white;

    position:fixed;

    top:0;
    left:0;

    z-index:1000;

    box-shadow:0 4px 20px rgba(0,0,0,.08);

}

header .contenedor{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:32px;

    font-weight:700;

    color:#222;

}

.logo span{

    color:#c78c2b;

}

nav ul{

    display:flex;

    gap:40px;

    list-style:none;

}

nav a{

    text-decoration:none;

    color:#333;

    font-weight:500;

    transition:.3s;

}

nav a:hover{

    color:#c78c2b;

}

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

.hero{

    margin-top:90px;

    height:90vh;

    min-height:700px;

    background-image: url("imagenes/portada.png");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    position:relative;

}

.overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

}

.hero-contenido{
    position:relative;
    z-index:2;

    width:85%;
    max-width:1150px;

    margin:0 auto;

    color:white;

    padding-left:160px;
}

.hero-contenido h1{
    font-size:58px;
    max-width:850px;
    line-height:1.08;
    margin-bottom:5px;
    font-weight:700;
    letter-spacing:-1.5px;
    color:#ffffff;
}

.hero-eslogan{
    font-family:'Allura', cursive;
    color:#f2a11f;
    font-size:50px;
    font-weight:400;
    line-height:1.2;

    margin:4px 0 22px 90px;

    text-shadow:
        0 2px 5px rgba(0,0,0,.75),
        0 0 2px rgba(242,161,31,.35);
}

.hero-contenido p{
    font-size:19px;
    max-width:650px;
    line-height:1.6;
    margin-bottom:28px;
    color:#ffffff;
    font-weight:400;
}

.boton{
    display:inline-block;
    padding:16px 32px;
    background:#c78c2b;
    color:white;
    text-decoration:none;
    border-radius:6px;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}

.boton:hover{
    background:#a8741f;
    transform:translateY(-3px);
}

/*=========================================
SECCIONES
=========================================*/

section{

    padding:100px 0;

}


/*=========================================
SERVICIOS
=========================================*/
.servicios{
    background:#f7f6f3;
    padding:75px 0 90px;
}

/* TÍTULO */

.titulo-seccion{
    text-align:center;
    max-width:700px;
    margin:0 auto 60px;
}

.titulo-seccion span{
    display:block;
    color:#c78c2b;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:10px;
}

.titulo-seccion h2{
    color:#222;
    font-size:38px;
    line-height:1.2;
    margin:12px 0 15px;
}

.titulo-seccion p{
    color:#666;
    font-size:16px;
    line-height:1.7;
}


/* CUADRÍCULA */

.servicios-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:20px;
}


/* TARJETAS */

.servicio-card{
    background:#ffffff;
    padding:40px 25px;
    text-align:center;
    border-radius:10px;

    box-shadow:0 8px 30px rgba(0,0,0,0.07);

    transition:.3s;
}

.servicio-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.12);
}


/* ICONOS */

.servicio-icono{
    width:70px;
    height:70px;

    margin:0 auto 25px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#f4eee4;

    border-radius:50%;

    font-size:30px;
}


/* TÍTULOS DE LAS TARJETAS */

.servicio-card h3{
    color:#222;
    font-size:18px;
    margin-bottom:15px;
}


/* TEXTOS */

.servicio-card p{
    color:#666;
    font-size:14px;
    line-height:1.7;
}


/*=========================================
QUIÉNES SOMOS
=========================================*/

.nosotros{
    padding:75px 0;
    background:#ffffff;
}

.nosotros .contenedor{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

.nosotros-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}


/* FOTO */

.nosotros-imagen{
    position:relative;
    width:100%;
}

.nosotros-imagen img{
    display:block;
    width:100%;
    height:480px;
    object-fit:cover;
    border-radius:12px;
}


/* +6 AÑOS */

.experiencia{
    position:absolute;
    right:-20px;
    bottom:30px;

    width:145px;
    height:130px;

    background:#c78c2b;
    color:#ffffff;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
    border-radius:10px;

    box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.experiencia strong{
    font-size:42px;
    line-height:1;
}

.experiencia span{
    font-size:13px;
    margin-top:8px;
}


/* CONTENIDO */

.nosotros-contenido{
    padding-left:10px;
}

.etiqueta{
    display:block;

    color:#c78c2b;

    font-size:13px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:12px;
}

.nosotros-contenido h2{
    color:#222;

    font-size:38px;
    line-height:1.25;

    margin-bottom:25px;
}

.nosotros-contenido > p{
    color:#666;

    font-size:15px;
    line-height:1.8;

    margin-bottom:16px;
}


/* VALORES */

.valores{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:15px 20px;

    margin:30px 0;
}

.valores div{
    display:flex;
    align-items:center;
    gap:10px;
}

.valores span{
    width:28px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    background:#f4eee4;
    color:#c78c2b;

    border-radius:50%;

    font-weight:700;
}

.valores p{
    margin:0;

    color:#333;

    font-size:14px;
}


/* BOTÓN */

.boton-nosotros{
    display:inline-block;

    padding:15px 28px;

    background:#222;
    color:#fff;

    text-decoration:none;

    border-radius:7px;

    font-weight:600;

    transition:.3s;
}

.boton-nosotros:hover{
    background:#c78c2b;
    transform:translateY(-3px);
}
/*=========================================
NUESTROS TRABAJOS - GALERÍA
=========================================*/

.trabajos{
    padding:100px 0;
    background:#f7f6f3;
}


/* CUADRÍCULA DE FOTOS */

.galeria{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
    margin-top:-10px;
}


/* CADA FOTO */

.trabajo{
    position:relative;

    height:320px;

    overflow:hidden;

    border-radius:12px;

    box-shadow:0 8px 25px rgba(0,0,0,.10);

    cursor:pointer;
}


/* IMAGEN */

.trabajo img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .5s ease;
}


/* EFECTO AL PASAR EL RATÓN */

.trabajo:hover img{
    transform:scale(1.08);
}
/* ETIQUETAS ANTES Y DESPUÉS */

.antes-despues{
    position:relative;
}

.etiqueta-foto{
    position:absolute;

    left:15px;
    bottom:15px;

    background:#c78c2b;
    color:white;

    padding:7px 14px;

    border-radius:5px;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    z-index:2;
}

/*=========================================
OPINIONES
=========================================*/

.opiniones{
    padding:100px 0;
    background:#ffffff;
}


.opinion-invitacion{
    max-width:700px;

    margin:45px auto 0;

    padding:50px;

    text-align:center;

    background:#f7f6f3;

    border-radius:14px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);
}


.estrellas-grandes{
    color:#c98b1c;

    font-size:28px;

    letter-spacing:5px;

    margin-bottom:20px;
}


.opinion-invitacion h3{
    color:#222;

    font-size:24px;

    margin-bottom:15px;
}


.opinion-invitacion p{
    color:#666;

    font-size:15px;

    line-height:1.8;

    max-width:520px;

    margin:0 auto 30px;
}


.boton-opinion{
    display:inline-block;

    padding:14px 28px;

    background:#c98b1c;

    color:white;

    text-decoration:none;

    font-weight:600;

    border-radius:6px;

    transition:.3s;
}


.boton-opinion:hover{
    background:#a97315;

    transform:translateY(-2px);
}
/*=========================================
CONTACTO
=========================================*/

.contacto{
    padding:100px 0;
    background:#f7f6f3;
}


/* DOS COLUMNAS */

.contacto-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

/* PARTE IZQUIERDA */

.contacto-info{
    width:100%;
}

.contacto-caja{
    width:100%;
    background:#222;
    color:white;
    padding:55px 50px;
    border-radius:14px;
    box-shadow:0 12px 35px rgba(0,0,0,.15);
}

.contacto-intro{
    color:#666;

    font-size:15px;

    line-height:1.8;

    margin-bottom:35px;

    max-width:550px;
}


/* DATOS DE CONTACTO */

.contacto-dato{
    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;
}


.contacto-icono{
    width:50px;
    height:50px;

    border-radius:50%;

    background:#ffffff;

    display:flex;

    justify-content:center;
    align-items:center;

    font-size:21px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    flex-shrink:0;
}


.contacto-dato h3{
    color:#222;

    font-size:15px;

    margin-bottom:3px;
}


.contacto-dato p{
    color:#666;

    font-size:14px;

    margin:0;
}


/* CAJA DERECHA */


.contacto-caja > span{
    color:#d18c1d;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;
}


.contacto-caja h2{
    font-size:32px;

    margin:12px 0 18px;

    line-height:1.2;
}


.contacto-caja p{
    color:#d7d7d7;

    font-size:14px;

    line-height:1.8;

    margin-bottom:30px;
}


/* BOTÓN WHATSAPP */

.boton-whatsapp{
    display:block;

    width:100%;

    padding:16px 20px;

    background:#25D366;

    color:white;

    text-decoration:none;

    text-align:center;

    font-size:15px;

    font-weight:700;

    border-radius:7px;

    transition:.3s;
}


.boton-whatsapp:hover{
    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.20);
}


/* TEXTO DEBAJO DEL BOTÓN */

.contacto-caja small{
    display:block;

    text-align:center;

    color:#aaa;

    margin-top:15px;

    font-size:12px;
}

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

.footer{
    background:#1f1f1f;
    color:#ffffff;
    padding:75px 0 0;
}


/* COLUMNAS */

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1.3fr 1.3fr;
    gap:60px;
    padding-bottom:60px;
}


/* MARCA */

.footer-marca h2{
    font-size:25px;
    margin-bottom:10px;
}

.footer-marca h2 span{
    color:#c78c2b;
}

.footer-eslogan{
    font-family: 'Allura', cursive;
    font-size: 34px !important;
    line-height: 1.1;
    color: #e5a52b !important;
    font-weight: 400;
}

.footer-marca p{
    color:#bcbcbc;
    font-size:13px;
    line-height:1.8;
    max-width:320px;
}


/* COLUMNAS */

.footer-columna h3{
    font-size:16px;
    margin-bottom:22px;
    color:#ffffff;
}

.footer-columna a,
.footer-columna p{
    display:block;
    color:#bcbcbc;
    text-decoration:none;
    font-size:13px;
    margin-bottom:12px;
    line-height:1.6;
}

.footer-columna a{
    transition:.3s;
}

.footer-columna a:hover{
    color:#c78c2b;
    transform:translateX(3px);
}


/* PARTE INFERIOR */

.footer-inferior{
    border-top:1px solid #333;
    padding:22px 0;
    text-align:center;
}

.footer-inferior p{
    color:#888;
    font-size:12px;
}

/*=========================================
WHATSAPP FLOTANTE
=========================================*/

.whatsapp-flotante{
    position:fixed;

    right:25px;
    bottom:25px;

    z-index:2000;

    display:flex;
    align-items:center;
    gap:10px;

    background:#25D366;
    color:#ffffff;

    text-decoration:none;

    padding:13px 18px;

    border-radius:50px;

    font-weight:600;
    font-size:14px;

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

    transition:.3s;
}


.whatsapp-flotante:hover{
    transform:translateY(-4px) scale(1.03);

    box-shadow:0 12px 30px rgba(0,0,0,.30);
}


.whatsapp-icono{
    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#ffffff;
    color:#25D366;

    border-radius:50%;

    font-size:18px;
}


.whatsapp-texto{
    white-space:nowrap;
}
.whatsapp-icono img{
    width:20px;
    height:20px;
    display:block;
}

/*=========================================
RESPONSIVE - TABLET Y MÓVIL
=========================================*/

.menu-toggle{
    display:none;
}

@media (max-width: 768px){

    /* HEADER */

    /* PORTADA MÓVIL */

.hero{
    min-height:620px;
    background-position:center;
}

.hero-contenido{
    width:auto;
    max-width:none;
    margin:0;
    padding:90px 28px 50px;
}

.hero-contenido h1{
    font-size:42px;
    line-height:1.08;
    margin-bottom:20px;
    padding-left:18px;
}

.hero-contenido p{
    font-size:15px;
    line-height:1.7;
    max-width:100%;
}

.hero-contenido .boton{
    display:inline-block;
    margin-top:5px;
    padding:14px 25px;
}

.hero-eslogan{
    font-family:'Allura', cursive;
    font-size:28px;
    line-height:1.1;
    margin:12px 0 28px;
    color:#e5a52b;
    font-weight:400;

    width:100%;
    text-align:center;
}

    header{
       padding:16px 0;
    }

    header .contenedor{
    position:relative;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

  .logo{
    font-size:19px;
    text-align:left;
}

.menu-toggle{
    display:block;
    background:none;
    border:none;
    font-size:27px;
    color:#222;
    cursor:pointer;
}

header nav{
    display:none;

    position:absolute;
    top:100%;
    left:0;
    width:100%;

    background:#ffffff;
    padding:20px;

    box-shadow:0 10px 20px rgba(0,0,0,.10);
}

header nav.activo{
    display:block;
}

header nav ul{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
}

header nav ul li a{
    font-size:14px;
}

/*=========================================
SERVICIOS - MÓVIL
=========================================*/

.servicios{
    padding:65px 0;
}

.titulo-seccion{
    padding:0 20px;
}

.titulo-seccion h2{
    font-size:28px;
    line-height:1.2;
}

.titulo-seccion p{
    font-size:14px;
    line-height:1.7;
}

.servicios-grid{
    grid-template-columns:1fr;
    gap:18px;
    width:100%;
    max-width:340px;
    margin:35px auto 0;
    padding:0 15px;
}

.servicio-card{
    padding:28px 22px;
    min-height:auto;
}

.servicio-icono{
    margin-bottom:15px;
}

.servicio-card h3{
    font-size:16px;
    margin-bottom:10px;
}

.servicio-card p{
    font-size:13px;
    line-height:1.6;
}

/* WHATSAPP FLOTANTE - MÓVIL */

.whatsapp-flotante{
    width:52px;
    height:52px;
    padding:0;
    right:16px;
    bottom:16px;

    justify-content:center;
    border-radius:50%;
}

.whatsapp-texto{
    display:none;
}

.whatsapp-icono{
    width:34px;
    height:34px;
}

/*=========================================
GALERÍA - MÓVIL
=========================================*/

.trabajos{
    padding:65px 0;
}

.galeria{
    grid-template-columns:1fr;
    gap:18px;

    max-width:340px;
    margin:35px auto 0;
    padding:0 15px;
}

.trabajo{
    height:280px;
    border-radius:12px;
}


/*=========================================
QUIÉNES SOMOS - MÓVIL
=========================================*/

.nosotros{
    padding:65px 0;
}

.nosotros-grid{
    grid-template-columns:1fr;
    gap:40px;
    padding:0 25px;
}

.nosotros-imagen{
    max-width:370px;
    margin:0 auto;
}

.nosotros-imagen img{
    height:350px;
}
.experiencia{
    right:12px;
    bottom:12px;

    width:105px;
    height:82px;
    padding:10px;

    border-radius:8px;
}

.experiencia strong{
    font-size:25px;
    line-height:1;
}

.experiencia span{
    font-size:9px;
    margin-top:6px;
    line-height:1.2;
}

.nosotros-contenido{
    text-align:left;
}

.nosotros-contenido h2{
    font-size:27px;
    line-height:1.2;
    margin:10px 0 20px;
}

.nosotros-contenido p{
    font-size:14px;
    line-height:1.7;
}

.valores{
    grid-template-columns:1fr;
    gap:12px;
    margin:25px 0;
}

.boton-nosotros{
    display:inline-block;
}


/*=========================================
OPINIONES - MÓVIL
=========================================*/

.opiniones{
    padding:65px 0;
}

.opiniones .titulo-seccion{
    margin-bottom:25px;
}

.opinion-invitacion{
    margin-top:0;
}

/*=========================================
CONTACTO - MÓVIL
=========================================*/

.contacto{
    padding:85px 0 65px;
}

.contacto-grid{
    grid-template-columns:1fr;
    gap:35px;
    padding:0 20px;
}

.contacto-info h2{
    font-size:27px;
    line-height:1.2;
    margin-bottom:15px;
}

.contacto-intro{
    font-size:14px;
    line-height:1.7;
    margin-bottom:30px;
    max-width:100%;
}

.contacto-dato{
    gap:15px;
    margin-bottom:20px;
}

.contacto-icono{
    width:45px;
    height:45px;
    font-size:18px;
}

.contacto-dato h3{
    font-size:14px;
}

.contacto-dato p{
    font-size:13px;
}

.contacto-caja{
    padding:35px 25px;
    border-radius:12px;
}

.contacto-caja h2{
    font-size:26px;
    margin:10px 0 15px;
}

.contacto-caja p{
    font-size:13px;
    line-height:1.7;
    margin-bottom:25px;
}

.boton-whatsapp{
    padding:14px 15px;
    font-size:13px;
}

/*=========================================
FOOTER - MÓVIL
=========================================*/

.footer-grid{
    grid-template-columns:1fr;
    gap:28px;
}

footer{
    padding-top:50px;
}


} /* AQUÍ TERMINA EL @media */