/*
Theme Name: Free Divi Child Theme
Template: Divi
*/

/* =========================================================================
   ACTÚA · HOJA DE ESTILOS GENERAL
   Rojo #F73118 · Rojo oscuro #C8230F · Negro #0F0E0C · Texto #3B3936
   Piedra #EBE8E3 · Gris cálido #8A857D · Línea suave #C9C4BC

   REGLA DE LA CASA
   · Lo que se puede hacer en los ajustes del módulo, se hace en el módulo.
   · Aquí solo lo que usan varias páginas.
   · Lo que es de UNA página va en un módulo Código de esa página
     (como el footer, que lleva su CSS dentro).

   ÍNDICE
   01 · Base y tipografía
   02 · Bloques reutilizables (clases que se ponen en los módulos)
   03 · Botones (y botón cuadrado .actua-boton-cuadrado)
   04 · Cabecera            → se moverá a la plantilla de la cabecera
   05 · Páginas legales     (Aviso legal, Privacidad, Cookies)
   06 · Tarjetas de documentos (Cuentas anuales, Estatutos)
   07 · Formularios (Contact Form 7)
   08 · Listado de entradas .actua-blog (Inicio, Actualidad)
   09 · Carteles de proyectos .actua-proyectos
   10 · Filtro de categorías .actua-filtro (lo genera functions.php)
========================================================================= */

/* =========================================================================
   01 · BASE Y TIPOGRAFÍA
========================================================================= */

/* Títulos anchos como en la maqueta (Archivo al 125 %) */
h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.et_pb_post .entry-title,
.et_pb_slide_title {
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #0F0E0C;
}

/* Vuelve al ancho normal (heros de página) */
.stretch-100 h1, .stretch-100 h2, .stretch-100 h3,
.stretch-100 h4, .stretch-100 h5, .stretch-100 h6 {
  font-stretch: 100%;
}

.red-text {
  color: #F73118;
}

.bolder {
  font-weight: 900;
}

/* Palabra destacada con fondo rojo dentro de un título */
.mark {
  background: #F73118;
  color: #FFFFFF;
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Tamaño «pequeño» del editor de WordPress (párrafos de las entradas con
   has-small-font-size). Por defecto WordPress lo deja en 13 px. */
:root {
  --wp--preset--font-size--small: 16px !important;
}

/* El preset de texto heredado de Rayuela limita el CONTENIDO del módulo
   (.et_pb_text_inner), y eso el campo «Ancho máximo» del módulo no lo toca.
   Esta regla hace que mande siempre el módulo. */
.et_pb_text_inner {
  max-width: 100% !important;
  width: 100% !important;
}


/* =========================================================================
   02 · BLOQUES REUTILIZABLES
   Se aplican poniendo la clase en «Avanzado → Clase CSS» del módulo.

   Los títulos llevan «.et_pb_text» delante a propósito: el preset de texto
   «texto» (herencia de Rayuela) pone los H2 a 58 px y a 13vw en móvil,
   y sin esto a veces ganaba el preset y a veces la clase según el orden
   de carga. Así gana siempre la clase.
========================================================================= */

/* --- Títulos ------------------------------------------------------------ */
.et_pb_text.actua-display h1,
.et_pb_text.actua-display h2,
.et_pb_text.actua-display h3 {
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-size: clamp(36px, 4.8vw, 58px);
  padding-bottom: 0;

  /* Ninguna palabra se parte por la mitad y las líneas quedan parejas */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-wrap: balance;
}

/* Títulos de sección interiores.
   El máximo es 44 px para que «OPORTUNIDADES» quepa en media columna. */
.et_pb_text.actua-display-sm h1,
.et_pb_text.actua-display-sm h2,
.et_pb_text.actua-display-sm h3 {
  font-size: clamp(26px, 3vw, 44px);
}

/* Título grande */
.et_pb_text.actua-display-xl h1,
.et_pb_text.actua-display-xl h2 {
  font-size: clamp(46px, 6.4vw, 84px);
}


/* --- Antetítulo con raya roja ------------------------------------------- */
/* El COLOR DEL TEXTO se pone en el módulo (claro u oscuro). */
.actua-eyebrow p {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-bottom: 0;
}

.actua-eyebrow p::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: #F73118;
  flex: none;
}


