/* === EP Financieras Wrapper — diseño unificado === */
.ep-fin-wrapper{display:block;width:100%;margin:2rem 0 1rem 0;padding:2.25rem 1.25rem 1.25rem;background:#f4f7fb;border:1px solid #d9e3f1;border-radius:1rem;box-sizing:border-box;position:relative}
.ep-fin-header{position:absolute;top:-14px;left:50%;transform:translateX(-50%);margin:0;display:inline-flex;justify-content:center;align-items:center;text-align:center;z-index:2}
.ep-fin-title{font-family:"Montserrat",sans-serif;font-weight:600;font-size:.72rem;color:#fff;background:#0a2f87;text-transform:uppercase;letter-spacing:.04em;padding:5px 11px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px rgba(10,47,135,.25)}
.ep-fin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;align-items:stretch}
.ep-fin-footer{margin-top:.75rem;font-size:.7rem;color:#8895ad;text-align:center}

/* Tarjeta base - idéntica para las 3 */
.ep-fin-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:2px solid #d9e3f1;border-radius:.75rem;padding:1.1rem .65rem .65rem;min-height:auto;box-sizing:border-box;transition:border-color .25s ease}

/* Medalla */
.ep-fin-card .ep-fin-medal{position:absolute;top:-12px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;color:#fff;background:#888}
.ep-fin-card .ep-fin-medal-icon{display:none}

/* Icono medalla SVG inline (trofeo simplificado) */

/* Rankings: oro, plata, bronce */
/* Borde de cada tarjeta segun la financiera (color corporativo) */
.ep-fin-card[data-financiera="cetelem"]{border-color:#1F6B3A;box-shadow:0 4px 14px rgba(31,107,58,.12)}
.ep-fin-card[data-financiera="alma"]{border-color:#FA5022;box-shadow:0 4px 14px rgba(250,80,34,.15)}
.ep-fin-card[data-financiera="sequra"]{border-color:#3FA853;box-shadow:0 4px 14px rgba(63,168,83,.12)}
/* Medalla con color de la financiera (no del ranking) */
.ep-fin-card[data-financiera="cetelem"] .ep-fin-medal{background:#1F6B3A;color:#fff}
.ep-fin-card[data-financiera="alma"] .ep-fin-medal{background:#FA5022;color:#fff}
.ep-fin-card[data-financiera="sequra"] .ep-fin-medal{background:#3FA853;color:#fff}

/* Contenido tarjeta */
.ep-fin-card .ep-fin-logo{font-family:"Montserrat",sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.08em;color:#0a2f87;height:24px;display:flex;align-items:center;justify-content:center;margin-top:4px}
.ep-fin-card .ep-fin-cuota-wrap{margin-top:.6rem;line-height:1;display:inline-flex;align-items:baseline;justify-content:center;gap:.15rem;flex-wrap:nowrap}
.ep-fin-card .ep-fin-cuota-value{font-size:1.6rem;font-weight:700;color:#0a2f87;font-family:"Montserrat",sans-serif}
.ep-fin-card .ep-fin-cuota-unit{font-size:.85rem;color:#6b7a93;margin-left:.15rem}
.ep-fin-card .ep-fin-meses{margin-top:.25rem;font-size:.78rem;color:#6b7a93}

/* Estado no disponible */
.ep-fin-card .ep-fin-unavailable-msg{display:none;font-size:.78rem;color:#888;font-style:italic;margin:1rem 0;flex:1;align-items:center;justify-content:center}
.ep-fin-card.ep-fin-unavailable{display:none !important}

/* Host oculto para los widgets nativos (los necesitamos vivos para extraer datos) */
.ep-fin-host{position:absolute;left:-99999px;top:0;width:300px;height:auto;overflow:hidden;pointer-events:none}

/* Loading skeleton */

/* Mobile: 1 columna */
/* Movil + tablet vertical: SIEMPRE 1 columna apilada (cualquier nº de financieras) */
@media (max-width:991px){
  .ep-fin-grid,
  .ep-fin-grid.ep-fin-grid--n1,
  .ep-fin-grid.ep-fin-grid--n2,
  .ep-fin-grid.ep-fin-grid--n3{grid-template-columns:1fr !important;gap:1rem !important;justify-content:stretch !important}
  .ep-fin-card{min-height:auto;padding:1rem .65rem .7rem}
  .ep-fin-card .ep-fin-cuota-value{font-size:1.5rem}
}

/* Ocultar widgets sequra nativos fuera de nuestro wrapper (evita duplicado al lado del precio) */
body#product .product-prices .sequra-promotion-widget,
body#product .product-prices .Sequra__PromotionalWidgetWrapper{ display:none !important }

/* === Ocultar renders nativos de alma y sequra en cualquier parte de la ficha
   (excepto dentro de nuestro wrapper, que los necesita para fallback DOM) === */
/* Ocultar widgets nativos por defecto (incluye cetelem, evita flash en primer paint) */
body#product .alma-pp-container,
body#product [id^="alma-installments-"],
body#product .sequra-promotion-widget,
body#product .Sequra__PromotionalWidgetWrapper,
body#product .ep-financing-card--cetelem{
  display:none !important;
}
/* Excepción: dentro del host del wrapper sí deben renderizar para que el SDK funcione */
body#product #ep-financieras-wrapper .ep-fin-host .alma-pp-container,
body#product #ep-financieras-wrapper .ep-fin-host [id^="alma-installments-"],
body#product #ep-financieras-wrapper .ep-fin-host .sequra-promotion-widget,
body#product #ep-financieras-wrapper .ep-fin-host .Sequra__PromotionalWidgetWrapper,
body#product #ep-financieras-wrapper .ep-fin-host .ep-financing-card--cetelem{
  display:block !important;
}

/* === TOGGLE "Ver detalles" === */
.ep-fin-card .ep-fin-toggle{margin-top:.6rem;width:100%;display:flex;align-items:center;justify-content:center;gap:.35rem;background:transparent;border:1px solid #d9e3f1;color:#0a2f87;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:.45rem .6rem;border-radius:.35rem;cursor:pointer;transition:background .15s,color .15s}
@media (hover:hover){.ep-fin-card .ep-fin-toggle:hover{background:#0a2f87;color:#fff;border-color:#0a2f87}}
.ep-fin-card .ep-fin-toggle:focus{outline:none}
.ep-fin-card .ep-fin-toggle:focus:not(:focus-visible){background:transparent;color:#0a2f87;border-color:#d9e3f1}
.ep-fin-card .ep-fin-toggle-arrow{font-size:.6rem;transition:transform .2s}
.ep-fin-card .ep-fin-toggle[aria-expanded="true"] .ep-fin-toggle-arrow{transform:rotate(180deg)}

/* === Detalles desplegables === */
.ep-fin-card .ep-fin-details{width:100%;margin-top:.55rem;padding:.55rem .65rem;background:#f4f7fb;border-radius:.4rem;text-align:left}
.ep-fin-card .ep-fin-details[hidden]{display:none}
.ep-fin-card .ep-fin-details dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.18rem .75rem}
.ep-fin-card .ep-fin-details dt{font-size:.7rem;color:#6b7a93;font-weight:500;margin:0}
.ep-fin-card .ep-fin-details dd{font-size:.72rem;color:#0a2f87;font-weight:600;margin:0;text-align:right}

/* === Perk badge (ventaja por financiera) === */
.ep-fin-card .ep-fin-perk{display:inline-flex;align-items:center;gap:.3rem;margin:.3rem 0 .1rem;padding:3px 9px;border-radius:999px;background:#e8f0ff;color:#0a2f87;font-size:.65rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;white-space:nowrap}
.ep-fin-card .ep-fin-perk-icon{font-size:.75rem;line-height:1}
.ep-fin-card[data-financiera="cetelem"] .ep-fin-perk{background:#fff3e0;color:#7a4a00}
.ep-fin-card[data-financiera="alma"] .ep-fin-perk{background:#e8f0ff;color:#0a2f87}
.ep-fin-card[data-financiera="sequra"] .ep-fin-perk{background:#e7f7ec;color:#0d5c2a}
.ep-fin-card.ep-fin-unavailable .ep-fin-perk{display:none}

/* === Resaltar "Sin intereses" === */
.ep-fin-card .ep-fin-d-tin .ep-fin-free{color:#0d5c2a;font-weight:700;letter-spacing:.01em}

/* === Layout adaptativo según nº de financieras disponibles === */
/* Solo 2 disponibles: 2 columnas centradas */
.ep-fin-grid.ep-fin-grid--n2{grid-template-columns:repeat(2,minmax(0,320px));justify-content:center}
/* Solo 1 disponible: 1 columna centrada */
.ep-fin-grid.ep-fin-grid--n1{grid-template-columns:minmax(0,360px);justify-content:center}
/* Ninguna disponible: ocultar wrapper completo */
.ep-fin-wrapper.ep-fin-empty{display:none !important}


/* === Loader central "Cargando financieras..." mientras carga === */
.ep-fin-loader{display:none;align-items:center;justify-content:center;gap:.5rem;padding:2.5rem 1rem;color:#0a2f87;font-size:.9rem;font-weight:600;letter-spacing:.02em}
.ep-fin-wrapper.ep-fin-loading .ep-fin-loader{display:flex}
.ep-fin-wrapper.ep-fin-loading .ep-fin-grid{display:none}

/* Tres puntitos animados */
.ep-fin-loader-dots{display:inline-flex;gap:4px;margin-left:.2rem}
.ep-fin-loader-dots span{width:6px;height:6px;border-radius:50%;background:#0a2f87;display:inline-block;animation:ep-fin-bounce 1.2s infinite ease-in-out both}
.ep-fin-loader-dots span:nth-child(1){animation-delay:-.32s}
.ep-fin-loader-dots span:nth-child(2){animation-delay:-.16s}
@keyframes ep-fin-bounce{0%,80%,100%{transform:scale(.4);opacity:.4}40%{transform:scale(1);opacity:1}}

/* Fade-in suave de las tarjetas cuando deja de estar loading */
.ep-fin-wrapper:not(.ep-fin-loading) .ep-fin-grid{animation:ep-fin-fadein .3s ease-in}
@keyframes ep-fin-fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Nota extra (comisión Sequra) */
/* .ep-fin-extra deprecated (la comision ahora se muestra como icono ⓘ junto a la cuota) */
.ep-fin-card .ep-fin-extra{display:none}

/* === Icono ⓘ con tooltip al lado de la cuota (Sequra: comisión) === */
.ep-fin-card .ep-fin-info{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  margin-left:4px;padding:0;
  background:transparent;border:0;
  color:#8895ad;font-size:1rem;line-height:1;
  cursor:pointer;position:relative;z-index:60;
  vertical-align:middle;
  transition:color .15s ease;
  -webkit-tap-highlight-color:transparent
}
.ep-fin-card .ep-fin-info:hover,
.ep-fin-card .ep-fin-info.open,
.ep-fin-card .ep-fin-info:focus-visible{color:#0a2f87;outline:none}

/* Tooltip via ::after sobre el icono */
.ep-fin-card .ep-fin-info::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  right:-8px;transform:translateY(4px);
  background:#1a2438;color:#fff;
  padding:.45rem .65rem;border-radius:.35rem;
  font-size:.7rem;font-weight:500;line-height:1.3;letter-spacing:.01em;
  text-transform:none;white-space:normal;
  width:max-content;max-width:200px;
  text-align:center;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:50;
  box-shadow:0 4px 14px rgba(0,0,0,.18)
}

/* Flechita del tooltip */
.ep-fin-card .ep-fin-info::before{
  content:'';
  position:absolute;
  bottom:calc(100% + 2px);
  right:8px;transform:translateY(4px);
  border:6px solid transparent;border-top-color:#1a2438;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:50
}

/* Mostrar tooltip: hover desktop (only with cursor) o .open (movil tras tap) */
@media (hover:hover){
  .ep-fin-card .ep-fin-info:hover::after,
  .ep-fin-card .ep-fin-info:hover::before{opacity:1;visibility:visible;transform:translateY(0)}
}
.ep-fin-card .ep-fin-info.open::after,
.ep-fin-card .ep-fin-info.open::before{opacity:1;visibility:visible;transform:translateY(0)}

/* Ocultar temporalmente el icono ⓘ de comisión Sequra (cambio de planes) */
.ep-fin-card .ep-fin-info{display:none !important}

/* === Test: ocultar botón Ver detalles y mostrar siempre los details === */
.ep-fin-card .ep-fin-toggle{display:none !important}
.ep-fin-card .ep-fin-details[hidden]{display:block !important}
.ep-fin-card .ep-fin-details{display:block !important;margin-top:.6rem}