/* =========================================================
   PATYTA — GUÍAS 8 CARDS UNIFICADAS R29
========================================================= */

/* ---------------------------------------------------------
   CARD
--------------------------------------------------------- */

html body.patyta-guides-editorial-r2 .pg2-card {
  position:relative !important;
  overflow:hidden !important;
  min-height:463px !important;
}

/*
 * La imagen y el botón siempre deben quedar debajo/encima
 * respectivamente, sin depender de overrides históricos.
 */
html body.patyta-guides-editorial-r2 .pg2-card__copy {
  position:relative !important;
  z-index:5 !important;
}

/* ---------------------------------------------------------
   ÁREA VISUAL DE IMAGEN
   Misma geometría para TODAS las cards.
--------------------------------------------------------- */

html body.patyta-guides-editorial-r2 .pg2-card__media {
  position:relative !important;

  flex:0 0 275px !important;
  height:275px !important;
  min-height:275px !important;

  width:calc(100% + 34px) !important;
  margin:
    auto -17px 0 !important;

  padding:0 !important;

  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;

  border-radius:0 !important;
  overflow:hidden !important;

  background:transparent !important;
  isolation:isolate !important;
}

/*
 * REGLA CLAVE:
 * escalamos por ALTURA.
 *
 * Las R27 son verticales (1122×1402).
 * Las R28 son horizontales (1672×941).
 *
 * width:auto hace que ambas familias conserven su proporción
 * y height:139% consigue la presencia visual que ya aprobamos.
 */
html body.patyta-guides-editorial-r2 .pg2-card__media img {
  display:block !important;

  width:auto !important;
  max-width:none !important;
  height:105% !important;
  max-height:none !important;

  margin:0 auto !important;
  padding:0 !important;

  object-fit:contain !important;
  object-position:center bottom !important;

  background:transparent !important;

  position:relative !important;
  z-index:2 !important;

  transform:translateY(8px) !important;
}

/* ---------------------------------------------------------
   FONDOS ORGÁNICOS — PRIMERAS 4
--------------------------------------------------------- */

