/* Importar la fuente Montserrat de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* **SOBREESCRITURAS AGRESIVAS PARA ELEMENTOR Y TEMAS DE WORDPRESS** */
/* Esto intentará anular cualquier limitación de ancho o padding de Elementor y del tema */
body, html {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Montserrat', sans-serif;
    background-color: #0b1a38; /* Color de fondo principal */
    color: #fff;
    min-height: 100vh; /* Asegura que cubra al menos la altura de la ventana */
    display: flex; /* Para flexbox en el body para centrar el contenido verticalmente */
    flex-direction: column;
    overflow-x: hidden; /* Evita el scroll horizontal */
    width: 100vw; /* Asegura el 100% del viewport width */
    box-sizing: border-box;
    position: relative; /* Necesario para z-index */
    z-index: 1; /* Para controlar la capa base */
}

/* Ocultar elementos del tema de WordPress si no son necesarios */
/* Ajusta estos selectores si tu tema usa clases diferentes para el header, footer, etc. */
#page, #content, .site-main, .entry-content,
.elementor-section-wrap,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-container,
.elementor-widget-custom-html,
.elementor-widget-text-editor,
.elementor-inner-section,
.elementor-inner-column
{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
/* Oculta los elementos del tema que no quieres ver */
.site-header, .site-footer, .comments-area, #secondary, #masthead, #colophon, #primary {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    line-height: 0 !important;
}

/* Asegura que el contenedor de Elementor para la sección full width no restrinja el ancho */
.elementor-section.elementor-section-stretched,
.elementor-section.elementor-section-stretched > .elementor-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Contenedor principal de la aplicación */
#marburg-tool-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw; /* Ocupa el 100% del ancho del viewport */
    flex-grow: 1; /* Permite que el contenedor se expanda verticalmente */
    padding: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 5; /* Asegura que la app esté por encima de posibles overlays de Elementor */
}

/* Estilos del encabezado de la APP */
.marburg-header {
    text-align: center;
    margin-bottom: 30px;
    padding-top: 20px;
    width: 100%; /* Ocupa todo el ancho disponible del padre */
}

/* Estilo para el logo de imagen */
.marburg-logo {
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
}

.marburg-header p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 10px;
}

/* Contenido principal de la aplicación que albergará las vistas */
#app-main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra las vistas verticalmente */
    flex-grow: 1; /* Permite que el main se expanda para llenar el espacio */
    width: 100%; /* Asegura que ocupe todo el ancho */
}

/* Estilos para las VISTAS (pantallas de la SPA) */
.app-view {
    background-color: #1a2b4b; /* Fondo de la vista, que se estirará de borde a borde */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    width: calc(100vw - 40px); /* Ocupa todo el ancho del viewport menos un padding visual */
    max-width: 1400px; /* Opcional: para que no sea demasiado ancho en pantallas muy grandes */
    box-sizing: border-box;
    margin: 0 auto; /* Centra la vista horizontalmente */
    display: none;
    animation: fadeIn 0.5s ease-out;
    position: relative;
    z-index: 10; /* Asegura que la vista activa esté por encima de otros elementos */
    flex-shrink: 0; /* Evita que la vista se encoja si hay poco espacio */
}

.app-view.active {
    display: block;
}

