/* ==========================================================================
   am-estructura.css — estructura re-skinned de Abogados Menz
   Extraído de style-referencia.css (capas de referencia) con paleta remapeada:
   verde-o #1e3a8a · verde-c #2563eb · naranjo #efb810 · naranjo-o #d9a607
   Al final: bloque SIN CAPA que ajusta contraste y añade secciones propias
   (gana al kit unlayered de style.css por ir después con igual especificidad).
   ========================================================================== */

/* === Hanken Grotesk — tipografía de encabezados ===========================
   Los @font-face de Hanken Grotesk e Inter van INLINE en el <head>
   (header-am-2026.php, "am-fuentes-criticas") para que el navegador
   empiece a descargar los woff2 antes que cualquier hoja de estilos.
   La regla de los H va SIN CAPA: gana al "h1,h2,h3 { font-family: Inter }"
   de @layer global y a cualquier regla del kit.
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Hanken Grotesk", "Inter", system-ui, sans-serif;
}

/* --- Base: global / layout / colores / textos / efectos --------------- */
@layer global {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
  }

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

  h1,
  h2,
  h3 {
    margin: 0;
    line-height: 1.2;
    font-family: "Inter", system-ui, sans-serif;
  }
  p {
    line-height: 1.3;
  }

  a {
    text-decoration: none;
  }

  header ul {
    margin: 0;
    padding: 0;
    li {
      list-style-type: none;
    }
  }
}
@layer layout {
  .wrapper {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  .section-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
@layer colores {
  :root {
    --ecot-naranjo: #efb810;
    --ecot-naranjo-o: #d9a607;
    --ecot-verde-c: #2563eb;
    --ecot-verde-o: #1e3a8a;
    --ecot-border: #0000007d;
    --ecot-texto: #313131;
    --ecot-fondo-claro: #f7f7f7;
  }
}
@layer textos {
  .texto-negro {
    font-size: 1rem;
  }
  .texto-negro a {
    color: var(--ecot-naranjo);
    font-weight: 600;
    text-decoration: underline;
  }

  .texto-negro a:hover {
    text-decoration: none;
  }
}
@layer efectos {
  :root {
    --hover-color: all 0.3s ease;
  }

  /* 1. Definimos el movimiento */
  @keyframes floating {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px); /* Sube 20 píxeles */
    }
    100% {
      transform: translateY(0px);
    }
  }

  /* 2. Aplicamos la animación a la clase */
  .float {
    display: inline-block; /* Fundamental para que transform funcione */
    animation-name: floating;
    animation-duration: 3s; /* Cuánto tarda un ciclo completo */
    animation-iteration-count: infinite; /* No se detiene nunca */
    animation-timing-function: ease-in-out; /* Movimiento suave y fluido */
  }

  .fondo-verde::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Aquí aplicamos la imagen y el degradado */
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),
      url("low-poly-grid-haikei.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    /* Aplicamos el desenfoque */
    filter: blur(8px);

    /* Escalamos un poco para evitar bordes blancos por el blur */
    transform: scale(1.1);

    z-index: 1; /* Queda atrás */
  }
}

/* --- Hero de páginas internas (cat-hero) ------------------------------ */
@layer hero-para-cat {
  .cat-hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0;
    background-color: #10263c;
  }

  /* Fondo haikei full-width nítido (sin blur), como el hero del home.
     Overlay negro al 50% (mismo tratamiento que .fondo-1::before): los
     triángulos más claros del patrón dejaban el texto poco legible. */
  .cat-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("/wp-content/themes/abogados-menz-2026/low-poly-grid-haikei.svg")
        center / cover;
  }

  .cat-hero > .wrapper {
    position: relative;
    z-index: 1;
  }

  /* Dos columnas: título a la izquierda, imagen destacada a la derecha.
     Si la página no tiene imagen destacada, queda sola la columna del título. */
  .cat-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2.5rem;
    min-height: 220px;
  }

  .hero-cat-titulo {
    color: #fff;
    text-align: left;
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin: 0;
  }

  .cat-hero-img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  }

  @media (max-width: 768px) {
    .cat-hero {
      padding: 2.5rem 0;
    }

    .cat-hero-container {
      grid-template-columns: 1fr;
      gap: 1.5rem;
      min-height: 0;
    }

    .cat-hero-img img {
      width: 100%;
      height: 180px;
    }
  }

  /*breadcrumb*/

  .bc-cat {
    position: absolute;
    top: 0;
    margin-top: 0.5rem;

    background-color: white;
    border-radius: 100px;
    padding: 0.5rem 1rem;
  }
}

/* --- Footer ------------------------------------------------------------ */
@layer footer {
  footer {
    background-color: black;
    color: white;
    padding: 70px 0 70px;
  }

  footer a {
    color: white;
    text-decoration: underline;
  }

  footer a:hover {
    text-decoration: none;
  }

  .footer-container {
    display: flex;
    flex-direction: row;
  }

  .footer-container > * {
    flex: 1;
  }

  .footer-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 1rem 0 1rem;
    gap: 2rem;
  }

  .footer-links ul {
    list-style: none;
    padding-left: 0;
  }

  .footer-link {
    padding-bottom: 1rem;
  }

  .footer-text {
    max-width: 40ch;
  }

  .footer-icons-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-bottom: 2rem;
  }

  .footer-icon {
    padding: 0.5rem;
    transition: var(--hover-color);
  }
  .footer-icon:hover svg {
    fill: var(--ecot-naranjo);
  }

  @media (max-width: 768px) {
    .footer-container,
    .footer-links-container {
      flex-direction: column;
    }
    .footer-text {
      text-align: center;
    }
    .footer-main {
      align-items: center;
    }
  }

  .footer-bottom {
    background-color: white;
    padding: 1rem 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer-bottom span {
    text-align: center;
  }
}

/* --- Contacto ---------------------------------------------------------- */
@layer contacto {
  .contacto {
    background-color: var(--ecot-fondo-claro);
  }
  .contacto-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    padding: 3rem 0;
    gap: 2rem;
  }

  .contacto-form {
    height: auto;
    background-color: #cfcfcf;
    color: var(--ecot-verde-o);
    border-radius: 18px;
    padding: 2.3rem;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  .contacto-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    color: var(--ecot-texto);
  }

  .contacto-boton-enviar {
    border: solid 2px var(--ecot-naranjo);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--ecot-naranjo);
    transition: var(--hover-color);
  }

  .contacto-boton-enviar:hover {
    background-color: var(--ecot-naranjo-o);
    border-color: var(--ecot-naranjo-o);
  }

  .contacto-container h1 {
    color: var(--ecot-verde-o);
  }
  .contacto-container h2 {
    color: var(--ecot-naranjo);
  }
  .contacto-container a {
    color: var(--ecot-naranjo);
    text-decoration: underline;
  }
  .contacto-container a:hover {
    text-decoration: none;
  }

  /*Estilos del form*/
  .ff-t-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
  }

  .contacto-form .frm-fluent-form fieldset {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--ecot-verde-o);

    input {
      width: 100%;
      font-size: 1rem;
      border-radius: 5px;
      border: none;
      padding: 0.5rem;
    }
    textarea {
      width: 100%;
      border-radius: 5px;
      border: none;
      font-size: 1.3rem;
      padding: 0.5rem;
    }
  }
}

/* --- Nosotros / misión ------------------------------------------------- */
@layer nosotros {
  .mision {
    background-color: var(--ecot-fondo-claro);
  }
  .mision-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    padding: 3rem 0;
    gap: 3rem;
  }

  .mision-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 0;
    align-items: flex-start;
    justify-content: center;
    color: var(--ecot-texto);

    h1 {
      color: var(--ecot-verde-o);
    }
  }

  .mision-info a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--ecot-naranjo);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 0 1rem;
    border-radius: 5px;
    transition: var(--hover-color);
  }

  .mision-info a:hover {
    background-color: var(--ecot-verde-o);
  }

  /* Foto de "Quiénes somos": doble capa — el haikei abajo y la foto encima
     con transparencia, para que el patrón se asome y la imagen no se vea
     tan plana. La opacidad es la perilla: 1 = foto sólida, .8 = actual. */
  .mision-imagen {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    background-color: #10263c;
    background-image: url("low-poly-grid-haikei.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .mision-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
  }

  .nosotros-ventajas {
    background-color: var(--ecot-fondo-claro);
    padding: 2rem 0;
  }
}

