/* ======================================================
   DIACEL - STYLE.CSS
   Autor: ChatGPT
   Proyecto: DiaCel
   ====================================================== */

/* ==========================
   IMPORTACIÓN DE FUENTE
========================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');
/* ==========================
   VARIABLES
========================== */

:root{

    --primary:#6B7280;
    --primary-dark:#4B5563;

    --secondary:#2D7FF9;

    --orange:#F89B29;

    --background:#F5F7FB;

    --white:#FFFFFF;

    --text:#1E293B;

    --gray:#6B7280;

    --border:#E5E7EB;

    --radius:20px;

    --transition:.30s;

    --shadow:0 12px 35px rgba(0,0,0,.08);

    /* Degradado neutro por defecto (paleta "ambas") para páginas
       sin condición asociada todavía: home sin sesión, login, registro. */
    --tema-bg-grad: linear-gradient(135deg, #FCE8ED 0%, #E7EEFB 100%);
    --color-principal: #7A2E5E;
    --color-secundario: #5A1F45;

}

/* ==========================
   RESET
========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family: 'Poppins', sans-serif;

    background: var(--tema-bg-grad);
    background-attachment: fixed;

    color:var(--text);

    overflow-x:hidden;

}

/* ==========================
   SCROLLBAR
========================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-track{

    background:#ECECEC;

}

/* ==========================
   LINKS
========================== */

a{

    text-decoration:none;

    transition:.3s;

}

/* ==========================
   BOTONES
========================== */

.btn{

    border-radius:50px;

    font-weight:600;

    padding:12px 28px;

    transition:.35s;

}

/* Bootstrap define el color de .btn-success/.btn-outline-success (y el
   de sus estados :hover/:focus/:focus-visible/:active/:disabled) a
   través de las custom properties --bs-btn-*, no solo con la regla
   base. Sobreescribir únicamente background/color en :hover — como
   se hacía antes — dejaba el verde nativo de Bootstrap visible al
   hacer foco (teclado) o al mantener presionado el botón (:active),
   porque esas reglas de Bootstrap leen las variables, no las
   declaraciones directas de acá. Redefinir las variables garantiza
   que TODOS los estados usen la paleta gris de la app. */

.btn-success{

    --bs-btn-color:#fff;
    --bs-btn-bg:var(--primary);
    --bs-btn-border-color:var(--primary);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:var(--primary-dark);
    --bs-btn-hover-border-color:var(--primary-dark);
    --bs-btn-focus-shadow-rgb:107,114,128;
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:var(--primary-dark);
    --bs-btn-active-border-color:var(--primary-dark);
    --bs-btn-disabled-color:#fff;
    --bs-btn-disabled-bg:var(--primary);
    --bs-btn-disabled-border-color:var(--primary);

    background:var(--primary);

    border:none;

}

.btn-success:hover,
.btn-success:focus,
.btn-success:focus-visible{

    background:var(--primary-dark);

    border-color:var(--primary-dark);

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(15,23,42,.20);

}

.btn-success:active,
.btn-success.active{

    background:var(--primary-dark) !important;

    border-color:var(--primary-dark) !important;

}

.btn-outline-success{

    --bs-btn-color:var(--primary);
    --bs-btn-border-color:var(--primary);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:var(--primary);
    --bs-btn-hover-border-color:var(--primary);
    --bs-btn-focus-shadow-rgb:107,114,128;
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:var(--primary);
    --bs-btn-active-border-color:var(--primary);
    --bs-btn-disabled-color:var(--primary);
    --bs-btn-disabled-border-color:var(--primary);

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:focus-visible,
.btn-outline-success:active,
.btn-outline-success.active{

    background:var(--primary) !important;

    border-color:var(--primary) !important;

    color:#FFF !important;

}

/* ==========================
   NAVBAR
========================== */

.navbar{

    padding:18px 0;

    backdrop-filter:blur(14px);

    background:rgba(255,255,255,.85)!important;

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:.35s;

}

.logo{

    font-size:30px;

    color:var(--primary)!important;

}

.logo-icon{

    font-size:34px;

}

.nav-link{

    color:var(--text)!important;

    font-weight:500;

    margin:0 10px;

    position:relative;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:3px;

    border-radius:20px;

    background:var(--primary);

    transition:.30s;

}

.nav-link:hover::after{

    width:100%;

}
/*=========================================
=            HERO PRINCIPAL               =
=========================================*/

.hero{

    padding-top:160px;
    padding-bottom:120px;

}

.hero .badge{

    font-size:15px;

    padding:10px 20px;

    border-radius:50px;

}

.hero h1{

    font-size:60px;

    font-weight:700;

    line-height:1.1;

    margin-top:20px;

    margin-bottom:25px;

}

.hero p{

    font-size:20px;

    color:var(--gray);

    line-height:1.8;

    margin-bottom:35px;

}

.hero-image{

    max-width:100%;

    animation:float 4s ease-in-out infinite;

}


/*=========================================
=            TARJETAS                     =
=========================================*/

.cards{

    padding:80px 0;

}

.feature-card{

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(15px);

    border-radius:25px;

    padding:40px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

    cursor:pointer;

    height:100%;

    border:1px solid rgba(255,255,255,.3);

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.feature-card i{

    font-size:60px;

    color:var(--primary);

    margin-bottom:25px;

}

.feature-card h3{

    font-weight:700;

    margin-bottom:15px;

}

.feature-card p{

    color:var(--gray);

}


/*=========================================
=            FOOTER                       =
=========================================*/

.footer{

    margin-top:100px;

    background:#17212B;

    color:white;

    padding:70px 0;

}

.footer h4{

    margin-bottom:20px;

    font-weight:700;

}

.footer h5{

    margin-bottom:20px;

}

.footer ul{

    list-style:none;

    padding:0;

}

.footer li{

    margin-bottom:12px;

    color:#D4D4D4;

}

.footer p{

    color:#D4D4D4;

}

.footer hr{

    margin:35px 0;

    border-color:rgba(255,255,255,.15);

}


/*=========================================
=          ANIMACIONES                    =
=========================================*/

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}

.fade-up{

animation:fadeUp 1s;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/*=========================================
=            RESPONSIVE                   =
=========================================*/

@media(max-width:992px){

.hero{

text-align:center;

padding-top:140px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.hero-image{

margin-top:50px;

}

}

@media(max-width:768px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:17px;

}

.navbar{

padding:15px;

}

.feature-card{

padding:30px;

}

}

@media(max-width:576px){

.hero{

padding-top:120px;

}

.hero .btn{

width:100%;

margin-bottom:15px;

}

}
/* =========================================================
   TIPOGRAFÍA DIACEL
   (la fuente se importa una sola vez, arriba del todo del
   archivo — un @import en cualquier otra posición es inválido
   según la spec de CSS y los navegadores lo ignoran en
   silencio; así se rompía Poppins en las páginas que no traían
   su propio <link> de Google Fonts, como pasaba en Perfil).
========================================================= */

/* Texto general de la página */
body,
button,
input,
select,
textarea {
    font-family: 'Poppins', sans-serif;
}

/* Títulos — tipografía sans-serif limpia en todo el sitio */
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.logo {
    font-family: 'Poppins', sans-serif;
}

/* Título principal */
h1 {
    font-weight: 700;
}

/* Títulos de secciones */
h2,
h3 {
    font-weight: 600;
}

/* Logo */
.navbar-brand,
.logo {
    font-weight: 700;
}


/* =========================================================
   SISTEMA DE DISEÑO — LAYOUT AUTENTICADO (SIDEBAR + BADGE)
   =========================================================
   Paleta por condición, verificada contra WCAG 2.2 AA (ratios
   reales calculados, no aproximados):
     - Celiaquía:  rojos (principal #B3261E, oscuro #7A1B14)
     - Diabetes:   azul / celeste
     - Ambas:      combinación armónica de las dos
   El atributo data-tema en .app-layout tiñe automáticamente
   toda la interfaz descendiente vía custom properties.
========================================================= */

[data-tema="celiaco"] {
    --color-principal: #B3261E;
    --color-secundario: #7A1B14;
    --color-suave: #FBE0DC;
    --color-texto-suave: #6B140F;
    --tema-bg-grad: linear-gradient(160deg, #FFF8F7 0%, #FCE8E4 100%);
}

[data-tema="diabetico"] {
    --color-principal: #1D6FA5;
    --color-secundario: #154F78;
    --color-suave: #DCEFF8;
    --color-texto-suave: #123C57;
    --tema-bg-grad: linear-gradient(160deg, #F3FAFD 0%, #E3F3FA 100%);
}

[data-tema="ambas"] {
    /* Combinación del rojo celíaco (#B3261E) con el azul diabético
       (#1D6FA5) a través de un violeta ciruela — no un tono neutro
       naranja/tierra. Contraste verificado contra WCAG 2.2 AA (ver
       nota debajo del bloque de condicion-card[data-condicion="both"]). */
    --color-principal: #7A2E5E;
    --color-secundario: #5A1F45;
    --color-suave: #F3E2ED;
    --color-texto-suave: #4A1837;
    --tema-bg-grad: linear-gradient(135deg, #FCE8ED 0%, #E7EEFB 100%);
}

.app-layout {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: white;
    border-right: 1px solid rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    transition: transform .25s ease;
}

/* Fondo oscuro detrás del sidebar cuando se abre como cajón en
   mobile: sin esto, el contenido de atrás seguía siendo visible y
   "tocable" mientras el menú estaba abierto — confuso al dedo y sin
   forma obvia de cerrarlo salvo volver a tocar el botón hamburguesa. */
.app-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 35;
}

.app-sidebar-overlay.visible {
    display: block;
}

body.app-sidebar-bloqueado {
    overflow: hidden;
}

.app-brand {
    padding: 26px 24px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.app-brand a {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-principal);
    text-decoration: none;
}

.app-nav {
    flex: 1;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.app-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4b5563;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: .92rem;
    font-weight: 500;
    transition: .2s;
}

.app-nav a:hover {
    background: var(--color-suave);
    color: var(--color-texto-suave);
}

.app-nav a.activo {
    background: var(--color-principal);
    color: white;
}

.app-nav a.app-nav-admin {
    margin-top: 10px;
    border-top: 1px solid rgba(0,0,0,.06);
    padding-top: 20px;
    border-radius: 0;
}

.app-sidebar-footer {
    padding: 16px 14px 22px;
    border-top: 1px solid rgba(0,0,0,.06);
}

.app-sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c0392b;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 500;
    transition: .2s;
}

.app-sidebar-footer a:hover {
    background: #fdeeee;
}

.app-main {
    flex: 1;
    margin-left: 250px;
    min-width: 0;
    background: var(--tema-bg-grad);
}

.app-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 30px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.app-menu-btn {
    display: none;
    border: none;
    background: transparent;
    font-size: 1.4rem;
    color: #1e293b;
}

.app-topbar-titulo {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    flex: 1;
}

.app-badge-modulo {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-principal);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-contenido {
    padding: 34px 30px 60px;
}

@media (max-width: 992px) {

    .app-sidebar {
        transform: translateX(-100%);
    }

    .app-sidebar.abierto {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0;
    }

    .app-menu-btn {
        display: inline-flex;
    }

}

@media (min-width: 993px) {

    .app-sidebar-overlay {
        display: none !important;
    }

}

@media (max-width: 576px) {

    .app-contenido { padding: 22px 16px 50px; }
    .app-topbar { padding: 14px 18px; }
    .app-badge-modulo span { display: none; }

}


/* =========================================================
   TARJETAS Y SUPERFICIES — estilo general (todo el sitio)
========================================================= */

.tarjeta-app {
    background: white;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    border: 1px solid rgba(0,0,0,.04);
}


/* =========================================================
   REGISTRO — SELECCIÓN DE CONDICIÓN
   Pantalla previa al formulario: 3 tarjetas grandes (celíaco,
   diabético, ambas). Al elegir una, el formulario se revela
   teñido con --color-principal/--color-secundario/--color-suave
   de esa condición (mismo sistema de variables que [data-tema]
   usa en el layout autenticado).
========================================================= */

/* Pantalla completa: ocupa todo el viewport (ancho y alto), sin
   bloque centrado ni márgenes — reemplaza por completo lo que
   hubiera debajo mientras está visible. */
.pantalla-condicion {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--tema-bg-grad);
}

.pantalla-condicion h1 {
    font-weight: 700;
    margin-top: 56px;
    padding: 0 24px;
}

.pantalla-condicion p.subtitulo {
    color: var(--gray);
    padding: 0 24px;
}

.condicion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    flex: 1;
    align-items: stretch;
    margin-top: 32px;
    padding: 0 40px 56px;
}

@media (max-width: 640px) {

    .condicion-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 24px 40px;
    }

}

/* Tarjetas separadas: cada condición tiene su propio recuadro
   redondeado, con espacio entre ellas (gap del grid de arriba) en
   vez de un panel continuo sin cortes. El color de cada tarjeta
   reutiliza los mismos tokens --color-principal/--color-secundario
   que [data-tema] usa en el resto de la app, para que la paleta sea
   idéntica a la que el usuario va a ver una vez adentro. */
.condicion-card {
    position: relative;
    border: none;
    border-radius: 28px;
    padding: 40px 24px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 260px;
    box-shadow: 0 10px 30px rgba(15,23,42,.14);
    transition: transform .25s ease, box-shadow .25s ease, filter .3s ease;
}

/* Celíaco — tonos rojos (mismos tokens que [data-tema="celiaco"]). */
.condicion-card[data-condicion="celiac"] {
    background: linear-gradient(160deg, #B3261E 0%, #7A1B14 100%);
}

/* Diabético — azul médico (mismos tokens que [data-tema="diabetico"]). */
.condicion-card[data-condicion="diabetic"] {
    background: linear-gradient(160deg, #1D6FA5 0%, #154F78 100%);
}

/* Ambas — combinación elegante: pasa del rojo celíaco al azul
   diabético a través del violeta ciruela de [data-tema="ambas"].
   Contraste blanco sobre cada extremo e intermedio, WCAG 2.2 AA:
     #B3261E -> 6.53:1 · #7A2E5E -> 8.82:1 · #1D6FA5 -> 5.42:1
   (umbral AA para texto normal: 4.5:1). */
.condicion-card[data-condicion="both"] {
    background: linear-gradient(135deg, #B3261E 0%, #7A2E5E 50%, #1D6FA5 100%);
}

.condicion-card:hover,
.condicion-card:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(15,23,42,.22);
    filter: brightness(1.06);
}

.condicion-card:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
}

.condicion-card.seleccionada {
    animation: seleccionarPulso .5s ease;
}

/* Ícono y texto viven sobre el degradado de cada tarjeta, con
   superficies propias (glassmorphism) para garantizar contraste AA
   sin depender del tono exacto del degradado de fondo. */
.condicion-icono-badge {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.24);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8rem;
    box-shadow: 0 8px 20px rgba(15,23,42,.18);
    text-shadow: 0 2px 6px rgba(0,0,0,.25);
    animation: float 4s ease-in-out infinite;
}

.condicion-card:nth-child(2) .condicion-icono-badge { animation-delay: .3s; }
.condicion-card:nth-child(3) .condicion-icono-badge { animation-delay: .6s; }

.condicion-icono-svg {
    width: 1.8rem;
    height: 1.8rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.condicion-icono-svg--ambas {
    width: 2.9rem;
    height: 1.74rem;
}

.condicion-card-texto {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 14px 20px;
    max-width: 92%;
    box-shadow: 0 8px 20px rgba(15,23,42,.12);
}

.condicion-card-texto h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}

.condicion-card-texto p {
    font-size: .85rem;
    color: var(--gray);
    margin: 0;
}

@keyframes seleccionarPulso {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.07); }
    100% { transform: scale(1); }
}


