/* ══ VARIABLES ══ */
:root{
  /* == TINTA CALIDA (2026-08-21) ==========================================
     El fondo era azul marino (#0a0f1e) y el naranja de marca se peleaba con
     el: son opuestos en la rueda. Un ocre muy oscuro los mete en familia. La
     app es el interior de una furgoneta de noche, no un panel de control.
     La PORTADA (#desktop-landing) conserva su paleta azul propia, mas abajo. */
  --bg:#14100d; --bg2:#1c1714; --bg3:#241d18; --bg4:#302620;
  --primary:#ee5a26; --primary2:#cb4110; --primarylt:#f6a589;
  /* --primary es color de RELLENO (botones, barras, sellos). Para TEXTO naranja
     va --accent-ink: sobre fondo oscuro sirve el mismo naranja, pero sobre fondo
     claro se queda en 3,3:1 y no llega a AA, así que allí se oscurece. */
  --accent-ink:#ee5a26;
  --text:#f7f0ea; --text2:#a99a8e; --text3:#948578;
  /* --text3 va en #948578 y no en el #7d7167 de la maqueta: aquel se quedaba
     en 3,5:1 sobre --bg3 y v205 arreglo justo este token para que llegase a
     AA. Con este: 5,30:1 sobre --bg y 4,66:1 sobre --bg3. No bajarlo. */
  --border:rgba(255,235,220,0.09); --border2:rgba(255,235,220,0.17);
  --borderp:rgba(238,90,38,0.28);
  --success:#10b981; --danger:#ef4444; --warning:#f59e0b; --info:#3b82f6; --star:#f5a623;
  --mint:#14c8ad; --mintbg:rgba(20,200,173,0.15);
  --shadow:rgba(0,0,0,0.5);
  /* == EL PARTE DE TRABAJO ================================================
     Dos materiales con oficios distintos: TINTA para navegar, listar y
     conversar; PAPEL (albaran) para donde hay dinero. El papel NO cambia con
     el tema: un albaran es del mismo color de dia y de noche. */
  --papel:#e9e1d1; --papel2:#dad0bc; --tinta:#241f18; #5f5546;
  --sello-ok:#186b4d; --sello-esp:#9a6410; --sello-no:#9c2f22;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:18px; --rsm:12px; --rlg:22px; --rxl:28px;
  --shadow-md:0 6px 20px -6px rgba(0,0,0,.45); --shadow-lg:0 16px 40px -12px rgba(0,0,0,.6);
  --ease:cubic-bezier(.4,0,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
}
/* App instalada (standalone): garantizar un mínimo de safe-area arriba/abajo aunque
   env() reporte 0 (típico en Android/PWA). Evita que la barra de estado del teléfono
   tape el header del chat y su flecha de "volver". */
html.standalone{ --st:max(env(safe-area-inset-top,0px), 44px); --sb:max(env(safe-area-inset-bottom,0px), 10px); }
/* Detección nativa por CSS (además de la clase JS): cubre PWA instalada aunque el JS
   no llegue a marcar la clase. 44px despeja la barra de estado / notch de iPhone. */
@media (display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){
  :root{ --st:max(env(safe-area-inset-top,0px), 44px); --sb:max(env(safe-area-inset-bottom,0px), 10px); }
}
/* ══ LIGHT THEME ══ */
html.light{
  /* El modo claro acompana a la tinta calida: papel, no azul frio. */
  --bg:#f7f3ec; --bg2:#fffdf9; --bg3:#efe9df; --bg4:#e3dbcd;
  --primary:#b8410f; --primary2:#92340c; --primarylt:#f07d4c;
  --accent-ink:#b8410f;   /* naranja legible sobre claro (≈5:1) */
  --text:#211b15; --text2:#5c5045; --text3:#6e6155;
  --border:rgba(33,27,21,0.09); --border2:rgba(33,27,21,0.17);
  --borderp:rgba(255,90,31,0.3);
  --success:#059669; --danger:#dc2626; --warning:#d97706;
  --mint:#0fb9a3; --mintbg:rgba(15,185,163,0.13);
  --shadow:rgba(22,22,42,0.07);
}
html.light body,html.light #app{background:var(--bg);color:var(--text);}
/* Nav inferior en light */
html.light .nav-bar{background:rgba(255,255,255,0.95);border-top:1px solid var(--border);}
html.light .topbar{background:rgba(240,244,248,0.96);border-bottom:1px solid var(--border);}
html.light .screen{background:var(--bg);}
/* Cards y listas */
html.light .job-card,html.light .worker-card{background:var(--bg2);border-color:var(--border);box-shadow:0 2px 8px var(--shadow);}
/* Chat */
html.light .chat-hdr{background:rgba(255,255,255,0.97);}
html.light .chat-input-row{background:rgba(240,244,248,0.97);}
html.light .chat-bubble-me{background:var(--primary);color:#fff;}
html.light .chat-bubble-other{background:#fff;color:var(--text);border:1px solid var(--border);}
/* Inputs */
html.light input,html.light textarea,html.light select{background:var(--bg2);border-color:var(--border);color:var(--text);}
html.light input::placeholder,html.light textarea::placeholder{color:var(--text3);}
/* Modal */
html.light .modal-box{background:var(--bg2);}
html.light .modal-bg{background:rgba(0,0,0,0.4);}
/* Light mode: sidebar desktop */
html.light #desk-sidebar{background:var(--bg2);}
html.light .desk-nav-item{color:var(--text2);}
html.light .desk-nav-item:hover{background:var(--bg3);color:var(--text);}
html.light .desk-nav-item.on{background:rgba(238,90,38,.1);color:var(--primary);}
/* Light mode: chips, pro-stats, worker cards */
html.light .chip-sm{background:var(--bg3);border-color:var(--border);color:var(--text2);}
html.light .chip-sm.on{background:rgba(238,90,38,.12);border-color:var(--borderp);color:var(--primary);}
html.light .pro-stat{background:var(--bg3);border-color:var(--border);}
html.light .chips-row .chip{background:var(--bg3);border:1px solid var(--border);color:var(--text2);}
html.light .chips-row .chip.on{background:rgba(238,90,38,.12);border-color:var(--borderp);color:var(--primary);}
/* Light mode: text contrast fixes */
html.light .sec-title{color:var(--text);}
html.light .topbar-title{color:var(--text);}
html.light .label{color:var(--text2);}
html.light .ni{color:var(--text3);}
html.light .ni.on{color:var(--primary);}
html.light .bnav{background:rgba(255,255,255,0.97);border-top:1px solid var(--border);}
html.light .topbar{background:rgba(240,244,248,0.97);}
/* Botón toggle */
.theme-toggle-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:20px;padding:6px 14px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text2);
  transition:all .2s;
}
.theme-toggle-btn:hover{border-color:var(--primary);color:var(--primary);}
/* ══ DESKTOP SIDEBAR MODE ══ */
#desk-sidebar{
  display:none;width:240px;flex-shrink:0;flex-direction:column;
  background:var(--bg2);border-right:1px solid var(--border);overflow:hidden;
}
#app.desk-mode{
  position:fixed !important;inset:0 !important;
  display:flex !important;flex-direction:row !important;
  width:100% !important;max-width:100% !important;
  left:0 !important;transform:none !important;box-shadow:none !important;
}
#app.desk-mode #desk-sidebar{display:flex;}
#app.desk-mode .bnav{display:none !important;}
#app.desk-mode .screen.active{display:flex;flex:1;overflow:hidden;}
#app.desk-mode .topbar{padding-top:14px !important;}
/* En desktop las tarjetas de rubro del home se estiraban a ~383px (borrosas).
   Mismas 6 columnas que la landing → ~185px por tarjeta. (Tenia max-width:1100px sin
   centrar: la rejilla quedaba pegada a la izquierda con 100px de aire a la derecha,
   desalineada del resto del inicio. 2026-09-22) */
#app.desk-mode .cat-grid{grid-template-columns:repeat(6,1fr);gap:12px;}
.desk-nav-logo{
  display:flex;align-items:center;gap:10px;
  padding:18px 20px 14px;border-bottom:1px solid var(--border);cursor:pointer;
}
.desk-nav-area{flex:1;padding:10px 0;overflow-y:auto;}
.desk-nav-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;margin:2px 10px;
  cursor:pointer;border-radius:12px;
  font-size:14px;font-weight:500;color:var(--text2);
  transition:all .15s;position:relative;
}
.desk-nav-item:hover{background:var(--bg3);color:var(--text);}
.desk-nav-item.on{background:rgba(238,90,38,.12);color:var(--primary);font-weight:600;}
.desk-nav-item svg{width:20px;height:20px;stroke-width:2;flex-shrink:0;}
.desk-nav-badge{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:var(--danger);color:#fff;font-size:11px;font-weight:800;
  padding:1px 6px;border-radius:12px;min-width:16px;text-align:center;
}
.desk-nav-footer{padding:14px;border-top:1px solid var(--border);}
/* Zone chips (barrio filter) */
.chips-row-sm{display:flex;gap:6px;padding:8px 16px;overflow-x:auto;flex-shrink:0;}
.chips-row-sm::-webkit-scrollbar{display:none;}
.chip-sm{display:flex;align-items:center;gap:4px;padding:4px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0;}
.chip-sm.on{background:rgba(238,90,38,.15);border-color:var(--borderp);color:var(--primary);}
/* ══ RESET ══ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;overflow:hidden;}
/* ══ SHELL ══ */
/* ── MOBILE: app ocupa toda la pantalla ── */
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg3);}
html.light #app{background:rgba(255,255,255,0.97);}

/* ── DESKTOP grande: landing page completa, app móvil oculta ── */
@media(min-width:900px){
  html,body{overflow:auto;background:var(--bg);}
  #app{display:none !important;}
  #desktop-landing{display:flex !important;}
}
/* ── Pantalla mediana (tablet o ventana achicada): mostrar la app móvil centrada como frame ── */
@media(min-width:600px) and (max-width:899px){
  body{background:#050816;overflow:hidden;}
  #app{position:fixed;inset:0;left:50%;transform:translateX(-50%);width:480px;max-width:480px;box-shadow:0 0 80px rgba(0,0,0,.6);}
}

/* ── LANDING DESKTOP ── */
#desktop-landing{
  display:none;
  min-height:100vh;
  flex-direction:column;
  background:
    radial-gradient(1100px 720px at 8% -12%, rgba(255,142,84,.30), transparent 60%),
    radial-gradient(1020px 840px at 108% 6%, rgba(150,92,255,.22), transparent 62%),
    radial-gradient(860px 640px at 62% 114%, rgba(255,120,60,.13), transparent 64%),
    linear-gradient(180deg,#1e2238 0%,#171b2c 44%,#13141f 100%);
  overflow-x:hidden;
  position:relative;
  /* La landing se diseñó dark-first: forzar la paleta OSCURA siempre (independiente del
     modo claro/oscuro del navegador) para que NINGÚN título/texto quede oscuro sobre el fondo oscuro */
  --bg:#0a0f1e; --bg2:#111827; --bg3:#141c2e; --bg4:#1e293b;
  --primary:#ee5a26; --primary2:#cb4110; --primarylt:#f6a589;
  --accent-ink:#ee5a26;   /* la landing siempre es oscura: el naranja de marca ya pasa */
  --text:#f0f4ff; --text2:#8896b3; --text3:#7385a8;
  --border:rgba(255,255,255,0.07); --borderp:rgba(238,90,38,0.28);
  --success:#10b981; --danger:#ef4444; --warning:#f59e0b; --shadow:rgba(0,0,0,0.4);
  /* base color claro: los títulos sin color explícito (.dl-section-h2/.dl-feat-title/…)
     heredan de aquí y no del body (que en modo claro computa color oscuro) */
  color:var(--text);
}
.dl-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 60px;height:72px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(24,28,48,.6);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  position:sticky;top:0;z-index:50;
}
.dl-nav-logo{display:flex;align-items:center;gap:12px;cursor:pointer;}
.dl-nav-links{display:flex;align-items:center;gap:32px;}
.dl-nav-link{font-size:14px;font-weight:500;color:#c6ccdf;cursor:pointer;transition:color .15s;text-decoration:none;}
.dl-nav-link:hover{color:#fff;}
/* botón "Ingresar"/"Cómo funciona" viven sobre fondo oscuro (nav+hero) → color claro explícito */
.dl-nav .dl-btn-secondary,.dl-hero .dl-btn-secondary{color:#eef0f8;border-color:rgba(255,255,255,.22);}
.dl-nav .dl-btn-secondary:hover,.dl-hero .dl-btn-secondary:hover{color:#fff;border-color:rgba(255,255,255,.42);}
.dl-hero{
  display:flex;align-items:center;gap:60px;
  padding:80px 60px;max-width:1200px;margin:0 auto;width:100%;
}
.dl-hero-left{flex:1;min-width:0;}
@media(max-width:1100px){.dl-hero{gap:40px;padding:60px 40px;}
  .dl-phone-wrap{width:260px;height:520px;}
  .dl-hero-h1{font-size:42px;}
}
.dl-hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  border-radius:100px;padding:6px 15px 6px 13px;
  font-size:12px;font-weight:600;color:#ffd9c2;letter-spacing:.01em;
  margin-bottom:26px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 16px -6px rgba(0,0,0,.5);
}
.dl-hero-h1{
  font-family:'Manrope','Space Grotesk',sans-serif;
  font-size:58px;font-weight:800;line-height:1.0;
  letter-spacing:-2.2px;margin-bottom:22px;text-wrap:balance;
  /* color explícito: el hero es SIEMPRE oscuro; no depender de var(--text) que se invierte en modo claro */
  color:#f7f8fd;text-shadow:0 1px 26px rgba(6,8,20,.55);
}
.dl-hero-h1 span{
  background:linear-gradient(100deg,#ec8451 0%,#ee5a26 44%,#ff3d8b 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(255,90,60,.4));
}
.dl-hero-sub{
  font-size:18px;color:#c6ccdf;line-height:1.6;
  margin-bottom:36px;max-width:480px;
}
.dl-hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px;}
.dl-btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:700;
  font-size:16px;border:none;border-radius:14px;padding:16px 32px;
  cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease);
  box-shadow:0 10px 28px -10px rgba(238,90,38,.6);
}
.dl-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -10px rgba(238,90,38,.72);}
.dl-btn-secondary{
  background:transparent;color:var(--text);
  font-family:'Manrope','Space Grotesk',sans-serif;font-weight:600;
  font-size:16px;border:1.5px solid var(--border);border-radius:12px;
  padding:16px 32px;cursor:pointer;transition:all .15s;
}
.dl-btn-secondary:hover{border-color:var(--borderp);color:var(--primary);}
.dl-stats{display:flex;gap:36px;}
.dl-stat-val{font-family:'Manrope','Space Grotesk',sans-serif;font-size:31px;font-weight:800;color:#f7f8fd;letter-spacing:-.01em;}
.dl-stat-lbl{font-size:13px;color:#aab0c6;margin-top:2px;}
.dl-hero-right{flex-shrink:0;position:relative;padding:20px 50px 30px 0;}
.dl-phone-wrap{
  width:300px;height:600px;
  background:#0a0f1e;border-radius:44px;
  border:8px solid #23272f;
  box-shadow:0 44px 90px -24px rgba(10,12,28,.5),0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.06),0 40px 130px -26px rgba(255,120,60,.55);
  overflow:hidden;position:relative;
}
.dl-phone-notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:28px;background:var(--bg4);border-radius:0 0 20px 20px;z-index:10;
}
.dl-phone-screen{width:100%;height:100%;overflow:hidden;}
.dl-phone-screen iframe{width:375px;height:667px;border:none;transform:scale(0.8);transform-origin:top left;}

/* Features */
.dl-features{background:var(--bg2);padding:80px 60px;}
.dl-features-inner{max-width:1200px;margin:0 auto;}
.dl-section-tag{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;}
.dl-section-h2{font-family:'Manrope','Space Grotesk',sans-serif;font-size:36px;font-weight:800;margin-bottom:48px;letter-spacing:-.5px;}
.dl-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.dl-feat-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:20px;
  padding:28px;transition:border-color .2s;
}
.dl-feat-card:hover{border-color:var(--borderp);}
.dl-feat-ico{font-size:32px;margin-bottom:16px;}
.dl-feat-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:18px;font-weight:700;margin-bottom:8px;}
.dl-feat-desc{font-size:14px;color:var(--text2);line-height:1.6;}

/* Categorías */
.dl-cats{padding:80px 60px;}
.dl-cats-inner{max-width:1200px;margin:0 auto;}
.dl-cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:40px;}
.dl-cat-card{position:relative;background:var(--bg3);border:1px solid var(--border);border-radius:16px;aspect-ratio:1;cursor:pointer;transition:all .2s;overflow:hidden;display:flex;align-items:flex-end;}
.dl-cat-card:hover{border-color:var(--borderp);transform:translateY(-3px);}
.dl-cat-card:hover .dl-cat-img{transform:scale(1.08);}
.dl-cat-img{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--bg3);transition:transform .4s;}
.dl-cat-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,30,.05) 0%,rgba(10,15,30,.6) 60%,rgba(10,15,30,.95) 100%);}
.dl-cat-body{position:relative;padding:14px;width:100%;}
.dl-cat-ico{position:absolute;top:10px;right:10px;font-size:20px;background:rgba(10,15,30,.7);backdrop-filter:blur(8px);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.dl-cat-name{font-family:'Manrope','Space Grotesk',sans-serif;font-size:13px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);}
@media(max-width:900px){.dl-cat-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.dl-cat-grid{grid-template-columns:repeat(2,1fr);}.dl-cats{padding:40px 20px;}}

/* Sección destacada con imágenes (estilo Urban Company) */
.dl-featured{padding:80px 60px;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.dl-featured-inner{max-width:1200px;margin:0 auto;}
.dl-featured-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:260px 260px;gap:16px;margin-top:40px;}
.dl-featured-card{position:relative;border-radius:18px;cursor:pointer;overflow:hidden;background-size:cover;background-position:center;background-color:var(--bg4);height:100%;display:flex;align-items:flex-end;transition:transform .3s, box-shadow .3s;}
.dl-featured-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.35);}
.dl-featured-card.big{grid-row:1 / 3;height:100%;}
.dl-featured-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,30,.0) 30%,rgba(10,15,30,.7) 75%,rgba(10,15,30,.95) 100%);}
.dl-featured-body{position:relative;padding:22px;width:100%;color:#fff;}
.dl-featured-body h3{font-family:'Manrope','Space Grotesk',sans-serif;font-size:18px;font-weight:800;margin-bottom:6px;text-shadow:0 1px 6px rgba(0,0,0,.6);}
.dl-featured-card.big .dl-featured-body h3{font-size:30px;line-height:1.1;margin-bottom:10px;}
.dl-featured-body p{font-size:13px;color:rgba(255,255,255,.85);line-height:1.5;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.dl-featured-card.big .dl-featured-body p{font-size:15px;}
.dl-featured-tag{display:inline-block;background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;margin-bottom:10px;}
.dl-featured-cta{margin-top:14px;display:inline-flex;align-items:center;gap:6px;background:var(--primary);color:#fff;padding:8px 18px;border-radius:8px;font-size:13px;font-weight:700;transition:background .15s;}
.dl-featured-card:hover .dl-featured-cta{background:var(--primary2);}
@media(max-width:1100px){.dl-featured-grid{grid-template-rows:220px 220px;}}
@media(max-width:900px){.dl-featured{padding:50px 24px;}.dl-featured-grid{grid-template-columns:1fr 1fr;grid-template-rows:280px 200px 200px;}.dl-featured-card.big{grid-row:auto;grid-column:1 / 3;height:280px;}}
@media(max-width:520px){.dl-featured-grid{grid-template-columns:1fr;grid-template-rows:auto;}.dl-featured-card,.dl-featured-card.big{height:200px;grid-column:1;grid-row:auto;}}

/* CTA */
.dl-cta{
  background:linear-gradient(135deg,rgba(238,90,38,.1),rgba(203,65,16,.05));
  border-top:1px solid var(--borderp);border-bottom:1px solid var(--borderp);
  padding:80px 60px;text-align:center;
}
.dl-cta-inner{max-width:600px;margin:0 auto;}
.dl-cta h2{font-family:'Manrope','Space Grotesk',sans-serif;font-size:40px;font-weight:800;margin-bottom:16px;letter-spacing:-.5px;}
.dl-cta p{font-size:18px;color:var(--text2);margin-bottom:36px;}
.dl-cta-btns{display:flex;gap:14px;justify-content:center;}

/* ── Footer ────────────────────────────────────────────────────────
   Los encabezados de columna pasan a etiqueta pequeña y espaciada: son
   rótulos, no titulares, y compitiendo en peso con los enlaces ensuciaban
   la lectura. Un filo naranja arriba cierra la página. */
.dl-footer{padding:56px 60px 0;border-top:1px solid var(--border);background:var(--bg);
  position:relative;}
.dl-footer::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(238,90,38,.5),transparent);}
.dl-footer-grid{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:44px;}
.dl-footer-col{display:flex;flex-direction:column;align-items:flex-start;}
.dl-footer-h{font-family:'Manrope','Space Grotesk',sans-serif;font-size:10.5px;
  font-weight:700;color:var(--text2);margin-bottom:13px;text-transform:uppercase;
  letter-spacing:.13em;}
.dl-footer-link{font-size:13.5px;color:var(--text2);cursor:pointer;padding:5px 0;
  line-height:1.45;position:relative;transition:color .2s var(--ease),transform .2s var(--ease);}
.dl-footer-link::after{content:'';position:absolute;left:0;bottom:3px;width:0;height:1px;
  background:var(--accent-ink);transition:width .22s var(--ease);}
.dl-footer-link:hover{color:var(--accent-ink);transform:translateX(2px);}
.dl-footer-link:hover::after{width:100%;}
.dl-footer-bottom{border-top:1px solid var(--border);padding:18px 0 22px;}
.dl-footer-bottom-inner{max-width:1200px;margin:0 auto;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.dl-footer-copy{font-size:12px;color:var(--text3);}
.dl-social{width:36px;height:36px;border-radius:50%;background:var(--bg3);
  border:1px solid var(--border);display:inline-flex;align-items:center;
  justify-content:center;color:var(--text2);text-decoration:none;
  transition:transform .22s var(--ease-spring),border-color .2s,background .2s;}
.dl-social:hover{border-color:var(--borderp);background:var(--bg4);transform:translateY(-2px);}
.dl-social:active{transform:scale(.94);}
.dl-store-btn{display:flex;align-items:center;gap:9px;background:var(--bg3);
  border:1px solid var(--border);border-radius:10px;padding:9px 14px;color:var(--text);
  font-size:12.5px;font-weight:650;text-decoration:none;margin-bottom:7px;
  transition:border-color .2s,transform .2s var(--ease);}
.dl-store-btn:hover{border-color:var(--borderp);transform:translateY(-1px);}
.dl-store-btn:active{transform:scale(.985);}
@media(max-width:900px){
  .dl-footer{padding:32px 20px 0;}
  .dl-footer-grid{grid-template-columns:1fr 1fr;gap:24px;padding-bottom:24px;}
}
@media(max-width:520px){
  .dl-footer-grid{grid-template-columns:1fr;}
  .dl-footer-bottom-inner{flex-direction:column;text-align:center;}
}
.screen{display:none;flex-direction:column;flex:1;overflow:hidden;background:var(--bg);}
.screen.active{display:flex;animation:screenIn .22s ease;}
@keyframes screenIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.screen.active{animation:none;}}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.scroll::-webkit-scrollbar{display:none;}
/* ══ TOPBAR ══ */
.topbar{display:flex;align-items:center;gap:12px;padding:calc(var(--st) + 14px) 20px 14px;background:var(--bg);border-bottom:1px solid var(--border);min-height:60px;flex-shrink:0;z-index:10;}
.topbar-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:17px;font-weight:700;flex:1;color:var(--text);}
.btn-back,.btn-icon{width:38px;height:38px;border-radius:12px;background:var(--bg3);border:1px solid var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s;}
.btn-back:active,.btn-icon:active{background:var(--bg4);}
/* ══ BOTTOM NAV ══ */
.bnav{display:flex;background:var(--bg3);border-top:1px solid var(--border);padding-bottom:var(--sb);flex-shrink:0;}
.ni{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;cursor:pointer;color:var(--text3);font-size:11px;font-weight:500;font-family:'Inter',sans-serif;transition:color .15s;}
.ni.on{color:var(--primary);}
.ni svg{width:22px;height:22px;stroke-width:2;}
/* ══ BUTTONS ══ */
.btn{width:100%;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:700;font-size:15px;border:none;border-radius:var(--rsm);padding:16px;cursor:pointer;transition:opacity .15s,transform .1s;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn:active{opacity:.9;transform:scale(.99);}
.btn:disabled{opacity:.4;}
.btn-outline{width:100%;background:transparent;color:var(--text);font-family:'Inter',sans-serif;font-weight:500;font-size:15px;border:1px solid var(--borderp);border-radius:var(--rsm);padding:14px;cursor:pointer;transition:all .15s;}
.btn-outline:active{background:rgba(238,90,38,.07);}
.btn-ghost{background:none;border:none;color:var(--text2);font-size:14px;cursor:pointer;padding:8px;font-family:'Inter',sans-serif;}
/* ══ INPUTS ══ */
.label{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px;}
.inp{background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--rsm);color:var(--text);font-family:'Inter',sans-serif;font-size:15px;padding:12px 16px;outline:none;transition:border-color .2s;width:100%;}
.inp:focus{border-color:var(--primary);}
.inp::placeholder{color:var(--text3);}
.pwd-wrap{position:relative;}
.pwd-wrap .inp{padding-right:44px;}
.pwd-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;padding:8px;cursor:pointer;color:var(--text2);display:flex;align-items:center;border-radius:8px;min-width:32px;min-height:32px;justify-content:center;}
.pwd-toggle:hover{color:var(--primary);}
.pwd-toggle:active{color:var(--primary);}
.pwd-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
.inp:-webkit-autofill,
.inp:-webkit-autofill:hover,
.inp:-webkit-autofill:focus,
.inp:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 60px var(--bg3) inset !important;
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text);
  border-color:var(--primary);
}
/* ══ CARD ══ */
.card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);}
/* ══ LOGO SVG inline ══ */
.logo-svg{flex-shrink:0;}
/* ══ LOGO MARCA ══ */
.logomark{display:flex;align-items:center;gap:10px;cursor:pointer;}
.logomark-text{display:flex;flex-direction:column;line-height:1;}
.logomark-name{font-family:'Manrope','Space Grotesk',sans-serif;font-weight:800;letter-spacing:-0.3px;}
.logomark-name .i{color:var(--primary);}
.logomark-sub{font-family:'Manrope','Space Grotesk',sans-serif;font-size:11px;font-weight:600;color:var(--text2);letter-spacing:.18em;text-transform:uppercase;margin-top:2px;}
/* ══ TOAST ══ */
#toast{position:fixed;bottom:calc(80px + var(--sb));left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg4);border:1px solid var(--borderp);color:var(--text);padding:12px 20px;border-radius:12px;font-size:14px;font-weight:500;z-index:9999;opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap;pointer-events:none;max-width:90vw;text-align:center;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* ══ LOADER ══ */
.loader{display:flex;align-items:center;justify-content:center;padding:48px;gap:8px;}
.ld{width:8px;height:8px;border-radius:50%;background:var(--primary);animation:lp 1.2s ease-in-out infinite;}
.ld:nth-child(2){animation-delay:.2s;}
.ld:nth-child(3){animation-delay:.4s;}
@keyframes lp{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
/* ══ MODAL ══ */
#modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px);z-index:1001;display:none;align-items:flex-end;}
#modal-bg.open{display:flex;animation:bgIn .25s ease;}
/* Cierre animado: la sheet baja y el fondo se desvanece antes de ocultarse */
#modal-bg.open.closing{animation:bgOut .22s ease forwards;}
#modal-bg.open.closing #modal-sheet{animation:sd .22s ease forwards;}
@keyframes bgIn{from{opacity:0;}to{opacity:1;}}
@keyframes bgOut{from{opacity:1;}to{opacity:0;}}
@keyframes sd{from{transform:translateY(0);}to{transform:translateY(100%);}}
@media(prefers-reduced-motion:reduce){#modal-bg.open,#modal-bg.open.closing,#modal-bg.open.closing #modal-sheet,#modal-sheet{animation:none;}}
#modal-sheet{width:100%;background:var(--bg2);border-radius:20px 20px 0 0;padding:20px;padding-bottom:calc(20px + var(--sb));animation:su .3s ease;max-height:90vh;overflow-y:auto;}
#modal-sheet::-webkit-scrollbar{display:none;}
@keyframes su{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mhandle{width:40px;height:4px;background:var(--text3);border-radius:2px;margin:0 auto 20px;}
.mtitle{font-family:'Manrope','Space Grotesk',sans-serif;font-size:18px;font-weight:800;margin-bottom:16px;}
/* ESCRITORIO: la hoja deja de ser una sheet a pantalla completa. Sin esto
   #modal-sheet{width:100%} se estira a todo el monitor y los hijos con
   aspect-ratio (las casillas de foto) salen enormes. */
@media(min-width:900px){
  #modal-bg{align-items:center;justify-content:center;padding:24px;}
  #modal-sheet{max-width:460px;border-radius:20px;padding-bottom:20px;
    max-height:82vh;animation:mIn .22s ease;}
  #modal-bg.open.closing #modal-sheet{animation:mOut .2s ease forwards;}
  #modal-sheet .mhandle{display:none;}
}
@keyframes mIn{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}
@keyframes mOut{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(10px) scale(.985);}}
@media(prefers-reduced-motion:reduce){#modal-sheet{animation:none !important;}}
/* ══ AVATAR ══ */
.av{border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:700;color:var(--primary);flex-shrink:0;}
/* ══ STARS ══ */
.stars{color:var(--primary);font-size:13px;letter-spacing:1px;}
/* ══ EMPTY ══ */
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:60px 24px;text-align:center;}
.empty-ico{font-size:52px;}
.empty-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:18px;font-weight:700;}
.empty-sub{font-size:14px;color:var(--text2);line-height:1.5;}
/* ══ ANIM ══ */
@keyframes fu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fu{animation:fu .22s ease forwards;}

