/*
 Theme Name:   MOMP Arquitectura
 Theme URI:    https://momparquitectura.com
 Description:  Child theme para MOMP arquitectura realizado por Anti.
 Author:       Anti
 Author URI:   https://antiestudi.com
 Template:     generatepress
 Version:      0.1
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

/*  
  ─── ÍNDICE ─────────────────────────────────────────────────────────────
  1. VARIABLES GENERALES Y TIPOGRAFÍAS
  2. TÍTULOS
  3. TEXTOS
  4. BOTONES
  5. HEADER
  6. FOOTER
  7. DISTANCIAS
  8. SECCIONES
  9. RESPONSIVE
*/

/*─────────────────────────────────────────────────────────────────────────────
  1. VARIABLES GENERALES Y TIPOGRAFÍAS
─────────────────────────────────────────────────────────────────────────────*/
:root{
  --color-marron: #302725 !important;
  --color-marron-secundario: #533e31!important;
  --color-naranja: #bb8540 !important;
  --color-beige-oscuro: #bda793 !important;
  --color-beige: #d0ccc0!important;
  --fuente: neue-haas-grotesk-display;
}
body{
  background-color: var(--color-beige) !important;
  font-family: var(--fuente), sans-serif !important;
}
p {
  margin-bottom: 1em !important;
}
/*─────────────────────────────────────────────────────────────────────────────
  2. TÍTULOS
─────────────────────────────────────────────────────────────────────────────*/
.momp-h1-post h1{
  font-size: 35px !important;
  font-weight: 600 !important;
  color: var(--color-marron) !important;
  line-height: 1 !important;
}
.momp-h1 h1{
  font-size: 70px !important;
  font-weight: 600 !important;
  color: var(--color-marron) !important;
  line-height: 1 !important;

}
/*─────────────────────────────────────────────────────────────────────────────
  3. TEXTOS
─────────────────────────────────────────────────────────────────────────────*/
.momp-textos p, .momp-textos span, .momp-textos li, .momp-textos {
  font-size: 20px   !important;
  line-height: 1.2em !important;
  text-align: normal !important;
  font-weight: 500 !important;
  color: var(--color-marron) !important;
  font-family: var(--fuente), sans-serif !important;
}
.momp-textos h2,.momp-textos h3,.momp-textos h4,.momp-textos h5,.momp-textos h6{
  font-size: 30px !important;
  font-weight: 600 !important;
  color: var(--color-marron) !important;
  line-height: 1 !important;
  padding-top: 25px !important;
}
.momp-textos strong, .momp-textos b{
  font-weight: 600 !important;
}
/*─────────────────────────────────────────────────────────────────────────────
  4. BOTONES
─────────────────────────────────────────────────────────────────────────────*/

/*─────────────────────────────────────────────────────────────────────────────
  5. HEADER
─────────────────────────────────────────────────────────────────────────────*/

/*─────────────────────────────────────────────────────────────────────────────
  6. FOOTER
─────────────────────────────────────────────────────────────────────────────*/
.momp-footer p{
  font-size: 12px   !important;
  text-align: normal !important;
  font-weight: 400 !important;
  color: var(--color-marron) !important;
  font-family: var(--fuente), sans-serif !important;
}
/*─────────────────────────────────────────────────────────────────────────────
  7. DISTANCIAS
─────────────────────────────────────────────────────────────────────────────*/

/*─────────────────────────────────────────────────────────────────────────────
  8. SECCIONES
─────────────────────────────────────────────────────────────────────────────*/
/*FONDOS*/
.fondo-naranja{
  background-color: var(--color-naranja) !important;
}
.fondo-marron{
  background-color: var(--color-marron-secundario) !important;
}
/*GRID BLOG*/
.titulo-blog-grid h2{
  font-size: 20px !important;
  font-weight: 600 !important;
  text-align: normal !important;
  color: var(--color-marron) !important;
  font-family: var(--fuente), sans-serif !important;
  line-height: 1.2em !important;
}
.elementor-widget .elementor-icon-list-items.elementor-inline-items {
  justify-content: space-between !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--color-naranja) !important;
  font-family: var(--fuente) !important;
}
.resumen-texto{
  justify-content: space-between !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--color-marron) !important;
  font-family: var(--fuente) !important;
  line-height: 1.2em !important;
  margin: 0 !important;
}
/*POST BLOG*/
.momp-info-post span {
  justify-content: space-between !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--color-naranja) !important;
  font-family: var(--fuente) !important;
}
.momp-info-cat-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;                 /* separación entre “píldoras” */
}

.momp-info-cat{
  font-size: 14px !important;
  text-align: center !important;   /* 'normal' no es válido; uso center para pill */
  font-weight: 500 !important;
  color: var(--color-beige) !important;
  font-family: var(--fuente), sans-serif !important;
  background-color: var(--color-marron) !important;
  padding: 8px 15px !important;
  border-radius: 50px !important;
  display: inline-block;          /* para pill */
  line-height: 1;                 /* compacta verticalmente */
  text-decoration: none;          /* si es <a> */
  white-space: nowrap;            /* que no parta en dos líneas */
}

.momp-info-cat:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.momp-info-cat:hover{
  filter: brightness(1.05);
}
.post-padding :where(p, h1, h2, h3, h4, h5, h6, blockquote, pre, figcaption){
  padding-inline-end: 100px; /* igual que padding-right en LTR, y left en RTL */
}
.post-padding figure {
  width: 100% !important;
}
.post-padding figure img{
  width: 100% !important;
  padding-top: 20px !important;
}
/*─────────────────────────────────────────────────────────────────────────────
  9. RESPONSIVE
─────────────────────────────────────────────────────────────────────────────*/
/* MOBILE */
@media only screen and (max-width: 600px) {
  .post-padding :where(p, h1, h2, h3, h4, h5, h6, blockquote, pre, figcaption){
    padding-inline-end: 0px; /* igual que padding-right en LTR, y left en RTL */
  }
  .momp-h1-post h1{
    font-size: 30px !important;
    font-weight: 600 !important;
    color: var(--color-marron) !important;
    line-height: 1 !important;
  }
  .elementor-author-box {
    flex-direction: column !important;
  }
}