/*
 * Estilos de bloque de Edelco (los mismos nombres que en Erizo).
 * Se eligen en el editor, en el panel "Estilos" de cada bloque; los colores y tipografías salen de theme.json.
 */

/* Antetítulo (párrafo): texto corto encima de un título */
.is-style-antetitulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.5rem;
  font-family: var(--wp--preset--font-family--barlow-condensed);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--azul);
}

.is-style-antetitulo::before {
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  background: currentColor;
}

.is-style-antetitulo.has-text-align-center {
  justify-content: center;
}

/* Con barra (título): línea corta encima del título */
.wp-block-heading.is-style-barra::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--wp--preset--color--azul);
}

.wp-block-heading.is-style-barra.has-text-align-center::before {
  margin-left: auto;
  margin-right: auto;
}

/* Tarjeta (grupo o columna): caja blanca con borde fino */
.is-style-tarjeta {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 6px;
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
}

/* Anula el relleno genérico que el tema da a todo lo que va dentro de una columna */
.is-style-tarjeta *:not(figure):not(img):not(.wp-block-image):not(.wp-block-button__link),
.is-style-dato *:not(figure):not(img):not(.wp-block-image):not(.wp-block-button__link) {
  padding: 0;
}

.is-style-tarjeta > * {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.is-style-tarjeta > .wp-block-heading {
  margin-bottom: 1rem;
}

.is-style-tarjeta > .wp-block-buttons {
  margin-top: 1.25rem;
}

.is-style-tarjeta > :last-child {
  margin-bottom: 0;
}

/* Columnas que llevan tarjetas: separación entre ellas */
.wp-block-columns:has(> .is-style-tarjeta) {
  gap: 1.5rem;
}

/* Dato (grupo): un dato destacado y una línea que lo explica */
.is-style-dato::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--wp--preset--color--azul);
}

.is-style-dato > * {
  margin: 0;
}

.is-style-dato > :first-child {
  font-family: var(--wp--preset--font-family--barlow-condensed);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--wp--preset--color--marino);
}

.is-style-dato > :first-child + * {
  margin-top: 0.4rem;
  font-size: 1rem;
  color: color-mix(in srgb, var(--wp--preset--color--tinta) 75%, white);
}

/* Marco (imagen): foto o sello con borde fino sobre blanco */
.wp-block-image.is-style-marco img {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 6px;
  padding: 10px;
}

/* Marcas (galería): logotipos en gris que toman color al pasar el ratón */
.wp-block-gallery.is-style-marcas img {
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.wp-block-gallery.is-style-marcas .wp-block-image:hover img {
  filter: none;
  opacity: 1;
}

/* Dentro de una tarjeta los títulos de sección van un punto más pequeños */
.is-style-tarjeta > h2.wp-block-heading {
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem);
}