/*
Theme Name: Ferrer MIO
Theme URI: https://sextacosta.cl
Author: MIO Powered by SextaCosta
Author URI: https://sextacosta.cl
Description: Ferrer MIO - Mobiliarios Integrados de Obra.
Version: 1.2.0
Requires at least: 6.8
Requires PHP: 8.1
Text Domain: ferrer-mio
*/

/* =====================================================
ROOT
===================================================== */

:root{

    --black:#090909;
    --black-soft:#111111;

    --panel:#171717;

    --line:#262626;

    --white:#F5F5F5;

    --gray:#B4B4B4;

    --gray-dark:#7A7A7A;

    --earth:#766652;

    --sand:#E5E2DC;

    --max-width:1440px;

    --radius:6px;

    --transition:.25s ease;

}

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

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

html{
    scroll-behavior:smooth;
}

body{

    background:var(--black);

    color:var(--white);

    font-family:"IBM Plex Sans",sans-serif;

    font-size:16px;

    line-height:1.7;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/* =====================================================
LAYOUT
===================================================== */

.wrapper{

    width:min(90%,1200px);

    margin:auto;

}

section{

    padding:120px 0;

}

/* =====================================================
TYPOGRAPHY
===================================================== */

h1,h2,h3,h4{

    font-family:"IBM Plex Mono",monospace;

    font-weight:500;

    letter-spacing:.08em;

    text-transform:uppercase;

}

h1{

    font-size:clamp(42px,6vw,78px);

    line-height:1.05;

}

h2{

    font-size:clamp(28px,4vw,48px);

}

h3{

    font-size:24px;

}

p{

    color:var(--gray);

    margin-bottom:20px;

}

/* =====================================================
BUTTONS
===================================================== */

/* =====================================================
1. FIJACIÓN DE BORDES EN PC (HORIZONTAL)
===================================================== */
.hero-buttons-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    width: 100% !important;
    margin-top: 45px !important;
}

/* Forzar el marco blanco en los botones del computador */
.hero-buttons-group a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 20px !important;
    border: 1px solid #FFFFFF !important; /* Fuerza el marco blanco puro */
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 12px !important;
    letter-spacing: .20em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    background: transparent !important;
    text-decoration: none !important;
}

.hero-buttons-group a:hover {
    background: #FFFFFF !important;
    color: #000000 !important;
}

/* =====================================================
2. AJUSTE DE ALTURA COMPACTA EN MÓVIL (VERTICAL)
===================================================== */
@media (max-width: 768px) {

    .hero-buttons-group {
        flex-direction: column !important; /* Mantiene uno arriba del otro */
        gap: 10px !important; /* Cantería compacta entre cajas */
        margin-top: 30px !important;
    }

    .hero-buttons-group a {
        width: 100% !important; /* Ancho completo de la pantalla móvil */
        padding:3px 20px !important; /* ACHICAR EL ALTO: Bajamos de 15px a 10px para que las cajas queden delgadas y finas */
        font-size: 11px !important; /* Letra un pelo más pequeña para acompañar el alto compacto */
        letter-spacing: .15em !important;
    }

}

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

.hidden{
    display:none;
}

.text-center{
    text-align:center;
}

.mt-40{
    margin-top:40px;
}

.mb-40{
    margin-bottom:40px;
}

.grid{
    display:grid;
    gap:40px;
}

.flex{
    display:flex;
}

.flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

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

.hero{

    position:relative;

    background-image:url('assets/hero-bg.jpg');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    min-height:85vh;

    display:flex;

    align-items:center;

    padding:50px 0 100px;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(9,9,9,.70);

}

.hero .wrapper{

    position:relative;

    z-index:2;

}

.hero-kicker{

    display:block;

    font-family:"IBM Plex Mono",monospace;

    font-size:11px;

    letter-spacing:.25em;

    color:var(--gray-dark);

    text-transform:uppercase;

    margin-bottom:25px;

}

.hero p{

    max-width:520px;

}

/* =====================================================
PHILOSOPHY
===================================================== */

.philosophy{

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

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

    background:var(--sand);

    padding:80px 0;

}

.philosophy h2{

    color:var(--black);

    margin-bottom:20px;

}

.philosophy p{

    color:var(--black);

    max-width:720px;

    margin-bottom:0;

}

/* =====================================================
PROYECTOS / CASOS MIO
===================================================== */

#proyectos h2{

    margin-bottom:20px;

}

.grid-proyectos{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));

    gap:40px;

    margin-top:50px;

}

.proyecto{

    background:var(--black-soft);

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

    overflow:hidden;

    transition:var(--transition);

}

.proyecto:hover{

    border-color:var(--white);

}

.proyecto .thumb{

    overflow:hidden;

}

.proyecto .thumb img{

    width:100%;

    transition:transform .4s ease;

}

.proyecto:hover .thumb img{

    transform:scale(1.03);

}

.proyecto h3{

    font-size:18px;

    padding:24px 24px 10px;

}

.proyecto p{

    font-size:13px;

    line-height:1.5;

    color:var(--gray-dark);

    padding:0 24px 24px;

    margin-bottom:0;

}

/* =====================================================
MIO BRAND PANEL
===================================================== */

.mio-brand-panel h1{

    font-family:'IBM Plex Mono',monospace;

    font-size:clamp(55px,8.5vw,100px);

    font-weight:700;

    line-height:.8;

    letter-spacing:-.04em;

    color:var(--white);

}

.mio-brand-panel h2{

    font-family:'IBM Plex Mono',monospace;

    font-size:11px;

    font-weight:700;

    letter-spacing:.15em;

    color:var(--gray);

}

.mio-features-strip div span{

    font-family:'IBM Plex Sans',sans-serif;

    font-size:7.5px;

    color:var(--gray-dark);

    line-height:1.2;

}

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

@media(max-width:900px){

    section{
        padding:80px 0;
    }

    .hero{
        min-height:auto;
        padding:100px 0 80px;
    }

    .grid-proyectos{
        grid-template-columns:1fr;
    }

}
/* CONTEXTO: CONTROL DE ESCALA EJECUTIVA PARA EL LOGO MIO */
.hero-logo-container {
    text-align: left;       /* Asegura el plomo rígido al ras izquierdo */
    width: 100%;
    margin-bottom: 75px;    /* El aire exacto de separación antes de DISEÑAMOS */
}

.hero-logo-img {
    width: 260px;           /* El 20-25% exacto de contención visual */
    height: auto;          /* Protege la proporción matemática para que no se safe */
    display: block;
}
/* =====================================================
CONTROL RESPONSIVO INTELIGENTE: TRÁFICO PARA CELULARES
===================================================== */
@media (max-width: 768px) {

    .hero {
        min-height: 90vh !important; /* Estira la cocina verticalmente en el celular */
        display: flex;
        align-items: center;
        padding: 40px 0 60px; /* Equilibra los rellenos en pantallas verticales */
    }

    .hero-logo-container {
        margin-bottom: 45px; /* Achica el aire muerto para compactar el bloque */
    }

    .hero-logo-img {
        width: 200px; /* Contención del PNG para que no asfixie el ancho móvil */
    }

}