.enarmango-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.enarmango-form input[type="text"],
.enarmango-form textarea,
.enarmango-form select {
   width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    box-sizing: border-box;
 }
 .enarmango-form .enarmango-form-row {
    margin-bottom: 15px;
 }
   .enarmango-explicacion-editor {
      border: 1px solid #ddd !important;
     padding: 5px;
    box-sizing: border-box;

}


.simulador-caso-clinico p:empty {
    display: none;
}

.simulador-respuestas li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.simulador-respuestas input[type="radio"] {
    display: none; /* Ocultamos el radio button */
}

.simulador-respuestas label {
    display: block;
    width: 100%;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.simulador-respuestas label:hover {
    border-color: #0073aa; /* Cambia a un color más visible al pasar el mouse */
}

.simulador-respuestas input[type="radio"]:checked + label {
    border-color: #4caf50; /* Cambia a verde cuando está seleccionado */
    background-color: #f0fff0; /* Un color de fondo sutil para destacar */
}

.simulador-navegacion {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.simulador-navegacion .button {
    padding: 10px 20px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.simulador-navegacion .button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

#simulador-temporizador {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#barra-progreso-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #e0e0e0;
    z-index: 9999;
}

#barra-progreso {
    height: 100%;
    width: 0%;
    background-color: #4caf50; /* Color de progreso */
    transition: width 0.2s ease-in-out;
}

#progress-bar {
    transition: width 0.3s ease-in-out;
}

/* Icono del índice */
    #icono-indice {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 1000;
    }
    #btn-indice {
        font-size: 20px;
        padding: 10px;
        border: none;
        background-color: #0073aa;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
    }

    /* Menú lateral */
    .menu-lateral-oculto {
        position: fixed;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100%;
        background-color: #f9f9f9;
        border-left: 2px solid #0073aa;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
        padding: 20px;
        z-index: 999;
        transition: right 0.3s ease;
    }

    .menu-lateral-visible {
        right: 0;
    }

    #lista-preguntas-no-respondidas {
        list-style: none;
        padding: 0;
        margin: 20px 0;
    }

    #lista-preguntas-no-respondidas li {
        margin-bottom: 10px;
    }

    #lista-preguntas-no-respondidas li a {
        color: #0073aa;
        text-decoration: none;
        font-weight: bold;
    }
    
    
    
    /* Resultados del simulador */
    
    .opcion-correcta {
       color: green;
       font-weight: bold;
       /* o borde: 1px solid green; etc. */
    }
    .opcion-incorrecta {
       color: red;
       font-weight: bold;
    }
    .explicacion {
       margin: 1em 0;
       padding: 1em;
       border: 1px solid #fff;
       background: #fafafa;
    }
    
    
    
    .switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4CAF50;
}

input:checked + .slider:before {
  transform: translateX(14px);
}

/*** Reusltados ***/

.circle-wrapper {
  display: inline-block;
  width: 120px; 
  height: 120px;
  margin: 1em auto;
  position: relative;
  text-align: center;
}
.circular-chart {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}
.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}
.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke: #4caf50; /* Color del trazo del progreso */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray 1s ease-out;
}
.percentage {
  font-size: 0.7em;
  text-anchor: middle;
  fill: #333;
  font-weight: bold;
  dominant-baseline: middle;
}

  /* Contenedor para alinear las "tarjetas" verticalmente */
  .score-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    max-width: 350px; /* Ajusta según tu gusto o diseño */
    margin: 1em auto; /* Centrar horizontalmente */
  }

  /* Cada tarjeta individual */
  .score-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 0.8em 1em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Sombra suave */
  }

  .score-label {
    font-weight: 500; /* Un poco más destacada */
    color: #444;
  }

  .score-value {
    font-weight: 600; /* Más énfasis en el valor */
    color: #555;
  }

  /* Ejemplo: Colorear números correctos/incorrectos si quieres un matiz de color extra */
  .score-value.correctas {
    color: green;
  }
  .score-value.incorrectas {
    color: red;
  }
  


/* =========================================== */
/* === Estilos Página de Contacto === */
/* =========================================== */
:root { /* Reutilizar variables si las tienes definidas globalmente */
    --landing-primary-color: #005073;
    --landing-secondary-color: #ff9800;
    --landing-text-color: #333;
    --landing-text-light: #555;
    --landing-border-color: #ced4da;
    --landing-input-focus-color: #80bdff;
    --landing-input-focus-shadow: rgba(0, 123, 255, 0.25);
    --landing-success-color: #155724;
    --landing-success-bg: #d4edda;
    --landing-success-border: #c3e6cb;
    --landing-error-color: #721c24;
    --landing-error-bg: #f8d7da;
    --landing-error-border: #f5c6cb;
}