/* --- Formularios (FluentForm) ------------------------------------------ */
@layer formularios {
  .ff_list_2col .ff-el-input--content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ff_list_2col .ff-el-input--label {
    font-weight: 700;
  }

  .ff-el-is-required::after {
    content: " *"; /* El espacio antes del asterisco es clave */
    color: #ff0000; /* Rojo: asterisco de campo obligatorio */
    font-weight: bold; /* Para que resalte un poco más */
    margin-left: 4px; /* Un pequeño ajuste manual de separación */
    display: inline-block; /* Asegura que se comporte bien con el texto */
  }
}

/* --- Legales ----------------------------------------------------------- */
@layer legales {
  .legales {
    background-color: var(--ecot-fondo-claro);
    padding: 2rem 0;
  }
  .legales-container {
    background-color: white;
    border-radius: 20px;
    padding: clamp(1rem, 2vw + 0.5rem, 2rem);
    font-size: clamp(1rem, 2vw + 0.5rem, 1.3rem);
  }
}

/* --- Títulos banerx ---------------------------------------------------- */
@layer banerx {
  .titulo-banerx {
    font-size: clamp(2rem, 1.2rem + 4vw, 4.5rem);
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 800;
    text-wrap: balance;
    span {
      color: transparent;
      -webkit-text-stroke: 2px white;
    }
  }
  .texto-banerx {
    font-size: 1.2rem;
    max-width: 60ch;
  }
}

/* --- Reviews ----------------------------------------------------------- */
@layer section-reviews {
  .reviews {
    background-color: #e8eefb;
    padding: 2rem 0;
  }

  .reviews-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }

  .reviews-container h2 {
    font-size: 2rem;
  }

  .reviews-cards {
    display: grid;
    /* Crea 3 columnas del mismo tamaño */
    grid-template-columns: repeat(3, 1fr);

    /* Espacio entre las tarjetas */
    gap: 1rem;
    width: 100%;
  }

  .review-card {
    background-color: white;
    border-radius: 15px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;

    /* El Box Shadow sutil que pediste */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0; /* Un borde casi invisible para definirla mejor */
  }

  /* Cabecera: Logo y Estrellas */
  .revie-card-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .revie-card-cabecera img {
    height: 20px; /* Tamaño pequeño para el logo de Google */
    width: auto;
  }

  .revie-card-cabecera span {
    font-size: 0.9rem;
    letter-spacing: 2px;
  }

  /* El cuerpo del texto (la cita) */
  .review-card > span {
    color: #444;
    font-style: italic;
    line-height: 1.5;
    font-size: 0.95rem;
  }

  /* Footer: Foto y Nombre */
  .revie-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto; /* Empuja el footer siempre al fondo */
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
  }

  .revie-card-footer img {
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Foto circular */
    object-fit: cover;
  }

  .revie-card-footer span {
    font-weight: 700;
    font-size: 0.9rem;
    color: #222;
  }

  @media (max-width: 768px) {
    .reviews-cards {
      display: flex; /* Cambiamos a flex para alinearlas en fila */
      overflow-x: auto; /* Habilitamos el scroll horizontal */
      scroll-snap-type: x mandatory; /* Hace que las tarjetas se "ajusten" al centro al soltar */
      gap: 16px; /* Espacio entre tarjetas */
      padding: 20px; /* Evita que las tarjetas toquen los bordes */
      scrollbar-width: none; /* Oculta scrollbar en Firefox */
    }

    .reviews-cards::-webkit-scrollbar {
      display: none; /* Oculta scrollbar en Chrome/Safari */
    }

    .review-card {
      flex: 0 0 85%; /* Cada tarjeta ocupa el 85% del ancho para dejar ver un poco de la siguiente */
      scroll-snap-align: center; /* Alineación del ajuste de scroll */
    }
  }
}

