/* =====================================================
   RINKO – Hoja de estilos optimizada v4.6.10 (RELEASE)
   -----------------------------------------------------
   • Imágenes con altura máxima uniforme y margen interno
   • box-sizing: content-box evita que el padding consuma
     parte del alto asignado a la imagen
   • Sin JS – layout estable, tarjetas sin deformación
   ===================================================== */

/* ---------- VARIABLES ---------- */
:root{
  --rinko-card-bg:#fff;
  --rinko-card-radius:1rem;
  --rinko-card-shadow:0 0.25rem 0.75rem rgba(0,0,0,.06);
  --rinko-card-shadow-hover:0 0.5rem 1rem rgba(0,0,0,.12);
  --rinko-gap:0.3rem;
  --rinko-transition:.18s cubic-bezier(.4,0,.2,1);
  --rinko-accent:#cc4b1f;
  --rinko-accent-dark:#a83b19;
  --rinko-font-xs:clamp(.72rem,.74rem + .1vw,.8rem);
  --rinko-font-sm:clamp(.82rem,.84rem + .15vw,.9rem);

  --rinko-img-height: 15rem;   /* nuevo: alto fijo para desktop */
}

/* ---------- BASE ---------- */
html{scroll-behavior:smooth;font-size:16px}
body{
  margin:0;background:#fff;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ---------- LOOP HORIZONTAL ---------- */
.elementor-loop-container.elementor-grid{
  display:flex!important;flex-wrap:nowrap!important;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  gap:var(--rinko-gap);padding:.5rem 0;scrollbar-width:none;align-items:stretch;
}
.elementor-loop-container.elementor-grid::-webkit-scrollbar{display:none}

/* ---------- COLUMNAS ---------- */
.columna-rinko{
  display:flex;flex-direction:column;gap:var(--rinko-gap);
  flex:0 0 auto;height:100%;
}

/* ---------- TARJETA ---------- */
.columna-rinko .e-loop-item{
  display:flex;flex-direction:column;align-items:stretch;
  width:17rem;max-width:100%;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
.tarjeta-rinko{
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:.5rem;
  padding:1rem;background:var(--rinko-card-bg);
  border-radius:var(--rinko-card-radius);box-shadow:var(--rinko-card-shadow);
  overflow:hidden;text-align:center;height:100%;
}
.tarjeta-rinko:hover,
.tarjeta-rinko:focus-within{
  transform:translateY(-.125rem);box-shadow:var(--rinko-card-shadow-hover);
}

/* ---------- IMAGEN AJUSTADA SIN RECORTE ---------- */
.tarjeta-rinko .elementor-widget-image{
  width:100%;
  height:var(--rinko-img-height);   /* ? antes era max-height */
  display:flex;align-items:center;justify-content:center;
  padding:.4rem;
  box-sizing:content-box;
  flex-shrink:0;
  overflow:hidden;                  /* se mantiene por seguridad */
}
.tarjeta-rinko .elementor-widget-image img{
  width:100%;                       /* ? ocupa todo el ancho disponible */
  height:100%;                      /* ? ocupa todo el alto fijo */
  object-fit:contain;               /* ? nada se corta */
  display:block;
}

/* ---------- CONTENIDO RESTANTE ---------- */
.contenido-tarjeta{
  flex:1 1 auto;width:100%;
  display:flex;flex-direction:column;align-items:center;
}

/* ---------- TÍTULO ---------- */
.tarjeta-rinko h3,
.tarjeta-rinko .elementor-heading-title {
  margin: 0;
  font-size: .75rem;
  line-height: 1.25;
  min-height: 3.75rem;  /* 0.9375rem × 4 líneas */
}

/* ---------- MOBILE (<48rem) ---------- */
@media (max-width:48rem){
  :root{ --rinko-img-height: 7rem; } /* ? alto fijo para móvil */

  .columna-rinko .e-loop-item{width:10rem;}

  .tarjeta-rinko{padding:.35rem;}

  .tarjeta-rinko h3,
  .tarjeta-rinko .elementor-heading-title{font-size:.8rem;}

  .tarjeta-rinko .elementor-widget-image{
    padding:.2rem;          /* margen interior balanceado en móvil */
  }
}

/* ---------- ENTRADA SUAVE ---------- */
.tarjeta-rinko{
  opacity:0;transform:translateY(.625rem);
  transition:opacity .4s ease,transform .4s ease;
}
.tarjeta-rinko.visible{
  opacity:1;transform:translateY(0);
}
@media (max-width:48rem){
  .tarjeta-rinko{
    transition:opacity .18s ease,transform .18s ease;
  }
}