:root {
      /* Colores del sitio original */
      --color-primary: #cc7700;
      --color-yellow: #ffc107;
      --color-red: #dc3545;
      --color-dark: #1a1d29;
      --color-dark-light: #2a2d3a;
      --color-gray: #6c757d;
      --color-light-gray: #e9ecef;
      --color-white: #ffffff;
      
      --brand-yellow: #FDC400;
      --brand-orange: #FF682C;
      --brand-red: #DE040B;
      --brand-blue: #004F9F;
      --brand-black: #3C3C3B;
      --brand-white: #E9E4E3;
      --g-border-w: 10px; /* grosor del borde degradado */

      /* Tipografía */
      --font-primary: 'Montserrat', sans-serif;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-primary);
      background-color: #f8f9fa;
      color: var(--color-dark);
      line-height: 1.6;
    }

    ::selection {
      background-color: var(--color-yellow);
      color: var(--color-dark);
    }
    
    html {
      scroll-behavior: smooth;
    }

    .text-gradient-orange {

    background: linear-gradient(135deg, var(--brand-yellow) 30%, var(--brand-orange) 50%, var(--brand-red) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    
      .text-gradient-unidos {

    background: linear-gradient(90deg, var(--brand-red), var(--brand-orange), var(--brand-yellow), var(--brand-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }

    /* HERO SECTION */
    .hero-section {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: linear-gradient(135deg, var(--color-primary) 0%, #004494 100%);
    }

    .hero-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .hero-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      opacity: 0.9;
    }

    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, 
        rgba(250, 117, 35, 0.85) 0%,
        rgba(0, 68, 148, 0.9) 100%);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* Botones */
    .btn-primary-custom {
      background-color: var(--color-yellow);
      color: var(--color-dark);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 14px 32px;
      border: none;
      border-radius: 50px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
    }

    .btn-primary-custom:hover {
      background-color: #ffca28;
      color: var(--color-dark);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 193, 7, 0.5);
    }

    .btn-outline-light-custom {
      color: var(--color-white);
      border: 2px solid var(--color-white);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 14px 32px;
      border-radius: 50px;
      background: transparent;
      transition: all 0.3s ease;
    }

    .btn-outline-light-custom:hover {
      background-color: var(--color-white);
      color: var(--color-primary);
      border-color: var(--color-white);
    }
    
    /* Separator */
    .separator {
      width: 300px;
      height: 8px;
      background: linear-gradient(90deg, var(--brand-red), var(--brand-orange), var(--brand-yellow), var(--brand-blue));
      margin: 2rem auto;
      border-radius: 10px;
    }

    /* Stats cards */
    .stats-container {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      padding: 30px;
    }

    .stat-item {
      text-align: center;
    }

    .stat-number {
      font-size: 3rem;
      font-weight: 900;
      color: var(--color-yellow);
      line-height: 1;
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 600;
    }

    /* Cards de comparación */
    .comparison-card {
      background: var(--color-white);
      border-radius: 16px;
      padding: 40px;
      height: 100%;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .comparison-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .comparison-card.negative {
      border-left: 4px solid var(--color-dark-light);
    }

    .comparison-card.positive {
      border-left: 4px solid var(--color-primary);
    }

    .badge-custom {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 50px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 20px;
    }

    .badge-negative {
      background-color: rgba(212, 212, 212, 0.8);
      color: var(--color-dark-light);
    }

    .badge-positive {
      background-color: rgba(0, 102, 204, 0.1);
      color: var(--color-primary);
    }

    /* Feature boxes */
    .feature-box {
      background: var(--color-white);
      border-radius: 12px;
      padding: 30px;
      height: 100%;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
    }

    .feature-box:hover {
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      transform: translateY(-3px);
    }

    .feature-title {
      color: var(--color-primary);
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
    }

  

    /* Animaciones */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .reveal.active {
      opacity: 1;
      transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    /* Secciones */
    section {
      padding: 80px 0;
    }

    .section-title {
      font-size: 2.5rem;
      font-weight: 900;
      margin-bottom: 20px;
      color: var(--color-dark);
    }

    .section-subtitle {
      font-size: 1.1rem;
      color: var(--color-gray);
      max-width: 700px;
      margin: 0 auto 50px;
    }

    .bg-light-section {
      background-color: #f8f9fa;
    }

    .bg-dark-section {
      background-color: var(--color-dark);
      color: var(--color-white);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .hero-section {
        min-height: 85vh;
      }

        font-size: 2rem;
      }

      .stat-number {
      .section-title {
        font-size: 2.5rem;
      }

      section {
        padding: 60px 0;
      }

      .comparison-card,
      .feature-box,
      .testimonial-card {
        padding: 25px;
      }
    }

    /* Footer */
    footer {
      background-color: var(--color-dark);
      color: rgba(255, 255, 255, 0.7);
      padding: 50px 0 30px;
    }

    footer a {
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      transition: color 0.3s ease;
    }

    footer a:hover {
      color: var(--color-yellow);
    }

    .social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }

    .social-link:hover {
      background: var(--color-yellow);
      color: var(--color-dark) !important;
    }

    /* Comparador interactivo */
    .comparator-tabs {
      background: rgba(0, 102, 204, 0.1);
      border-radius: 50px;
      padding: 6px;
      display: flex;
      gap: 6px;
    }

    .comparator-tab {
      flex: 1;
      padding: 12px 20px;
      border: none;
      background: transparent;
      border-radius: 50px;
      font-weight: 700;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--color-dark);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .comparator-tab.active {
      background: var(--color-primary);
      color: var(--color-white);
      box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
    }

    .comparator-content {
      margin-top: 25px;
      transition: opacity 0.3s ease;
    }

    .comparison-item {
      background: rgba(0, 102, 204, 0.05);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 12px;
      border-left: 3px solid var(--color-primary);
    }
    /* In your CSS file (e.g., style.css) */
   .extra-bold-heading {
    font-weight: 900;
   }
   /* Estilo de los botones de opción */
.btn-choice {
    background-color: var(--color-light-gray);
    color: var(--color-dark);
    font-weight: 600;
    border: 2px solid var(--color-light-gray);
    transition: all 0.2s ease;
    text-align: left; /* Para que el texto se vea bien */
}

.btn-choice:hover {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    transform: none; /* Evitar el transform que tiene btn-primary-custom */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


/* Contenedor del resultado (encapsulado) */
#quiz-result {
  display: none;           /* se muestra al final */
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
  transition: .3s ease;
  background: var(--color-white);
  color: var(--color-dark);
  border: 4px solid var(--color-light-gray);
}

/* Tema SÁNCHEZ */
#quiz-result.result-sanchez{
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-yellow);
}

/* Tema JALDO (SIN afectar el resto del sitio) */
#quiz-result.result-jaldo{
  background-color: #f8f8f8;
  color: #444;
  border-color: #aaa;
}