/* --- Blog -------------------------------------------------------------- */
@layer blog {
  /* Tokens del blog. Los que ya existen en el tema se referencian en vez de
     duplicarse; los que no, se declaran aquí. */
  :root {
    --ecot-blog-verde-oscuro: #132c62;
    --ecot-blog-fondo: var(--ecot-fondo-claro);
    --ecot-blog-fondo-2: #ffffff;
    --ecot-blog-borde: #e2e2e2;
    --ecot-blog-texto: var(--ecot-texto);
    --ecot-blog-texto-suave: #6b6b6b;
    --ecot-blog-sombra: 0 4px 15px rgba(0, 0, 0, 0.08);
    --ecot-blog-sombra-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
    --ecot-blog-radio: 12px;
  }

  /* --- Base: utilidades que el tema no trae ------------------------------- */
  /* .screen-reader-text la usan las plantillas del blog (el breadcrumb oculta
     el título largo del artículo y el enlace "Inicio" cuando va acompañado).
     El tema no la define, así que sin esto ese texto se leería en voz alta dos
     veces. Las dos reglas que la usan en el tema (.producto-agregar-carrito y
     .quantity) son más específicas y la siguen ocultando. */
  @layer blog-base {
    .screen-reader-text {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  }

  /* --- Breadcrumb ------------------------------------------------------- */
  @layer blog-breadcrumb {
    .blog-breadcrumb {
      margin: 0.5rem 0 1rem;
      font-size: 0.875rem;
      line-height: 1.5;
      color: var(--ecot-blog-verde-oscuro);
    }

    .blog-breadcrumb--light {
      color: #fff;
    }

    .blog-breadcrumb__list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .blog-breadcrumb__item {
      display: inline-flex;
      align-items: center;
    }

    .blog-breadcrumb__item a:not(.blog-breadcrumb__home) {
      color: inherit;
      text-decoration: none;
      text-underline-offset: 0.2em;
      transition: text-decoration-color 0.15s ease;
    }

    .blog-breadcrumb__item a:not(.blog-breadcrumb__home):hover,
    .blog-breadcrumb__item a:not(.blog-breadcrumb__home):focus-visible {
      text-decoration: underline;
    }

    .blog-breadcrumb__sep {
      margin: 0 0.5rem;
      opacity: 0.55;
    }

    .blog-breadcrumb__home {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      line-height: 1;
      color: inherit;
      text-decoration: none !important;
    }

    .blog-breadcrumb__home-icon {
      display: block;
      width: 1.25em;
      height: 1.25em;
      transition: stroke-width 0.15s ease;
    }

    .blog-breadcrumb__home:hover .blog-breadcrumb__home-icon,
    .blog-breadcrumb__home:focus-visible .blog-breadcrumb__home-icon {
      stroke-width: 3px;
    }
  }

  /* --- Hero del home y del archivo de categoría -------------------------- */
  @layer blog-hero {
    /* El hero es a sangre: el verde y el pattern ocupan todo el ancho, y el
       contenido se mantiene dentro del .wrapper que ya lleva el contenedor. */
    .blog-hero {
      background-color: var(--ecot-verde-o);
      padding: clamp(2rem, 5vw, 3.5rem) 0;
      position: relative;
      overflow: hidden;
    }

    /* Fondo nítido tipo "hero-1" (sin blur), como el cat-hero. */
    .blog-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)),
        url("low-poly-grid-haikei.svg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      z-index: 1;
      pointer-events: none;
    }

    .blog-hero > * {
      position: relative;
      z-index: 2;
    }
    .blog-hero-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
      align-items: center;
      gap: 2rem;
      overflow: hidden;
      color: #fff;
    }

    .blog-hero-info {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 2.5rem 3rem;
    }

    /* Mismo lenguaje que .titulo-banerx del home: mayúsculas, peso 800 y
       equilibrado. El tamaño se recorta porque aquí el titular comparte la
       fila con una imagen; a la escala del home se desborda en tablet. */
    .blog-hero-titulo {
      font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
      line-height: 1.15;
      margin: 0;
      color: #fff;
      font-weight: 800;
      text-transform: uppercase;
      text-wrap: balance;
    }

    /* El hero del home sí lleva .titulo-banerx en el marcado y toma su
       escala grande de esa clase; aquí se vuelve al tamaño original del hero
       del blog para que un título más largo no se desborde. */
    .blog-hero .titulo-banerx {
      font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
    }

    /* La primera frase va en contorno, igual que en el hero del home. El
       grosor acompaña al tamaño para que no se vea fino ni espeso. */
    .blog-hero-titulo span,
    .blog-hero .titulo-banerx span {
      color: transparent;
      -webkit-text-stroke: clamp(1px, 0.35vw, 2px) #fff;
    }

    .blog-hero-info > span {
      color: rgba(255, 255, 255, 0.9);
    }

    .blog-hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 0.5rem;
    }

    /* Mismo lenguaje visual que .cta-banner-1 del tema: botón naranja con
       relieve inferior, para que el CTA del blog se lea como el del resto del
       sitio y no como un enlace suelto. */
    .blog-hero-cta-enlace {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: fit-content;
      padding: 12px 28px;
      background-color: var(--ecot-naranjo);
      color: #fff;
      border-radius: 8px;
      border-bottom: 4px solid var(--ecot-naranjo-o);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      font-weight: 700;
      font-size: 1rem;
      text-decoration: none;
      transition: var(--hover-color);
    }

    .blog-hero-cta-enlace:hover,
    .blog-hero-cta-enlace:focus-visible {
      background-color: var(--ecot-naranjo-o);
      border-bottom-color: var(--ecot-naranjo-o);
      color: #fff;
      transform: translateY(-2px);
    }

    .blog-hero-container figure {
      margin: 0;
      width: 100%;
      height: 100%;
      min-height: 20rem;
      position: relative;
    }

    .blog-hero-container img {
      width: 100%;
      height: 100%;
      position: absolute;
      object-fit: cover;
      object-position: center;
      border-radius: 60px 0 0 0;
    }

    /* Descripción de la categoría (category.php). */
    .blog-hero-descripcion {
      color: rgba(255, 255, 255, 0.9);
    }

    .blog-hero-descripcion p {
      margin: 0;
    }

    @media (max-width: 768px) {
      /* Fondo nítido tipo "hero-1" (sin blur), como el cat-hero. */
      .blog-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)),
          url("low-poly-grid-haikei.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: 1;
        pointer-events: none;
      }

      .blog-hero > * {
        position: relative;
        z-index: 2;
      }
      .blog-hero-container {
        gap: 0;
      }

      .blog-hero-info {
        padding: 1.5rem;
      }

      .blog-hero-cta {
        flex-direction: column;
        align-items: stretch;
      }

      .blog-hero-cta-enlace {
        width: 100%;
      }

      .blog-hero-container figure {
        min-height: 14rem;
      }
    }
  }

  /* --- Bloque "lo más reciente" y cards --------------------------------- */
  @layer blog-cards {
    .blog-destacados {
      background-color: var(--ecot-blog-fondo);
      padding: 3rem 0;
    }

    .blog-destacados-container {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .blog-destacados-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 2rem;
    }

    /* Sin entrada con el tag `destacada-home-blog`, la columna grande no se
       imprime y las horizontales ocupan el ancho completo. */
    .blog-destacados-grid--sin-destacada {
      grid-template-columns: 1fr;
    }

    .blog-cards {
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      gap: 1rem;
    }

    /* Base común de las tres cards. El position:relative es lo que permite
       expandir el clic del <h3> a toda la superficie (ver §6.4 del manual).
       Nada dentro de la card puede llevar position propio ni z-index > 1. */
    .blog-card-destacada,
    .blog-card-horizontal,
    .blog-card-grid {
      position: relative;
      background-color: var(--ecot-blog-fondo-2);
      border-radius: var(--ecot-blog-radio);
      overflow: hidden;
      box-shadow: var(--ecot-blog-sombra);
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
      display: flex;
      height: 100%;
    }

    .blog-card-destacada:hover,
    .blog-card-horizontal:hover,
    .blog-card-grid:hover {
      transform: translateY(-5px);
      box-shadow: var(--ecot-blog-sombra-hover);
    }

    /* El enlace expandido: cubre la card entera sin encerrar la imagen en un
       <a> (HTML inválido) y sin JavaScript. */
    .blog-card-destacada h3 a::after,
    .blog-card-horizontal h3 a::after,
    .blog-card-grid h3 a::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .blog-card-destacada h3 a,
    .blog-card-horizontal h3 a,
    .blog-card-grid h3 a {
      color: var(--ecot-blog-texto);
      text-decoration: none;
      font-size: 1.125rem;
      line-height: 1.3;
    }

    .blog-card-destacada h3 a:hover,
    .blog-card-horizontal h3 a:hover,
    .blog-card-grid h3 a:hover {
      color: var(--ecot-verde-o);
    }

    .blog-card-destacada {
      flex-direction: column;
    }

    /* La card grande se estira a la altura que imponen las 3 horizontales
       apiladas (grid-template-rows: repeat(3, 1fr) de arriba). Con la foto como
       fondo no hace falta el bloque .blog-card-destacada-imagen de antes: el
       sobrante se llena de foto en vez de dejar un bloque blanco de ~570px bajo
       el título. El texto abajo y el velo los pone el bloque --con-fondo de más
       arriba. */

    .blog-card-destacada-info,
    .blog-card-horizontal-info,
    .blog-card-grid-info {
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      flex-grow: 1;
    }

    .blog-card-destacada-info {
      flex: 0 0 auto;
    }

    /* Sobre foto el pie va un poco más abajo: el gradiente es más fuerte abajo,
       así que separar el texto del borde da más aire sin oscurecer más la foto.
       Va DESPUÉS del bloque combinado de arriba a propósito: mismo nivel de
       especificidad, así que gana por posición. */
    .blog-card-grid--con-fondo .blog-card-grid-info,
    .blog-card-destacada--con-fondo .blog-card-destacada-info {
      padding: 1.75rem 1.5rem 1.5rem;
    }

    .blog-card-horizontal {
      flex-direction: row;
    }

    .blog-card-horizontal-imagen {
      flex: 0 0 40%;
      display: flex;
    }

    .blog-card-horizontal-imagen img {
      width: 100%;
      height: 100%;
      min-height: 8rem;
      object-fit: cover;
      display: block;
    }

    .blog-card-grid {
      flex-direction: column;
      /* La foto ya no ocupa bloque propio, así que la card necesita una altura
         mínima para que el texto no quede apretado contra el borde. */
      min-height: 25rem;
    }

    /* Sin imagen la card no necesita el min-height: el texto manda. */
    .blog-card-grid:not(.blog-card-grid--con-fondo) {
      min-height: 0;
    }

    /* Capa de la imagen de fondo. Comparte una sola clase en la card grid y en
       la destacada: el <img> se estira a toda la card y el velo oscuro lo monta
       el ::after, para que el texto de abajo tenga contraste con cualquier foto.
       Va en z-index 0 y el contenido en 1 (nunca > 1, ver §6.4 del manual). */
    .blog-card-grid--con-fondo,
    .blog-card-destacada--con-fondo {
      position: relative;
    }

    /* Cards de la rejilla del blog: doble capa — haikei abajo y la foto al
       60 % encima, igual que las cards de servicios. El velo del
       .blog-card-fondo::after se mantiene: ahí apoya el texto. */
    .blog-card-grid--con-fondo {
      background-color: #10263c;
      background-image: url("low-poly-grid-haikei.svg");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .blog-card-grid--con-fondo .blog-card-fondo-imagen {
      opacity: 0.6;
    }

    .blog-card-fondo {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .blog-card-fondo::after {
      content: "";
      position: absolute;
      inset: 0;
      /* De abajo (dónde vive el texto) hacia arriba. El degradado se empina
         fuerte abajo a propósito: el texto apoya en el tercio inferior de la
         card y con un velo uniforme la foto quedaría demasiado apagada. Arriba se
         deja la foto más limpia, que es donde se ve la foto "por detrás". */
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0.1) 100%
      );
    }

    .blog-card-fondo-imagen {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* Sobre foto el texto va en blanco. La fecha se apaga un poco para que no
       compita con el título.

       OJO: aquí NO va position:relative (§6.4 del manual). El <a>::after que
       expande el clic a toda la card usa inset:0, y su ancestro posicionado
       tiene que ser el <article>; si el -info se posiciona, el overlay se
       encoge al alto del texto y la mitad de la card deja de ser pulsable.
       Con z-index basta: el -info es flex item del article, y un flex item
       honra z-index sin necesidad de position. */
    .blog-card-grid--con-fondo .blog-card-grid-info,
    .blog-card-destacada--con-fondo .blog-card-destacada-info {
      z-index: 1;
      color: #fff;
    }

    /* Ambas cards apoyan el texto abajo, contra la parte más oscura del velo.
       Sin esto la fecha y la etiqueta de la grid quedaban sobre la zona clara
       del degradado y el contraste se caía a 1.8:1, ilegible. */
    .blog-card-grid--con-fondo,
    .blog-card-destacada--con-fondo {
      justify-content: flex-end;
    }

    .blog-card-grid--con-fondo .blog-card-grid-info,
    .blog-card-destacada--con-fondo .blog-card-destacada-info {
      /* flex-grow:1 las estiraría de nuevo a toda la card y el texto volvería
         arriba. Con esto quedan a su altura natural, apoyadas abajo. */
      flex: 0 0 auto;
      width: 100%;
    }

    .blog-card-grid--con-fondo .blog-card-fecha,
    .blog-card-destacada--con-fondo .blog-card-fecha {
      color: rgba(255, 255, 255, 0.85);
    }

    .blog-card-grid--con-fondo h3 a,
    .blog-card-destacada--con-fondo h3 a {
      color: #fff;
      /* Sombra suave: separa el título de una foto con mucho detalle detrás. */
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    }

    .blog-card-grid--con-fondo h3 a:hover,
    .blog-card-destacada--con-fondo h3 a:hover {
      color: #fff;
      text-decoration: underline;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    }

    /* La etiqueta de categoría conserva su fondo claro, así que sobre foto se
       lee mejor con el texto oscuro y el borde transparente. */
    .blog-card-grid--con-fondo .blog-card-tags span,
    .blog-card-destacada--con-fondo .blog-card-tags span {
      background-color: rgba(255, 255, 255, 0.92);
      border-color: transparent;
    }

    /* En hover el velo se profundiza un poco: refuerza que la card es pulsable
       sin tener que animarle el color al texto. */
    .blog-card-grid--con-fondo:hover .blog-card-fondo::after,
    .blog-card-destacada--con-fondo:hover .blog-card-fondo::after {
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.78) 35%,
        rgba(0, 0, 0, 0.52) 65%,
        rgba(0, 0, 0, 0.3) 100%
      );
    }

    .blog-card-fecha {
      font-size: 0.8125rem;
      color: var(--ecot-blog-texto-suave);
    }

    .blog-card-tags span {
      align-self: flex-start;
      background-color: var(--ecot-blog-fondo);
      border: 1px solid var(--ecot-blog-borde);
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--ecot-verde-o);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

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

      .blog-cards {
        grid-template-rows: none;
      }
    }
  }

  /* --- Rejilla, títulos de sección y paginación ------------------------- */
  @layer blog-grid {
    .blog-grid-seccion {
      background-color: var(--ecot-blog-fondo);
      padding: 3rem 0;
    }

    .blog-grid-container {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .blog-titulo-seccion {
      font-size: clamp(1.5rem, 2.5vw, 2rem);
      color: var(--ecot-verde-o);
      margin: 0;
    }

    .blog-rejilla {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    @media (min-width: 600px) {
      .blog-rejilla {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .blog-rejilla {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .blog-vacio {
      color: var(--ecot-blog-texto-suave);
    }

    .blog-grid-container .navigation .nav-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      justify-content: center;
    }

    .blog-grid-container .navigation .page-numbers {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.5rem;
      height: 2.5rem;
      padding: 0 0.6rem;
      border: 1px solid var(--ecot-blog-borde);
      border-radius: 4px;
      background-color: var(--ecot-blog-fondo-2);
      color: var(--ecot-verde-o);
      font-weight: 600;
    }

    .blog-grid-container .navigation .page-numbers.current,
    .blog-grid-container .navigation .page-numbers:hover {
      background-color: var(--ecot-verde-o);
      border-color: var(--ecot-verde-o);
      color: #fff;
    }
  }

  /* --- Artículo --------------------------------------------------------- */
  @layer blog-articulo {
    /* Mismo fondo que el resto de heros del blog: el verde se queda como color
       base (si el SVG no llegara a cargar, el hero sigue siendo verde y no
       queda blanco) y el pattern va en el ::before, igual que en .blog-hero.
       Aquí no hace falta repetir el ::before dentro de un media query como
       hace la capa blog-hero: los valores no cambian con el ancho, se
       adaptan solos con background-size: cover. */
    .blog-articulo-hero {
      background-color: var(--ecot-verde-o);
      position: relative;
      overflow: hidden;
      padding: 2rem 0;
    }

    .blog-articulo-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)),
        url("low-poly-grid-haikei.svg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      z-index: 1;
      pointer-events: none;
    }

    /* El contenido del hero va por encima del ::before; el position:relative es
       para que el z-index lo suba sobre el fondo, igual que en .blog-hero. */
    .blog-articulo-hero > * {
      position: relative;
      z-index: 2;
    }

    .blog-articulo-hero-container {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 2rem;
      color: #fff;
      padding: 2rem 0;
    }

    .blog-articulo-hero-container h1 {
      color: #fff;
      font-size: clamp(1.6rem, 3.5vw, 2.5rem);
      line-height: 1.15;
    }

    .blog-articulo-hero-imagen {
      position: relative;
      aspect-ratio: 1 / 1;
    }

    .blog-articulo-hero-imagen img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--ecot-blog-radio);
    }

    .blog-articulo-hero-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.75rem;
    }

    .blog-articulo-hero-info time {
      font-size: 0.875rem;
      color: rgba(255, 255, 255, 0.8);
    }

    .blog-articulo-hero-info .blog-card-tags span {
      background-color: rgba(255, 255, 255, 0.15);
      border-color: transparent;
      color: #fff;
    }

    .blog-articulo-hero-descripcion {
      font-size: 1.125rem;
      color: rgba(255, 255, 255, 0.92);
    }

    .blog-articulo-hero-descripcion p {
      margin: 0;
    }

    .blog-articulo-seccion {
      background-color: var(--ecot-blog-fondo);
    }

    .blog-articulo-container {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 2rem;
      padding: 2.5rem 0;
      align-items: start;
    }

    /* min-width:0 evita que un hijo con contenido ancho (tabla, imagen)
       hinche la columna y genere scroll horizontal en móvil. */
    .blog-articulo-container > * {
      min-width: 0;
    }

    .blog-articulo {
      background-color: var(--ecot-blog-fondo-2);
      border-radius: var(--ecot-blog-radio);
      padding: 2rem;
      font-size: 1.0625rem;
      line-height: 1.7;
      color: var(--ecot-blog-texto);
      overflow-wrap: break-word;
    }

    .blog-articulo > div {
      margin: 1rem 0;
    }

    .blog-articulo h2,
    .blog-articulo h3,
    .blog-articulo h4 {
      color: var(--ecot-verde-o);
      margin: 2rem 0 0.75rem;
      /* El offset del header sticky lo resuelve el `scroll-padding-top` que el
         tema ya declara en `html` (150px: barra verde + barra blanca). Aquí solo
         se evita que el título quede pegado al borde superior. */
      scroll-margin-top: 1rem;
    }

    .blog-articulo h2 {
      font-size: clamp(1.35rem, 2vw, 1.75rem);
    }

    .blog-articulo h3 {
      font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    }

    .blog-articulo p,
    .blog-articulo li {
      line-height: 1.8;
    }

    .blog-articulo ul,
    .blog-articulo ol {
      padding-left: 1.25rem;
    }

    .blog-articulo img {
      max-width: 100%;
      height: auto;
      display: block;
      border-radius: 6px;
    }

    .blog-articulo a {
      color: var(--ecot-verde-o);
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }

    .blog-articulo a:hover {
      color: var(--ecot-blog-verde-oscuro);
    }

    .blog-articulo blockquote {
      margin: 1.5rem 0;
      padding: 0.5rem 0 0.5rem 1.25rem;
      border-left: 4px solid var(--ecot-verde-o);
      color: var(--ecot-blog-texto-suave);
    }

    /* Tablas: el tema no tiene CSS genérico de tablas, así que se estilan con
       selectores de elemento. El editor pega un <table> normal, sin clases. */
    .blog-articulo table {
      width: 100%;
      border-collapse: collapse;
      margin: 1.5rem 0;
      font-size: 0.9375rem;
    }

    .blog-articulo th,
    .blog-articulo td {
      border: 1px solid var(--ecot-blog-borde);
      padding: 0.7rem 0.8rem;
      text-align: left;
    }

    .blog-articulo thead th {
      background-color: var(--ecot-blog-fondo);
      color: var(--ecot-verde-o);
      font-weight: 700;
    }

    .blog-articulo tbody tr:nth-child(even) {
      background-color: rgba(30, 58, 138, 0.04);
    }

    .blog-articulo code {
      background-color: var(--ecot-blog-fondo);
      padding: 0.1em 0.35em;
      border-radius: 3px;
      font-size: 0.9em;
    }

    /* Los módulos que el tema ya tiene traen su propia tipografía interna (por
       ejemplo las cards de FAQ). Estas reglas evitan que la del artículo les
       pise el margen y el tamaño, ya que la capa del blog va última. */
    .blog-articulo .modulo-seo-faq-preguntas {
      margin: 1.5rem 0;
    }

    .blog-articulo .faq-card h3 {
      margin: 0 0 0.75rem;
      font-size: 1.2rem;
    }

    /* Barra lateral */
    .blog-sidebar-contenedor {
      position: relative;
      display: flex;
      align-items: flex-start;
      height: 100%;
    }

    .blog-sidebar {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      padding: 1.5rem;
      background-color: var(--ecot-blog-fondo-2);
      border-radius: var(--ecot-blog-radio);
      position: sticky;
      /* El header del tema es sticky y mide ~100px: sin este `top` el sidebar
         quedaría tapado por él al hacer scroll. */
      top: 7rem;
      /* Sin esto, un sidebar más alto que la pantalla se recortaba sin scroll
         (defecto 13 del manual). */
      max-height: calc(100vh - 9rem);
      overflow-y: auto;
      font-size: 1rem;
    }

    .blog-sidebar h3 {
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--ecot-verde-o);
      margin: 0 0 0.75rem;
    }

    .blog-toc ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .blog-toc a {
      color: var(--ecot-verde-o);
      text-decoration: none;
      font-size: 0.9375rem;
    }

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

    .blog-autor-info {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .blog-autor-nombre {
      font-weight: 700;
      color: var(--ecot-verde-o);
    }

    .blog-autor-info em {
      font-size: 0.875rem;
      color: var(--ecot-blog-texto-suave);
    }

    @media (max-width: 768px) {
      .blog-articulo-hero-container {
        grid-template-columns: 1fr;
      }

      .blog-articulo-container {
        grid-template-columns: 1fr;
        padding: 1.5rem 0;
      }

      .blog-articulo {
        padding: 1.25rem;
      }

      .blog-sidebar-contenedor {
        order: -1;
      }

      .blog-sidebar {
        position: static;
        max-height: none;
        padding: 1.25rem;
      }

      /* Tablas anchas: scrollean dentro de su celda en vez de romper la página. */
      .blog-articulo table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
      }
    }
  }

  /* --- Cajas de contenido del artículo ------------------------------------
     Tres módulos para el editor, con estilo propio del blog. Se usan desde el
     contenido del artículo (editor clásico, HTML a mano).

     El patrón visual es el del sistema de origen: filete izquierdo grueso y
     redondeo solo en la esquina inferior derecha, para que los tres se lean
     como una misma familia y se distingan entre sí por el color.
     ------------------------------------------------------------------------ */
  @layer blog-cajas {
    /* Tokens propios: el tema no tiene verde medio ni ámbar de marca. */
    :root {
      --ecot-blog-caja-verde: #1f7a4d;
      --ecot-blog-caja-verde-fondo: #eef8f2;
      --ecot-blog-caja-verde-borde: #b9e0cb;
      --ecot-blog-caja-verde-claro-fondo: #eef4ec;
      --ecot-blog-caja-ambar: #9a6207;
      --ecot-blog-caja-ambar-fondo: #fdf6e6;
      --ecot-blog-caja-ambar-borde: #f0dcae;
    }

    /* Base común */
    .blog-caja {
      margin: 2rem 0;
      padding: 1.25rem 1.5rem;
      border-left: 5px solid transparent;
      border-radius: 0 10px 10px 0;
      font-size: 1rem;
      line-height: 1.7;
    }

    .blog-caja > :first-child {
      margin-top: 0;
    }

    .blog-caja > :last-child {
      margin-bottom: 0;
    }

    .blog-caja p {
      margin: 0 0 0.75rem;
      line-height: 1.7;
    }

    .blog-caja ul,
    .blog-caja ol {
      margin: 0;
      padding-left: 1.25rem;
    }

    .blog-caja li {
      margin-bottom: 0.5rem;
    }

    .blog-caja li:last-child {
      margin-bottom: 0;
    }

    .blog-caja strong {
      color: inherit;
    }

    /* Título del cuadro. Va en un <p class="blog-caja-titulo"> con un <span> de
       texto, NO en un <h2>: un encabezado por cuadro rompería la jerarquía del
       artículo y su índice. */
    .blog-caja-titulo {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      font-weight: 800;
      line-height: 1.4;
      margin-bottom: 0.75rem;
      font-size: 1.0625rem;
    }

    .blog-caja-titulo svg {
      flex: 0 0 auto;
      width: 1.15em;
      height: 1.15em;
      margin-top: 0.15em;
    }

    /* --- Resumen / respuesta directa --------------------------------------
       Va al principio del artículo. Es el bloque que las IAs extraen: por eso
       la pregunta y la respuesta están en texto plano, sin depender de estilos
       ni de imágenes. */
    .blog-caja-resumen {
      background-color: var(--ecot-blog-caja-verde-claro-fondo);
      border-left-color: var(--ecot-verde-o);
      color: var(--ecot-blog-texto);
      box-shadow: inset 0 0 0 1px var(--ecot-blog-caja-verde-borde);
    }

    .blog-caja-resumen .blog-caja-titulo {
      color: var(--ecot-verde-o);
    }

    /* En el resumen, la primera palabra de cada ítem va en negrita para que se
       pueda escanear la respuesta sin leerla entera. */
    .blog-caja-resumen li strong {
      color: var(--ecot-verde-o);
    }

    /* --- Consejo ----------------------------------------------------------- */
    .blog-caja-consejo {
      background-color: var(--ecot-blog-caja-verde-fondo);
      border-left-color: var(--ecot-blog-caja-verde);
      color: var(--ecot-blog-verde-oscuro);
    }

    .blog-caja-consejo .blog-caja-titulo {
      color: var(--ecot-blog-caja-verde);
    }

    .blog-caja-consejo a {
      color: var(--ecot-blog-caja-verde);
    }

    /* --- Advertencia ------------------------------------------------------- */
    .blog-caja-advertencia {
      background-color: var(--ecot-blog-caja-ambar-fondo);
      border-left-color: var(--ecot-blog-caja-ambar);
      color: #6b4405;
    }

    .blog-caja-advertencia .blog-caja-titulo {
      color: var(--ecot-blog-caja-ambar);
    }

    .blog-caja-advertencia a {
      color: var(--ecot-blog-caja-ambar);
    }

    @media (max-width: 768px) {
      .blog-caja {
        padding: 1rem 1.1rem;
        margin: 1.5rem 0;
      }

      .blog-caja-titulo {
        font-size: 1rem;
      }
    }
  }

  /* --- Comentarios ------------------------------------------------------- */
  @layer blog-comentarios {
    .blog-comentarios-seccion {
      background-color: var(--ecot-blog-fondo);
      padding: 0 0 3rem;
    }

    .blog-comentarios {
      background-color: var(--ecot-blog-fondo-2);
      border-radius: var(--ecot-blog-radio);
      padding: 1.5rem;
    }

    .blog-comentarios:empty {
      display: none;
    }

    .blog-comentarios-titulo {
      font-size: 1.5rem;
      color: var(--ecot-verde-o);
      margin: 0 0 1.5rem;
    }

    .comment-list,
    .comment-list .children {
      list-style: none;
      margin: 0 0 1.5rem;
      padding: 0;
    }

    .comment-list .children {
      margin-top: 1rem;
      padding-left: 1.5rem;
    }

    .comment-list .comment-body {
      border: 1px solid var(--ecot-blog-borde);
      border-radius: 8px;
      padding: 1.25rem;
      margin-bottom: 1rem;
    }

    .comment-list .comment-author {
      font-weight: 700;
      color: var(--ecot-verde-o);
    }

    .comment-list .comment-author .avatar {
      border-radius: 50%;
      margin-right: 0.5rem;
      vertical-align: middle;
    }

    .comment-list .comment-metadata {
      font-size: 0.8125rem;
      color: var(--ecot-blog-texto-suave);
    }

    .comment-list .comment-metadata a {
      text-decoration: none;
    }

    .comment-list .comment-content {
      margin-top: 0.6rem;
      line-height: 1.7;
    }

    .comment-list .reply a {
      font-weight: 700;
      text-decoration: none;
    }

    .comment-list .reply a:hover {
      text-decoration: underline;
    }

    .comment-respond {
      margin-top: 1.5rem;
    }

    .comment-respond h3,
    .comment-reply-title {
      font-size: 1.25rem;
      color: var(--ecot-verde-o);
    }

    .comment-form label {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 0.3rem;
    }

    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"],
    .comment-form textarea {
      width: 100%;
      padding: 0.7rem 0.9rem;
      border: 1px solid var(--ecot-blog-borde);
      border-radius: 6px;
      background-color: #fff;
      font-size: 1rem;
      margin-bottom: 1rem;
    }

    .comment-form textarea {
      min-height: 120px;
    }

    .comment-form .submit {
      background-color: var(--ecot-verde-o);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 0.7rem 1.4rem;
      font-weight: 700;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .comment-form .submit:hover {
      background-color: var(--ecot-blog-verde-oscuro);
    }

    .comment-notes,
    .logged-in-as,
    .blog-comentarios-cerrados {
      font-size: 0.875rem;
      color: var(--ecot-blog-texto-suave);
    }

    .must-log-in {
      font-size: 0.9375rem;
      padding: 1rem;
      background-color: var(--ecot-blog-fondo);
      border: 1px solid var(--ecot-blog-borde);
      border-radius: 6px;
      margin-bottom: 1rem;
    }

    .must-log-in a {
      font-weight: 700;
      color: var(--ecot-verde-o);
      text-decoration: underline;
    }
  }
}