/* --- Separador de WordPress dentro de entradas y proyectos -------------- */
/* El bloque «Separador» del editor trae su color puesto en el propio HTML
   (#eceff4, el gris de Rayuela). Aquí va en negro, como las líneas de la
   web. Lleva !important porque tiene que ganar a ese color en línea. */
#page-container .wp-block-separator {
  height: 0;
  margin: 48px 0;
  border: 0;
  border-top: 2px solid #0F0E0C !important;
  background: none !important;
  color: #0F0E0C !important;
  opacity: 1;
}


/* --- Enlace con flecha y subrayado rojo --------------------------------- */
/* Clase «actua-link-flecha» en un módulo de texto con un enlace dentro.
   Ej.: «Conoce el organigrama de Actúa →» en Quiénes somos. */
.actua-link-flecha a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #F73118;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0F0E0C;
  transition: color .15s ease;
}

.actua-link-flecha a:hover {
  color: #F73118;
}


/* --- Cabecera de página con foto ---------------------------------------- */
/* Tamaño, interlineado y ancho se pueden cambiar desde el módulo, sin otra
   clase: Avanzado → CSS personalizado → Elemento principal:
     --hero-size: clamp(44px, 7vw, 92px);
     --hero-lh: 1.06;
     --hero-ancho: 11em;
   (así lo tiene Inicio). Si no se pone nada, valen los de abajo. */
.et_pb_text.actua-hero-titulo h1 {
  font-stretch: 100%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--hero-size, clamp(32px, 4.8vw, 66px));
  line-height: var(--hero-lh, 1.3);
  max-width: var(--hero-ancho, 22ch);
  letter-spacing: -.005em;
  color: #FFFFFF;
  padding-bottom: 0;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

.actua-hero-titulo .chip,
.actua-hero-titulo .chip-red {
  display: inline-block;
  margin-bottom: .14em;
  padding: .08em .16em .12em;
  color: #FFFFFF;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.actua-hero-titulo .chip {
  background: #0F0E0C;
}

.actua-hero-titulo .chip-red {
  background: #F73118;
}


/* --- Foto recortada a 3:2 ------------------------------------------------ */
/* El borde negro NO va aquí: se pone en el módulo (Borde 2 px #0F0E0C).
   Antes estaban los dos y salía un borde doble de 4 px. */
.actua-foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}


/* =========================================================================
   03 · BOTONES
   Solo valores por defecto, SIN !important: lo que pongas en el módulo
   (espaciado, peso, redondeo, colores al pasar) manda.
========================================================================= */
body .et_pb_button {
  font-weight: 700;
  letter-spacing: .1em;
  border-radius: 0;
}

/* --- Botón cuadrado con flecha ------------------------------------------ */
/* Clase «actua-boton-cuadrado» en el módulo Botón (con «Usar icono» apagado).
   Colores, texto y hover se ponen en el módulo. Flecha arriba, texto abajo.
   Lleva «body #page-container … >» para ganar al CSS que Divi genera. */
body #page-container .et_pb_button_module_wrapper > .et_pb_button.actua-boton-cuadrado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 236px;
  height: 236px;
  padding: 26px 28px !important;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
}

body #page-container .et_pb_button_alignment_right > .et_pb_button.actua-boton-cuadrado {
  margin-left: auto;
}

body #page-container .et_pb_button_module_wrapper > .et_pb_button.actua-boton-cuadrado::before {
  content: "→" !important;
  display: block !important;
  position: static;
  margin: 0;
  opacity: 1;
  font-family: Arial, sans-serif !important;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  transition: transform .15s ease;
}

