/*
Theme Name: VProgram
Theme URI: https://www.vprogram.cl
Author: Álvaro de Dios
Author URI: https://tusitio.com
Template: astra
Description: Un tema de WordPress hecho desde cero con Bootstrap 5
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: subtheme
*/
    /*
       Mejoras tipografia
       */
       .custom-main {
           background-color:#F8F9FA;
            display: block;
            width: 100%;
            padding: 0;
            margin: 0 auto;
        }

       h1 {
       font-size: 3.5rem;
       font-weight: 700;
       }
       h2 {
       font-size: 2.5rem;
       font-weight: 600;
       }
       h3 {
       font-size: 1.8rem;
       font-weight: 600;
       }
       p, li {
       font-size: 1rem;
       font-weight: 400;
       }
       .hero {
       position: relative;
       background: url('https://vprogram.cl/wp-content/uploads/2025/09/personalizada_red.jpg') top/cover no-repeat;
       color: #E287C9;
       text-align: center;
       padding: 120px 20px;
       }
       /* Overlay */
       .hero::before {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(to bottom right, rgba(0,0,0,0.8), rgba(0,0,0,0.4));
       }
       /* Aseguramos que el texto esté por encima */
       .hero h1 {
       position: relative;
       z-index: 1;
       background: linear-gradient(90deg, #E287C9, #6366F1);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       }
       .hero p,
       .hero a {
       position: relative;
       z-index: 1;
       }
       .highlight {
       color: #E287C9;
       font-weight: bold;
       margin-left: 4px;
       }
       .price-card {
       border-radius: 16px;
       box-shadow: 0 6px 20px rgba(0,0,0,0.08);
       border: 1px solid #F3F4F6;
       transition: all 0.3s ease;
       position: relative;
       }
       .price-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 12px 30px rgba(0,0,0,0.12);
       }
       .price-card.popular::before {
       content: "⭐ Más Popular";
       position: absolute;
       top: -12px;
       left: 50%;
       transform: translateX(-50%);
       background: #6366F1;
       color: white;
       padding: 4px 12px;
       font-size: 0.9rem;
       border-radius: 12px;
       }
       .btn-custom {
       background: linear-gradient(45deg, #E287C9, #6366F1);
       color: white;
       border: none;
       border-radius: 50px;
       padding: 12px 24px;
       font-weight: 600;
       transition: transform 0.2s ease, box-shadow 0.2s ease;
       }
       .btn-custom:hover {
       transform: translateY(-3px);
       box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
       }
       /*Estilos descripcion*/
       .description-box {
       background: #ffffff; /* gris claro */
       border-left: 5px solid #E287C9;
       padding: 30px;
       border-radius: 8px;
       margin-top: 30px;
       }
       .description-box h3 {
       font-weight: bold;
       margin-bottom: 20px;
       position: relative;
       display: inline-block;
       }
       .description-box h3::after {
       content: "";
       display: block;
       width: 60%;
       height: 3px;
       background: #E287C9;
       margin: 8px auto 0;
       }
       .description-box ul {
       list-style: none;
       padding: 0;
       }
       .description-box ul li {
       font-size: 1.1rem;
       margin-bottom: 12px;
       display: flex;
       align-items: center;
       }
       .description-box ul li::before {
       content: "✔";
       color: #E287C9;
       font-weight: bold;
       margin-right: 10px;
       font-size: 1.3rem;
       }
       
       /*Semana de ejemplo*/
       /* WEEK ACCORDION STYLES */
    .week-accordion .accordion-button {
      background: #fff;
      font-weight: 600;
      font-size: 1.05rem;
      padding: 1rem 1.25rem;
      border-radius: 12px !important;
      color: #374151;
      transition: all 0.3s ease;
      box-shadow: none;
    }
    
    /* Hover */
    .week-accordion .accordion-button:hover {
      background-color: #f9fafb;
      color: #E287C9;
    }
    
    /* Estado abierto */
    .week-accordion .accordion-button:not(.collapsed) {
      background-color: #fff;
      color: #E287C9;
      border-bottom: 2px solid #E287C9;
      box-shadow: none;
    }
    
    /* Icono al inicio */
    .week-accordion .accordion-button i {
      color: #6B7280;
      transition: color 0.3s ease;
    }
    .week-accordion .accordion-button:not(.collapsed) i {
      color: #E287C9;
    }
    
    /* Chevron */
    .week-accordion .accordion-button::after {
      font-family: "Bootstrap Icons";
      content: "\f282"; /* bi-chevron-down */
      background-image: none !important;
      font-size: 1rem;
      margin-left: auto;
      transition: transform 0.3s ease, color 0.3s ease;
      color: #6B7280;
    }
    .week-accordion .accordion-button:not(.collapsed)::after {
      transform: rotate(180deg);
      color: #E287C9;
    }
    
    /* Body */
    .week-accordion .accordion-body {
      background: #fff;
      border-top: 1px solid #f3f4f6;
      font-size: 0.9rem;
      line-height: 1.6;
      padding: 1rem 1.25rem;
      border-radius: 0 0 12px 12px;
      color: #6B7280;
      font-family: monospace; /* estilo cuaderno */
      white-space: pre-wrap;
    }
    
    
       /*Sección pasos*/
       /* Step cards */
       .step-card {
       background: #fff;
       border-radius: 16px;
       box-shadow: 0 6px 18px rgba(0,0,0,0.08);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       }
       .step-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 12px 28px rgba(0,0,0,0.12);
       }
       /* Icon wrapper (círculo de color) */
       .icon-wrapper {
       width: 70px;
       height: 70px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       font-size: 1.8rem;
       box-shadow: 0 4px 12px rgba(0,0,0,0.15);
       }
       /* Botón CTA */
       .btn-custom {
       background: linear-gradient(45deg, #E287C9, #6366F1);
       color: white;
       border: none;
       border-radius: 50px;
       padding: 14px 32px;
       font-weight: 600;
       transition: all 0.3s ease;
       }
       .btn-custom:hover {
       transform: translateY(-3px);
       box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
       color: #fff;
       }
       
       /* FAQ Section */
    /* Botones FAQ */
    .accordion-button {
      background: #fff;
      font-weight: 600;
      font-size: 1.05rem;
      padding: 1rem 1.25rem;
      border-radius: 12px !important;
      color: #374151; /* gris neutro */
      transition: all 0.3s ease;
      box-shadow: none;
    }
    
    /* Hover */
    .accordion-button:hover {
      background-color: #f9fafb;
      color: #E287C9;
    }
    
    /* Estado abierto */
    .accordion-button:not(.collapsed) {
      background-color: #fff;
      color: #E287C9;
      border-bottom: 2px solid #E287C9;
      box-shadow: none;
    }
    
    /* Icono flecha */
    .accordion-button::after {
      font-family: "Bootstrap Icons";
      content: "\f282"; /* bi-chevron-down */
      background-image: none !important;
      font-size: 1rem;
      margin-left: auto;
      transition: transform 0.3s ease;
      color: #6B7280;
    }
    
    .accordion-button:not(.collapsed)::after {
      transform: rotate(180deg);
      color: #E287C9;
    }
    
    /* Body */
    .accordion-body {
      background: #fff;
      border-top: 1px solid #f3f4f6;
      font-size: 0.95rem;
      line-height: 1.6;
      padding: 1rem 1.25rem;
      border-radius: 0 0 12px 12px;
      color: #6B7280;
    }
    
    
    /* Icono de pregunta */
    .faq-icon {
      color: #6B7280;              /* gris suave por defecto */
      transition: color 0.3s ease;
    }
    
    /* Cuando el item está abierto, el icono se pone rosa */
    .accordion-button:not(.collapsed) .faq-icon {
      color: #E287C9;
    }
    
    /* Conservamos tu estilo minimalista: subrayado rosa al abrir */
    .accordion-button:not(.collapsed) {
      background-color: #fff;
      color: #E287C9;
      border-bottom: 2px solid #E287C9;
    }
    
    /* Chevron sin azul ni negro fuerte */
    .accordion-button::after {
      font-family: "Bootstrap Icons";
      content: "\f282"; /* bi-chevron-down */
      background-image: none !important;
      color: #6B7280;
      transition: transform 0.3s ease, color 0.3s ease;
    }
    .accordion-button:not(.collapsed)::after {
      transform: rotate(180deg);
      color: #E287C9;
    }