/* ==========================================================================
   Sección Ahorro (Bootstrap) — estilos solo para la home
   Aplica sobre el último HTML entregado (con clases Bootstrap)
   ========================================================================== */

   #ahorro {
    --ah-radius-2xl: 1.25rem;              /* ~20px */
    --ah-shadow-sm: 0 4px 14px rgba(16,24,40,.06);
    --ah-shadow-md: 0 10px 30px rgba(16,24,40,.08);
    --ah-ring: 1px solid rgba(2, 6, 23, 0.06);
    --ah-slate-50: #f8fafc;
    --ah-slate-100: #f1f5f9;
    --ah-slate-300: #cbd5e1;
    --ah-slate-600: #475569;
    --ah-slate-900: #0f172a;
    --ah-sky-50: #eef9ff;
    --ah-sky-100: #dff3ff;
    --ah-sky-500: #22a6f2;
    --ah-sky-600: #0ea5e9;
    --ah-emerald-50: #ecfdf5;
    --ah-emerald-700: #047857;
  }
  
  /* Fondo suave tipo Tailwind */
  #ahorro {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--ah-sky-50) 0%, #fff 48%);
  }
  
  /* ---------- Cabecera ---------- */
  #ahorro .badge.text-bg-info-subtle {
    background: rgba(34,166,242,.15) !important;
    color: #0b6ea9 !important;
    border: var(--ah-ring);
    box-shadow: 0 1px 0 rgba(2,6,23,.02) inset;
  }
  #ahorro h2 {
    color: var(--ah-slate-900);
    letter-spacing: -.01em;
  }
  #ahorro .text-muted {
    color: var(--text-muted) !important;
  }
  
  /* ===== Toggle Perro/Gato — estilo pill con gradiente y ring ===== */
