/*!
Theme Name: justiciaAbogados
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: justiciaabogados
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

justiciaAbogados is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* MIO
	 ========================================================================== */

:root {
  --container: 90%; /* Valor por defecto para pantallas muy pequeñas */
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin: 0 auto;
  max-width: var(--container);
}

/* Para pantallas más grandes (ejemplo: tablets) */
@media (min-width: 768px) {
  :root {
    --container: 720px;
    --spacing: 20px;
  }

  imagen-cabecera {
    width: 100%;
    height: auto;
  }
}

/* Para pantallas de escritorio medianas */
@media (min-width: 992px) {
  :root {
    --container: 960px;
    --spacing: 20px;
  }
}

/* Para pantallas de escritorio grandes */
@media (min-width: 1200px) {
  :root {
    --container: 1140px;
    --spacing: 25px;
  }
}

/* Para pantallas de escritorio extra grandes */
@media (min-width: 1400px) {
  :root {
    --container: 1320px;
    --spacing: 25px;
  }
}

.custom-logo {
  max-width: 150px; /* Tamaño máximo en pantallas grandes (ajusta según tu diseño) */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Ayuda a controlar el espaciado si es necesario */
}

.hero-text {
  font-size: larger;
}

.hero-slogan {
  /* Color del texto: Ya es blanco, lo cual contrasta bien con el rojo */
  font-weight: 700; /* O 'bold'. 700 es un valor numérico común para negrita */

  /* Tamaño de la fuente: Puedes ajustarlo para que tenga más presencia */
  font-size: 1.2em;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
  /* Sombra ligera: desplazamiento x, desplazamiento y, radio de desenfoque, color (negro con 50% de opacidad) */

  margin: 5px 10px; /* Ajusta el valor según cuánto espacio necesites */

  text-transform: uppercase; /* Mantiene el texto en mayúsculas */
  text-align: center;
}

.custom-button {
  display: inline-block;
  padding: 8px 5px;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  /* Para los bordes redondeados */
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Sombra suave */
}

.hero-button {
  cursor: default;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #000000;
  font-family: Garamond;
  padding: 5px;
  /* -webkit-box-shadow: 1px 1px 20px 0 #000000;
  -moz-box-shadow: 1px 1px 20px 0 #000000; */
  box-shadow: 1px 1px 20px 0 #000000;
  /* text-shadow: 0 0 50px #000000; */
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.hero-image {
  display: block;
  max-width: 100%;
  height: auto;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) calc(100% - 20px),
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) calc(100% - 20px),
    rgba(0, 0, 0, 0) 100%
  );
}

.blogcontainer {
  text-align: center;
  margin: 1rem;
}
.aligncenter {
  text-align: center;
  align-self: center;
}

.bginvisible {
  background-color: transparent;
}

.principal {
  background-color: #002147;
  color: #333333;
}
.secondary {
  background-color: #f4f4f4;
  color: #222222;
}

.basis-auto {
  flex-basis: auto;
}

.basis60 {
  flex-basis: 60%;
}

.basis40 {
  flex-basis: 40%;
}

.hero-image-container {
  align-content: center;
}

.contenedor-mapa-direccion {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  gap: 20px;
  padding: 0;
  border-radius: 10px;
  background-color: #1976d2;
  color: #ffffff;
}

.mapa {
  width: 100%;
  min-height: 60vh;
}

.mapa-text {
  line-height: 1.4;
  margin: 10px 0px 0px 0px;
  font-size: 17px;
  color: #ffff;
}

/* Asegura que las imágenes sean responsivas */
.detail-img {
  max-width: 100%;
  /* La imagen nunca será más ancha que su contenedor */
  height: auto;
  /* Mantiene la proporción de la imagen */
  display: block;
  /* Elimina espacio extra debajo de las imágenes */
}

