/*
Theme Name: Porto Florizen Child
Template: porto
Version: 2.0.0
*/


/* =====================================================
   VARIABLES GENERALES FLORIZEN
===================================================== */

:root{


--fz-verde-oscuro:#1F3F2F;

--fz-verde:#2C5941;

--fz-verde-claro:#E7EEE7;


--fz-crema:#FBF7EF;

--fz-crema-suave:#F3EFE4;


--fz-dorado:#C9982E;

--fz-dorado-suave:#E6C878;


--fz-texto:#232823;

--fz-texto-suave:#5C6660;


--fz-blanco:#FFFFFF;


--fz-borde:#E3DFD2;



--fz-font-titulo:'Playfair Display',serif;

--fz-font-cuerpo:'Poppins',sans-serif;


--fz-radius:16px;

--fz-radius-pill:999px;


--fz-sombra:
0 12px 35px rgba(31,63,47,.12);


}



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


*{

box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}



body.fz-body{


margin:0;

font-family:var(--fz-font-cuerpo);

color:var(--fz-texto);

background:var(--fz-crema);

-webkit-font-smoothing:antialiased;

}



img{

max-width:100%;

display:block;

}



.fz-container{


width:100%;

max-width:1200px;

margin:auto;

padding-left:24px;

padding-right:24px;


}




/* =====================================================
   TITULOS
===================================================== */


h1,
h2,
h3,
h4{


font-family:var(--fz-font-titulo);

color:var(--fz-verde-claro);

font-weight:600;

line-height:1.15;


}



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


.fz-btn{


display:inline-flex;

align-items:center;

justify-content:center;


padding:14px 30px;


border-radius:var(--fz-radius-pill);


font-size:15px;

font-weight:600;


text-decoration:none;


transition:.3s ease;


cursor:pointer;


}



.fz-btn:hover{


transform:translateY(-3px);

box-shadow:var(--fz-sombra);


}



.fz-btn--dorado{
background:linear-gradient(
135deg,
var(--fz-dorado-suave),
var(--fz-dorado)
);
color:var(--fz-verde-claro);
}



.fz-btn--verde{
background:linear-gradient(
135deg,
#4F8A63,
#2C5941
);
color:white;
box-shadow:
0 8px 20px rgba(44,89,65,.25);
}


.fz-btn--verde:hover
{
background:linear-gradient(
135deg,
#C9982E,
#E6C878
);
color:#1F3F2F;
}

/* Texto blanco botón Google Maps */

.fz-contacto .fz-btn--verde{

color:white !important;

}

.fz-btn--outline{
border:2px solid white;
color:white;
background:transparent;
}



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


.fz-header{


position:relative;

z-index:100;


width:100%;


background:#ffffff;


}



.fz-header__inner{


height:95px;


max-width:1400px;


margin:auto;


padding:0 45px;


display:flex;


align-items:center;


justify-content:space-between;


}



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


.fz-logo{


display:flex;

align-items:center;


text-decoration:none;


}



.fz-logo img{


width:150px;


height:auto;


object-fit:contain;


}





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


.fz-nav{


display:flex;


align-items:center;


gap:38px;


list-style:none;


margin:0;


padding:0;


}



.fz-nav li{


margin:0;


padding:0;


}



.fz-nav a{


font-family:var(--fz-font-cuerpo);


font-size:15px;


font-weight:600;


color:var(--fz-verde-oscuro);


text-decoration:none;


transition:.3s ease;


}



.fz-nav a:hover{


color:var(--fz-dorado);


}





/* =====================================================
   BOTÓN HEADER
===================================================== */


.fz-header .fz-btn--verde{

padding:14px 34px;

border-radius:50px;

font-size:15px;


background:linear-gradient(
135deg,
#5B9272,
#3E7655
);


color:white;


box-shadow:
0 8px 20px rgba(44,89,65,.25);

}