/* ==========================================================================
   AJUSTES SIN CAPA — van después del kit (style.css, unlayered) y ganan por
   orden de aparición con igual especificidad. También cubren el cascade:
   .wrapper/.section-1 viven en capas y el kit no los define.
   ========================================================================== */

/* Header fijo del kit: el contenido no debe quedar debajo */
body {
  /*padding-top: var(--header-height);*/
}

html {
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

/* Contraste: en fondo claro el acento es azul, no amarillo */
.texto-negro a {
  color: var(--ecot-verde-o);
}

/* Borde del hero del kit: azul sobre azul no se ve; acento amarillo */
.hero__description {
  border-color: var(--action-color);
}

/* Sección texto-destacado del kit era azul puro */
.texto-destacado-fondo {
  background-color: var(--primary-color);
}

/* Contacto: h2/enlaces/botón sobre fondo claro — texto azul, hover azul+blanco */
.contacto-container h2 {
  color: var(--ecot-verde-o);
}

.contacto-container a {
  color: var(--ecot-verde-o);
}

.contacto-boton-enviar {
  color: var(--ecot-verde-o);
}

.contacto-boton-enviar:hover {
  background-color: var(--ecot-verde-o);
  border-color: var(--ecot-verde-o);
  color: #fff;
}

/* Misión (nosotros): CTA amarillo con texto azul; hover azul con texto blanco */
.mision-info a:hover {
  color: #fff;
}

/* CTA del hero del blog: amarillo con texto azul */
.blog-hero-cta-enlace,
.blog-hero-cta-enlace:hover,
.blog-hero-cta-enlace:focus-visible {
  color: var(--ecot-verde-o);
}

/* Footer-bottom: barra blanca con texto y enlaces azules */
.footer-bottom {
  color: var(--ecot-verde-o);
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
}

.footer-bottom a {
  color: var(--ecot-verde-o);
}

/* Logos */
.site-header__logo img {
  height: 44px;
  width: auto;
  display: block;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 1.25rem;
}

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

/* ==========================================================================
   HEADER MÓVIL — hamburguesa + panel #menu-movil (js/am-menu.js)
   ========================================================================== */
.header-hamburguesa {
  display: none;
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  fill: var(--text-white);
}

@media (max-width: 768px) {
  .header-hamburguesa {
    display: inline-flex;
  }
}

.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(17, 32, 74, 0.97);
  display: none;
  flex-direction: column;
  padding: 1.25rem;
  overflow-y: auto;
}

