.bep-como-actua {
  width: 100%;
  overflow: hidden;
  padding-top: var(--bep-section-padding-y);
  padding-right: var(--bep-container-padding);
  padding-left: var(--bep-container-padding);
}

.bep-como-actua-header {
  max-width: var(--bep-container-max-width);
  margin: 0 auto 40px;
  padding: 0 20px;
  text-align: center;
}

/* Reveal resting state (contexto.js/diferencial.js/casos-de-uso.js convention) */
.bep-como-actua-eyebrow {
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(0.75rem, 1.25vw, 1rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bep-color-titulo);
  opacity: 0;
  transform: translateY(20px);
}

.bep-como-actua-title {
  margin-top: 12px;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 500;
  font-style: normal;
  font-size: var(--bep-font-section-title-size);
  color: var(--bep-color-titulo);
  opacity: 0;
  transform: translateY(20px);
}

/* Wrapper dedicado al reveal de entrada (GSAP): opacity + translateY de
   reposo viven acá, no en .bep-como-actua-grid — ese elemento es el track
   real que el carrusel mueve con transform: translateX() en mobile, y
   necesita control exclusivo de su propio transform. Si ambos animaran el
   mismo elemento, el tween de reveal (que sólo conoce su propio y) pisa
   por completo cualquier translateX() que el carrusel haya puesto,
   perdiendo la posición del slide — confirmado con Playwright en la
   investigación previa. */
.bep-como-actua-grid-reveal {
  opacity: 0;
  transform: translateY(12px);
}

.bep-como-actua-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: var(--bep-container-max-width);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.bep-como-actua-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Slides decoy (copias de Protege/Penetra en los extremos del track, ver
   como-actua.php) — sólo existen para el loop del carrusel mobile; en
   desktop/tablet .bep-como-actua-grid sigue siendo un grid de 3 columnas
   normal, así que se ocultan por completo acá (display:none los saca del
   layout, .bep-como-actua-grid vuelve a tener exactamente 3 celdas). Sus
   <video> igual podrían intentar autoplay estando display:none — ver nota
   en como-actua.js sobre este trade-off. */
.bep-como-actua-slide-decoy {
  display: none;
}

.bep-como-actua-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 500px;
}

