@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap');


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

:root {
    --color-primario: red; 
    --color-secundario: darkred;
    --color-texto: #333;
    --color-fondo: #f8f9fa;
    --color-fondo-elementos-oscuro: #1E1E1E;
    --color-fondo-elementos: #e9ecef;
    --color-fondo-contenedor: #ffffff;

    --background-color: #f8f9fa;
    --container-color: #ffffff;
    --cards-color: #ffffff;
    --text-color: #333333;
    --text-color-header: #ffffff;
    --link-color: #E53935;
    --secondary-text-color: #6c757d;
    --border-color: #dee2e6;
    --brand-accent-color: #E53935;
    --brand-accent-highlight-color: #FF6F61;
    --hover-color: #FF3D00;

}


body {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.1rem;
    line-height: 1.6;
    /*
    background-color: var(--background-color);*/
    background-color: white;
    color: var(--text-color);
}

a {
    text-decoration: none;
    color: var(--link-color);
}

a:hover {
    color: var(--hover-color);
    text-decoration: underline;

}

h2{
    color: var(--text-color);
    font-size: 1.7rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 20px;
    transition: all 0.3s ease; /* Añade una transición para todas las propiedades que cambiarán */
}




.contenedorelementoheader {
    background-color: var(--container-color);
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    border-radius: 25px;
    min-height: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.7rem;
}





.contenedorcontenido {
    max-width: 100%;
    /*
     max-width: 1380px;
    max-width: 100%;
    */
    margin: 0 auto;
    padding: 20px;
}

.contenedorelemento {
    background-color: var(--container-color);
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    border-radius: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.contenedorelemento img {
    width: 100%;
}


.textocentradovertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contenedorcontenido h2 {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
}

.contenedorelemento h3 {
    color: var(--brand-accent-color);
    font-size: 1.7rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 20px;
    transition: all 0.3s ease; /* Añade una transición para todas las propiedades que cambiarán */

}

.contenedorelemento a.boton {
    background-color: var(--brand-accent-color);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 20px;
    
}

.contenedorelemento a.boton:hover {
    background-color: var(--hover-color);
    transform: translateY(-3px); /* Mueve el botón ligeramente hacia arriba */
    box-shadow: 0 8px 12px rgba(229, 57, 53, 0.3); /* Sombra con color rojo para el tema claro */

}

.divcentrado {
    display: flex;
    justify-content: center;
    align-items: center;
}


.divimagen {
    display: flex;
    justify-content: center;
    align-items: center;
}

.divimagen img {
    width: 70%;
    object-fit: cover;
    padding-top: 40px;
    padding-bottom: 40px;
}   




.griddoscolumnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    place-items: center;
    padding-left: 40px;
    padding-right: 40px;
}


.griddoscolumnas ul {
    list-style: none;
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding: 0;
    margin: 0;
}

.griddoscolumnas li {
    margin-bottom: 15px;
    font-weight: 400;
    margin-left: 40px;
    position: relative; /* Necesario para los pseudo-elementos o efectos de línea */
    padding: 5px 10px; /* Añade un poco de padding para que el fondo se vea bien */
    cursor: default; /* Indica que no es clicable si es solo informativo */
    /* --- MICROINTERACCIONES --- */

}

.griddoscolumnas li:hover {
    background-color: var(--brand-accent-color); /* Un fondo muy ligero del color de tu marca */
    color: white; /* Cambia el color del texto a blanco para contraste */
    box-shadow: 0 4px 6px rgba(229, 57, 53, 0.2); /* Sombra con color rojo para el tema claro */
    border-radius: 25px;
}

.griddoscolumnas li a:hover {
    color: white;
    text-decoration: none;
}





.gridtrescolumnas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin: 20px;
}