.menu-movil.is-open {
  display: flex;
}

.menu-movil__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.menu-movil__top img {
  height: 40px;
  width: auto;
}

.menu-movil__cerrar {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 0.4rem;
}

.menu-movil__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.menu-movil__lista li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.menu-movil__link {
  display: block;
  padding: 0.9rem 0.25rem;
  color: #fff;
  text-decoration: none;
  font-size: 1.125rem;
  opacity: 1;
}

.menu-movil__link:hover {
  color: var(--action-color);
}

.menu-movil .btn-cta {
  margin-top: 1.5rem;
  align-self: flex-start;
}

/* ==========================================================================
   HOME — secciones propias (por qué / servicios / equipo / contacto extras)
   ========================================================================== */
.hero {
  background-color: var(--primary-color);
}

.porque {
  padding: 4rem 0;
  background-color: #fff;
}

/* Fondo cálido reutilizable que reemplaza al blanco: base crema derivada del
   ámbar del CTA (#efb810) con dos brillos radiales tenues (ámbar puro y ámbar
   profundo) que dan calidez sin restar legibilidad al texto oscuro. Uso:
   añadir la clase "fondo-sutil" a cualquier <section> que quiera salir del
   blanco. Va después de las reglas de fondo de cada sección para poder
   sobrescribirlas. */
