/*
 * Estilos de bloque propios del theme.
 *
 * Regla de la casa: aquí no se escribe ningún color literal. Todo sale de las
 * custom properties que genera theme.json (--wp--preset--color--*). Es lo que
 * impide que vuelva a pasar lo del prototipo, donde el verde apareció como
 * oklch(48% 0.09 150) en una página y oklch(56% 0.12 145) en otra.
 */

/* Animaciones Base --------------------------------------------------------- */

@keyframes dltFadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wp-block-button__link {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
}

/* Cabecera ----------------------------------------------------------------- */

.dlt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Solicitado: sin fondo ni borde inferior — queda transparente. !important
     porque theme.json también define fondo/borde para este grupo y se
     inyecta después de esta hoja (global-styles-inline-css). */
  background: none !important;
  border-bottom: none !important;
}

/* Logotipo -----------------------------------------------------------------
 *
 * El logotipo es el lockup completo: marca, "De la tierra Casa Taller" y
 * "Barichara · Colombia" en tres alturas de texto. Por eso no puede ir a los
 * 34 px de un isotipo — a ese tamaño las dos líneas de abajo son manchas. 72 px
 * es el punto donde se leen sin que la cabecera pegajosa se coma la pantalla.
 */
.dlt-logo img,
.dlt-header .wp-block-site-logo img {
  display: block;
  height: auto;
  /* Es un PNG/WebP con transparencia sobre fondo crema: sin esto, algunos
     navegadores lo interpolan con halo gris en los bordes al reescalarlo. */
  image-rendering: auto;
}

/* El enlace del logotipo no lleva subrayado ni recuadro al pasar el cursor:
   theme.json subraya todos los enlaces en :hover y aquí sobra. */
.dlt-header .custom-logo-link {
  text-decoration: none !important;
  display: inline-block;
  line-height: 0;
}

/* Menú de navegación --------------------------------------------------------
 *
 * Sin subrayado al pasar el cursor (theme.json pone "underline" en :hover
 * para todos los enlaces del sitio — !important porque esa regla se inyecta
 * en global-styles-inline-css, después de esta hoja, y gana por orden de
 * cascada si no). El look de píldora blanca con margen es solo de escritorio:
 * en el overlay móvil el <ul> es el mismo, pero se ve distinto a propósito.
 */
.dlt-header .wp-block-navigation-item__content {
  text-decoration: none !important;
}

.dlt-header .wp-block-navigation-item__content:hover,
.dlt-header .wp-block-navigation-item__content:focus {
  text-decoration: none !important;
}

.dlt-header nav.wp-block-navigation {
  font-size: calc(1em + 4px);
}

/* La Pangram del menú la pone theme.json en styles.blocks."core/navigation",
   y el overlay de la hamburguesa la hereda porque cuelga del mismo <nav>.
   Los dos botones no: son <button>, y el navegador les impone su propia
   fuente de control de formulario (Arial) en vez de heredar. Sin esto, la
   hamburguesa es lo único del menú que se queda fuera de la tipografía. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  font-family: inherit;
}

@media (min-width: 782px) {
  .dlt-header .wp-block-navigation-item {
    margin-left: 5px;
    margin-right: 5px;
    /* Entrada solo de escritorio: en el overlay móvil estos mismos <li> se
       reordenan dentro del modal (ver más abajo), y verlos deslizarse otra
       vez cada vez que se abre el menú sería ruido, no un detalle premium. */
    opacity: 0;
    animation: dltMenuItemEntrada 3s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* "A destiempo": cada ítem arranca un poco después que el anterior, en
     vez de deslizarse los 4 a la vez. Preparado hasta 6 por si se agrega
     algún enlace más al menú. */
  .dlt-header .wp-block-navigation-item:nth-child(1) { animation-delay: 0s; }
  .dlt-header .wp-block-navigation-item:nth-child(2) { animation-delay: 0.15s; }
  .dlt-header .wp-block-navigation-item:nth-child(3) { animation-delay: 0.3s; }
  .dlt-header .wp-block-navigation-item:nth-child(4) { animation-delay: 0.45s; }
  .dlt-header .wp-block-navigation-item:nth-child(5) { animation-delay: 0.6s; }
  .dlt-header .wp-block-navigation-item:nth-child(6) { animation-delay: 0.75s; }

  .dlt-header .wp-block-navigation-item__content {
    /* Blanco puro a propósito (no var(--wp--preset--color--superficie), que
       es un blanco cálido): así lo pidieron para estos botones puntuales. */
    background-color: #fff;
    border-radius: 67px;
    padding: 8px 14px;
    box-shadow: 0 2px 8px rgb(30 19 14 / 8%);
  }
}