.fz-header .fz-btn--verde:hover{

background:linear-gradient(
135deg,
#D6AE45,
#C9982E
);

color:white;

}







/* =====================================================
   BOTÓN MENÚ MÓVIL
===================================================== */


.fz-nav-toggle{


display:none;


background:none;


border:none;


font-size:30px;


color:var(--fz-verde-oscuro);


cursor:pointer;


}





/* =====================================================
   HERO PRINCIPAL 1920 x 700
===================================================== */


.fz-hero{


position:relative;


width:100%;


height:700px;


overflow:hidden;


}




/* Imagen principal */


.fz-hero > img{


position:absolute;


inset:0;


width:100%;


height:700px;


object-fit:cover;


object-position:center;


}





/* Capa suave para mejorar lectura */


.fz-hero::after{


content:"";


position:absolute;


inset:0;


background:
linear-gradient(
90deg,
rgba(20,45,35,.45),
rgba(20,45,35,0)
);


z-index:1;


}





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


.fz-hero__content{


position:absolute;


z-index:5;


top:50%;


left:80px;


transform:translateY(-50%);


width:460px;


}





.fz-hero__content h1{


font-family:var(--fz-font-titulo);


font-size:58px;


font-weight:600;


line-height:1.08;


color:white;


margin:0 0 25px;


letter-spacing:-1px;


}





.fz-hero__content p{


font-size:18px;


line-height:1.6;


color:white;


margin-bottom:35px;


max-width:430px;


}





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


.fz-hero__ctas{


display:flex;


gap:15px;
flex-wrap:wrap;
}



.fz-hero__ctas .fz-btn{
padding:15px 32px;
}

.fz-hero__ctas .fz-btn--dorado
{
background:var(--fz-dorado);
color:white;
}

.fz-hero__ctas .fz-btn--dorado:hover
{
background:white;
color:var(--fz-verde-oscuro);
}

/* BOTÓN VER VIDEO */

.fz-hero__ctas .fz-btn--outline{

    background:var(--fz-dorado);

    border:2px solid var(--fz-dorado);

    color:white;

}

.fz-hero__ctas .fz-btn--outline:hover{

    background:#C9982E;

    color:white;

}



.fz-hero__ctas .fz-btn--outline:hover{


background:white;


color:var(--fz-verde-oscuro);


}

/* =====================================================
   SERVICIOS PREMIUM FLOTANTES
===================================================== */


.fz-servicios{


position:relative;


z-index:10;


margin-top:-55px;


}



.fz-servicios__card{


width:90%;


max-width:1200px;


margin:auto;


background:white;


border-radius:18px;


box-shadow:
0 15px 40px rgba(31,63,47,.15);



padding:22px 30px;



display:grid;


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


align-items:center;


}





/* Cada servicio */


.fz-servicio{


text-align:center;


padding:10px 20px;


border-right:1px solid #E3DFD2;


}



.fz-servicio:last-child{


border-right:none;


}





/* Iconos dorados */


.fz-servicio__icono{


width:42px;


height:42px;


margin:0 auto 12px;


color:var(--fz-dorado);


}



.fz-servicio__icono img{


width:100%;


height:100%;


object-fit:contain;


}





.fz-servicio h3{


font-family:var(--fz-font-titulo);


font-size:18px;


margin:5px 0;


color:var(--fz-verde-oscuro);


}



.fz-servicio span{


font-size:12px;


font-weight:600;


letter-spacing:.08em;


color:var(--fz-texto-suave);


}





/* =====================================================
   PRODUCTOS DESTACADOS
===================================================== */


.fz-productos{


padding:35px 0 70px;


position:relative;


}





/* Encabezado */


.fz-section-head{


display:flex;


align-items:end;


justify-content:space-between;


margin-bottom:20px;


gap:15px;


}





.fz-section-head h2{


font-size:34px;


color:var(--fz-verde-oscuro);


}





