/* ============================================================
   home.css — Estilos exclusivos de la página home de REDWORK
   Cargado solo en: views/index/home.php
   Depende de: style.css, responsive.css (cargados en header)
   ============================================================ */

/* ===== TOKENS GLOBALES =====
   Nota: estas variables también se usan en otras vistas.
   Si style.css ya las tiene, eliminar este bloque de home.css */
:root {
    --rw-orange:       #f97316;
    --rw-orange-dark:  #ea6c0a;
    --rw-orange-light: #fb923c;
    --rw-orange-glow:  rgba(249,115,22,0.30);
    --rw-orange-dim:   rgba(249,115,22,0.10);
    --rw-navy:    #0f172a;
    --rw-navy2:   #1e293b;
    --rw-navy3:   #0d1424;
    --rw-slate:   #334155;
    --rw-border:  rgba(148,163,184,0.12);
    --rw-border2: rgba(249,115,22,0.20);
    --rw-text:    #f1f5f9;
    --rw-text2:   #cbd5e1;
    --rw-muted:   #64748b;
    --font-display: 'Bebas Neue', sans-serif;
    --font-body:    'Plus Jakarta Sans', sans-serif;
    --ease-expo:    cubic-bezier(0.16,1,0.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--rw-navy); color: var(--rw-text); overflow-x: hidden; line-height: 1.6; }

/* ===== NAVBAR ===== */
.rw-navbar { position: fixed; top:0; left:0; right:0; z-index:1000; padding:1.1rem 0; transition: all .4s var(--ease-expo); }
.rw-navbar.scrolled { background: rgba(15,23,42,0.93); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding:.65rem 0; border-bottom:1px solid var(--rw-border); box-shadow:0 4px 32px rgba(0,0,0,0.35); }
.rw-logo { font-family: var(--font-display); font-size:2rem; letter-spacing:.08em; color:var(--rw-text)!important; text-decoration:none; line-height:1; }
.rw-logo span { color:var(--rw-orange); }
.nav-link-rw { color:var(--rw-text2)!important; font-weight:500; font-size:.875rem; padding:.4rem .85rem!important; transition:color .2s; letter-spacing:.02em; }
.nav-link-rw:hover { color:var(--rw-orange)!important; }
.btn-nav-login { color:var(--rw-text)!important; border:1px solid rgba(248,250,252,0.18); border-radius:8px; font-weight:600; font-size:.85rem; padding:.45rem 1.15rem; text-decoration:none; transition:all .25s; }
.btn-nav-login:hover { border-color:var(--rw-orange); color:var(--rw-orange)!important; }
.btn-nav-register { background:var(--rw-orange); color:#fff!important; border-radius:8px; font-weight:700; font-size:.85rem; padding:.45rem 1.25rem; text-decoration:none; border:none; transition:all .25s; }
.btn-nav-register:hover { background:var(--rw-orange-dark); color:#fff!important; transform:translateY(-1px); box-shadow:0 4px 16px var(--rw-orange-glow); }
.nav-toggler { background:none; border:1px solid rgba(255,255,255,0.15); border-radius:8px; color:var(--rw-text); padding:.4rem .65rem; font-size:1.1rem; cursor:pointer; transition:border-color .2s; }
.nav-toggler:hover { border-color:var(--rw-orange); }
.mobile-menu { display:none; background:rgba(15,23,42,0.98); border-top:1px solid var(--rw-border); border-radius:12px; margin-top:.75rem; padding:1.5rem; }
.mobile-menu.open { display:block; }

@media (min-width:992px) {
    .nav-desktop { display:flex!important; align-items:center; gap:.15rem; }
    .nav-toggler  { display:none!important; }
    .mobile-menu  { display:none!important; }
}
@media (max-width:991.98px) { .nav-desktop { display:none!important; } }

/* ===== HERO ===== */
#hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; background:var(--rw-navy3); padding-bottom:2rem; }
.hero-grid {
    position:absolute; inset:0;
    background-image: linear-gradient(rgba(249,115,22,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,115,22,0.04) 1px, transparent 1px);
    background-size:56px 56px; z-index:0;
}
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.75; }
.hero-overlay {
    position:absolute; inset:0;
    background: radial-gradient(ellipse 70% 60% at 65% 45%, rgba(249,115,22,0.09) 0%, transparent 65%),
    linear-gradient(180deg, rgba(13,20,36,0.1) 0%, rgba(13,20,36,0.55) 80%, var(--rw-navy) 100%);
    z-index:2;
}
.hero-content { position:relative; z-index:3; padding-top:88px; }

@keyframes fadeUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}
.fu-0 { animation: fadeUp .7s var(--ease-expo) both; }
.fu-1 { animation: fadeUp .78s .1s var(--ease-expo) both; }
.fu-2 { animation: fadeUp .85s .2s var(--ease-expo) both; }
.fu-3 { animation: fadeUp .9s .32s var(--ease-expo) both; }
.fu-4 { animation: fadeUp .95s .45s var(--ease-expo) both; }