/* De derecha a izquierda: nace desplazado a la derecha de su posición final
   y entra hacia la izquierda mientras aparece. */
@keyframes dltMenuItemEntrada {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Overlay móvil: el <ul> es el mismo que en escritorio (ver arriba), solo
   que WordPress lo mete en un diálogo a pantalla completa cuando se abre el
   menú hamburguesa. Centrado y con su propio padding, sin la animación ni
   la píldora blanca de escritorio. */
@media (max-width: 781px) {
  .dlt-header .wp-block-navigation__responsive-dialog {
    padding: 10px;
  }

  .dlt-header .wp-block-navigation__responsive-container-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .dlt-header ul.wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* El ancla de un CTA no puede quedar debajo de la cabecera pegajosa. */
:target,
[id] {
  scroll-margin-top: calc(var(--dlt-header-alto, 76px) + 16px);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/*
 * Red de seguridad general: apaga cualquier animación o transición del
 * tema para quien pida menos movimiento, incluidas las que vengan de una
 * clase añadida por JS (dlt-animations.js ya evita añadir la clase que
 * dispara dltFadeInUp, pero esto cubre el caso igual, y cualquier
 * animación que se sume más adelante sin que alguien recuerde este
 * bloque). No toca el fondo animado: ese ya se apaga solo en
 * dlt-fondo-animado.css.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/*
 * El botón "Contáctanos" persistente del documento estratégico §7. Se marca con
 * la clase en el patrón de cabecera para que siga siendo un core/button
 * editable, no un elemento aparte.
 */
.dlt-contacto .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--terracota-ink);
  border-color: var(--wp--preset--color--terracota);
  padding: 11px 24px;
  font-size: 14.5px;
}

.dlt-contacto .wp-block-button__link:hover {
  background: var(--wp--preset--color--terracota);
  color: var(--wp--preset--color--superficie);
}

/*
 * A 375 px la cabecera del prototipo medía 166 px de alto porque el nav
 * envolvía en tres filas. El overlay móvil de core/navigation lo resuelve; esto
 * solo aprieta el espaciado para que la barra quepa en una fila.
 */
@media (max-width: 781px) {
  /* 52 px: el nombre sigue legible y la cabecera cabe en una fila. */
  .dlt-logo img,
  .dlt-header .wp-block-site-logo img { width: 52px; }
  .dlt-header > .wp-block-group { gap: 12px; }
  .dlt-contacto .wp-block-button__link { padding: 9px 18px; font-size: 13.5px; }
}

/* Tarjeta ------------------------------------------------------------------ */

.is-style-dlt-tarjeta {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgb(30 19 14 / 8%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease;
  opacity: 0;

}
.is-style-dlt-tarjeta.is-visible {
  animation: dltFadeInUp 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Muy tenue a propósito: un lift mínimo y una sombra apenas más marcada,
   nunca un salto brusco. La foto respira un poco de más — ver la regla de
   .wp-block-post-featured-image img más abajo y la de .is-style-dlt-marco
   img — para que el conjunto se sienta como una sola pieza. */
.is-style-dlt-tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgb(30 19 14 / 9%);
  border-color: color-mix(in srgb, var(--wp--preset--color--terracota) 20%, var(--wp--preset--color--borde));
}

/* Las dos puertas del home. La altura igualada es lo que hace legible el
   "balance parejo" que pide el objetivo del documento estratégico. */
.is-style-dlt-puertas > .wp-block-column {
  display: flex;
}

.is-style-dlt-puertas .dlt-puerta {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--wp--preset--color--superficie);
  border: 1.5px solid var(--wp--preset--color--borde);
  box-shadow: 0 2px 10px rgb(30 19 14 / 6%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
  opacity: 0;

}
.is-style-dlt-puertas .dlt-puerta.is-visible {
  animation: dltFadeInUp 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mismo criterio "tenue" que .is-style-dlt-tarjeta: lift mínimo, sombra
   suave. La puerta es más grande en pantalla, así que un pelín más de
   sombra que la tarjeta se sigue leyendo como sutil, no como salto. */
.is-style-dlt-puertas .dlt-puerta:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgb(30 19 14 / 10%);
}

.dlt-puerta--experiencias { border-color: color-mix(in srgb, var(--wp--preset--color--terracota) 45%, var(--wp--preset--color--borde)); }
.dlt-puerta--proyectos    { border-color: color-mix(in srgb, var(--wp--preset--color--verde) 40%, var(--wp--preset--color--borde)); }

/* El botón se pega abajo para que las dos tarjetas alineen su CTA aunque los
   textos tengan distinto largo. */
.dlt-puerta .wp-block-buttons {
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--30);
}

/* Marco de fotografía pendiente ------------------------------------------- */

/*
 * Mientras no lleguen las fotos (documento §8: primero Momentos, luego Hábitat)
 * el hueco se marca en vez de dejarlo en blanco. Cuando se sustituya por una
 * imagen real, se borra la clase y ya.
 */
.is-style-dlt-marco {
  width: 100%;
  background: var(--wp--preset--gradient--marca-foto);
  border-radius: 20px;
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  overflow: hidden;

}
.is-style-dlt-marco.is-visible {
  animation: dltFadeInUp 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/*
 * Cuando la nota de "falta foto" se sustituye por una foto real (wp:image
 * dentro del mismo marco, como indica el propio comentario del patrón), la
 * imagen debe llenar el marco sin deformarse ni dejar huecos —object-fit
 * no sirve puesto directamente en .is-style-dlt-marco porque esa clase cae
 * en el <div>/<figure> contenedor, no en el <img>.
 */
.is-style-dlt-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* La foto respira un poco al pasar el cursor: sola (marco suelto, como en
   linea-proyecto.php) o arrastrada por el hover de toda la tarjeta/puerta
   que la contiene. Siempre el mismo 1.04 muy discreto, nunca más. */
.is-style-dlt-marco:hover img,
.is-style-dlt-tarjeta:hover .is-style-dlt-marco img,
.is-style-dlt-puertas .dlt-puerta:hover .is-style-dlt-marco img {
  transform: scale(1.04);
}

.is-style-dlt-nota-foto,
.dlt-nota-foto {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wp--preset--color--texto-suave);
  max-width: 34ch;
  margin-inline: auto;
}

/* Badge del hero ------------------------------------------------------------
 *
 * `display: inline-block` vive aquí y no en el estilo en línea del bloque:
 * no corresponde a ningún atributo de core/paragraph, así que dejarlo en el
 * `style=""` a mano hacía que Gutenberg recalculara un save() sin esa
 * propiedad y marcara el bloque como inválido (contenido "no coincide" con
 * lo guardado). Una clase + CSS no tiene ese problema. */

.dlt-badge {
  display: inline-block;
}

/* Antetítulo de sección ---------------------------------------------------- */

.is-style-dlt-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--wp--preset--color--terracota);
  margin-bottom: 12px;
}