body #page-container .et_pb_button_module_wrapper > .et_pb_button.actua-boton-cuadrado:hover::before {
  transform: translateX(8px);
}

body #page-container .et_pb_button_module_wrapper > .et_pb_button.actua-boton-cuadrado::after {
  display: none !important;
}

@media (max-width: 980px) {
  body #page-container .et_pb_button_module_wrapper > .et_pb_button.actua-boton-cuadrado {
    width: 180px;
    height: 180px;
    margin-left: 0;
  }
}


/* =========================================================================
   04 · CABECERA
   Global. Cuando revisemos la cabecera pasará a un módulo Código dentro
   de su plantilla, igual que el footer.
========================================================================= */


/* --- Logo --------------------------------------------------------------- */
.actua-header .et_pb_image {
  flex: 0 0 auto;
  margin: 0 !important;
}

.actua-header .et_pb_image img {
  max-height: 44px;
  width: auto;
}

@media (max-width: 980px) {
  .actua-header .et_pb_image img {
    max-height: 38px;
  }
}

/* Inicio: arriba del todo la insignia (primera imagen) va a su tamaño,
   el que tenga en el módulo. Al hacer scroll Divi añade .et_pb_sticky a la
   cabecera y vuelve el límite de 44 px. */
.home .actua-header:not(.et_pb_sticky) .et_pb_image:first-of-type img {
  max-height: none;
}

/* Tamaño de la insignia de Inicio.
   Va aquí y no en el módulo porque el «Ancho máximo» del módulo no llega a
   la imagen: el módulo está en posición absoluta y la imagen va dentro de
   una caja «inline-block», así que su max-width: 100 % no tiene referencia
   y la imagen sale a su tamaño real (pasaba en tablet, 768–980 px).
   Aquí se fija el ancho del módulo y la imagen lo rellena. */
.actua-header-inicio .et_pb_image:first-of-type {
  width: 82px;
  max-width: none !important;
}

.actua-header-inicio .et_pb_image:first-of-type .et_pb_image_wrap {
  display: block;
}

.actua-header-inicio .et_pb_image:first-of-type img {
  width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  .actua-header-inicio .et_pb_image:first-of-type {
    width: 72px;
  }
}

@media (max-width: 767px) {
  .actua-header-inicio .et_pb_image:first-of-type {
    width: 64px;
  }
}

/* --- Cabecera de Inicio sobre la foto del hero ---------------------------
   Antes la sección medía 104 px y se compensaba con un margen inferior de
   −104 px para quedar encima de la foto. Al fijarse, Divi cambia la sección
   a «fixed» y deja en su sitio un clon (.et_pb_sticky_placeholder); durante
   ese cambio la sección volvía a ocupar sus 104 px un fotograma y la foto
   bajaba.

   Ahora lo que sale del flujo es el CONTENEDOR de la cabecera (<header
   class="et-l--header">), que Divi no toca. Pase lo que pase dentro, la foto
   no se mueve. El margen de −104 px se ha quitado del módulo.

   Si el navegador no reconociera :has(), cambiar el selector por
   «.home .et-l--header» (esta cabecera solo se usa en Inicio). */
.et-l--header:has(.actua-header-inicio) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* El clon que deja Divi al fijarla no hace falta: la cabecera ya no ocupa
   sitio en la página. */
.et_pb_sticky_placeholder.actua-header-inicio {
  display: none !important;
}

/* --- Relevo de los dos logos al fijarse la cabecera ----------------------
   En la plantilla, la insignia va de opacidad 100 % a 0 % y el logo
   horizontal de 0 % a 100 % cuando la cabecera se fija. Divi anima esa
   opacidad, así que durante la transición se ven LOS DOS a la vez, y la
   insignia además se encoge de golpe (por el max-height de arriba) mientras
   todavía se está desvaneciendo.

   Quitar la transición no basta: Divi la declara donde el CSS del tema no
   la alcanza. Así que se anula la opacidad entera y el relevo lo decide la
   clase .et_pb_sticky, que es un interruptor, no una animación.

   Va con «visibility» y no con «display» a propósito: el logo horizontal
   tiene que seguir ocupando sus 140 px aunque no se vea, o el menú salta.

   Solo en la cabecera de Inicio, que es la única con dos logos. */