/* ════════════════════════════════
   ONBOARDING
════════════════════════════════ */
#sc-onboarding{justify-content:center;align-items:center;padding:0 24px;}
.ob-inner{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.ob-logo-wrap{margin-bottom:20px;}
.ob-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:22px;font-weight:800;margin-bottom:6px;}
.ob-sub{font-size:14px;color:var(--text2);margin-bottom:28px;}
.role-btn{width:100%;display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;margin-bottom:12px;text-align:left;transition:border-color .2s,background .2s;}
.role-btn:active{background:var(--bg4);border-color:var(--borderp);}
.role-ico{font-size:28px;width:44px;text-align:center;flex-shrink:0;}
.role-info{flex:1;}
.role-name{font-family:'Manrope','Space Grotesk',sans-serif;font-size:16px;font-weight:700;margin-bottom:2px;}
.role-desc{font-size:13px;color:var(--text2);}
.ob-login{margin-top:8px;font-size:14px;color:var(--text2);}
.ob-login span{color:var(--primary);font-weight:600;cursor:pointer;}
.ob-explore{margin-top:10px;font-size:13px;color:var(--text3);cursor:pointer;text-decoration:underline;}

/* PRO ONBOARDING */
/* ══ ALTA DE PROFESIONALES ══════════════════════════════════════════════
   Un solo flujo para móvil y escritorio (antes el escritorio abría un modal
   pelado sin argumentos, sin zona y sin consentimientos).
   El contenedor lleva ALTURA definida, no sólo min-height: sin eso el grid
   crece con el contenido y deja de centrar — era el "no se ve ajustado".
   container-type hace que el panel partido responda al ancho del contenedor. */
#sc-pro-onboard{container-type:inline-size;position:relative;overflow:hidden;}
.po-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.po-glow::before,.po-glow::after{content:'';position:absolute;border-radius:50%;filter:blur(70px);}
.po-glow::before{width:340px;height:340px;top:-130px;left:-90px;background:rgba(238,90,38,.22);}
.po-glow::after{width:300px;height:300px;bottom:-120px;right:-100px;background:rgba(20,200,173,.14);}
.po-flow{position:relative;z-index:2;height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:max(16px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));gap:16px;}
.po-rail{display:flex;align-items:center;gap:4px;flex:1;}
.step-seg{flex:1;height:3px;border-radius:99px;background:var(--border);transition:background .45s ease;}
.step-seg.done{background:var(--primary);}
.step-seg.acct{flex:.7;margin-left:8px;}
.step-seg.acct.done{background:var(--mint);}
.po-top{display:flex;align-items:center;gap:12px;min-height:34px;}
.po-back{width:34px;height:34px;flex:none;display:none;place-items:center;border-radius:12px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:17px;cursor:pointer;padding:0;}
.po-back.show{display:grid;}
.po-back:active{transform:scale(.92);}
.po-stack{display:contents;}
.po-center{display:grid;align-content:center;justify-items:start;gap:20px;min-height:0;overflow-y:auto;scrollbar-width:none;}
.po-center::-webkit-scrollbar{display:none;}
/* El albarán: un mismo papel que se reimprime como SOLICITUD → PRESUPUESTO →
   COBRO. Enseña el bucle real del producto mientras lo vende. */
.po-paper-wrap{width:100%;display:flex;justify-content:center;}
.po-paper{position:relative;width:100%;max-width:330px;background:linear-gradient(176deg,#ede6d8,#ded5c4);color:#26221c;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;line-height:1.5;padding:16px 16px 20px;border-radius:3px;box-shadow:0 22px 50px -14px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.14) inset;transform:rotate(-1.4deg);}
.po-paper::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:8px;background:conic-gradient(from -45deg at 50% 0,#0000 0 90deg,#ded5c4 0);background-size:13px 8px;}
/* El sello va rotado: su caja real es más alta que su alto tipográfico,
   así que el hueco reservado tiene que contar ese margen o pisa la nota. */
.po-paper.stamped{padding-bottom:76px;}
.po-h{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;letter-spacing:.06em;font-size:11px;color:#6b6355;}
.po-h b{color:#26221c;letter-spacing:.14em;font-weight:600;}
.po-kind{margin:8px 0 2px;font-weight:600;font-size:13px;letter-spacing:.13em;color:#26221c;}
.po-rule{border-top:1px dashed rgba(38,34,28,.34);margin:8px 0;}
.po-rows{display:grid;gap:4px;}
.po-r{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums;}
.po-r .k{color:#6b6355;letter-spacing:.05em;}
.po-r .v{font-weight:600;text-align:right;}
.po-tot{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;}
.po-note{margin-top:8px;font-size:11px;letter-spacing:.04em;color:#6b6355;}
.po-stag>*{opacity:0;transform:translateY(7px);}
.printing .po-stag>*{animation:poFeed .34s ease forwards;}
.printing .po-stag>*:nth-child(1){animation-delay:.06s;}
.printing .po-stag>*:nth-child(2){animation-delay:.13s;}
.printing .po-stag>*:nth-child(3){animation-delay:.2s;}
.printing .po-stag>*:nth-child(4){animation-delay:.27s;}
@keyframes poFeed{to{opacity:1;transform:none;}}
.po-stamp{position:absolute;right:14px;bottom:14px;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;letter-spacing:.16em;color:#0e6d5c;border:2.5px solid #0e6d5c;border-radius:4px;padding:4px 10px;opacity:0;transform:rotate(-13deg) scale(1.6);}
.printing .po-stamp{animation:poStamp .42s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)) .42s forwards;}
@keyframes poStamp{to{opacity:.88;transform:rotate(-13deg) scale(1);}}
.po-copy{display:grid;gap:10px;justify-items:start;}
.po-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.19em;color:var(--primary);text-transform:uppercase;}
.po-copy h2{margin:0;font-size:28px;line-height:1.12;font-weight:800;letter-spacing:-.022em;text-wrap:balance;}
.po-copy h2 em{font-style:normal;color:var(--primary);}
.po-copy h2 .mint{color:var(--mint);}
.po-copy p{margin:0;font-size:15px;line-height:1.58;color:var(--text2);max-width:38ch;}
.po-foot{display:grid;gap:12px;justify-items:center;}
.po-row{display:flex;flex-direction:column-reverse;align-items:stretch;gap:16px;width:100%;}
.po-row .pro-dots{align-self:center;}
.pro-dots{display:flex;gap:6px;}
.pro-dot{width:6px;height:6px;border-radius:99px;background:var(--border);border:0;padding:0;cursor:pointer;transition:width .35s cubic-bezier(.34,1.56,.64,1),background .3s ease;}
.pro-dot.on{width:22px;background:var(--primary);}
.pro-skip{background:none;border:0;cursor:pointer;padding:4px 8px;font-size:14px;color:var(--text3);}
.po-form{display:none;grid-template-columns:1fr;gap:12px;align-content:start;padding-bottom:6px;}
.po-form.on{display:grid;}
.po-form h3{margin:0 0 2px;font-size:22px;font-weight:800;letter-spacing:-.02em;}
.po-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* .po-check ES un <label>: hay que deshacer el versalita de .label o el texto
   legal sale en mayúsculas e ilegible. */
.po-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;text-transform:none;letter-spacing:normal;font-size:13px;line-height:1.48;color:var(--text2);margin:0;font-weight:400;}
.po-check input{appearance:none;flex:none;width:19px;height:19px;margin:1px 0 0;border:1.5px solid var(--border);border-radius:6px;background:var(--bg3);cursor:pointer;transition:background .18s,border-color .18s;}
.po-check input:checked{background:var(--mint);border-color:var(--mint);}
.po-check input:checked::after{content:'✓';display:grid;place-items:center;height:100%;color:#04231e;font-size:12px;font-weight:800;}
.po-check b{color:var(--text);font-weight:600;}
.po-tip{display:flex;gap:8px;align-items:flex-start;background:rgba(20,200,173,.08);border:1px solid rgba(20,200,173,.22);border-radius:12px;padding:12px 12px;font-size:13px;line-height:1.5;color:var(--text2);}
.po-tip b{color:var(--mint);font-weight:600;}
.po-art{display:none;}
.po-mark{position:absolute;top:34px;left:40px;font-size:20px;font-weight:800;letter-spacing:-.02em;}
.po-mark span{color:var(--primary);}
/* En escritorio la barra lateral ya lleva el logo: no repetirlo. */
.desk-mode .po-mark{display:none;}
@container (min-width:900px){
  .po-flow{grid-template-rows:minmax(0,1fr);grid-template-columns:1.05fr .95fr;padding:0;gap:0;}
  .po-art{position:relative;display:grid;place-items:center;background:radial-gradient(120% 80% at 20% 0%,rgba(238,90,38,.16),transparent 62%),radial-gradient(90% 70% at 90% 100%,rgba(20,200,173,.12),transparent 65%),var(--bg2,#101728);border-right:1px solid var(--border);padding:56px;}
  .po-art .po-paper{max-width:430px;font-size:15px;padding:26px 26px 30px;transform:rotate(-1.8deg);}
  .po-art .po-paper.stamped{padding-bottom:96px;}
  .po-art .po-paper::after{bottom:-9px;height:10px;background-size:17px 10px;}
  .po-art .po-h{font-size:12px;} .po-art .po-kind{font-size:16px;}
  .po-art .po-tot{font-size:18px;} .po-art .po-note{font-size:12px;}
  .po-art .po-stamp{font-size:16px;padding:8px 12px;}
  .po-pane{display:grid;grid-template-rows:auto minmax(0,1fr);gap:22px;padding:38px 52px;max-width:620px;width:100%;}
  .po-stack{display:grid;align-content:center;gap:32px;min-height:0;grid-template-rows:minmax(0,auto) auto;}
  .po-center .po-paper-wrap{display:none;}
  .po-copy h2{font-size:41px;}
  .po-copy p{font-size:16px;max-width:42ch;}
  .po-foot{justify-items:start;gap:18px;}
  .po-row{flex-direction:row;align-items:center;gap:22px;width:auto;}
  .po-row .btn{width:auto;min-width:250px;}
  .po-form{max-width:520px;}
}
@container (max-width:899.98px){
  .po-art{display:none;}
  .po-pane{display:contents;}
}
@media (prefers-reduced-motion:reduce){
  .po-stag>*{opacity:1;transform:none;}
  .po-stamp{opacity:.88;transform:rotate(-13deg) scale(1);}
}
.topbar-back{width:34px;height:34px;border-radius:12px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;font-size:20px;}

/* ════════════════════════════════
   HOME
════════════════════════════════ */
#home-hdr{padding:calc(var(--st) + 14px) 20px 14px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;}
.home-toprow{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.home-greet{font-size:13px;color:var(--text2);margin-bottom:4px;font-weight:500;}
.home-name{font-family:'Manrope','Space Grotesk',sans-serif;font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1.12;}
.home-name span{color:var(--primary);}
.ai-bar{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(238,90,38,.07),var(--bg3) 52%,var(--bg2));border:1.5px solid var(--borderp);border-radius:16px;padding:16px 16px;cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease);box-shadow:0 6px 20px -10px rgba(238,90,38,.3),inset 0 1px 0 rgba(255,255,255,.04);}
.ai-bar:hover{border-color:var(--primary);box-shadow:0 0 0 4px rgba(238,90,38,.1),0 12px 28px -10px rgba(238,90,38,.42);}
.ai-bar:active{border-color:var(--primary);transform:scale(.99);}
.ai-placeholder{flex:1;font-size:15px;color:var(--text2);}
.ai-badge{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-size:11px;font-weight:800;padding:4px 8px;border-radius:8px;font-family:'Manrope','Space Grotesk',sans-serif;letter-spacing:.02em;box-shadow:0 2px 8px -2px rgba(238,90,38,.5);}
/* Urgente banner */
.urgente-banner{margin:16px 16px 6px;background:linear-gradient(150deg,#1a0e07 0%,#13111d 72%);border:1px solid rgba(238,90,38,.2);border-radius:var(--r);padding:18px;cursor:pointer;position:relative;overflow:hidden;box-shadow:var(--shadow-md);transition:transform .18s var(--ease),border-color .2s var(--ease);}
.urgente-banner:hover{border-color:rgba(238,90,38,.38);}
.urgente-banner:active{transform:scale(.99);}
.urgente-banner::after{content:'⚡';position:absolute;right:10px;top:12px;font-size:66px;opacity:.045;pointer-events:none;transform:rotate(9deg);}
.u-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(238,90,38,.18);border:1px solid rgba(238,90,38,.4);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;color:var(--primary);margin-bottom:8px;}
.u-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:20px;font-weight:800;line-height:1.2;margin-bottom:4px;color:var(--text);letter-spacing:-.01em;}
.u-title em{color:var(--primary);font-style:normal;}
.u-sub{font-size:13px;color:var(--text2);margin-bottom:12px;}
.u-row{display:flex;align-items:center;justify-content:space-between;}
.u-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:700;font-size:14px;border:none;border-radius:20px;padding:10px 18px;cursor:pointer;}
.u-count-num{font-family:'Manrope','Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:var(--success);line-height:1;}
.u-count-lbl{font-size:11px;color:var(--text2);}
/* Sección header */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;}
.sec-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);}
.sec-link{font-size:13px;color:var(--accent-ink);font-weight:600;cursor:pointer;}
/* Cat grid 3 cols con imagen */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 16px;}
.cat-card{position:relative;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:0;aspect-ratio:1;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;cursor:pointer;transition:transform .1s, border-color .15s;overflow:hidden;}
.cat-card:active{border-color:var(--borderp);transform:scale(.97);}
.cat-card-img{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--bg3);}
.cat-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,30,.05) 0%,rgba(10,15,30,.55) 60%,rgba(10,15,30,.92) 100%);}
.cat-card-body{position:relative;padding:8px 10px 10px;width:100%;}
.cat-ico{position:absolute;top:8px;right:8px;font-size:18px;background:rgba(10,15,30,.6);backdrop-filter:blur(6px);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.cat-name{font-family:'Manrope','Space Grotesk',sans-serif;font-size:12px;font-weight:800;color:#fff;line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.cat-cnt{font-size:11px;color:rgba(255,255,255,.75);margin-top:2px;}
/* Featured horizontal */
.feat-scroll{display:flex;gap:12px;padding:0 16px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.feat-scroll::-webkit-scrollbar{display:none;}
.feat-card{flex-shrink:0;width:162px;background:var(--bg3);border:1px solid var(--border);border-radius:18px;padding:0;overflow:hidden;cursor:pointer;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);display:flex;flex-direction:column;}
.feat-card:hover{border-color:var(--borderp);transform:translateY(-4px);box-shadow:0 12px 28px -14px rgba(0,0,0,.5);}
/* ── Más pedidos ───────────────────────────────────────────────────
   La gente no busca «fontanería», busca «se me sale agua». Estas tarjetas
   son trabajos concretos con precio, así que el precio se lee primero:
   Manrope, naranja de texto y cifras de ancho fijo. */
.quick-task-card{flex-shrink:0;width:134px;background:var(--bg3);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;
  transition:transform .22s var(--ease-spring),border-color .2s,box-shadow .22s;}
.quick-task-card:hover{border-color:var(--borderp);box-shadow:var(--shadow-md);}
.quick-task-card:active{transform:scale(.97);border-color:var(--borderp);}
.qt-img-wrap{width:100%;height:92px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;}
/* Velo inferior: los nombres se leían mal sobre las fotos claras. */
.qt-img-wrap::after{content:'';position:absolute;inset:auto 0 0 0;height:42%;
  background:linear-gradient(180deg,transparent,rgba(10,15,30,.45));pointer-events:none;}
.qt-img-wrap svg{opacity:.9;}
.qt-body{padding:8px 10px 12px;}
.qt-name{font-family:'Manrope','Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;color:var(--text);letter-spacing:-.01em;min-height:2.6em;}
.qt-price{font-family:'Manrope','Space Grotesk',sans-serif;font-size:12px;
  color:var(--accent-ink);font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;}
.feat-card:active{border-color:var(--borderp);transform:scale(.98);}
.feat-photo{position:relative;width:100%;height:130px;background:var(--bg4);overflow:hidden;}
.feat-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.feat-photo-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:800;font-size:44px;color:var(--primary);background:linear-gradient(140deg,var(--bg4),var(--bg3));}
.feat-badges{position:absolute;top:8px;right:8px;display:flex;gap:4px;}
.feat-badge-ov{width:25px;height:25px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(0,0,0,.28);}
.feat-body{padding:12px 12px 12px;display:flex;flex-direction:column;flex:1;}
.feat-name{font-family:'Manrope','Space Grotesk',sans-serif;font-size:14px;font-weight:800;line-height:1.2;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.feat-spec{font-size:12px;color:var(--text2);margin-top:2px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.feat-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:6px;}
.feat-rate{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;font-weight:800;color:var(--primary);white-space:nowrap;}
.feat-rate span{font-size:11px;color:var(--text3);font-weight:600;}

/* ════════════════════════════════
   BUSCAR
════════════════════════════════ */
.search-wrap{padding:12px 16px;}
.search-box{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--rsm);padding:12px 14px;}
.search-box input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:15px;}
.search-box input::placeholder{color:var(--text3);}
/* Buscador dual estilo Webel: Servicio | Zona */
.search-box-dual{padding:0;gap:0;overflow:hidden;}
.sb-field{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:12px 14px;}
.sb-field input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-size:15px;}
.sb-field input::placeholder{color:var(--text3);}
.sb-div{width:1px;align-self:stretch;background:var(--border);}
.sb-zone{display:flex;align-items:center;gap:6px;padding:12px 14px;max-width:44%;cursor:pointer;color:var(--text2);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;}
.sb-zone span{overflow:hidden;text-overflow:ellipsis;}
.sb-zone svg{flex-shrink:0;color:var(--mint);}
.chips-row{display:flex;gap:8px;padding:0 16px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.chips-row::-webkit-scrollbar{display:none;}
.chip{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rsm);cursor:pointer;flex-shrink:0;min-width:64px;transition:all .15s;}
.chip.on{border-color:var(--primary);background:rgba(238,90,38,.08);}
.chip-ico{font-size:18px;}
.chip-lbl{font-size:11px;font-weight:600;color:var(--text2);text-align:center;white-space:nowrap;}
.chip.on .chip-lbl{color:var(--primary);}
/* Worker card vertical */
.wcard{display:flex;gap:14px;align-items:flex-start;padding:14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;margin-bottom:10px;transition:border-color .15s;}
.wcard:active{border-color:var(--borderp);}
/* Trust chips — señales de verificación visibles en las tarjetas del pro */
.trust-row{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 2px;}
.trust-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;line-height:1.4;white-space:nowrap;}
.trust-chip svg{flex-shrink:0;}
.tc-id{background:rgba(16,185,129,.14);color:var(--success);}
.tc-lic{background:rgba(59,130,246,.14);color:#3b82f6;}
.winfo{flex:1;min-width:0;}
.wname{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;font-weight:700;}
.wspec{font-size:13px;color:var(--text2);margin:2px 0 4px;}
.wmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.wrate{font-size:15px;font-weight:700;color:var(--primary);margin-top:4px;}
/* ── Tarjeta de profesional v2 (estilo Webel: densa en confianza + fotos reales del trabajo) ── */
.wcard2{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:12px;cursor:pointer;box-shadow:0 3px 14px -8px rgba(0,0,0,.22);}
.wcard2:active{border-color:var(--borderp);}
.wc2-head{display:flex;gap:12px;align-items:flex-start;}
.wc2-avwrap{position:relative;flex-shrink:0;width:58px;height:58px;}
.wc2-av{width:58px;height:58px;border-radius:50%;object-fit:cover;display:block;}
.wc2-av.avail{border:2.5px solid var(--primary);}
.wc2-dot{position:absolute;bottom:1px;right:1px;width:13px;height:13px;border-radius:50%;background:var(--success);border:2.5px solid var(--bg2);}
.wc2-name{font-family:'Manrope','Space Grotesk',sans-serif;font-size:17px;font-weight:800;line-height:1.2;display:flex;align-items:center;gap:4px;}
.wc2-vbadge{display:inline-flex;flex-shrink:0;}
.wc2-rating{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--text2);margin-top:4px;flex-wrap:wrap;}
.wc2-rating .rv{color:var(--text);font-weight:700;}
.wc2-star{color:var(--star);}
.wc2-spec{font-size:13px;color:var(--text3);}
.wc2-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.wc2-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:4px 8px;border-radius:20px;background:var(--bg3);color:var(--text2);white-space:nowrap;}
.wc2-chip svg{flex-shrink:0;}
.wc2-chip.price{background:rgba(238,90,38,.1);color:var(--primary);}
.wc2-chip.id{background:rgba(16,185,129,.13);color:var(--success);}
.wc2-chip.lic{background:rgba(59,130,246,.13);color:#3b82f6;}
.wc2-portfolio{display:flex;gap:6px;overflow-x:auto;margin-top:12px;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.wc2-portfolio::-webkit-scrollbar{display:none;}
.wc2-photo{width:76px;height:76px;flex-shrink:0;border-radius:12px;object-fit:cover;background:var(--bg3);}
/* ══ Toque WEBEL — acento menta (confianza/frescura) + micro-dinamismo ══ */
.wc2-dot{background:var(--mint);}
.avail-dot-w{background:var(--mint);}
.wc2-chip.id{background:var(--mintbg);color:var(--mint);}
.btn,.btn-outline,.pro-btn-accept,.pro-btn-done{transition:transform .13s var(--ease-spring),filter .16s,box-shadow .16s,background .16s;}
.btn:active,.btn-outline:active,.pro-btn-accept:active,.pro-btn-done:active{transform:scale(.975);}
.wcard2:active,.cat-card:active,.chip:active,.qt-card:active{transform:scale(.985);}
@media(prefers-reduced-motion:reduce){.btn:active,.btn-outline:active,.pro-btn-accept:active,.pro-btn-done:active,.wcard2:active,.cat-card:active,.chip:active{transform:none;}}

/* ════════════════════════════════
   WORKER PERFIL
════════════════════════════════ */
.prof-hero{padding:20px 16px;display:flex;gap:16px;align-items:flex-start;}
.prof-name{font-family:'Manrope','Space Grotesk',sans-serif;font-size:22px;font-weight:800;line-height:1.2;}
.prof-spec{font-size:14px;color:var(--text2);margin:4px 0 8px;}
.prof-stats{display:flex;gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.prof-stat{flex:1;text-align:center;padding:14px 8px;border-right:1px solid var(--border);}
.prof-stat:last-child{border-right:none;}
.prof-stat-val{font-family:'Manrope','Space Grotesk',sans-serif;font-size:18px;font-weight:800;color:var(--text);}
.prof-stat-lbl{font-size:11px;color:var(--text2);margin-top:2px;}
.prof-section{padding:16px;}
.prof-section-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);margin-bottom:12px;}
.prof-bio{font-size:14px;color:var(--text2);line-height:1.6;}
.svc-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;transition:border-color .15s var(--ease),transform .12s var(--ease);}
.svc-item:active{border-color:var(--borderp);transform:scale(.99);}
.svc-item.editable{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;}
.svc-item.editable .svc-name-inp{flex:1;padding:8px 10px;font-size:13px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;font-family:inherit;color:var(--text);}
.svc-item.editable .svc-price-inp{width:70px;padding:8px 8px;font-size:13px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;font-family:inherit;color:var(--text);}
.svc-item.editable .svc-curr{color:var(--text3);font-size:13px;flex-shrink:0;}
.svc-item.editable .svc-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:18px;padding:0 4px;flex-shrink:0;}
.svc-name{font-size:14px;font-weight:600;}
.svc-price{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;font-weight:800;color:var(--primary);white-space:nowrap;}
.svc-name{display:flex;align-items:center;gap:8px;}
.svc-check{flex-shrink:0;color:var(--mint);}
/* Sobre mí — clamp + ver más */
.prof-bio.clamped{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.ver-mas-btn{background:none;border:none;color:var(--mint);font-weight:700;font-size:13px;cursor:pointer;padding:8px 0 0;font-family:inherit;}
/* Valoraciones desglosadas por dimensión (estilo Webel) */
.rb-overall{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.rb-big{font-family:'Manrope','Space Grotesk',sans-serif;font-size:38px;font-weight:800;line-height:1;color:var(--text);}
.rb-star{color:var(--star);}
.rb-label{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;font-weight:800;color:var(--text);}
.rb-count{font-size:12px;color:var(--text3);margin-top:2px;}
.rb-row{display:grid;grid-template-columns:120px 1fr 30px;align-items:center;gap:10px;margin-bottom:8px;}
.rb-dim{font-size:13px;color:var(--text2);}
.rb-track{height:7px;background:var(--bg4);border-radius:4px;overflow:hidden;}
.rb-fill{height:100%;background:#f5a623;border-radius:4px;transition:width .5s var(--ease);}
.rb-val{font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--text);}
.svc-price.svc-consult{color:var(--text3);font-weight:600;font-size:13px;}
.sticky-foot{padding:14px 16px;padding-bottom:calc(14px + var(--sb));background:var(--bg);border-top:1px solid var(--border);display:flex;gap:10px;flex-shrink:0;}

/* ════════════════════════════════
   SOLICITAR
════════════════════════════════ */
.worker-mini{display:flex;align-items:center;gap:14px;padding:14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rsm);margin-bottom:20px;}
.urg-toggle{display:flex;align-items:center;justify-content:space-between;padding:14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rsm);cursor:pointer;}
.urg-toggle.on{border-color:rgba(238,90,38,.5);background:rgba(238,90,38,.05);}
.tog{width:44px;height:24px;background:var(--text3);border-radius:12px;position:relative;transition:background .2s;flex-shrink:0;}
.tog::after{content:'';position:absolute;width:18px;height:18px;background:white;border-radius:50%;top:3px;left:3px;transition:transform .2s;}
.urg-toggle.on .tog{background:var(--primary);}
.urg-toggle.on .tog::after{transform:translateX(20px);}
.price-box{background:var(--bg3);border:1px solid var(--borderp);border-radius:var(--r);padding:16px;}
.price-row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;}
.price-row.total{border-top:1px solid var(--border);margin-top:6px;padding-top:12px;font-weight:700;font-size:16px;}
.quote-banner{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;}

/* ════════════════════════════════
   URGENTE SCREEN
════════════════════════════════ */
#sc-urgente .urgente-full-hdr{padding:calc(var(--st)+14px) 16px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(238,90,38,.2);background:rgba(26,10,0,.9);flex-shrink:0;}
.urg-step{display:flex;gap:14px;align-items:flex-start;padding:14px;background:rgba(238,90,38,.05);border:1px solid rgba(238,90,38,.12);border-radius:var(--rsm);margin-bottom:10px;}
.urg-step-num{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary2));display:flex;align-items:center;justify-content:center;font-family:'Manrope','Space Grotesk',sans-serif;font-size:13px;font-weight:800;color:white;flex-shrink:0;}
.urg-step-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:14px;font-weight:700;margin-bottom:2px;}
.urg-step-desc{font-size:13px;color:var(--text2);}