/* =========================================================
   AUTH — FORMULARIO DE LOGIN/REGISTRO TEÑIDO POR CONDICIÓN
   (o por el violeta neutro de :root si todavía no hay una
   condición elegida, como en login.php).
========================================================= */

.form-auth .form-control:focus,
.form-auth .form-select:focus {
    border-color: var(--color-principal);
    box-shadow: 0 0 0 4px var(--color-suave, rgba(122, 46, 94, .15));
}

.form-auth .form-check-input:checked {
    background-color: var(--color-principal);
    border-color: var(--color-principal);
}

.form-auth .form-check-input:focus {
    border-color: var(--color-principal);
    box-shadow: 0 0 0 4px var(--color-suave, rgba(122, 46, 94, .15));
}

.form-auth .form-check-label a {
    color: var(--color-principal);
    font-weight: 600;
}

/* Autocompletado del navegador: por defecto Chrome/Firefox pintan
   el campo con su propio resaltado (amarillo o celeste según
   navegador/SO), fuera de la paleta del sitio. Se neutraliza el
   fondo nativo con un box-shadow inset (truco estándar, ya que
   background-color no se puede pisar directamente en autofill) y
   se deja en su lugar un borde con el color de la condición.
========================================================= */

.form-auth .form-control:-webkit-autofill,
.form-auth .form-control:-webkit-autofill:hover,
.form-auth .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    border-color: var(--color-principal);
    transition: background-color 600000s ease-in-out 0s;
}