.actua-header-inicio .et_pb_image {
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Arriba del todo: solo la insignia */
.actua-header-inicio:not(.et_pb_sticky) .et_pb_image + .et_pb_image {
  visibility: hidden !important;
}

/* Fijada: solo el logo horizontal */
.actua-header-inicio.et_pb_sticky .et_pb_image:first-of-type {
  visibility: hidden !important;
}

/* --- Paso de la barra al fijarse -----------------------------------------
   El fondo cambia de golpe (transparente → negro): animarlo daba un gris
   sucio sobre la foto. La altura sí se anima (104 → 64 px), para que el
   menú no suba 20 px de golpe.

   Si prefieres que la barra cambie también de golpe, pon «none» en lugar
   de «height .25s ease». */
.actua-header-inicio {
  transition: height .25s ease !important;
}

.actua-header-inicio .et_pb_row,
.actua-header-inicio .et_pb_column {
  transition: none !important;
}


/* --- Menú de escritorio -------------------------------------------------- */
.actua-menu .et-menu > li > a {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Subrayado rojo en hover y en la página actual */
.actua-menu .et-menu > li > a:hover,
.actua-menu .et-menu > li.current-menu-item > a,
.actua-menu .et-menu > li.current-menu-ancestor > a,
.actua-menu .et-menu > li:hover > a {
  text-decoration: underline;
  text-decoration-color: #F73118;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

.actua-menu .et-menu .menu-item-has-children > a:first-child:after {
  font-size: 14px;
  color: #FFFFFF;
}

/* Desplegable: caja blanca con borde negro */
.actua-menu .nav li ul,
.actua-menu .et-menu li ul {
  background: #FFFFFF !important;
  border: 2px solid #0F0E0C !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: max-content !important;
  min-width: 0 !important;
}

.actua-menu .nav li li,
.actua-menu .et-menu li li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  line-height: 1.3;
}

.actua-menu .nav li li a,
.actua-menu .et-menu li li a {
  width: auto !important;
  white-space: nowrap;
  padding: 16px 24px !important;
  font-size: 13px !important;
  letter-spacing: .08em;
  color: #0F0E0C !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transition: background .15s ease, color .15s ease;
}

.actua-menu .nav li li a:hover,
.actua-menu .et-menu li li a:hover {
  background: #F73118 !important;
  color: #FFFFFF !important;
}


/* --- Hamburguesa (dos rayas blancas) ------------------------------------- */
.actua-menu-movil .mobile_menu_bar {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  padding: 0 !important;
}

.actua-menu-movil .mobile_menu_bar:before {
  content: "" !important;
  display: block;
  width: 28px;
  height: 2px;
  background: #FFFFFF;
  box-shadow: 0 9px 0 #FFFFFF;
  margin-bottom: 9px;
  color: transparent !important;
  transition: background .2s ease, box-shadow .2s ease;
}

.actua-menu-movil .mobile_menu_bar:hover:before {
  background: #F73118;
  box-shadow: 0 9px 0 #F73118;
}


/* --- Panel móvil --------------------------------------------------------- */
.actua-menu-movil .et_mobile_menu {
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: #0F0E0C !important;
  border-top: none !important;
  border-bottom: 2px solid #F73118 !important;
  box-shadow: none !important;
  padding: 24px 40px 34px !important;
}

.actua-menu-movil .et_mobile_menu li a {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 0 !important;
  border-bottom: none !important;
  background: transparent !important;
}

.actua-menu-movil .et_mobile_menu li a:hover {
  color: #F73118 !important;
  opacity: 1;
}

.actua-menu-movil .et_mobile_menu li ul {
  padding-left: 16px !important;
}

/* Línea separadora antes de Voluntariado (clase «movil-extra» en el menú) */
.actua-menu-movil .et_mobile_menu li.movil-extra {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.25) !important;
}

@media (max-width: 767px) {
  .actua-menu-movil .et_mobile_menu {
    padding: 20px 20px 30px !important;
  }
}


/* =========================================================================
   05 · PÁGINAS LEGALES (Aviso legal, Privacidad, Cookies)
========================================================================= */
.actua-legal h2 {
  margin: 56px 0 18px;
  padding-bottom: 0;
}

.actua-legal h2:first-child {
  margin-top: 0;
}

.actua-legal p {
  padding-bottom: 20px;
}

.actua-legal strong {
  color: #0F0E0C;
}

.actua-legal a,
.actua-dato a,
.actua-legal .cmplz-document a {
  color: #0F0E0C;
  text-decoration: none !important;
  border-bottom: 2px solid #F73118;
}

.actua-legal a:hover,
.actua-dato a:hover {
  background: #F73118;
  color: #FFFFFF;
}

/* Bloque de datos: titular, domicilio, contacto */
.actua-datos-row .et_pb_column {
  margin-bottom: 0 !important;
}

.actua-dato p {
  padding-bottom: 0;
}

.actua-dato .actua-k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A857D;
  margin-bottom: 8px;
}