.divparrafo {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.divtextointernas{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    padding-right: 40px;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.divtextointernas p {
    font-size: 1.2rem;
    margin-bottom: 20px;
    line-height: 2.5;
}

.divtextointernas ul{
    font-size: 1.2rem;
    margin-bottom: 20px;
    padding: 0;
    margin: 0;
}

.divtextointernas  h2{
    color: var(--brand-accent-color);
    font-size: 1.7rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 20px;
    transition: all 0.3s ease; /* Añade una transición para todas las propiedades que cambiarán */
    box-shadow: 0 4px 6px rgba(229, 57, 53, 0.1); /* Sombra con color rojo para el tema claro */
}

.divtextointernas li{
    margin-bottom: 15px;
    font-weight: 400;
    margin-left: 40px;
    line-height: 2.5;
}
.divtextointernas strong{
    color: var(--brand-accent-color);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 20px;
}

 


.tarjetagrid {
    background-color: var(--container-color);
    padding: 30px;
    border-radius: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
    
    /* --- Base para la Microinteracción --- */
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); 
    cursor: pointer;
    border: 1px solid var(--border-color);
}

.tarjetagrid:hover {
    background-color: #fff5f5; 
    /* Fondo muy claro con tinte rojo para el tema claro */
    border-color: var(--brand-accent-color);
    box-shadow: 0 6px 12px rgba(229, 57, 53, 0.15);
}

.tarjetagrid h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--brand-accent-color);
}

.tarjetagrid p {
    margin-bottom: 15px;
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.9;
    font-weight: 300;
}


.tarjetagrid a.boton {
 
 
    padding-top: 20px;
    text-decoration: none;
}
 
.tarjetagrid a:hover {
   text-decoration: none;
}


.entidadgrid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px;
}

.entidadgridelemento {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 20px;
}


.articles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2rem;
    min-height: 350px;
    /* Altura mínima para evitar saltos de layout */
    background-color: var(--container-color);
    border-radius: 15px;
}


.articulocard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px;
    border-radius: 15px;
    padding: 10px;
    background-color: var(--container-color);    
    
}

.articulocard a {
    color: var(--text-color);
}

 


.articulocard img {
    width: 100%;
    object-fit: cover;
}

.articulocard h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.articulocard a {
    font-size: 1.1rem;
    color: var(--color-primario);


}

.articulocardtexto a:hover {
 
    text-decoration: underline;
    color: var(--brand-accent-color);
}

.articulocardtexto h3 {
    font-size: 1.1rem;
    color: var(--text-color);
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}

.pagination-controls button {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--color-primario);
    background-color: white;
    color: var(--color-primario);
    cursor: pointer;
    font-weight: bold;
}

.pagination-controls button:hover:not(:disabled) {
    background-color: var(--color-primario);
    color: white;
}

.pagination-controls button:disabled {
    border-color: #ccc;
    color: #ccc;
    cursor: not-allowed;
}

/* ---- Estilos para el menu ---- */

/* Header y navegación mejorada */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--brand-accent-color);
    color: var(--text-color);
    padding: 15px 20px;
    position: relative;
    
    height: 120px;
}

/* Botón hamburguesa oculto en pantallas grandes */
.menu-toggle {
    color: var(--text-color);
    display: none;
    font-size: 1.8rem;
    background: none;
    border: none;
    cursor: pointer;
}

.menu {
    display: flex;
}

.menu a {
    /* Color de los enlaces del menú */
    color: var(--text-color);
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
}

    .menu a:hover {
        text-decoration: underline;
        background-color: #fff5f5;
        color: var(--brand-accent-color);
    }




.estilofooter {
    background-color: var(--container-color);
    padding: 20px;
    border-radius: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: var(--text-color);
    text-align: center;
    border: 1px solid var(--border-color);
}


.espacio{
    height: 100px;
}


.box {
    border-left: 5px solid red;
    padding: 20px;
    margin: 30px 0;
    background-color: #f8f9fa;
  }
  .box h3 {
    margin-top: 0;
    color: red;
  }



  .enhanced-list {
    background-color: var(--container-color);
    padding: 2rem;
    border-radius: 20px;
    margin: 2rem 0;
}

.enhanced-list-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--container-color);
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.enhanced-list-item:last-child {
    margin-bottom: 0;
}

