/* Capa `components`: la declara este mismo archivo. Antes se la asignaba el
   `@import ... layer(components)` de main.css; ahora cada hoja se encola por
   separado para que descarguen en paralelo. Ver inc/enqueue.php. */
@layer components {
  /* ==========================================================================
   BLOCKS — estilos de los bloques "hoja", extraídos de los <style> de cada
   componente .astro. Sin @layer (ganan a las capas base, como en Astro).
   Se usa nesting CSS nativo (soportado en navegadores modernos), igual que
   los componentes originales.
   `:global(X)` de Astro → `X`.
   ========================================================================== */

  /* =============================== ICONS =============================== */
  .section--light .icon-txt--headcols:not(.icon-txt--box) {
    --bg-ico-inverse: var(--bg-component);
  }
  .section--light .icon-txt--box.icon-txt--headcols {
    --bg-ico-inverse: var(--color-base-300);
  }
  .icon-txt {
    height: 100%;
    text-align: center;
    margin: 0.5rem 0;
    container-type: inline-size;
    --padding-inner: clamp(16px, calc(3.2cqw + 6.4px), 32px);

    &[href] {
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .button {
      display: none;
    }
    .icon-txt__ico {
      grid-area: ico;
      --sizeIco: 3.5rem;
      line-height: 100%;
      font-size: var(--sizeIco);
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--sizeIco);
      margin: 0 auto 1rem;
      text-align: center;
      color: var(--color-primary);
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
      &:has(.counter-value) {
        width: auto;
      }
      i {
        font-size: 1em;
      }
    }
    .icon-txt__title {
      grid-area: title;
      margin: 0 0 0.4em;
    }
    .icon-txt__inner {
      grid-area: text;
    }
    .icon-txt__desc:not(:last-child) {
      margin-bottom: var(--flow-gap);
    }

    .icon-txt__ico--border,
    .icon-txt__ico--rounded,
    .icon-txt__ico--square {
      --sizeIco: 4.5rem;
      font-size: var(--sizeIco);
      display: flex;
      width: var(--sizeIco);
      height: var(--sizeIco);
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      line-height: 100%;
      margin: 0 auto 1rem;
      text-align: center;
      i {
        font-size: 0.5em;
      }
    }
    .icon-txt__ico--border {
      border-radius: var(--radius-box);
      border: 2px solid;
      color: var(--color-primary);
      &.icon-txt__ico--over {
        background: var(--item-bg);
      }
    }
    .icon-txt__ico--border.icon-txt__ico--rounded {
      background: none;
      border: 2px solid;
      color: var(--color-primary);
    }
    .icon-txt__ico--rounded {
      border-radius: 50%;
      background: var(--color-primary);
      color: var(--color-primary-content);
    }
    .icon-txt__ico--square {
      background: linear-gradient(
        to bottom,
        var(--color-primary),
        var(--color-secondary)
      );
      border-radius: var(--radius-box);
      color: var(--color-primary-content);
    }
    .icon-txt__ico--rounded img,
    .icon-txt__ico--square img,
    .icon-txt__ico--border img {
      margin: 0 auto;
      max-width: 60%;
      height: auto;
    }
    .icon-txt__ico--border.icon-txt__ico--over,
    .icon-txt__ico--rounded.icon-txt__ico--over,
    .icon-txt__ico--square.icon-txt__ico--over {
      margin-top: calc(((var(--sizeIco) / 2) * -1) - var(--padding-inner));
    }

    &.icon-txt--box {
      margin: 0;
      border-radius: var(--radius-box);
      padding: var(--padding-inner);
      background: var(--item-bg);
      color: var(--color-base-content);
      border: 1px solid var(--color-base-300);
      transition:
        transform 400ms ease-out,
        box-shadow 400ms ease-out,
        border-color 400ms ease-out;
      &[href]:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px -14px
          oklch(from var(--color-primary) 45% c h / 0.25);
      }
      &:not(.icon-txt--cols):not(.icon-txt--headcols):has(
          .icon-txt__ico--over
        ) {
        margin-top: 2.5rem;
      }
    }

    &.icon-txt--headcols {
      --bg-ico: var(--bg-ico-inverse, var(--color-base-300));
      &.icon-txt--box {
        --bg-ico: var(--bg-ico-inverse, var(--bg-component));
        border-bottom: 4px solid var(--color-primary);
      }
      text-align: left;
      margin: 0;
      display: grid;
      grid-template-columns: max-content 1fr;
      grid-template-rows: min-content min-content;
      grid-template-areas: "ico title" "text text";
      .icon-txt__title {
        margin: 0;
        align-self: center;
      }
      .icon-txt__inner {
        margin-top: 0.75rem;
      }
      &:not(.icon-txt--box) .icon-txt__inner {
        border-top: 1px solid var(--color-base-300);
        padding-top: 1rem;
        margin-top: 0.75rem;
      }
      .icon-txt__ico--rounded {
        background: var(--bg-ico);
        color: var(--color-primary);
      }
      .icon-txt__ico {
        --sizeIco: 4rem;
        align-items: center;
        margin: 0 1rem 0 0;
        flex-shrink: 0;
      }
    }

    &.icon-txt--cols {
      display: grid;
      grid-template-columns: max-content 1fr;
      grid-template-areas: "ico title title" "ico text text";
      grid-template-rows: min-content auto;
      text-align: left;
      align-items: flex-start;
      font-size: 0.95rem;
      .icon-txt__ico {
        --sizeIco: 2.75rem;
        flex-shrink: 0;
        margin: 0 1rem 0 0;
      }
      .icon-txt__ico--border,
      .icon-txt__ico--rounded,
      .icon-txt__ico--square {
        --sizeIco: 3.65rem;
      }
    }
  }

  /* =============================== CARDS =============================== */

  /* Container externo para .card y .icon-txt.
   Un elemento NO puede consultar su propio container ni usar sus propias
   unidades cq: `.card`/`.icon-txt` son a la vez el container (para los `cqw`
   de --padding-inner de sus hijos) y el elemento que cambia de dirección
   (card--cols*) o se aplica el padding a sí mismo (icon-txt--box). Ambas cosas
   se resuelven contra un container ANCESTRO, que no existía: las @container
   nunca se cumplían y los cqw caían al viewport. Lo declaramos en el padre
   directo, solo cuando hay UN item, para que el ancho medido sea el del item
   y no el de una fila de varios. Se excluye .swiper-slide: dentro del carrusel
   el tema anula los containers a propósito (ver opiniones/style.css).
   Los `cqw` de los descendientes siguen resolviéndose contra `.card` /
   `.icon-txt` (container más cercano), así que ese padding no cambia. */
  :has(> .card):not(:has(> .card ~ .card)):not(.swiper-slide):not(
      [class*="block-editor"]
    ),
  :has(> .icon-txt):not(:has(> .icon-txt ~ .icon-txt)):not(.swiper-slide):not(
      [class*="block-editor"]
    ) {
    container: itemWrap / inline-size;
  }

  /* Segundo caso, sin el limite de "un solo item": padres con layout en flujo
   (is-layout-flow / is-layout-constrained de WordPress). Ahi cada hijo directo
   ocupa el ancho completo, asi que el ancho del padre ES el de cada tarjeta
   aunque haya varias apiladas, y medirlo sigue siendo correcto. Sin esto, dos
   `.card--cols` sueltas en la misma seccion se quedaban sin container y sus
   @container itemWrap no se cumplian nunca (se veian en columna). */
  .is-layout-flow:has(> .card):not(.swiper-slide):not([class*="block-editor"]),
  .is-layout-constrained:has(> .card):not(.swiper-slide):not(
      [class*="block-editor"]
    ) {
    container: itemWrap / inline-size;
  }

  /* Lienzo del editor (iframe, WP 6.3+). Ahi el HTML es el mismo que en el
   front — `useBlockProps({className:'card …'})` pone las clases en el propio
   bloque — pero el contenedor de bloques lleva ADEMAS
   `block-editor-block-list__layout`, que es justo lo que excluyen los
   `:not([class*="block-editor"])` de las dos reglas anteriores: sin container,
   `card--cols` se veia en columna dentro del editor aunque en el front saliera
   en fila. Se reactiva SOLO ese elemento (el resto del chrome del editor sigue
   fuera) y con las mismas dos condiciones que en el front: un solo item, o
   layout en flujo donde cada hijo ocupa el ancho completo. */
  .block-editor-block-list__layout:has(> .card):not(:has(> .card ~ .card)),
  .block-editor-block-list__layout:has(> .icon-txt):not(
      :has(> .icon-txt ~ .icon-txt)
    ),
  .block-editor-block-list__layout.is-layout-flow:has(> .card),
  .block-editor-block-list__layout.is-layout-constrained:has(> .card) {
    container: itemWrap / inline-size;
  }
  .card {
    display: flex;
    height: 100%;
    flex-direction: column;
    background: var(--item-bg);
    border-radius: var(--radius-box);
    overflow: hidden;
    container-type: inline-size;
    --padding-inner: clamp(16px, calc(3.2cqw + 6.4px), 32px);
    box-shadow: var(--shadow, 0);

    &[href] {
      text-decoration: none;
      color: inherit;
    }
    .card__inner {
      padding: var(--padding-inner);
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .card__desc {
      flex: 1;
    }
    .card__desc:not(:last-child) {
      margin-bottom: var(--flow-gap);
    }
    .card__img img {
      border-radius: 0;
    }
    .card__info {
      flex: 1;
      &:not(:last-child) {
        margin: 0 0 var(--flow-gap);
      }
    }
    .card__title {
      margin: 0 0 0.5em;
    }
    /* Subtítulo debajo del título: el hueco de 0.75em del título separa del
       cuerpo de la tarjeta, no de su propio rótulo. */
    .card__title:has(+ .card__subtitle) {
      margin-bottom: 0.25em;
    }
    .card__subtitle:last-child {
      margin-bottom: 0;
    }

    &.card--primary {
      background: var(--color-primary);
      color: var(--color-primary-content);
    }
    &.card--white {
      background: var(--bg-component);
      color: var(--color-base-content);
    }
    &.card--light {
      background: var(--item-bg);
      color: var(--color-base-content);
    }
    &.card--invert {
      flex-direction: column-reverse;
    }

    &.card--gradient {
      background: var(--color-primary);
      color: var(--color-primary-content);
      position: relative;
      .card__inner {
        z-index: 1;
        position: relative;
        overflow: hidden;
        &::before {
          height: 100%;
          content: "";
          background: rgb(255, 255, 255, 0.1);
          position: absolute;
          z-index: 0;
          border-radius: 50%;
          right: 0;
          top: 0;
          transform: translate(50%, -25%);
          aspect-ratio: 1;
        }
        &::after {
          height: 100%;
          width: 100%;
          content: "";
          background: radial-gradient(
            at right top,
            rgba(255, 255, 255, 0.25),
            rgba(0, 0, 0, 0.1)
          );
          position: absolute;
          z-index: 0;
          right: 0;
          top: 0;
        }
      }
    }

    &.card--corner {
      position: relative;
      overflow: hidden;
      background: none;
      border: var(--border) solid var(--color-primary);
      .card__inner:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-right: 24px solid transparent;
        border-bottom: 24px solid transparent;
        border-top: 24px solid var(--color-primary);
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    &.card--triangle {
      transition: 0.7s;
      position: relative;
      &[href]:hover,
      &:has(.button:hover) {
        background: var(--item-bg);
        transform: scale(1.025);
      }
      .card__inner {
        position: relative;
        &::before {
          content: "";
          position: absolute;
          background: linear-gradient(
            135deg,
            transparent 50% 50%,
            var(--color-accent) 50% 50%
          );
          aspect-ratio: 1;
          transform: translateX(25%);
          height: 35%;
          opacity: 0.2;
          right: 0;
          bottom: 0;
        }
      }
    }

    &.card--reverse {
      &:not(.card--cols) {
        flex-direction: column-reverse;
      }
    }

    &.card--pad {
      --padding-inner: clamp(12px, calc(2cqw + 6.4px), 32px);
      padding: 0.5rem;
      border-radius: var(--radius-box);
      border: 1px solid var(--color-base-300);
      box-shadow: var(--shadow);
      position: relative;
      transition:
        transform 500ms ease-out,
        box-shadow 500ms ease-out,
        border-color 500ms ease-out;
      &[href]:hover,
      &:has(.button:hover) {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px -12px
          oklch(from var(--color-primary) 45% c h / 0.28);
      }
      .card__img img {
        border-radius: var(--radius-box);
      }
      &:not(.card--cols) .card__inner {
        padding: var(--padding-inner) 0.5rem 0.25rem;
      }
      .card__link {
        &:not(:has(.button)) {
          text-align: right;
        }
        a {
          text-decoration: none;
          display: inline-block;
          font-weight: var(--bold1);
          transition: color 300ms ease;
          &:last-child {
            margin-left: 0.25rem;
          }
        }
      }
    }

    &.card--cols {
      .card__title {
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 0.75rem;
        margin-bottom: 1rem;
        &::after,
        &::before {
          display: none;
        }
      }
      @container itemWrap (min-width: 601px) {
        flex-direction: row;
        gap: var(--padding-inner);
        text-align: left;
        .card__inner {
          padding-left: 0;
        }
        .card__img {
          width: 30%;
          & img {
            height: 100%;
          }
        }
      }
    }

    &.card--cols2 {
      box-shadow: none;
      background: none;
      border-radius: inherit;
      @container itemWrap (max-width: 600px) {
        .card__inner {
          padding: var(--padding-inner) 0;
        }
      }
      @container itemWrap (min-width: 601px) {
        flex-direction: row;
        text-align: left;
        border: 0;
        padding: 0;
        .card__img {
          width: 30%;
          & img {
            height: 100%;
          }
        }
        .card__inner {
          padding: 0 0 0 var(--padding-inner);
        }
        .card__title {
          border-top: 1px solid var(--color-border);
          padding-top: 1rem;
        }
      }
    }

    &.card--colsOver {
      box-shadow: none;
      background: none;
      border-radius: 0;
      overflow: visible;
      text-align: left;
      flex: 0;
      --translate: 1.5rem;
      --padding-inner: clamp(12px, calc(2cqw + 6.4px), 32px);
      .card__img {
        width: calc(100% - var(--translate));
        img {
          border-radius: var(--radius-box, 0);
        }
      }
      .card__inner {
        background: var(--bg-component);
        color: var(--color-base-content);
        padding: var(--padding-inner);
        border-radius: var(--radius-box, 0);
        box-shadow: var(--shadow);
        margin-left: var(--translate);
      }
      @container itemWrap (max-width: 600px) {
        .card__inner {
          transform: translateY(calc(var(--translate) * -1));
          margin-bottom: calc(var(--translate) * -1);
        }
      }
      @container itemWrap (min-width: 601px) {
        flex-direction: row;
        text-align: left;
        .card__img {
          width: 35%;
        }
        .card__inner {
          margin: 1rem 0;
          transform: translate(0);
          width: calc(100% + var(--translate));
          align-self: center;
          &:last-child {
            margin-left: calc(var(--translate) * -1);
          }
          &:first-child {
            margin-right: calc(var(--translate) * -1);
          }
        }
      }
    }

    &.card--titleOver {
      text-align: left;
      .card__inner {
        position: relative;
        transition: transform 400ms ease;
      }
      &[href]:hover .card__inner {
        transform: translateY(1.5rem);
      }
      .card__title {
        display: inline-block;
        background: var(--item-bg);
        padding: 0.5em var(--padding-inner);
        margin: 0;
        top: 1px;
        transform: translate(calc(var(--padding-inner) * -1), -100%);
        max-width: calc(100% - 1rem);
        position: absolute;
        border-top-right-radius: var(--radius-box, 0);
      }
    }

    &.card--over {
      box-shadow: none;
      background: none;
      border-radius: 0;
      overflow: visible;
      --translate: 1.5rem;
      .card__img img {
        border-radius: var(--radius-box, 0);
      }
      .card__inner {
        background: var(--bg-component);
        color: var(--color-base-content);
        max-width: 90%;
        width: 100%;
        margin: 0 auto;
        box-shadow: var(--shadow);
        transform: translateY(calc(var(--translate) * -1));
        margin-bottom: calc(var(--translate) * -1);
        border-radius: var(--radius-box, 0);
      }
    }
  }

  /* =============================== CTA =============================== */
  .cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
  }

  /* =============================== TEXTO =============================== */
  .text-block.text--center {
    text-align: center;
  }
}