.enarmango-contact-page {
    padding: 40px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--landing-text-color);
    line-height: 1.6;
}

.contact-container {
    max-width: 700px; /* Ancho del contenido principal */
    margin: 0 auto;
    padding: 0 15px;
}

.enarmango-contact-page h2 {
    text-align: center;
    font-size: 2em;
    font-weight: 600;
    color: var(--landing-primary-color);
    margin-top: 0;
    margin-bottom: 15px;
}

.contact-intro {
    text-align: center;
    color: var(--landing-text-light);
    margin-bottom: 40px;
    font-size: 1.05em;
}

.contact-form-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px 35px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

#enarmango-contact-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

#enarmango-contact-form .form-group {
    margin-bottom: 20px;
}

#enarmango-contact-form .form-label {
    display: block;
    font-weight: 500;
    color: #444;
    margin-bottom: 6px;
    font-size: 0.9em;
}

#enarmango-contact-form .form-label .required {
    color: #dc3545; /* Rojo para requerido */
    margin-left: 3px;
}

#enarmango-contact-form .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--landing-border-color);
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.5; /* Mejorar altura de línea */
}

#enarmango-contact-form .form-control:focus {
    border-color: var(--landing-input-focus-color);
    box-shadow: 0 0 0 0.2rem var(--landing-input-focus-shadow);
    outline: none;
}

#enarmango-contact-form textarea.form-control {
    min-height: 120px;
    resize: vertical; /* Permitir redimensionar verticalmente */
}

.form-submit-group {
    margin-top: 10px;
    text-align: center; /* Centrar botón */
}

/* Reutilizar estilo de botón primario de landing */
#contact-submit-btn {
    display: inline-block;
    padding: 12px 35px;
    border: none;
    border-radius: 25px;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    line-height: normal;
    background-color: var(--landing-secondary-color); /* Naranja */
    color: white !important;
}
#contact-submit-btn:hover {
    background-color: #fb8c00; /* Naranja oscuro */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}
#contact-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Spinner (reutilizar el que ya tienes) */
.spinner-small {
    width: 16px; height: 16px; border-width: 2px;
}

/* Área de respuesta */
.form-response {
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    font-size: 0.95em;
    text-align: center;
}
.form-response.success {
    color: var(--landing-success-color);
    background-color: var(--landing-success-bg);
    border: 1px solid var(--landing-success-border);
}
.form-response.error {
    color: var(--landing-error-color);
    background-color: var(--landing-error-bg);
    border: 1px solid var(--landing-error-border);
}

/* Contacto alternativo */
.alt-contact {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9em;
    color: var(--landing-text-light);
}
.alt-contact a {
    color: var(--landing-primary-color);
    text-decoration: none;
}
.alt-contact a:hover {
    text-decoration: underline;
}

/* --- Responsividad --- */
@media (max-width: 768px) {
    .enarmango-contact-page h2 { font-size: 1.7em; }
    .contact-intro { font-size: 1em; }
    .contact-form-card { padding: 20px; }
    #enarmango-contact-form .form-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        gap: 0; /* Sin gap horizontal */
    }
     /* Añadir espacio debajo de los campos nombre/email en móvil */
     #enarmango-contact-form .form-grid .form-group {
         margin-bottom: 15px;
     }
     #enarmango-contact-form .form-group { margin-bottom: 15px; }
     #contact-submit-btn { width: 100%; } /* Botón ancho completo */
}


/* assets/css/enarmango-frontend.css */

body.enarmango-active {
    /* --- Opción 1: Usar URL relativa si la imagen está cerca del CSS --- */
    background-image: url('../images/fondo-mobile.jpg');
    /* --- Opción 2: Dejar vacío si usas wp_add_inline_style (ver PHP arriba) --- */
    /* Si usaste wp_add_inline_style en PHP, no necesitas poner background-image aquí */

    /* --- Propiedades comunes del fondo --- */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Opcional: Efecto parallax */
    background-color: #f0f4f8; /* Fallback color */

    /* Importante: Asegurar que el contenido del *tema* no quede oculto */
    /* Puede que necesites ajustar el z-index o padding del contenido del tema */
}