.actua-legal-nota p {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8A857D;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .actua-datos-row .et_pb_column + .et_pb_column {
    margin-top: 24px;
  }
}


/* =========================================================================
   06 · TARJETAS DE DOCUMENTOS (Cuentas anuales, Estatutos)
========================================================================= */
.actua-cards .et_pb_column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: background .15s ease;
}

.actua-cards .et_pb_column:hover {
  background: #EBE8E3 !important;
}

.actua-cards .actua-doc-btn {
  margin-top: auto !important;
}

.actua-doc-icono {
  width: 38px;
  height: 38px;
  color: #F73118;
}

.actua-doc-icono svg {
  width: 100%;
  height: 100%;
  display: block;
}

.actua-doc-desc p {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-bottom: 0;
}

@media (max-width: 980px) {
  .actua-cards .et_pb_column {
    margin-bottom: 24px !important;
  }
}


/* =========================================================================
   07 · FORMULARIOS (Contact Form 7)
========================================================================= */
.actua-form .wpcf7 form > p,
.actua-form .wpcf7-form > p {
  margin: 0;
  padding: 0;
}

.actua-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  border: 2px solid #0F0E0C;
  background: #FFFFFF;
}

/* Campo: etiqueta arriba, línea negra debajo */
.actua-form .fld {
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid #0F0E0C;
}

.actua-form .fld label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A857D;
  padding: 14px 20px 0;
}

.actua-form .fld input,
.actua-form .fld textarea,
.actua-form .fld select {
  font-family: inherit;
  font-size: 17px;
  color: #0F0E0C;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 6px 20px 16px;
  width: 100%;
  box-shadow: none;
}

.actua-form .fld textarea {
  min-height: 150px;
  height: 150px;
  resize: vertical;
}

.actua-form .fld input:focus,
.actua-form .fld textarea:focus {
  outline: none;
}

.actua-form .fld:focus-within {
  background: #EBE8E3;
}

.actua-form .fld:focus-within label {
  color: #F73118;
}

/* Desplegable (Perfil profesional en Únete al equipo) */
.actua-form .fld select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230F0E0C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 20px center / 12px 8px;
}

/* Adjuntar archivo (CV en Únete al equipo) */
.actua-form .fld-file {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px 18px;
  border-bottom: 2px solid #0F0E0C;
}

.actua-form .fld-file label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A857D;
}