.fz-section-head p{


color:var(--fz-texto-suave);


}





/* Ver todos */


.fz-ver-todos{


color:var(--fz-dorado);


font-weight:600;


text-decoration:none;


}





/* Grid productos */


.fz-productos__grid{


display:grid;


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


gap:25px;


}





/* Tarjetas */


.fz-producto{


background:white;


border-radius:18px;


overflow:hidden;


border:1px solid var(--fz-borde);


box-shadow:
0 8px 25px rgba(31,63,47,.08);


transition:.3s ease;


}




.fz-producto:hover{


transform:translateY(-8px);


box-shadow:
0 18px 40px rgba(31,63,47,.15);


}





/* Imagen producto */


.fz-producto__img{


height:250px;


overflow:hidden;


}





.fz-producto__img img{


width:100%;


height:100%;


object-fit:cover;


transition:.4s ease;


}





.fz-producto:hover img{


transform:scale(1.05);


}







/* Contenido tarjeta */


.fz-producto__body{


padding:18px;


display:flex;


justify-content:space-between;


gap:10px;


}





.fz-producto__body h3{


font-size:18px;


margin:0 0 8px;


}



.fz-producto__body p{


font-family:var(--fz-font-cuerpo);


font-size:14px;


color:var(--fz-texto-suave);


margin:0;


}





/* Botón + */


.fz-producto__add{


width:36px;


height:36px;


border-radius:50%;


background:var(--fz-dorado);


color:white;


display:flex;


align-items:center;


justify-content:center;


font-size:22px;


text-decoration:none;


flex-shrink:0;


}


/* =====================================================
   GALERÍA FLORIZEN
===================================================== */


.fz-galeria{


background:var(--fz-verde-claro);


padding:80px 0;


}





.fz-galeria__grid{


display:grid;


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


grid-template-rows:260px 260px;


gap:18px;


}





.fz-galeria__grid a{


display:block;


overflow:hidden;


border-radius:18px;


}





.fz-galeria__grid img{


width:100%;


height:100%;


object-fit:cover;


transition:.4s ease;


}





.fz-galeria__grid a:hover img{


transform:scale(1.06);


}




/* Imagen principal grande */


.fz-galeria__item--principal{


grid-row:1 / span 2;


}









/* =====================================================
   CATÁLOGO CERAGEM
===================================================== */


.fz-catalogo{


padding:70px 0;


}





.fz-catalogo__inner{


max-width:1200px;


margin:auto;


display:grid;


grid-template-columns:1fr 1fr;


overflow:hidden;


border-radius:20px;


background:var(--fz-verde-oscuro);


box-shadow:
0 20px 45px rgba(31,63,47,.18);


}





.fz-catalogo__texto{


padding:60px;


display:flex;


flex-direction:column;


justify-content:center;


}





.fz-catalogo__texto h2{


font-size:40px;


color:white;


margin-bottom:20px;


}





.fz-catalogo__texto p{


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


font-size:16px;


line-height:1.7;


margin-bottom:30px;


}





.fz-catalogo__texto .fz-btn{


width:max-content;


}





.fz-catalogo__media img{


width:100%;


height:100%;


min-height:420px;


object-fit:cover;


}









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


.fz-contacto{


padding:80px 0;


background:white;


}




.fz-contacto__grid{


display:grid;


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


gap:35px;


}





.fz-contacto__icono{


width:45px;


height:45px;


border-radius:14px;


background:var(--fz-crema-suave);


display:flex;


align-items:center;


justify-content:center;


margin-bottom:15px;


}





.fz-contacto__icono img{


width:25px;


height:25px;


}






.fz-contacto h3{


font-family:var(--fz-font-titulo);


font-size:20px;


color:var(--fz-verde-oscuro);


margin-bottom:10px;


}





.fz-contacto p{


font-size:14px;


color:var(--fz-texto-suave);


line-height:1.6;


}





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