/* --- ESTILOS PARA MEJORAR LEGIBILIDAD SOBRE EL FONDO --- */
/* ¡¡¡MUY IMPORTANTE!!! Necesitarás inspeccionar tu tema activo
   para encontrar los selectores correctos para el header, footer,
   área de contenido principal, barras laterales, etc.
   Estos son ejemplos genéricos, ¡AJÚSTALOS A TU TEMA! */

body.enarmango-active #page, /* Contenedor común en muchos temas */
body.enarmango-active .site-content, /* Contenedor de contenido común */
body.enarmango-active .content-area,
body.enarmango-active main.site-main,
body.enarmango-active .entry-content,
body.enarmango-active article, /* Podría afectar demasiado */
body.enarmango-active .widget-area .widget { /* Widgets de la barra lateral */
    /* Aplica un fondo semi-transparente a las áreas de contenido principales */
    /* background-color: rgba(255, 255, 255, 0.92); */ /* Prueba este */
    /* O un fondo sólido si la transparencia no funciona bien */
    /* background-color: #ffffff; */

    /* A veces es mejor solo aplicar a contenedores específicos */
    /* Quizás solo necesites esto en tus propias tarjetas: */
    /* background: none; */ /* Resetear fondos si heredan mal */
}

/* Aplica fondo a tus tarjetas específicas del plugin (si ya no lo haces en el shortcode) */
body.enarmango-active .enarmango-card,
body.enarmango-active .enarmango-resultados-container, /* Contenedor de resultados */
body.enarmango-active .enarmango-challenge-article { /* Contenedor del desafío */
    background-color: rgba(255, 255, 255, 0.94); /* Blanco un poco más opaco */
    border-radius: 8px; /* Mantener o añadir bordes redondeados */
    /* padding: 1.5em; */ /* Asegurar padding */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra opcional */
    border: none; /* Quitar borde si usas sombra */
    margin-bottom: 20px; /* Espacio entre elementos */
}

/* Asegurar colores de texto legibles si el tema no los maneja */
body.enarmango-active {
    color: #333; /* Color de texto base oscuro por defecto */
}
body.enarmango-active a {
    /* color: #0073aa; */ /* Color de enlace legible */
}
body.enarmango-active h1,
body.enarmango-active h2,
body.enarmango-active h3,
body.enarmango-active h4 {
     /* color: #1d2327; */ /* Color de encabezado oscuro */
     /* Puedes necesitar ajustar márgenes si el fondo afecta la separación visual */
}

/* --- FIN ESTILOS LEGIBILIDAD --- */


/*****PRECIOS******/

/* Contenedor general de la página */
.enarmango-precios-page {
    max-width: 900px; /* O el ancho que prefieras */
    margin: 20px auto;
    padding: 0 15px; /* Padding lateral */
}

/* Reutilizar estilos de sección de la landing si es posible */
.enarmango-precios-page .landing-section {
    padding: 40px 0;
    text-align: center;
}
.enarmango-precios-page .landing-container {
    max-width: 800px; /* Ancho del contenido dentro de la sección */
    margin: 0 auto;
}

/* Hero específico de precios */
.precios-hero h1 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 15px;
}
.precios-hero h2 {
    font-size: 1.6em;
    color: #005073; /* Azul ENARMango */
    margin-bottom: 20px;
    font-weight: 500;
}
.precios-hero .hero-subtitle {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Sección "Por qué Premium" */
.why-premium h2 {
    margin-bottom: 25px;
    color: #333;
}
.why-premium p {
    color: #555;
    margin-bottom: 30px;
    font-size: 1.1em;
}
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.benefits-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start; /* Alinear icono arriba */
    gap: 10px;
    font-size: 1.05em;
    color: #444;
}
.benefits-list .dashicons {
    color: #28a745; /* Verde */
    margin-top: 4px; /* Alinear verticalmente */
    flex-shrink: 0;
}

/* Bloque principal de detalles de precio */
.precios-details h2 {
    margin-bottom: 30px;
}
.pricing-box-detailed {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px 35px;
    text-align: left;
    max-width: 650px;
    margin: 0 auto;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}
.price-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.price-label {
    display: block;
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}
.price-tag-detailed {
    margin-bottom: 5px;
}
.price-amount {
    font-size: 3em; /* Precio grande */
    font-weight: 700;
    color: #005073; /* Azul */
}
.price-currency {
    font-size: 1.5em;
    color: #555;
    margin-left: 5px;
}
.price-duration-detailed {
    font-size: 1.1em;
    color: #666;
}
.price-duration-detailed strong {
    color: #333;
}