/* Chips -------------------------------------------------------------------- */

.is-style-dlt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--30);
}

.is-style-dlt-chips li {
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--texto);
  background: var(--wp--preset--color--crema-alt);
  padding: 8px 15px;
  border-radius: 999px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.is-style-dlt-chips li:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--wp--preset--color--terracota) 15%, var(--wp--preset--color--crema-alt));
}

/* Lista con marca ---------------------------------------------------------- */

.is-style-dlt-marcas {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--30);
}

.is-style-dlt-marcas li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.is-style-dlt-marcas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wp--preset--color--terracota);
}

/* Botón de contorno -------------------------------------------------------- */

.is-style-dlt-ghost .wp-block-button__link,
.wp-block-button.is-style-dlt-ghost .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--terracota-ink);
  border-color: var(--wp--preset--color--terracota);
}

.is-style-dlt-ghost .wp-block-button__link:hover {
  background: var(--wp--preset--color--terracota);
  color: var(--wp--preset--color--superficie);
}

/*
 * Solicitado: las secciones con fondo crema-alt (sellos, Campo taller,
 * formulario de cotizar) quedan transparentes en vez del color sólido que
 * genera WordPress. !important porque `.has-crema-alt-background-color` la
 * genera el propio core a partir de theme.json con !important también —
 * sin el mismo peso, no le gana.
 */
