/* css/styles.css */

/* El .ttf del trial trae los dígitos 0-9 con el glyph roto (vacío/corrupto,
   no ausente): el navegador cree que Arsenica "tiene" el número y nunca
   activa el fallback normal de font-family. Por eso acá se le excluye
   directamente el rango de los dígitos con unicode-range — así el
   navegador ni la considera candidata para esos caracteres — y la
   segunda regla (mismo nombre de familia) cubre justo ese rango con
   una fuente del sistema que sí los tiene. Letras y símbolos siguen en
   Arsenica sin cambios. */
@font-face {
  font-family: 'Arsenica';
  src: url('../fonts/arsenica-trial-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-002F, U+003A-10FFFF;
}

@font-face {
  font-family: 'Arsenica';
  src: local('Inter'), local('Helvetica Neue'), local('Arial'), local('Liberation Sans'), local('DejaVu Sans');
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0030-0039;
}

:root {
  --color-bg: #FAF6F2;
  --color-bg-alt: #F3ECE5;
  --color-text: #2E211C;
  --color-accent: #7B3A2C;
  --color-accent-2: linear-gradient(125deg,rgba(167, 51, 23, 1) 0%, rgba(111, 64, 61, 1) 100%);
  /* Arsenica no trae glifos de números: cualquier dígito dentro de un
     heading cae al siguiente de la lista. Inter (la fuente de body) va
     primero para que un título con números no mezcle un tercer estilo
     de letra (Georgia) sin relación con el resto del sitio. */
  --font-display: 'Arsenica', 'Inter', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --container-width: 1200px;
}

html {
  scroll-padding-top: 5rem;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, p, blockquote, ul, figure {
  margin: 0;
}

/* El reset de arriba solo pone margin:0 en ul — el padding-inline-start:40px
   por default del user-agent para <ul> queda vivo y nunca se resetea acá,
   así que cualquier <ul> sin su propio padding (ej. .social-links) hereda
   esos 40px de la izquierda. */
ul {
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.btn-primary:hover {
  background-color: #612d22;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.btn-secondary:hover {
  background-color: rgba(123, 58, 44, 0.08);
}

/* Fixed (no sticky) a propósito: en la home, el header arranca flotando
   sobre el hero, pegado abajo, y sube al header normal cuando el hero
   sale de vista (ver .site-header--hero y el IntersectionObserver en
   js/main.js). Con sticky no se puede animar esa posición inicial sin
   saltos, porque top/bottom no interpolan bien desde "auto". El body
   compensa el espacio que el header ya no reserva en el flujo normal
   (ver la regla de padding-top más abajo). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid rgba(46, 33, 28, 0.1);
  z-index: 100;
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header--hero {
  transform: translateY(var(--header-parked-y, 0px));
}

body {
  padding-top: var(--header-h, 65px);
}

/* La home (con hero) no reserva ese espacio: el hero ocupa toda la
   primera pantalla y el header flota encima, no empuja el contenido. */
body:has(#inicio) {
  padding-top: 0;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.logo-img {
  height: 32px;
  width: auto;
}

.nav-list {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-list a {
  font-size: 0.95rem;
  font-weight: 500;
}

.nav-list a:hover {
  color: var(--color-accent);
}

.nav-list a.nav-active {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    border-bottom: 1px solid rgba(46, 33, 28, 0.1);
    display: none;
  }

  .nav.open {
    display: block;
  }

  /* Con el header parqueado abajo (hero), "top: 100%" abriría el menú por
     fuera del viewport. Ahí se abre para arriba en vez de para abajo. */
  .site-header--hero .nav {
    top: auto;
    bottom: 100%;
    border-bottom: none;
    border-top: 1px solid rgba(46, 33, 28, 0.1);
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
  }

  .nav-list li {
    border-top: 1px solid rgba(46, 33, 28, 0.08);
  }

  .nav-list a {
    display: block;
    padding: 1rem 24px;
  }
}

.hero {
  padding: 6rem 0;
  text-align: center;
}

.hero-content {
  max-width: 640px;
}

.hero-title {
  margin-bottom: 1.5rem;
}

.hero-logo {
  width: min(90%, 480px);
  height: auto;
  margin: 0 auto;
}

.hero-tagline {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: var(--color-text);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.hero-more {
  margin-top: 1.25rem;
  font-size: 0.9rem;
}

.hero-more a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-more a:hover {
  color: var(--color-accent);
}

.about {
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

/* Hoja decorativa de fondo, bien tenue — le da textura orgánica a la
   sección sin competir con el texto. */
.about::before {
  content: "";
  position: absolute;
  inset: -10% -10%;
  background-image: url('../assets/leafttt.svg');
  background-repeat: no-repeat;
  background-position: center 60%;
  background-size: min(1400px, 160%) auto;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.about-content {
  max-width: 720px;
  position: relative;
  z-index: 1;
}

.about-text {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.about-quote {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-accent);
  border-left: 3px solid var(--color-accent-2);
  padding-left: 1.5rem;
}

.services {
  padding: 5rem 0;
  background-color: #F3ECE5;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.service-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: var(--color-bg);
  border-radius: 4px;
  border-top: 4px solid var(--service-accent, var(--color-accent));
  padding: 1.75rem 1.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(46, 33, 28, 0.1);
}

.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-bottom: 1rem;
  background-color: var(--service-accent, var(--color-accent));
  color: var(--color-bg);
}

.service-icon img,
.servicio-hero-icon img {
  display: block;
}

.service-card h3 {
  font-size: 1.3rem;
  color: var(--service-accent, var(--color-accent));
  margin-bottom: 0.75rem;
}

.service-card p {
  font-size: 0.95rem;
}

/* Un color de acento propio por servicio — así las 4 tarjetas se
   distinguen de un vistazo, no son bloques de texto idénticos. */
.service-card--equipos { --service-accent: #7B3A2C; }
.service-card--socioecologico { --service-accent: #5C7A52; }
.service-card--bienestar { --service-accent: #B25C6B; }
.service-card--gobernanza { --service-accent: #4F6B7A; }

/* Cabecera de la página individual de cada servicio: mismo ícono y acento
   que su tarjeta en la portada, para que se lea como el mismo servicio. */
.servicio-hero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.servicio-hero-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--service-accent, var(--color-accent));
  color: var(--color-bg);
}

.servicio-hero h1 {
  color: var(--service-accent, var(--color-accent));
  /* Sin esto, un h1 dentro de un flex row nunca se achica por debajo de
     su ancho natural (min-width: auto por default) y en pantallas
     angostas empuja al contenedor de vuelta a un scroll horizontal. */
  min-width: 0;
}

@media (max-width: 480px) {
  .servicio-hero {
    gap: 1rem;
  }

  .servicio-hero-icon {
    width: 56px;
    height: 56px;
  }

  .servicio-hero-icon img {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

.cta-banner {
  padding: 4rem 0;
  background: var(--color-accent-2);
  color: var(--color-bg);
  text-align: center;
}

/* Botón primario hereda color-accent, muy parecido al degradé de fondo
   de esta sección: casi sin contraste. Acá se invierte a claro-sobre-oscuro. */
.cta-banner .btn-primary {
  background-color: var(--color-bg);
  color: var(--color-accent);
}

.cta-banner .btn-primary:hover {
  background-color: #FFFFFF;
}

.cta-banner .btn-secondary {
  color: var(--color-bg);
  border-color: var(--color-bg);
}

.cta-banner .btn-secondary:hover {
  background-color: rgba(250, 246, 242, 0.12);
}

.cta-banner-content {
  max-width: 640px;
}

.cta-banner p {
  font-size: 1.1rem;
  margin-bottom: 1.75rem;
}

.faq-item {
  text-align: left;
  margin-bottom: 1.75rem;
}

.faq-item h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.faq-item p {
  font-size: 0.95rem;
  margin-bottom: 0;
}

.cta-lead {
  font-weight: 600;
}

.team {
  padding: 5rem 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}

.team-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}

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

.team-avatar-wrap {
  width: 88px;
  margin: 0 auto 1rem;
  position: relative;
}

.team-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Badge de LinkedIn: circulito siempre visible que en hover/foco se estira
   a un pill con el texto "LinkedIn" (mismo gesto que el badge del footer),
   metido bien adentro del círculo (no pisando el borde) para no romper la
   silueta circular de la foto. Vive en .team-avatar-wrap, no en
   .team-avatar (que tiene overflow:hidden para recortar la foto). :focus-visible
   en vez de solo :hover para que también se estire navegando con teclado. */
.team-linkedin {
  position: absolute;
  bottom: 12px;
  left: 52px;
  height: 24px;
  width: 24px;
  border-radius: 999px;
  background-color: var(--color-bg);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(46, 33, 28, 0.35);
  transition: width 0.25s ease;
}

.team-card:hover .team-linkedin,
.team-card:focus-visible .team-linkedin {
  width: 92px;
}

.team-linkedin-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-linkedin-icon svg {
  width: 13px;
  height: 13px;
}

.team-linkedin-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  white-space: nowrap;
  padding-right: 10px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.team-card:hover .team-linkedin-label,
.team-card:focus-visible .team-linkedin-label {
  opacity: 1;
  transition-delay: 0.1s;
}

/* Fotos del equipo: blanco y negro + un lavado del color de marca encima
   (mix-blend-mode: multiply), así todas quedan con el mismo tratamiento sin
   importar la foto original — el mismo criterio de "un solo filtro" para
   Araksi, José y Javier. */
.team-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.team-avatar--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-accent);
  mix-blend-mode: multiply;
  opacity: 0.35;
}

.team-name {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.team-role {
  font-size: 0.9rem;
  color: rgba(46, 33, 28, 0.7);
}

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

.contact {
  padding: 5rem 0;
  background-color: #F3ECE5;
}

.contact-content {
  max-width: 600px;
}

.contact-intro {
  margin-top: 1rem;
  color: rgba(46, 33, 28, 0.8);
}

/* Antibot: fuera de pantalla (no display:none, que algunos bots detectan). */
.contact-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-estado {
  min-height: 1.5rem;
  margin-top: 0.75rem;
  font-weight: 600;
}

.contact-estado[data-tono="ok"] { color: #3F7D52; }
.contact-estado[data-tono="error"] { color: #B23A34; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1rem;
}

/* Botón flotante de WhatsApp, en todas las páginas del sitio. Usa los
   colores de la marca (mismo gesto que el badge de LinkedIn del footer: un
   círculo crema con el ícono en bordó, dentro de una pastilla bordó) en vez
   del verde de WhatsApp, que no combinaba con nada del sitio.
   En reposo es solo el círculo. js/main.js calcula --cerca (0 = mouse lejos,
   1 = encima) y el botón crece a medida que el mouse se acerca; ya cerca
   (.is-cerca), o con hover/foco, se despliega "¿Hablamos?".
   .whatsapp-widget es el que se posiciona fijo en la pantalla y NO tiene
   transform — el QR (Step siguiente) se posiciona absolute contra él. Si el
   transform de crecimiento estuviera en este mismo elemento, se vuelve el
   "containing block" del QR y el cálculo de posición del QR queda distorsionado
   por la escala, produciendo el overlap/glitch visual. */
.whatsapp-widget {
  position: fixed;
  right: 24px;
  bottom: 70px;
  z-index: 200;
  transition: bottom 0.3s ease;
}

.whatsapp-flotante {
  --cerca: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  /* Aro crema: sin él, sobre las secciones bordó del sitio el botón
     desaparecía (mismo color que el fondo). */
  box-shadow: 0 0 0 2px var(--color-bg), 0 6px 18px rgba(46, 33, 28, 0.28);
  transform: scale(calc(1 + var(--cerca) * 0.18));
  transform-origin: bottom right;
  transition: transform 0.12s ease-out, box-shadow 0.2s ease, background-color 0.2s ease;
}

.whatsapp-flotante-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-accent);
  flex-shrink: 0;
}

.whatsapp-flotante-texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.whatsapp-flotante:hover,
.whatsapp-flotante:focus-visible,
.whatsapp-flotante.is-cerca {
  background-color: #612d22;
  box-shadow: 0 0 0 2px var(--color-bg), 0 10px 26px rgba(46, 33, 28, 0.32);
}

.whatsapp-flotante:hover,
.whatsapp-flotante:focus-visible {
  --cerca: 1;
}

.whatsapp-flotante:hover .whatsapp-flotante-texto,
.whatsapp-flotante:focus-visible .whatsapp-flotante-texto,
.whatsapp-flotante.is-cerca .whatsapp-flotante-texto {
  max-width: 10rem;
  opacity: 1;
  padding: 0 0.9rem 0 0.7rem;
}

.whatsapp-flotante:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* QR alternativo: aparece arriba del botón al pasar el mouse, para quien
   prefiere escanearlo con el celular en vez de clickear (o está viendo el
   sitio desde una pantalla compartida). Posicionado contra .whatsapp-widget
   (sin transform), no contra .whatsapp-flotante — ver comentario arriba.
   En mobile no tiene sentido (el QR quedaría en la misma pantalla que se
   está usando), así que se oculta ahí. */
.whatsapp-flotante-qr {
  position: absolute;
  right: 0;
  bottom: calc(100% + 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 14px;
  background-color: var(--color-bg);
  border: 2px solid var(--color-accent);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(46, 33, 28, 0.32);
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.whatsapp-flotante-qr img {
  display: block;
  width: 100px;
  height: 100px;
}

.whatsapp-flotante-qr-texto {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  white-space: nowrap;
}

.whatsapp-widget:hover .whatsapp-flotante-qr,
.whatsapp-widget:focus-within .whatsapp-flotante-qr {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 640px) {
  .whatsapp-flotante-qr {
    display: none;
  }
}

/* En la home, mientras el header flota abajo sobre el hero, el botón sube
   para no tapar el menú. */
.site-header--hero ~ .whatsapp-widget {
  bottom: 88px;
}

@media (max-width: 640px) {
  .whatsapp-widget {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-flotante,
  .whatsapp-flotante-texto,
  .whatsapp-flotante-qr {
    transition: none;
  }

  .whatsapp-flotante,
  .whatsapp-flotante:hover,
  .whatsapp-flotante:focus-visible {
    transform: none;
  }
}

.contact-form label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 1rem;
}

.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(46, 33, 28, 0.25);
  border-radius: 2px;
  background-color: var(--color-bg);
  color: var(--color-text);
}

.contact-form button {
  margin-top: 1.5rem;
  align-self: flex-start;
}

.site-footer {
  padding: 3rem 0;
  border-top: 1px solid rgba(46, 33, 28, 0.1);
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.footer-logo {
  height: 24px;
  width: auto;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  list-style: none;
  font-size: 0.9rem;
}

.social-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem 0.45rem 0.45rem;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-bg);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.social-badge:hover {
  background-color: #612d22;
  transform: scale(1.04);
}

.social-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-accent);
  flex-shrink: 0;
}

.social-badge-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.footer-copy {
  font-size: 0.8rem;
  color: rgba(46, 33, 28, 0.6);
}

@media (max-width: 768px) {
  .hero,
  .about,
  .services,
  .team,
  .contact {
    padding: 3.5rem 0;
  }

  .hero-logo {
    width: min(90%, 320px);
  }
}

.page-content {
  padding: 3rem 0 5rem;
}

.card {
  background-color: var(--color-bg-alt);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.app-nota {
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.75;
  margin: -0.5rem 0 1rem;
}

.blog-card-servicio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 1;
  color: var(--service-accent, var(--color-accent));
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

a.blog-card-servicio:hover {
  text-decoration: underline;
}

.blog-card-servicio img {
  flex-shrink: 0;
  display: block;
  padding: 3px;
  border-radius: 50%;
  background-color: var(--service-accent, var(--color-accent));
}

/* Volver de la página de un servicio, o de un artículo, a la sección
   Servicios de la portada — para que se sienta que es la misma sección,
   no un salto a otra parte del sitio. */
.breadcrumb-back {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  margin-bottom: 1.5rem;
}

.breadcrumb-back:hover {
  text-decoration: underline;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.3;
}

.breadcrumb > a:first-child {
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  padding-top: 0.15rem;
}

.breadcrumb > a:first-child:hover {
  text-decoration: underline;
}

.breadcrumb span {
  opacity: 0.5;
  padding-top: 0.15rem;
}

[role="alert"] {
  color: var(--color-accent);
  font-weight: 600;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.blog-article-img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.blog-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.blog-galeria img {
  width: 100%;
  border-radius: 4px;
}

.blog-videos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.blog-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 4px;
  overflow: hidden;
}

.blog-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}