.enhanced-list-item:hover {
    background-color: #fff5f5;
    transform: translateX(10px);
    border-color: var(--brand-accent-color);
    box-shadow: 0 4px 8px rgba(229, 57, 53, 0.1);
}

.enhanced-list-item .icon {
    font-size: 1.8rem;
    color: var(--brand-accent-color);
    margin-right: 1.5rem;
    margin-top: 0.2rem;
    min-width: 2rem;
}

.enhanced-list-item .content h4 {
    color: var(--brand-accent-color);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.enhanced-list-item .content p {
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
}

/* Responsive para móviles */
@media (max-width: 768px) {

    .articles-grid {
        grid-template-columns: 1fr;
    }

    .enhanced-list {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .enhanced-list-item {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    
    .enhanced-list-item .icon {
        margin-right: 0;
        margin-bottom: 1rem;
        align-self: center;
    }
    
    .enhanced-list-item:hover {
        transform: translateY(-5px);
    }
}






/* ===== PROCESO TBSEK - TARJETAS CON ICONOS ===== */
.tbsek-process {
    margin: 2rem 0;
}

.tbsek-process-title {
    color: var(--text-color);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.process-card {
    background-color: var(--container-color);
    padding: 2rem;
    border-radius: 20px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.process-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-accent-color), var(--hover-color));
}

.process-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(229, 57, 53, 0.2);
    border-color: var(--brand-accent-color);
    background-color: #fff5f5;
}

.process-icon {
    background: linear-gradient(135deg, var(--brand-accent-color), var(--hover-color));
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3);
}