.fz-whatsapp{


display:inline-flex;


align-items:center;


font-family:var(--fz-font-cuerpo);


font-size:26px;


font-weight:700;


color:var(--fz-verde-oscuro);


text-decoration:none;


letter-spacing:.5px;


transition:.3s ease;


}




.fz-whatsapp:hover{


color:var(--fz-dorado);


}







/* =====================================================
   REDES SOCIALES
===================================================== */


.fz-redes{


display:flex;


gap:12px;


margin-top:18px;


}





.fz-redes a{


width:38px;


height:38px;


border-radius:50%;


background:var(--fz-crema-suave);


display:flex;


align-items:center;


justify-content:center;


transition:.3s ease;


}





.fz-redes a:hover{


background:var(--fz-dorado);


}





.fz-redes img{


width:20px;


height:20px;


}







/* =====================================================
   MAPA
===================================================== */


.fz-mapa{


margin-top:50px;


border-radius:20px;


overflow:hidden;


box-shadow:var(--fz-sombra);


position:relative;


}





.fz-mapa iframe{


width:100%;


height:380px;


border:0;


display:block;


}





.fz-mapa__tarjeta{


position:absolute;


top:25px;


left:25px;


background:white;


padding:25px;


border-radius:15px;


max-width:280px;


box-shadow:var(--fz-sombra);


}





.fz-mapa__tarjeta h4{


font-size:20px;


margin-bottom:10px;


}





.fz-mapa__tarjeta p{


font-size:14px;


color:var(--fz-texto-suave);


margin:0;


}

/* =====================================================
   FOOTER FLORIZEN PREMIUM
===================================================== */


.fz-footer{


background:var(--fz-verde-oscuro);


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


padding:60px 0 25px;


margin-top:60px;


position:relative;


overflow:hidden;


}







.fz-footer__grid{


max-width:1200px;


margin:auto;


display:grid;


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


gap:40px;


padding-bottom:35px;


border-bottom:

1px solid rgba(255,255,255,.15);


}





/* Logo footer */


.fz-footer__logo img{

width:220px;

height:auto;

margin-bottom:20px;

}





.fz-footer p{


font-size:14px;


line-height:1.7;


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


}







/* Títulos footer */


.fz-footer h4{


font-family:var(--fz-font-titulo);


font-size:20px;


color:white;


margin-bottom:18px;


}





/* Listas */


.fz-footer ul{


list-style:none;


margin:0;


padding:0;


}





.fz-footer li{


margin-bottom:10px;


}





.fz-footer a{


font-size:14px;


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


text-decoration:none;


transition:.3s ease;


}





.fz-footer a:hover{


color:var(--fz-dorado-suave);


padding-left:5px;


}







/* Redes footer */


.fz-footer-redes{


display:flex;


gap:12px;


margin-top:20px;


}





.fz-footer-redes a{


width:38px;


height:38px;


border-radius:50%;


background:rgba(255,255,255,.1);


display:flex;


align-items:center;


justify-content:center;


}





.fz-footer-redes img{


width:20px;


height:20px;


}







/* =====================================================
   COPYRIGHT CENTRADO
===================================================== */


.fz-footer__bottom{


width:100%;


display:flex;


justify-content:center;


align-items:center;


text-align:center;


padding-top:25px;


}





.fz-footer__bottom span{


display:block;


width:100%;


text-align:center;


font-size:13px;


letter-spacing:.3px;


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


}









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


.fz-whatsapp-float{


position:fixed;


right:25px;


bottom:25px;


width:62px;


height:62px;


border-radius:50%;


background:#25D366;


display:flex;


align-items:center;


justify-content:center;


z-index:999;


box-shadow:

0 10px 25px rgba(0,0,0,.25);


transition:.3s ease;


}





.fz-whatsapp-float img{


width:34px;


height:34px;


}