/* --- Estilos de la Sección Hero --- */
.detail-section {
  /* *** Reemplaza con la ruta de tu imagen *** */
  background-size: cover;
  /* Cubre toda el área de la sección sin distorsionar la imagen */
  background-position: center;
  /* Centra la imagen de fondo */
  background-repeat: no-repeat;
  /* Evita que la imagen se repita */
  color: #fff;
  /* Color del texto (blanco) para que se lea bien sobre la imagen */
  text-align: center;
  /* Centra el texto dentro del hero */
  padding: 80px 20px;
  /* Espaciado interior arriba y abajo */
  position: relative;
  /* Necesario si quieres superponer algo o usar pseudo-elementos */
  min-height: 400px;
  /* Altura mínima para que se vea la imagen, ajusta si necesitas más */

  display: flex;
  align-items: center;
  justify-content: center;

  /* Opcional: Capa semi-transparente oscura sobre la imagen para mejorar la legibilidad del texto */
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Color negro con 50% de opacidad */
    z-index: 1;
    /* Asegura que la capa esté sobre la imagen pero bajo el contenido */
  }
}

.detail-content {
  position: relative;
  /* Coloca el contenido sobre la capa semi-transparente */
  z-index: 2;
  /* Mayor que el z-index de ::before */
  /* Opcional: Text-shadow para que el texto resalte aún más */
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
}

.detail-content h1 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 2.8em;
  /* Tamaño grande para el título principal */
}

.detail-content p {
  margin-top: 0;
  font-size: 1.2em;
  /* Tamaño para el subtítulo */
  max-width: 800px;
  /* Limita el ancho del subtítulo */
  margin-left: auto;
  /* Centra el párrafo con max-width */
  margin-right: auto;
  /* Centra el párrafo con max-width */
}

/* --- Estilos de la Sección de Contenido (Columnas) --- */
/* --- VARIABLES --- */
:root {
  --color-primary: #002147; /* Azul Justicia */
  --color-secondary: #ffcc00; /* Amarillo Botones */
  --color-text: #333333;
  --color-light-bg: #f4f7f6;
}

/* --- HERO SECTION --- */
.legal-hero {
  position: relative;
  height: 60vh; /* Altura considerable */
  min-height: 400px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Efecto Parallax suave */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 50px;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 33, 71, 0.9),
    rgba(0, 33, 71, 0.6)
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #ffffff;
  max-width: 900px;
  padding: 0 20px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-size: 1.5rem; /* Un poco más grande y legible */
  line-height: 1.4;
  font-weight: 500; /* Un poco más de grosor para destacar sobre el fondo */
  color: var(
    --color-secondary
  ); /* El texto ahora es del color dorado/amarillo */
  text-align: center; /* Centrado, igual que el título */
  margin-top: 25px; /* Separación respecto al título principal */

  /* Eliminamos los estilos de "caja" anteriores */
  border: none;
  background: none;
  padding: 0;

  /* Limitamos el ancho para que no se estire demasiado en pantallas gigantes */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* --- LAYOUT GRID --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.legal-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr; /* 60% texto - 40% imagen */
  gap: 60px;
  margin-bottom: 80px;
}

/* --- SERVICES CARDS (Transformación de la lista) --- */
.intro-block h3 {
  color: var(--color-primary);
  font-size: 1.8rem;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-secondary);
  display: inline-block;
  padding-bottom: 5px;
}

.intro-block h4  {
  color: var(--color-primary);
  font-size: 1.5rem;
  margin-bottom: 20px;
  /* border-bottom: 2px solid var(--color-secondary); */
  display: inline-block;
  padding-bottom: 5px;
}

.intro-block h2 {
    color: var(--color-primary);
  font-size: 1.5rem;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-secondary);
  display: inline-block;
  padding-bottom: 5px;
}

.service-card {
  display: flex;
  align-items: flex-start;
  background: #ffffff;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 4px solid transparent;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--color-secondary);
}