/* Contenedor para el contenido INTERNO de cada vista */
.app-view-inner-content {
    max-width: 1200px; /* Limita el ancho del contenido para legibilidad */
    margin: 0 auto; /* Centra el contenido dentro de la vista */
    padding: 30px 40px; /* Padding interno para el contenido */
    box-sizing: border-box;
    width: 100%; /* Ocupa el 100% del max-width */
    min-height: 400px; /* Mínima altura para las vistas si el contenido es corto */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente dentro del inner-content */
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Estilos comunes para títulos y subtítulos */
.app-view h1 {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}

.app-view .subtitle {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-bottom: 40px;
}

/* Botón "Zurück zur Übersicht" */
.back-button {
    background-color: #3b4d6b; /* Fondo azul oscuro */
    color: #fff; /* Texto blanco */
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none; /* Asegura que no tenga subrayado */
    display: inline-flex; /* Para centrar contenido y permitir padding */
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
    min-width: 180px; /* Ancho mínimo para que se vea bien */
    margin-bottom: 25px; /* Espacio debajo del botón */
}
.back-button:hover {
    background-color: #00bcd4; /* Azul vibrante al hover */
    color: #0b1a38; /* Texto muy oscuro al hover */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
}

/* HOME VIEW STYLES */
#home-view h1 {
    font-size: 48px;
}
#home-view .highlight {
    color: #00bcd4;
}
.options-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    width: 100%;
}
.option-card {
    background-color: #1a2b4b;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    width: calc(33.333% - 20px); /* Ajuste para 3 columnas con gap */
    min-width: 280px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.option-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
    background-color: #00bcd4; /* Azul vibrante al hover */
    color: #0b1a38; /* Texto oscuro al hover */
}
.option-card:hover .icon-placeholder svg path,
.option-card:hover .icon-placeholder svg circle {
    stroke: #0b1a38; /* Icono oscuro al hover */
}
.option-card .icon-placeholder {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    flex-shrink: 0;
}
.option-card .icon-placeholder svg {
    width: 100%;
    height: 100%;
    /* stroke y fill ahora definidos inline en el HTML para máxima prioridad */
    transition: stroke 0.3s ease; /* Para animar el color del icono */
}
.option-card h3 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
    color: inherit;
}
.option-card p {
    font-size: 15px;
    color: inherit;
    line-height: 1.5;
}


/* PRODUKTAUFBAU & DIFFERENZIERUNG VIEW STYLES */
.content-columns-wrapper {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}
.components-column,
.products-standards-column {
    background-color: #2a3d5b;
    border-radius: 8px;
    padding: 25px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    flex: 1;
    min-width: 380px;
}
.column-header {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 25px;
    text-align: center;
}
.components-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}
.component-category-box {
    background-color: #3b4d6b;
    border-radius: 6px;
    padding: 12px 15px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    grid-column: span 1;
}
.component-item {
    background-color: #4c5f7c;
    border-radius: 6px;
    padding: 12px 15px;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.1s ease;
}
.component-item.highlight {
    background-color: #00bcd4;
    color: #0b1a38;
    font-weight: 600;
    transform: scale(1.02);
    box-shadow: 0 0 15px #00bcd4;
}
.product-flow-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}
.arrow-down-group {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 15px;
}
.arrow {
    font-size: 30px;
    color: #00bcd4;
    font-weight: 700;
}
.product-cards-row {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
}
.product-final-card {
    background-color: #00bcd4;
    color: #0b1a38;
    border-radius: 8px;
    padding: 15px 25px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-basis: 48%;
    max-width: 200px;
}
.product-final-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}
.product-standard-section {
    margin-bottom: 20px;
}
.product-standard-item {
    background-color: #3b4d6b;
    border-radius: 6px;
    padding: 12px 15px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}
.standards-detail-box {
    background-color: #4c5f7c;
    border-radius: 6px;
    padding: 15px 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
}
.standards-detail-box strong {
    color: #00bcd4;
}
.special-features-section {
    background-color: #2a3d5b;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    margin-top: 30px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.special-features-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}
.special-features-item {
    background-color: #4c5f7c;
    border-radius: 6px;
    padding: 12px 20px;
    display: inline-block;
    font-size: 16px;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* QUALITY CHECK VIEW STYLES */
#quality-check-view .tab-navigation {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

#quality-check-view .tab-button {
    background-color: #3b4d6b;
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 10px 25px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease, color 0.3s ease;
    min-width: 120px;
}

#quality-check-view .tab-button:hover {
    background-color: #00bcd4; /* Azul vibrante al hover */
    color: #0b1a38; /* Texto oscuro al hover */
    transform: translateY(-2px);
}

#quality-check-view .tab-button.active {
    background-color: #00bcd4; /* Azul vibrante al activo */
    color: #0b1a38; /* Texto oscuro al activo */
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
}

.tab-content-container {
    background-color: #2a3d5b;
    border-radius: 8px;
    padding: 30px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex; /* Añadido para centrar el botón de descarga */
    flex-direction: column; /* Añadido para centrar el botón de descarga */
    align-items: center; /* Añadido para centrar el botón de descarga */
}