.hero-badge {
    display:inline-flex; align-items:center; gap:.5rem;
    background:rgba(249,115,22,0.1); border:1px solid rgba(249,115,22,0.28);
    border-radius:100px; padding:.32rem 1rem;
    font-size:.75rem; font-weight:700; color:var(--rw-orange-light);
    letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.5rem;
}
.hero-badge .dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--rw-orange); animation:pulse-dot 1.8s ease infinite;
}
@keyframes pulse-dot {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(1.5); }
}

.hero-title { font-family:var(--font-display); font-size:clamp(3.2rem,7.5vw,7rem); line-height:.93; letter-spacing:.04em; color:var(--rw-text); }
.hero-title .accent { color:var(--rw-orange); }
.hero-title .stroke { -webkit-text-stroke:2px rgba(241,245,249,0.35); color:transparent; }

.hero-sub { font-size:clamp(.95rem,1.8vw,1.15rem); color:var(--rw-text2); max-width:520px; margin:1.5rem 0 2rem; line-height:1.75; }
.hero-sub strong { color:var(--rw-orange-light); font-weight:600; }

.hero-cta-group { display:flex; gap:.75rem; flex-wrap:wrap; }

.btn-hero-primary {
    display:inline-flex; align-items:center; gap:.55rem;
    background:var(--rw-orange); color:#fff; font-weight:700; font-size:.95rem;
    padding:.85rem 1.75rem; border-radius:10px; text-decoration:none;
    border:none; cursor:pointer; transition:all .3s var(--ease-expo);
    position:relative; overflow:hidden;
}
.btn-hero-primary::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 55%);
    opacity:0; transition:opacity .3s;
}
.btn-hero-primary:hover { background:var(--rw-orange-dark); color:#fff; transform:translateY(-2px); box-shadow:0 8px 28px var(--rw-orange-glow); }
.btn-hero-primary:hover::before { opacity:1; }

.btn-hero-ghost {
    display:inline-flex; align-items:center; gap:.55rem;
    background:transparent; color:var(--rw-text); font-weight:600; font-size:.95rem;
    padding:.85rem 1.75rem; border-radius:10px; text-decoration:none;
    border:1px solid rgba(241,245,249,0.18); transition:all .3s var(--ease-expo);
}
.btn-hero-ghost:hover { border-color:rgba(249,115,22,0.45); color:var(--rw-orange-light); background:rgba(249,115,22,0.06); transform:translateY(-2px); }

.hero-trust { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }
.trust-item { display:flex; align-items:center; gap:.5rem; font-size:.95rem; color:var(--rw-muted); font-weight:500; }
.trust-item i { color:#4ade80; font-size:.75rem; }

/* Scroll cue */
.scroll-cue { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.4rem; animation:fadeUp 1s .9s var(--ease-expo) both; }
.scroll-cue-text { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rw-muted); }
.scroll-cue-line { width:1px; height:48px; background:linear-gradient(180deg, var(--rw-orange), transparent); animation:line-drop 1.5s ease-in-out infinite; }
@keyframes line-drop {
    0%  { transform:scaleY(0); transform-origin:top; }
    50% { transform:scaleY(1); transform-origin:top; }
    51% { transform:scaleY(1); transform-origin:bottom; }
    100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ===== TRACKING CARD ===== */
.track-card {
    background: rgba(13,20,36,0.75);
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    font-family: var(--font-body);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 48px rgba(0,0,0,0.4);
}
.track-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--rw-orange), transparent);
}
.track-badge {
    position:absolute; top:14px; left:14px; z-index:10;
    background:rgba(13,20,36,0.9); border:1px solid rgba(249,115,22,0.4);
    border-radius:100px; padding:5px 12px;
    display:flex; align-items:center; gap:7px;
    font-size:11px; font-weight:700; color:var(--rw-orange); letter-spacing:.04em;
}
.track-pulse-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; animation:tpulse 1.6s ease infinite; }
@keyframes tpulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%     { opacity:.4; transform:scale(1.5); }
}
.track-eta-pill {
    position:absolute; top:14px; right:14px; z-index:10;
    background:var(--rw-orange); border-radius:100px;
    padding:5px 12px; font-size:11px; font-weight:700; color:#fff;
    transition:background .3s;
}
.map-area { position:relative; height:210px; background:#080e1a; overflow:hidden; }
.map-svg  { width:100%; height:100%; }
.track-truck { position:absolute; z-index:6; transform:translate(-50%,-50%); transition:left .05s linear, top .05s linear; }
.track-bottom { padding:14px 18px 18px; background:rgba(13,20,36,0.85); border-top:1px solid rgba(148,163,184,0.08); }
.track-row { display:flex; align-items:center; justify-content:space-between; }
.track-avatar {
    width:38px; height:38px; border-radius:50%;
    background:rgba(249,115,22,0.15); border:2px solid var(--rw-orange);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; color:var(--rw-orange); flex-shrink:0;
}
.track-name    { font-size:13px; font-weight:700; color:var(--rw-text); }
.track-role    { font-size:11px; color:var(--rw-muted); margin-top:1px; }
.track-eta-num { font-size:24px; font-weight:800; color:var(--rw-orange); line-height:1; text-align:right; }
.track-eta-lbl { font-size:10px; color:var(--rw-muted); text-align:right; margin-top:1px; }
.track-progress { width:100%; height:4px; background:rgba(148,163,184,0.12); border-radius:4px; margin-top:12px; overflow:hidden; }
.track-fill    { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--rw-orange),#fbbf24); width:0%; transition:width .3s ease; }
.track-labels  { display:flex; justify-content:space-between; font-size:10px; color:var(--rw-muted); margin-top:5px; }
.track-toggle  { display:flex; gap:6px; margin-bottom:10px; }
.track-toggle-btn {
    flex:1; padding:5px 0; border-radius:8px; border:1px solid var(--rw-border);
    background:transparent; color:var(--rw-muted); font-size:11px; font-weight:600;
    cursor:pointer; transition:all .25s; font-family:var(--font-body);
}
.track-toggle-btn.active { background:rgba(249,115,22,0.12); border-color:rgba(249,115,22,0.35); color:var(--rw-orange); }

/* ===== SECCIONES ===== */
#como-funciona { padding:7rem 0; background:var(--rw-navy2); position:relative; }
#como-funciona::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(249,115,22,.35), transparent); }

.section-label { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rw-orange); margin-bottom:.6rem; }
.section-title { font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.4rem); letter-spacing:.04em; line-height:1.05; color:var(--rw-text); }
.section-desc  { color:var(--rw-text2); font-size:1rem; line-height:1.75; max-width:480px; }