.fondo-sutil {
  background-color: #fdf8ef;
  background-image:
    radial-gradient(
      48rem 28rem at 0% 0%,
      rgba(239, 184, 16, 0.16),
      transparent 60%
    ),
    radial-gradient(
      42rem 26rem at 100% 100%,
      rgba(217, 166, 7, 0.13),
      transparent 55%
    );
  background-repeat: no-repeat;
}

.porque-intro {
  max-width: 70ch;
}

.porque-intro .btn-efecto {
  margin-top: 1.5rem;
}

.porque-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.card-hero {
  background: var(--ecot-fondo-claro);
  border-radius: var(--border-radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card-hero__num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--action-color);
  line-height: 1;
}

.card-hero h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--primary-color);
}

.card-hero p {
  margin: 0;
}

/* Sobre fondo cálido (.fondo-sutil) las cards pasan a blanco puro con sombra
   suave para que destaquen en vez de fundirse con el crema */
.fondo-sutil .card-hero {
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(120, 90, 20, 0.06);
}

/* Banner horizontal decorativo dentro de secciones (ej. porque) */
.porque-banner {
  margin-top: 2.5rem;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.porque-banner img {
  display: block;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .porque-banner img {
    height: 150px;
  }
}

.servicios-home {
  padding: 4rem 0;
  background-color: #e8eefb;
}

/* Bento de servicios: la 1ª card es pieza grande (2x2), la 4ª cierra ancha.
   Se adapta al número de servicios publicados (3, 5 o 6 → variantes con :has) */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(170px, auto);
  gap: 1.25rem;
  margin-top: 2rem;
}

.servicios-grid > .servicio-card:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.servicios-grid > .servicio-card:nth-child(1) h3 {
  font-size: 1.55rem;
}

.servicios-grid > .servicio-card:nth-child(4) {
  grid-column: span 2;
}