/* Si querés B&N, aplicalo SOLO a una caja interna opcional del resultado */
#quiz-result.result-jaldo .result-visual{
  filter: grayscale(80%);
}

/* Empate (neutral) */
#quiz-result.result-empate{
  background-color: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-light-gray);
}

/* ===== Testimoniales ===== */
        
        /* Tarjeta base (coherente con tu UI actual) */
        .testimonial-card{
          background: var(--color-white);
          color: var(--color-dark);
          border-radius: 16px;
          padding: 20px;
          height: 100%;
          box-shadow: 0 10px 30px rgba(0,0,0,0.1);
          transition: transform .3s ease;
        }
        .testimonial-card:hover{ transform: translateY(-4px); }
        
        /* Contenedor de imagen con recorte inferior irregular */
        .image-wrapper{
          position: relative;
          height: 300px;
          width: 100%;
          overflow: hidden;
          background: #eef2f6; /* suave; podés cambiarlo por var(--color-light-gray) si preferís */
          isolation: isolate;
        }
        .image-wrapper img{
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center;
          display: block;
          transform: scale(0.9);
        }
        
        /* Curva inferior usando SVG (la “tapa” toma color del body de la tarjeta) */
        .svg-divider{
          position: absolute;
          bottom: -1px;
          left: 0;
          width: 100%;
          height: 80px;
          z-index: 2;
          display: block;
          color: var(--color-white); /* relleno del path -> color del cuerpo de la tarjeta */
          pointer-events: none;
        }
        .svg-divider path{ fill: currentColor; }
        
        /* Cuerpo y jerarquías de texto: aprovechamos tus estilos globales */
        .testimonial-card .card-title{
          font-weight: 800; /* consistente con .extra-bold-heading */
          margin-bottom: .25rem;
        }
        .testimonial-card .card-subtitle{
          font-size: .9rem;
          font-weight: 700;
          color: var(--color-primary);
          margin-bottom: .75rem;
        }
        .testimonial-card .card-text{
          color: var(--color-gray);
          font-size: .95rem;
          line-height: 1.55;
          
        }
        
        /* aplicalo sumando .gphoto-border a .image-wrapper */
        .image-wrapper.gphoto-border::before{
          content: "";
          position: absolute; inset: 0;
          padding: var(--g-border-w);
          background: linear-gradient(90deg,var(--brand-red),var(--brand-orange),var(--brand-yellow),var(--brand-blue));
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask-composite: xor; mask-composite: exclude;
          pointer-events: none; z-index: 1; border-radius: 0;
        }
        /* ocultamos el borde inferior para no “pelear” con la curva SVG */
        .image-wrapper.gphoto-border::after{
          content:"";
          position:absolute; left:0; right:0; bottom:-1px;
          height: calc(var(--g-border-w) + 10px);
          background: var(--color-white);
          z-index:3; pointer-events:none;
        }
        
        /* Asegurar capas correctas */
        .svg-divider{ z-index: 2; }
        .testimonial-card .card-body{ position: relative; z-index: 4; padding-top: 1.25rem; }
        
        /* Responsive fino: podés ajustar la altura si querés otra proporción en mobile */
        @media (max-width: 576px){
          .image-wrapper{ height: 240px; }
        }