.actua-form .fld-file input[type="file"] {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: #8A857D;
  border: 0;
  padding: 0;
  background: transparent;
}

.actua-form .fld-file input[type="file"]::file-selector-button {
  margin-right: 16px;
  padding: 12px 18px;
  border: 2px solid #0F0E0C;
  border-radius: 0;
  background: #FFFFFF;
  color: #0F0E0C;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.actua-form .fld-file input[type="file"]::file-selector-button:hover {
  background: #0F0E0C;
  color: #FFFFFF;
}

.actua-form .fld-file:focus-within {
  background: #EBE8E3;
}

/* Fila de dos campos */
.actua-form .fld-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid #0F0E0C;
}

.actua-form .fld-row .fld {
  border-bottom: none;
}

.actua-form .fld-row .fld + .fld {
  border-left: 2px solid #0F0E0C;
}

/* Casilla de privacidad */
.actua-form .legal {
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #3B3936;
}

.actua-form .legal .wpcf7-list-item {
  margin: 0;
}

.actua-form .legal label {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  align-items: start;
}

.actua-form .legal input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid #0F0E0C;
  border-radius: 0;
  background: #FFFFFF;
  cursor: pointer;
  margin-top: 2px;
}

.actua-form .legal input[type="checkbox"]:checked {
  background: #F73118;
  border-color: #F73118;
}

.actua-form .legal a {
  color: #0F0E0C;
  text-decoration: underline;
  text-decoration-color: #F73118;
  text-underline-offset: 3px;
}

/* Botón de enviar, pegado al borde inferior */
.actua-form .wpcf7-submit {
  width: 100%;
  border: none;
  border-top: 2px solid #0F0E0C;
  border-radius: 0;
  background: #F73118;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 22px 24px;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}

.actua-form .wpcf7-submit:hover {
  background: #0F0E0C;
}

/* Avisos */
.actua-form .wpcf7-not-valid-tip {
  color: #C8230F;
  font-size: 13px;
  padding: 0 20px 12px;
}

.actua-form .wpcf7-response-output {
  margin: 22px 0 0 !important;
  padding: 18px 20px !important;
  border: 2px solid #0F0E0C !important;
  background: #EBE8E3;
  font-size: 15px;
}

.actua-form .wpcf7-spinner {
  display: none;
}

@media (max-width: 767px) {
  .actua-form .fld-row {
    grid-template-columns: 1fr;
  }

  .actua-form .fld-row .fld + .fld {
    border-left: none;
    border-top: 2px solid #0F0E0C;
  }
}


/* =========================================================================
   08 · LISTADO DE ENTRADAS · .actua-blog (Inicio y Actualidad)
   Módulo Blog en modo cuadrícula con la clase «actua-blog».
   Columnas por defecto: 4 en escritorio, 2 hasta 1200 px, 1 en móvil.
   Todo lleva «#page-container» delante: Divi mete sus propios márgenes
   en la foto y el título (30 px debajo de la imagen, etc.) y así ganamos
   siempre, cargue antes quien cargue.
   Se cambian desde el módulo, sin otra clase:
   Avanzado → CSS personalizado → Elemento principal:
     --cols: 3;       columnas en escritorio
     --cols-md: 3;    columnas hasta 1200 px
========================================================================= */
#page-container .actua-blog .et_pb_salvattore_content {
  display: grid !important;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 36px 28px;
}

#page-container .actua-blog .column {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: contents;
}

#page-container .actua-blog .et_pb_post {
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #0F0E0C;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  transition: background .15s ease;
}

#page-container .actua-blog .et_pb_post:hover {
  background: #EBE8E3;
}

/* Divi mete la foto con márgenes negativos; sin esto se sale del borde */
#page-container .actua-blog .et_pb_image_container {
  margin: 0 !important;
}

#page-container .actua-blog .entry-featured-image-url {
  display: block;
  margin: 0;
  border-bottom: 2px solid #0F0E0C;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

