/*
Theme Name: The7 Child
Theme URI: https://the7.io/
Template: dt-the7
Author: Dream-Theme
Author URI: https://dream-theme.com/
Description: Any design, any layout. No coding required. The7 is the most customisable WordPress theme on the market up to date. Add the power of Visual Composer, The7 Post Types, Ultimate Addons, Slider Revolution, and WooCommerce to the mix, and you'll get the ultimate web-site building toolkit! Theme is translation ready, compatible with WPML, SEO and mobile friendly (certified by Google).
Tags: multipurpose,responsive,retina ready,SEO ready,mobile friendly,iOS,material design,clean,minimal,business,corporate,portfolio,creative,photography,one page site,micro site
Version: 12.8.1.1.1758557378
Updated: 2025-09-22 18:09:38
/* =================================================================== */
/* ESTILOS GENERALES Y VARIABLES                  */
/* =================================================================== */
:root {
    --primary-color: #4CAF50; /* Un verde fresco, ecológico */
    --secondary-color: #FFC107; /* Un amarillo para CTAs, que contrasta bien */
    --dark-color: #333333;
    --light-color: #FFFFFF;
    --grey-color: #f4f4f4;
    --text-color: #555555;
    --font-family: 'Poppins', sans-serif;
    --container-width: 1100px;
    --border-radius: 8px;
}

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

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--light-color);
}

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

a {
    color: var(--primary-color);
    text-decoration: none;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

.section-padding { padding: 80px 0; }
.section-padding-alt { padding: 80px 0; background-color: var(--grey-color); }
.section-title {
    font-size: 2.5rem;
    color: var(--dark-color);
    text-align: center;
    margin-bottom: 20px;
}
.section-subtitle {
    font-size: 1.1rem;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px auto;
}

/* =================================================================== */
/* BOTONES (CTAs)                            */
/* =================================================================== */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--light-color);
}
.btn-primary:hover {
    background-color: #45a049;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--dark-color);
}
.btn-secondary:hover {
    background-color: #ffb300;
    transform: translateY(-2px);
}
.btn-large {
    padding: 15px 40px;
    font-size: 1.1rem;
}
/* =================================================================== */
/* SOLUCIÓN DEFINITIVA DE CABECERA (CON PAGE-ID-92186)               */
/* =================================================================== */

/* 1. Unificar el fondo y la apariencia del contenedor */
/* Esta regla se aplica a la cabecera SÓLO en la Home (page-id-92186) y SÓLO cuando no se ha hecho scroll */
body.page-id-92186 .masthead:not(.fixed-masthead) {
    background-color: #FFFFFF !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; 
    border-bottom: none !important; 
}

/* 2. Forzar que se muestre el logo correcto (el de Pipikat) en la Home */
body.page-id-92186 .masthead:not(.fixed-masthead) .branding > a:not(.sticky-logo) {
    display: none !important;
}

body.page-id-92186 .masthead:not(.fixed-masthead) .branding > a.sticky-logo {
    display: inline-block !important;
}

/* =================================================================== */
/* HERO SECTION (2 COLUMNAS, ANCHO COMPLETO Y ALTURA DE IMAGEN AJUSTADA) */
/* =================================================================== */
.pipikat-custom-home .hero-section {
    /* --- FIX 1: CÓDIGO PARA ANCHO COMPLETO --- */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* --- FIN DEL FIX 1 --- */
    
    background-color: #4F4F4F;
    padding: 60px 0 60px 0;
    color: #FFFFFF;
}

/* El .container interior se encarga de que el texto y la imagen no se estiren demasiado */
.pipikat-custom-home .hero-section .container {
    max-width: 1200px; /* Ancho máximo para el contenido */
    margin: 0 auto;
    padding: 0 20px; /* Pequeño margen en los lados */
}

.pipikat-custom-home .hero-content-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
}

.pipikat-custom-home .hero-text {
    flex: 1;
    text-align: left;
}