/* 3 servicios → 3 columnas, la pieza grande sigue 2x2 */
.servicios-grid:has(> .servicio-card:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

/* 5 servicios → el 5º cierra como franja completa */
.servicios-grid:has(> .servicio-card:nth-child(5):last-child)
  > .servicio-card:nth-child(5) {
  grid-column: 1 / -1;
}

/* 6 servicios → 5º y 6º cierran la última fila en dos bloques anchos */
.servicios-grid:has(> .servicio-card:nth-child(6):last-child)
  > .servicio-card:nth-child(5),
.servicios-grid:has(> .servicio-card:nth-child(6):last-child)
  > .servicio-card:nth-child(6) {
  grid-column: span 2;
}

.servicio-card {
  position: relative;
  z-index: 0; /* stacking context: el ::after de la foto puede ir en z -1 */
  overflow: hidden;
  background: #fff;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Card con foto: doble capa — haikei abajo y foto encima al 60 % (misma
   solución que .mision-imagen). La foto va en ::after porque un background
   no permite opacidad por capa. La URL llega en la variable --servicio-foto. */
.servicio-card--con-fondo {
  background-color: #10263c;
  background-image: url("low-poly-grid-haikei.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}

.servicio-card--con-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1; /* sobre el haikei, debajo del texto */
  background-image: var(--servicio-foto);
  background-size: cover;
  background-position: center;
  opacity: 0.6;
}

/* Enlace de la card: solo el título es <a> (mejor para SEO y accesibilidad);
   su ::before se estira a toda la card para conservar el click completo. */
.servicio-card__enlace {
  color: inherit;
  text-decoration: none;
}

.servicio-card__enlace::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.servicio-card__enlace:focus-visible::before {
  outline: 2px solid var(--action-color);
  outline-offset: -2px;
  border-radius: var(--border-radius);
}

.servicio-card.servicio-card--con-fondo h3 {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.servicio-card--con-fondo .servicio-card__flecha {
  color: var(--action-color);
}

/* La flecha siempre al pie de la card, así las alturas bento no la dejan flotando */
.servicio-card__flecha {
  margin-top: auto;
  align-self: flex-end;
}

@media (max-width: 1024px) {
  .servicios-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .servicios-grid > .servicio-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 220px;
  }
}

@media (max-width: 640px) {
  .servicios-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(140px, auto);
  }

  .servicios-grid > .servicio-card:nth-child(n) {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 160px;
  }
}

.servicio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.servicio-card h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--primary-color);
}

.servicio-card__flecha {
  color: var(--action-color);
  font-size: 1.5rem;
  margin-top: auto;
  line-height: 1;
}

.seccion-cta {
  padding: 4rem 0;
}

.seccion-cta .texto-destacado-text {
  max-width: 70ch;
}

.seccion-cta .btn-efecto {
  margin-top: 1.5rem;
}

.reviews .btn-efecto {
  margin-top: 1.5rem;
}

/* Avatar de tarjeta de review (iniciales cuando no hay foto) */
.revie-card-footer__avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex: 0 0 auto;
}

/* ==========================================================================
   NOSOTROS — equipo
   ========================================================================== */
.equipo {
  padding: 4rem 0;
  background-color: var(--ecot-fondo-claro);
}

.equipo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.card-equipo {
  background: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  max-width: 360px;
}

.card-equipo img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: top;
  display: block;
}

.card-equipo__info {
  padding: 1.25rem;
}

.card-equipo__info h3 {
  margin: 0 0 0.25rem;
  color: var(--primary-color);
  font-size: 1.15rem;
}

.card-equipo__info p {
  margin: 0;
}

/* ==========================================================================
   CONTACTO — ajustes del formulario FluentForm y mapa
   ========================================================================== */
.contacto-form .ff-el-group {
  margin-bottom: 1rem;
}

.contacto-form .ff-t-container {
  display: flex;
  gap: 1rem;
}

.contacto-form .ff-t-container .ff-el-group {
  flex: 1;
  margin-bottom: 0;
}

.contacto-form .ff-el-input--label label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.3rem;
}

.contacto-form .ff-el-form-control {
  width: 100%;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 0.6rem 0.7rem;
}

.contacto-form textarea.ff-el-form-control {
  min-height: 120px;
}

.contacto-form button.ff-btn-submit {
  border: solid 2px var(--ecot-naranjo);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--ecot-verde-o);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.9rem 2rem;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--ecot-naranjo);
  transition: var(--hover-color);
}

.contacto-form button.ff-btn-submit:hover {
  background-color: var(--ecot-verde-o);
  border-color: var(--ecot-verde-o);
  color: #fff;
}

@media (max-width: 768px) {
  .contacto-form .ff-t-container {
    flex-direction: column;
    gap: 0;
  }
}

.contacto-mapa {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.contacto-mapa iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

/* Módulo mapa de zona (template-parts/mapa-zona.php): mapa amplio de la
   comuna + columna de texto con la zona de atención. */
.mapa-zona {
  padding: 3.5rem 0;
}

.mapa-zona-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.mapa-zona-mapa {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.mapa-zona-mapa iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
}

.mapa-zona-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.mapa-zona-info h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.mapa-zona-info p {
  margin: 0;
  line-height: 1.6;
}

.mapa-zona-provincias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mapa-zona-provincias li {
  background-color: #e8eefb;
  color: var(--primary-color);
  border-radius: 100px;
  padding: 0.35rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .mapa-zona-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .mapa-zona-mapa iframe {
    height: 360px;
  }
}

@media (max-width: 640px) {
  .mapa-zona-mapa iframe {
    height: 300px;
  }
}

.contacto-datos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ==========================================================================
   FOOTER — extras de columnas
   ========================================================================== */
.footer-links-title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
  color: #fff;
}

.am-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.am-footer-menu li {
  margin-bottom: 0.6rem;
}

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

.footer-contacto-list li {
  margin-bottom: 0.6rem;
}