/* Promoción 2x1 destacada */
.price-promo-highlight {
    background-color: #fff3e0; /* Naranja pálido */
    border: 1px solid #ffe0b2; /* Naranja más claro */
    border-radius: 6px;
    padding: 15px 20px;
    margin-bottom: 30px;
    text-align: center;
}
.price-promo-highlight .dashicons {
    font-size: 1.5em;
    color: #ff9800; /* Naranja */
    margin-right: 8px;
    vertical-align: middle;
}
.price-promo-highlight strong {
    display: block;
    font-size: 1.2em;
    margin-bottom: 5px;
    color: #e65100; /* Naranja oscuro */
}
.price-promo-highlight p {
    margin-bottom: 0;
    color: #555;
    font-size: 1em;
}

/* Lista de características */
.features-title {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
    text-align: center;
}
.price-features-detailed {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    columns: 2; /* Mostrar en dos columnas si hay espacio */
    column-gap: 30px;
}
.price-features-detailed li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
    color: #444;
    /* Evitar que se rompa un item entre columnas */
    break-inside: avoid-column;
    page-break-inside: avoid;
}
.price-features-detailed .dashicons-yes {
    color: #28a745; /* Verde */
    font-size: 1.2em;
}

/* Área del botón de pago */
.price-cta-area {
    text-align: center;
    margin-top: 20px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}
.price-cta-main {
    /* Reutilizar landing-button-primary o definir */
    padding: 12px 35px !important; /* Botón principal más grande */
    font-size: 1.1em !important;
    font-weight: 600 !important;
}
.price-cta-main .dashicons {
    margin-right: 8px;
    vertical-align: text-bottom;
}
.login-required-notice {
    font-size: 0.9em;
    color: #777;
    margin-top: 15px;
}
.login-required-notice a {
    color: #0073aa;
    text-decoration: underline;
}

/* Detalles extra y pago seguro */
.price-promo-details {
    font-size: 0.85em;
    color: #777;
    margin-top: 20px;
    text-align: center;
}
.payment-info {
    font-size: 0.9em;
    color: #666;
    text-align: center;
    margin-top: 15px;
}
.payment-info .dashicons {
    color: #28a745;
    margin-right: 5px;
    vertical-align: middle;
}