.tab-content.hidden {
    display: none;
}

.qualitaets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    justify-content: center;
}

.qualitaets-card {
    background-color: #4c5f7c;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qualitaets-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.qualitaets-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00bcd4;
    border-radius: 50%;
    margin-bottom: 15px;
    flex-shrink: 0;
}
.qualitaets-icon svg {
    width: 60%;
    height: 60%;
    /* stroke y fill ahora definidos inline en el SVG para máxima prioridad */
}

.qualitaets-card h4 {
    font-size: 19px;
    font-weight: 600;
    color: #fff;
    margin-top: 0;
    margin-bottom: 10px;
}

.qualitaets-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

/* Common list styles for tab content */
.section-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    text-align: left;
}
.quality-list {
    list-style: none; /* Eliminar viñetas predeterminadas */
    padding: 0;
    margin: 0;
    width: 100%; /* Asegura que la lista ocupe todo el ancho disponible */
}
.quality-list li {
    background-color: #4c5f7c;
    border-radius: 6px;
    padding: 15px 20px;
    margin-bottom: 10px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.quality-list li strong {
    color: #00bcd4;
    font-weight: 600;
}
.quality-list.numbered {
    counter-reset: custom-counter;
}
.quality-list.numbered li {
    position: relative;
    padding-left: 35px; /* Espacio para el número */
}
.quality-list.numbered li::before {
    counter-increment: custom-counter;
    content: counter(custom-counter) ".";
    position: absolute;
    left: 10px;
    top: 15px; /* Alineación vertical */
    font-weight: 700;
    color: #00bcd4;
    font-size: 16px;
}

/* Download Button styles */
.download-button {
    background-color: #00bcd4; /* Azul vibrante */
    color: #0b1a38; /* Texto oscuro */
    border: none;
    border-radius: 25px;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin-top: 30px; /* Espacio superior */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
    display: inline-flex; /* Para que el padding se aplique correctamente */
    align-items: center;
    justify-content: center;
}
.download-button:hover {
    background-color: #fff; /* Blanco al hover */
    color: #0b1a38; /* Texto oscuro al hover */
    transform: translateY(-2px);
}


/* EINBLICKE: DER QUALITY BLOG VIEW STYLES */
.blog-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    justify-content: center;
    width: 100%;
}

.blog-option-card {
    background-color: #2a3d5b;
    border-radius: 12px;
    padding: 30px 25px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.blog-option-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.3);
    background-color: #00bcd4; /* Azul vibrante al hover */
    color: #0b1a38; /* Texto oscuro al hover */
}
.blog-option-card:hover .blog-icon-placeholder svg path,
.blog-option-card:hover .blog-icon-placeholder svg circle {
    stroke: #0b1a38; /* Icono oscuro al hover */
}

.blog-icon-placeholder {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00bcd4;
    border-radius: 50%;
    margin-bottom: 20px;
    flex-shrink: 0;
}
.blog-icon-placeholder svg {
    width: 65%;
    height: 65%;
    /* stroke y fill ahora definidos inline en el SVG para máxima prioridad */
}


.blog-option-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
    color: inherit;
}

.blog-option-card p {
    font-size: 14px;
    color: inherit;
    line-height: 1.5;
}


/* DETAIL VIEW COMMON TEXT STYLES */
.section-text-intro, .section-text-outro {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    text-align: left;
    line-height: 1.6;
}
.section-text-outro {
    margin-top: 20px;
}