.icon-box {
  background: var(--color-light-bg);
  color: var(--color-primary);
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.card-text {
  color: #555;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
}

/* --- IMAGENES Y SIDEBAR --- */
.sticky-gallery {
  position: sticky;
  top: 40px; /* Hace que la columna derecha te siga al bajar */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.legal-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.legal-image:hover img {
  transform: scale(1.02);
}

/* --- CTA BOX (Llamada a la acción) --- */
.cta-box {
  background-color: var(--color-primary);
  color: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 15px 30px rgba(0, 33, 71, 0.3);
}

.cta-box h3 {
  color: var(--color-secondary);
  margin-bottom: 10px;
}

.btn-gold {
  display: block;
  background: var(--color-secondary);
  color: var(--color-primary);
  padding: 12px 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  margin: 15px 0 10px 0;
  transition: background 0.3s;
}

.btn-gold:hover {
  background: #e6b800;
}

.btn-outline {
  display: block;
  border: 2px solid white;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 50px;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .legal-grid {
    grid-template-columns: 1fr; /* Una sola columna en móvil */
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .sticky-gallery {
    position: static;
  }

  .media-column {
    order: -1; /* Poner imágenes arriba en móvil si prefieres, o quita esta línea */
  }
}

/* --- ESTILOS QUIENES SOMOS (EQUIPO) --- */

/* Introducción destacada */
.firm-intro {
  font-size: 1.3rem;
  line-height: 1.6;
  color: #444;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 60px auto;
  border-bottom: 3px solid var(--color-secondary);
  padding-bottom: 30px;
}

/* Grid de Miembros */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-bottom: 80px;
}

.team-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border-top: 5px solid var(--color-primary);
  transition: transform 0.3s;
}

.team-card:hover {
  transform: translateY(-5px);
}

.member-header {
  background: #f8f9fa;
  padding: 30px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.member-name {
  color: var(--color-primary);
  font-size: 1.8rem;
  margin: 0 0 10px 0;
  font-weight: 700;
}

.member-role {
  color: var(--color-secondary); /* Amarillo/Dorado */
  font-weight: bold;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.member-body {
  padding: 30px;
}

.bio-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bio-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}

.bio-icon {
  margin-right: 15px;
  font-size: 1.2rem;
  line-height: 1;
}

/* CTA Ancho al final */
.cta-section-wide {
  background-color: var(--color-primary);
  color: white;
  text-align: center;
  padding: 60px 20px;
  border-radius: 12px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.cta-section-wide h3 {
  font-size: 2rem;
  margin-bottom: 15px;
  color: var(--color-secondary);
}

.cta-section-wide p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.modern-legal-template {
  margin-bottom: 120px; /* 120px de aire en escritorio */
}

/* --- ESTILO QUIENES SOMOS V2 (Limpio y Estructurado) --- */

.about-brand-story {
  max-width: 900px;
  margin: 0 auto 60px auto;
  background-color: #ffffff;
  padding: 0; /* Quitamos padding del contenedor principal para usarlo dentro */
  /* Quitamos bordes y sombras pesadas del contenedor general para un look más abierto */
}

.about-brand-story h2 {
  color: var(--color-primary);
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 15px;
}

/* Línea decorativa bajo el título */
.about-brand-story h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--color-secondary);
}

.brand-text-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444;
}

/* Párrafo introductorio destacado */
.brand-intro-p {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 30px;
}

/* --- LISTA DE OPOSICIONES (GRID) --- */
.opposition-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* 2 columnas responsivas */
  gap: 15px;
  background-color: #f8f9fa; /* Fondo gris muy suave */
  padding: 30px;
  border-radius: 8px;
  border-left: 5px solid var(--color-primary); /* Borde azul a la izquierda */
  margin: 30px 0;
}

.opposition-item {
  display: flex;
  align-items: flex-start;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
}

.opposition-item::before {
  content: "✔"; /* Checkmark */
  color: var(--color-secondary); /* Color dorado */
  margin-right: 10px;
  font-weight: bold;
  font-size: 1.1rem;
}

/* --- CAJA METODOLOGÍA --- */
.methodology-box {
  background-color: #fff;
  border: 2px solid #eee;
  padding: 30px;
  border-radius: 8px;
  position: relative;
  margin-top: 40px;
}