/* ════════════════════════════════
   IA
════════════════════════════════ */
#sc-ia .ia-hdr{display:flex;align-items:center;gap:12px;padding:calc(var(--st)+12px) 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg);min-height:calc(var(--st) + 60px);}
.ia-av{width:36px;height:36px;background:linear-gradient(135deg,var(--primary),var(--primary2));border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ia-online{font-size:11px;color:var(--success);}
/* Indicador de progreso del asistente (Problema → Detalle → ¿Cuándo? → Horario → Listo) */
.ia-progress-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0;}
.ia-prog-dots{display:flex;align-items:center;gap:6px;}
.ia-prog-dot{width:6px;height:6px;border-radius:50%;background:var(--bg4);border:1px solid var(--border);transition:background .25s,border-color .25s,transform .25s;}
.ia-prog-dot.done{background:var(--primary);border-color:var(--primary);opacity:.45;}
.ia-prog-dot.active{background:var(--primary);border-color:var(--primary);transform:scale(1.3);}
.ia-prog-label{font-size:11px;font-weight:700;color:var(--text2);letter-spacing:.02em;}
#ia-msgs{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
#ia-msgs::-webkit-scrollbar{display:none;}
.bubble{max-width:86%;padding:12px 14px;border-radius:16px;font-size:14px;line-height:1.5;}
.bubble.me{background:var(--primary);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.bubble.ai{background:var(--bg3);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--border);}
.ia-input-row{display:flex;gap:10px;padding:10px 16px;padding-bottom:calc(10px + var(--sb));background:var(--bg);border-top:1px solid var(--border);flex-shrink:0;}
.ia-inp{flex:1;background:var(--bg3);border:1.5px solid var(--border);border-radius:24px;padding:12px 16px;color:var(--text);font-size:14px;outline:none;transition:border-color .2s;}
.ia-inp:focus{border-color:var(--primary);}
.ia-inp::placeholder{color:var(--text3);}
.ia-photo-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:38px;height:44px;color:var(--text2);cursor:pointer;}
.ia-photo-btn:active{transform:scale(.9);color:var(--primary);}
.ia-send{width:44px;height:44px;background:linear-gradient(135deg,var(--primary),var(--primary2));border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.ia-send:disabled{opacity:.4;}
.ia-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.ia-chip{background:rgba(238,90,38,.1);border:1px solid var(--borderp);border-radius:20px;padding:4px 12px;font-size:12px;color:var(--primary);cursor:pointer;}
.ia-chip-active{background:var(--primary);color:#fff;border-color:var(--primary);}
.ia-wcard{display:flex;align-items:center;gap:12px;background:var(--bg3);border:1px solid var(--borderp);border-radius:var(--rsm);padding:12px;cursor:pointer;margin-top:6px;}
.ia-wcard:active{border-color:var(--primary);}

/* ════════════════════════════════
   PEDIDOS
════════════════════════════════ */
.job-card{padding:14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;cursor:pointer;transition:border-color .15s;}
.job-card:active{border-color:var(--borderp);}
.job-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;font-weight:700;}
.job-meta{font-size:12px;color:var(--text2);margin-top:3px;}
.status{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;}
.sp{background:rgba(238,90,38,.15);color:var(--primary);}
.sa{background:rgba(16,185,129,.15);color:var(--success);}
.sd{background:rgba(138,143,161,.15);color:var(--text2);}
.sc2{background:rgba(239,68,68,.1);color:var(--danger);}

/* ════════════════════════════════
   AUTH / PERFIL
════════════════════════════════ */
.auth-tabs{display:flex;background:var(--bg3);border-radius:var(--rsm);padding:4px;margin-bottom:22px;}
.auth-tab{flex:1;padding:10px;text-align:center;font-size:14px;font-weight:600;border-radius:8px;cursor:pointer;color:var(--text2);transition:all .2s;}
.auth-tab.on{background:var(--primary);color:#fff;}
.pmenu-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;border-radius:12px;transition:background .14s var(--ease);}
.pmenu-item:last-child{border-bottom:none;}
.pmenu-item:active{background:var(--bg2);}
.pmenu-icon{width:38px;height:38px;border-radius:12px;background:linear-gradient(180deg,var(--bg2),var(--bg3));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.pmenu-label{flex:1;font-size:15px;font-weight:500;}

/* ════ FILTROS ════ */
.filter-bar{display:flex;gap:8px;padding:0 16px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.filter-bar::-webkit-scrollbar{display:none;}
.fchip{display:flex;align-items:center;gap:4px;padding:8px 14px;background:var(--bg3);border:1.5px solid var(--border);border-radius:20px;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s;}
.fchip.on{border-color:var(--primary);color:var(--primary);background:rgba(238,90,38,.08);}

/* ════ CHAT ════ */
#sc-chat .chat-hdr{display:flex;align-items:center;gap:12px;padding:calc(var(--st)+12px) 16px 12px;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0;min-height:calc(var(--st) + 60px);}
.chat-av{width:38px;height:38px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:700;font-size:13px;color:var(--primary);flex-shrink:0;overflow:hidden;}
.chat-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.chat-hdr-name{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;font-weight:700;}
.chat-hdr-status{font-size:11px;color:var(--success);}
#chat-msgs{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
#chat-msgs::-webkit-scrollbar{display:none;}
.cmsg{max-width:80%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.45;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.cmsg.me{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;align-self:flex-end;border-bottom-right-radius:4px;box-shadow:0 4px 14px -5px rgba(238,90,38,.5);}
.cmsg.them{background:var(--bg3);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--border);}
.cmsg-time{font-size:11px;opacity:.6;margin-top:3px;text-align:right;}
.chat-quote-chip{margin:0 16px 8px;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(217,119,6,.06));border:1px solid rgba(245,158,11,.4);color:#f59e0b;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:700;font-size:13px;text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;}
.qcard{max-width:88%;border-radius:16px;padding:14px 16px;background:var(--bg2);border:1.5px solid var(--borderp);}
.qcard.me{align-self:flex-end;}
.qcard.them{align-self:flex-start;}
.qcard-hdr{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#f59e0b;margin-bottom:8px;}
.qcard-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:4px 0;}
.qcard-row.total{border-top:1px solid var(--border);margin-top:6px;padding-top:8px;font-weight:800;font-size:15px;}
.qcard-note{font-size:13px;color:var(--text2);line-height:1.5;margin:8px 0;padding:8px 10px;background:var(--bg3);border-radius:8px;}
.qcard-actions{display:flex;gap:8px;margin-top:10px;}
.qcard-btn{flex:1;border:none;border-radius:12px;padding:10px;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:700;font-size:13px;cursor:pointer;text-align:center;}
.qcard-btn.accept{background:linear-gradient(135deg,var(--success),#059669);color:#fff;}
.qcard-btn.reject{background:transparent;border:1.5px solid rgba(239,68,68,.35);color:var(--danger);}
.qcard-status{margin-top:10px;font-size:13px;font-weight:700;text-align:center;padding:8px;border-radius:8px;}
.qcard-status.pending{color:var(--text2);background:var(--bg3);}
.qcard-status.accepted{color:var(--success);background:rgba(16,185,129,.12);}
.qcard-status.rejected{color:var(--danger);background:rgba(239,68,68,.1);}
.chat-input-row{display:flex;gap:10px;padding:10px 16px;padding-bottom:calc(10px + var(--sb));background:var(--bg);border-top:1px solid var(--border);flex-shrink:0;align-items:flex-end;}
.chat-attach{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--bg3);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s;}
.chat-attach:hover{background:var(--bg4);color:var(--primary);}
.chat-attach:active{transform:scale(.94);}
.cmsg-img{padding:4px !important;background:transparent !important;}
.cmsg-img img{max-width:230px;width:100%;border-radius:12px;display:block;}
.chat-inp{flex:1;background:var(--bg3);border:1.5px solid var(--border);border-radius:20px;padding:10px 16px;color:var(--text);font-size:14px;outline:none;resize:none;max-height:100px;line-height:1.4;font-family:'Inter',sans-serif;}
.chat-inp:focus{border-color:var(--primary);}
.chat-inp::placeholder{color:var(--text3);}
.chat-send{width:40px;height:40px;min-width:40px;background:linear-gradient(135deg,var(--primary),var(--primary2));border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.chat-job-banner{padding:10px 16px;background:rgba(238,90,38,.06);border-bottom:1px solid rgba(238,90,38,.15);flex-shrink:0;}
.chat-job-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:13px;font-weight:700;}

/* ════ PANEL PROFESIONAL ════ */
.pro-tabs{display:flex;background:var(--bg3);border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:sticky;top:0;z-index:5;}
.pro-tabs::-webkit-scrollbar{display:none;}
.pro-tab{flex:0 0 auto;padding:12px 14px;text-align:center;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;}
.pro-tab.on{color:var(--primary);border-bottom-color:var(--primary);}
.pro-job-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px;transition:border-color .15s;}
.pro-job-card:active{border-color:var(--borderp);}
.pro-job-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;font-weight:700;}
.pro-job-meta{font-size:12px;color:var(--text2);margin-top:3px;}
.pro-btn-accept{flex:1;background:linear-gradient(135deg,var(--success),#059669);color:#fff;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:700;font-size:14px;border:none;border-radius:var(--rsm);padding:12px;cursor:pointer;}
.pro-btn-reject{flex:1;background:transparent;color:var(--danger);font-family:'Manrope','Space Grotesk',sans-serif;font-weight:600;font-size:14px;border:1.5px solid rgba(239,68,68,.3);border-radius:var(--rsm);padding:12px;cursor:pointer;}
.pro-btn-done{width:100%;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:700;font-size:14px;border:none;border-radius:var(--rsm);padding:12px;cursor:pointer;margin-top:10px;}
.pro-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);}
.pro-stat{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rsm);padding:12px;text-align:center;}
.pro-stat-val{font-family:'Manrope','Space Grotesk',sans-serif;font-size:20px;font-weight:800;color:var(--primary);}
.pro-stat-lbl{font-size:11px;color:var(--text2);margin-top:3px;}
.avail-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);}
.avail-tog{width:52px;height:28px;border-radius:12px;position:relative;transition:background .2s;cursor:pointer;flex-shrink:0;}
.avail-tog::after{content:'';position:absolute;width:22px;height:22px;background:white;border-radius:50%;top:3px;left:3px;transition:transform .2s;}
.avail-tog.on{background:var(--success);}
.avail-tog.on::after{transform:translateX(24px);}
.avail-tog.off{background:var(--text3);}
.pro-earn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 14px;}
.pro-earn-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rsm);padding:12px 8px;text-align:center;min-width:0;}
.earn-val{font-family:'Manrope','Space Grotesk',sans-serif;font-size:16px;font-weight:800;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.earn-lbl{font-size:11px;color:var(--text2);margin-top:4px;line-height:1.3;}
.kyc-section{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:14px;}
.kyc-section.done{border-color:var(--success);background:linear-gradient(135deg,rgba(16,185,129,.06),rgba(16,185,129,.02));}
.kyc-section-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px;}
.kyc-section-num{width:28px;height:28px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:800;font-size:13px;flex-shrink:0;}
.kyc-section.done .kyc-section-num{background:var(--success);border-color:var(--success);color:white;}
.kyc-section.done .kyc-section-num::before{content:'✓';font-size:14px;}
.kyc-section.done .kyc-section-num span,.kyc-section:not(.done) .kyc-section-num::before{display:none;}
.kyc-section-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:14px;font-weight:700;}
.kyc-section-desc{font-size:11px;color:var(--text2);margin-top:2px;line-height:1.5;}
.admin-block{background:var(--bg2);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden;}
.admin-block-h{font-family:'Manrope','Space Grotesk',sans-serif;font-size:13px;font-weight:800;padding:12px;border-bottom:1px solid var(--border);background:var(--bg3);}
/* Campanita de notificaciones */
.notif-bell{position:relative;width:36px;height:36px;border-radius:12px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;flex-shrink:0;transition:all .2s;}
.notif-bell:active{transform:scale(.95);}
.notif-bell-badge{position:absolute;top:-4px;right:-4px;background:var(--danger);color:white;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg);font-family:'Manrope','Space Grotesk',sans-serif;}
.notif-panel{position:fixed;top:calc(var(--st) + 60px);right:12px;left:12px;max-width:380px;margin-left:auto;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:10001;max-height:calc(70vh - var(--st));display:flex;flex-direction:column;animation:fu .2s ease;}
.notif-panel-h{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.notif-panel-list{overflow-y:auto;flex:1;}
.notif-item{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;gap:10px;align-items:flex-start;transition:background .15s;}
.notif-item:hover{background:var(--bg3);}
.notif-item.unread{background:rgba(238,90,38,.06);}
.notif-item.unread::before{content:'';width:6px;height:6px;background:var(--primary);border-radius:50%;margin-top:6px;flex-shrink:0;}
.notif-item-body{flex:1;min-width:0;}
.notif-item-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px;}
.notif-item-msg{font-size:12px;color:var(--text2);line-height:1.4;}
.notif-item-time{font-size:11px;color:var(--text3);margin-top:3px;}
.notif-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:10000;}
/* Avatar de perfil editable */
.profile-avatar-wrap{position:relative;width:64px;height:64px;flex-shrink:0;cursor:pointer;}
.profile-avatar-img,.profile-avatar-placeholder{width:64px;height:64px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:800;font-size:22px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2));text-transform:uppercase;}
.profile-avatar-edit{position:absolute;bottom:-2px;right:-2px;width:24px;height:24px;border-radius:50%;background:var(--primary);border:2px solid var(--bg);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .15s;}
.profile-avatar-wrap:hover .profile-avatar-edit{transform:scale(1.1);}
/* Location bar */
.loc-bar{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:8px 12px;margin:6px 0 10px;cursor:pointer;transition:all .15s;}
.loc-bar:active{transform:scale(.99);}
.loc-bar:hover{border-color:var(--borderp);}
.loc-bar-text{flex:1;font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}
.loc-bar.active .loc-bar-text{color:var(--text);}
/* Distance chip en cards */
.dist-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--success);background:rgba(16,185,129,.12);padding:2px 8px;border-radius:12px;}
.dist-chip.far{color:var(--text3);background:var(--bg3);}
/* Add-ons cards */
.addon-card{display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .15s;}
.addon-card:hover{border-color:var(--borderp);}
.addon-card.selected{background:rgba(238,90,38,.06);border-color:var(--primary);}
.addon-card-ico{width:36px;height:36px;border-radius:8px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.addon-card-body{flex:1;min-width:0;}
.addon-card-name{font-family:'Manrope','Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--text);}
.addon-card-desc{font-size:11px;color:var(--text2);margin-top:1px;line-height:1.4;}
.addon-card-price{font-size:13px;font-weight:700;color:var(--primary);flex-shrink:0;}
.addon-check{width:22px;height:22px;border-radius:6px;border:2px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:white;font-weight:800;font-size:13px;line-height:1;}
.addon-card.selected .addon-check{background:var(--primary);border-color:var(--primary);}
/* Slots de fotos del problema */
.pp-slot{aspect-ratio:1;border:2px dashed var(--border);border-radius:12px;background:var(--bg3);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;transition:all .15s;}
.pp-slot:hover{border-color:var(--primary);}
.pp-slot.has-img{border-style:solid;border-color:var(--success);}
.pp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.pp-img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.75);color:white;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;cursor:pointer;border:none;z-index:2;}
/* Tracking del profesional */
.tracking-card{background:linear-gradient(135deg,rgba(238,90,38,.12),rgba(238,90,38,.03));border:1px solid var(--borderp);border-radius:12px;padding:14px;margin-bottom:14px;}
.tracking-step{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:13px;}
.tracking-step.done .tracking-dot{background:var(--success);border-color:var(--success);}
.tracking-step.done .tracking-dot::before{content:'✓';color:white;font-size:11px;line-height:1;font-weight:800;}
.tracking-step.active .tracking-dot{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 4px rgba(238,90,38,.2);animation:pulse 2s infinite;}
.tracking-step.pending{color:var(--text3);}
.tracking-dot{width:14px;height:14px;border-radius:50%;background:var(--bg3);border:2px solid var(--border);position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(238,90,38,.2);}50%{box-shadow:0 0 0 10px rgba(238,90,38,0);}}
/* Skeleton loaders — .skeleton es alias de .sk (skeletonListHTML usa "skeleton") */
.sk,.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 37%,var(--bg3) 63%);background-size:400% 100%;animation:sk-shine 1.4s infinite;border-radius:8px;}
@keyframes sk-shine{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.sk-row{display:flex;gap:12px;align-items:center;flex:1;}
.sk-line.wide{width:70%;}
.sk-line.short{width:45%;}
.sk-line.full{width:100%;}
/* Badge para profesionales sin reseñas todavía (en vez de estrellas vacías/infladas) */
.new-pro-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--primary);background:rgba(238,90,38,.1);border:1px solid rgba(238,90,38,.3);border-radius:20px;padding:3px 10px;white-space:nowrap;}
/* Datos personales (modal) */
.dp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--border);}
.dp-row:last-child{border-bottom:none;}
.dp-label{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;}
.dp-val{font-size:14px;color:var(--text);font-weight:600;text-align:right;word-break:break-all;display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;}
.dp-copy{background:none;border:none;cursor:pointer;color:var(--primary);padding:0;display:inline-flex;flex-shrink:0;}
.dp-copy:active{opacity:.6;}
.sk-card{display:flex;gap:12px;align-items:center;padding:14px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;}
.sk-circle{width:50px;height:50px;border-radius:50%;flex-shrink:0;}
.sk-line{height:12px;}
/* Pulse para botón "Volver a contratar" */
@keyframes attn{0%,100%{transform:scale(1);}50%{transform:scale(1.02);}}

/* ════ SLOT PICKER (Fecha y Hora) ════ */
.slot-picker{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;margin-bottom:12px;}
.slot-picker::-webkit-scrollbar{display:none;}
.slot-date{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 12px;background:var(--bg3);border:1.5px solid var(--border);border-radius:12px;cursor:pointer;transition:all .15s;min-width:58px;}
.slot-date.on{border-color:var(--primary);background:rgba(238,90,38,.1);}
.slot-date-day{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.slot-date.on .slot-date-day{color:var(--primary);}
.slot-date-num{font-family:'Manrope','Space Grotesk',sans-serif;font-size:20px;font-weight:800;color:var(--text);}
.slot-date.on .slot-date-num{color:var(--primary);}
.slot-date-mon{font-size:11px;color:var(--text3);}
.slot-date.on .slot-date-mon{color:var(--primary);}
.slot-times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.slot-time-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px;background:var(--bg3);border:1.5px solid var(--border);border-radius:12px;cursor:pointer;transition:all .15s;}
.slot-time-btn.on{border-color:var(--primary);background:rgba(238,90,38,.1);}
.slot-time-ico{font-size:20px;}
.slot-time-lbl{font-family:'Manrope','Space Grotesk',sans-serif;font-size:12px;font-weight:700;color:var(--text2);}
.slot-time-btn.on .slot-time-lbl{color:var(--primary);}
.slot-time-btn.slot-disabled{opacity:.4;cursor:not-allowed;filter:grayscale(1);background:var(--bg2);}
.slot-time-btn.slot-disabled:hover{border-color:var(--border);}
.slot-time-sub{font-size:11px;color:var(--text3);}
.slot-avail-note{font-size:12px;color:var(--text2);margin:2px 0 10px;display:flex;align-items:flex-start;gap:4px;line-height:1.4;}
.slot-avail-none{font-size:13px;color:var(--danger);background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:12px;padding:10px 12px;margin-bottom:8px;line-height:1.45;}

/* ════ ESTADOS DE PEDIDO (stepper) ════ */
.order-stepper{display:flex;align-items:center;margin-bottom:12px;}
.order-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;position:relative;}
.order-step:not(:last-child)::after{content:'';position:absolute;top:14px;left:50%;width:100%;height:2px;background:var(--border);z-index:0;}
.order-step.done:not(:last-child)::after{background:var(--success);}
.order-step.active:not(:last-child)::after{background:linear-gradient(90deg,var(--primary),var(--border));}
.os-dot{width:28px;height:28px;border-radius:50%;background:var(--bg3);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;z-index:1;position:relative;flex-shrink:0;}
.order-step.done .os-dot{background:var(--success);border-color:var(--success);color:#fff;}
.order-step.active .os-dot{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 4px rgba(238,90,38,.2);}
.os-lbl{font-size:11px;font-weight:600;color:var(--text3);text-align:center;letter-spacing:.03em;}
.order-step.done .os-lbl{color:var(--success);}
.order-step.active .os-lbl{color:var(--primary);}

/* ════ JOB CARD mejorada ════ */
.job-card-v2{padding:16px;background:var(--bg3);border:1px solid var(--border);border-radius:16px;margin-bottom:12px;cursor:pointer;transition:border-color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease);box-shadow:0 2px 10px -6px rgba(0,0,0,.16);}
.job-card-v2:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.3);}
.job-card-v2:active{border-color:var(--borderp);transform:scale(.99);}
.job-card-v2.pending{border-left:3px solid #f59e0b;}
.job-card-v2.accepted{border-left:3px solid var(--primary);}
.job-card-v2.completed{border-left:3px solid var(--success);}
.job-card-v2.cancelled{border-left:3px solid var(--danger);}
.job-card-v2.quote{border-left:3px solid var(--text3);}
.jc-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.jc-status-dot.pending{background:#f59e0b;}
.jc-status-dot.accepted{background:var(--primary);box-shadow:0 0 0 3px rgba(238,90,38,.2);}
.jc-status-dot.completed{background:var(--success);}
.jc-status-dot.cancelled{background:var(--danger);}
.jc-status-dot.quote{background:var(--text3);}
.jc-status-dot.in_progress{background:var(--primary);box-shadow:0 0 0 3px rgba(238,90,38,.2);}
.jc-status-dot.pending_confirmation{background:#f59e0b;}
.jc-status-dot.disputed{background:var(--danger);}

/* ════ SEARCH FILTERS mejorados ════ */
.filter-sort-row{display:flex;gap:8px;padding:0 16px 10px;align-items:center;flex-wrap:wrap;}
.fselect{background:var(--bg3);border:1.5px solid var(--border);border-radius:20px;color:var(--text);font-size:13px;font-weight:600;padding:8px 12px;outline:none;cursor:pointer;transition:border-color .15s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%238896b3' stroke-width='2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}
.fselect.on{border-color:var(--primary);color:var(--primary);}
.avail-filter-tog{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--bg3);border:1.5px solid var(--border);border-radius:20px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text2);transition:all .15s;white-space:nowrap;}
.avail-filter-tog.on{border-color:var(--success);color:var(--success);background:rgba(16,185,129,.08);}
.avail-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;}

/* ════ PRO PANEL — editar perfil ════ */
.pro-edit-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s;flex-shrink:0;}
.pro-edit-btn:active{border-color:var(--borderp);color:var(--primary);}
.svc-price-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rsm);margin-bottom:8px;}
.svc-price-name{flex:1;font-size:14px;font-weight:500;}
.svc-price-inp{width:100px;background:var(--bg4);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;font-weight:700;padding:6px 10px;outline:none;text-align:right;}
.svc-price-inp:focus{border-color:var(--primary);}

/* ════ CHAT unread badge en nav ════ */
.ni-badge{position:absolute;top:6px;right:50%;transform:translateX(8px);background:var(--danger);color:#fff;font-size:11px;font-weight:800;padding:1px 4px;border-radius:12px;font-family:'Manrope','Space Grotesk',sans-serif;min-width:16px;text-align:center;pointer-events:none;}
.ni{position:relative;}

/* ════ PERFIL PRO — sección completitud ════ */
.profile-completeness{background:linear-gradient(135deg,rgba(238,90,38,.1),rgba(238,90,38,.03));border:1px solid var(--borderp);border-radius:12px;padding:12px 14px;margin:12px 16px 0;}
.pc-bar-bg{height:6px;background:var(--bg4);border-radius:3px;overflow:hidden;margin:8px 0 4px;}
.pc-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),#ff8a5e);border-radius:3px;transition:width .5s ease;}

/* ════ HOME FOOTER (hf-*) ════ */
/* ══ INICIO: "Así va un pedido" (cf-*) + "¿Por qué yoCurro?" (pq-*) — 2026-09-22 ══
   Un raíl fino que se enciende en orden con hora + evento en mono (el lenguaje del
   registro del pedido real) y un sello al final. Una sola animación orquestada; el
   resto quieto. Tres tarjetas con una prueba concreta cada una. Todo con prefijo. */
.cfpq{padding:26px 16px 4px;}
.cf{position:relative;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rlg);padding:22px 18px 18px;overflow:hidden;}
.cf::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--primary) 30%,var(--primarylt) 50%,var(--primary) 70%,transparent);background-size:200% 100%;animation:cfHair 6s linear infinite;opacity:.9;}
.cf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px;}
.cf-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--text3);text-transform:uppercase;}
.cf-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:4px;}
.cf-live{font-family:var(--mono);font-size:11px;color:var(--text3);display:flex;align-items:center;gap:7px;white-space:nowrap;}
.cf-live i{width:6px;height:6px;border-radius:50%;background:var(--mint);animation:cfPing 2.2s ease-out infinite;}
.cf-rail{position:relative;display:grid;grid-template-columns:1fr;}
.cf-step{position:relative;display:grid;grid-template-columns:26px 1fr;gap:12px;padding:0 0 22px;}
.cf-step:last-child{padding-bottom:0;}
.cf-step::before{content:'';position:absolute;left:12px;top:22px;bottom:-2px;width:2px;background:var(--border2);border-radius:2px;}
.cf-step::after{content:'';position:absolute;left:12px;top:22px;bottom:-2px;width:2px;background:var(--primary);border-radius:2px;transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease);}
.cf-step.cf-on::after{transform:scaleY(1);background:linear-gradient(180deg,var(--primary) 0%,var(--primarylt) 50%,var(--primary) 100%);background-size:100% 300%;animation:cfBeamV 2.4s linear .8s infinite;}
.cf-step:last-child::before,.cf-step:last-child::after{display:none;}
.cf-node{position:relative;width:26px;height:26px;border-radius:50%;background:var(--bg3);border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text3);transition:background .45s var(--ease),border-color .45s var(--ease),color .45s,box-shadow .45s;z-index:1;}
.cf-node::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--primary);opacity:0;transform:scale(.6);}
.cf-step.cf-on .cf-node{background:var(--primary);border-color:var(--primary);color:var(--sobre-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent);}
.cf-step.cf-on .cf-node{animation:cfPop .55s var(--ease-spring);}
.cf-step.cf-on .cf-node::before{animation:cfRing .9s var(--ease) forwards;}
.cf-body{padding-top:3px;min-width:0;}
.cf-t{font-family:var(--mono);font-size:11px;color:var(--text3);display:flex;gap:10px;align-items:center;min-height:16px;}
.cf-t b{font-weight:500;color:var(--text2);white-space:nowrap;clip-path:inset(0 100% 0 0);transition:clip-path .7s steps(18,end) .25s;}
.cf-step.cf-on .cf-t b{clip-path:inset(0 -2px 0 0);}
.cf-h{font-family:'Manrope','Space Grotesk',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.01em;margin:4px 0;color:var(--text2);transition:color .4s;}
.cf-step.cf-on .cf-h{color:var(--text);}
.cf-d{font-size:13px;line-height:1.5;color:var(--text2);max-width:34ch;}
.cf-sello{display:inline-block;margin:-2px 0 -2px auto;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--success);border:1.5px solid var(--success);border-radius:4px;padding:2px 7px;opacity:0;transform:rotate(-6deg) scale(1.5);}
.cf-step.cf-on .cf-sello{animation:cfStamp .5s var(--ease) .55s forwards;}
.cf-note{margin-top:20px;padding-top:14px;border-top:1px dotted var(--border2);font-size:12px;line-height:1.5;color:var(--text2);display:flex;gap:10px;align-items:flex-start;}
.cf-note svg{flex-shrink:0;margin-top:2px;color:var(--accent-ink);}
.cf-note b{color:var(--text);font-weight:600;}
@media(min-width:640px){
  .cf{padding:26px 28px 22px;}
  .cf-rail{grid-template-columns:repeat(3,1fr);gap:24px;}
  .cf-step{grid-template-columns:1fr;gap:14px;padding:0;align-content:start;}
  .cf-step::before,.cf-step::after{left:26px;right:-24px;top:12px;bottom:auto;height:2px;width:auto;}
  .cf-step::after{transform:scaleX(0);transform-origin:left;}
  .cf-step.cf-on::after{transform:scaleX(1);background:linear-gradient(90deg,var(--primary) 0%,var(--primarylt) 50%,var(--primary) 100%);background-size:300% 100%;animation:cfBeamH 2.4s linear .8s infinite;}
  .cf-d{max-width:none;}
}
.pq{margin-top:28px;}
.pq-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 2px 14px;}
.pq-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.pq-card{position:relative;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:18px 18px 16px;transition:transform .35s var(--ease-spring),border-color .3s,box-shadow .3s,opacity .6s var(--ease);overflow:hidden;opacity:0;transform:translateY(14px);}
.pq.pq-in .pq-card{opacity:1;transform:none;}
.pq.pq-in .pq-card:nth-child(2){transition-delay:.12s;}.pq.pq-in .pq-card:nth-child(3){transition-delay:.24s;}
.pq.pq-in .pq-card:hover{transition-delay:0s;}
.pq-card:hover{transform:translateY(-3px);border-color:var(--borderp);box-shadow:0 18px 40px -20px color-mix(in srgb,var(--primary) 45%,transparent);}
.pq-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);display:flex;align-items:center;gap:8px;}
.pq-eyebrow::after{content:'';flex:1;height:1px;background:var(--border2);}
.pq-h{font-family:'Manrope','Space Grotesk',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.015em;margin:10px 0 6px;}
.pq-d{font-size:13px;line-height:1.55;color:var(--text2);}
.pq-proof{margin-top:14px;padding-top:12px;border-top:1px dotted var(--border2);font-family:var(--mono);font-size:12px;color:var(--text2);display:flex;align-items:center;gap:10px;min-height:22px;}
.pq-k{color:var(--text3);}
.pq-v{color:var(--text);font-weight:500;margin-left:auto;}
.pq-bar{flex:1;height:6px;border-radius:3px;background:var(--bg4);overflow:hidden;position:relative;}
.pq-bar i{position:absolute;inset:0;border-radius:3px;background:var(--sello-esp);transform-origin:left;}
.pq-bar i.pq-ok{background:var(--success);transform:scaleX(0);}
.pq.pq-in .pq-bar i.pq-ok{animation:pqFill 1.1s var(--ease) .9s forwards;}
.pq-tick{display:inline-flex;align-items:center;gap:6px;color:var(--success);opacity:0;transform:translateX(-4px);transition:opacity .35s var(--ease),transform .35s var(--ease);}
.pq.pq-in .pq-tick{opacity:1;transform:none;}
.pq.pq-in .pq-tick:nth-child(1){transition-delay:.9s;}.pq.pq-in .pq-tick:nth-child(2){transition-delay:1.15s;}.pq.pq-in .pq-tick:nth-child(3){transition-delay:1.4s;}
.pq-tick svg{width:12px;height:12px;}
@media(min-width:640px){.pq-grid{grid-template-columns:repeat(3,1fr);gap:14px;}.pq-card{padding:20px 20px 18px;}}
@keyframes cfHair{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes cfPing{0%{box-shadow:0 0 0 0 rgba(20,200,173,.55)}100%{box-shadow:0 0 0 9px rgba(20,200,173,0)}}
@keyframes cfRing{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
@keyframes cfStamp{0%{opacity:0;transform:rotate(-6deg) scale(1.5)}70%{opacity:1;transform:rotate(-3deg) scale(.96)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}
@keyframes pqFill{to{transform:scaleX(1)}}
@keyframes cfBeamH{from{background-position:150% 0}to{background-position:-150% 0}}
@keyframes cfBeamV{from{background-position:0 150%}to{background-position:0 -150%}}
@keyframes cfPop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .cf::before,.cf-live i,.cf-node::before{animation:none!important;}
  .cf-step::after,.cf-node,.cf-t b,.cf-h,.pq-card,.pq-tick{transition:none;}
  .cf-step.cf-on::after,.cf-step.cf-on .cf-node{animation:none!important;}
  .pq-card,.pq-tick{opacity:1;transform:none;}
  .cf-sello{animation:none!important;opacity:1;transform:rotate(-3deg);}
  .pq.pq-in .pq-bar i.pq-ok{animation:none;transform:none;}
}
.home-footer{padding:32px 16px 16px;border-top:1px solid var(--border);margin-top:20px;}
.hf-logo{font-family:'Manrope','Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.5px;margin-bottom:4px;}
.hf-logo span{color:var(--primary);font-size:14px;vertical-align:super;}
.hf-tagline{font-size:13px;color:var(--text2);margin-bottom:20px;}
.hf-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;}
/* Cada columna del footer apila sus links (uno por línea), no en una hilera corrida */
.hf-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.hf-col-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em;}
.hf-link{position:relative;font-size:13px;color:var(--text2);padding:4px 0;cursor:pointer;transition:color .25s,padding-left .25s;display:inline-block;}
.hf-link::after{content:'';position:absolute;left:0;bottom:1px;width:0;height:1px;background:var(--primary);transition:width .25s ease;}
.hf-link:hover{color:var(--primary);padding-left:8px;}
.hf-link:hover::after{width:calc(100% - 8px);}
.hf-link:active{color:var(--primary);}

/* Recorrido secuencial: el "foco" viaja de círculo en círculo según la prioridad de cada paso (ver initHomeFooterAnimations) */
.hf-social{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px;justify-content:center;}
.hf-social-link{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2);cursor:pointer;transition:color .2s,transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .25s;padding:6px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;}
.hf-social-link:hover{color:var(--primary);border-color:var(--borderp);transform:translateY(-3px) scale(1.04);box-shadow:0 6px 14px rgba(238,90,38,.18);}
.hf-social-link:active{color:var(--primary);transform:translateY(0) scale(1);}
.hf-divider{height:1px;background:var(--border);margin-bottom:14px;}
.hf-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.hf-copy{font-size:11px;color:var(--text3);}
.hf-sub-links{display:flex;gap:8px;font-size:11px;color:var(--text3);}
.hf-sub-links span{cursor:pointer;transition:color .15s;}
.hf-sub-links span:hover{color:var(--primary);}

