/* ---------------------------------------------------------------------------
   Fila de confianza de la portada (7-nov, pedido del operador: «en mobile me gusta B y en
   desktop D», de las cinco propuestas del artifact «Fila de confianza»).

   - Escritorio (D, líneas editoriales): cuatro columnas sin cajas; cada mensaje cuelga de una
     línea fina con un tramo verde de 48px que recorre la línea al pasar el cursor. Título en
     Unbounded Black, icono de línea en tinta.
   - Celular (B, bento): la primera tarjeta, «Retiro gratis», va en negro con título en
     Unbounded; las otras tres, claras con borde a 10 % y radio 16; la última, en gris con el
     icono a la izquierda.

   El tema arma la sección con dos grupos (izquierda y derecha) de dos mensajes cada uno. Para
   tener cuatro columnas iguales, los dos grupos se vuelven transparentes (`display: contents`)
   y los cuatro mensajes pasan a ser hijos de la grilla. Todo cuelga de `.icon-block` dentro de
   la sección `confianza`, así que no toca otras secciones. Sin medir en pantalla: la tienda
   pide contraseña en el navegador de pruebas.

   Fondo negro (7-nov, pedido del operador: «deja esto con fondo negro y lo demás lo ajustamos al
   fondo»): la sección va en #111111 (ajuste `background_color` del `templates/index.json`), con
   títulos y iconos en blanco, bajadas en blanco al 68 % y líneas en blanco al 20 %. En celular las
   tarjetas son claras sobre negro (blanco al 6 %) y la primera va en verde con texto en tinta.

   Lo que se anula de `marca-estilo.css` (D-21, D-23), que va antes: el círculo con borde verde de
   los iconos y las líneas verticales con 24px de relleno a la izquierda de cada mensaje (también
   caían sobre el grupo de texto). Icono: de línea de Lucide 0.469.0 (ISC), puesto como máscara
   sobre el <svg> del tema para conservar el enlace del icono de chat.
   --------------------------------------------------------------------------- */

/* Grilla: el elemento que contiene a los dos grupos. */
[id*='__confianza'] :is(div):has(> .group-block > .group-block-content > .group-block > .group-block-content > .icon-block) {
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpolyline points=%2212 6 12 12 16 14%22/%3E%3C/svg%3E");
  --i-box: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z%22/%3E%3Cpath d=%22M12 22V12%22/%3E%3Cpolyline points=%223.29 7 12 12 20.71 7%22/%3E%3Cpath d=%22m7.5 4.27 9 5.15%22/%3E%3C/svg%3E");
  --i-chat: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.9 20A9 9 0 1 0 4 16.1L2 22Z%22/%3E%3C/svg%3E");

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px !important;
  align-items: start !important;

  & > .group-block,
  & > .group-block > .group-block-content {
    display: contents !important;
  }

  & > .group-block > .group-block__media-wrapper {
    display: none;
  }

  /* Cada mensaje (icono + título + bajada). */
  & > .group-block > .group-block-content > .group-block {
    position: relative;
    width: 100%;
    padding-block-start: 20px;
    padding-inline-start: 0;
    border-inline-start: 0;

    /* Los grupos internos (el del texto) también heredaban la línea vertical. */
    .group-block {
      padding-inline-start: 0;
      border-inline-start: 0;
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 1px;
      background: rgb(255 255 255 / 0.2);
    }

    &::before {
      content: '';
      position: absolute;
      inset: 0 auto auto 0;
      z-index: 1;
      width: 48px;
      height: 3px;
      background: #95c11f;
      transition: width 320ms ease;
    }

    &:hover::before {
      width: 100%;
    }

    .icon-block {
      width: auto;
      height: auto;
      padding: 0;
      background: none;
      border: 0;
      border-radius: 0;
      outline: 0;
      color: #ffffff;
    }

    .icon-block svg {
      width: 24px;
      height: 24px;
      background: currentColor;
      -webkit-mask: var(--icono) center / contain no-repeat;
      mask: var(--icono) center / contain no-repeat;
    }

    /* Los trazos del tema se esconden: el dibujo es la máscara. */
    .icon-block svg > * {
      display: none;
    }

    .text-block.h6 p {
      color: #ffffff;
      font-family: 'Unbounded', 'Outfit', system-ui, sans-serif;
      font-size: 0.75rem;
      font-weight: 900;
      line-height: 1.35;
      letter-spacing: 0.01em;
      text-transform: uppercase;
    }

    .text-block:not(.h6) p {
      color: rgb(255 255 255 / 0.68);
      font-size: 0.875rem;
      line-height: 1.4;
    }
  }
}

/* Qué icono va en cada mensaje: retiro, horario, productos, ayuda. */
[id*='__confianza'] :is(div):has(> .group-block > .group-block-content > .group-block > .group-block-content > .icon-block) {
  & > .group-block:first-child > .group-block-content > .group-block:first-child { --icono: var(--i-pin); }
  & > .group-block:first-child > .group-block-content > .group-block:last-child { --icono: var(--i-clock); }
  & > .group-block:last-child > .group-block-content > .group-block:first-child { --icono: var(--i-box); }
  & > .group-block:last-child > .group-block-content > .group-block:last-child { --icono: var(--i-chat); }
}

@media (prefers-reduced-motion: reduce) {
  [id*='__confianza'] :is(div):has(> .group-block > .group-block-content > .group-block > .group-block-content > .icon-block)
    > .group-block > .group-block-content > .group-block::before {
    transition: none;
  }
}

/* Tabletas: dos columnas. */
@media screen and (min-width: 750px) and (max-width: 1023px) {
  [id*='__confianza'] :is(div):has(> .group-block > .group-block-content > .group-block > .group-block-content > .icon-block) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px !important;
  }
}

/* Celular: bento de una columna. */
@media screen and (max-width: 749px) {
  [id*='__confianza'] :is(div):has(> .group-block > .group-block-content > .group-block > .group-block-content > .icon-block) {
    grid-template-columns: 1fr;
    gap: 12px !important;

    & > .group-block > .group-block-content > .group-block {
      padding: 22px;
      background: rgb(255 255 255 / 0.06);
      border: 1px solid rgb(255 255 255 / 0.14);
      border-radius: 16px;

      &::before,
      &::after {
        display: none;
      }

      .icon-block {
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        background: #95c11f;
        border: 0;
        border-radius: 9999px;
        color: #111111;
      }

      .icon-block svg {
        width: 18px;
        height: 18px;
      }

      .text-block.h6 p {
        font-family: 'Outfit', system-ui, sans-serif;
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.06em;
      }
    }

    /* 1.ª tarjeta: verde con texto en tinta y el título en Unbounded. */
    & > .group-block:first-child > .group-block-content > .group-block:first-child {
      padding: 26px;
      background: #95c11f;
      border-color: #95c11f;

      .icon-block {
        width: 48px;
        height: 48px;
        background: #111111;
        color: #95c11f;
      }

      .icon-block svg {
        width: 24px;
        height: 24px;
      }

      .text-block.h6 p {
        color: #111111;
        font-family: 'Unbounded', 'Outfit', system-ui, sans-serif;
        font-size: 1.0625rem;
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: 0;
      }

      .text-block:not(.h6) p {
        color: rgb(17 17 17 / 0.75);
        font-size: 0.9375rem;
      }
    }

    /* 4.ª tarjeta: gris, con el icono a la izquierda. */
    & > .group-block:last-child > .group-block-content > .group-block:last-child {
      background: rgb(255 255 255 / 0.12);
      border-color: transparent;

      & > .group-block-content {
        flex-direction: row !important;
        align-items: center !important;
      }
    }
  }
}