/* Sección FAQ */
.faq-section h2 { margin-bottom: 30px; }
.faq-item {
    background: #fff;
    padding: 15px 20px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    text-align: left;
}
.faq-item h4 {
    margin: 0 0 8px 0;
    font-size: 1.1em;
    color: #333;
}
.faq-item p {
    margin: 0;
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
}
.faq-item a { color: #0073aa; }

/* Sección CTA Final */
.final-cta h2 { margin-bottom: 20px; }


/* Adaptaciones móviles */
@media (max-width: 768px) {
    .precios-hero h1 { font-size: 2em; }
    .precios-hero h2 { font-size: 1.3em; }
    .pricing-box-detailed { padding: 20px; }
    .price-features-detailed { columns: 1; } /* Una columna en móvil */
    .price-amount { font-size: 2.5em; }
    .price-currency { font-size: 1.2em; }
}


/*****FAQ***/

/* enarmango-faq.css o enarmango.css */

.enarmango-faq-page {
    max-width: 850px; /* Ancho general de la página FAQ */
    margin: 30px auto;
    padding: 0 15px;
}

/* Reutilizar contenedor si es consistente con otras páginas */
.enarmango-faq-page .landing-container {
    /* max-width: 800px; */ /* Ajustar si es necesario */
    /* margin: 0 auto; */
}

.enarmango-faq-page h1 {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 15px;
    color: #333;
}

.enarmango-faq-page .faq-intro {
    text-align: center;
    font-size: 1.15em;
    color: #555;
    margin-bottom: 40px;
}

.faq-list {
    margin-bottom: 40px;
}

.faq-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.faq-question { /* Estilo del <summary> */
    padding: 15px 20px;
    font-size: 1.1em;
    font-weight: 600;
    color: #005073; /* Azul ENARMango */
    cursor: pointer;
    position: relative; /* Para el marcador */
    list-style: none; /* Ocultar marcador por defecto si <details> lo añade */
    transition: background-color 0.2s ease;
}

.faq-question::-webkit-details-marker { display: none; } /* Ocultar marcador en Chrome/Safari */
.faq-question::marker { display: none; } /* Ocultar marcador estándar */

/* Icono para indicar expansión (ej. un + o una flecha) */
.faq-question::after {
    content: '+'; /* Icono '+' por defecto */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    font-weight: bold;
    color: #aaa;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Cambiar icono cuando está abierto */
.faq-item details[open] > .faq-question::after {
    content: '−'; /* Icono menos ('−' es diferente de '-') */
    transform: translateY(-50%); /* Podrías añadir rotación si usas flecha */
    color: #ff9800; /* Naranja cuando está abierto */
}

/* Hover sobre la pregunta */
.faq-question:hover {
    background-color: #f9f9f9;
}
.faq-question:hover::after {
    color: #777;
}

/* Contenedor de la respuesta */
.faq-answer {
    padding: 5px 20px 20px 20px; /* Padding abajo y a los lados, menos arriba */
    border-top: 1px solid #eee;
    background-color: #fff; /* Asegurar fondo blanco */
}

.faq-answer p {
    margin: 0 0 1em 0; /* Margen entre párrafos de la respuesta */
    font-size: 0.95em;
    line-height: 1.7;
    color: #444;
}
.faq-answer p:last-child {
    margin-bottom: 0;
}
.faq-answer a {
    color: #0073aa;
    text-decoration: underline;
}
.faq-answer a:hover {
    color: #005073;
}

/* Sección final de contacto */
.faq-contact-cta {
    text-align: center;
    margin-top: 40px;
    padding: 30px;
    background-color: #f0f8ff; /* Azul muy pálido */
    border-radius: 6px;
}
.faq-contact-cta p {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #333;
}

/* Ajustes móviles */
@media (max-width: 768px) {
    .enarmango-faq-page h1 { font-size: 1.8em; }
    .faq-question { padding: 12px 15px; font-size: 1em; }
    .faq-question::after { right: 15px; font-size: 1.2em; }
    .faq-answer { padding: 5px 15px 15px 15px; }
    .faq-answer p { font-size: 0.9em; }
}

/*****COMO FUNCIONA****/

/* enarmango-como-funciona.css o enarmango.css */

.enarmango-como-funciona-page {
    max-width: 850px;
    margin: 30px auto;
    padding: 0 15px;
}

/* Reutilizar contenedor si es consistente */
.enarmango-como-funciona-page .landing-container {
    /* max-width: 800px; */
    /* margin: 0 auto; */
}

.enarmango-como-funciona-page h1 {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 15px;
    color: #333;
}

.enarmango-como-funciona-page .page-intro {
    text-align: center;
    font-size: 1.15em;
    color: #555;
    margin-bottom: 50px; /* Más espacio antes de la primera sección */
}

/* Estilo de cada sección */
.how-it-works-section {
    padding: 40px 25px;
    margin-bottom: 30px;
    border-radius: 8px;
    background-color: #fff; /* Fondo blanco por defecto */
    border: 1px solid #eee;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    text-align: center; /* Centrar contenido de la sección */
}

.how-it-works-section.alternate-bg {
    background-color: #f8f9fa; /* Fondo gris claro alternado */
    border-color: #f1f1f1;
}

.how-it-works-section .section-icon {
    font-size: 2.5em; /* Icono grande */
    color: #ff9800; /* Naranja */
    margin-bottom: 15px;
    display: block; /* Asegurar que esté en su línea */
}
.how-it-works-section.alternate-bg .section-icon {
     color: #0073aa; /* Azul en secciones alternas */
}


.how-it-works-section h2 {
    font-size: 1.6em;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
}

.how-it-works-section p { /* Párrafo introductorio de la sección */
    font-size: 1.05em;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 650px; /* Limitar ancho del párrafo */
    margin-left: auto;
    margin-right: auto;
}

/* Estilo de las listas de pasos */
.steps-list {
    list-style: none; /* Quitar viñetas por defecto */
    padding-left: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Ancho de la lista */
    text-align: left; /* Alinear texto de pasos a la izquierda */
    counter-reset: steps-counter; /* Iniciar contador para <ol> */
    margin-bottom: 30px;
}

.steps-list li {
    position: relative;
    margin-bottom: 15px;
    padding-left: 35px; /* Espacio para el número/viñeta */
    font-size: 1em;
    line-height: 1.6;
    color: #444;
}

/* Estilo para listas ordenadas (<ol>) con números */
.steps-list ol > li::before, /* Corregir si usas ol directamente */
ol.steps-list > li::before {
    counter-increment: steps-counter;
    content: counter(steps-counter);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #ff9800; /* Círculo naranja */
    color: white;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 0.85em;
}
/* Cambiar color del número en secciones alternas */
.alternate-bg ol.steps-list > li::before {
    background-color: #0073aa; /* Azul */
}


/* Estilo para listas no ordenadas (<ul>) con viñetas */
.steps-list ul > li, /* Corregir si usas ul directamente */
ul.steps-list.bullet-list > li {
     padding-left: 25px; /* Espacio diferente para viñeta */
}
ul.steps-list.bullet-list > li::before {
    content: '•'; /* Viñeta redonda */
    position: absolute;
    left: 0;
    top: 0px; /* Ajustar posición vertical */
    color: #ff9800; /* Naranja */
    font-size: 1.5em; /* Tamaño de la viñeta */
    line-height: 1;
}
/* Cambiar color de viñeta en secciones alternas */
.alternate-bg ul.steps-list.bullet-list > li::before {
     color: #0073aa; /* Azul */
}

/* Estilo para listas anidadas (como en resultados) */
.steps-list ul ul {
    list-style: disc; /* Viñeta estándar */
    margin-top: 10px;
    padding-left: 25px; /* Indentación normal */
}
.steps-list ul ul li {
    padding-left: 0; /* Resetear padding para viñeta estándar */
    margin-bottom: 8px;
    font-size: 0.95em;
}
.steps-list ul ul li::before {
    content: none; /* Quitar pseudo-elemento personalizado */
}


/* Placeholder visual (icono o imagen) */
.section-visual {
    margin-top: 20px;
    text-align: center;
}
.section-visual .visual-placeholder {
    font-size: 4em; /* Icono grande */
    color: #e0e0e0; /* Gris claro */
    display: block;
    margin-bottom: 5px;
}
.section-visual p small {
    color: #aaa;
    font-style: italic;
}

/* Sección CTA Final */
.final-cta-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #e7f3fe; /* Azul muy pálido */
    margin-top: 40px;
    border-radius: 8px;
}
.final-cta-section h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #005073;
}
.final-cta-section p {
    margin-bottom: 25px;
    color: #333;
}