/* ── LANDING AI SEARCH BAR ─────────────────────────── */
.dl-ai-search-wrap{margin-top:28px;margin-bottom:18px;}
.dl-ai-bar{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:18px;padding:16px 18px;cursor:text;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  max-width:540px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 34px -14px rgba(0,0,0,.6);
}
.dl-ai-bar:hover,.dl-ai-bar:focus-within{border-color:var(--borderp);box-shadow:0 0 0 4px rgba(238,90,38,.12),0 14px 36px -14px rgba(238,90,38,.28);}
.dl-ai-bar input{
  flex:1;background:transparent;border:none;outline:none;
  font-size:15px;color:var(--text);font-family:'Manrope','Space Grotesk',sans-serif;
  caret-color:var(--primary);
}
.dl-ai-bar input::placeholder{color:var(--text3);}
.dl-ai-bar-ico{width:38px;height:38px;background:linear-gradient(135deg,var(--primary),var(--primary2));border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease);box-shadow:0 6px 16px -4px rgba(238,90,38,.6);}
.dl-ai-bar-ico:hover{transform:scale(1.06);box-shadow:0 8px 22px -4px rgba(238,90,38,.8);}
.dl-ai-badge-lp{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:5px;flex-shrink:0;letter-spacing:.05em;}

/* Quick chips (landing + app) */
.dl-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:520px;margin-top:12px;}
.dl-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:20px;padding:6px 14px;
  font-size:12px;font-weight:600;color:var(--text2);
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.dl-chip:hover{border-color:var(--borderp);color:var(--primary);background:rgba(238,90,38,.07);}

/* Trust strip (landing) */
.dl-trust-strip{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:24px;padding:18px 60px;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--bg2);
}
.dl-trust-item{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text2);}
.dl-trust-divider{width:1px;height:16px;background:var(--border);}
@media(max-width:768px){.dl-trust-strip{padding:14px 20px;gap:12px;}.dl-trust-divider{display:none;}}

/* Prices section (landing) */
.dl-prices{padding:80px 60px;background:var(--bg);}
.dl-prices-inner{max-width:1200px;margin:0 auto;}
.dl-prices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
.dl-price-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:20px;
  padding:24px;transition:border-color .2s,transform .2s,opacity .5s,box-shadow .2s;cursor:pointer;
}
.dl-price-card:hover{border-color:var(--borderp);transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.12);}
#desktop-landing .reveal{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease;}
#desktop-landing .reveal.visible{opacity:1;transform:translateY(0);}
/* Fondo animado del hero: aurora de luces + spotlight que sigue el ratón (paleta naranja) */
.dl-hero{position:relative;}
.dl-hero>.dl-hero-left,.dl-hero>.dl-hero-right{position:relative;z-index:2;}
.dl-hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(ellipse 78% 58% at 46% 34%,#000 26%,transparent 74%);mask-image:radial-gradient(ellipse 78% 58% at 46% 34%,#000 26%,transparent 74%);}
.dl-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.dl-aurora-blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.6;mix-blend-mode:screen;}
.dl-aurora-blob.b1{width:640px;height:640px;background:radial-gradient(circle,rgba(238,90,38,.6),transparent 64%);top:-170px;left:-90px;animation:dlAuroraA 19s ease-in-out infinite;}
.dl-aurora-blob.b2{width:520px;height:520px;background:radial-gradient(circle,rgba(255,160,95,.44),transparent 66%);top:14%;right:-120px;animation:dlAuroraB 23s ease-in-out infinite;}
.dl-aurora-blob.b3{width:540px;height:540px;background:radial-gradient(circle,rgba(160,80,255,.36),transparent 68%);bottom:-210px;left:24%;animation:dlAuroraC 21s ease-in-out infinite;}
@keyframes dlAuroraA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(70px,50px) scale(1.15);}}
@keyframes dlAuroraB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-60px,40px) scale(1.12);}}
@keyframes dlAuroraC{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,-40px) scale(1.2);}}
.dl-spotlight{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(360px circle at var(--mx,50%) var(--my,40%),rgba(238,90,38,.16),transparent 70%);}
.dl-hero:hover .dl-spotlight{opacity:1;}
/* Entrada coreografiada al cargar (solo si el usuario no pidió menos movimiento) */
@media (prefers-reduced-motion:no-preference){
  .dl-hero-left>*{animation:dlEnterUp .7s cubic-bezier(.22,1,.36,1) both;}
  .dl-hero-left>*:nth-child(1){animation-delay:.08s;}
  .dl-hero-left>*:nth-child(2){animation-delay:.18s;}
  .dl-hero-left>*:nth-child(3){animation-delay:.28s;}
  .dl-hero-left>*:nth-child(4){animation-delay:.38s;}
  .dl-hero-left>*:nth-child(5){animation-delay:.48s;}
  .dl-hero-left>*:nth-child(6){animation-delay:.58s;}
  .dl-hero-left>*:nth-child(n+7){animation-delay:.68s;}
  .dl-hero-right{animation:dlEnterRight .95s cubic-bezier(.22,1,.36,1) .3s both;}
}
@keyframes dlEnterUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes dlEnterRight{from{opacity:0;transform:translateX(46px) scale(.98);}to{opacity:1;transform:none;}}
/* ── Movimiento premium del hero (vida, no genérico) ── */
.dl-phone-wrap{animation:dlPhoneFloat 6.5s ease-in-out infinite;}
@keyframes dlPhoneFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.dl-hero-right::before{content:"";position:absolute;inset:4% 4% 6% 2%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(238,90,38,.22),transparent 72%);filter:blur(32px);animation:dlHeroGlow 13s ease-in-out infinite;}
@keyframes dlHeroGlow{0%,100%{transform:translate(0,0) scale(1);opacity:.65;}50%{transform:translate(-5%,4%) scale(1.18);opacity:1;}}
.dl-badge-float{animation:dlBadgeBob 5s ease-in-out infinite;}
.dl-badge-float2{animation:dlBadgeBob 5.6s ease-in-out infinite;animation-delay:-2.3s;}
@keyframes dlBadgeBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
/* Hover-lift táctil en tarjetas */
.cat-card,.dl-price-card,.wcard,.qt-card{transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s,border-color .28s;}
.cat-card:hover,.wcard:hover,.qt-card:hover{transform:translateY(-5px);}
.dl-price-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.28);}
@media(prefers-reduced-motion:reduce){.dl-phone-wrap,.dl-hero-right::before,.dl-badge-float,.dl-badge-float2{animation:none;}.cat-card:hover,.dl-price-card:hover,.wcard:hover,.qt-card:hover{transform:none;}}
/* ── Tarjetas de precios orientativos ──────────────────────────────
   El precio es el dato: va en Manrope, en naranja y con cifras de ancho fijo
   para que las columnas se lean de un vistazo. El nombre del servicio queda
   en segundo plano. Antes el precio salía blanco (había dos reglas peleando
   por .dl-price-range y ganaba la de color:var(--text)). */
.dl-price-card .dl-price-row{transition:background .15s;}
.dl-price-card-header{display:flex;align-items:center;gap:12px;margin-bottom:6px;
  padding-bottom:14px;border-bottom:1px solid var(--border);}
.dl-price-card-ico{width:42px;height:42px;border-radius:13px;
  background:linear-gradient(145deg,rgba(238,90,38,.22),rgba(238,90,38,.07));
  border:1px solid var(--borderp);display:flex;align-items:center;
  justify-content:center;font-size:21px;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.dl-price-card-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:16.5px;
  font-weight:800;letter-spacing:-.02em;}
.dl-price-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 8px 9px 0;border-bottom:1px solid var(--border);font-size:13.5px;
  margin-inline:-8px;padding-left:8px;border-radius:8px;}
.dl-price-row:last-of-type{border-bottom:none;}
.dl-price-card:hover .dl-price-row:hover{background:rgba(238,90,38,.06);}
.dl-price-service{color:var(--text2);line-height:1.35;}
.dl-price-range{font-family:'Manrope','Space Grotesk',sans-serif;font-weight:800;
  font-size:14px;color:var(--accent-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.dl-price-disclaimer{font-size:11px;color:var(--text3);margin-top:14px;text-align:center;
  line-height:1.5;letter-spacing:.01em;}
.dl-price-cta-btn{width:100%;margin-top:14px;padding:11px;background:rgba(238,90,38,.1);
  border:1px solid var(--borderp);border-radius:11px;color:var(--accent-ink);font-size:13.5px;
  font-weight:800;cursor:pointer;transition:background .18s,color .18s,transform .18s;
  font-family:'Manrope','Space Grotesk',sans-serif;letter-spacing:-.01em;}
.dl-price-cta-btn:hover{background:var(--primary);color:#fff;}
.dl-price-cta-btn:active{transform:scale(.985);}
@media(max-width:900px){.dl-prices-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.dl-prices-grid{grid-template-columns:1fr;}.dl-prices{padding:50px 20px;}}

/* Quick cats horizontal scroll (in-app) */
.quick-cats-bar{
  display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.quick-cats-bar::-webkit-scrollbar{display:none;}
.qcat-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:20px;padding:8px 14px;
  font-size:12px;font-weight:700;color:var(--text2);
  cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;
}
.qcat-chip:hover,.qcat-chip:active{border-color:var(--borderp);color:var(--primary);background:rgba(238,90,38,.08);}
.qcat-chip.active{background:rgba(238,90,38,.12);border-color:var(--primary);color:var(--primary);}

/* Pro card response badge */
.pro-resp-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:20px;padding:2px 8px;font-size:11px;font-weight:700;color:var(--success);}

/* Staggered cat card animation */
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.cat-card.animate-in{animation:fadeInUp .35s ease both;}

/* Landing step indicator */
.dl-steps-bar{display:flex;align-items:center;gap:0;margin:40px 0 0;max-width:520px;}
.dl-step{display:flex;align-items:center;gap:8px;flex:1;}
.dl-step-num{width:28px;height:28px;border-radius:50%;background:rgba(238,90,38,.15);border:1.5px solid var(--borderp);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--primary);flex-shrink:0;}
.dl-step-label{font-size:12px;font-weight:600;color:var(--text2);}
.dl-step-line{flex:1;height:1px;background:var(--border);margin:0 4px;}

/* ── Tarjeta de seguimiento en tiempo real (stepper vertical) ── */
.tracking-card-v2{background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-top:4px;}
.tracking-hdr-v2{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 8px;}
.tracking-title-v2{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;font-weight:800;color:var(--text);}
.tracking-eta-pill{font-size:11px;font-weight:700;color:#fff;background:var(--primary);padding:4px 12px;border-radius:999px;white-space:nowrap;}
.tracking-steps-v2{padding:6px 16px 6px;}
.tracking-step-v2{display:flex;gap:12px;align-items:stretch;}
.tracking-line-wrap{display:flex;flex-direction:column;align-items:center;flex:none;width:34px;}
.tracking-circle{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;flex:none;background:var(--bg4);color:var(--text3);border:2px solid var(--border);transition:all .3s ease;}
.tracking-circle svg{width:16px;height:16px;}
.tracking-connector{flex:1;width:2px;min-height:16px;background:var(--border);margin:3px 0;border-radius:2px;}
.tracking-step-v2>div:last-child{padding-bottom:16px;}
.tracking-step-v2:last-child>div:last-child{padding-bottom:6px;}
.tracking-step-lbl{font-size:14px;font-weight:700;color:var(--text);line-height:1.3;}
.tracking-step-sub{font-size:12px;color:var(--text2);line-height:1.4;margin-top:2px;}
/* estados del paso */
.tracking-step-v2.ts-done .tracking-circle{background:var(--success);color:#fff;border-color:var(--success);}
.tracking-step-v2.ts-done .tracking-connector{background:var(--success);}
.tracking-step-v2.ts-active .tracking-circle{background:var(--primary);color:#fff;border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(238,90,38,.18);animation:trackPulse 1.7s ease-in-out infinite;}
.tracking-step-v2.ts-active .tracking-step-lbl{color:var(--primary);}
.tracking-step-v2.ts-pending .tracking-circle{background:var(--bg4);color:var(--text3);border-color:var(--border);}
.tracking-step-v2.ts-pending .tracking-step-lbl{color:var(--text2);}
@keyframes trackPulse{0%,100%{box-shadow:0 0 0 4px rgba(238,90,38,.18);}50%{box-shadow:0 0 0 8px rgba(238,90,38,.04);}}
/* mapa */
.track-map-wrap{position:relative;margin:6px 16px 2px;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.track-map-overlay{position:absolute;top:10px;left:10px;z-index:500;background:rgba(238,90,38,.92);color:#fff;
  font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;border:1px solid rgba(238,90,38,.4);
  box-shadow:0 2px 10px rgba(0,0,0,.28);display:inline-flex;align-items:center;}
.track-map-overlay.arrived{background:rgba(16,185,129,.92);border-color:rgba(16,185,129,.45);}
/* ── Banner de seguimiento en vivo en el INICIO (tipo Glovo) ── */
.home-track-card{margin:14px 16px 4px;background:linear-gradient(150deg,var(--bg2),var(--bg3));border:1.5px solid var(--borderp);
  border-radius:18px;padding:14px;box-shadow:0 10px 30px -14px rgba(238,90,38,.35);cursor:pointer;position:relative;overflow:hidden;}
.home-track-card::before{content:"";position:absolute;top:-40px;right:-30px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(238,90,38,.16),transparent 68%);pointer-events:none;}
.home-track-hd{display:flex;align-items:center;gap:12px;margin-bottom:12px;position:relative;}
.home-track-av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--primary);}
.home-track-av.ph{background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:'Manrope','Space Grotesk',sans-serif;font-size:18px;}
.home-track-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.15;}
.home-track-sub{font-size:12px;color:var(--text2);margin-top:2px;}
.home-track-dot{width:11px;height:11px;border-radius:50%;background:var(--primary);flex-shrink:0;animation:trackDotPulse 1.4s ease-in-out infinite;}
.home-track-dot.arr{background:var(--success);animation:none;}
@keyframes trackDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(238,90,38,.5);}70%{box-shadow:0 0 0 7px rgba(238,90,38,0);}}

/* ── Loader de puntos (spinner) ── */
.loader-dot{display:inline-block;width:8px;height:8px;margin:0 3px;border-radius:50%;background:var(--primary);animation:loaderBounce 1.1s ease-in-out infinite both;}
.loader-dot:nth-child(2){animation-delay:.16s;}
.loader-dot:nth-child(3){animation-delay:.32s;}
@keyframes loaderBounce{0%,80%,100%{transform:scale(.45);opacity:.45;}40%{transform:scale(1);opacity:1;}}

/* ── Pantalla "Mis pedidos" (tarjetas, estado, acciones, filtros) ── */
.mj-filter-row{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none;}
.mj-filter-row::-webkit-scrollbar{display:none;}
.mj-fchip{flex:none;display:inline-flex;align-items:center;gap:4px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;
  cursor:pointer;background:var(--bg3);color:var(--text2);border:1px solid var(--border);white-space:nowrap;user-select:none;transition:all .15s;}
.mj-fchip.on{background:var(--primary);color:#fff;border-color:var(--primary);}
.mj-card{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--text3);border-radius:12px;padding:14px;margin-bottom:10px;}
.mj-card.active{border-left-color:var(--primary);}
.mj-card.pending{border-left-color:var(--warning);}
.mj-card.quote{border-left-color:var(--text2);}
.mj-card.completed{border-left-color:var(--success);}
.mj-card.cancelled{border-left-color:var(--danger);}
.mj-status{display:inline-block;margin-top:4px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:3px 8px;border-radius:999px;background:var(--bg4);color:var(--text2);white-space:nowrap;}
.mj-status.active{background:rgba(238,90,38,.14);color:var(--primary);}
.mj-status.pending{background:rgba(245,158,11,.16);color:var(--warning);}
.mj-status.completed{background:rgba(16,185,129,.15);color:var(--success);}
.mj-status.cancelled{background:rgba(239,68,68,.14);color:var(--danger);}
.mj-actions{display:flex;gap:8px;flex-wrap:wrap;}
/* -- Mis pedidos, ordenado por de quien es el turno (2026-08-23) ----------- */
.mj2-resumen{font-size:13px;color:var(--text2);margin:2px 0 4px;}
.mj2-resumen b{color:var(--accent-ink);font-weight:700;}
.mj2-sec{margin-top:22px;}
.mj2-rot{display:flex;align-items:center;gap:8px;}
.mj2-rotl{padding-bottom:8px;border-bottom:1.5px solid var(--border2);}
.mj2-rot .t{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text2);}
.mj2-rot .c{font-family:var(--mono);font-size:11px;font-weight:600;background:var(--bg4);
  color:var(--text2);border-radius:3px;padding:1px 6px;font-variant-numeric:tabular-nums;}
.mj2-sec.mj2-tuyo .mj2-rotl{border-bottom-color:var(--primary);}
.mj2-sec.mj2-tuyo .mj2-rot .t{color:var(--accent-ink);}
.mj2-sec.mj2-tuyo .mj2-rot .c{background:var(--primary);color:var(--sobre-primary);}

.mj2-fila{border-bottom:1px solid var(--border);padding:12px 1px;cursor:pointer;}
.mj2-fila:last-child{border-bottom:0;}
.mj2-fila:active{background:var(--bg3);}
.mj2-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.mj2-tit{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;font-weight:700;
  line-height:1.25;letter-spacing:-.01em;min-width:0;}
.mj2-imp{font-family:var(--mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;flex-shrink:0;}
.mj2-imp.mj2-pend{color:var(--text3);font-weight:400;font-size:13px;}
.mj2-imp.mj2-vivo{color:var(--accent-ink);}
.mj2-imp.mj2-cerr{color:var(--text2);}
.mj2-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;
  font-size:13px;color:var(--text2);}
.mj2-sp{color:var(--text3);opacity:.55;}
.mj2-marca{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;}
.mj2-marca::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.mj2-m-esp{color:var(--text3);}
.mj2-m-marcha{color:var(--mint);}
.mj2-m-tuyo{color:var(--accent-ink);}
.mj2-m-ok{color:var(--success);}
.mj2-m-no{color:var(--danger);}
/* El enfasis del titulo en la seccion que reclama accion, dicho a proposito. */
.mj2-sec.mj2-tuyo .mj2-tit{color:var(--accent-ink);}
.mj2-cuando{font-family:var(--mono);font-size:11px;color:var(--text3);
  font-variant-numeric:tabular-nums;margin-top:4px;display:block;}
.mj2-cuando.mj2-alerta{color:var(--warning);font-weight:500;}

.mj2-acc{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.mj2-b{font-family:'Manrope','Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  border-radius:8px;padding:8px 14px;border:1.5px solid var(--border2);background:none;
  color:var(--text);white-space:nowrap;cursor:pointer;}
.mj2-b.mj2-p{background:var(--primary);border-color:var(--primary);color:var(--sobre-primary);}
.mj2-b:active{transform:scale(.97);}

.mj2-aviso{display:flex;align-items:flex-start;gap:8px;margin-top:8px;padding:8px 12px;
  border-radius:8px;background:color-mix(in srgb,var(--warning) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warning) 32%,transparent);
  font-size:12px;line-height:1.45;color:var(--text);}
.mj2-aviso svg{flex-shrink:0;margin-top:1px;stroke:var(--warning);}

.mj2-plegar{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;border-bottom:1.5px solid var(--border2);padding:8px 1px;
  cursor:pointer;color:var(--text2);font:inherit;}
.mj2-chev{transition:transform .2s;flex-shrink:0;}
.mj2-plegado .mj2-chev{transform:rotate(-90deg);}
.mj2-plegado .mj2-cuerpo{display:none;}
@media(prefers-reduced-motion:reduce){.mj2-chev{transition:none;}}
/* En escritorio la lista se limita a una columna legible: estirada a 1440px
   quedaba el importe a un palmo del titulo, con un vacio enorme en medio. */
@media(min-width:900px){#mj-list{max-width:660px;}}
.mj-btn{flex:1;min-width:88px;padding:8px 12px;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;
  border:1px solid var(--border);background:var(--bg3);color:var(--text);font-family:inherit;transition:all .15s;}
.mj-btn:hover{border-color:var(--borderp);}
.mj-btn-chat{background:var(--primary);color:#fff;border-color:var(--primary);}
.mj-btn-rate{background:rgba(238,90,38,.1);color:var(--primary);border-color:var(--borderp);}

/* ══════════ LANDING yoCurro (injertada de la maqueta) ══════════
   Todas las clases van prefijadas con yc- para no chocar con las de la
   app (había 53 colisiones: .wrap, .logo, .cat, .hero, .pin…). Las reglas
   globales de la maqueta (:root, body) están acotadas a #desktop-landing.
   Va al final a propósito: así gana al bloque .dl-* antiguo. ══════════ */

/* ───────────────────────────────────────────────────────────
   Landing yoCurro · Alicante
   Continúa el sistema ya aprobado en las dos altas: naranja de
   acción, menta de confianza, Manrope/Inter/IBM Plex Mono y el
   papel cálido como artefacto de marca. Aquí el papel aparece
   una sola vez, en el héroe: la ficha de quien va a tu casa.
   ─────────────────────────────────────────────────────────── */
:root{
  --ink:#080b14; --ink-2:#0e1420; --ink-3:#161d2d;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --orange:#ee5a26; --orange-2:#f17a50; --mint:#14c8ad;
  --white:#f2f5fa; --slate:#8a97b0; --slate-2:#7b88a3;
  --paper:#ede6d8; --paper-2:#ded5c4; --paper-ink:#26221c; --paper-ink-2:#6b6355;
  --seal:#0e6d5c;
  --r:18px; --r-sm:12px; --r-lg:26px;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.4,0,.2,1);
  --pad:clamp(20px,5cqw,64px);
  /* Gradiente firma: los dos colores de la marca, no un azul cualquiera. */
  --firma:linear-gradient(118deg,var(--orange) 0%,#ec8451 42%,var(--mint) 100%);
  /* Versión para TEXTO del gradiente y de los acentos: en claro hay que
     oscurecerlos o no llegan al contraste mínimo. */
  --firma-txt:var(--firma);
  --accent-ink:var(--orange);
  --mint-ink:var(--mint);
  --urg-ink:#ff3b30;
  --header-bg:rgba(8,11,20,.82);
  --cats-bg:rgba(8,11,20,.6);
  --scene-bg:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  --app-bg:#05070d;
  --aurora-op:.5;
}
/* ══ MODO CLARO ═════════════════════════════════════════════
   Lo que hacen Tegu, WEBEL, TaskRabbit y Thumbtack: en servicios
   del hogar el fondo claro dice "limpio y de fiar". Solo cambian
   los tokens; ni una regla de layout se duplica. */
html.light #desktop-landing{
  --ink:#ffffff; --ink-2:#f6f8fb; --ink-3:#edf1f6;
  --line:rgba(13,20,36,.10); --line-2:rgba(13,20,36,.17);
  --white:#0d1424; --slate:#54617a; --slate-2:#5c6880;
  --firma-txt:linear-gradient(118deg,#b8410f 0%,#c0392b 40%,#0c7c69 100%);
  --accent-ink:#b8410f; --mint-ink:#0c7c69; --urg-ink:#cf2016;
  --header-bg:rgba(255,255,255,.88); --cats-bg:rgba(255,255,255,.7);
  --scene-bg:linear-gradient(180deg,rgba(13,20,36,.025),transparent);
  --app-bg:#e7ebf2; --aurora-op:.28;
}
@supports (background:linear-gradient(in oklch,red,blue)){
  :root{--firma-txt:linear-gradient(118deg in oklch,var(--orange),#2fd8bd);}
  html.light #desktop-landing{--firma-txt:linear-gradient(118deg in oklch,#b8410f,#0a8f78);}
}
html.light #desktop-landing .yc-rd-clock,html.light #desktop-landing .yc-empty{box-shadow:0 10px 30px -18px rgba(13,20,36,.4);}
html.light #desktop-landing .yc-svc{box-shadow:0 4px 14px -8px rgba(13,20,36,.3);}
/* Sobre blanco, la foto apagada se ve sucia: subimos el brillo en reposo. */
html.light #desktop-landing .yc-svc-img{filter:saturate(1) brightness(.94);}
html.light #desktop-landing .yc-svc.yc-spot .yc-svc-img,html.light #desktop-landing .yc-svc:hover .yc-svc-img{filter:saturate(1.12) brightness(1.06);}
html.light #desktop-landing .yc-svc::after{background:linear-gradient(180deg,transparent 38%,rgba(4,7,14,.7) 100%);}
html.light #desktop-landing .yc-procard{box-shadow:0 30px 60px -22px rgba(13,20,36,.45),0 2px 0 rgba(255,255,255,.5) inset;}
html.light #desktop-landing .yc-tile,html.light #desktop-landing .yc-step,html.light #desktop-landing .yc-rev,html.light #desktop-landing details,html.light #desktop-landing .yc-uf{box-shadow:0 2px 10px -6px rgba(13,20,36,.18);}

*,*::before,*::after{box-sizing:border-box;}
#desktop-landing{margin:0;background:var(--ink);color:var(--white);font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5;}
:where(a,button,input,select):focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:8px;}
h1,h2,h3{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.025em;margin:0;text-wrap:balance;}
p{margin:0;}
.yc-wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad);}

/* #yc-page es el contenedor consultado: cambiar su ancho cambia el layout,
   que es lo que permite la vista "App" sin duplicar una sola regla. */
#yc-page{container-type:inline-size;position:relative;background:var(--ink);}

/* ── Vista App: el mismo HTML dentro de un teléfono ───────── */
body.yc-narrow{background:var(--app-bg);min-height:100dvh;padding:26px 0;}
body.yc-narrow #yc-page{width:390px;margin:0 auto;border-radius:26px;border:1px solid var(--line);overflow:hidden;}
body.yc-appmode{background:var(--app-bg);min-height:100dvh;display:grid;place-items:center;padding:26px 0;}
body.yc-appmode #yc-page{
  width:390px;height:844px;overflow-y:auto;overflow-x:hidden;
  border-radius:44px;border:1px solid var(--line-2);
  box-shadow:0 50px 110px -24px #000,0 0 0 11px #10141d,0 0 0 12px #262c39;
  scrollbar-width:none;
}
body.yc-appmode #yc-page::-webkit-scrollbar{display:none;}
body.yc-appmode #yc-page header{top:0;}
/* Cromo del teléfono: barra de estado e indicador de inicio. */
.yc-phone-chrome{display:none;}
body.yc-appmode .yc-phone-chrome{
  display:flex;position:fixed;z-index:70;width:390px;left:50%;transform:translateX(-50%);
  align-items:center;justify-content:space-between;
  padding:0 30px;height:44px;top:calc(50% - 422px);
  font-family:'Manrope',sans-serif;font-size:14px;font-weight:800;color:#fff;
  pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.yc-phone-chrome .yc-icons{display:flex;gap:5px;align-items:center;}
.yc-phone-chrome svg{width:17px;height:12px;fill:#fff;}
/* En modo claro la app tiene fondo claro: la hora en blanco no se veía. */
html.light #desktop-landing.yc-appmode .yc-phone-chrome{color:#16151a;text-shadow:none;}
html.light #desktop-landing.yc-appmode .yc-phone-chrome svg{fill:#16151a;}
html.light #desktop-landing.yc-appmode .yc-phone-chrome svg rect[stroke]{stroke:#16151a;}
html.light #desktop-landing.yc-appmode .yc-home-bar{background:rgba(22,21,26,.6);}
body.yc-appmode .yc-home-bar{
  display:block;position:fixed;z-index:70;left:50%;transform:translateX(-50%);
  bottom:calc(50% - 416px);width:134px;height:5px;border-radius:99px;
  background:rgba(255,255,255,.85);pointer-events:none;
}
.yc-home-bar{display:none;}
body.yc-appmode #yc-page > header{padding-top:34px;}

/* ══ VISTA APP DE VERDAD ═════════════════════════════════════
   La landing metida en un teléfono NO es una app: es una página de venta
   estrecha. Una app abre en la tarea, no en el argumentario. Por eso el modo
   App esconde #yc-page y monta esta pantalla, con su cabecera, su barra de
   pestañas fija y el trabajo en curso arriba del todo. */
#appview{display:none;}
body.yc-appmode #yc-page{display:none;}
body.yc-appmode #appview{
  display:flex;flex-direction:column;width:390px;height:844px;overflow:hidden;
  border-radius:44px;border:1px solid var(--line-2);
  box-shadow:0 50px 110px -24px #000,0 0 0 11px #10141d,0 0 0 12px #262c39;
  background:var(--ap);color:var(--atx);
}
/* Fichas propias, para no pelearme con las de la landing. */
#appview{
  --ap:#0e1017; --ap2:#171b24; --ap3:#1f2531;
  --atx:#f3f2f0; --atx2:#a6a4b0; --atx3:#7b7986;
  --aln:#252a36; --aln2:#333a49;
  --nar:#f17a50; --nartx:#ff8f5e; --narsu:#2a1710;
  --men:#14c8ad; --mentx:#3fdcc4;
  --rojo:#f43f5e; --rojotx:#fb7185;
}
html.light #desktop-landing #appview{
  --ap:#fbfaf8; --ap2:#ffffff; --ap3:#f2efea;
  --atx:#16151a; --atx2:#54525d; --atx3:#6f6c78;
  --aln:#e6e2dc; --aln2:#d3cec6;
  --nar:#ea5b23; --nartx:#c4410f; --narsu:#fdeee7;
  --men:#0fb9a3; --mentx:#04796b;
  --rojo:#e11d48; --rojotx:#be123c;
}
#appview *{box-sizing:border-box;}
.yc-av-top{flex:none;padding:46px 16px 10px;display:flex;align-items:center;gap:10px;}
.yc-av-logo{font-family:'Manrope',sans-serif;font-weight:800;font-size:19px;
  letter-spacing:-.03em;color:var(--atx);}
.yc-av-logo i{font-style:normal;color:var(--nartx);}
.yc-av-top .yc-sp{margin-left:auto;}
.yc-av-ico{width:33px;height:33px;border-radius:99px;background:var(--ap2);
  border:1px solid var(--aln);display:grid;place-items:center;color:var(--atx2);
  position:relative;}
.yc-av-ico svg{width:15px;height:15px;}
.yc-av-ico .yc-bola{position:absolute;top:6px;right:7px;width:6px;height:6px;
  border-radius:99px;background:var(--rojo);border:1.5px solid var(--ap);}
.yc-av-yo{width:33px;height:33px;border-radius:99px;background:var(--narsu);
  color:var(--nartx);display:grid;place-items:center;font-family:'Manrope',sans-serif;
  font-weight:800;font-size:13px;}
/* Hueco al final para que el botón flotante de WhatsApp no se quede tapando
   nada de forma permanente. */
.yc-av-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 16px 62px;
  scrollbar-width:none;}
