/*
 * "Te lo mejoramos": robot de la portada, encima del precio de cada ficha.
 *
 * Reutiliza los mismos recursos que el banner de la home
 * (robot-body-v14.png, robot-clean-v13.png y pantera-logo-chest-v14.png),
 * pero con clases y fotogramas propios con prefijo `prm-`/`prm`, para no
 * depender de banner-pantera-vXX.css ni chocar con el si algun dia
 * coinciden en la misma pagina.
 *
 * Se carga solo en la ficha de producto, con <link> propio en head.tpl.
 */

.prm {
  position: relative;
  display: flex;
  /* flex-end: el robot apoya su base en la del bloque y todo lo que sobra
     de alto se va hacia arriba, nunca hacia abajo, que es donde esta el
     precio. */
  align-items: flex-end;
  gap: 10px;
  /* Margenes negativos: el bloque se ensancha mas alla de la columna del
     precio para que quepa el robot grande sin comerse el texto. */
  margin: 6px -14px 16px -24px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

/* Robot */
.prm__bot {
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 1122 / 1402;
  overflow: visible;
  /* Todo el exceso de alto sale hacia arriba: margen inferior cero para no
     invadir el precio, y margen superior negativo para que el bloque no
     crezca. El izquierdo negativo lo saca de la columna. */
  margin: -100px -6px 0 -34px;
  filter: drop-shadow(0 8px 14px rgba(15, 42, 82, .22));
  animation: prmFloat 5.6s ease-in-out infinite;
}
.prm__head { transform-box: view-box; transform-origin: 570px 785px; animation: prmHead 5.4s ease-in-out infinite; }
.prm__arm  { transform-box: view-box; transform-origin: 350px 910px; animation: prmWave 6s ease-in-out infinite; }
.prm__blush { animation: prmBlush 6s ease-in-out infinite; }

/* Texto */
.prm__txt { min-width: 0; }
.prm__kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #df002d;
  line-height: 1.2;
}
.prm__title {
  display: block;
  font-size: 31px;
  font-weight: 800;
  color: #0f2a52;
  line-height: 1.12;
}
.prm__sub {
  display: block;
  font-size: 23px;
  font-weight: 800;
  color: #1766cc;
  line-height: 1.2;
}

/* Llamada a la accion */
.prm__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #25d366;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  animation: prmPulse 3s ease-out infinite;
}
.prm__cta:hover { background: #1faa52; }
.prm__cta svg { width: 16px; height: 16px; fill: currentColor; }

@keyframes prmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes prmHead  { 0%, 100% { transform: rotate(0); } 24% { transform: rotate(-3deg); } 45%, 58% { transform: rotate(3deg); } 78% { transform: rotate(-1deg); } }
@keyframes prmWave  { 0%, 12%, 88%, 100% { transform: rotate(0); } 28%, 54% { transform: rotate(15deg); } 41%, 66% { transform: rotate(-7deg); } 78% { transform: rotate(7deg); } }
@keyframes prmBlush { 0%, 18%, 86%, 100% { opacity: .3; } 30%, 66% { opacity: 1; } }
@keyframes prmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
  70%  { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 768px) {
  .prm { gap: 8px; margin: 4px -8px 14px -10px; }
  .prm__bot { width: 152px; margin: -72px -4px 0 -22px; }
  .prm__kicker { font-size: 11px; }
  .prm__title { font-size: 24px; }
  .prm__sub { font-size: 18px; }
  .prm__cta { font-size: 13px; padding: 7px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .prm__bot, .prm__head, .prm__arm, .prm__blush, .prm__cta { animation: none !important; }
  .prm__blush { opacity: .45; }
}

/*
 * El boton tiene que sobrevivir al veto de WhatsApp en movil.
 *
 * Hay dos reglas que ocultan en movil, con !important, todo `a[href*="wa.me"]`:
 * una en app-mobile-product.css y otra en un <style> incrustado en el pie.
 * Las dos son `a[href*="wa.me"]`, es decir un elemento y un atributo. Este
 * selector suma dos clases y un atributo, asi que gana por especificidad sin
 * necesidad de recurrir a un id.
 *
 * El veto sigue en pie para el resto: aqui solo se salva este boton, que es
 * la llamada a la accion de la propia ficha.
 */
@media (max-width: 768px) {
  .prm .prm__cta[href*="wa.me"] {
    display: inline-flex !important;
  }
}

/*
 * Bloque de confianza (modulo blockreassurance) en movil: solo iconos.
 *
 * En movil sus cuatro celdas se estiraban a 103 x 177 px cada una, con el
 * texto partido letra a letra, y una de ellas venia vacia. Se dejan como
 * una fila de iconos: el texto se oculta y la celda vacia tambien.
 *
 * Los onclick que llevan a WhatsApp y al telefono estan en el contenedor de
 * cada celda, no en el texto, asi que siguen funcionando al tocar el icono.
 */
@media (max-width: 768px) {
  .blockreassurance_product {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: nowrap;
    margin: 10px 0 14px;
    padding: 0;
  }
  .blockreassurance_product > div {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-align: center;
  }
  /* Celda sin icono ni texto: fuera. */
  .blockreassurance_product > div:not(:has(img)) {
    display: none !important;
  }
  .blockreassurance_product .item-product {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .blockreassurance_product .item-product img {
    width: 40px !important;
    height: 40px !important;
    max-width: none !important;
    object-fit: contain;
    display: block;
  }
  .blockreassurance_product .block-title,
  .blockreassurance_product p {
    display: none !important;
  }
}