/* Hero de la home: la foto del producto y los tres sellos.
   Antes todo esto vivia dentro de hero_img_2.svg, 106 KB, de los cuales 69 KB
   eran los textos de los sellos convertidos a curvas. Aqui la foto es un WebP
   suelto de 25 KB y los sellos son HTML colocado por coordenadas. */

/* 484 px fijos: es el tamano que tenia el SVG pegado al DOM, que ignoraba el
   ancho del modulo de Divi y por eso se desbordaba por debajo de la banda
   azul. El modulo esta oculto en tablet y telefono, asi que no hace falta que
   esto se adapte. */
.prx-hero {
  position: relative;
  width: 484px;
  aspect-ratio: 484 / 530;   /* la misma caja del SVG viejo, para que las coordenadas sigan valiendo */
  perspective: 1400px;       /* lejos, para que el giro de la foto sea apenas perceptible */
  perspective-origin: 50% 50%;
}

/* La foto va donde la ponia el patron del SVG, medido contra el original. */
.prx-hero__foto {
  position: absolute;
  left: 11.711%;
  top: 0.438%;
  width: 75.15%;
  height: 99.562%;
  object-fit: contain;
  transform-origin: 50% 55%;  /* un poco abajo del centro: la estacion esta colgada */
  will-change: transform;
}

/* ---------- los sellos ---------- */
.prx-sello {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 12.41%;             /* los 52.2 px del SVG original, un 15% mas grandes */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.prx-sello__boton {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #264675;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13, 32, 66, .18);
  transition: background-color .25s cubic-bezier(.22, 1, .36, 1),
              color .25s cubic-bezier(.22, 1, .36, 1),
              border-radius .25s cubic-bezier(.22, 1, .36, 1),
              transform .25s cubic-bezier(.22, 1, .36, 1);
}

.prx-sello__boton svg { width: 46%; height: 46%; }

.prx-sello__boton:hover,
.prx-sello__boton:focus-visible {
  background: #46c2ff;
  color: #fff;
  border-radius: 28%;        /* el original pasa de circulo a cuadrado redondeado */
  transform: scale(1.06);
}

.prx-sello__boton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- la nota que sale al pasar el mouse ---------- */
.prx-sello__nota {
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  width: max-content;
  max-width: 230px;
  transform: translateY(-50%) translateX(-6px);
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(13, 32, 66, .22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s cubic-bezier(.22, 1, .36, 1),
              transform .25s cubic-bezier(.22, 1, .36, 1),
              visibility .25s;
}

/* Los dos sellos de la derecha sacan su nota hacia la izquierda, si no se
   salen del contenedor. */
.prx-sello--izquierda .prx-sello__nota {
  left: auto;
  right: calc(100% + 14px);
  transform: translateY(-50%) translateX(6px);
}

.prx-sello__nota strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  color: #171717;
}

.prx-sello__nota span {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: #737373;
}

.prx-sello__boton:hover + .prx-sello__nota,
.prx-sello__boton:focus-visible + .prx-sello__nota {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* texto que solo leen los lectores de pantalla */
.prx-vo {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .prx-sello__nota { max-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .prx-sello { transform: translate(-50%, -50%) !important; }
  .prx-hero__foto { transform: none !important; }
  .prx-sello__boton, .prx-sello__nota { transition-duration: .01ms; }
}

/* ===================================================================
   Entrada del hero.

     1. una cortina azul barre el fondo en horizontal
     2. el texto sube detras de una mascara, escalonado
     3. la foto aparece y los sellos entran con rebote

   Dos cosas que ya salieron mal una vez y por eso estan anotadas:

   a) TODO arranca despues de que la cortina termina, en el ms 1180.
      Antes el texto entraba en el 780 y la foto en el 1060, o sea por
      DEBAJO de la cortina: se veia la pagina quieta y luego todo ya puesto.

   b) Nada que la cortina deje encendido puede escribir transform sobre
      .prx-hero__foto ni sobre .prx-sello, porque una animacion que rellena
      le gana al transform en linea y mata el parallax del mouse. Por eso la
      foto anima SOLO opacidad, y los sellos usan backwards en vez de both:
      al terminar sueltan el control y vuelven a sus estilos de base.
   =================================================================== */

.et_pb_section_0 {
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --paso: 80ms;
  --t-cortina: 1100ms;
}

/* ---------- 1. la cortina ---------- */
.et_pb_section_0::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #001354;
  pointer-events: none;
  clip-path: inset(0 0 0 100%);
  animation: prx-barrido var(--t-cortina) var(--ease-in-out) 80ms backwards;
}

@keyframes prx-barrido {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}

/* ---------- 2. el texto, ya destapada la cortina ---------- */
.et_pb_section_0 .et_pb_text_0,
.et_pb_section_0 .et_pb_text_1,
.et_pb_section_0 .et_pb_button_0_wrapper { clip-path: inset(0 0 0 0); }

.et_pb_section_0 .et_pb_text_0 .et_pb_text_inner,
.et_pb_section_0 .et_pb_text_1 .et_pb_text_inner,
.et_pb_section_0 .et_pb_button_0_wrapper .et_pb_button {
  animation: prx-sube 620ms var(--ease-smooth-out) backwards;
}

.et_pb_section_0 .et_pb_text_0 .et_pb_text_inner { animation-delay: 1200ms; }
.et_pb_section_0 .et_pb_text_1 .et_pb_text_inner { animation-delay: calc(1200ms + var(--paso)); }
.et_pb_section_0 .et_pb_button_0_wrapper .et_pb_button { animation-delay: calc(1200ms + var(--paso) * 2); }

@keyframes prx-sube {
  from { opacity: 0; transform: translateY(110%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 3. la foto y los sellos ---------- */
/* solo opacidad: el transform es del parallax y no se toca */
.et_pb_section_0 .prx-hero__foto {
  animation: prx-aparece 620ms var(--ease-smooth-out) 1500ms backwards;
}

@keyframes prx-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.et_pb_section_0 .prx-sello {
  animation: prx-pop 520ms var(--ease-bounce) backwards;
}

.et_pb_section_0 .prx-sello--safety        { animation-delay: 1800ms; }
.et_pb_section_0 .prx-sello--customization { animation-delay: calc(1800ms + var(--paso)); }
.et_pb_section_0 .prx-sello--durability    { animation-delay: calc(1800ms + var(--paso) * 2); }

@keyframes prx-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Divi trae su propio fade en estos modulos y pelea con lo de arriba. */
.et_pb_section_0 .et_pb_text_0,
.et_pb_section_0 .et_pb_text_1,
.et_pb_section_0 .et_pb_code_0 { animation: none !important; opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .et_pb_section_0::after { display: none; }
  .et_pb_section_0 .et_pb_text_0 .et_pb_text_inner,
  .et_pb_section_0 .et_pb_text_1 .et_pb_text_inner,
  .et_pb_section_0 .et_pb_button_0_wrapper .et_pb_button,
  .et_pb_section_0 .prx-hero__foto,
  .et_pb_section_0 .prx-sello { animation: none !important; }
}