#ahorro .btn-group.toggle-pet {
    gap: .5rem;                         /* separación entre botones */
    padding: 5px;
    border: 1px solid lightgrey;
    border-radius: 2em;
    background-color: white;
  }
  
  #ahorro .btn-group.toggle-pet .btn {
    border-radius: 9999px !important;   /* pill */
    padding: .625rem 1.1rem;
    /* border: 1px solid rgba(2,6,23,.12); */
    background: #fff;
    color: #334155;                     /* slate-700 */
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: all .18s ease;
    /* box-shadow: 0 1px 0 rgba(2,6,23,.01) inset; */
  }
  
  #ahorro .btn-group.toggle-pet .btn svg {
    width: 18px; height: 18px;
    margin-right: .5rem;
  }
  
  #ahorro .btn-group.toggle-pet .btn:hover:not(.active) {
    color: #0f172a;                     /* slate-900 */
    /* border-color: rgba(2,6,23,.2); */
  }
  
  /* Estado activo: gradiente + ring azul + texto/iconos blancos */
  #ahorro .btn-group.toggle-pet .btn.active,
  #ahorro .btn-group.toggle-pet .btn.active:focus {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #348eac, #42b5d0);
    /* box-shadow:
      0 2px 12px rgb(55 149 179), 
      0 0 0 1px rgba(30, 102, 255, .10) */
  }
  
  #ahorro .btn-group.toggle-pet .btn.active svg {
    color: currentColor;                /* icono blanco */
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.25));
  }
  
  /* Enfoque accesible */
  #ahorro .btn-group.toggle-pet .btn:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 3px rgba(30,102,255,.20),
      0 0 0 6px rgba(30,102,255,.10);
  }
  
  
  /* ---------- Cards comparativa ---------- */
  #ahorro .card {
    border-radius: var(--ah-radius-2xl);
    border: var(--ah-ring);
    box-shadow: var(--ah-shadow-sm);
    overflow: hidden;
  }
  #ahorro .card-header,
  #ahorro .card-footer {
    padding: 1rem 1.25rem;
  }
  #ahorro .card-header {
    background: #fff;
    border-bottom: 1px solid rgba(2,6,23,.06);
  }
  #ahorro .card-footer {
    background: #f8fafc;
    border-top: 1px solid rgba(2,6,23,.06);
  }
  #ahorro .card .h3,
  #ahorro .card h3 {
    font-weight: 600;
  }
  #ahorro .card .plan{
    color: var(--primary-dark) !important;
  }
  #ahorro .card .noplan{
    color: var(--text-red-dark) !important;
  }

  
  /* Totales (bloque derecho del header) */
  #ahorro .card-header .text-uppercase {
    letter-spacing: .08em;
  }
  
  /* ---------- Listas de servicios ---------- */
  #ahorro .list-group-item {
      padding: 1.25rem 2rem;
      border-color: rgba(2,6,23,.06);
    }
  #ahorro .list-group-item svg{
    width: 16px;
    height: auto;
    margin-right: 10px;
    color: var(--text-muted);
  }
  #ahorro .list-group-plan .list-group-item svg{
    color: green;
  }
  #ahorro .list-group-item strong {
    color: var(--ah-slate-900);
    font-weight: 700;
  }
  #ahorro .list-group-item .unlimited {
    font-weight: 600;
  }
  #ahorro .badge.bg-success-subtle,
  #ahorro .text-success-emphasis {
    --bs-success-rgb: 4,120,87;
  }
  #ahorro .bg-success-subtle {
    background-color: var(--ah-emerald-50) !important;
    border: 1px solid rgba(4,120,87,.08);
  }
  #ahorro .text-success-emphasis {
    color: var(--ah-emerald-700) !important;
    font-weight: 700;
  }
  
  /* ---------- Botón “19,9 €/mes” ---------- */
  #ahorro .badge.rounded-pill.text-bg-info-subtle {
    border-radius: 9999px;
    font-weight: 700;
  }
  
  /* ---------- Banda de ahorro (gradient) ---------- */
  /* #ahorro .bg-sky-gradient {
    border-radius: var(--ah-radius-2xl);
    background: linear-gradient(90deg, var(--ah-sky-600), var(--ah-sky-500));
    box-shadow: var(--ah-shadow-md);
  } */
  
  /* ---------- Tooltip circular “i” (Bootstrap tooltip hook) ---------- */
  #ahorro [data-bs-toggle="tooltip"]{
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; margin-left:.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(2,6,23,.15);
    background:#fff; color:#6c757d; font-weight:700; font-size:12px; line-height:18px;
    transition: all .2s ease;
  }
  #ahorro [data-bs-toggle="tooltip"]:hover{
    color: var(--bs-primary);
    border-color: var(--bs-primary);
  }
  
  /* ---------- Ajustes responsive ---------- */
  @media (min-width: 992px) {
    #ahorro { padding: 5rem 0; }
  }
  



  /* ===== Bloque Ahorro anual — estilo Tailwind-like sobre Bootstrap ===== */
  #ahorro .ah-ribbon__inner{
    background: linear-gradient(133deg, #3593b0, #7dbcd0);
    color: var(--text-light) !important;
    border-radius:1.25rem;                                   /* rounded-2xl */
    padding:1.5rem;                                          /* p-6 */
    box-shadow:0 10px 30px rgba(16,24,40,.18);               /* shadow-md */
    text-align:left;
  }
  #ahorro .ah-ribbon__inner p,
  #ahorro .ah-ribbon__inner h3{
    color: var(--text-light) !important;
  }
  @media (min-width: 992px){
    #ahorro .ah-ribbon__inner{ padding:2rem; }               /* md:p-8 */
  }

  #ahorro .ah-ribbon__eyebrow{
    opacity:.9;
    font-size:.875rem;                                       /* text-sm */
  }

  #ahorro .ah-ribbon__title{
    font-weight:800;                                         /* font-extrabold */
    font-size:1.5rem;                                        /* text-2xl */
    letter-spacing:-.01em;
  }
  @media (min-width: 992px){
    #ahorro .ah-ribbon__title{ font-size:1.75rem; }          /* md:text-3xl */
  }

  #ahorro .ah-ribbon__underline{
    text-decoration:underline;
    text-underline-offset:4px;                               /* underline-offset-4 */
    text-decoration-color:rgba(255,255,255,.6);              /* decoration-white/60 */
  }

  #ahorro .ah-ribbon__hint{ opacity:.92; }

  #ahorro .ah-ribbon__cta{
    background:#fff; color:#0ea5e9;                          /* bg-white text-sky-700 */
    box-shadow:0 2px 6px rgba(2,6,23,.12);
    align-self:stretch;
  }
  @media (min-width: 992px){
    #ahorro .ah-ribbon__cta{ align-self:initial; }
  }
  #ahorro .ah-ribbon__cta:hover{
    background:#fff; color:#0a8bc6;
    transform:translateY(-1px);
  }