.fz-whatsapp-float:hover{


transform:

translateY(-6px)
scale(1.05);


}







/* =====================================================
   ANIMACIONES DE ENTRADA
===================================================== */


.fz-anim{


opacity:0;


transform:translateY(35px);


transition:

opacity .8s ease,

transform .8s ease;


}





.fz-anim.is-visible{


opacity:1;


transform:translateY(0);


}







/* =====================================================
   EFECTO HOVER TARJETAS
===================================================== */


.fz-servicio,
.fz-producto{


transition:.35s ease;


}





.fz-servicio:hover{


transform:translateY(-6px);


}





.fz-producto:hover{


box-shadow:

0 20px 45px rgba(31,63,47,.16);


}







/* =====================================================
   AJUSTES GENERALES DE ESPACIADO
===================================================== */


.fz-section{


padding-top:70px;


padding-bottom:70px;


}





.fz-eyebrow{


font-size:13px;


font-weight:700;


letter-spacing:.15em;


color:var(--fz-dorado);


text-transform:uppercase;


margin-bottom:12px;


}


/* =====================================================
   RESPONSIVE TABLET
   768px - 1199px
===================================================== */


@media(max-width:1199px){



/* HEADER */

.fz-header__inner{

padding:0 25px;

}



.fz-nav{

gap:20px;

}



.fz-nav a{

font-size:14px;

}



/* HERO */


.fz-hero{

height:600px;

}



.fz-hero > img{

height:600px;

}



.fz-hero__content{

left:50px;

width:430px;

}



.fz-hero__content h1{

font-size:48px;

}




/* SERVICIOS */
/* ==========================================
   SERVICIOS FLORIZEN - DISEÑO PREMIUM
========================================== */


/* CONTENEDOR GENERAL */

.fz-servicios{

position:relative;

z-index:20;

margin-top:-65px;

padding:0 30px;

}




/* TARJETA BLANCA PRINCIPAL */

.fz-servicios__card{


max-width:1400px;

margin:auto;


background:#ffffff;


border-radius:25px;


padding:28px 35px;


display:grid;


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



box-shadow:

0 8px 25px rgba(0,0,0,.18);



border:1px solid rgba(0,0,0,.08);


align-items:center;


}





/* CADA SERVICIO */


.fz-servicio{


height:150px;


display:flex;


flex-direction:column;


align-items:center;


justify-content:center;



position:relative;


}





/* LINEAS DIVISORIAS */


.fz-servicio:not(:last-child)::after{


content:"";


position:absolute;


right:0;


top:10%;


height:80%;


width:1px;


background:#D8A23A;


}






/* IMAGENES DORADAS */


.fz-servicio img{


width:65px;


height:65px;


object-fit:contain;


margin-bottom:12px;


}





/* TITULOS */


.fz-servicio h3{


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


font-size:20px;


font-weight:700;


color:#174B2F;


margin:0 0 8px;


}





/* PRECIO */


.fz-servicio p{


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


font-size:13px;


font-weight:500;


letter-spacing:.8px;


color:#456152;


margin:0;


text-transform:uppercase;


}






/* EFECTO HOVER */


.fz-servicio:hover img{


transform:translateY(-5px);


transition:.3s ease;


}




/* RESPONSIVE TABLET */


@media(max-width:900px){


.fz-servicios__card{


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


}



.fz-servicio:nth-child(2)::after{


display:none;


}


}






/* RESPONSIVE CELULAR */


@media(max-width:600px){


.fz-servicios{


padding:0 15px;

margin-top:-35px;


}



.fz-servicios__card{


grid-template-columns:1fr;


padding:20px;


}



.fz-servicio{


height:130px;


}



.fz-servicio::after{


display:none;


}


}
/* PRODUCTOS */


.fz-productos__grid{


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


}




/* CONTACTO */


.fz-contacto__grid{


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


}



/* FOOTER */


.fz-footer__grid{


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


}



}