.yc-av-scroll::-webkit-scrollbar{display:none;}
.yc-av-saludo{font-family:'Manrope',sans-serif;font-weight:800;font-size:23px;
  letter-spacing:-.03em;margin:2px 0 12px;line-height:1.15;}
.yc-av-saludo span{color:var(--atx3);}

.yc-av-busca{display:flex;align-items:stretch;background:var(--ap2);
  border:1px solid var(--aln2);border-radius:99px;overflow:hidden;margin-bottom:16px;
  box-shadow:0 6px 20px -12px rgba(0,0,0,.5);}
.yc-av-busca .yc-c{flex:1;padding:9px 14px;min-width:0;}
.yc-av-busca .yc-c .yc-k{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--atx3);}
.yc-av-busca .yc-c .yc-v{font-size:13px;font-weight:600;color:var(--atx);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.yc-av-busca .yc-c .yc-v.yc-gris{color:var(--atx3);font-weight:500;}
.yc-av-busca .yc-sep{width:1px;background:var(--aln);margin:9px 0;}
.yc-av-busca .yc-z{display:flex;align-items:center;gap:4px;}
.yc-av-busca .yc-z svg{width:11px;height:11px;color:var(--mentx);flex:none;}
.yc-av-busca .yc-go{width:38px;flex:none;display:grid;place-items:center;background:var(--nar);
  color:#fff;margin:4px;border-radius:99px;}
.yc-av-busca .yc-go svg{width:16px;height:16px;}

.yc-av-h{display:flex;align-items:baseline;justify-content:space-between;margin:18px 2px 10px;}
.yc-av-h h4{font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;
  letter-spacing:-.02em;margin:0;color:var(--atx);}
.yc-av-h a{font-size:12px;color:var(--nartx);text-decoration:none;font-weight:650;}

/* Trabajo en curso: lo primero, porque es a lo que abres la app */
.yc-av-track{background:var(--ap2);border:1px solid var(--aln);border-radius:20px;
  overflow:hidden;box-shadow:0 10px 30px -18px rgba(0,0,0,.6);}
.yc-av-track .yc-m{height:112px;position:relative;background:#e5e1da;}
body:not(.yc-light) #appview .yc-av-track .yc-m{background:#1b1f29;}
.yc-av-track .yc-m svg.yc-calles{position:absolute;inset:0;width:100%;height:100%;}
.yc-av-track .yc-pin{position:absolute;left:24%;top:42%;width:30px;height:30px;border-radius:99px;
  background:var(--nar);border:2.5px solid var(--ap2);display:grid;place-items:center;
  color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.35);}
.yc-av-track .yc-pin svg{width:14px;height:14px;}
.yc-av-track .yc-pin::after{content:'';position:absolute;inset:-8px;border-radius:99px;
  border:2px solid var(--nar);animation:avpulso 2.2s ease-out infinite;}
@keyframes avpulso{0%{transform:scale(.7);opacity:.6;}100%{transform:scale(1.55);opacity:0;}}
.yc-av-track .yc-casa{position:absolute;right:19%;bottom:24%;width:23px;height:23px;border-radius:7px;
  background:var(--atx);color:var(--ap);display:grid;place-items:center;border:2px solid var(--ap2);}
.yc-av-track .yc-casa svg{width:11px;height:11px;}
.yc-av-track .yc-p{padding:12px 14px 13px;}
.yc-av-track .yc-fila{display:flex;align-items:center;gap:7px;}
.yc-av-track .yc-dot{width:7px;height:7px;border-radius:99px;background:var(--men);flex:none;}
.yc-av-track b{font-family:'Manrope',sans-serif;font-weight:750;font-size:14px;color:var(--atx);}
.yc-av-track .yc-eta{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:12px;
  font-weight:600;color:var(--nartx);}
.yc-av-track .yc-s{font-size:11.5px;color:var(--atx3);margin-top:2px;}

.yc-av-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.yc-av-cat .yc-f{aspect-ratio:1;border-radius:15px;overflow:hidden;background:var(--ap3);margin-bottom:5px;}
.yc-av-cat .yc-f img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1) brightness(.96);}
.yc-av-cat .yc-n{font-size:9.5px;font-weight:600;color:var(--atx2);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Más pedidos: trabajos concretos con precio. La gente no piensa «fontanería»,
   piensa «se me sale agua», así que este carrusel convierte más que las categorías. */
.yc-av-mas{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
  margin:0 -16px;padding:0 16px 2px;}
.yc-av-mas::-webkit-scrollbar{display:none;}
.yc-av-m{flex:none;width:132px;background:var(--ap2);border:1px solid var(--aln);
  border-radius:15px;overflow:hidden;}
.yc-av-m .yc-im{height:84px;background:var(--ap3);}
.yc-av-m .yc-im img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1) brightness(.96);}
.yc-av-m .yc-tt{padding:9px 10px 10px;}
.yc-av-m .yc-tt b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;
  line-height:1.25;margin-bottom:2px;color:var(--atx);}
.yc-av-m .yc-tt span{font-size:11.5px;font-weight:700;color:var(--nartx);}

/* Profesionales cerca: carrusel, patrón de app, no de página */
.yc-av-carr{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
  margin:0 -16px;padding:0 16px 2px;}
.yc-av-carr::-webkit-scrollbar{display:none;}
.yc-av-p{flex:none;width:158px;background:var(--ap2);border:1px solid var(--aln);
  border-radius:17px;padding:11px;}
.yc-av-p .yc-av{width:38px;height:38px;border-radius:99px;overflow:hidden;position:relative;
  margin-bottom:8px;background:var(--ap3);}
.yc-av-p .yc-av img{width:100%;height:100%;object-fit:cover;}
.yc-av-p .yc-av .yc-d{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:99px;
  background:var(--men);border:2px solid var(--ap2);}
.yc-av-p .yc-n{font-family:'Manrope',sans-serif;font-weight:750;font-size:13px;color:var(--atx);
  display:flex;align-items:center;gap:3px;}
.yc-av-p .yc-n svg{width:11px;height:11px;color:#3b82f6;flex:none;}
.yc-av-p .yc-o{font-size:10.5px;color:var(--atx3);margin-bottom:6px;}
.yc-av-p .yc-r{font-size:11px;color:var(--atx2);}
.yc-av-p .yc-r em{font-style:normal;color:var(--nar);letter-spacing:-1px;}
.yc-av-p .yc-pr{margin-top:7px;font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;
  color:var(--nartx);}

.yc-av-urg{border:1px dashed var(--aln2);border-radius:18px;padding:13px;background:var(--ap2);
  display:flex;gap:11px;align-items:flex-start;}
.yc-av-urg .yc-i{width:29px;height:29px;border-radius:9px;background:var(--ap3);display:grid;
  place-items:center;color:var(--atx3);flex:none;}
.yc-av-urg .yc-i svg{width:14px;height:14px;}
.yc-av-urg .yc-t{font-family:'Manrope',sans-serif;font-weight:750;font-size:12.5px;color:var(--atx);
  margin-bottom:2px;}
.yc-av-urg .yc-d{font-size:11px;color:var(--atx3);line-height:1.45;}

.yc-av-tabs{flex:none;display:flex;background:var(--ap2);border-top:1px solid var(--aln);
  padding:9px 0 22px;}
.yc-av-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:9.5px;font-weight:650;color:var(--atx3);}
.yc-av-tab svg{width:19px;height:19px;}
.yc-av-tab.yc-on{color:var(--nartx);}
.yc-av-tab .yc-badge{position:absolute;transform:translate(11px,-3px);min-width:14px;height:14px;
  border-radius:99px;background:var(--rojo);color:#fff;font-size:8.5px;font-weight:700;
  display:grid;place-items:center;padding:0 3px;}

/* ══ CABECERA ═══════════════════════════════════════════════ */
header{position:sticky;top:0;z-index:40;background:var(--header-bg);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);}
/* En móvil no caben logo + toggle + botón en una fila: el toggle baja a su
   propia línea y de paso gana presencia, que es justo lo que queremos. */
.yc-hbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:11px;}
.yc-seg{order:3;width:100%;}
.yc-seg button{flex:1;}
@container (min-width:900px){
  .yc-hbar{flex-wrap:nowrap;height:64px;padding-block:0;gap:18px;}
  .yc-seg{order:0;width:auto;}
  .yc-seg button{flex:none;}
}
.yc-logo{font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.03em;flex:none;}
.yc-logo span{color:var(--accent-ink);}
/* Toggle de público: los dos lados del marketplace, siempre visibles. */
.yc-seg{display:flex;background:var(--ink-3);border:1px solid var(--line-2);border-radius:99px;padding:3px;flex:none;}
.yc-seg button{border:0;background:none;cursor:pointer;border-radius:99px;padding:7px 17px;color:var(--slate);
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;transition:background .25s var(--ease),color .25s;}
.yc-seg button.yc-on{background:var(--white);color:var(--ink);}
.yc-hnav{margin-left:auto;display:none;align-items:center;gap:24px;}
.yc-hnav a{color:var(--slate);text-decoration:none;font-size:14px;font-weight:500;}
.yc-hnav a:hover{color:var(--white);}
.yc-hcta{border:0;cursor:pointer;white-space:nowrap;margin-left:auto;background:var(--white);color:#0b1020;font-family:'Manrope',sans-serif;
  font-weight:800;font-size:14px;padding:11px 20px;border-radius:99px;transition:transform .16s var(--spring);}
.yc-hcta{color:var(--ink);}
.yc-hcta:active{transform:scale(.96);}
@container (min-width:900px){.yc-hnav{display:flex;}}

/* Tira de categorías: navegación de verdad, no decoración. */
.yc-cats{border-bottom:1px solid var(--line);background:var(--cats-bg);}
.yc-cats-in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:10px;}
.yc-cats-in::-webkit-scrollbar{display:none;}
.yc-cat{display:flex;align-items:center;gap:8px;flex:none;padding:9px 15px;border-radius:99px;
  border:1px solid transparent;background:none;color:var(--slate);cursor:pointer;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;white-space:nowrap;transition:.2s var(--ease);}
.yc-cat:hover{background:var(--ink-3);color:var(--white);}
.yc-cat svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;}
.yc-cat.yc-all{margin-left:auto;color:var(--accent-ink);}

/* ══ AURORAS ════════════════════════════════════════════════
   Manchas de color que respiran y derivan muy despacio. Dan la
   sensación de página viva sin pedirle nada al usuario. */
.yc-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.yc-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:var(--aurora-op);
  will-change:transform;}
.yc-aurora i:nth-child(1){width:540px;height:540px;top:-220px;left:-150px;background:var(--orange);
  animation:drift1 26s ease-in-out infinite alternate;}
.yc-aurora i:nth-child(2){width:460px;height:460px;bottom:-240px;right:-130px;background:var(--mint);
  opacity:.34;animation:drift2 32s ease-in-out infinite alternate;}
.yc-aurora i:nth-child(3){width:340px;height:340px;top:38%;right:16%;background:#ec8451;opacity:.2;
  animation:drift3 24s ease-in-out infinite alternate;}
@keyframes drift1{to{transform:translate3d(90px,60px,0) scale(1.18);}}
@keyframes drift2{to{transform:translate3d(-80px,-50px,0) scale(1.22);}}
@keyframes drift3{to{transform:translate3d(-60px,70px,0) scale(.85);}}

.yc-mint-txt{color:var(--mint-ink);}
.yc-grad{background:var(--firma-txt);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ══ ESCENAS VIVAS ══════════════════════════════════════════
   Una ilustración animada por sección, construida a medida con
   el vocabulario del oficio. No son iconos: cuentan el mecanismo. */
.yc-scene{position:relative;margin-top:34px;border:1px solid var(--line);border-radius:22px;
  background:var(--scene-bg);padding:30px 22px;overflow:hidden;}

/* A · El recorrido del aviso */
.yc-flow{display:flex;align-items:center;gap:10px;min-height:96px;}
.yc-fl-node{flex:none;display:grid;place-items:center;text-align:center;border-radius:16px;
  border:1px solid var(--line-2);background:var(--ink-3);padding:12px 14px;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:-.01em;white-space:nowrap;}
.yc-fl-node small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:8.5px;
  letter-spacing:.14em;color:var(--slate-2);margin-top:3px;text-transform:uppercase;}
.yc-fl-node.yc-hub{background:var(--firma);color:#1a0f08;border-color:transparent;
  animation:hubBeat 3.4s ease-in-out infinite;}
.yc-fl-node.yc-hub small{color:rgba(26,15,8,.62);}
@keyframes hubBeat{0%,100%{box-shadow:0 0 0 0 rgba(238,90,38,.42);}50%{box-shadow:0 0 0 13px rgba(238,90,38,0);}}
.yc-fl-wire{position:relative;flex:1;height:2px;min-width:34px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px);}
.yc-fl-wire i{position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 12px 2px rgba(238,90,38,.85);
  animation:runRight 2.8s linear infinite;}
.yc-fl-wire i:nth-child(2){animation-delay:1.4s;}
.yc-fl-wire.yc-back i{background:var(--mint);box-shadow:0 0 12px 2px rgba(20,200,173,.85);
  animation-name:runLeft;animation-duration:3.2s;}
@keyframes runRight{from{left:-4px;opacity:0;}12%{opacity:1;}88%{opacity:1;}to{left:calc(100% - 3px);opacity:0;}}
@keyframes runLeft{from{left:calc(100% - 3px);opacity:0;}12%{opacity:1;}88%{opacity:1;}to{left:-4px;opacity:0;}}
.yc-fl-pros{flex:none;display:flex;}
.yc-fl-pros b{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink-2);margin-left:-9px;
  display:grid;place-items:center;font-size:14px;background:var(--ink-3);
  animation:proPop 3.4s ease-in-out infinite;}
.yc-fl-pros b:nth-child(1){margin-left:0;animation-delay:.1s;}
.yc-fl-pros b:nth-child(2){animation-delay:.35s;}
.yc-fl-pros b:nth-child(3){animation-delay:.6s;}
@keyframes proPop{0%,72%,100%{transform:translateY(0);}80%{transform:translateY(-6px);}}
.yc-fl-cap{margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-2);text-align:center;}

/* B · El barrido de verificación */
.yc-scan{max-width:420px;margin:0 auto;position:relative;border:1px solid var(--line-2);border-radius:16px;
  background:var(--ink-3);padding:16px 18px;overflow:hidden;}
.yc-sc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;
  font-size:13.5px;color:var(--slate);}
.yc-sc-row+.yc-sc-row{border-top:1px dashed var(--line);}
.yc-sc-row b{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;
  border:1.5px solid var(--line-2);color:transparent;font-size:12px;font-weight:800;
  animation:tick 6s ease-in-out infinite;}
.yc-sc-row:nth-child(1) b{animation-delay:.6s;}
.yc-sc-row:nth-child(2) b{animation-delay:1.5s;}
.yc-sc-row:nth-child(3) b{animation-delay:2.4s;}
@keyframes tick{0%,8%{background:transparent;border-color:var(--line-2);color:transparent;transform:scale(1);}
  14%{transform:scale(1.22);}
  16%,86%{background:var(--mint);border-color:var(--mint);color:#04231e;transform:scale(1);}
  96%,100%{background:transparent;border-color:var(--line-2);color:transparent;}}
.yc-sc-beam{position:absolute;left:0;right:0;height:44%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(20,200,173,.16),transparent);
  animation:beam 6s ease-in-out infinite;}
@keyframes beam{0%{top:-45%;}60%,100%{top:105%;}}

/* C · El dinero retenido */
.yc-escrow{display:flex;align-items:center;gap:8px;padding-top:14px;}
.yc-es-step{flex:none;border:1px solid var(--line-2);border-radius:14px;background:var(--ink-3);
  padding:11px 14px;font-family:'Manrope',sans-serif;font-weight:800;font-size:12.5px;white-space:nowrap;}
.yc-es-step.yc-hold{border-color:rgba(238,90,38,.5);}
.yc-es-step.yc-hold span{animation:lockPulse 5s ease-in-out infinite;display:inline-block;}
@keyframes lockPulse{0%,34%{transform:scale(1);}42%{transform:scale(1.35);}50%,100%{transform:scale(1);}}
.yc-es-track{position:relative;flex:1;height:2px;min-width:30px;background:var(--line-2);border-radius:2px;}
.yc-es-track::after{content:'';position:absolute;inset:0;border-radius:2px;background:var(--firma);
  transform-origin:left;transform:scaleX(0);animation:fill 5s ease-in-out infinite;}
.yc-es-track.yc-b::after{animation-delay:2.5s;}
@keyframes fill{0%,6%{transform:scaleX(0);}36%,94%{transform:scaleX(1);}100%{transform:scaleX(0);}}
.yc-es-coin{position:absolute;top:-17px;left:0;transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;color:var(--accent-ink);
  background:var(--ink);border:1px solid rgba(238,90,38,.45);border-radius:99px;padding:3px 8px;
  animation:coin 5s ease-in-out infinite;white-space:nowrap;}
@keyframes coin{0%,6%{left:4%;opacity:0;}12%{opacity:1;}36%,92%{left:92%;opacity:1;}100%{left:92%;opacity:0;}}

/* ══ SERVICIOS ══════════════════════════════════════════════
   La rejilla no espera al ratón: un foco recorre las tarjetas y
   va despertando una cada vez. En el móvil es la única manera de
   que se note viva. */
.yc-svc-grid{display:grid;gap:12px;margin-top:36px;grid-template-columns:repeat(2,1fr);}
@container (min-width:560px){.yc-svc-grid{grid-template-columns:repeat(3,1fr);}}
@container (min-width:900px){.yc-svc-grid{grid-template-columns:repeat(6,1fr);}}
.yc-svc{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;
  padding:0;background:var(--ink-2);aspect-ratio:4/5;display:block;
  transition:transform .4s var(--spring),border-color .3s var(--ease),box-shadow .4s var(--ease);}
/* Las fotos van casi a plena luz: el degradado de abajo ya sostiene el nombre,
   así que no hace falta apagar la imagen entera para que se lea. */
.yc-svc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) brightness(.86);transform:scale(1.04);
  transition:filter .55s var(--ease),transform .7s var(--ease);}
.yc-svc::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 26%,rgba(4,7,14,.5) 62%,rgba(4,7,14,.88) 100%);}
.yc-svc-ico{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:rgba(8,11,20,.6);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);transition:background .35s var(--ease),transform .4s var(--spring);}
.yc-svc-ico svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.9;}
.yc-svc-name{position:absolute;left:12px;right:10px;bottom:11px;z-index:2;text-align:left;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:13.5px;color:#fff;letter-spacing:-.01em;
  text-shadow:0 1px 6px rgba(0,0,0,.6);}
.yc-svc.yc-spot,.yc-svc:hover{transform:translateY(-6px);border-color:var(--line-2);
  box-shadow:0 22px 40px -20px rgba(0,0,0,.85);}
.yc-svc.yc-spot .yc-svc-img,.yc-svc:hover .yc-svc-img{filter:saturate(1.12) brightness(1.04);transform:scale(1.12);}
.yc-svc.yc-spot .yc-svc-ico,.yc-svc:hover .yc-svc-ico{background:var(--firma);border-color:transparent;transform:scale(1.1);}
.yc-svc.yc-spot .yc-svc-ico svg,.yc-svc:hover .yc-svc-ico svg{stroke:#1a0f08;}

/* ══ MODO URGENTE ═══════════════════════════════════════════
   Su propio color: el naranja de marca vira a rojo. El radar y
   el cronómetro son la función, no un adorno. */
.yc-urg{--urg:#ff3b30;--urg2:#ff8a3d;position:relative;overflow:hidden;}
.yc-urg-aurora i:nth-child(1){background:var(--urg);opacity:.22;width:420px;height:420px;top:-180px;left:6%;}
.yc-urg-aurora i:nth-child(2){background:var(--urg2);opacity:.16;width:360px;height:360px;bottom:-190px;right:8%;}
.yc-eyebrow.yc-urgente{color:var(--urg-ink);}
.yc-grad-urg{background:linear-gradient(112deg,var(--urg-ink),var(--urg2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.yc-urg-grid{position:relative;z-index:1;display:grid;gap:36px;align-items:center;}
@container (min-width:900px){.yc-urg-grid{grid-template-columns:1.1fr .9fr;}}
.yc-urg-facts{display:grid;gap:10px;margin-top:26px;}
@container (min-width:560px){.yc-urg-facts{grid-template-columns:repeat(3,1fr);}}
.yc-uf{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--ink-3);}
.yc-uf b{display:block;font-family:'Manrope',sans-serif;font-size:19px;font-weight:800;color:var(--urg-ink);letter-spacing:-.02em;}
.yc-uf.yc-mint b{color:var(--mint-ink);}
.yc-uf span{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--slate);}
.yc-urg-btn{background:linear-gradient(135deg,var(--urg2),var(--urg));box-shadow:0 14px 32px -12px rgba(255,59,48,.75);}
.yc-urg-btn:hover{box-shadow:0 18px 40px -12px rgba(255,59,48,.9);}

.yc-radar{position:relative;aspect-ratio:1;max-width:330px;margin:0 auto 26px;width:100%;display:grid;place-items:center;}
.yc-rd-rings i{position:absolute;top:50%;left:50%;width:46%;height:46%;margin:-23% 0 0 -23%;border-radius:50%;
  border:1.5px solid rgba(255,59,48,.5);animation:sonar 3.6s ease-out infinite;}
.yc-rd-rings i:nth-child(2){animation-delay:1.2s;}
.yc-rd-rings i:nth-child(3){animation-delay:2.4s;}
@keyframes sonar{from{transform:scale(.28);opacity:.85;}to{transform:scale(2.15);opacity:0;}}
.yc-rd-home{position:relative;z-index:2;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  font-size:26px;background:var(--ink-3);border:1px solid var(--line-2);
  box-shadow:0 0 0 6px rgba(255,59,48,.09);}
.yc-rd-pro{position:absolute;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:16px;
  background:var(--ink-3);border:1px solid var(--line-2);animation:ping 3.6s ease-in-out infinite;}
.yc-rd-pro.yc-p1{top:6%;left:22%;animation-delay:.2s;}
.yc-rd-pro.yc-p2{top:24%;right:4%;animation-delay:1s;}
.yc-rd-pro.yc-p3{bottom:14%;left:6%;animation-delay:1.8s;}
.yc-rd-pro.yc-p4{bottom:16%;right:4%;animation-delay:2.6s;}
@keyframes ping{0%,55%,100%{transform:scale(1);border-color:var(--line-2);box-shadow:none;}
  62%{transform:scale(1.18);border-color:var(--urg);box-shadow:0 0 16px 2px rgba(255,59,48,.5);}
  75%{transform:scale(1);border-color:var(--urg);}}
.yc-rd-clock{position:absolute;z-index:4;bottom:-4px;left:50%;transform:translateX(-50%);text-align:center;
  background:var(--ink);border:1px solid rgba(255,59,48,.4);border-radius:14px;padding:8px 16px;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8);}
.yc-rd-clock span{display:block;font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;
  color:var(--urg-ink);font-variant-numeric:tabular-nums;letter-spacing:.04em;}
.yc-rd-clock small{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-2);margin-top:2px;}

/* ══ WHATSAPP SIEMPRE A MANO ════════════════════════════════ */
.yc-wa{position:fixed;z-index:75;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:9px;
  padding:12px 18px 12px 15px;border-radius:99px;text-decoration:none;color:#fff;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:14.5px;
  background:var(--firma);box-shadow:0 14px 34px -10px rgba(238,90,38,.6),0 2px 10px rgba(0,0,0,.35);
  transition:transform .2s var(--spring),box-shadow .3s var(--ease);}
.yc-wa:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 20px 44px -10px rgba(238,90,38,.75);}
.yc-wa:active{transform:scale(.97);}
.yc-wa svg{width:22px;height:22px;flex:none;}
.yc-wa-dot{position:absolute;top:8px;right:10px;width:9px;height:9px;border-radius:50%;background:#25d366;
  border:2px solid rgba(255,255,255,.9);animation:waLive 2.4s ease-in-out infinite;}
@keyframes waLive{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.6);}50%{box-shadow:0 0 0 7px rgba(37,211,102,0);}}
/* Dentro de la app el botón se queda, pero como botón redondo sobre la barra
   de pestañas: una píldora con texto flotando ahí sería cromo de web. */
body.yc-appmode .yc-wa{right:calc(50% - 195px + 13px);bottom:calc(50% - 422px + 70px);
  gap:0;padding:0;width:44px;height:44px;justify-content:center;border-radius:99px;}
body.yc-appmode .yc-wa span{display:none;}
@container (max-width:560px){.yc-wa span{display:none;} .yc-wa{padding:14px;}}

/* ══ HÉROE ══════════════════════════════════════════════════ */
.yc-hero{position:relative;overflow:hidden;padding:clamp(38px,7cqw,76px) 0 clamp(44px,7cqw,80px);}

.yc-hero-in{position:relative;z-index:1;display:grid;gap:clamp(34px,5cqw,60px);align-items:center;}
@container (min-width:980px){.yc-hero-in{grid-template-columns:1.12fr .88fr;}}

h1{font-size:clamp(34px,6.2cqw,58px);line-height:1.04;}
h1 em{font-style:normal;color:var(--accent-ink);}

/* Oficio que rota. La palabra se queda en tinta: el naranja ya lo lleva el <em>,
   dos acentos competirían. Lo que señala "esto cambia" es el subrayado. */
.yc-rot{display:inline-block;position:relative;vertical-align:bottom;
  /* Sin ancho fijo ni recorte: el ancho lo marca la palabra que entra.
     Con ancho animado la caja se desincronizaba y cortaba la palabra. */
  overflow:visible;}
.yc-rot-w{display:inline-block;white-space:nowrap;will-change:transform,opacity;}
.yc-rot::after{content:'';position:absolute;left:0;right:0;bottom:.1em;height:.055em;
  border-radius:99px;background:var(--orange);opacity:.5;}
/* La que sale se saca del flujo: si no, las dos palabras se ponen una al lado
   de la otra dentro de la caja recortada y se ve un hueco en mitad del giro. */
.yc-rot-w.yc-out{position:absolute;left:0;top:0;opacity:0;transform:translateY(-92%);pointer-events:none;
  animation:rotOut .34s cubic-bezier(.65,0,.2,1) forwards;}
.yc-rot-w.yc-in{animation:rotIn .42s cubic-bezier(.16,.9,.28,1) forwards;}
@keyframes rotOut{from{transform:translateY(0);opacity:1;}to{transform:translateY(-92%);opacity:0;}}
@keyframes rotIn{from{transform:translateY(92%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .yc-rot{transition:none;}
  .yc-rot-w.yc-out,.yc-rot-w.yc-in{animation:none;}
}
.yc-sub{margin-top:16px;font-size:clamp(15px,1.7cqw,18px);color:var(--slate);max-width:46ch;line-height:1.6;}

/* La barra: puerta de entrada, no un buscador más. Texto, foto o voz. */
.yc-ask{margin-top:26px;background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:8px 8px 8px 18px;display:flex;align-items:center;gap:10px;
  box-shadow:0 22px 50px -24px #000;transition:border-color .25s var(--ease);}
.yc-ask:focus-within{border-color:var(--orange);}
.yc-ask input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--white);
  font-family:'Inter',sans-serif;font-size:15.5px;padding:12px 0;}
.yc-ask input::placeholder{color:var(--slate-2);}
.yc-iconbtn{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);background:var(--ink-3);color:var(--slate);cursor:pointer;
  transition:.2s var(--ease);}
.yc-iconbtn:hover{color:var(--white);border-color:var(--line-2);background:#1d2537;}
.yc-iconbtn.yc-rec{background:var(--orange);border-color:var(--orange);color:#fff;}
.yc-iconbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;}

.yc-askrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.yc-pill{display:flex;align-items:center;gap:8px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:14px;padding:12px 15px;color:var(--slate);cursor:pointer;font-size:14px;font-weight:500;
  font-family:'Inter',sans-serif;white-space:nowrap;transition:.2s var(--ease);}
.yc-pill:hover{border-color:var(--line-2);color:var(--white);}
.yc-pill svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;}
.yc-pill b{color:var(--white);font-weight:600;}

.yc-gobtn{border:0;cursor:pointer;background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;padding:16px 30px;border-radius:var(--r);
  box-shadow:0 14px 32px -12px rgba(238,90,38,.8);display:inline-flex;align-items:center;gap:10px;
  transition:transform .16s var(--spring),box-shadow .25s;}
.yc-gobtn:hover{box-shadow:0 18px 40px -12px rgba(238,90,38,.95);}
.yc-gobtn:active{transform:scale(.975);}
.yc-gorow{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:16px;}
.yc-gorow .yc-aside{font-size:14px;color:var(--slate-2);}

/* El gancho al profesional, en la página del cliente. */
.yc-prohook{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14.5px;color:var(--slate);}
.yc-prohook b{color:var(--white);font-weight:600;}
.yc-prohook a{color:var(--accent-ink);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(238,90,38,.4);}
.yc-prohook a:hover{border-bottom-color:var(--orange);}

/* ══ FICHA DEL PROFESIONAL (papel, artefacto de marca) ══════ */
.yc-card-stack{display:flex;justify-content:center;}
.yc-procard{width:100%;max-width:380px;background:linear-gradient(176deg,var(--paper),var(--paper-2));
  color:var(--paper-ink);border-radius:6px;padding:0 0 74px;position:relative;transform:rotate(1.2deg);
  box-shadow:0 34px 70px -20px rgba(0,0,0,.8),0 2px 0 rgba(255,255,255,.16) inset;}