.bep-como-actua-caption {
  padding-top: 16px;
  padding-right: 51px;
  padding-bottom: 16px;
  padding-left: 51px;
  border-radius: 8px;
  background: linear-gradient(180deg, #deeaf3 0%, #ffffff 99.6276%);
  text-align: center;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: var(--bep-font-card-text-size);
  color: var(--bep-color-texto-suave);
  opacity: 0;
  transition: opacity 350ms ease;
}

.bep-como-actua-col:hover .bep-como-actua-caption {
  opacity: 1;
}

.bep-como-actua-caption strong {
  font-weight: 600;
}

.bep-como-actua-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .bep-como-actua-overlay (markup still in como-actua.php) is intentionally
   unstyled now — the hover-driven dark overlay was removed entirely rather
   than just zeroed out, so the empty div stays inert instead of carrying
   dead positioning/background rules. */

.bep-como-actua-label-wrap {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 25px 10px;
  pointer-events: none;
}

.bep-como-actua-label {
  display: block;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 600;
  font-style: normal;
  font-size: 2.188rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bep-color-footer-texto);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 1024px) {
  .bep-como-actua-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bep-como-actua-item {
    min-height: 400px;
  }

  /* :hover isn't reliable on touch — below desktop the caption stays
     always visible instead of depending on a hover that may never fire. */
  .bep-como-actua-caption {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .bep-como-actua-header {
    padding: 0;
  }

  .bep-como-actua-item {
    min-height: unset;
    aspect-ratio: 4 / 5;
  }

  .bep-como-actua-item,
  .bep-como-actua-caption {
    margin: 0 16px;
  }

  /* Carrusel propio (sin Embla, ver como-actua.js), sólo mobile —
     .bep-como-actua-grid sigue siendo grid normal en desktop/tablet, este
     bloque no debe filtrarse ahí. .bep-como-actua-grid es el track que
     como-actua.js mueve con transform: translateX(), reusado de su rol de
     grid en desktop: padding-left/right:0 cancela el padding:20px de esa
     regla de desktop (nunca reseteado acá antes) — con ese padding
     presente, el flex:0 0 100% del slide se calculaba contra un
     content-box más angosto que el propio viewport, y por ahí asomaba el
     slide siguiente (rompiendo el "1 slide completo por vista, sin peek").
     margin-left negativo + width compensado en el track, y padding-left
     equivalente en el slide (mismo par de valores, técnica idéntica a
     Casos de Uso) — acá NO es para crear separación visible (con un solo
     slide a pantalla completa no hay ninguna que mostrar; el padding cae
     justo en la franja que el propio margin-left negativo saca fuera del
     viewport, así que la tarjeta queda flush sin ningún hueco). Es
     puramente para que `.bep-como-actua-grid` tenga su borde izquierdo en
     x=0 respecto al viewport real — así cada `translateX(-N * 100%)` de
     como-actua.js cae exacto sobre el borde de cada slide, sin el offset
     de ±16px que metería el padding de `.bep-como-actua` si no se
     cancelara acá. */
  .bep-como-actua-embla {
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
  }

  .bep-como-actua-embla:active {
    cursor: grabbing;
  }

  .bep-como-actua-grid {
    display: flex;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: calc(var(--bep-container-padding) * -1);
    width: calc(100% + var(--bep-container-padding));
    transition: transform 400ms ease;
  }

  /* Alternado por como-actua.js durante el drag táctil y en el salto
     instantáneo del loop (último slide -> primero, o primero -> último) —
     sin esto, esos movimientos se animarían visiblemente en la dirección
     incorrecta en vez de saltar sin transición. */
  .bep-como-actua-grid.bep-como-actua-no-transition {
    transition: none;
  }

  .bep-como-actua-embla-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding-left: var(--bep-container-padding);
    box-sizing: border-box;
  }

  /* Los decoys vuelven a ser slides normales del track sólo acá — ver la
     regla base (display:none) para por qué están ocultos en desktop/tablet. */
  .bep-como-actua-slide-decoy {
    display: flex;
  }

  .bep-como-actua-caption {
    flex: 1;
  }

  /* Sin este override, .bep-como-actua-label hereda el font-size de
     desktop (2.188rem) sin ningún ajuste responsive — con el item angosto
     de mobile, "PROTEGE" (la palabra más larga) queda muy cerca de
     desbordar la altura de .bep-como-actua-label-wrap y envolver a una
     segunda columna vertical, ilegible. A 1.75rem, "PROTEGE" necesita
     ~196px de alto (+50px de padding del wrap = ~246px) contra un item de
     ~320px incluso en el viewport más angosto probado (320px) — sigue
     entrando cómodo, con ~74px de margen.
     text-size-adjust:100% desactiva el auto-boost de fuente de Safari/iOS
     para bloques de texto angostos (como esta columna vertical de un solo
     carácter de ancho) — sin esto, iOS puede renderizar el texto más
     grande que el font-size declarado, causando un corte que sólo se ve
     en dispositivos reales y no en emuladores (ver investigación previa
     con Playwright). */
  .bep-como-actua-label {
    font-size: 1.75rem;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* top+bottom (en vez de dejar height en auto) hace que el alto del wrap
     sea siempre igual al alto real de .bep-como-actua-item, calculado por
     el navegador de forma determinística — no depende de cuánto necesite
     el texto rotado. Sólo mobile: en desktop/tablet el wrap sigue con
     altura auto, pegado arriba por su padding-top de siempre.
     align-items:flex-start (no center) mantiene el label pegado arriba
     dentro de ese espacio, como estaba pensado desde el principio —
     justify-content:center sólo centra en el eje horizontal (angosto, de
     un solo caracter de ancho por la escritura vertical). */
  .bep-como-actua-label-wrap {
    bottom: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}