.methodology-title {
  color: var(--color-secondary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: block;
}

/* --- ESTILOS EXTRA PARA TEXTOS LEGALES --- */

.brand-text-content h3 {
  color: var(--color-primary); /* Azul corporativo */
  font-size: 1.5rem;
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.brand-text-content h4 {
  color: #555;
  font-size: 1.1rem;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

/* Listas personalizadas para legal */
.legal-list {
  list-style: none; /* Quitamos el punto por defecto */
  padding: 0;
  margin-bottom: 20px;
}

.legal-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: #444;
}

/* El puntito personalizado (Dorado) */
.legal-list li::before {
  content: "•"; /* O puedes usar '✔' si prefieres */
  color: var(--color-secondary); /* Amarillo */
  font-size: 1.5rem;
  position: absolute;
  left: 0;
  top: -5px;
  line-height: 1;
}

/* Enlaces dentro del texto legal */
.brand-text-content a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 600;
}

/* --- BLOQUE SOCIAL EN CONTENIDO --- */
.content-social-block {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 2px solid #eee;
}

.content-social-block h3 {
  color: var(--color-primary);
  font-size: 1.5rem;
  margin-bottom: 25px;
  font-weight: 700;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(180px, 1fr)
  ); /* Se adapta solo */
  gap: 15px;
}

.social-item {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  padding: 10px 15px;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.social-item img {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}

/* Efecto Hover */
.social-item:hover {
  background: #fff;
  border-color: var(--color-secondary); /* Borde amarillo al pasar ratón */
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Destacar Whatsapp un poco más si quieres */
.social-item.whatsapp {
  background-color: #e6fffa;
  border-color: #25d366;
}

/* Ajuste Mobile */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

  .modern-legal-template {
    margin-bottom: 60px;
  }
}
.content-section {
  display: flex;
  /* Habilita Flexbox para crear columnas */
  flex-direction: row;
  /* Por defecto en Flexbox, pero lo especificamos (columnas) */
  gap: 40px;
  /* Espacio entre la columna de texto y la de imágenes */
  padding: 40px 20px;
  /* Espaciado interior de la sección */
  max-width: 1200px;
  /* Ancho máximo del contenido para centrarlo */
  margin: 0 auto;
  /* Centra la sección en la página */
  align-items: flex-start;
  /* Alinea las columnas en la parte superior */
  flex-wrap: wrap;
}

.text-column {
  flex: 2;
  /* La columna de texto ocupará 2 partes de 3 (aprox 66%) */
  min-width: 0;
  /* Permite que el contenido dentro de la columna se reduzca si es necesario */
}

.image-column {
  flex: 1;
  /* La columna de imágenes ocupará 1 parte de 3 (aprox 33%) */
  min-width: 0;
  /* Permite que las imágenes se reduzcan */
  display: flex;
  /* Habilita Flexbox dentro de la columna de imágenes si hay varias */
  flex-direction: column;
  /* Apila las imágenes verticalmente si hay varias */
  gap: 20px;
  /* Espacio entre imágenes si hay varias */
}

.text-column,
.image-column {
  flex: none;
  /* Elimina el flex-grow/shrink para que ocupen el ancho completo */
  width: 100%;
  /* Ocupan todo el ancho disponible */
}

.detail-section {
  padding: 60px 15px;
  /* Reduce el padding del hero en móviles */
  min-height: 300px;
  /* Ajusta altura mínima del hero si es necesario */
}

.detail-content h1 {
  font-size: 2em;
  /* Reduce el tamaño del título en móviles */
}

.detail-content p {
  font-size: 1em;
  /* Reduce el tamaño del subtítulo en móviles */
}

/* --- Estilos de las Tarjetas (Versión Final) --- */

/* Contenedor principal para dos columnas */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px; /* Aumentamos el espacio entre tarjetas */
  justify-items: center;
  padding: 20px 0;
  max-width: 1200px; /* Asegura que el grid tenga espacio para crecer */
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px; /* Aumentado de 360px a 500px para que sean más grandes */
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Imagen más grande */
.card-image {
  margin: 0;
  width: 100%;
  height: 280px; /* Aumentado de 200px a 280px para dar más impacto visual */
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: 30px; /* Más aire interno para una tarjeta más grande */
  text-align: left;
}

.card-title {
  margin: 0;
  font-size: 26px; /* Título más grande para acompañar el nuevo tamaño */
  color: #333;
  font-weight: 800;
  line-height: 1.2;
  flex: 1; /* Ahora ocupa todo el ancho disponible */
}

.card-title a {
  text-decoration: none;
  color: inherit;
}

/* Badge Azul */
.badge {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
  text-transform: none;
}

/* Responsividad: En móviles pasan a una columna pero siguen siendo grandes */
@media (max-width: 992px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .card {
    max-width: 600px; /* En móvil pueden ocupar casi todo el ancho */
  }
}

/*--------------------------------------------------------------
/* Final sección tarjetas Cards */
/*--------------------------------------------------------------



/* Corrección de anomalía encontrada en tu CSS anterior */
.entry-title {
  display: none; /* Corregido de 'hide' a 'none' */
}

.image-page {
  border-radius: 5px;
}

.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 1)
  );
}