.process-card h4 {
    color: var(--brand-accent-color);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.process-card p {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 1rem;
    margin: 0;
}

/* Conectores visuales entre tarjetas en desktop */
@media (min-width: 1024px) {
    .process-card:not(:last-child)::after {
        content: '→';
        position: absolute;
        top: 50%;
        right: -1.5rem;
        transform: translateY(-50%);
        color: var(--brand-accent-color);
        font-size: 1.5rem;
        font-weight: bold;
        z-index: 10;
    }
    
    .process-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .process-card {
        padding: 1.5rem;
    }
    
    .process-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}




/* --- ESTILOS RESPONSIVE PARA MÓVILES --- */

@media (max-width: 768px) {

    /* --- AJUSTES GLOBALES --- */
    body {
        /* Reducimos el padding general para dar más espacio al contenido */
  
        /* Reducimos ligeramente la fuente base para que quepa más texto de forma cómoda */
        font-size: 1rem;
    }

    h2, .contenedorelemento h3 {
        /* Hacemos los títulos un poco más pequeños para que no se vean desproporcionados */
        font-size: 1.5rem;
    }

    .contenedorelementoheader {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 1.3rem;
    }


    /* --- AJUSTES DE CONTENEDORES PRINCIPALES --- */
    .contenedorcontenido {
        /* Reducimos el padding del contenedor principal */
        padding: 10px;
    }

    .contenedorelementoheader {
        display: flex;
        justify-content: center; /* centra horizontalmente */
        align-items: center;     /* centra verticalmente */       /* altura total de la ventana o ajusta según necesidad */
        padding-left: 20px;
        padding-right: 20px;
        font-size: 1.3rem;
        text-align: center;      /* centra el texto dentro del h1 */
    }
    
    .contenedorelementoheader h1 {
        font-size: 2.5rem;
    }
    

    .contenedorelemento {
        /* Reducción significativa del padding. 30px vertical, 20px horizontal */
        padding: 30px 20px;
        min-height: auto; /* Dejamos que la altura se ajuste al contenido en móvil */
    }

    .divtextointernas {
        /* Menos padding horizontal para los textos internos */
        padding: 20px 15px;
    }

    .divtextointernas p,
    .divtextointernas li {
        /* Mejoramos la legibilidad en móvil con un line-height más compacto */
        line-height: 1.8;
        font-size: 1.1rem;
    }


    /* --- AJUSTES PARA GRIDS --- */
    .griddoscolumnas {
        /* Convertimos el grid a una sola columna */
        grid-template-columns: 1fr;
        /* Eliminamos el padding interno del grid, ya que .contenedorelemento ya lo gestiona */
        padding-left: 0;
        padding-right: 0;
        gap: 25px; /* Aumentamos ligeramente el espacio entre elementos apilados */
    }


    .griddoscolumnas ul {
        font-size: 1.1rem;
        margin-bottom: 20px;
        padding: 0;
        margin: 0;
    }
    
    .griddoscolumnas li {
        list-style: disc;
        font-size: 1.1rem;
        margin-bottom: 15px;
        font-weight: 400;
        margin-left: 10px;
        position: relative; /* Necesario para los pseudo-elementos o efectos de línea */
    }

    .gridtrescolumnas {
        /* Convertimos el grid a una sola columna */
        grid-template-columns: 1fr;
        margin: 10px 0; /* Ajustamos el margen */
    }

    .tarjetagrid {
        /* Reducimos el padding de las tarjetas */
        padding: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .articles-grid {
        /* Reducimos el padding y el gap para la cuadrícula de artículos */
        padding: 1rem;
        gap: 1rem;
    }

    /* --- AJUSTES DEL MENÚ DE NAVEGACIÓN (HAMBURGUESA) --- */

    .nav-container {
        /* Hacemos el header más compacto en altura */
        height: 80px; 
        padding: 15px;
    }
    
    .menu-toggle {
        /* Hacemos visible el botón del menú */
        display: block;
    }
    
    .menu {
        display: none; /* Oculto por defecto */
        flex-direction: column;
        position: absolute;
        /* Se posiciona debajo del nav-container */
        top: 80px; /* Debe coincidir con la altura del .nav-container */
        left: 0;
        width: 100%;
        background-color: var(--container-color);
        padding: 10px 0;
        
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        border: 1px solid var(--border-color);
    }

    .menu.active {
        /* La clase .active (manejada con JavaScript) lo hará visible */
        display: flex;
    }

    .menu a {
        /* Estilos para los enlaces dentro del menú desplegable */
        margin: 0;
        padding: 15px 20px; /* Hacemos los enlaces más grandes y fáciles de tocar */
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--border-color); /* Separador entre enlaces */
        color: var(--text-color);
    }

    .menu a:last-child {
        border-bottom: none; /* Quitamos el borde del último elemento */
    }
    
    /* --- OTROS AJUSTES --- */

    .entidadgridelemento {
        /* Apilamos los elementos en vez de ponerlos en fila */
        flex-direction: column;
        margin: 10px 0;
    }

    .espacio{
        /* Reducimos la altura del espaciador en móvil */
        height: 40px;
    }
}



/* ===== BOTÓN DISCRETO CON ICONO FONT AWESOME ===== */
.tarjetagrid a.boton-tarjeta {
    background-color: transparent;
    color: var(--brand-accent-color);
    padding: 8px 16px;
    border: 2px solid var(--brand-accent-color);
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.tarjetagrid a.boton-tarjeta i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.tarjetagrid a.boton-tarjeta:hover {
    background-color: var(--brand-accent-color);
    color: white;
    transform: translateX(5px);
    text-decoration: none;
}

.tarjetagrid a.boton-tarjeta:hover i {
    transform: translateX(3px);
}







/* ===== BOTÓN PREMIUM UNIFICADO - TBSEK ===== */

.boton-premium {
    background: linear-gradient(135deg, var(--brand-accent-color), var(--hover-color));
    color: white;
    padding: 18px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.4s ease;
    box-shadow: 0 6px 20px rgba(229, 57, 53, 0.3);
    position: relative;
    overflow: hidden;
    min-width: 180px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* Efecto shimmer */
.boton-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.boton-premium:hover::before {
    left: 100%;
}

/* Estados hover */
.boton-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(229, 57, 53, 0.4);
    text-decoration: none;
    color: white;
}

/* Icono animado */
.boton-premium .icono {
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.boton-premium:hover .icono {
    transform: translateX(4px);
}

/* Texto del botón */
.boton-premium .texto {
    position: relative;
    z-index: 2;
}

/* Variantes de tamaño */
.boton-premium.pequeno {
    padding: 12px 24px;
    font-size: 0.9rem;
    min-width: 140px;
}

.boton-premium.grande {
    padding: 20px 40px;
    font-size: 1.1rem;
    min-width: 200px;
}

/* Variante secundaria */
.boton-premium.secundario {
    background: transparent;
    color: var(--brand-accent-color);
    border: 2px solid var(--brand-accent-color);
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.2);
}

.boton-premium.secundario::before {
    background: linear-gradient(90deg, transparent, rgba(229, 57, 53, 0.1), transparent);
}

.boton-premium.secundario:hover {
    background: var(--brand-accent-color);
    color: white;
    border-color: var(--brand-accent-color);
}

/* Variante outline */
.boton-premium.outline {
    background: var(--container-color);
    color: var(--brand-accent-color);
    border: 2px solid var(--brand-accent-color);
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.15);
}

.boton-premium.outline:hover {
    background: linear-gradient(135deg, var(--brand-accent-color), var(--hover-color));
    color: white;
    border-color: transparent;
}

/* Variante para fondos oscuros */
.boton-premium.oscuro {
    background: linear-gradient(135deg, white, #f8f9fa);
    color: var(--brand-accent-color);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.boton-premium.oscuro::before {
    background: linear-gradient(90deg, transparent, rgba(229, 57, 53, 0.1), transparent);
}

.boton-premium.oscuro:hover {
    background: white;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
    color: var(--brand-accent-color);
}

/* Estado disabled */
.boton-premium:disabled,
.boton-premium.disabled {
    background: var(--secondary-text-color);
    color: white;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.boton-premium:disabled::before,
.boton-premium.disabled::before {
    display: none;
}

.boton-premium:disabled:hover,
.boton-premium.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Responsive */
@media (max-width: 768px) {
    .boton-premium {
        padding: 16px 28px;
        font-size: 0.95rem;
        min-width: 160px;
    }
    
    .boton-premium.pequeno {
        padding: 12px 20px;
        font-size: 0.85rem;
        min-width: 120px;
    }
    
    .boton-premium.grande {
        padding: 18px 32px;
        font-size: 1rem;
        min-width: 180px;
    }
}

@media (max-width: 480px) {
    .boton-premium {
        padding: 14px 24px;
        font-size: 0.9rem;
        min-width: 140px;
        width: 100%;
        max-width: 280px;
    }
    
    .boton-premium.pequeno {
        padding: 10px 18px;
        font-size: 0.8rem;
        min-width: 100px;
    }
    
    .boton-premium.grande {
        padding: 16px 28px;
        font-size: 0.95rem;
        min-width: 160px;
    }
}

/* ===== COMPATIBILIDAD CON ICONOS ===== */

/* Para Font Awesome */
.boton-premium i {
    font-size: 0.9em;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.boton-premium:hover i {
    transform: translateX(4px);
}

/* Para SVG */
.boton-premium svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.boton-premium:hover svg {
    transform: translateX(4px);
}

/* ===== EJEMPLOS DE USO ===== */

/*
HTML Examples:

<!-- Botón básico -->
<a href="/enlace" class="boton-premium">
    <span class="texto">Texto del botón</span>
    <i class="fas fa-arrow-right icono"></i>
</a>

<!-- Con SVG -->
<button class="boton-premium">
    <span class="texto">Enviar</span>
    <svg class="icono" viewBox="0 0 24 24" fill="currentColor">
        <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"/>
    </svg>
</button>

<!-- Variantes -->
<a href="/enlace" class="boton-premium pequeno">Pequeño</a>
<a href="/enlace" class="boton-premium grande">Grande</a>
<a href="/enlace" class="boton-premium secundario">Secundario</a>
<a href="/enlace" class="boton-premium outline">Outline</a>
<a href="/enlace" class="boton-premium oscuro">Para fondo oscuro</a>
<button class="boton-premium disabled">Deshabilitado</button>

*/