.form-auth .form-control:autofill {
    background-color: #fff;
    border-color: var(--color-principal);
}

.form-auth .btn-crear-cuenta {
    background: var(--color-principal);
    border: none;
    color: #fff;
}

.form-auth .btn-crear-cuenta:hover {
    background: var(--color-secundario);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

.btn-cambiar-condicion {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-principal);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
}

.btn-cambiar-condicion:hover {
    text-decoration: underline;
}

.condicion-elegida-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-suave);
    color: var(--color-texto-suave);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 600;
}


/* =========================================================
   REGISTRO — PANTALLA DE BIENVENIDA
========================================================= */

.bienvenida-registro {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--tema-bg-grad);
    padding: 24px;
}

.bienvenida-icono {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--color-principal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    margin-bottom: 26px;
    box-shadow: 0 20px 45px rgba(15,23,42,.18);
    animation: bienvenidaPop .6s cubic-bezier(.34,1.56,.64,1);
}

.bienvenida-registro h1 {
    font-weight: 700;
    margin-bottom: 10px;
}

.bienvenida-registro p {
    color: var(--gray);
    margin-bottom: 28px;
}

.bienvenida-barra {
    width: 220px;
    max-width: 70vw;
    height: 5px;
    border-radius: 50px;
    background: var(--color-suave);
    overflow: hidden;
}

.bienvenida-barra span {
    display: block;
    height: 100%;
    background: var(--color-principal);
    animation: bienvenidaProgreso 1.8s linear forwards;
}

@keyframes bienvenidaPop {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bienvenidaProgreso {
    from { width: 0%; }
    to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {

    .condicion-icono-badge,
    .condicion-card,
    .bienvenida-icono,
    .bienvenida-barra span {
        animation: none !important;
        transition: none !important;
    }

}