/* Adaptaciones móviles */
@media (max-width: 768px) {
    .enarmango-como-funciona-page h1 { font-size: 1.8em; }
    .how-it-works-section { padding: 30px 15px; }
    .how-it-works-section h2 { font-size: 1.4em; }
    .how-it-works-section p { font-size: 1em; }
    .steps-list li { padding-left: 30px; } /* Ajustar espacio para número/viñeta */
    ul.steps-list.bullet-list > li { padding-left: 20px; }
}


/*****AVISO PRIVACIDAD*****/

/* enarmango-privacy-policy.css o enarmango.css */

.enarmango-privacy-page {
    max-width: 800px; /* Ancho adecuado para texto legal */
    margin: 30px auto;
    padding: 0 15px;
    font-family: sans-serif; /* Fuente legible estándar */
    line-height: 1.7; /* Buena interlínea para lectura */
    color: #333;
}

/* Reutilizar contenedor si aplica */
.enarmango-privacy-page .landing-container {
    background-color: #fff; /* Fondo blanco para el contenido */
    padding: 30px 40px; /* Buen padding interno */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.enarmango-privacy-page h1 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 10px;
    color: #111; /* Negro o gris muy oscuro */
}

.enarmango-privacy-page .effective-date {
    text-align: center;
    font-size: 0.9em;
    color: #666;
    margin-bottom: 30px;
    font-style: italic;
}

.enarmango-privacy-page h2 {
    font-size: 1.4em;
    color: #005073; /* Azul ENARMango */
    margin-top: 35px; /* Espacio antes de cada sección */
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.enarmango-privacy-page h2:first-of-type {
     margin-top: 0; /* Sin margen extra para el primer h2 */
}


.enarmango-privacy-page p {
    margin-bottom: 1em;
    color: #444;
}

.enarmango-privacy-page ul,
.enarmango-privacy-page ol {
    margin-left: 20px; /* Indentación estándar */
    margin-bottom: 1em;
    padding-left: 15px;
}

.enarmango-privacy-page li {
    margin-bottom: 0.7em;
    color: #444;
}

.enarmango-privacy-page strong {
    font-weight: 600; /* O bold */
    color: #222;
}

.enarmango-privacy-page a {
    color: #0073aa;
    text-decoration: underline;
}
.enarmango-privacy-page a:hover {
    color: #005073;
}

.enarmango-privacy-page hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 30px 0;
}

.enarmango-privacy-page small {
    font-size: 0.85em;
    color: #777;
    display: block; /* En su propia línea */
    text-align: center;
    margin-top: 20px;
}