.yc-procard::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:9px;
  background:conic-gradient(from -45deg at 50% 0,#0000 0 90deg,var(--paper-2) 0);background-size:15px 9px;}
.yc-photo{aspect-ratio:4/3;border-radius:6px 6px 0 0;overflow:hidden;position:relative;
  background:linear-gradient(150deg,#2a3346,#161d2d);display:grid;place-items:center;}
.yc-photo img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:52% 40%;}
/* Un respiro lento: la foto vive, no se mueve. */
.yc-photo img{animation:kenburns 26s ease-in-out infinite alternate;}
@keyframes kenburns{to{transform:scale(1.08);}}
.yc-photo figcaption{position:absolute;top:9px;left:9px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.1em;color:#ffd9c9;background:rgba(184,60,10,.92);padding:4px 9px;border-radius:5px;
  text-transform:uppercase;font-weight:600;}
.yc-photo svg{width:62px;height:62px;stroke:rgba(255,255,255,.26);fill:none;stroke-width:1.2;}
/* La marca en la camiseta. La foto es de archivo y no se puede repintar, asi
   que el logotipo va como capa encima del pecho. En multiply coge los pliegues
   y la sombra de la tela, que es lo que lo separa de una pegatina.
   La capa lleva la MISMA animacion y el MISMO origen que la foto: sin eso el
   ken burns movia la tela y el logo se quedaba flotando por su cuenta. */
.yc-tee-layer{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  transform-origin:52% 40%;animation:kenburns 26s ease-in-out infinite alternate;}
.yc-tee{position:absolute;left:51%;top:88.5%;
  transform:translate(-50%,-50%) rotate(-1.8deg) skewY(1.6deg);
  font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;letter-spacing:-.02em;
  /* Naranja mas vivo del que se ve: el multiply contra la tela lo apaga. */
  color:#f4551d;white-space:nowrap;filter:blur(.2px);opacity:.95;}
.yc-tee b{color:#2b3345;font-weight:800;}
.yc-pc-body{padding:16px 18px 0;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.55;}
.yc-pc-name{font-family:'Manrope',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.02em;
  display:flex;align-items:center;gap:7px;color:var(--paper-ink);}
.yc-pc-name svg{width:17px;height:17px;flex:none;}
.yc-pc-trade{font-size:11px;letter-spacing:.1em;color:var(--paper-ink-2);margin-top:2px;}
.yc-pc-rule{border-top:1px dashed rgba(38,34,28,.32);margin:12px 0;}
.yc-pc-r{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums;}
.yc-pc-r+.yc-pc-r{margin-top:5px;}
.yc-pc-r .yc-k{color:var(--paper-ink-2);letter-spacing:.05em;}
.yc-pc-r .yc-v{font-weight:600;text-align:right;}
.yc-seal{position:absolute;right:14px;bottom:14px;font-family:'IBM Plex Mono',monospace;font-weight:600;
  font-size:12px;letter-spacing:.15em;color:var(--seal);border:2.5px solid var(--seal);border-radius:5px;
  padding:5px 9px;transform:rotate(9deg);opacity:.9;}

/* ══ SECCIONES ══════════════════════════════════════════════ */
section{padding:clamp(52px,8cqw,96px) 0;}
.yc-band{background:var(--ink-2);border-block:1px solid var(--line);}
.yc-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.19em;
  color:var(--accent-ink);text-transform:uppercase;}
.yc-eyebrow.yc-m{color:var(--mint-ink);}
h2{font-size:clamp(26px,3.6cqw,40px);line-height:1.12;margin-top:12px;}
.yc-lede{margin-top:14px;color:var(--slate);font-size:clamp(15px,1.6cqw,17px);max-width:56ch;line-height:1.62;}
.yc-grid{display:grid;gap:16px;margin-top:38px;}
@container (min-width:700px){.yc-grid.yc-g3{grid-template-columns:repeat(3,1fr);} .yc-grid.yc-g4{grid-template-columns:repeat(2,1fr);}}
@container (min-width:1000px){.yc-grid.yc-g4{grid-template-columns:repeat(4,1fr);}}
.yc-tile{background:var(--ink-2);border:1px solid var(--line);border-radius:20px;padding:24px;}
.yc-band .yc-tile{background:var(--ink-3);}
.yc-tile .yc-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;}
.yc-tile .yc-ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;}
.yc-ico.yc-o{background:rgba(238,90,38,.14);color:var(--accent-ink);}
.yc-ico.yc-m{background:rgba(20,200,173,.14);color:var(--mint-ink);}
.yc-tile h3{font-size:17px;line-height:1.25;}
.yc-tile p{margin-top:8px;color:var(--slate);font-size:14.5px;line-height:1.58;}

/* Pasos: aquí la numeración SÍ informa — es una secuencia real. */
.yc-steps{counter-reset:s;display:grid;gap:14px;margin-top:38px;}
@container (min-width:820px){.yc-steps{grid-template-columns:repeat(3,1fr);}}
.yc-step{position:relative;padding:26px 22px 22px;background:var(--ink-2);border:1px solid var(--line);border-radius:20px;}
.yc-band .yc-step{background:var(--ink-3);}
.yc-step::before{counter-increment:s;content:counter(s);position:absolute;top:-13px;left:22px;
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--orange);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;}
.yc-step h3{font-size:17px;}
.yc-step p{margin-top:8px;color:var(--slate);font-size:14.5px;line-height:1.58;}

/* ══ PRUEBA SOCIAL — estado real ════════════════════════════
   Con 3 reseñas sin texto no hay testimonios que enseñar. En vez
   de inventarlos, la sección dice la verdad y la convierte en
   invitación. El bloque de la derecha es el mismo componente ya
   preparado para cuando haya reseñas de verdad. */
.yc-proof{display:grid;gap:20px;margin-top:38px;}
@container (min-width:900px){.yc-proof{grid-template-columns:1fr 1fr;align-items:start;}}
.yc-empty{border:1px dashed var(--line-2);border-radius:20px;padding:28px;background:rgba(238,90,38,.05);}
.yc-empty h3{font-size:19px;}
.yc-empty p{margin-top:10px;color:var(--slate);font-size:14.5px;line-height:1.6;}
.yc-counters{display:flex;flex-wrap:wrap;gap:22px;margin-top:20px;}
.yc-ct b{display:block;font-family:'Manrope',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.yc-ct span{font-size:12.5px;color:var(--slate-2);}
.yc-rev{background:var(--ink-2);border:1px solid var(--line);border-radius:20px;padding:22px;}
.yc-band .yc-rev{background:var(--ink-3);}
.yc-rev + .yc-rev{margin-top:14px;}
.yc-stars{color:var(--accent-ink);font-size:14px;letter-spacing:2px;}
.yc-rev p{margin-top:10px;font-size:15px;line-height:1.6;}
.yc-rev .yc-who{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--slate-2);}
.yc-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(140deg,var(--orange),#b8420f);
  display:grid;place-items:center;font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;color:#fff;flex:none;}
/* Tarjeta-molde: gris, en cursiva y rotulada. Nunca puede leerse como real. */
.yc-rev.yc-ghost{border-style:dashed;background:transparent;}
.yc-rev.yc-ghost .yc-stars{color:var(--slate-2);}
.yc-rev.yc-ghost p{color:var(--slate-2);font-style:italic;}
.yc-rev.yc-ghost .yc-av{background:var(--ink-3);color:var(--slate-2);font-style:normal;}
.yc-ghost-tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-2);border:1px solid var(--line-2);border-radius:99px;
  padding:3px 9px;margin-bottom:12px;}
.yc-tag{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mint-ink);background:rgba(20,200,173,.1);
  border:1px solid rgba(20,200,173,.25);border-radius:99px;padding:4px 10px;}

/* ══ FAQ ════════════════════════════════════════════════════ */
.yc-faq{margin-top:34px;display:grid;gap:10px;max-width:840px;}
details{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.yc-band details{background:var(--ink-3);}
summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:'+';color:var(--accent-ink);font-size:22px;font-weight:400;flex:none;line-height:1;}
details[open] summary::after{content:'−';}
details p{padding:0 22px 20px;color:var(--slate);font-size:15px;line-height:1.65;max-width:70ch;}

/* ══ BANDA PROFESIONAL ══════════════════════════════════════ */
.yc-probanda{background:linear-gradient(135deg,rgba(238,90,38,.16),rgba(20,200,173,.09)),var(--ink-2);
  border:1px solid var(--line-2);border-radius:26px;padding:clamp(28px,4cqw,48px);
  display:grid;gap:26px;align-items:center;}
@container (min-width:860px){.yc-probanda{grid-template-columns:1.25fr .75fr;}}
.yc-probanda h2{font-size:clamp(24px,3.2cqw,34px);}
.yc-freebox{background:var(--ink);border:1px solid var(--line-2);border-radius:18px;padding:22px;text-align:center;}
.yc-freebox .yc-n{font-family:'Manrope',sans-serif;font-size:52px;font-weight:800;line-height:1;color:var(--mint);
  letter-spacing:-.04em;}
.yc-freebox .yc-l{margin-top:6px;font-size:13.5px;color:var(--slate);}
.yc-freebox .yc-cmp{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--slate-2);}

footer{border-top:1px solid var(--line);padding:44px 0 96px;color:var(--slate-2);font-size:14px;}
.yc-fgrid{display:grid;gap:26px;}
@container (min-width:760px){.yc-fgrid{grid-template-columns:1.4fr repeat(3,1fr);}}
.yc-fgrid h4{font-family:'Manrope',sans-serif;font-size:13px;font-weight:800;color:var(--white);
  letter-spacing:.04em;margin:0 0 12px;}
.yc-fcol{display:flex;flex-direction:column;align-items:flex-start;gap:9px;}
.yc-fcol a{color:var(--slate-2);text-decoration:none;}
.yc-fcol a:hover{color:var(--white);}
.yc-fbot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;}

.yc-preview-bar{display:none;position:fixed;z-index:80;bottom:18px;left:50%;transform:translateX(-50%);
  background:rgba(16,23,40,.94);backdrop-filter:blur(14px);border:1px solid var(--line-2);
  border-radius:99px;padding:5px;gap:3px;box-shadow:0 16px 40px -12px #000;}
@media (min-width:1000px){.yc-preview-bar{display:flex;}}
.yc-pv{border:0;background:none;cursor:pointer;border-radius:99px;padding:8px 16px;color:var(--slate);
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;transition:background .2s,color .2s;}
.yc-pv.yc-on{background:var(--orange);color:#fff;}
.yc-pv-sep{width:1px;align-self:stretch;margin:4px 4px;background:var(--line-2);}
#themeBtn.yc-on{background:#f2f5fa;color:#0b1020;}
.yc-note{position:fixed;bottom:14px;right:14px;z-index:60;pointer-events:none;max-width:calc(100cqw - 28px);
  background:rgba(14,20,32,.94);backdrop-filter:blur(12px);border:1px solid var(--line-2);
  border-radius:99px;padding:6px 13px;font-size:11px;color:var(--slate-2);opacity:.75;box-shadow:0 14px 36px -12px #000;}
.yc-note b{color:var(--orange);}


/* ══ MOVIMIENTO ═════════════════════════════════════════════
   Una entrada encadenada en el héroe (texto → barra → ficha →
   sello) y revelados al hacer scroll. Nada de efectos sueltos. */
[data-rise]{opacity:0;transform:translateY(20px);}
[data-rise].yc-in{opacity:1;transform:none;
  transition:opacity .55s var(--ease) calc(var(--i,0)*75ms),
             transform .8s var(--spring) calc(var(--i,0)*75ms);}
.yc-cat{opacity:0;transform:translateX(-14px);}
.yc-loaded .yc-cat{opacity:1;transform:none;
  transition:opacity .4s var(--ease) calc(var(--i,0)*45ms), transform .5s var(--spring) calc(var(--i,0)*45ms);}
.yc-procard{opacity:0;transform:rotate(-6deg) translateY(-38px) scale(.95);}
.yc-loaded .yc-procard{opacity:1;transform:rotate(1.2deg) translateY(0) scale(1);
  transition:opacity .5s var(--ease) .5s, transform 1s var(--spring) .5s;}
.yc-seal{opacity:0;transform:rotate(26deg) scale(1.9);}
.yc-loaded .yc-seal{opacity:.9;transform:rotate(9deg) scale(1);transition:all .55s var(--spring) 1.25s;}
/* La ficha se inclina hacia el cursor: el momento con el que se recuerda. */
.yc-card-stack{perspective:1100px;}
.yc-procard{will-change:transform;}
.yc-tilting .yc-procard{transition:transform .18s ease-out;}
/* Barra: destello mientras "mira" la foto, y anillo al grabar. */
.yc-ask.yc-thinking{position:relative;overflow:hidden;}
.yc-ask.yc-thinking::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(238,90,38,.16) 50%,transparent 80%);
  animation:sweep 1.1s var(--ease) infinite;}
@keyframes sweep{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
.yc-iconbtn.yc-rec{position:relative;}
.yc-iconbtn.yc-rec::before{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--orange);animation:pulse 1.3s ease-out infinite;}
@keyframes pulse{from{opacity:.85;transform:scale(.85);}to{opacity:0;transform:scale(1.35);}}
.yc-gobtn{position:relative;overflow:hidden;}
.yc-gobtn::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);animation:shine 4.5s ease-in-out 2.4s infinite;}
@keyframes shine{0%,72%{left:-60%;}88%,100%{left:130%;}}
.yc-freebox .yc-n{display:inline-block;}
.yc-freebox.yc-in .yc-n{animation:pop .6s var(--spring);}
@keyframes pop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}

@media (prefers-reduced-motion:reduce){
  [data-rise],.yc-cat,.yc-procard,.yc-seal{opacity:1!important;transform:none!important;}
  .yc-procard{transform:rotate(1.2deg)!important;}
  .yc-seal{opacity:.9!important;transform:rotate(9deg)!important;}
  .yc-photo img,.yc-tee-layer,.yc-gobtn::after,.yc-ask.yc-thinking::after,.yc-iconbtn.yc-rec::before{animation:none!important;}
  .yc-aurora i,.yc-fl-wire i,.yc-fl-node.yc-hub,.yc-fl-pros b,.yc-sc-row b,.yc-sc-beam,.yc-es-track::after,.yc-es-coin,.yc-es-step.yc-hold span{animation:none!important;}
  .yc-sc-row b{background:var(--mint);border-color:var(--mint);color:#04231e;}
  .yc-es-track::after{transform:scaleX(1);} .yc-es-coin{left:100%;opacity:1;} .yc-sc-beam{display:none;}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}}



/* "Crear cuenta" es la acción que faltaba en la landing: se marca en naranja
   para que no se pierda entre los enlaces de navegación. */
#desktop-landing .yc-hnav .yc-hnav-reg{color:var(--orange);font-weight:700;}
#desktop-landing .yc-hnav .yc-hnav-reg:hover{color:var(--orange);opacity:.85;}


/* ── Navegador móvil: landing, no app ──────────────────────────────
   Escribir ilaburo.ar en el móvil debe enseñar la misma landing que en
   escritorio, ajustada al ancho. La app a pantalla completa se reserva para
   la PWA instalada (html.standalone) o para cuando el visitante entra
   a propósito, que es lo que marca body.app-abierta. */
@media(max-width:899px){
  html:not(.pwa) body:not(.app-abierta) #app{display:none !important;}
  html:not(.pwa) body:not(.app-abierta) #desktop-landing{display:flex !important;}
}

/* Accesos en el móvil ─────────────────────────────────────────────
   La barra de la landing se ocultaba entera por debajo de 900px y el
   visitante se quedaba sin login ni registro. Se dejan sólo esos dos y se
   esconde "Instalar la app", que ahí ocupa sitio y corre menos prisa. */
@container (max-width:899.98px){
  #desktop-landing .yc-hnav{display:flex;margin-left:auto;gap:14px;}
  #desktop-landing .yc-hnav a{display:none;font-size:13.5px;}
  #desktop-landing .yc-hnav .yc-hnav-login,
  #desktop-landing .yc-hnav .yc-hnav-reg{display:inline-block;white-space:nowrap;}
  #desktop-landing .yc-hcta{display:none;}
}

/* ══ AJUSTE MÓVIL DE LA LANDING ═══════════════════════════════════
   Medido a 390px antes de tocar nada: 11.429px de alto (13,5 pantallas),
   el retrato del héroe 523px y cada foto de servicio 218px. Se recorta sin
   quitar contenido. */
@container (max-width:899.98px){

  /* El retrato es una foto de archivo y ocupaba media pantalla. En el móvil
     el héroe debe ser el titular y la caja de escribir, que es la acción. */
  #desktop-landing .yc-procard{display:none;}
  #desktop-landing .yc-hero-right{display:none;}

  /* Titular más contenido y con menos aire alrededor. */
  #desktop-landing h1{font-size:clamp(28px,8.2cqw,34px);line-height:1.08;}
  #desktop-landing h2{font-size:clamp(22px,6cqw,26px);}
  #desktop-landing .yc-sub{font-size:14.5px;line-height:1.55;}
  #desktop-landing .yc-lede{font-size:14.5px;line-height:1.55;}

  /* Las tarjetas de servicio pasan de 4/5 a cuadradas: doce fotos en vertical
     eran 1.300px de scroll sólo en esa rejilla. */
  #desktop-landing .yc-svc{aspect-ratio:1/1;border-radius:14px;}
  #desktop-landing .yc-svc-name{font-size:12.5px;left:10px;right:8px;bottom:9px;}
  #desktop-landing .yc-svc-ico{width:26px;height:26px;top:8px;right:8px;}
  #desktop-landing .yc-svc-ico svg{width:13px;height:13px;}
  /* Y de dos columnas a tres. Con dos, las doce fotos eran ~1.070px de
     scroll (medido a 390px); con tres bajan a ~490px y la rejilla se ve
     casi de un vistazo, que es de lo que va esta seccion. */
  #desktop-landing .yc-svc-grid{gap:9px;grid-template-columns:repeat(3,1fr);}

  /* Menos aire vertical en todas las secciones. */
  #desktop-landing section{padding-top:44px;padding-bottom:44px;}
  #desktop-landing .yc-band{padding-top:40px;padding-bottom:40px;}

  /* El radar del Modo Urgente era casi cuadrado a pantalla completa. */
  #desktop-landing .yc-radar{max-width:280px;margin-inline:auto;}

  /* Pasos y tarjetas: menos alto, mismo contenido. */
  #desktop-landing .yc-step,
  #desktop-landing .yc-tile{padding:16px 15px;}
  #desktop-landing .yc-flow{display:none;}   /* diagrama ancho, ilegible aquí */
}

/* Muy estrecho: una sola columna de servicios se hacía eterna, así que se
   mantienen dos y se aprieta la tipografía. */
@container (max-width:339.98px){
  #desktop-landing .yc-svc-grid{grid-template-columns:repeat(2,1fr);}
}
@container (max-width:400px){
  #desktop-landing .yc-svc-name{font-size:11.5px;}
  #desktop-landing .yc-cats-in{gap:14px;}
}

/* ── Salida a la landing ───────────────────────────────────────────
   Píldora flotante, no parte del layout: aparece sólo cuando el visitante
   entró desde la landing (body.app-abierta) y no está en la PWA instalada.
   Se esconde en cuanto hay sesión: ahí ya manda la navegación de la app. */
#volver-yc{display:none;position:fixed;z-index:990;left:14px;top:14px;
  align-items:center;gap:8px;padding:8px 14px 8px 12px;border-radius:99px;
  background:rgba(10,15,30,.82);backdrop-filter:blur(10px);
  border:1px solid var(--borderp);color:var(--text);cursor:pointer;
  font-family:'Manrope','Space Grotesk',sans-serif;font-weight:750;font-size:13px;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.7);
  transition:transform .2s var(--ease-spring),border-color .2s;}
html:not(.pwa) body.app-abierta #volver-yc{display:inline-flex;}
html:not(.pwa) body.app-abierta.con-sesion #volver-yc{display:none;}
#volver-yc:hover{border-color:var(--primary);transform:translateY(-1px);}
#volver-yc:active{transform:scale(.97);}
#volver-yc svg{width:14px;height:14px;}
#volver-yc i{font-style:normal;color:var(--accent-ink);}
/* En escritorio el panel lateral ocupa la izquierda: se corre al centro. */
@media(min-width:900px){#volver-yc{left:auto;right:18px;top:16px;}}

/* ══ VIDA EN LA APP ═══════════════════════════════════════════════
   La app tenía la paleta y la tipografía de la landing pero ninguna de su
   respiración: entraba de golpe y todo estaba quieto. Esto añade atmósfera,
   entrada de pantalla y revelado al hacer scroll. Sólo presentación. */

/* Halo ambiental detrás de la cabecera, como la aurora de la landing. */
#app::before{content:"";position:absolute;inset:0 0 auto 0;height:340px;
  pointer-events:none;z-index:-1;opacity:.75;
  background:radial-gradient(620px 320px at 18% -8%, rgba(238,90,38,.16), transparent 62%),
             radial-gradient(520px 300px at 88% -4%, rgba(20,200,173,.10), transparent 60%);}
html.light #app::before{opacity:.5;}
/* (el halo va con z-index:-1; no hace falta subir a los hijos) */

/* Entrada de pantalla: sube y aparece, en vez de aparecer de golpe. */
@keyframes ycEntra{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.screen.active{animation:ycEntra .34s cubic-bezier(.22,.9,.28,1) both;}

/* Revelado al entrar en pantalla, igual que en la landing. */
[data-yc-rise]{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.22,.9,.28,1), transform .5s cubic-bezier(.22,.9,.28,1);}
[data-yc-rise].yc-visto{opacity:1;transform:none;}

/* El saludo estrena la firma de la marca. */
#home .greet-q, .greet-q{background:linear-gradient(96deg,var(--text) 0%,var(--text) 42%,var(--primary) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
html.light .greet-q{background:linear-gradient(96deg,var(--text) 0%,var(--text) 46%,var(--accent-ink) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* Respuesta al tacto donde antes no había ninguna. */
.cat-card,.quick-task-card,.job-card,.worker-card,.wcard2,.qcat-chip{
  transition:transform .2s var(--ease-spring),border-color .2s,box-shadow .2s;}
.cat-card:active,.quick-task-card:active,.job-card:active,
.worker-card:active,.wcard2:active,.qcat-chip:active{transform:scale(.975);}

@media (prefers-reduced-motion:reduce){
  .screen.active{animation:none;}
  [data-yc-rise]{opacity:1;transform:none;transition:none;}
  .cat-card:active,.quick-task-card:active,.job-card:active,
  .worker-card:active,.wcard2:active,.qcat-chip:active{transform:none;}
}

/* ══ LEGIBILIDAD Y TOQUE EN MÓVIL ═════════════════════════════════
   Medido a 390px: nueve textos a 10-11px y ocho zonas pulsables de menos de
   34px de alto. En un móvil eso es texto que no se lee y botones que se
   fallan. Se sube el cuerpo mínimo y se agranda el área de toque con
   relleno, sin tocar el tamaño visual. */
@container (max-width:899.98px){

  /* Ningún rótulo por debajo de 11,5px. */
  #desktop-landing .yc-eyebrow{font-size:11.5px;letter-spacing:.1em;}
  #desktop-landing .yc-fl-cap,
  #desktop-landing .yc-tag,
  #desktop-landing .yc-ghost-tag,
  #desktop-landing .yc-es-coin,
  #desktop-landing small{font-size:11.5px;}

  /* Conmutador Cliente/Profesional: 30px de alto era poco para el pulgar. */
  #desktop-landing .yc-seg button{min-height:40px;padding-block:9px;}

  /* Accesos de la cabecera: se agranda el área, no la letra. */
  #desktop-landing .yc-hnav .yc-hnav-login,
  #desktop-landing .yc-hnav .yc-hnav-reg{padding-block:11px;min-height:42px;
    display:inline-flex;align-items:center;}

  /* Enlaces del pie: 20px de alto es un blanco imposible. */
  #desktop-landing .yc-foot-link,
  #desktop-landing footer a{padding-block:8px;min-height:38px;
    display:inline-flex;align-items:center;}

  /* Chips de categoría de la tira superior. */
  #desktop-landing .yc-cat{min-height:42px;}

  /* Enlace de alta del héroe: 100x23 era un blanco pequeño. */
  #desktop-landing .yc-prohook a{padding-block:9px;min-height:40px;
    display:inline-flex;align-items:center;}

  /* Botón flotante de WhatsApp. */
  #desktop-landing .yc-wa{min-height:44px;}
}

/* ══ HOME AL ESTILO DE LA MAQUETA ═════════════════════════════════
   Sólo presentación. La estructura ya era la de la maqueta; lo que faltaba
   era el acabado. Todo con fichas: vale igual en claro y en oscuro. */

/* El saludo pasa a ser el titular de la pantalla, como en la maqueta:
   la línea con el nombre manda y la pregunta queda en segundo plano. */
.home-greet{font-family:'Manrope','Space Grotesk',sans-serif;font-size:22px;
  font-weight:800;letter-spacing:-.03em;color:var(--text);margin-bottom:1px;line-height:1.14;}
.home-name{font-family:'Manrope','Space Grotesk',sans-serif;font-size:22px;
  font-weight:800;letter-spacing:-.03em;color:var(--text2);line-height:1.14;}

/* Barra de ubicación: cápsula, como el chip de zona del buscador. */
.loc-bar{border-radius:12px;padding:12px 12px;gap:8px;
  background:var(--bg2);border-color:var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.04);}
.loc-bar-text{font-size:14px;font-weight:600;}

/* Rótulos de sección: en la maqueta son títulos en caja normal, no
   versalitas espaciadas; se leen mucho mejor y ordenan la pantalla. */
.sec-hdr{padding:20px 16px 12px;align-items:baseline;}
.sec-title{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;
  font-weight:800;letter-spacing:-.02em;text-transform:none;color:var(--text);}
.sec-link{font-size:13px;font-weight:650;}

/* Tarjetas de categoría: más redondas y con velo bajo el nombre, para que
   se lea sobre cualquier foto. */
.cat-card{border-radius:16px;overflow:hidden;}
.cat-card::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;
  background:linear-gradient(180deg,transparent,rgba(6,10,20,.62));pointer-events:none;z-index:1;}
.cat-card-body{position:relative;z-index:2;}
.cat-name{font-family:'Manrope','Space Grotesk',sans-serif;font-weight:750;
  letter-spacing:-.01em;}

/* Más aire entre bloques, que era lo que hacía que la app se viera apretada. */
#home-scroll > *{scroll-margin-top:12px;}
.cat-grid{gap:10px;}

/* Tarjeta de trabajo en curso: es lo primero que importa al abrir. */
#home-active-job:not(:empty){margin:2px 16px 6px;}

/* Barra de IA: mismo redondeo que el resto. */
.ai-bar{border-radius:16px;}

/* Barra inferior: separación y peso como en la maqueta. */
.bnav{padding-top:8px;}
.ni span{font-size:11px;font-weight:650;letter-spacing:.005em;}

/* Banner de urgente: fondo oscuro SIEMPRE (es su identidad), así que su
   texto tiene que ser claro SIEMPRE. Con var(--text) en modo claro salía
   texto oscuro sobre fondo oscuro: ilegible. */