.has-crema-alt-background-color {
  background-color: transparent !important;
}

/* Franja de sellos --------------------------------------------------------- */

.dlt-sellos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dlt-sellos li {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wp--preset--color--texto);
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--borde);
  padding: 14px 24px;
  border-radius: 10px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  opacity: 0;

}
.dlt-sellos li.is-visible {
  animation: dltFadeInUp 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dlt-sellos li:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgb(30 19 14 / 8%);
  border-color: color-mix(in srgb, var(--wp--preset--color--terracota) 30%, var(--wp--preset--color--borde));
}

/* Rejillas ----------------------------------------------------------------- */

/* auto-fit + minmax, nunca columnas fijas: es lo que rompía el paso 3 de
   Reservar en móvil. */
.dlt-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.dlt-rejilla--ancha {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* Galería de experiencia ----------------------------------------------------
 *
 * Sustituye al antiguo wp:gallery armado a mano (ver Contenido_Inicial::
 * galeria_experiencia() en dlt-core): ahora es un core/group con className
 * "dlt-galeria" y varios core/image reales dentro, así que aquí solo hace
 * falta darle forma de cuadrícula.
 */

.dlt-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.dlt-galeria .wp-block-image {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
}

.dlt-galeria .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.dlt-galeria .wp-block-image:hover img {
  transform: scale(1.05);
}

/* Foco accesible ------------------------------------------------------------
 *
 * Los campos de formulario ya tenían su propio :focus-visible. Esto añade
 * un contorno a toda la tarjeta o puerta cuando el enlace que llevan dentro
 * recibe foco por teclado — con :focus-within, porque el foco cae en el
 * <a> interno, no en el contenedor.
 */

.is-style-dlt-tarjeta:focus-within,
.is-style-dlt-puertas .dlt-puerta:focus-within {
  outline: 2px solid var(--wp--preset--color--terracota);
  outline-offset: 2px;
}

/* Pie ---------------------------------------------------------------------- */

.dlt-footer {
  background: var(--wp--preset--color--tinta);
  color: color-mix(in srgb, var(--wp--preset--color--crema) 85%, var(--wp--preset--color--tinta));
}

.dlt-footer :where(h2, h3, h4, .wp-block-heading) {
  color: var(--wp--preset--color--crema);
  font-size: 19px;
}

.dlt-footer a {
  color: color-mix(in srgb, var(--wp--preset--color--crema) 80%, var(--wp--preset--color--tinta));
}

.dlt-footer a:hover {
  color: var(--wp--preset--color--crema);
}

.dlt-footer p {
  color: color-mix(in srgb, var(--wp--preset--color--crema) 78%, var(--wp--preset--color--tinta));
}

/* Meta de ficha ------------------------------------------------------------ */

.dlt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 14px;
  color: var(--wp--preset--color--texto-suave);
  margin: 0 0 var(--wp--preset--spacing--30);
}

.dlt-meta strong {
  color: var(--wp--preset--color--tinta);
  font-weight: 600;
}

/* Zona privada de instrucciones ------------------------------------------- */

.dlt-paso {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--wp--preset--color--borde);
}

.dlt-paso:last-child { border-bottom: 0; }

.dlt-paso__n {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--wp--preset--color--terracota);
  color: var(--wp--preset--color--superficie);
  font-weight: 700;
  font-size: 15px;
}