.sombra-texto {
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
  /* background-color: rgba(0, 0, 0, 0.8); */
  padding: 5px 10px;
  color: #ffffff;
}

.hero {
  position: relative;
  padding: 0;
  color: #fff;
  height: 80vh;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.separador {
  height: 50px;
  width: 100%;
}

.separador2 {
  height: 30px;
  width: 100%;
}

.separador-body {
  height: 100px;
  width: 100%;
}

.calltoaction {
  background-color: #002147;
  width: 100%;
  text-align: center;
  position: relative;
}

.calltoaction2 {
  background-color: #ffcc00cc;
  width: 100%;
  text-align: center;
  position: relative;
  color: #222222;
}

.calltoaction a {
  text-decoration: none;
  color: #ffffff;
  position: relative;
  display: block;
  padding: 50px 10px;
}

.calltoaction2 a {
  text-decoration: none;
  color: #002147;
  position: relative;
  display: block;
  padding: 50px 10px;
  /* background-color: #002147; */
}
.calltoaction2 a:visited {
  color: #222222;
}

.calltoaction a:visited {
  color: #ffffff;
}

.calltoaction p {
  margin: 0;
  padding: 0;
  font-size: 24px;
  line-height: 1.4;
}

.calltoaction img {
  width: 30px;
  height: auto;
  top: 5px;
  position: relative;
}

.calltoaction strong {
  font-weight: bold;
}

.section-mapa {
  background-color: #fffffff0;
  height: 60vh;
  width: 100%;
}

.mapa-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.mapa-item {
  flex: 1;
}

.entry-title {
  display: hide;
}

.social-links-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.social-links-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-left: auto;
}

.social-links-footer img {
  width: 55px;
  height: 55px;
  /* Tamaño de los iconos */
  transition: transform 0.3s ease;
  /* Transición suave para el efecto hover */
}
.social-links-principal img {
  width: 75px;
  height: 75px;
  /* Tamaño de los iconos */
  transition: transform 0.3s ease;
  /* Transición suave para el efecto hover */
}

.social-links-principal a:hover img {
  transform: scale(1.2);
}

.social-links-footer a:hover img {
  transform: scale(1.2);
}

.hero-flex-container {
  display: flex;
  justify-content: center;
}

.hero-flex-container-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/* Opcional: Ajustes para pantallas un poco más grandes que móvil pero antes del desktop */
@media (max-width: 992px) {
  .content-section {
    gap: 30px;
    /* Ajusta el espacio entre columnas */
    padding: 30px 15px;
    /* Ajusta el padding */
    max-width: 720px;
  }

  .hero-image-container img {
    max-width: none;
    width: 135%;
  }

  .text-column {
    flex: 1.5;
    /* Puedes ajustar la proporción si prefieres */
  }

  .separador {
    height: 30px;
    width: 100%;
  }
}

@media (max-width: 872px) {
  .hero-image-container img {
    width: 110%;
  }

  .custom-button {
    font-size: 13px;
    padding: 8px 5px;
  }
}