#page-container .actua-blog .entry-featured-image-url img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#page-container .actua-blog .et_pb_post .post-meta,
#page-container .actua-blog .et_pb_post .entry-title,
#page-container .actua-blog .et_pb_post .post-content {
  padding-left: 26px;
  padding-right: 26px;
}

#page-container .actua-blog .et_pb_post .post-meta {
  padding-top: 26px;
  text-transform: uppercase;
}

#page-container .actua-blog .et_pb_post .entry-title {
  padding-top: 14px;
  text-transform: uppercase;
  font-stretch: 110%;
}

#page-container .actua-blog .et_pb_post .entry-title a {
  color: #0F0E0C;
}

#page-container .actua-blog .et_pb_post .post-content {
  margin-top: auto;
  padding-top: 18px;
  padding-bottom: 30px;
}

#page-container .actua-blog .et_pb_post .more-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid #F73118;
  padding-bottom: 6px;
}

#page-container .actua-blog .et_pb_post .more-link:hover {
  color: #F73118 !important;
}

#page-container .actua-blog .pagination {
  margin-top: 48px;
  border-top: 2px solid #0F0E0C;
  padding-top: 24px;
}

/* Divi pinta la paginación aunque haya una sola página; vacía, se oculta
   (si no, queda una raya negra suelta bajo las tarjetas). */
#page-container .actua-blog .pagination:not(:has(a)) {
  display: none;
}

/* Orden de la tarjeta como en la maqueta:
   foto → categoría + fecha → título → «Leer →» */
#page-container .actua-blog .et_pb_image_container { order: 0; }
#page-container .actua-blog .et_pb_post .post-meta { order: 1; }
#page-container .actua-blog .et_pb_post .entry-title { order: 2; }
#page-container .actua-blog .et_pb_post .post-content { order: 3; }

/* Categoría en etiqueta negra y fecha en gris.
   «font-size: 0» esconde la barra « | » que Divi pone entre los dos. */
#page-container .actua-blog .et_pb_post .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
  margin: 0;
  font-size: 0 !important;
  letter-spacing: 0 !important;  /* si no, el « | » oculto sigue ocupando sitio */
}

#page-container .actua-blog .et_pb_post .post-meta .published {
  order: 2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A857D;
}

#page-container .actua-blog .et_pb_post .post-meta a {
  order: 1;
  margin-right: 14px;
  padding: 6px 10px;
  background: #0F0E0C;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* «Leer más» de Divi → «Leer →» */
#page-container .actua-blog .et_pb_post .more-link {
  gap: 0 !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;  /* el «Leer más» oculto no ocupa sitio */
}

#page-container .actua-blog .et_pb_post .more-link::before {
  content: "Leer";
  font-size: 13px;
  letter-spacing: .1em;
}

#page-container .actua-blog .et_pb_post .more-link::after {
  content: "→";
  margin-left: 10px;
  font-size: 13px;
  transition: transform .15s ease;
}

#page-container .actua-blog .et_pb_post .more-link:hover::after {
  transform: translateX(5px);
}

@media (max-width: 1200px) {
  #page-container .actua-blog .et_pb_salvattore_content {
    grid-template-columns: repeat(var(--cols-md, 2), minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #page-container .actua-blog .et_pb_salvattore_content {
    grid-template-columns: 1fr;
  }
}


/* --- Entrada sin imagen destacada ---------------------------------------
   En la plantilla de la entrada, la primera fila del cuerpo lleva un único
   módulo, «Título de la entrada», y de él solo se pinta la foto (el titular
   va en la cabecera). Si la entrada no tiene imagen destacada, Divi lo pinta
   igualmente con un <img> de src vacío: un recuadro con borde y 52 px de
   alto justo debajo de la cabecera.

   Se esconde la fila entera (con su columna dentro) solo en ese caso.

   OJO: si algún día se mete otro módulo en esa fila, hay que quitar esta
   regla o ese módulo desaparecerá también en las entradas sin foto.
------------------------------------------------------------------------ */
.et_pb_row:has(> .et_pb_column > .et_pb_post_title .et_pb_title_featured_container img[src=""]),
.et_pb_row:has(> .et_pb_column > .et_pb_post_title .et_pb_title_featured_container img:not([src])) {
  display: none !important;
}