.dlt-paso h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.dlt-paso p { margin: 0; }

/* Utilidades --------------------------------------------------------------- */

.dlt-centrado { text-align: center; }

.screen-reader-text:not(:focus) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Solicitado: Eliminar la restricción global de max-width en layouts contenidos.
   Con el ancho ya en 100%, el margin:auto que WordPress pone para centrar
   sobra: se deja en 0 para que no quede ningún desplazamiento. */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Listas globales: sin bullets/puntos ---------------------------------------- */

/*
 * Las listas de navegación del footer y las listas genéricas de bloques WP se
 * renderizan con los puntos de lista por defecto del navegador. Se eliminan
 * globalmente para que queden limpias como enlaces de navegación.
 *
 * Las listas que SÍ necesitan marca propia (dlt-marcas, dlt-chips, dlt-sellos)
 * ya tienen `list-style: none` y marcas CSS personalizadas.
 */
.wp-block-list {
  list-style: none;
  padding-left: 0;
}

/* Footer: listas de enlaces sin bullets y con espaciado limpio */
.dlt-footer .wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dlt-footer .wp-block-list li {
  padding: 3px 0;
}

/* Formularios: responsividad y espaciado ------------------------------------ */

/*
 * Aunque formularios.css del plugin ya trae auto-fit + minmax, estas reglas
 * refuerzan la responsividad y el espaciado para cualquier formulario que se
 * genere en el theme (incluyendo búsqueda, comentarios y cualquier plugin de
 * formularios de terceros).
 */

/* Reset base de formularios WP */
.wp-block-search,
.wp-block-search__inside-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.wp-block-search__input,
.wp-block-search__button {
  flex: 1 1 auto;
  min-width: 0;
}

/* Formularios genéricos: separación entre label e input */
form label,
.wp-block-form label {
  display: block;
  margin-bottom: 6px;
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
form select,
form textarea,
.wp-block-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.wp-block-form select,
.wp-block-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--wp--preset--color--tinta);
  background: var(--wp--preset--color--crema);
  border: 1.5px solid var(--wp--preset--color--borde);
  border-radius: 10px;
  margin-bottom: 16px;
}

form input:focus-visible,
form select:focus-visible,
form textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--terracota);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--terracota);
}

/* Comentarios de WP: responsividad */
.comment-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.comment-form > .comment-form-comment,
.comment-form > .form-submit {
  grid-column: 1 / -1;
}

/* Solicitado: Eliminar margin-block-start entre bloques hijos de wp-site-blocks */
:where(.wp-site-blocks) > * {
  margin-block-start: 0 !important;
}

/* Sellos y reconocimientos: el carrusel ahora vive en el shortcode
   [dlt_sellos] (plugins/dlt-core/assets/css/carrusel-sellos.css), que se
   carga solo, así que aquí no hace falta nada. */

/* Tarjetas: altura uniforme sin deformar imágenes -------------------------- */

/*
 * En /noticias/ y en el home, las tarjetas de blog deben tener la misma
 * altura en toda la fila. La imagen debe cubrir su espacio con object-fit:cover
 * sin estirarse ni deformarse.
 */
.is-style-dlt-tarjeta {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.is-style-dlt-tarjeta > .wp-block-post-featured-image {
  flex: 0 0 auto;
  overflow: hidden;
}

.is-style-dlt-tarjeta > .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mismo 1.04 tenue que .is-style-dlt-marco img: la portada de la tarjeta
   respira un poco cuando se pasa el cursor por toda la tarjeta. */
.is-style-dlt-tarjeta:hover > .wp-block-post-featured-image img {
  transform: scale(1.04);
}

/* El contenido textual de la tarjeta ocupa el espacio restante */
.is-style-dlt-tarjeta > .wp-block-group {
  flex: 1 1 auto;
}

/* Badge de Kayak en la sección CTA ----------------------------------------- */

.dlt-badge-kayak {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dlt-badge-kayak img {
  max-width: 200px;
  height: auto;
  transition: transform 0.3s ease;
}

.dlt-badge-kayak img:hover {
  transform: scale(1.05);
}