/* Ajustes móviles */
@media (max-width: 768px) {
    .enarmango-privacy-page { margin: 15px auto; }
    .enarmango-privacy-page .landing-container { padding: 20px; }
    .enarmango-privacy-page h1 { font-size: 1.7em; }
    .enarmango-privacy-page h2 { font-size: 1.2em; }
    .enarmango-privacy-page ul, .enarmango-privacy-page ol { margin-left: 10px; padding-left: 10px; }
}

/*****TERMINOS Y CONDICIONES****/

/* Estilos para la página de Términos y Condiciones */
/* Puedes poner esto en enarmango-terms.css, enarmango-privacy-policy.css o tu CSS principal */

/* Contenedor Principal de la Página de Términos */
.enarmango-terms-page {
    max-width: 800px; /* Ancho de lectura cómodo */
    margin: 30px auto;
    padding: 0 15px; /* Padding lateral */
    font-family: Arial, Helvetica, sans-serif; /* Fuente limpia y estándar */
    line-height: 1.7; /* Espaciado vertical para legibilidad */
    color: #333; /* Color de texto principal */
    font-size: 16px; /* Tamaño base (ajusta si es necesario) */
}

/* Contenedor Interno (si usas .landing-container) */
.enarmango-terms-page .landing-container {
    background-color: #ffffff; /* Fondo blanco */
    padding: 35px 45px; /* Espaciado interno generoso */
    border: 1px solid #e5e5e5; /* Borde sutil */
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* Título Principal H1 */
.enarmango-terms-page h1 {
    text-align: center;
    font-size: 2em; /* Tamaño prominente */
    margin-top: 0;
    margin-bottom: 10px;
    color: #1a1a1a; /* Casi negro */
    font-weight: 600;
}

/* Fecha de Efectividad/Actualización */
.enarmango-terms-page .effective-date {
    text-align: center;
    font-size: 0.9em;
    color: #707070; /* Gris medio */
    margin-bottom: 35px; /* Espacio antes del contenido principal */
    font-style: italic;
}

/* Títulos de Sección H2 */
.enarmango-terms-page h2 {
    font-size: 1.35em; /* Claramente un subtítulo */
    color: #005073; /* Azul ENARMango */
    margin-top: 30px; /* Espacio antes de cada sección */
    margin-bottom: 15px;
    padding-bottom: 8px; /* Espacio debajo del texto antes del borde */
    border-bottom: 2px solid #e0e0e0; /* Borde separador */
    font-weight: 600;
}

/* Quitar margen superior extra del primer H2 */
.enarmango-terms-page h2:first-of-type {
    margin-top: 0;
}

/* Párrafos de Texto */
.enarmango-terms-page p {
    margin-bottom: 1.1em; /* Espaciado entre párrafos */
    color: #454545; /* Gris oscuro legible */
}

/* Listas (Ordenadas y No Ordenadas) */
.enarmango-terms-page ul,
.enarmango-terms-page ol {
    margin-left: 18px; /* Indentación */
    margin-bottom: 1.1em;
    padding-left: 20px; /* Espacio para viñetas/números */
}

/* Ítems de Lista */
.enarmango-terms-page li {
    margin-bottom: 0.8em; /* Espacio entre ítems */
    color: #454545;
}

/* Texto en Negrita (<strong>) */
.enarmango-terms-page strong {
    font-weight: bold; /* Asegurar negrita */
    color: #222; /* Ligeramente más oscuro para destacar */
}

/* Enlaces */
.enarmango-terms-page a {
    color: #0073aa; /* Azul estándar de WP */
    text-decoration: underline;
    transition: color 0.2s ease;
}
.enarmango-terms-page a:hover {
    color: #005073; /* Azul más oscuro al pasar */
}

/* Línea Horizontal (si la usaras) */
.enarmango-terms-page hr {
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 35px 0;
}

/* Texto Pequeño (si lo usaras) */
.enarmango-terms-page small {
    font-size: 0.85em;
    color: #777777;
    display: block;
    text-align: center;
    margin-top: 25px;
}

/* --- Responsividad --- */
@media (max-width: 768px) {
    .enarmango-terms-page {
        margin: 15px auto; /* Menos margen vertical */
        font-size: 15px; /* Ligeramente más pequeño en móvil */
    }
    .enarmango-terms-page .landing-container {
        padding: 20px 25px; /* Menos padding interno */
    }
    .enarmango-terms-page h1 {
        font-size: 1.7em;
    }
    .enarmango-terms-page h2 {
        font-size: 1.2em;
        margin-top: 25px;
        margin-bottom: 12px;
    }
    .enarmango-terms-page ul,
    .enarmango-terms-page ol {
        margin-left: 10px;
        padding-left: 15px; /* Menos indentación */
    }
}

@media (max-width: 480px) {
    .enarmango-terms-page {
        font-size: 14px; /* Aún más pequeño si es necesario */
    }
     .enarmango-terms-page .landing-container {
        padding: 15px 20px;
    }
}


/*****QUIENES SOMOS****/

/* enarmango-quienes-somos.css o enarmango.css */

.enarmango-about-page {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 15px;
}

/* Contenedor general y título */
.enarmango-about-page .landing-container {
     background-color: #fff;
     padding: 30px 40px;
     border: 1px solid #eee;
     border-radius: 8px;
}
.enarmango-about-page h1 {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 15px;
    color: #333;
}
.enarmango-about-page .page-intro {
    text-align: center;
    font-size: 1.15em;
    color: #555;
    margin-bottom: 50px;
}

/* Estilo base de sección */
.about-section {
    padding: 40px 0;
    margin-bottom: 30px;
    text-align: center;
     border-bottom: 1px solid #f0f0f0;
}
.about-section:last-of-type {
     border-bottom: none;
     margin-bottom: 0;
}

.about-section .section-icon {
    font-size: 2.8em;
    color: #0073aa; /* Azul */
    margin-bottom: 15px;
    display: block;
}
.about-section.alternate-bg .section-icon {
     color: #ff9800; /* Naranja */
}

.about-section h2 {
    font-size: 1.8em;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
}

.about-section p {
    font-size: 1.05em;
    color: #555;
    line-height: 1.7;
    max-width: 700px; /* Ancho de párrafos */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}
.about-section p:last-of-type {
     margin-bottom: 0;
}

/* Misión / Visión */
.mission-vision p strong {
    color: #005073; /* Destacar texto importante */
}

/* Sección del Equipo */
.team-section h2 {
    margin-bottom: 35px;
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas adaptables */
    gap: 30px; /* Espacio entre miembros */
    margin-bottom: 30px;
    text-align: left; /* Alinear contenido del miembro a la izquierda */
}
.team-member {
    background-color: #fdfdfd;
    padding: 25px;
    border: 1px solid #eee;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar foto y nombre */
    text-align: center; /* Centrar rol y bio */
}
.team-member-photo {
    width: 120px; /* Tamaño de la foto */
    height: 120px;
    border-radius: 50%; /* Foto redonda */
    object-fit: cover; /* Asegurar que la imagen cubra sin distorsionarse */
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.team-member-placeholder {
     width: 120px; height: 120px; border-radius: 50%; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;
}
.team-member-placeholder .dashicons { font-size: 40px; color: #aaa; }

.team-member-name {
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 0 5px 0;
    color: #333;
}
.team-member-role {
    font-size: 0.9em;
    font-weight: 500;
    color: #0073aa; /* Azul */
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.team-member-bio {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
    margin: 0;
}
.team-future {
     font-style: italic;
     color: #777;
     margin-top: 20px;
}

/* Sección "Por qué nosotros" */
.why-us {
     padding-top: 40px;
     padding-bottom: 40px;
}
.why-us-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 550px;
    text-align: left;
}
.why-us-list li {
    margin-bottom: 12px;
    padding-left: 25px; /* Espacio para icono */
    position: relative;
    font-size: 1.05em;
    color: #444;
}
.why-us-list li::before {
    content: "\f15e"; /* Dashicon checkmark: \f15e o estrella: \f155 */
    font-family: dashicons;
    position: absolute;
    left: 0;
    top: 1px; /* Ajuste vertical */
    color: #28a745; /* Verde check */
    font-size: 1.1em;
}

/* CTA Final */
.final-cta-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #f0f8ff;
    margin-top: 40px;
    border-radius: 8px;
}
.final-cta-section h2 { margin-top: 0; margin-bottom: 15px; color: #005073; }
.final-cta-section p { margin-bottom: 25px; color: #333; }
.final-cta-section .enarmango-button { margin: 5px; } /* Espacio entre botones */

/* Responsividad */
@media (max-width: 768px) {
    .enarmango-about-page h1 { font-size: 1.8em; }
    .about-section { padding: 30px 0; }
    .about-section h2 { font-size: 1.5em; }
    .team-grid { grid-template-columns: 1fr; } /* Una columna en móvil */
}