/* COMPARISON GAUGES (Standard/Marburg - Semicircles with needles) */
.comparison-section {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.comparison-item {
    text-align: center;
    width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.comparison-item p {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 600;
}

.comparison-gauge-container {
    width: 140px;
    height: 70px;
    overflow: hidden;
    position: relative;
    border-radius: 70px 70px 0 0;
    border: 2px solid;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Colores específicos para Standard y Marburg */
.standard-gauge {
    background-color: #D3D3D3;
    border-color: #A9A9A9;
}
.marburg-gauge {
    background-color: #00bcd4;
    border-color: #00a4bb;
}

.gauge-needle {
    width: 2px;
    height: 60px;
    background-color: #0b1a38;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(-90deg); /* Estado inicial: apuntando completamente a la izquierda */
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 2px;
    z-index: 2;
}
.marburg-gauge .gauge-needle {
    background-color: #fff;
}

/* Posiciones finales animadas para las agujas */
.standard-gauge .gauge-needle.active-needle {
    transform: translateX(-50%) rotate(-60deg); /* Menos calidad (ej: 30 grados desde la izquierda) */
}
.marburg-gauge .gauge-needle.active-needle {
    transform: translateX(-50%) rotate(80deg); /* Más calidad (ej: 170 grados desde la izquierda) */
}


/* HEISSPRÄGETAPETE DETAIL VIEW STYLES */
.steckbrief-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    background-color: #2a3d5b;
    border-radius: 8px;
    padding: 25px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.steckbrief-list dt {
    font-weight: 600;
    color: #00bcd4;
    text-align: right;
    padding-right: 10px;
    grid-column: 1;
}
.steckbrief-list dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    grid-column: 2;
}


/* LICHTECHTHEIT & WASCHBESTÄNDIGKEIT DETAIL VIEWS (reusing gauge styles) */
.lightfastness-gauge-group, .wash-resistance-icons .lightfastness-gauge-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.lightfastness-gauge-group .gauge-label-std,
.lightfastness-gauge-group .gauge-label-mt {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}
.lightfastness-gauge-group .arrow-up-down {
    font-size: 25px;
    color: #00bcd4;
    margin: 0 5px;
}

.lightfastness-icons, .wash-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}
.light-icon-item, .wash-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #2a3d5b;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    width: 120px;
    min-height: 120px;
    justify-content: center;
}
.light-icon-item svg, .wash-icon-item svg {
    width: 40px;
    height: 40px;
}
.light-icon-item span, .wash-icon-item span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
}
.light-icon-item.active, .wash-icon-item.active {
    background-color: #00bcd4;
}
.light-icon-item.active svg, .wash-icon-item.active svg {
    stroke: #0b1a38;
}
.light-icon-item.active span, .wash-icon-item.active span {
    color: #0b1a38;
    font-weight: 600;
}

.ral-gutezeichen-placeholder {
    text-align: center;
    margin-top: 30px;
}
.ral-gutezeichen-placeholder img {
    max-width: 150px;
    height: auto;
}


/* V-SCHNITT TECHNOLOGIE DETAIL VIEW STYLES */
.v-schnitt-diagram-placeholder {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.v-schnitt-box {
    width: 100px;
    height: 50px;
    background-color: #3b4d6b;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.v-schnitt-box.std {
    /* box-shadow: 0 0 0 rgba(0,0,0,0); /* Sin efecto especial */
}
.v-schnitt-box.mt-overlap {
    position: relative;
    background-color: #00bcd4;
    width: 120px; /* Un poco más ancho para el solapamiento visual */
    left: -10px; /* Desplazar para solapamiento */
    z-index: 1; /* Para que se vea por encima del anterior */
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* Opcional: una flecha que indique el corte en V */
.v-schnitt-box.mt-overlap::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px; /* Ajusta la posición de la "V" */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 50px solid #00bcd4; /* Color de la "V" */
    transform: rotate(180deg);
    transform-origin: top center;
    display: none; /* Hide for now, can be activated for visual effect */
}


/* Quiz styles */
.quiz-container {
    background-color: #3b4d6b;
    border-radius: 8px;
    padding: 30px;
    margin-top: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.quiz-container h2 {
    color: #00bcd4;
    margin-bottom: 15px;
    font-size: 24px;
}
.quiz-container p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 25px;
}
.start-quiz-button, .submit-quiz-button, .retry-quiz-button {
    background-color: #00bcd4;
    color: #0b1a38;
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease, color 0.3s ease;
    margin-top: 20px;
}
.start-quiz-button:hover, .submit-quiz-button:hover, .retry-quiz-button:hover {
    background-color: #fff;
    transform: translateY(-3px);
}
.quiz-questions {
    text-align: left;
    margin-top: 30px;
}
.quiz-question-item {
    background-color: #4c5f7c;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.quiz-question-item p {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 15px;
}
.quiz-options label {
    display: block;
    background-color: #3b4d6b;
    padding: 12px 15px;
    margin-bottom: 10px;