/* Sección genérica en columnas, tarjeta y botón.
 *
 * Sólo viste lo que NO trae clases capturadas: una sección convertida por
 * `migracion:secciones-a-layout` lleva sus clases atómicas de Webstudio y
 * gana por especificidad, así que estas reglas no la tocan. Son el aspecto por
 * defecto de las secciones que marketing arma desde cero.
 *
 * Los valores no son inventados: replican los del diseño capturado
 * (contenedor 1280px, rojo rgb(153 0 0), radio 8px, sombra .c2ia0cv).
 */

.seccion-widget__marco {
  --st-rojo: rgb(153 0 0 / 1);
  --st-gris: rgb(246 246 246 / 1);
  --st-oscuro: rgb(23 23 23 / 1);

  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* --- Fondos -------------------------------------------------------------- */

.seccion-widget__marco--fondo-blanco {
  background-color: rgb(255 255 255 / 1);
}
.seccion-widget__marco--fondo-gris {
  background-color: var(--st-gris);
}
.seccion-widget__marco--fondo-rojo {
  background-color: var(--st-rojo);
  color: rgb(255 255 255 / 1);
}
.seccion-widget__marco--fondo-oscuro {
  background-color: var(--st-oscuro);
  color: rgb(255 255 255 / 1);
}

/* Sobre fondo oscuro el texto enriquecido tiene que invertirse, incluidos los
   encabezados, que rich-text.css fija en negro. */
.seccion-widget__marco--fondo-rojo .rich-text-widget,
.seccion-widget__marco--fondo-oscuro .rich-text-widget,
.seccion-widget__marco--fondo-rojo .rich-text-widget :where(h1, h2, h3, h4, h5, h6),
.seccion-widget__marco--fondo-oscuro .rich-text-widget :where(h1, h2, h3, h4, h5, h6) {
  color: rgb(255 255 255 / 1);
}

.seccion-widget__marco--fondo-rojo .rich-text-widget a,
.seccion-widget__marco--fondo-oscuro .rich-text-widget a {
  color: rgb(255 255 255 / 1);
}

/* --- Espaciado vertical -------------------------------------------------- */

.seccion-widget__marco--espaciado-normal {
  padding-block: 80px;
}
.seccion-widget__marco--espaciado-compacto {
  padding-block: 40px;
}
.seccion-widget__marco--espaciado-amplio {
  padding-block: 120px;
}
.seccion-widget__marco--espaciado-ninguno {
  padding-block: 0;
}

/* --- Contenedor interior ------------------------------------------------- */

.seccion-widget__contenedor {
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: 20px;
  width: 100%;
}

.seccion-widget__contenedor--contenedor {
  max-width: 1280px;
}
.seccion-widget__contenedor--estrecho {
  max-width: 760px;
}
.seccion-widget__contenedor--completo {
  max-width: none;
  padding-inline: 0;
}

/* --- Columnas ------------------------------------------------------------ */

/* La rejilla es hija del contenedor capturado, que es un flex column con
 * `align-items: center` (.c120bce5). Sin esto un contenedor grid se encoge al
 * ancho de su contenido en lugar de ocupar los 1280px del contenedor, y toda
 * la sección aparece estrujada contra el borde izquierdo. */
.layout-widget.seccion-widget {
  width: 100%;
  align-self: stretch;
}

/* Las columnas se declaran como contenedores flex verticales. Además de
   reproducir el diseño original, evita que el espacio en blanco que el
   componente de área emite tras cada widget genere una caja de línea anónima:
   en un contenedor flex el texto en blanco no produce ítem, en uno de bloque
   estira la columna ~20px. Mismo motivo que en hero-layout.css. */
.layout-widget.seccion-widget > div {
  display: flex;
  flex-direction: column;
  gap: var(--columna-separacion, 16px);
  min-width: 0;
}

/* Alineación del texto de la columna. El encabezado de sección va centrado en
 * varias secciones del diseño original (beneficios de portada, CTA de blog
 * interno, la franja verde de columnas); `align-items` centra además los
 * bloques que no ocupan todo el ancho, como los botones. */
.layout-widget.seccion-widget > div[data-alineacion='center'] {
  text-align: center;
  align-items: center;
}

.layout-widget.seccion-widget > div[data-alineacion='end'] {
  text-align: right;
  align-items: flex-end;
}

.layout-widget.seccion-widget > div[data-direccion='fila'] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Un bloque que ocupa él solo su columna la rellena a lo alto, para que dos
   columnas contiguas queden a la misma altura. Las columnas con varios
   bloques no se tocan: ahí cada uno conserva su altura. */
.layout-widget.seccion-widget > div > :only-child {
  flex-grow: 1;
}

@media all and (max-width: 991px) {
  /* Se sobrescribe `gap`, no `--grid-gap`: la variable la fija el propio
     elemento en su atributo style y una regla de hoja nunca le gana. Con la
     clase extra de la sección sí superamos en especificidad a la regla
     `.layout-widget` que inyecta el core. */
  .layout-widget.seccion-widget {
    gap: 32px;
  }

  .seccion-widget__marco--espaciado-normal {
    padding-block: 48px;
  }
  .seccion-widget__marco--espaciado-amplio {
    padding-block: 72px;
  }
}

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

.tarjeta-widget {
  --st-rojo: rgb(153 0 0 / 1);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 8px;
  height: 100%;
}

.tarjeta-widget--contorno {
  background-color: rgb(255 255 255 / 1);
  border: 1px solid rgb(0 0 0 / 0.08);
  box-shadow:
    rgb(0 0 0 / 0.12) 0px 0.325926px 0.733333px 0px,
    rgb(0 0 0 / 0.07) 0px 1.54074px 2.86667px 0px,
    rgb(0 0 0 / 0.05) 0px 4px 9px 0px;
}

.tarjeta-widget--relleno {
  background-color: rgb(246 246 246 / 1);
}

.tarjeta-widget--plana {
  padding: 0;
  border-radius: 0;
  background: none;
}

.tarjeta-widget[data-alineacion='center'] {
  align-items: center;
  text-align: center;
}

.tarjeta-widget__icono :where(img, svg) {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.tarjeta-widget__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Botón --------------------------------------------------------------- */

.boton-widget {
  display: flex;
  justify-content: var(--boton-alineacion, flex-start);
}

/* `stretch` reparte el ancho: el <a> capturado es inline-flex y no crece solo. */
.boton-widget[style*='stretch'] > a {
  flex: 1;
}

.boton-widget > a:hover {
  filter: brightness(0.92);
}

/* --- Editor -------------------------------------------------------------- */

/* Una columna o una tarjeta recién creada está vacía y sin altura, así que no
   hay dónde pulsar para añadir el primer bloque. Sólo en modo edición. */
[data-apos-refreshable] .seccion-widget__columna:empty,
[data-apos-refreshable] .tarjeta-widget__cuerpo:empty {
  min-height: 40px;
}

/* Hueco del icono de una tarjeta que no tiene icono. Sin acotarlo, el botón
   "Añadir Contenido" de Apostrophe ocupa más alto que la tarjeta entera y el
   editor deja de reconocer la sección que está editando. Sólo afecta al modo
   edición: en la vista pública el hueco no se pinta. */
.tarjeta-widget__icono:has(.apos-area-widget-controls),
.tarjeta-widget__icono:has(> .apos-area) {
  max-height: 88px;
  overflow: hidden;
}

.tarjeta-widget__icono .apos-empty-area,
.tarjeta-widget__icono .apos-area-widget__add {
  transform: scale(0.72);
  transform-origin: left center;
}