/* Footer móvil: más aire entre bloques y objetivos táctiles cómodos */
@media (max-width: 768px) {
  footer {
    padding: 56px 0 40px;
  }

  .footer-container {
    gap: 2.5rem;
  }

  .footer-main {
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }

  .footer-links-container {
    flex-direction: column;
    gap: 2.25rem;
    padding: 0;
    text-align: center;
  }

  .footer-links-column {
    text-align: center;
  }

  .footer-links-title {
    margin-bottom: 0.9rem;
    text-align: left;
    font-weight: 800;
    font-size: 20px;
  }

  .am-footer-menu li,
  .footer-contacto-list li {
    margin-bottom: 0.9rem;
    text-align: left;
  }

  .footer-links a {
    font-size: 1.05rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

/* ==========================================================================
   WHATSAPP FLOTANTE — píldora con icono + CTA
   ========================================================================== */
.btn-whatsapp-float {
  position: fixed;
  right: 0;
  bottom: 1.25rem;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1.1rem 0.6rem 0.75rem;
  border-radius: 999px 0 0 999px;
  background: #25d366;
  color: #04354f;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.25s ease,
    visibility 0.25s ease;
}

.btn-whatsapp-float:hover,
.btn-whatsapp-float:focus-visible {
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

.btn-whatsapp-float__icono {
  display: inline-flex;
  flex: 0 0 auto;
}

.btn-whatsapp-float svg {
  width: 60px;
  height: 60px;
  fill: #fff;
}

.btn-whatsapp-float__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.btn-whatsapp-float__texto strong {
  font-size: 2rem;
  font-weight: 700;
}

.btn-whatsapp-float__texto small {
  font-size: 1.5rem;
  font-weight: 500;
  opacity: 0.92;
}

/* Al llegar al footer (lo alterna am-whatsapp.js) el botón se retira para
   no tapar la información del pie. */
.btn-whatsapp-float.is-oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(1rem);
}

@media (max-width: 480px) {
  .btn-whatsapp-float {
    right: 0rem;
    bottom: 0.9rem;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem 0.55rem 0.65rem;
  }

  .btn-whatsapp-float svg {
    width: 26px;
    height: 26px;
  }

  .btn-whatsapp-float__texto strong {
    font-size: 1.2rem;
  }

  .btn-whatsapp-float__texto small {
    font-size: 1rem;
  }
}

/* ==========================================================================
   FIX .footer-text: el kit define "p { color: var(--text-main) }" SIN CAPA,
   que gana a "footer { color: white }" de @layer footer. Sin capa + después
   del kit, esta regla recupera el blanco sobre fondo negro.
   ========================================================================== */
footer .footer-text {
  color: #fff;
}

/* ==========================================================================
   Landing de servicio (single-servicio.php)
   ========================================================================== */
@layer servicio-landing {
  /* Imagen del hero: círculo de 400px, también en mobile. */
  .servicio-hero .cat-hero-img {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .servicio-hero .cat-hero-img img {
    width: 400px;
    height: 400px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
  }

  .servicio-hero__acciones {
    margin-top: 1.5rem;
  }

  /* Cajas del servicio: info a la izquierda, rejilla de cards a la derecha. */
  .servicio-cajas__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 3rem;
    align-items: start;
  }

  .servicio-cajas__info .section-title {
    margin-bottom: 1rem;
  }

  .servicio-cajas__info .porque-intro {
    max-width: none;
  }

  .servicio-cajas .porque-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }

  .servicio-otros__enlace {
    margin-top: 2rem;
  }

  .servicio-faq {
    background-color: var(--ecot-fondo-claro);
    padding: 4rem 0;
  }

  /* Dos columnas en desktop, una en mobile. */
  .servicio-faq__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
  }

  .servicio-faq__item {
    background: var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 12px rgba(16, 38, 60, 0.18);
    padding: 1.5rem;
  }

  .servicio-faq__pregunta {
    margin: 0 0 1rem;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 600;
    color: #fff;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #fff;
  }

  .servicio-faq__respuesta > :first-child {
    margin-top: 0;
  }

  .servicio-faq__respuesta > :last-child {
    margin-bottom: 0;
  }

  /* El CTA queda en 2 columnas: formulario + imagen destacada a la misma altura. */
  @media (min-width: 769px) {
    .servicio-cta .contacto-container {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
    }
  }

  /* Imagen junto al formulario: doble capa (haikei abajo + foto al 60 %),
     igual que .mision-imagen. */
  .servicio-cta__imagen {
    margin: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: #10263c;
    background-image: url("low-poly-grid-haikei.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .servicio-cta__imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
  }

  /* Secciones consecutivas del cierre: todas sobre el mismo fondo cálido
     para que no se lea un corte duro entre contacto, otros servicios y blog. */
  .servicio-cta,
  .servicio-otros,
  .servicio-blog {
    background-color: #fdf8ef;
  }

  @media (max-width: 900px) {
    .servicio-cajas__grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .servicio-cajas .porque-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 768px) {
    .servicio-hero .cat-hero-img img {
      width: 300px;
      height: 300px;
    }

    .servicio-cajas .porque-grid {
      grid-template-columns: 1fr;
    }

    .servicio-faq__lista {
      grid-template-columns: 1fr;
    }

    .servicio-faq__pregunta {
      font-size: 1.15rem;
    }

    .servicio-cta__imagen {
      display: none;
    }
  }

  /* ======================================================================
     SIN CAPA (a propósito): style.css define "p { color: var(--text-main) }"
     sin capa, así que cualquier color de p dentro de una @layer pierde.
     ====================================================================== */
  .servicio-hero__intro {
    display: block;
    color: #fff;
    max-width: 62ch;
    margin-top: 1rem;
  }

  /* La respuesta de las FAQ viene con <p>/<a> desde la BD y el kit pinta
     "p" y "p a" sin capa: estas reglas también van sin capa para ganar. */
  .servicio-faq__respuesta,
  .servicio-faq__respuesta p {
    color: rgba(255, 255, 255, 0.88);
  }

  .servicio-faq__respuesta a,
  .servicio-faq__respuesta p a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
  }

  .servicio-faq__respuesta a:hover,
  .servicio-faq__respuesta p a:hover {
    text-decoration: none;
  }

  .servicio-hero__intro strong,
  .servicio-hero__intro b {
    color: #fff;
  }

  .servicio-cta__whatsapp {
    align-self: flex-start;
  }
}

/* --- Servicio relacionado dentro de un post del blog (enlazado interno) --- */
.blog-servicio-relacionado {
  margin: 3rem 0 1rem;
  padding: 2rem;
  border: 1px solid rgba(16, 38, 60, 0.12);
  border-left: 4px solid var(--action-color, #efb810);
  border-radius: 10px;
  background: #f7f8fa;
}

.blog-servicio-relacionado__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b6675;
}

.blog-servicio-relacionado__titulo {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  color: #10263c;
}

.blog-servicio-relacionado__texto {
  margin: 0 0 1.25rem;
}

/* ==========================================================================
   HERO IMAGEN DESTACADA CIRCULAR (Oficina Litueche) - independiente del home
   ========================================================================== */
.hero__image-wrapper--litueche {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

.hero__img--litueche {
  position: relative;
  top: auto;
  left: auto;
  width: min(420px, 90%);
  height: min(420px, 90%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 30px 60px rgba(16, 38, 60, 0.25);
  display: block;
}

@media (max-width: 1024px) {
  .hero__img--litueche {
    width: min(340px, 80%);
    height: min(340px, 80%);
  }
}

@media (max-width: 768px) {
  .hero__image-wrapper--litueche {
    order: -1;
    margin-bottom: 1.5rem;
  }
  .hero__img--litueche {
    width: min(280px, 70vw);
    height: min(280px, 70vw);
  }
}

@media (max-width: 480px) {
  .hero__img--litueche {
    width: min(240px, 78vw);
    height: min(240px, 78vw);
  }
}

/* ==========================================================================
   BLOG ARTÍCULO — ajustes finales (sin capa: gana a @layer blog-articulo)
   ========================================================================== */

/* --- TOC (campo toc-blog) ---------------------------------------------- */
.blog-toc {
  background: #ffffff;
  border: 1px solid rgba(30, 58, 138, 0.12);
  border-radius: var(--ecot-blog-radio, 12px);
  padding: 1.25rem 1.4rem;
}

.blog-toc h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary-color);
}

.blog-toc ul,
.blog-toc ol {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.9375rem;
}

.blog-toc li {
  line-height: 1.5;
}

.blog-toc a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

.blog-toc a:hover,
.blog-toc a:focus-visible {
  text-decoration: underline;
}

/* --- Keypoints: tarjeta suave, li nativo ------------------------------- */
.blog-keypoints-container {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background: #ffffff;
  border: 1px solid rgba(30, 58, 138, 0.12);
  border-radius: var(--ecot-blog-radio, 12px);
}

.blog-keypoints-title {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary-color);
}

.blog-keypoints-list {
  margin: 0;
}

/* --- Hero del artículo: tag como link + excerpt blanco con aire --------- */
.blog-articulo-hero-info .blog-card-tags a {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.blog-articulo-hero-info .blog-card-tags a:hover,
.blog-articulo-hero-info .blog-card-tags a:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

/* Aire bajo el excerpt: la hero crece con el texto y nunca queda justo */
.blog-articulo-hero-container {
  padding-bottom: 3.5rem;
}

.blog-articulo-hero-descripcion span {
  color: rgba(255, 255, 255, 0.94);
}

/* --- Títulos del blog -----------------------------------------------------
   h1 = 2rem (desktop y mobile) · h2 = 1.5rem (1.25rem mobile)
   h3–h6 = mismo tamaño que el cuerpo (1.0625rem)                        --- */
.blog-articulo-hero-container h1 {
  font-size: 2rem;
  line-height: 1.3;
}

.blog-articulo h1 {
  font-size: 2rem;
  line-height: 1.3;
}

.blog-articulo h2 {
  font-size: 1.5rem;
  line-height: 1.35;
}

.blog-articulo h3,
.blog-articulo h4,
.blog-articulo h5,
.blog-articulo h6 {
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 700;
}

@media (max-width: 768px) {
  .blog-articulo h2 {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   MENÚ MÓVIL — item CTA (clase btn_cta desde el backend, p. ej. "Contacto")
   El look de botón lo da .btn-cta del kit; aquí solo se separa de la lista.
   ========================================================================== */
.menu-movil__lista li.menu-movil__item--cta {
  border-bottom: none;
  margin-top: 1.5rem;
}

.menu-movil__lista .menu-movil__item--cta .btn-cta {
  display: inline-block;
  margin-top: 0;
}