.pipikat-custom-home .hero-text h1 {
    font-size: 3.2rem !important;
    color: #FFFFFF !important;
    line-height: 1.2;
}

.pipikat-custom-home .hero-text h2 {
    font-size: 1.5rem !important;
    color: #FFFFFF !important;
    font-weight: 400 !important;
    opacity: 0.9;
    margin-top: 15px;
    margin-bottom: 30px;
}

.pipikat-custom-home .hero-image {
    flex: 1;
    text-align: center;
}

.pipikat-custom-home .hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    
    /* --- FIX 2: LÍMITE DE ALTURA PARA LA IMAGEN --- */
    max-height: 450px; /* ¡Puedes ajustar este valor si quieres! (ej. 400px o 500px) */
    width: auto; /* Para que la imagen no se deforme al limitar la altura */
    margin: 0 auto; /* Centra la imagen si es más estrecha que la columna */
}

/* =================================================================== */
/* RESPONSIVE PARA MÓVILES (VERSIÓN CORREGIDA Y REFORZADA)           */
/* =================================================================== */
@media (max-width: 768px) {

    /* --- ARREGLO 1: AÑADIR ESPACIO PARA LA CABECERA Y EVITAR TEXTO CORTADO --- */
    .pipikat-custom-home .hero-section {
        padding-top: 150px !important; /* Aumentamos el espacio superior para la cabecera */
        padding-bottom: 60px !important;
        /* Los márgenes laterales se gestionan dentro del .container */
    }

    /* --- ARREGLO 2: OCULTAR LA IMAGEN --- */
    .pipikat-custom-home .hero-image {
        display: none !important; /* Forzamos que la imagen se oculte */
    }

    /* --- ARREGLO 3: ASEGURAR QUE EL TEXTO SE CENTRE --- */
    .pipikat-custom-home .hero-content-wrapper {
        flex-direction: column; /* Apila los elementos en una sola columna */
    }

    .pipikat-custom-home .hero-text {
        text-align: center !important; /* Forzamos el centrado del texto */
    }

    .pipikat-custom-home .hero-text h1 {
        font-size: 2.5rem !important; /* Hacemos el título un poco más pequeño en móvil */
    }
}

/* =================================================================== */
/* BENEFITS SECTION                             */
/* =================================================================== */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.benefit-card {
    text-align: center;
    padding: 20px;
}
.benefit-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.benefit-card h3 {
    color: var(--dark-color);
    margin-bottom: 10px;
}

/* =================================================================== */
/* PRODUCTS SECTION                             */
/* =================================================================== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.product-card {
    background: var(--light-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.product-card h3 {
    font-size: 1.2rem;
    color: var(--dark-color);
    margin: 20px 0 10px;
}
.product-card p {
    padding: 0 20px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    min-height: 40px;
}
.product-card .btn {
    margin-bottom: 20px;
}

/* =================================================================== */
/* SOCIAL PROOF SECTION                           */
/* =================================================================== */
.social-proof-section {
    background-color: var(--primary-color);
    color: var(--light-color);
    padding: 40px 0;
}
.social-proof-section .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
}
.proof-item {
    margin: 20px;
}
.proof-number {
    font-size: 2.5rem;
    font-weight: 700;
    display: block;
}
.proof-text {
    font-size: 1rem;
}

/* =================================================================== */
/* TESTIMONIALS SECTION                           */
/* =================================================================== */
.testimonials-placeholder {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    background: var(--grey-color);
    border-radius: var(--border-radius);
}

/* =================================================================== */
/* HOW IT WORKS SECTION                            */
/* =================================================================== */
.steps-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.step-card {
    flex-basis: 22%;
    text-align: center;
    position: relative;
}
.step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: var(--dark-color);
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}
.step-card h3 {
    color: var(--dark-color);
    margin-bottom: 10px;
}
.how-it-works-section .container {
    text-align: center;
}