/* --- Adaptación a Pantallas Pequeñas (Responsividad) --- */
@media (max-width: 768px) {
  .content-section {
    flex-direction: column;
    /* En pantallas pequeñas, las columnas se apilan verticalmente */
    gap: 30px;
    /* Ajusta el espacio entre las secciones apiladas */
    max-width: 600px;
  }

  .hero-image-container img {
    width: 115%;
  }

  .hero-text {
    font-size: medium;
  }

  .hero-flex-container {
    justify-content: center;
  }

  .detail-section {
    margin-top: 50px;
  }

  .card-block .card-body {
    flex: 0 0 100%;
  }
}

@media (max-width: 620px) {
  .separador {
    height: 0;
  }

  .hero-image-container img {
    width: 180%;
  }
  .hero-flex-container {
    justify-content: start;
  }

  .hero-content {
    margin-top: 230px;
  }

  .content-section {
    max-width: 450px;
  }

  .separador-body {
    height: 500px;
    width: 100%;
  }
}

@media (max-width: 500px) {
  .hero-content {
    margin-top: 200px;
  }

  .separador-body {
    height: 500px;
    width: 100%;
  }
}

/* --- HERO INTERACTIVO --- */
.hero-interactive {
    position: relative;
    
    /* Configuración para que la imagen se vea bien */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #002147; /* Color de seguridad por si la foto falla */

    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 40px 0;
}

/* EFECTO DE LUZ AMARILLA (Se mantiene igual, esto va ENCIMA de la foto oscurecida) */
.hero-interactive::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.15) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
    pointer-events: none;
}

.hero-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* --- TEXTO IZQUIERDA --- */
.hero-content-inicio {
  color: white;
}

.badge-pill {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffcc00;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 204, 0, 0.3);
}

.hero-content-inicio h1 {
  font-size: 3.5rem;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 20px;
}

.hero-content-inicio .highlight {
  color: #ffcc00;
  position: relative;
}

/* Subrayado amarillo */
.hero-content-inicio .highlight::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: rgba(255, 204, 0, 0.3);
  z-index: -1;
}

.hero-content-inicio p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 35px;
  max-width: 500px;
  line-height: 1.6;
}

/* Botones */
.hero-buttons {
  display: flex;
  gap: 15px;
}

.btn-hero-primary {
  background-color: #ffcc00;
  color: #002147;
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.3s;
}

.btn-hero-outline {
  border: 2px solid white;
  color: white;
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.btn-hero-primary:hover {
  transform: translateY(-3px);
  background-color: #e6b800;
}
.btn-hero-outline:hover {
  background-color: white;
  color: #002147;
}

/* --- GRID DERECHA (ANIMADO) --- */
.hero-visual {
  perspective: 1000px; /* Clave para el efecto 3D */
  display: flex;
  justify-content: center;
}

.floating-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 15px;
  transform-style: preserve-3d; /* Permite rotación 3D */
  transition: transform 0.1s ease-out; /* Movimiento fluido */
  width: 100%;
  max-width: 500px;
}

.floating-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  aspect-ratio: 1/1; /* Cuadradas */
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: #003366;
}

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

/* Tarjeta central diferente (Logo) */
.card-logo {
  background-color: #ffcc00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

/* Efecto hover individual en las tarjetas */
.floating-card:hover img {
  transform: scale(1.1);
}

/* Posicionamiento estilo "mosaico desplazado" */
.card-2 {
  margin-top: -30px;
}
.card-5 {
  margin-top: -30px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .hero-grid-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-content-inicio p {
    margin: 0 auto 30px auto;
  }
  .hero-buttons {
    justify-content: center;
  }
  .hero-visual {
    margin-top: 50px;
  }
  .floating-cards-grid {
    max-width: 400px;
  }
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: #404040;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: #fff;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

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

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
a {
  color: #4169e1;
}

a:hover,
a:focus,
a:active {
  /* color: #002147; */
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
  display: block;
  /* width: 100%; */
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}

.main-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.updated:not(.published) {
  display: none;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

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

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  /* margin-left: auto;
  margin-right: auto; */
  /* margin-bottom: 1em; */
}

/* Padding
--------------------------------------------- */
.padding-0 {
  padding: 0 !important;
}