.step-card { background:rgba(15,23,42,.6); border:1px solid var(--rw-border); border-radius:18px; padding:2rem 1.75rem; height:100%; transition:all .4s var(--ease-expo); position:relative; overflow:hidden; }
.step-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(249,115,22,.06) 0%, transparent 65%); opacity:0; transition:opacity .4s; }
.step-card:hover { border-color:rgba(249,115,22,.28); transform:translateY(-4px); box-shadow:0 18px 48px rgba(0,0,0,.4); }
.step-card:hover::after { opacity:1; }
.step-num { font-family:var(--font-display); font-size:5.5rem; line-height:1; color:rgba(249,115,22,0.1); position:absolute; top:.75rem; right:1.25rem; transition:color .4s; }
.step-card:hover .step-num { color:rgba(249,115,22,0.2); }
.step-icon-box { width:52px; height:52px; background:rgba(249,115,22,0.1); border:1px solid rgba(249,115,22,0.22); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1.1rem; transition:all .3s; }
.step-card:hover .step-icon-box { background:rgba(249,115,22,0.18); transform:scale(1.08); }
.step-icon-box i { color:var(--rw-orange); }
.step-title { font-weight:700; font-size:1.05rem; color:var(--rw-text); margin-bottom:.5rem; }
.step-desc  { font-size:.87rem; color:var(--rw-text2); line-height:1.7; }

