/* Componentes de UI */

/* Logo - Mobile First */
.logo{display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-xl);text-shadow:2px 2px 4px rgba(0,0,0,.5);flex-direction:column;gap:10px}
.logo__image{height:60px;width:auto;margin-right:0;margin-bottom:0;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.5))}
.logo__text{font-size:4rem;font-weight:700;color:#d6812c;text-align:center}

/* Cards */
.benefit-card{background:var(--color-white);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);text-align:center;transition:var(--transition-fast);border:var(--border-width-thin)solid var(--color-primary-dark);display:grid;grid-template-rows:auto 1fr auto;gap:var(--spacing-lg);align-items:start}
.benefit-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(214,129,44,.3);border-color:var(--color-primary)}
.benefit-card__icon{font-size:3rem;justify-self:center}
.benefit-card__title{font-size:var(--font-size-lg);color:var(--color-text-primary);font-weight:600}
.benefit-card__description{color:#666;line-height:1.6;align-self:start}

.scenario-item{background:var(--color-bg-secondary);padding:var(--spacing-md);margin:var(--spacing-lg)0;border-radius:var(--border-radius-md);border-left:var(--border-width-thick)solid var(--color-primary-dark);display:grid;grid-template-rows:auto 1fr;gap:var(--spacing-sm)}
.scenario-item h3{font-size:var(--font-size-md);font-weight:600;margin-bottom:var(--spacing-sm)}
.scenario-item p{font-size:var(--font-size-sm);line-height:1.4;align-self:start}
.restaurant-feature{background:rgba(231,177,35,.1);padding:var(--spacing-md);border-radius:var(--border-radius-md);transition:var(--transition-fast);border:1px solid rgba(231,177,35,.3);display:grid;grid-template-rows:auto 1fr auto;gap:var(--spacing-sm);align-items:start}
.restaurant-feature:hover{background:rgba(231,177,35,.2);border-color:var(--color-primary-light)}
.restaurant-feature__icon{font-size:1.5rem;margin-bottom:var(--spacing-sm);justify-self:center}
.restaurant-feature__title{font-size:var(--font-size-sm);font-weight:600;margin-bottom:var(--spacing-sm)}
.restaurant-feature__description{font-size:var(--font-size-xs);line-height:1.3;align-self:start}
.feature{text-align:center;padding:var(--spacing-lg)}
.scenarios{background:var(--color-bg-primary);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);margin:var(--spacing-xl)0;border:var(--border-width-thin)solid var(--color-primary-dark)}

/* Formularios */
.checkbox-item{background:rgba(255,255,255,.15);padding:var(--spacing-lg);border-radius:var(--border-radius-sm);transition:var(--transition-fast);border:1px solid rgba(255,255,255,.2)}
.checkbox-item:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.4)}
.checkbox-item__input{margin-right:var(--spacing-md);width:auto}

/* Botones */
.btn{background:var(--color-primary-dark);color:var(--color-text-light);padding:15px 40px;border:none;border-radius:var(--border-radius-full);font-size:18px;font-weight:600;cursor:pointer;transition:var(--transition-fast);display:inline-block;text-decoration:none;margin:var(--spacing-md);font-family:var(--font-family)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(214,129,44,.4);background:var(--color-primary)}
.btn--primary{background:var(--color-black);color:var(--color-text-light)}
.btn--primary:hover{background:var(--color-gray-dark);color:var(--color-text-light)}

/* Footer */
.contact-info{margin:var(--spacing-lg)0}
.contact-info__paragraph{font-size:var(--font-size-lg);font-weight:600}
.contact-info__link{color:var(--color-text-light);text-decoration:none;font-weight:700}
.contact-info__link:hover{text-decoration:underline}
.footer{text-align:center;padding:var(--spacing-xxl)0;color:var(--color-text-light);opacity:var(--opacity-medium)}
.footer__paragraph{font-size:var(--font-size-md);font-weight:600}
.footer__link{font-weight:700}