html body.patyta-guides-editorial-r2
.pg2-card[href="/guias/limpiar-orejas-perro/"] .pg2-card__media {
  background:
    radial-gradient(52% 43% at 48% 92%, #FFF5DD 0 72%, transparent 73%),
    radial-gradient(23% 23% at 81% 47%, #C4F5B4 0 78%, transparent 79%),
    radial-gradient(12% 12% at 90% 72%, #F5CED6 0 84%, transparent 85%) !important;
}

html body.patyta-guides-editorial-r2
.pg2-card[href="/guias/cambiar-alimento-gradualmente/"] .pg2-card__media {
  background:
    radial-gradient(19% 19% at 72% 52%, #F9DA69 0 80%, transparent 81%),
    radial-gradient(22% 22% at 86% 36%, #A6E7BE 0 80%, transparent 81%),
    radial-gradient(51% 44% at 31% 90%, #FFF5DD 0 72%, transparent 73%) !important;
}

html body.patyta-guides-editorial-r2
.pg2-card[href="/guias/gato-activo-en-casa/"] .pg2-card__media {
  background:
    radial-gradient(45% 40% at 34% 86%, #FFF5DD 0 72%, transparent 73%),
    radial-gradient(18% 18% at 75% 58%, #FFB2B1 0 80%, transparent 81%),
    linear-gradient(to top, rgba(191,223,193,.72) 0 16%, transparent 16% 100%) !important;
}

html body.patyta-guides-editorial-r2
.pg2-card[href="/guias/zona-de-descanso-limpia/"] .pg2-card__media {
  background:
    radial-gradient(56% 38% at 55% 92%, #FFF5DD 0 72%, transparent 73%),
    radial-gradient(23% 23% at 84% 50%, #C4F5B4 0 78%, transparent 79%) !important;
}

/* ---------------------------------------------------------
   FONDOS ORGÁNICOS — NUEVAS 4
--------------------------------------------------------- */

html body.patyta-guides-editorial-r2
.pg2-card[href="/guias/premios-sin-excederse/"] .pg2-card__media {
  background:
    radial-gradient(54% 43% at 42% 94%, #FFF5DD 0 72%, transparent 73%),
    radial-gradient(23% 23% at 82% 42%, #ACDCF2 0 78%, transparent 79%),
    radial-gradient(12% 12% at 91% 72%, #F5CED6 0 84%, transparent 85%) !important;
}

html body.patyta-guides-editorial-r2
.pg2-card[href="/guias/cuidados-segun-etapa-de-vida/"] .pg2-card__media {
  background:
    radial-gradient(49% 43% at 42% 92%, #FFF5DD 0 72%, transparent 73%),
    radial-gradient(22% 22% at 82% 40%, #ACDCF2 0 78%, transparent 79%),
    radial-gradient(16% 16% at 12% 34%, #C4F5B4 0 80%, transparent 81%) !important;
}

html body.patyta-guides-editorial-r2
.pg2-card[href="/guias/cambios-de-conducta/"] .pg2-card__media {
  background:
    radial-gradient(48% 42% at 38% 92%, #FFF5DD 0 72%, transparent 73%),
    radial-gradient(21% 21% at 82% 43%, #ACDCF2 0 78%, transparent 79%),
    radial-gradient(16% 16% at 13% 36%, #C4F5B4 0 80%, transparent 81%) !important;
}

html body.patyta-guides-editorial-r2
.pg2-card[href="/guias/revision-rutinaria-en-casa/"] .pg2-card__media {
  background:
    radial-gradient(52% 43% at 43% 93%, #FFF5DD 0 72%, transparent 73%),
    radial-gradient(23% 23% at 83% 43%, #ACDCF2 0 78%, transparent 79%),
    radial-gradient(16% 16% at 12% 36%, #C4F5B4 0 80%, transparent 81%) !important;
}

/* ---------------------------------------------------------
   CTA — SIEMPRE VISIBLE
--------------------------------------------------------- */

html body.patyta-guides-editorial-r2 .pg2-card .pg2-card__cta {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  position:absolute !important;
  left:18px !important;
  right:auto !important;
  bottom:16px !important;

  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:34px !important;

  margin:0 !important;
  padding:0 14px !important;

  border-radius:999px !important;

  background:var(--card-cta-bg) !important;
  color:var(--card-cta-ink) !important;

  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;

  opacity:1 !important;
  visibility:visible !important;

  z-index:30 !important;
  pointer-events:none !important;

  transform:none !important;
}

/* ---------------------------------------------------------
   MÓVIL
--------------------------------------------------------- */

@media(max-width:780px) {
  html body.patyta-guides-editorial-r2 .pg2-card__media {
    flex-basis:250px !important;
    height:250px !important;
    min-height:250px !important;

    width:calc(100% + 24px) !important;
    margin-left:-12px !important;
    margin-right:-12px !important;
  }

  html body.patyta-guides-editorial-r2 .pg2-card__media img {
    height:139% !important;
    width:auto !important;
    transform:translateY(6px) !important;
  }

  html body.patyta-guides-editorial-r2 .pg2-card .pg2-card__cta {
    left:16px !important;
    bottom:14px !important;
    min-height:34px !important;
    padding:0 13px !important;
  }
}

/* =========================================================
   PATYTA GUIAS R29A — R28 IMAGE TUNING
   Ajuste visual confirmado:
   width 114% / height 121% / top -32px
========================================================= */

html body.patyta-guides-editorial-r2
.pg2-card__media img[src*="-r28.png"] {
  display:block !important;
  max-width:none !important;
  width:114% !important;
  height:121% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  padding:0 !important;
  margin:0 auto !important;
  background:transparent !important;
  position:relative !important;
  z-index:2 !important;
  top:-32px !important;
  transform:none !important;
}