/* Respaldo si el navegador no soporta :has(): esconde el módulo y su foto */
.et_pb_post_title:has(.et_pb_title_featured_container img[src=""]),
.et_pb_post_title:has(.et_pb_title_featured_container img:not([src])) {
  display: none !important;
}

.et_pb_post_title .et_pb_title_featured_container img[src=""],
.et_pb_post_title .et_pb_title_featured_container img:not([src]) {
  display: none !important;
}


/* =========================================================================
   09 · CARTELES DE PROYECTOS · .actua-proyectos
   Módulo Blog con clase «actua-proyectos»: carteles verticales en 3
   columnas. Lo usan el listado de Proyectos y «Otros proyectos» dentro
   de cada proyecto.
========================================================================= */
#page-container .actua-proyectos .et_pb_salvattore_content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 40px;
}

#page-container .actua-proyectos .column {
  display: contents;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

#page-container .actua-proyectos .et_pb_post {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
}

#page-container .actua-proyectos .et_pb_image_container {
  margin: 0 !important;
}

/* Cartel vertical con borde negro */
#page-container .actua-proyectos .entry-featured-image-url {
  display: block;
  margin: 0 0 18px;
  border: 2px solid #0F0E0C;
  background: #EBE8E3;
  aspect-ratio: 1447 / 2048;
  overflow: hidden;
}

#page-container .actua-proyectos .entry-featured-image-url img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page-container .actua-proyectos .entry-title {
  margin: 0;
  padding: 0;
}

#page-container .actua-proyectos .entry-title a {
  color: #0F0E0C;
  transition: color .15s ease;
}

#page-container .actua-proyectos .entry-title a:hover {
  color: #F73118;
}

#page-container .actua-proyectos .post-content {
  margin-top: 8px;
}

#page-container .actua-proyectos .post-content p {
  padding-bottom: 0;
}

#page-container .actua-proyectos .pagination {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid #0F0E0C;
}

/* Vacía (una sola página) no se muestra: evita una raya suelta */
#page-container .actua-proyectos .pagination:not(:has(a)) {
  display: none;
}

@media (max-width: 980px) {
  #page-container .actua-proyectos .et_pb_salvattore_content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 28px;
  }
}

@media (max-width: 600px) {
  #page-container .actua-proyectos .et_pb_salvattore_content {
    grid-template-columns: 1fr;
  }
}


/* =========================================================================
   10 · FILTRO DE CATEGORÍAS · .actua-filtro
   Lo genera el PHP del child theme (functions.php) con los shortcodes
   [rayuela_categorias] / [actua_categorias] (Actualidad) y
   [rayuela_proyectos_filter] / [actua_proyectos_filtro] (Proyectos).
========================================================================= */
.actua-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: flex-start;
  margin-bottom: 32px;
}

.actua-filtro a {
  display: inline-block;
  margin: 0 -2px -2px 0;
  padding: 16px 30px;
  border: 2px solid #0F0E0C;
  border-radius: 0;
  background: #FFFFFF;
  color: #0F0E0C;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.actua-filtro a:hover {
  background: #EBE8E3;
  color: #0F0E0C;
}

.actua-filtro a.active {
  background: #0F0E0C;
  color: #FFFFFF;
}

/* Si no hay ninguna marcada, la primera va marcada (como en la maqueta) */
.actua-filtro:not(:has(a.active)) a:first-child {
  background: #0F0E0C;
  color: #FFFFFF;
}

@media (max-width: 600px) {
  .actua-filtro a {
    flex: 1;
    padding: 14px 12px;
    text-align: center;
  }
}