/*EMBLEMAS LOS PASTOS*/
.sol-hero-deco {
            position: absolute;
            top: 6%;
            right: 5%;
            width: clamp(70px, 10vw, 140px);
            height: auto;
            z-index: 15; /* por encima de la imagen, por debajo/junto al texto */
            opacity: 0.55;
            pointer-events: none;
        }
        @media (max-width: 768px) {
            .sol-hero-deco { top: 4%; right: 4%; width: 56px; opacity: 0.45; }
        }

/* Contenedor principal con el aro y el fondo hundido */
    .emblema-marco {
      width: 120px;
      height: 120px;
      background: var(--dorado-oscuro);
      border-radius: 50%;
      border: 2px solid var(--dorado-claro);
      z-index: 15;
      opacity: 0.55;
      top: 65%;
      left: 5%;
      
      /* Sombras profundas para el efecto tridimensional */
      box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.9),              /* Sombra en el fondo del sitio */
        inset 10px 12px 22px rgba(0, 0, 0, 0.75),    /* Sombra interna del marco (hundimiento) */
        inset -4px -4px 10px rgba(255, 255, 255, 0.2); /* Brillo metálico superior */
      
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;

      /* ANIMACIÓN DE ROTACIÓN SUAVE */
      animation: giroSuaveDerecha 40s linear infinite;
      
      /* Optimización de hardware para que el giro sea 100% fluido y sin temblores */
      will-change: transform;
    }
     
    @media (max-width: 768px) {
    .emblema-marco { top: 65%; right: 4%; width: 60px; height: 60px; opacity: 0.35; }
    }

    /* Definición del giro hacia la derecha (en las manecillas del reloj) */
    @keyframes giroSuaveDerecha {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .geometria-sol {
      width: 86%;
      height: 86%;
    }

    /* Sombreado realista que se proyecta debajo de cada pieza geométrica */
    .capa-sombra {
      filter: drop-shadow(8px 10px 7px var(--sombra-3d));
    }

    /* Bordes (reemplazando el plata por un dorado claro reluciente) */
    .borde-dorado {
      stroke: var(--dorado-claro);
      stroke-width: 8px;
      stroke-linejoin: miter;
      stroke-miterlimit: 10;
    }

    .estrella {
      fill: var(--dorado-medio);
    }

    .cuadrado {
      fill: var(--dorado-intenso);
    }        
        
        /* ---- VALORES: TARJETAS CON VOLTEO ---- */
        .valores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espacio-3); }
        .valor-card {
            perspective: 1200px;
            -webkit-perspective: 1200px;
            height: 200px; background: none; border: none; padding: 0;
            font-family: inherit; cursor: pointer; text-align: left;
        }
        .valor-card__inner {
            /* FIX (bug real, no de servidor): esto es un <span>, que por defecto
               es "display: inline". width/height al 100% NO se aplican en
               elementos inline — la tarjeta colapsaba a tamaño cero y por eso
               "no se mostraba" y el clic no parecía hacer nada. */
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 550ms cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
        }
        .valor-card.volteada .valor-card__inner { transform: rotateY(180deg); }
        .valor-card__cara {
            position: absolute; inset: 0;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; /* FIX: sin esto, Safari/iOS puede no ocultar la cara trasera */
            border-radius: var(--radio-md); padding: var(--espacio-3);
            display: flex; flex-direction: column;
        }
        .valor-card__frente {
            background: var(--verde-300); border: 1px solid var(--color-borde);
            box-shadow: var(--sombra-sm); justify-content: space-between;
        }
        .valor-card__reverso {
            background: var(--morado-600); color: var(--blanco);
            transform: rotateY(180deg); justify-content: center;
        }
        .valor-card__icono {
            width: 40px; height: 40px; display: grid; place-items: center;
            border-radius: var(--radio-sm); background: var(--morado-100); color: var(--morado-600);
        }
        .valor-card__icono svg { width: 20px; height: 20px; }
        .valor-card__frente h3 { font-size: var(--texto-lg); margin: 0; }
        .valor-card__pista { font-size: var(--texto-xs); color: var(--color-texto-suave); display: flex; align-items: center; gap: 0.3rem; }
        .valor-card__reverso p { font-size: var(--texto-sm); line-height: var(--interlineado-normal); margin: 0; }
        .valor-card:focus-visible .valor-card__cara { outline: 2px solid var(--color-foco); outline-offset: 2px; }

                /* ---- IMPACTO EN NUMEROS ---- */
        .impacto { background: var(--morado-900); color: var(--blanco); padding: var(--espacio-6) 1.5rem; }
        .impacto-grid {
            max-width: var(--ancho-maximo); margin: 0 auto;
            display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: var(--espacio-4); text-align: center;
        }
        .stat-numero {
            display: block; font-family: var(--fuente-titulo); font-size: var(--texto-4xl);
            font-weight: 700; color: var(--oro-500); line-height: 1;
        }
        .stat-etiqueta { display: block; margin-top: 0.5rem; font-size: var(--texto-sm); color: var(--morado-100); }