#servicios { padding:7rem 0; background:var(--rw-navy); }
.service-card { background:rgba(30,41,59,.45); border:1px solid var(--rw-border); border-radius:16px; padding:1.6rem 1.4rem; transition:all .35s var(--ease-expo); text-decoration:none; display:block; height:100%; }
.service-card:hover { border-color:rgba(249,115,22,0.32); background:rgba(249,115,22,0.05); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.svc-card-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:.9rem; transition:transform .3s; }
.service-card:hover .svc-card-icon { transform:scale(1.1) rotate(-5deg); }
.svc-card-title { font-weight:700; font-size:.98rem; color:var(--rw-text); margin-bottom:.35rem; }
.svc-card-desc  { font-size:.82rem; color:var(--rw-text2); line-height:1.65; }
.svc-card-arrow { margin-top:1rem; font-size:.8rem; font-weight:600; color:var(--rw-orange); opacity:0; transform:translateX(-8px); transition:all .3s; }
.service-card:hover .svc-card-arrow { opacity:1; transform:translateX(0); }

.ic-orange { background:rgba(249,115,22,.12); color:var(--rw-orange); }
.ic-blue   { background:rgba(59,130,246,.12);  color:#60a5fa; }
.ic-green  { background:rgba(74,222,128,.12);   color:#4ade80; }
.ic-purple { background:rgba(167,139,250,.12);  color:#a78bfa; }
.ic-cyan   { background:rgba(34,211,238,.12);   color:#22d3ee; }
.ic-yellow { background:rgba(251,191,36,.12);   color:#fbbf24; }
.ic-teal   { background:rgba(45,212,191,.12);   color:#2dd4bf; }
.ic-rose   { background:rgba(251,113,133,.12);  color:#fb7185; }

#membresias { padding:7rem 0; background:var(--rw-navy2); position:relative; }
#membresias::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(249,115,22,.35), transparent); }
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1.5rem; }
.plan-card { background:rgba(15,23,42,.6); border:1px solid var(--rw-border); border-radius:20px; padding:2.25rem 1.75rem; position:relative; overflow:hidden; transition:all .4s var(--ease-expo); height:100%; }
.plan-card.featured { background:rgba(249,115,22,0.07); border-color:rgba(249,115,22,0.35); }
.plan-card.featured::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--rw-orange), transparent); }
.plan-card:hover { transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.plan-card.featured:hover { box-shadow:0 20px 50px rgba(249,115,22,.15); }
.plan-popular { position:absolute; top:1.1rem; right:1.1rem; background:var(--rw-orange); color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.22rem .7rem; border-radius:100px; }
.plan-zone-badges { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.6rem; }
.zone-badge { font-size:.65rem; font-weight:700; letter-spacing:.06em; padding:.2rem .55rem; border-radius:6px; background:rgba(249,115,22,0.12); border:1px solid rgba(249,115,22,.2); color:var(--rw-orange-light); }
.plan-name   { font-family:var(--font-display); font-size:1.4rem; letter-spacing:.05em; margin-bottom:.15rem; }
.plan-price  { font-family:var(--font-display); font-size:3.2rem; line-height:1; color:var(--rw-text); margin:.75rem 0 .15rem; }
.plan-price sup { font-size:1.4rem; vertical-align:super; }
.plan-price sub { font-size:.95rem; color:var(--rw-muted); }
.plan-tagline { font-size:.78rem; color:var(--rw-muted); margin-bottom:1.25rem; font-style:italic; }
.plan-feats  { list-style:none; padding:0; margin:0 0 1.75rem; }
.plan-feats li { display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color:var(--rw-text2); padding:.45rem 0; border-bottom:1px solid var(--rw-border); }
.plan-feats li:last-child { border-bottom:none; }
.plan-feats li i.fa-check { color:#4ade80; flex-shrink:0; margin-top:.15rem; }
.plan-feats li i.fa-xmark { color:var(--rw-muted); flex-shrink:0; margin-top:.15rem; }
.plan-feats li.dim    { color:var(--rw-muted); }
.plan-feats li strong { color:var(--rw-orange-light); }
.btn-plan         { display:block; text-align:center; padding:.85rem; border-radius:10px; font-weight:700; font-size:.9rem; text-decoration:none; transition:all .3s; }
.btn-plan-outline { border:1px solid rgba(241,245,249,.18); color:var(--rw-text); }
.btn-plan-outline:hover { border-color:var(--rw-orange); color:var(--rw-orange); }
.btn-plan-solid   { background:var(--rw-orange); color:#fff; border:1px solid var(--rw-orange); }
.btn-plan-solid:hover { background:var(--rw-orange-dark); color:#fff; box-shadow:0 8px 24px var(--rw-orange-glow); }

#estadisticas { padding:5rem 0; background:var(--rw-navy); }
.big-stat-num   { font-family:var(--font-display); font-size:clamp(3rem,6vw,4.5rem); color:var(--rw-orange); line-height:1; }
.big-stat-label { font-size:.85rem; color:var(--rw-text2); margin-top:.35rem; line-height:1.5; }

#cta { padding:7rem 0; background:var(--rw-navy2); position:relative; overflow:hidden; }
.cta-glow  { position:absolute; width:700px; height:700px; background:radial-gradient(circle, rgba(249,115,22,.1) 0%, transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.cta-title { font-family:var(--font-display); font-size:clamp(2.5rem,5.5vw,5rem); letter-spacing:.04em; line-height:.96; color:var(--rw-text); }
.cta-title .outline { color:var(--rw-orange); }
.cta-note  { font-size:.78rem; color:var(--rw-muted); margin-top:1.25rem; font-style:italic; }
.cta-note i { color:var(--rw-orange); }

footer { background:var(--rw-navy3); padding:4.5rem 0 2rem; border-top:1px solid var(--rw-border); }
.footer-logo    { font-family:var(--font-display); font-size:2rem; letter-spacing:.07em; color:var(--rw-text); text-decoration:none; line-height:1; }
.footer-logo span { color:var(--rw-orange); }
.footer-desc    { font-size:.87rem; color:var(--rw-muted); margin-top:.7rem; max-width:275px; line-height:1.7; }
.footer-heading { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--rw-muted); margin-bottom:.9rem; }
.footer-links   { list-style:none; padding:0; }
.footer-links li { margin-bottom:.5rem; }
.footer-links a  { color:var(--rw-text2); text-decoration:none; font-size:.87rem; transition:color .2s; }
.footer-links a:hover { color:var(--rw-orange); }
.social-btn { width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid var(--rw-border); display:inline-flex; align-items:center; justify-content:center; color:var(--rw-muted); text-decoration:none; font-size:.85rem; transition:all .25s; }
.social-btn:hover { background:rgba(249,115,22,.15); border-color:rgba(249,115,22,.3); color:var(--rw-orange); }
.footer-bottom { border-top:1px solid var(--rw-border); margin-top:3rem; padding-top:1.5rem; font-size:.78rem; color:var(--rw-muted); }

/* ===== SCROLL REVEAL ===== */
.reveal    { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-expo), transform .7s var(--ease-expo); }
.reveal.in { opacity:1; transform:none; }
.rd-1 { transition-delay:.1s; }
.rd-2 { transition-delay:.2s; }
.rd-3 { transition-delay:.3s; }
.rd-4 { transition-delay:.4s; }

/* ===== RESPONSIVE ===== */
@media (max-width:991.98px) { .hero-stats { gap:1.25rem 1.75rem; } }
@media (max-width:767.98px) {
    #hero { min-height:auto; padding-bottom:3rem; }
    .hero-content { padding-top:80px; }
    .hero-cta-group { flex-direction:column; }
    .btn-hero-primary, .btn-hero-ghost { justify-content:center; }
    .plan-grid { grid-template-columns:1fr; }
    #cta { padding:5rem 0; }
}
@media (max-width:575.98px) { .hero-trust { gap:.65rem; } }

/* ============================================ */
/* SECCIÓN: TRABAJOS URGENTES                   */
/* ============================================ */
#urgentes {
    position: relative;
    padding: 5rem 0;
    background: #080e1a;
    border-top: 1px solid #1a2236;
    border-bottom: 1px solid #1a2236;
}

#urgentes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
}

.urgentes-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #fbbf24;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0.35rem 1rem;
    border-radius: 2rem;
    margin-bottom: 1rem;
}

.urgentes-label i {
    animation: urgente-pulse 1.5s infinite;
}

@keyframes urgente-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.urgentes-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 0.75rem;
}

.urgentes-subtitle {
    color: #94a3b8;
    font-size: 1rem;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.urgentes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.urgentes-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 1.25rem;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.urgentes-card:hover {
    border-color: #fbbf24;
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(251, 191, 36, 0.1);
}

.urgentes-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

/* Cambiado a gradiente amarillo para ambas cards */
.urgentes-card.cliente::before {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.urgentes-card.profesional::before {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.urgentes-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
}

/* Cambiado a amarillo para ambas cards */
.urgentes-card.cliente .urgentes-card-icon {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.urgentes-card.profesional .urgentes-card-icon {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.urgentes-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
}

.urgentes-card p {
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.urgentes-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.urgentes-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #1a2236;
    color: #cbd5e1;
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
}

.urgentes-feature i {
    font-size: 0.65rem;
    color: #fbbf24;
}

.urgentes-highlight {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
}

/* Botones actualizados a color AMARILLO para coherencia con tema urgente */
.urgentes-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
}

/* Botón Cliente - Amarillo */
.urgentes-btn-cliente {
    background: #fbbf24;
    color: #000;
}

.urgentes-btn-cliente:hover {
    background: #f59e0b;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.35);
}

/* Botón Profesional - Amarillo también para mantener coherencia */
.urgentes-btn-pro {
    background: #fbbf24;
    color: #000;
}

.urgentes-btn-pro:hover {
    background: #f59e0b;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.35);
}

.urgentes-note {
    text-align: center;
    color: #64748b;
    font-size: 0.98rem;
    margin-top: 2rem;
}

.urgentes-note a {
    color: #fbbf24;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    #urgentes {
        padding: 3rem 0;
    }

    .urgentes-title {
        font-size: 2rem;
    }

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

    .urgentes-card {
        padding: 1.5rem;
    }

    .urgentes-features {
        gap: 0.4rem;
    }

    .urgentes-feature {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }
}