/*!
Version: 1.0.0
Theme Name: Kadence hijo
Template: kadence
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-hijo
*/

/* Estructura General */
.kadence-container {
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.proyecto-header {
    padding: 60px 0 40px;
    background-color: #f4f4f4; /* Gris suave arquitectónico */
    margin-bottom: 40px;
}
.proyecto-header h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}
.proyecto-meta {
    font-family: monospace; /* Toque técnico */
    color: #666;
    text-transform: uppercase;
}

/* Layout Cuerpo (Ficha + Contenido) */
.proyecto-cuerpo {
    display: grid;
    grid-template-columns: 300px 1fr; /* Ficha fija 300px, resto flexible */
    gap: 60px;
    margin-bottom: 80px;
}

@media (max-width: 768px) {
    .proyecto-cuerpo {
        grid-template-columns: 1fr; /* Una columna en móvil */
    }
}

/* Estilo Ficha Técnica */
.ficha-tecnica {
    border-top: 2px solid #000;
    padding-top: 20px;
}
.ficha-tecnica ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ficha-tecnica li {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    font-size: 0.9rem;
}

/* Galería Masonry */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.galeria-item:hover img {
    transform: scale(1.02); /* Efecto zoom sutil */
}


/* Diferencias visuales para la sección de planos */
.planos-seccion {
    margin-top: 60px;
    margin-bottom: 60px;
}

.separador-seccion {
    margin-bottom: 40px;
    border: 0;
    border-top: 1px solid #ddd;
}

/* Grid de planos (quizás más pequeños o diferentes a las fotos) */
.planos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Más pequeños que las fotos */
    gap: 20px;
}

.plano-item {
    border: 1px solid #eee; /* Un borde sutil queda bien en planos */
    padding: 10px;
    background: #fff;
    text-align: center;
}

.plano-item img {
    width: 100%;
    height: 200px; /* Altura fija */
    object-fit: contain; /* IMPORTANTE: 'contain' evita que el plano se recorte */
    background-color: #f9f9f9; /* Fondo gris para resaltar el papel blanco del plano */
}

.plano-titulo {
    font-size: 0.85rem;
    margin-top: 10px;
    color: #666;
    font-family: monospace;
}


/*Archive de Proyectos*/

/* Cabecera del Archivo */
.archive-header {
    text-align: center;
    padding: 60px 20px;
    background-color: #fff;
}
.archive-title {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Grid Principal */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Responsive automático */
    gap: 30px;
    margin-bottom: 80px;
}

/* Tarjeta (Card) */
.proyecto-card {
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee; /* Borde sutil */
}

.proyecto-card:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el mouse */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3; /* Mantiene todas las fotos con la misma proporción */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* CIUDAD SOBRE LA IMAGEN */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
    color:#fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* DISEÑO DE LA ETIQUETA DE ESTADO*/

.card-below {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; /* Separa el estado del año */
    gap: 10px;
    padding-bottom: 20px;
}

.estado {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px; /* Bordes muy redondeados para forma de pastilla */
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #ccc; /* Borde por defecto */
    color: #555;
    background: #f9f9f9;
}

/* Colores Específicos por Estado (Ajusta según tu paleta) */
.en-construccion {
    border-color: #FF9800; /* Naranja */
    color: #e65100;
    background: #fff3e0;
}

.finalizado {
    border-color: #4CAF50; /* Verde */
    color: #1b5e20;
    background: #e8f5e9;
}

.en-proyecto {
    border-color: #2196F3; /* Azul */
    color: #0d47a1;
    background: #e3f2fd;
}

/* Año del Proyecto */
.anio {
    font-size: 1.2rem;
    color: #777;
    font-weight: 500;
}

/* Descripción Corta */
.card-description {
    width: 100%; /* Ocupa todo el ancho debajo de las etiquetas */
    margin-top: 15px;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}
.card-description p {
    margin: 0;
}

.proyecto-card:hover .card-image img {
    transform: scale(1.05); /* Zoom suave en la foto */
}

/* Info del Proyecto */
.card-info {
    padding: 20px;
}

.card-title {
    font-size: 1.8rem;
    margin: 0 0 10px 0;
    font-weight: 600;
    color: #333;
}

.card-meta {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    font-family: monospace;
}

.proyecto-link {
    text-decoration: none;
    color: inherit;
}