/* =================================================================== */
/* FAQ SECTION                               */
/* =================================================================== */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
}
.faq-item summary {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-color);
    cursor: pointer;
    list-style: none; /* Hide default marker */
    position: relative;
    padding-right: 30px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '\f078'; /* Font Awesome down arrow */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}
.faq-content {
    padding-top: 20px;
}


/* =================================================================== */
/* FOOTER                                  */
/* =================================================================== */
.main-footer {
    background-color: var(--dark-color);
    color: #ccc;
    padding: 60px 0 20px;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}
.footer-column h4 {
    color: var(--light-color);
    margin-bottom: 20px;
    font-size: 1.1rem;
}
.footer-column ul li {
    margin-bottom: 10px;
}
.footer-column a {
    color: #ccc;
    transition: color 0.3s ease;
}
.footer-column a:hover {
    color: var(--primary-color);
}
.social-icons a {
    color: #ccc;
    font-size: 1.5rem;
    margin-right: 15px;
}
.payment-logos {
    font-size: 2rem;
    display: flex;
    gap: 15px;
}
.footer-copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #444;
    font-size: 0.9rem;
}

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

/* Tablets (max-width: 992px) */
@media (max-width: 992px) {
    .section-title { font-size: 2rem; }
    .hero-section h1 { font-size: 2.8rem; }
    .hero-section h2 { font-size: 1.5rem; }
    .steps-container { flex-direction: column; align-items: center; }
    .step-card { flex-basis: 80%; max-width: 400px; }
    .step-card:not(:last-child) { margin-bottom: 30px; }
}


/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .header-top-bar .container { justify-content: center; text-align: center; }
    .nav-menu {
        display: none;
        position: absolute;
        top: 128px; /* Altura de las dos barras superiores */
        left: 0;
        width: 100%;
        background-color: var(--light-color);
        flex-direction: column;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .nav-menu.active { display: flex; }
    .nav-menu li { padding: 15px 0; border-bottom: 1px solid var(--grey-color); }
    .header-actions .btn { display: none; }
    .mobile-menu-toggle { display: block; }
    
    .hero-section { height: 60vh; }
    .hero-section h1 { font-size: 2.2rem; }
    .hero-section h2 { font-size: 1.2rem; }
    
    .social-proof-section .container { flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-column { text-align: center; }
    .social-icons, .payment-logos { justify-content: center; }
}
/* =================================================================== */
/* SECCIÓN VIDEOS (NUEVA VERSIÓN CON FLEXBOX)                           */
/* =================================================================== */
.pipikat-custom-home .videos-section {
    background-color: var(--grey-color);
    text-align: center;
}

.pipikat-custom-home .videos-section .section-title {
    color: var(--dark-color);
    margin-bottom: 50px;
}

/* --- Aquí empieza la nueva lógica con Flexbox --- */
.pipikat-custom-home .video-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}

.pipikat-custom-home .video-item {
    flex: 1 1 300px; /* Esto hace que cada video ocupe unos 300px y crezca para rellenar el espacio */
    max-width: 400px; /* Un ancho máximo para que no se hagan gigantes en pantallas muy anchas */
    background: var(--light-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
/* --- Fin de la lógica Flexbox --- */

.pipikat-custom-home .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 para videos responsivos */
    height: 0;
    overflow: hidden;
}

.pipikat-custom-home .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pipikat-custom-home .videos-section .btn {
    background-color: var(--primary-color);
    color: var(--light-color);
    margin-top: 20px;
}

.pipikat-custom-home .videos-section .guarantee-text {
    margin-top: 20px;
    font-weight: 600;
    color: var(--text-color);
}
/* =================================================================== */
/* FORZAR SECCIONES DE ANCHO COMPLETO (FULL-WIDTH) - VERSIÓN FINAL */
/* =================================================================== */
/* Este código se aplica a todas las secciones con fondo de color */

.pipikat-custom-home .social-proof-section,
.pipikat-custom-home .products-section,
.pipikat-custom-home .how-it-works-section,
.pipikat-custom-home .videos-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}