.urgente-banner .u-title{color:#f4f6ff;}
.urgente-banner .u-title em{color:#ff8f5e;}
.urgente-banner .u-sub{color:rgba(244,246,255,.74);}
.urgente-banner .u-count-lbl{color:rgba(244,246,255,.62);}
.urgente-banner .u-pill{color:#ff9366;background:rgba(238,90,38,.2);border-color:rgba(238,90,38,.45);}
.urgente-banner .u-btn{background:linear-gradient(135deg,#f17a50,#cb4110);color:#fff;}

/* Buscador dual (SERVICIO | ZONA), como en la maqueta: las dos barras que ya
   existían se presentan como una sola cápsula. Cada una conserva su acción. */
.dual-wrap{display:flex;align-items:stretch;gap:0;background:var(--bg2);
  border:1px solid var(--line,var(--border));border-radius:16px;overflow:hidden;
  box-shadow:0 6px 20px -14px rgba(0,0,0,.5);margin:6px 0 10px;}
.dual-wrap .ai-bar{flex:1.35;min-width:0;border:0;border-radius:0;background:transparent;
  box-shadow:none;margin:0;padding:12px 12px;}
.dual-wrap .ai-bar:hover{box-shadow:none;}
.dual-wrap .loc-bar{flex:1;min-width:0;border:0;border-left:1px solid var(--border);
  border-radius:0;background:transparent;box-shadow:none;margin:0;padding:12px 12px;}
.dual-wrap .loc-bar-text{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dual-wrap .ai-placeholder{font-size:13px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0;}
/* El texto de ejemplo de la IA rota y algunos son largos: sin nowrap partía
   la cápsula en dos líneas. */
.dual-wrap .ai-placeholder span{display:inline-block;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;}
.dual-wrap .ai-badge{flex:none;font-size:11px;padding:3px 8px;}
.dual-wrap .ai-bar > svg{flex:none;}
.dual-wrap .loc-bar > svg:last-child{flex:none;}
@media(max-width:359px){.dual-wrap{flex-direction:column;}
  .dual-wrap .loc-bar{border-left:0;border-top:1px solid var(--border);}}

/* ══ PASADA DE DISEÑO GLOBAL ══════════════════════════════════════
   Sólo presentación, sobre componentes compartidos: alcanza a las 19
   pantallas sin tocar marcado. Todo con fichas: vale en claro y oscuro. */

/* ── Cabeceras de pantalla ─────────────────────────────────────── */
.topbar{padding:calc(var(--st) + 16px) 18px 14px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(12px);}
.topbar-title{font-size:18px;font-weight:800;letter-spacing:-.028em;}
.btn-back{border-radius:12px;transition:transform .18s var(--ease-spring),background .18s;}
.btn-back:active{transform:scale(.92);}

/* ── Tarjetas ──────────────────────────────────────────────────── */
.card{border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 26px -18px rgba(0,0,0,.5);}
.job-card,.worker-card,.wcard,.wcard2,.qt-card{border-radius:16px;}

/* ── Botones ───────────────────────────────────────────────────── */
.btn{border-radius:12px;letter-spacing:-.01em;
  box-shadow:0 6px 18px -10px color-mix(in srgb, var(--primary) 70%, transparent);
  transition:transform .18s var(--ease-spring),box-shadow .2s,filter .2s;}
.btn:active{transform:scale(.982);}
.btn:hover{filter:brightness(1.04);}
.btn-outline,.btn-ghost{border-radius:12px;transition:transform .18s var(--ease-spring),border-color .2s;}
.btn-outline:active,.btn-ghost:active{transform:scale(.982);}

/* ── Formularios: la etiqueta deja de gritar ───────────────────── */
.label{font-size:12px;font-weight:650;text-transform:none;letter-spacing:0;
  color:var(--text2);margin-bottom:8px;}
.inp{border-radius:12px;font-size:15px;padding:12px 14px;
  transition:border-color .18s, box-shadow .18s;}
.inp:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);}

/* ── Pestañas y chips ──────────────────────────────────────────── */
.pro-tab{font-size:14px;font-weight:650;letter-spacing:-.01em;
  transition:color .18s, border-color .18s;}
.qcat-chip{transition:transform .18s var(--ease-spring),border-color .18s;}
.qcat-chip:active{transform:scale(.96);}

/* ── Barra inferior: la pestaña activa se nota ─────────────────── */
.ni{transition:color .2s, transform .18s var(--ease-spring);}
.ni:active{transform:scale(.94);}
.ni.on svg{transform:translateY(-1px);}

/* ── Listas vacías: que inviten, no que informen del vacío ─────── */
.ld{opacity:.85;}

/* ── Modales al mismo redondeo ─────────────────────────────────── */
.modal-card,.modal-box,.sheet{border-radius:20px;}

/* La maqueta deja la app QUIETA a propósito: es una herramienta de uso
   diario, no una página de venta. Aquí sólo hay respuesta al tacto y
   transiciones cortas; nada que se mueva solo. */
@media (prefers-reduced-motion:reduce){
  .btn,.btn-outline,.btn-ghost,.btn-back,.qcat-chip,.ni{transition:none;}
  .btn:active,.btn-outline:active,.btn-ghost:active,
  .btn-back:active,.qcat-chip:active,.ni:active{transform:none;}
}

/* Encoger de verdad en pantallas estrechas ----------------------------
   A 320px el contenedor del heroe media 336px dentro de un envoltorio que
   solo daba 280: un item de grid no baja de su min-content salvo que se le
   ponga min-width:0. Resultado, el titular salia cortado por la derecha.
   Se acota al movil a proposito: en escritorio no hay nada que estrangular
   y ahi la landing esta dada por buena. */
@container (max-width:899.98px){
  #desktop-landing .yc-hero-in > *,
  #desktop-landing .yc-wrap > *,
  #desktop-landing .yc-urg-grid > *,
  #desktop-landing .yc-steps > *,
  #desktop-landing .yc-tiles > *{min-width:0;}
  #desktop-landing .yc-ask{min-width:0;}
  #desktop-landing .yc-ask input{min-width:0;}
  /* Y que ninguna palabra larga fuerce el ancho. */
  #desktop-landing h1,#desktop-landing h2,#desktop-landing .yc-sub,
  #desktop-landing .yc-lede{overflow-wrap:break-word;}
}

/* Los tres pasos del dinero retenido ----------------------------------
   Son tres chips con white-space:nowrap unidos por dos lineas; sumados no
   caben en ningun movil (medido: 388px de ancho contra 277 disponibles a
   320px). Envolverlos y esconder las lineas los hacia caber, pero se llevaba
   por delante la moneda que viaja, que es justo lo que explica el escrow.
   En vertical entra entero y el recorrido se lee mejor que en fila. */
@container (max-width:640px){
  #desktop-landing .yc-escrow{flex-direction:column;align-items:center;gap:0;}
  #desktop-landing .yc-es-step{font-size:12px;padding:10px 16px;}
  /* La linea deja de ser ancha y pasa a ser alta. */
  #desktop-landing .yc-es-track{flex:none;width:2px;height:64px;min-width:0;}
  #desktop-landing .yc-es-track::after{transform-origin:top;transform:scaleY(0);
    animation-name:fillV;}
  /* La moneda baja POR la linea. Empieza justo debajo del chip de arriba y
     descansa justo encima del de abajo: 64 de linea menos 25 de moneda
     dejan 4px de aire a cada lado, asi nunca pisa un chip. */
  #desktop-landing .yc-es-coin{top:4px;left:50%;z-index:1;animation-name:coinV;}
}
@keyframes fillV{0%,6%{transform:scaleY(0);}36%,94%{transform:scaleY(1);}100%{transform:scaleY(0);}}
@keyframes coinV{0%,6%{top:4px;opacity:0;}12%{opacity:1;}36%,92%{top:35px;opacity:1;}100%{top:35px;opacity:0;}}
/* Sin movimiento: el recorrido se ensena ya terminado, tambien en vertical. */
@media (prefers-reduced-motion:reduce){
  @container (max-width:640px){
    #desktop-landing .yc-es-track::after{transform:scaleY(1);}
    #desktop-landing .yc-es-coin{top:35px;left:50%;opacity:1;}
  }
}

/* WhatsApp: circular en el movil --------------------------------------
   La pildora con texto mide ~135px y en pantalla estrecha se plantaba encima
   de los botones de camara y microfono de la caja de escribir. Icono solo:
   ocupa 48px y ya no tapa nada pulsable.
   Media query y no container query: .yc-wa vive FUERA de #yc-page, que es el
   elemento consultado, asi que la container query no le llegaba. */
@media (max-width:640px){
  #desktop-landing .yc-wa{gap:0;padding:0;width:48px;height:48px;
    justify-content:center;border-radius:99px;right:14px;bottom:16px;}
  #desktop-landing .yc-wa span{display:none;}
}
/* ── El scroll de la landing ───────────────────────────────────────
   La app es un shell de altura fija (html y body clavados a 100vh), así que
   una landing de 10.000px metida dentro NO scrollea: el visitante se queda
   en el héroe para siempre. La landing tiene que ser su propio contenedor
   con scroll, como lo era la anterior. */
#desktop-landing{height:100dvh;max-height:100dvh;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;}

/* =========================================================================
   EL PARTE DE TRABAJO - primitivas (pt-*)                       2026-08-21
   -------------------------------------------------------------------------
   Tesis: yoCurro no vende "encontrar a alguien", vende que el trabajo quede
   DOCUMENTADO. Asi que la app deja de componerse de tarjetas y pasa a
   componerse de partes de trabajo. Dos materiales con oficios distintos:

     TINTA (el fondo calido)  = navegar, listar, conversar.
     PAPEL (.pt-papel)        = el documento. Donde hay dinero, hay papel.

   TODAS las clases van con prefijo pt- porque el archivo ya tiene ~1.400
   selectores y en v197 chocaron 53 nombres de golpe (CLAUDE.md #27). Los
   modificadores tambien (.pt-ok y no .ok): un .ok suelto lo pisa cualquiera.
   ========================================================================= */

/* -- Rotulos de campo: la gramatica del parte --------------------------- */
.pt-campo{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text3);line-height:1.35;}
.pt-na{color:var(--accent-ink);}
.pt-num{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* -- El sello de caucho --------------------------------------------------
   Un estado no es una pastilla de color: es la marca de que algo HA SIDO
   PROCESADO, que es justo la ansiedad que hay que responder. Uno por
   pantalla, nunca dos. */
.pt-sello{display:inline-block;font-family:var(--mono);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;padding:4px 8px;border:2px solid currentColor;
  border-radius:3px;transform:rotate(-3.5deg);position:relative;white-space:nowrap;
  color:var(--text2);flex:none;}
.pt-sello::after{content:'';position:absolute;inset:2px;border:1px solid currentColor;
  border-radius:2px;opacity:.45;}
.pt-sello.pt-ok{color:var(--success);}
.pt-sello.pt-esp{color:var(--warning);}
.pt-sello.pt-no{color:var(--danger);}
.pt-sello.pt-fin{color:var(--text3);}

/* -- Papel ---------------------------------------------------------------
   No cambia con el tema: un albaran es del mismo color de dia y de noche. */
.pt-papel{background:linear-gradient(174deg,var(--papel),var(--papel2));color:var(--tinta);
  border-radius:3px;padding:16px 16px 16px;font-family:var(--mono);font-size:12px;
  line-height:1.5;position:relative;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);}
/* El borde dentado: es lo que lo convierte en un recibo y no en una tarjeta clara. */
.pt-papel::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:8px;
  background-image:linear-gradient(135deg,var(--papel2) 25%,transparent 25%),
    linear-gradient(225deg,var(--papel2) 25%,transparent 25%);
  background-size:12px 8px;background-repeat:repeat-x;}
.pt-papel .pt-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  border-bottom:2px solid rgba(36,31,24,.75);padding-bottom:8px;margin-bottom:10px;}
.pt-papel .pt-cab b{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;
  font-weight:800;letter-spacing:-.015em;display:block;line-height:1.25;color:var(--tinta);}
.pt-papel .pt-cab .pt-num{font-size:11px;letter-spacing:.1em;color:var(--tinta2);
  text-transform:uppercase;line-height:1.4;}
.pt-fila{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums;}
.pt-fila+.pt-fila{margin-top:4px;}
.pt-fila .pt-k{color:var(--tinta2);min-width:0;}
.pt-fila.pt-tot{border-top:1px dashed rgba(36,31,24,.4);margin-top:10px;padding-top:8px;
  font-family:'Manrope','Space Grotesk',sans-serif;font-weight:800;font-size:16px;color:var(--tinta);}
.pt-papel .pt-pie{margin-top:12px;padding-top:8px;border-top:1px dashed rgba(36,31,24,.4);
  font-size:11px;letter-spacing:.1em;color:var(--tinta2);text-transform:uppercase;line-height:1.5;}
/* Acciones dentro del papel (aceptar / rechazar un presupuesto). */
.pt-pbtn{flex:1;text-align:center;font-family:'Manrope','Space Grotesk',sans-serif;
  font-size:13px;font-weight:800;padding:12px 10px;border-radius:3px;background:var(--sello-ok);
  color:#fff;border:0;cursor:pointer;min-height:42px;white-space:nowrap;}
.pt-pbtn.pt-sec{flex:none;font-weight:700;padding:12px 14px;background:transparent;
  border:1px solid rgba(36,31,24,.3);color:var(--tinta2);}

/* -- Encabezado de pantalla --------------------------------------------- */
.pt-cabpant{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--border2);padding-bottom:12px;margin-bottom:12px;}
.pt-cabpant .pt-t{margin:4px 0 0;font-family:'Manrope','Space Grotesk',sans-serif;
  font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--text);}
.pt-cabpant .pt-t span{color:var(--text2);font-weight:800;}

/* -- Filtros: pestanas de archivador, no pastillas ---------------------- */
.pt-filtro{display:flex;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text3);padding:4px 0 12px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.pt-filtro::-webkit-scrollbar{display:none;}
.pt-filtro > *{white-space:nowrap;position:relative;background:none;border:0;padding:8px 0;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;flex:none;}
.pt-filtro > *.pt-on{color:var(--text);font-weight:700;}
.pt-filtro > *.pt-on::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--primary);}

/* -- Hoja de precios: filas densas, no tarjetas gordas ------------------ */
.pt-entrada{display:flex;align-items:center;gap:12px;padding:12px 0;width:100%;
  border:0;border-bottom:1px solid var(--border);background:none;text-align:left;
  color:inherit;font:inherit;cursor:pointer;min-height:56px;}
.pt-entrada:last-child{border-bottom:0;}
.pt-entrada:active{background:var(--bg2);}
.pt-mini{width:40px;height:40px;flex:none;border-radius:4px;background:var(--bg4);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--text2);overflow:hidden;position:relative;}
.pt-mini img{width:100%;height:100%;object-fit:cover;display:block;}
.pt-quien{min-width:0;flex:1;}
.pt-quien b{display:block;font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;
  font-weight:700;letter-spacing:-.015em;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.pt-meta{font-family:var(--mono);font-size:11px;color:var(--text3);letter-spacing:.03em;
  margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.pt-meta .pt-v{color:var(--mint);white-space:nowrap;}
.pt-tarifa{text-align:right;flex:none;font-variant-numeric:tabular-nums;}
.pt-tarifa b{display:block;font-family:var(--mono);font-size:17px;font-weight:700;
  color:var(--accent-ink);letter-spacing:-.02em;line-height:1.1;}
.pt-tarifa span{font-family:var(--mono);font-size:11px;color:var(--text3);
  letter-spacing:.12em;text-transform:uppercase;}

/* -- El registro: un log con horas, no un stepper ------------------------
   Un stepper dice en que paso vas; un registro dice QUE PASO Y CUANDO. Para
   el disgusto de un trabajo mal hecho, lo segundo vale y lo primero no. */
.pt-log{font-family:var(--mono);font-size:12px;}
.pt-log .pt-l{display:flex;gap:12px;padding:8px 0;border-bottom:1px dotted var(--border2);}
.pt-log .pt-l:last-child{border-bottom:0;}
.pt-log .pt-h{color:var(--text3);flex:none;width:46px;font-variant-numeric:tabular-nums;}
.pt-log .pt-q{color:var(--text2);min-width:0;}
.pt-log .pt-l.pt-act .pt-q{color:var(--text);font-weight:600;}
.pt-log .pt-l.pt-act .pt-h{color:var(--accent-ink);}
.pt-log .pt-l.pt-fut{opacity:.45;}

/* -- Chat: el hilo es tinta, el presupuesto es papel -------------------- */
.pt-burb{max-width:80%;padding:8px 12px;font-size:14px;line-height:1.45;margin-bottom:8px;
  border-radius:3px;overflow-wrap:anywhere;}
.pt-burb.pt-el{background:var(--bg3);border-left:2px solid var(--border2);}
.pt-burb.pt-yo{background:var(--bg4);border-right:2px solid var(--primary);margin-left:auto;}
.pt-hora{font-family:var(--mono);font-size:11px;color:var(--text3);letter-spacing:.06em;
  margin:-4px 0 10px;}
.pt-hora.pt-d{text-align:right;}

/* -- Panel del pro: la cifra manda -------------------------------------- */
.pt-cifra{font-family:var(--mono);font-size:46px;font-weight:700;letter-spacing:-.045em;
  line-height:1;font-variant-numeric:tabular-nums;margin:6px 0 0;color:var(--text);}
.pt-cifra small{font-size:22px;color:var(--text2);}
.pt-tres{display:flex;gap:0;margin:16px 0 4px;border-top:1px solid var(--border2);
  border-bottom:1px solid var(--border2);}
.pt-tres > div{flex:1;padding:10px 0;min-width:0;}
.pt-tres > div + div{border-left:1px solid var(--border);padding-left:12px;}
.pt-tres .pt-campo{display:block;margin-bottom:3px;}
.pt-tres b{font-family:var(--mono);font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--text);}

/* Un led encendido es el lenguaje del oficio; un deslizante es el de una app. */
.pt-interruptor{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--border);min-height:52px;}
.pt-led{width:9px;height:9px;border-radius:50%;background:var(--success);flex:none;
  box-shadow:0 0 0 4px rgba(16,185,129,.16);}
.pt-led.pt-off{background:var(--text3);box-shadow:0 0 0 4px rgba(148,133,120,.14);}

/* -- Hoja de ruta: hora, trabajo, barrio, importe ----------------------- */
.pt-ruta .pt-l{display:flex;align-items:baseline;gap:12px;padding:12px 0;
  border-bottom:1px dotted var(--border2);font-variant-numeric:tabular-nums;width:100%;
  border-left:0;border-right:0;border-top:0;background:none;text-align:left;color:inherit;
  font-family:inherit;cursor:pointer;}
.pt-ruta .pt-l:last-child{border-bottom:0;}
.pt-ruta .pt-h{font-family:var(--mono);font-size:12px;color:var(--text3);flex:none;width:44px;}
.pt-ruta .pt-q{flex:1;min-width:0;}
.pt-ruta .pt-q b{display:block;font-family:'Manrope','Space Grotesk',sans-serif;font-size:14px;
  font-weight:700;letter-spacing:-.01em;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.pt-ruta .pt-q span{font-family:var(--mono);font-size:11px;color:var(--text3);}
.pt-imp{font-family:var(--mono);font-size:14px;font-weight:700;flex:none;color:var(--text);}
/* Lo pendiente en gris, lo cobrado en blanco: la diferencia entre "me lo deben"
   y "lo tengo" se ve sin leer ninguna etiqueta. */
.pt-imp.pt-pend{color:var(--text3);}

/* -- Formulario como parte: un campo por linea, con su rotulo ----------- */
.pt-campo-f{padding:12px 0;border-bottom:1px solid var(--border);}
.pt-campo-f:last-child{border-bottom:0;}
.pt-campo-f .pt-val{font-size:15px;color:var(--text);margin-top:4px;line-height:1.4;}
.pt-campo-f .pt-val.pt-mono{font-family:var(--mono);font-size:13px;letter-spacing:.02em;}
.pt-campo-f .pt-val.pt-vacio{color:var(--text3);}
.pt-campo-f.pt-ahora{border-left:2px solid var(--primary);padding-left:12px;}
.pt-ok-mini{color:var(--success);font-weight:700;letter-spacing:.1em;white-space:nowrap;}
.pt-pend-mini{color:var(--text3);font-weight:600;letter-spacing:.1em;white-space:nowrap;}

/* Avance por pasos: cuenta cuantos faltan sin letra pequena. */
.pt-pasos{display:flex;gap:4px;margin:0 0 16px;}
.pt-pasos i{flex:1;height:3px;border-radius:2px;background:var(--bg4);}
.pt-pasos i.pt-on{background:var(--primary);}

.pt-nota{font-family:var(--mono);font-size:11px;color:var(--text3);letter-spacing:.1em;
  text-transform:uppercase;text-align:center;line-height:1.6;}

@media (prefers-reduced-motion:reduce){
  .pt-sello{transform:none;}
}

/* -- Pantalla 11: verificacion, en el lenguaje del parte -------------------
   Las secciones dejan de ser tarjetas flotantes y pasan a ser campos de un
   formulario: rotulo en monoespaciada, marca de estado a la derecha, y una
   linea que las separa. El circulito numerado desaparece; el numero no
   informaba de nada que no dijera ya el orden. */
.pt-intro{font-size:13px;color:var(--text2);line-height:1.6;margin:0 0 18px;
  padding-left:12px;border-left:2px solid var(--border2);}
.pt-barra-caja{height:3px;border-radius:2px;background:var(--bg4);overflow:hidden;margin:0 0 16px;}
.pt-barra{height:100%;width:0%;background:var(--primary);transition:width .4s var(--ease);}

#sc-kyc .kyc-section{background:none;border:0;border-bottom:1px solid var(--border);
  border-radius:0;padding:14px 0;margin-bottom:0;}
#sc-kyc .kyc-section.done{background:none;border-color:var(--border);}
#sc-kyc .kyc-section.pt-ahora-sec{border-left:2px solid var(--primary);padding-left:12px;}
#sc-kyc .kyc-section-h{gap:0;margin-bottom:4px;}
#sc-kyc .kyc-section-h > div{flex:1;min-width:0;}
#sc-kyc .kyc-section-num{display:none;}
#sc-kyc .kyc-section-title{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text3);display:flex;
  align-items:center;gap:8px;flex-wrap:wrap;}
#sc-kyc .kyc-section-title::after{content:'Pendiente';font-family:var(--mono);font-size:11px;
  font-weight:700;letter-spacing:.1em;color:var(--text3);white-space:nowrap;margin-left:auto;
  padding-left:12px;}
#sc-kyc .kyc-section.done .kyc-section-title::after{content:'\2713\00a0 Hecho';color:var(--success);}
/* La pastilla verde de la matricula decia lo mismo que la marca del rotulo. */
#sc-kyc #kyc-license-tag{display:none;}
#sc-kyc .kyc-section.pt-req-sec .kyc-section-title::after{content:'Obligatoria';color:var(--warning);}
#sc-kyc .kyc-section.pt-ahora-sec .kyc-section-title{color:var(--accent-ink);}
#sc-kyc .kyc-section.pt-ahora-sec .kyc-section-title::after{content:'Ahora';color:var(--accent-ink);}
#sc-kyc .kyc-section-desc{font-size:12px;color:var(--text2);margin-top:4px;line-height:1.55;
  text-transform:none;letter-spacing:0;font-family:inherit;}
/* La matricula no exigida cuenta para el avance, pero no se puede decir
   "Hecho" de algo que nadie ha subido: lleva su propia marca. */
#sc-kyc .kyc-section.pt-opt-sec .kyc-section-title::after{content:'Opcional';color:var(--text3);}
#sc-kyc .kyc-section.pt-opt-sec .kyc-section-title{color:var(--text3);}
/* El ultimo campo no necesita linea: ya la pone el borde del boton de enviar. */
#sc-kyc #kyc-sec-declare{border-bottom:0;}

/* -- Pantalla 12: alta del profesional ------------------------------------
   El carril de pasos y el albaran ya estaban. Lo que se anade es saber
   cuanto queda y que pasa despues de darle a enviar. */
.pt-despues{border-left:2px solid var(--border2);padding:2px 0 2px 12px;
  font-size:13px;color:var(--text2);line-height:1.75;}
.pt-despues .pt-campo{margin-bottom:4px;}
.pt-despues b{color:var(--accent-ink);font-family:var(--mono);font-size:11px;
  font-weight:700;margin-right:2px;}
.po-form .pt-campo.pt-na{margin-bottom:-8px;}

/* -- Pantalla 02: buscar --------------------------------------------------
   Los filtros dejan de ser pastillas y pasan a rotulos con subrayado, como
   las pestanas de un archivador: ocupan la mitad y se leen igual. El orden
   sigue siendo un SELECT (en el movil, cuatro criterios en pestanas no caben
   y el desplegable nativo se maneja mejor); solo cambia su ropa. */
#sc-buscar .filter-sort-row{gap:18px;padding:2px 16px 10px;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;}
#sc-buscar .filter-sort-row::-webkit-scrollbar{display:none;}
#sc-buscar .fselect,#sc-buscar .avail-filter-tog,#sc-buscar .fchip{
  background:none;border:0;border-radius:0;padding:8px 0;font-family:var(--mono);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);position:relative;flex:none;white-space:nowrap;min-height:38px;}
#sc-buscar .fselect{padding-right:14px;}
#sc-buscar .fselect.on,#sc-buscar .avail-filter-tog.on,#sc-buscar .fchip.on{
  color:var(--text);font-weight:700;background:none;}
#sc-buscar .avail-filter-tog.on::after,#sc-buscar .fchip.on::after{content:'';
  position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--primary);}
#sc-buscar .fselect.on{color:var(--accent-ink);}
#sc-buscar .avail-filter-tog .avail-dot{width:6px;height:6px;}
#sc-buscar .fchip svg{width:11px;height:11px;}
#wlist .pt-entrada{padding-top:12px;padding-bottom:12px;}

/* Una sola linea de datos: si se parte, dejan de caber cinco en pantalla. */
#wlist .pt-meta{flex-wrap:nowrap;overflow:hidden;gap:8px;}
#wlist .pt-meta > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* -- Pantalla 03: ficha del profesional -----------------------------------
   Los rotulos de seccion pasan a monoespaciada; las tarifas, a lista de
   precios de taller con guia punteada del nombre al importe. */
.pt-check{font-family:var(--mono);font-size:12px;color:var(--text2);line-height:1.95;}
.pt-check i{color:var(--success);font-style:normal;margin-right:8px;}

#sc-worker .prof-section-title{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;}
#sc-worker .prof-stats{border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);
  background:none;border-radius:0;margin:0 16px;padding:0;gap:0;}
#sc-worker .prof-stat{padding:10px 0;}
#sc-worker .prof-stat + .prof-stat{border-left:1px solid var(--border);padding-left:12px;}
#sc-worker .prof-stat-val{font-family:var(--mono);font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;}
#sc-worker .prof-stat-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text3);margin-top:2px;}

#sc-worker .svc-item{font-family:var(--mono);font-size:12px;padding:6px 0;
  border-bottom:1px dotted var(--border2);background:none;border-radius:0;}
#sc-worker .svc-item:last-of-type{border-bottom:0;}
#sc-worker .svc-name{color:var(--text2);font-family:var(--mono);font-size:12px;font-weight:400;}
#sc-worker .svc-price{color:var(--accent-ink);font-family:var(--mono);font-weight:700;
  font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;}
#sc-worker .svc-check{stroke:var(--mint);}

/* La zona es un nombre, no una cifra: ni monoespaciada ni tabular, y de una
   sola linea, porque si se parte descuadra toda la fila. */
#sc-worker .prof-stat-val.pt-texto{font-family:'Manrope','Space Grotesk',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding-top:2px;}

/* -- Pantalla 04: solicitar -----------------------------------------------
   El resumen deja de ser una caja del formulario y pasa a ser el albaran.
   Las etiquetas de campo, a monoespaciada: el formulario se rellena como un
   parte, campo a campo. */
#sc-solicitar .label{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text3);}
#sc-solicitar .price-box.pt-papel{border:0;margin-top:20px;}
#sc-solicitar .price-box .price-row{display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;
  padding:0;margin-top:4px;border:0;color:var(--tinta);}
/* Los colores del formulario oscuro no valen sobre papel: se reescriben. */
#sc-solicitar .price-box .price-row span[style]{color:var(--tinta2)!important;}
#sc-solicitar .price-box .price-row.total{border-top:1px dashed rgba(36,31,24,.4);
  margin-top:10px;padding-top:8px;font-family:'Manrope','Space Grotesk',sans-serif;
  font-weight:800;font-size:16px;color:var(--tinta);}
#sc-solicitar .price-box .price-row.total span{color:var(--tinta)!important;}
#sc-solicitar .price-box svg{stroke:var(--tinta2);}

/* -- Pantalla 07: chat ----------------------------------------------------
   Burbujas casi rectas y la hora fuera, en monoespaciada: el hilo tambien es
   registro. El presupuesto se pinta como papel (.qcard), el mismo objeto que
   el cliente ve luego en el pedido; reconocerlo es lo que da constancia. */
.cmsg{border-radius:3px;box-shadow:none;}
.cmsg.me{background:var(--bg4);color:var(--text);border-bottom-right-radius:3px;
  border-right:2px solid var(--primary);box-shadow:none;}
.cmsg.them{background:var(--bg3);color:var(--text);border:0;border-left:2px solid var(--border2);
  border-bottom-left-radius:3px;}
.cmsg-time{font-family:var(--mono);font-size:11px;letter-spacing:.06em;opacity:1;
  color:var(--text3);margin-top:4px;}
.cmsg.them .cmsg-time{text-align:left;}
.cmsg-img img{border-radius:3px;}

/* El presupuesto, en papel. Los colores del tema oscuro no valen encima. */
.qcard{background:linear-gradient(174deg,var(--papel),var(--papel2));color:var(--tinta);
  border:0;border-radius:3px;padding:16px 16px 16px;font-family:var(--mono);
  font-size:12px;position:relative;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);}
.qcard::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:8px;
  background-image:linear-gradient(135deg,var(--papel2) 25%,transparent 25%),
    linear-gradient(225deg,var(--papel2) 25%,transparent 25%);
  background-size:12px 8px;background-repeat:repeat-x;}
.qcard-hdr{color:var(--tinta);font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  border-bottom:2px solid rgba(36,31,24,.75);padding-bottom:8px;margin-bottom:10px;}
.qcard-hdr svg{stroke:var(--tinta2);}
.qcard-row{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;
  padding:2px 0;color:var(--tinta2);}
.qcard-row span:last-child{color:var(--tinta);}
.qcard-row.total{border-top:1px dashed rgba(36,31,24,.4);font-family:'Manrope','Space Grotesk',sans-serif;
  font-weight:800;font-size:16px;color:var(--tinta);margin-top:10px;padding-top:8px;}
.qcard-row.total span{color:var(--tinta)!important;}
.qcard-note{background:rgba(36,31,24,.06);color:var(--tinta2);border-radius:2px;
  font-family:var(--mono);font-size:11px;}
.qcard-btn{border-radius:3px;font-size:13px;min-height:42px;}
.qcard-btn.accept{background:var(--sello-ok);color:#fff;}
.qcard-btn.reject{background:transparent;border:1px solid rgba(36,31,24,.3);color:var(--tinta2);}
.qcard-status{border-radius:2px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(36,31,24,.06);color:var(--tinta2);}
.qcard-status.accepted{color:var(--sello-ok);background:rgba(24,107,77,.12);}
.qcard-status.rejected{color:var(--sello-no);background:rgba(156,47,34,.12);}
.qcard-status.pending{color:var(--tinta2);background:rgba(36,31,24,.06);}
/* Los textos sueltos que el JS pinta con color del tema oscuro, sobre papel. */
.qcard div[style*="var(--text3)"],.qcard div[style*="var(--text2)"]{color:var(--tinta2)!important;}

/* -- Pantalla 06: mis pedidos y lista de pedidos ---------------------------
   Fuera el marco de tarjeta y el borde de color: filas de archivador. El
   estado ya lo dice el color del importe, asi que la pastilla se queda en un
   rotulo pequeno y deja de competir con el nombre del trabajo. */
.mj-card{background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;
  padding:12px 0;margin-bottom:0;}
.mj-card.active,.mj-card.pending,.mj-card.quote,.mj-card.completed,.mj-card.cancelled{
  border-left-color:transparent;}
.mj-status{background:none!important;padding:0;margin-top:3px;font-family:var(--mono);
  font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--text3)!important;}
.mj-status.completed{color:var(--success)!important;}
.mj-status.cancelled{color:var(--danger)!important;}
.pt-suma{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:16px;padding-top:12px;border-top:1px solid var(--border2);}

/* La misma mano en la lista de Pedidos: sin marco y sin rail de color. */
.job-card,.job-card-v2{background:none;border:0;border-bottom:1px solid var(--border);
  border-radius:0!important;padding:12px 0;margin-bottom:0;box-shadow:none;}
.job-card-v2:hover{transform:none;box-shadow:none;}
.job-card-v2.pending,.job-card-v2.accepted,.job-card-v2.completed,
.job-card-v2.cancelled,.job-card-v2.quote{border-left:0;}
.status{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;border-radius:0;padding:0;background:none!important;}

/* -- Pantalla 10: panel del profesional -----------------------------------
   Un led encendido es el lenguaje del oficio; un boton deslizante es el de
   una app. Y el tope del plan queda en una linea honesta, sin barra de
   progreso ni letra pequena. */
.pro-earn-cards{display:block;padding:16px 16px 4px;}
#sc-pro .pt-cifra{margin:4px 0 0;}
#sc-pro .pt-tres{margin-bottom:0;}
.pro-stat-row{border-bottom:1px solid var(--border);padding:0 16px 14px;gap:0;}
.pro-stat-row .pro-stat + .pro-stat{border-left:1px solid var(--border);padding-left:12px;}
.pro-stat-val{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;}
.pro-stat-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text3);margin-top:2px;}
/* El interruptor de disponibilidad, con piloto en vez de deslizante. */
.avail-tog{width:34px;height:34px;border-radius:0;background:none!important;
  display:flex;align-items:center;justify-content:center;}
.avail-tog::before{content:'';width:10px;height:10px;border-radius:50%;
  background:var(--text3);box-shadow:0 0 0 4px rgba(148,133,120,.14);transition:all .2s;}
.avail-tog:not(.off)::before{background:var(--success);box-shadow:0 0 0 4px rgba(16,185,129,.18);}
.avail-tog::after{display:none;}
#sc-pro .avail-row{padding:12px 16px;}
/* Las pestanas del panel, como el archivador del resto de la app. */
.pro-tabs{gap:16px;padding:4px 16px 10px;}
.pro-tab{background:none!important;border:0!important;border-radius:0;padding:8px 0;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text3);position:relative;min-height:38px;}
.pro-tab.on{color:var(--text);font-weight:700;}
.pro-tab.on::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;
  background:var(--primary);}