/*MAPA*/

.acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}
/* Fix para que los controles de Google no se rompan */
.acf-map img { max-width: inherit !important; }



/* --- Estilos Formulario Dark Mode MCT --- */

/* 1. Hacemos los campos transparentes y redondeados */
.fluentform .ff-el-form-control {
    background-color: transparent !important;  /* Fondo transparente */
    border: 1px solid rgba(255, 255, 255, 0.85) !important; /* Borde blanco semi-transparente */
    border-radius: 50px !important; /* Bordes totalmente redondos (Pill shape) */
    color: #ffffff !important; /* Texto blanco al escribir */
    padding: 15px 20px !important; /* Más espacio interior */
}

/* 2. Color del texto placeholder (el texto de ayuda antes de escribir) */
.fluentform ::placeholder {
    color: rgba(255, 255, 255, 0.809) !important; /* Blanco suave */
}

/* 3. Cuando haces click en el campo (Focus) */
.fluentform .ff-el-form-control:focus {
    border-color: #ffffff !important; /* Borde blanco sólido al escribir */
    outline: none !important;
}

/* 4. El Botón de Enviar (Blanco y pastilla) */
.fluentform .ff-btn-submit {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 50px !important;
    padding: 12px 40px !important;
    font-weight: bold !important;
    border: none !important;
    width: auto !important; /* O '100%' si lo quieres ancho completo */
    margin-top: 10px;
}

.fluentform .ff-btn-submit:hover {
    background-color: #e0e0e0 !important; /* Un gris muy clarito al pasar el mouse */
    cursor: pointer;
}

/* Ajuste para el Area de Texto (Mensaje) para que no sea tan redonda si no quieres */
.fluentform textarea.ff-el-form-control {
    border-radius: 20px !important; /* Un poco menos redondo para el bloque grande */
}


/*SECCION HEADER*/

/* Aplicar la transición al elemento exacto que encontraste */
#masthead .site-header-row-container-inner {
    -webkit-transition: background-color 0.5s ease-in-out !important;
    -moz-transition: background-color 0.5s ease-in-out !important;
    transition: background-color 0.5s ease-in-out !important;
}

/* Opcional: Para asegurar que el contenedor padre no interfiera */
#masthead {
    transition: background-color 0.5s ease-in-out !important;
}

.site-title{
    transition: color 0.5s ease-in-out !important;
}
.menu-toggle-icon{
    transition: color 0.5s ease-in-out !important;
}

/*Correcciones del Footer*/

.site-footer .site-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
.site-middle-footer-inner-wrap{
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* --- Estilos Tarjeta Arquitectura MCT --- */

/* 1. El Contenedor Principal */
.tarjeta-arq {
    position: relative;
    overflow: hidden; 
    border-radius: 8px; /* Elimina esto si quieres esquinas rectas como en tu diseño original */
    cursor: pointer;
}

/* 2. La Imagen de Fondo (Se asume que es un bloque de Sección de Kadence con fondo) */
.tarjeta-arq-img {
    position: absolute; /* Para que llene el contenedor */
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Mejor que 100% para evitar deformaciones */
    background-position: center;
    z-index: 1; /* Fondo base */
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Suavidad del movimiento */
}

/* 3. El Texto y Degradado */
.tarjeta-arq-info {
    position: relative;
    z-index: 3; /* Por encima de la imagen y el degradado */
    transition: transform 0.4s ease;
}

/* --- ANIMACIONES HOVER CORREGIDAS --- */

/* A. Cuando el mouse entra a la TARJETA entera, la imagen hace zoom */
.tarjeta-arq:hover .tarjeta-arq-img {
    transform: scale(1.1); /* Efecto mucho más fluido que background-size */
}

/* B. Cuando el mouse entra a la TARJETA entera, el texto sube un poquito */
.tarjeta-arq:hover .tarjeta-arq-info {
    transform: translateY(-8px);
}

/* --- El Degradado Inferior Protector --- */
.tarjeta-arq::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Va de negro al 80% en la base, a negro al 30% a la mitad, y transparente arriba */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 40%, transparent 100%);
    z-index: 2; /* Se pone SOBRE la imagen (z-index: 1) y DEBAJO del texto (z-index: 3) */
    pointer-events: none; /* Asegura que el usuario siga pudiendo hacer clic en la tarjeta */
}