/* -- Pantalla 08: modo urgente --------------------------------------------
   La unica pantalla en rojo. El naranja significa "puedes tocar aqui" en
   toda la app; si el urgente tambien fuese naranja, no se distinguiria de
   pedir un presupuesto tranquilo. */
.urg-hero{border:1px solid rgba(239,68,68,.28);background:rgba(239,68,68,.05);
  border-radius:4px;padding:20px 18px;margin-bottom:12px;text-align:center;}
.urg-cifra{color:var(--danger);font-size:52px;margin:2px 0 0;}
.urg-cifra small{color:var(--danger);opacity:.75;font-size:24px;}
.urg-sep{height:1px;background:rgba(239,68,68,.22);margin:16px 0 14px;}
.urg-promesa{border-left:2px solid var(--danger);background:rgba(239,68,68,.06);
  padding:12px 12px;margin-bottom:16px;font-size:13px;color:var(--text2);line-height:1.55;}
#sc-urgente .urg-step-num{background:rgba(239,68,68,.14);color:var(--danger);
  border-color:rgba(239,68,68,.3);font-family:var(--mono);}
#sc-urgente .urg-step-title{font-size:14px;}
#sc-urgente .urg-step-desc{font-size:13px;}
#sc-urgente .btn{background:var(--danger);}
#sc-urgente .urgente-full-hdr .btn-back{border-color:rgba(239,68,68,.3)!important;}
#sc-urgente .urgente-full-hdr .btn-back svg{stroke:var(--danger)!important;}
#sc-urgente .urgente-full-hdr > div[style*="color:var(--primary)"]{color:var(--danger)!important;}
#sc-urgente .urgente-full-hdr svg[stroke="var(--primary)"]{stroke:var(--danger);}

/* -- Pantalla 09: el asistente --------------------------------------------
   La ficha de lo entendido usa la misma retícula de datos que el albarán:
   rótulo a la izquierda, valor a la derecha. Es un resumen, no una burbuja. */
.ia-brief{border-left:2px solid var(--border2);padding:2px 0 4px 12px;margin:10px 0 12px;
  font-family:var(--mono);font-size:11px;}
.ia-brief .pt-fila{padding:3px 0;color:var(--text);}
.ia-brief .pt-k{color:var(--text3);}
/* Burbujas del asistente con la misma esquina viva que el chat del pro. */
#sc-ia .bubble{border-radius:3px;}
#sc-ia .bubble.me{border-right:2px solid var(--primary);}
#sc-ia .bubble.ai{border-left:2px solid var(--border2);}
.ia-chip{border-radius:3px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;}

/* -- Pantalla 14: perfil --------------------------------------------------
   Una lista larga de filas iguales con azulejos de icono en degradado. Los
   azulejos pesaban mas que los nombres. Filas planas, icono discreto, y el
   nombre de la fila con el peso que le toca. */
.pmenu-item{border-radius:0;padding:14px 0;gap:12px;min-height:56px;}
.pmenu-icon{width:30px;height:30px;border-radius:3px;background:var(--bg3);
  border:1px solid var(--border);}
.pmenu-icon svg{width:15px;height:15px;}
.pmenu-label{font-family:'Manrope','Space Grotesk',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:-.01em;}

/* -- Pantalla 15: acceso --------------------------------------------------
   Entrar y registrarse dejan de ser dos mitades de una pastilla y pasan a
   ser dos pestanas de archivador. Es tambien la pantalla donde v193 dio
   guerra con los identificadores repetidos: separarlas visualmente ayuda a
   no volver a mezclarlas. */
.auth-tabs{background:none;border-bottom:1px solid var(--border2);border-radius:0;
  padding:0;gap:20px;margin-bottom:20px;}
.auth-tab{flex:none;background:none;border-radius:0;padding:10px 0;position:relative;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text3);min-height:42px;}
.auth-tab.on{background:none;color:var(--text);font-weight:700;}
.auth-tab.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--primary);}
#sc-perfil .label,#sc-pro-onboard .label,#sc-cli-onboard .label{font-family:var(--mono);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text3);}

/* -- Pantalla 16: bienvenida ---------------------------------------------- */
.ob-sub{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text3);line-height:1.7;}
.ob-login span{color:var(--accent-ink);}

/* -- Pantallas 17 y 18: administracion ------------------------------------
   Los estados eran pastillas de color: cinco colores compitiendo en la misma
   lista. Como marcas monoespaciadas se leen igual de rapido y dejan que el
   nombre del trabajo sea lo primero. */
#sc-admin .adm-badge,#sc-admin div[style*="border-radius:20px"][style*="font-weight:700"],
#sc-admin-det div[style*="border-radius:20px"][style*="font-weight:700"]{
  border-radius:2px!important;font-family:var(--mono);letter-spacing:.1em;}
#sc-admin .card,#sc-admin-det .card{border-radius:4px;}

/* -- Pantalla 19: seguimiento ---------------------------------------------
   El mapa ya funciona bien (v165). Cambia el marco: la distancia y la hora
   con la misma tipografia de datos que el resto del parte. */
.tracking-card-v2{border-radius:4px;}
.tracking-eta-pill{border-radius:2px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
.track-map-overlay{border-radius:2px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;}
.tracking-title-v2{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text3);}
.tracking-step-lbl{font-size:14px;}
.tracking-step-sub{font-family:var(--mono);font-size:11px;letter-spacing:.03em;}

/* -- Comun: los modales y las cajas tambien bajan el radio ---------------- */
#modal-sheet{border-radius:6px 6px 0 0;}
.card{border-radius:6px;}
.chip,.chip-sm{border-radius:3px;}

/* -- Pulido medido (2026-08-21) ------------------------------------------- */
.pt-tarifa span{font-size:11px;}
.pt-papel .pt-pie{font-size:11px;}
.pt-hora,.cmsg-time{font-size:11px;}
.pt-nota{font-size:11px;}
/* El area de toque, no el tamano visual. */
.pro-dots{gap:0;}
.pro-dot{padding:16px 8px;background-clip:content-box;height:40px;box-sizing:border-box;
  border-radius:0;width:22px;}
.pro-dot.on{width:38px;background-clip:content-box;}
.pro-skip{padding:12px 10px;min-height:42px;}
.mj-tab,.chip-sm{min-height:38px;display:inline-flex;align-items:center;}
.pmenu-item{min-height:56px;}

.mj-filter-row{gap:18px;padding:2px 16px 10px;}
.mj-fchip{background:none!important;border:0!important;border-radius:0;padding:8px 0;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text3);position:relative;min-height:38px;
  display:inline-flex;align-items:center;gap:4px;flex:none;}
.mj-fchip.on{color:var(--text);font-weight:700;}
.mj-fchip.on::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;
  background:var(--primary);}
.mj-fchip svg{width:11px;height:11px;}

/* La segunda fila de datos, con la misma reticula de lineas que la primera. */
.pro-stat{background:none;border:0;border-radius:0;padding:10px 0;text-align:left;}
.pro-stat-row{padding-top:0;}

/* -- Remates del papel ---------------------------------------------------- */
.pt-pbtn,.qcard-btn{white-space:nowrap;}
.qcard-btn.reject,.qcard-btn.accept{flex:none;padding-left:16px;padding-right:16px;}
.qcard-btn.accept{flex:1;}
/* Sobre papel, la tinta es tinta: los colores del tema oscuro no se heredan. */
.qcard [style*="var(--success)"],.qcard [style*="var(--danger)"],
.qcard [style*="var(--primary)"],.qcard [style*="#f59e0b"]{color:var(--tinta)!important;}
.qcard svg{stroke:var(--tinta2);}

/* En la pantalla roja no queda ni un acento naranja: el color ES el aviso. */
#sc-urgente [style*="var(--primary)"]{color:var(--danger)!important;}
#sc-urgente .urg-step{background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:12px 0;margin:0;}

/* -- Contraste medido (2026-08-21) ---------------------------------------- */
/* Tinta sobre naranja: 6,64:1. Con blanco eran 2,84:1 y fallaba AA en todos
   los botones de la app. La marca no cambia; cambia lo que se escribe encima. */
:root{--sobre-primary:#1a0f08;}
.btn,.qcard-btn.accept,.pt-pbtn{color:var(--sobre-primary);}
.btn svg{stroke:var(--sobre-primary);}
/* El verde del sello de aceptar es oscuro: ahi el blanco si pasa. */
.qcard-btn.accept,.pt-pbtn{color:#fff;}
html.light{--mint:#0a7a6c;}
.cmsg-time{color:var(--text2);}
/* Sobre papel, todo es tinta: nada hereda los colores del tema oscuro. */
/* El JS pinta estas filas con color en linea, heredado del tema oscuro:
   sobre papel hay que ganarle al atributo style, no basta la clase. */
.qcard-row span,.qcard-row .pt-k{color:var(--tinta2)!important;}
.qcard-row.total span{color:var(--tinta)!important;}
.qcard-note{color:var(--tinta2)!important;}
.qcard .cmsg-time,.qcard [class*="time"]{color:var(--tinta2)!important;}

/* En claro el naranja de marca ya es oscuro: encima manda el blanco. */
/* Semanticos del tema claro: los de por defecto se quedan entre 2,9 y 4,4
   sobre papel claro. Oscurecidos, todos pasan AA. */
html.light{--sobre-primary:#ffffff;--warning:#b45309;--danger:#b91c1c;--success:#036847;--info:#1d4ed8;--star:#92400e;}
/* El boton del bloque urgente del inicio, con la misma tinta que los demas. */
.u-btn{color:var(--sobre-primary);}
.u-btn svg{fill:var(--sobre-primary);}
html.light .u-btn{color:#fff;}

/* .urgente-banner .u-btn tenia mas peso que la regla suelta y volvia a poner
   el blanco: se le gana con el mismo selector. */
.urgente-banner .u-btn{color:var(--sobre-primary);}
html.light .urgente-banner .u-btn{color:#fff;}
.ai-badge{color:var(--sobre-primary);}
.pro-btn-done{color:var(--sobre-primary);}
html.light .ai-badge{color:#fff;}
/* El boton blanco del banner de invitado: naranja de marca sobre blanco son
   2,84:1. Sobre blanco siempre hace falta el naranja oscurecido. */
#guest-cta button{color:#a8380a!important;}
/* Los botones pequenos de las tarjetas de pedido, con la misma tinta. */
.mj-card .btn-sm,.mj-card button{color:var(--sobre-primary);}
html.light .mj-card .btn-sm,html.light .mj-card button{color:#fff;}

/* -- Sello fantasma de la portada (fallo anterior, no del rediseno) --------
   dlOpenApp() pone display:none en linea, pero la media query de escritorio
   lo pisa con display:flex !important, asi que lo que esconde la portada es
   la visibility. El sello VERIFICADO del heroe se colaba igualmente y salia
   flotando en mitad de la app en escritorio. Con opacity 0 no se cuela nada,
   venga de donde venga. */
#desktop-landing[style*="display: none"]{opacity:0!important;pointer-events:none!important;}

/* La barra superior y la caja de escribir del tema claro seguian en un gris
   AZUL (rgba(240,244,248)) de la paleta vieja, sobre un fondo que ya es
   papel: se veia el corte. Van al mismo ocre que el resto. */
html.light .topbar,html.light .chat-input-row{background:rgba(247,243,236,0.97);}
#sc-solicitar .price-box [style*="var(--success)"],
#sc-solicitar .price-box [style*="var(--danger)"]{color:var(--tinta2)!important;}

/* =========================================================================
   AUDITORIA (2026-09-11) — tokens, toque y tres pantallas
   Lo mecanico ya paso por todo el fichero (escala 11-28, rejilla de 4,
   radios 4/8/12/16/20). Aqui va lo que no se puede hacer a ciegas.
   ========================================================================= */
:root{
  --fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-15:15px;--fs-17:17px;
  --fs-20:20px;--fs-22:22px;--fs-28:28px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
  --rad-s:4px;--rad-m:12px;--rad-l:20px;
  --margen:16px;
}
/* Los controles de formulario no heredan la letra: salian en Arial. */
button,input,select,textarea{font-family:inherit;}
/* Un solo margen de pantalla: la cabecera iba a 18 y el contenido a 16. */
.topbar{padding-left:var(--margen);padding-right:var(--margen);}
/* La firma de la marca era de 7,5 px: por debajo de lo legible. */
.logomark-sub{font-size:11px;letter-spacing:.03em;white-space:nowrap;}
/* Por debajo de 375 la firma choca con la campana: mejor sin ella que cortada. */
@media(max-width:374px){#home-hdr .logomark-sub{display:none;}}

/* -- Zonas de toque de 44 (Apple HIG). Se agranda el AREA, no la pieza. --- */
.btn-back,.btn-icon,.notif-bell{width:40px;height:40px;position:relative;}
.btn-back::after,.btn-icon::after,.notif-bell::after,.ia-chip::after,.hf-link::before,
.wc2-chip::after,.mj-fchip::before,.pro-tab::before{content:'';position:absolute;inset:-4px;}
.ia-chip,.wc2-chip{position:relative;min-height:36px;display:inline-flex;align-items:center;}
.hf-link{padding:8px 0;}
.pro-tab,.mj-fchip{min-height:44px;}
.pro-edit-btn{min-height:44px;padding:8px 16px;}
.btn-ghost{min-height:44px;}
.chat-attach,.chat-send{min-width:44px;min-height:44px;}
/* Todo boton de la app mide 44 de alto: los de las tarjetas (Chat, Voy de
   camino, Volver a contratar) se quedaban en 29-33. */
#app button{min-height:44px;}
.qcat-chip{min-height:40px;position:relative;}
.qcat-chip::after{content:'';position:absolute;inset:-2px;}
.sec-link{position:relative;display:inline-block;padding:6px 0;margin:-6px 0;}
.sec-link::after{content:'';position:absolute;inset:-8px 0;}
.qt-arr{min-width:44px;min-height:44px;}
.pwd-toggle{min-width:44px;min-height:44px;justify-content:center;}
.profile-avatar-edit{width:30px;height:30px;}
.profile-avatar-edit::after{content:'';position:absolute;inset:-7px;}
/* Los enlaces legales dentro de las casillas del alta: area de toque, no
   solo el texto. */
label span[onclick]{position:relative;display:inline-block;padding:6px 0;margin:-6px 0;}
input[type=checkbox]{width:20px;height:20px;}

/* -- Panel del profesional ------------------------------------------------
   El piloto de 10 px no se leia como interruptor. Vuelve el carril: es el
   control que todo el mundo reconoce, y con el led encendido dentro. */
.avail-tog{width:46px;height:28px;border-radius:14px;border:1px solid var(--border);
  background:var(--bg4)!important;position:relative;display:block;flex:none;
  transition:background .2s,border-color .2s;}
.avail-tog::before{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:var(--text3);box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:transform .2s var(--ease-spring),background .2s;}
.avail-tog:not(.off){background:color-mix(in srgb, var(--success) 22%, var(--bg4))!important;
  border-color:var(--success);}
.avail-tog:not(.off)::before{transform:translateX(18px);background:var(--success);}
.avail-tog::after{content:'';display:block;position:absolute;inset:-8px;width:auto;height:auto;
  background:none;border-radius:0;transform:none;}
/* La segunda fila de cifras usa la misma pieza que la primera; la celda vacia
   no lleva raya. */
.pt-tres > div:empty{border-left:0;}
#sc-pro .avail-row{padding:12px 16px;min-height:60px;}

/* -- Verificacion -----------------------------------------------------------
   El raul naranja de la seccion activa la sangraba a 29 px; ahora el texto
   se queda en el margen de 16 como las demas. Y un solo estilo de rotulo. */
#sc-kyc .kyc-section.pt-ahora-sec{margin-left:-13px;padding-left:11px;}
#sc-kyc .label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text3);margin-bottom:8px;}
#sc-kyc .kyc-section-title{font-size:11px;}
#sc-kyc .pt-cabpant .pt-t{font-size:22px;}

/* -- Administracion ---------------------------------------------------------
   Cabecera de 20 px por pestana (antes no habia nada por encima de 15), las
   pestanas suben a 12, y el estado del pedido es la misma marca en todas
   las filas. */
#sc-admin .pro-tab{font-size:12px;}
/* Cinco pestanas a 12 px no entran en 390 con icono: fuera el icono, que
   no anadia nada al rotulo, y la quinta deja de quedar escondida. */
#sc-admin .pro-tabs{gap:14px;}
#sc-admin .pro-tab svg{display:none;}
#admin-cab .pt-cabpant{margin-bottom:16px;}
#sc-admin .status{font-size:11px;}
.admin-block-h{font-size:14px;}

/* -- Escritorio -------------------------------------------------------------
   Sin ancho maximo cada fila del admin cruzaba 1.100 px entre el nombre y el
   boton. Y el logo salia dos veces: en la barra lateral y en la cabecera. */
#app.desk-mode #admin-cab,#app.desk-mode #admin-content,#app.desk-mode #admin-detail,
#app.desk-mode #pro-scroll-wrap > *,#app.desk-mode #payments-list{max-width:760px;}
#app.desk-mode #home-hdr .logomark{visibility:hidden;}
/* Mismo margen que el contenido del inicio (16px): con 20px el saludo y el buscador
   quedaban 4px hacia dentro respecto a las tarjetas. 2026-09-23 */
#app.desk-mode #home-hdr{padding-left:16px;padding-right:16px;}
/* Perfil en escritorio (pd-*, 2026-09-23): franja + cifras + tres grupos. Solo se
   renderiza con #app.desk-mode (renderUserProfileDesk); el movil no lo usa. */
#app.desk-mode .pd{max-width:1040px;margin:0 auto;padding:32px 32px 48px;}
.pd-crumb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:6px;}
.pd-h1{font-family:'Manrope',sans-serif;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:0 0 20px;}
.pd-head{position:relative;overflow:hidden;border-radius:20px;padding:28px 32px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;background:radial-gradient(120% 140% at 12% 0%,#2b1b3d 0%,#1b2237 55%,#14101c 100%);color:#fff;}
.pd-head::after{content:'';position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(238,90,38,.35),transparent 68%);pointer-events:none;}
.pd-av{position:relative;width:128px;height:128px;border-radius:50%;padding:4px;background:conic-gradient(from 140deg,#ee5a26,#ec4899,#f59e0b,#ee5a26);cursor:pointer;flex-shrink:0;}
.pd-av-in{width:100%;height:100%;border-radius:50%;border:4px solid #17121f;overflow:hidden;}
.pd-av-in img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-av-in .profile-avatar-placeholder{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#c2410c,#7c2d12);color:#fff;font-family:'Manrope',sans-serif;font-weight:800;font-size:44px;border:0;}
.pd-cam{position:absolute;right:2px;bottom:2px;width:38px;height:38px;min-height:0!important;border-radius:50%;background:#ee5a26;border:3px solid #17121f;display:flex;align-items:center;justify-content:center;color:#fff;padding:0;cursor:pointer;}
.pd-cam svg{width:16px;height:16px;}
.pd-who{min-width:0;}
.pd-name{font-family:'Manrope',sans-serif;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere;}
.pd-mail{color:rgba(255,255,255,.62);margin-top:4px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pd-chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.pd-chip{white-space:nowrap;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;}
.pd-c-spec{background:rgba(255,255,255,.08);color:#ffd9a8;border:1px solid rgba(255,179,71,.32);}
.pd-c-pro{background:rgba(238,90,38,.22);color:#ffb347;}
.pd-acts{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;min-width:240px;}
.pd-b{height:44px;border-radius:12px;border:0;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;white-space:nowrap;padding:0 18px;cursor:pointer;font-family:inherit;transition:filter .15s,transform .15s;}
.pd-b:hover{filter:brightness(1.08);}
.pd-b-main{background:#ee5a26;color:#1a0f08;}
.pd-b-gold{background:linear-gradient(135deg,#d4a843,#b8922e);color:#1f1606;}
.pd-b-ok{background:linear-gradient(135deg,#10b981,#059669);color:#04130d;}
.pd-b-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16);}
.pd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0 28px;}
.pd-st{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:16px 18px;min-width:0;}
.pd-v{font-family:var(--mono);font-weight:600;font-size:24px;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.2;}
.pd-v small{font-size:14px;color:var(--text3);font-weight:500;}
.pd-l{font-size:12px;color:var(--text3);margin-top:4px;}
.pd-l svg{width:13px;height:13px;color:var(--mint);}
.pd-st-addr{cursor:pointer;transition:border-color .15s;}
.pd-st-addr:hover{border-color:var(--primary);}
.pd-st-wide{grid-column:span 2;}
.pd-addr{font-weight:600;color:var(--text);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;}
.pd-add{color:var(--accent-ink);}
.pd-nuevo{font-family:inherit;font-size:15px;font-weight:700;color:var(--accent-ink);}
.pd-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;}
.pd-g{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:8px;}
.pd-g h3{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);font-weight:600;padding:10px 12px 8px;margin:0;}
.pd-row{display:flex;align-items:center;gap:12px;padding:0 12px;height:44px;border-radius:10px;color:var(--text);font-weight:500;font-size:14px;cursor:pointer;transition:background .12s;}
.pd-row:hover,.pd-row:focus-visible{background:var(--bg3);outline:none;}
.pd-row svg{width:17px;height:17px;color:var(--text2);flex-shrink:0;}
.pd-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pd-x{color:var(--text3);}
.pd-acc,.pd-acc svg{color:var(--accent-ink);font-weight:600;}
.pd-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(16,185,129,.15);color:var(--success);white-space:nowrap;}
.pd-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--border);}
.pd-foot-l{display:flex;gap:10px;}
.pd-lnk{height:40px;min-height:40px!important;padding:0 16px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;white-space:nowrap;}
.pd-lnk:hover{background:var(--bg3);}
.pd-red{color:var(--danger);border-color:rgba(239,68,68,.3);}
@media (max-width:1180px){
  .pd-head{grid-template-columns:auto minmax(0,1fr);}
  .pd-acts{grid-column:1/-1;flex-direction:row;}
  .pd-acts .pd-b{flex:1;}
  .pd-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pd-groups{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* -- Barra flotante de seguimiento (tipo Glovo) ----------------------------
   Colgada del body y por encima de #app (9999). Plegada: avatar, estado y
   ETA en vivo. Abierta: el mismo mapa del detalle. Se esconde en el inicio
   (ya esta la tarjeta) y en el detalle del propio pedido. */
#track-pill{position:fixed;left:12px;right:12px;bottom:calc(var(--sb,0px) + 74px);z-index:10000;
  background:var(--bg2);border:1px solid var(--border2,var(--border));border-radius:16px;overflow:hidden;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.2);display:none;
  transform:translateY(8px);opacity:0;transition:transform .22s var(--ease-spring),opacity .2s;}
#track-pill.on{display:block;transform:none;opacity:1;}
.tp-hd{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:60px;cursor:pointer;}
.tp-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;background:var(--bg3);
  display:grid;place-items:center;font-family:'Manrope','Space Grotesk',sans-serif;font-weight:800;font-size:14px;}
.tp-t{font-family:'Manrope','Space Grotesk',sans-serif;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tp-s{font-family:var(--mono);font-size:12px;color:var(--text2);margin-top:2px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tp-led{width:9px;height:9px;border-radius:50%;background:var(--success);flex:none;
  box-shadow:0 0 0 4px rgba(16,185,129,.18);animation:tpPulse 1.6s ease-in-out infinite;}
.tp-led.arr{animation:none;}
.tp-chev{color:var(--text3);flex:none;transition:transform .2s;}
#track-pill.open .tp-chev{transform:rotate(180deg);}
.tp-body{display:none;border-top:1px solid var(--border);}
#track-pill.open .tp-body{display:block;}
.tp-map{height:200px;background:var(--bg3);}
.tp-actions{display:flex;gap:8px;padding:10px 12px;}
@keyframes tpPulse{0%,100%{box-shadow:0 0 0 4px rgba(16,185,129,.18);}50%{box-shadow:0 0 0 8px rgba(16,185,129,.05);}}
@media(prefers-reduced-motion:reduce){.tp-led{animation:none;}#track-pill{transition:none;}}
/* Con un modal abierto (pagar, valorar, cancelar) la pildora se aparta: va por
   encima de #app y taparia los botones de abajo de la hoja. */
body:has(#modal-bg.open) #track-pill{display:none;}
/* En el chat no hay barra inferior: la pildora va justo encima del compositor. */
#track-pill.tp-chat{bottom:calc(var(--sb,0px) + 70px);}
/* Escritorio: sin barra inferior, abajo a la derecha como notificacion. */
@media(min-width:900px){#track-pill{left:auto;right:24px;bottom:24px;width:380px;}}
/* Atribucion de OSM: pequena y discreta, pero visible (lo exige la licencia). */
.leaflet-control-attribution{font-size:9px!important;background:rgba(255,255,255,.7)!important;color:#333!important;padding:1px 5px!important;}
.leaflet-control-attribution a{color:#333!important;}

/* -- Terracota (v236) -------------------------------------------------------
   El naranja de marca pasa de #ff6b35 a #ee5a26 (claro: #b8410f). Con el tono
   nuevo, blanco sobre naranja se queda en 3,4:1: la portada usa la misma tinta
   oscura que ya llevan los botones de la app (--sobre-primary, 5,5:1). */
.yc-gobtn,.yc-iconbtn.yc-rec,.yc-pv.yc-on,.yc-wa{color:#1a0f08;}
/* Iniciales del avatar del chat: naranja sobre --bg4 baja a 4,3:1 con el tono nuevo. */
.chat-av{color:var(--primarylt);}
html.light .chat-av{color:var(--primary2);}

/* -- Auditoria pre-lanzamiento (2026-09-17, CLAUDE.md #38) ----------------
   Medido en 196 capturas (cliente, pro y admin; 390 y 1440; oscuro y claro). */

/* Portada: rotulos por debajo de 11 px en escritorio (en movil ya subian a 11,5). */
.yc-fl-node small{font-size:11px;}
.yc-fl-cap{font-size:11px;}
.yc-photo figcaption{font-size:11px;color:#fff;}
.yc-eyebrow{font-size:11px;}
.yc-ghost-tag{font-size:11px;}
.yc-tag{font-size:11px;}
.yc-rd-clock small{font-size:11px;}
.yc-es-coin{font-size:11px;}
/* En movil el diagrama de "Como funciona" se oculta y quedaba una caja vacia con solo el pie. */
@container (max-width:899.98px){ #desktop-landing #yc-como .yc-scene{display:none;} }
/* Enlaces de cabecera en escritorio: 21 px de alto, por debajo del minimo de 24. */
#desktop-landing .yc-hnav a{padding:6px 0;}
/* "Crear cuenta" en claro iba en el naranja de fondo oscuro (3,4:1). */
html.light #desktop-landing .yc-hnav .yc-hnav-reg{color:var(--accent-ink);}

/* Pildora "volver a la portada": fondo oscuro fijo, asi que el texto tambien va fijo
   (en claro heredaba --text oscuro y desaparecia). */
#volver-yc{color:#f2f5fa;min-height:44px;}
#volver-yc i{color:#ee5a26;}

/* Iniciales de avatar: naranja sobre --bg4 se quedaba en 4,3:1. */
.av{color:var(--primarylt);}
html.light .av{color:var(--primary2);}
/* Cabecera del Modo Urgente en claro: --danger claro es rojo oscuro sobre fondo fijo oscuro. */
html.light #sc-urgente .urgente-full-hdr > div[style*="color:var(--primary)"]{color:#ff6b62!important;}
html.light #sc-urgente .urgente-full-hdr .btn-back svg{stroke:#ff6b62!important;}
/* Tilde del paso hecho: blanco sobre verde 2,5:1 en oscuro; en claro el verde ya es oscuro y manda el blanco. */
.tracking-step-v2.ts-done .tracking-circle{color:#04231e;}
html.light .tracking-step-v2.ts-done .tracking-circle{color:#fff;}
/* Contador de la campana: blanco sobre #ef4444 3,8:1. */
.notif-bell-badge{background:#dc2626;}
html.light .notif-bell-badge{background:var(--danger);}

/* Zonas de toque que seguian por debajo de 44 (sin cambiar el tamano visual). */
.logomark[onclick]{position:relative;}
.logomark[onclick]::after{content:'';position:absolute;inset:-7px 0;}
.pro-dot{position:relative;}
.pro-dot::after{content:'';position:absolute;inset:0 -11px;}
.chip-sm,#sc-buscar .fchip,#sc-buscar .avail-filter-tog{position:relative;}
.chip-sm::after,#sc-buscar .fchip::after,#sc-buscar .avail-filter-tog::after{content:'';position:absolute;inset:-3px;}
#sc-buscar .fselect{min-height:44px;}
.ia-photo-btn{position:relative;}
.ia-photo-btn::after{content:'';position:absolute;inset:0 -3px;}
.notif-panel span[onclick^="closeNotifPanel"]{position:relative;}
.notif-panel span[onclick^="closeNotifPanel"]::after{content:'';position:absolute;inset:-10px;}
.search-box input{min-height:24px;padding:11px 0;}
.search-box-dual input{padding:11px 0;}
.svc-item.editable .svc-del{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.svc-name-inp,.svc-price-inp{min-height:44px;}
#reg-terms-check,#reg-privacy-check,#reg-proagree-check,#po-terms-check,#po-privacy-check,#po-proagree-check{width:20px!important;height:20px!important;}

/* Editor de horarios: dos lineas por dia (la de una sola no cabia a 390 y cortaba "09:0"). */
.avail-day-row{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;}
.adr-top{display:flex;align-items:center;gap:10px;}
.adr-time{display:flex;align-items:center;gap:8px;padding-left:56px;}
.avail-24-lbl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);cursor:pointer;user-select:none;min-height:44px;padding:0 4px;}
.avail-day-24{width:20px;height:20px;accent-color:var(--success);cursor:pointer;margin:0;}
.avail-day-start,.avail-day-end{flex:1 1 100px;min-width:100px;width:auto;min-height:44px;padding:8px 10px;font-size:14px;}
/* Banner de instalar la app y "Marcar leídas": botones de 22-31 px. */
#install-banner button,.install-banner button,[onclick="triggerInstall()"],[onclick="dismissInstallBanner()"]{min-height:44px!important;padding-left:14px!important;padding-right:14px!important;}
#notif-mark-all{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;}
/* Pie de la portada en escritorio: enlaces de 21 px. */
#desktop-landing footer a,#desktop-landing .yc-foot a{display:inline-block;padding:4px 0;}
/* Avatar de la cabecera del chat (abre la ficha): 38 px -> zona de 44. */
#chat-av[onclick]{position:relative;}
#chat-av[onclick]::after{content:'';position:absolute;inset:-3px;border-radius:50%;}