/* ══════════════════════════════════════════════════════
   SOPORTE · formulario /soporte y seguimiento /soporte/seguimiento
   Misma paleta y tipografías de la tienda: crema + vino tinto + oro,
   Cormorant Garamond y Jost. Prefijo sp- en todo.
   ══════════════════════════════════════════════════════ */
:root{
  --sp-fondo:#F7F4EE; --sp-fondo2:#F0EBE1; --sp-fondo3:#E8E1D3; --sp-superficie:#FDFBF7;
  --sp-linea:#E1D9CA; --sp-linea2:#ECE6DA; --sp-borde:#D4C9B4;
  --sp-oro:#C4A24A; --sp-oro-claro:#DDBE66; --sp-oro-hondo:#7D6428;
  --sp-vino:#5A1A24; --sp-vino-claro:#7A2733; --sp-vino-hondo:#4A1620; --sp-vino-suave:rgba(90,26,36,.09);
  --sp-tinta:#2A2420; --sp-gris:#655B51; --sp-gris2:#726860;
  --sp-error:#9C3B2E; --sp-error-suave:#FDF1EE; --sp-ok:#3E6B4B; --sp-ok-claro:#4F7D5C; --sp-ok-suave:#EEF6F0;
  --sp-ambar:#8A6414; --sp-ambar-suave:#FBF3DE;
  --sp-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sp-sans:'Jost',-apple-system,'Segoe UI',system-ui,sans-serif;
  --sp-grad-oro:linear-gradient(115deg,#7D6428 0%,#C4A24A 32%,#DDBE66 52%,#C4A24A 74%,#7D6428 100%);
  --sp-sombra:0 1px 2px rgba(42,36,32,.05),0 14px 34px -16px rgba(42,36,32,.22);
  --sp-curva:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.sp{margin:0;background:var(--sp-fondo);color:var(--sp-tinta);font:300 17px/1.6 var(--sp-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
:where(.sp) a{color:inherit}
:where(.sp) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sp :focus-visible{outline:3px solid var(--sp-oro-hondo);outline-offset:2px;border-radius:4px}
.sp-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sp ::selection{background:var(--sp-oro);color:var(--sp-tinta)}

/* ── Marca y barra superior ── */
.sp-top{position:sticky;top:0;z-index:20;background:rgba(247,244,238,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--sp-linea)}
.sp-top__int{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:1040px;margin:0 auto;padding:12px 20px}
.sp-marca{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;text-decoration:none;font-size:1.5rem}
.sp-marca__dyk{font-family:var(--sp-serif);font-weight:500;background:var(--sp-grad-oro);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-marca__fila{display:flex;align-items:center;gap:.45em;margin-top:.25em}
.sp-marca__raya{width:1em;height:1px;background:var(--sp-oro)}
.sp-marca__parfums{font:400 .34em var(--sp-sans);letter-spacing:.3em;color:var(--sp-oro-hondo)}
.sp-nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sp-nav a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border-radius:999px;font:400 .86rem var(--sp-sans);text-decoration:none;color:var(--sp-gris);transition:background-color .2s,color .2s}
.sp-nav a:hover{background:var(--sp-vino-suave);color:var(--sp-vino)}
.sp-nav a[aria-current="page"]{background:var(--sp-vino);color:#fff}

.sp-corto{display:none}
.sp-main{max-width:1040px;margin:0 auto;padding:26px 20px 70px}

/* ── Información de arriba: horario y cómo funciona ── */
.sp-info{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;margin:0 0 22px}
.sp-caja{background:var(--sp-superficie);border:1px solid var(--sp-linea);border-radius:18px;padding:20px 22px;box-shadow:var(--sp-sombra)}
.sp-caja h2{margin:0 0 4px;font:600 .66rem var(--sp-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sp-oro-hondo)}
.sp-horario__texto{margin:6px 0 12px;font:500 1.38rem/1.25 var(--sp-serif);color:var(--sp-tinta)}
.sp-estado{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 12px;border-radius:999px;font:500 .84rem var(--sp-sans);border:1px solid var(--sp-linea);background:var(--sp-fondo2);color:var(--sp-gris)}
.sp-estado i{width:10px;height:10px;border-radius:50%;background:#B9AF9C}
.sp-estado--abierto{background:var(--sp-ok-suave);border-color:#B9D6C1;color:var(--sp-ok)}
.sp-estado--abierto i{background:var(--sp-ok-claro);box-shadow:0 0 0 4px rgba(79,125,92,.2);animation:spLatido 2.4s ease-in-out infinite}
.sp-estado--cerrado{background:var(--sp-ambar-suave);border-color:#E6CE96;color:var(--sp-ambar)}
.sp-estado--cerrado i{background:#D9A93A}
@keyframes spLatido{0%,100%{box-shadow:0 0 0 3px rgba(79,125,92,.22)}50%{box-shadow:0 0 0 7px rgba(79,125,92,.06)}}
.sp-horario__nota{margin:12px 0 0;font-size:.86rem;color:var(--sp-gris);line-height:1.55}
.sp-pasos{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:paso}
.sp-pasos li{position:relative;padding:12px 10px 10px;border-radius:14px;background:var(--sp-fondo);border:1px solid var(--sp-linea2);font-size:.82rem;line-height:1.4;color:var(--sp-gris);counter-increment:paso}
.sp-pasos li::before{content:counter(paso);display:grid;place-items:center;width:28px;height:28px;margin:0 0 8px;border-radius:50%;background:var(--sp-vino);color:#fff;font:600 .95rem var(--sp-serif)}
.sp-pasos b{display:block;margin:0 0 2px;font:500 .9rem var(--sp-sans);color:var(--sp-tinta)}
.sp-seg-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--sp-linea2);font-size:.88rem;color:var(--sp-gris)}
.sp-seg-link a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--sp-vino);color:var(--sp-vino);font:500 .84rem var(--sp-sans);text-decoration:none;transition:all .2s var(--sp-curva)}
.sp-seg-link a:hover{background:var(--sp-vino);color:#fff}

/* ── El formulario ── */
.sp-form{max-width:980px;margin:0 auto}
.sp-head{position:relative;overflow:hidden;color:#fff;border-radius:20px 20px 0 0;padding:28px 30px 24px;border-bottom:4px solid var(--sp-oro);
  background:radial-gradient(520px 240px at 92% -10%,rgba(196,162,74,.34),transparent 60%),linear-gradient(135deg,var(--sp-vino-claro) 0%,var(--sp-vino) 45%,var(--sp-vino-hondo) 100%)}
.sp-head::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 13px)}
.sp-head>*{position:relative}
.sp-kicker{margin:0 0 4px;font:600 .7rem var(--sp-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sp-oro-claro)}
.sp-head h1{margin:0;font:500 clamp(2rem,4.6vw,3rem)/1.05 var(--sp-serif);color:#fff;letter-spacing:.005em}
.sp-lead{margin:10px 0 0;max-width:60ch;color:rgba(255,255,255,.84);font-size:.98rem;line-height:1.55}
.sp-prog{display:flex;align-items:center;gap:12px;margin-top:18px;font:500 .84rem var(--sp-sans);color:rgba(255,255,255,.9)}
.sp-prog__barra{flex:1;max-width:280px;height:7px;border-radius:9px;background:rgba(255,255,255,.18);overflow:hidden}
.sp-prog__barra span{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--sp-oro),var(--sp-oro-claro));transition:width .4s var(--sp-curva),background .3s}
.sp-prog.is-ok .sp-prog__barra span{background:linear-gradient(90deg,#4F7D5C,#7FBF93)}
.sp-cuerpo{background:var(--sp-superficie);border:1px solid var(--sp-linea);border-top:0;border-radius:0 0 20px 20px;padding:24px;box-shadow:0 22px 50px -26px rgba(42,36,32,.3)}

/* Pasos (semáforo) */
.sp-paso{position:relative;border:1.5px solid var(--sp-linea);border-left:5px solid var(--sp-vino);border-radius:16px;padding:20px 20px 22px;margin:0 0 16px;background:#fff;transition:border-color .25s,background .25s}
.sp-paso.is-ok{border-color:#B9D6C1;border-left-color:var(--sp-ok-claro);background:linear-gradient(180deg,var(--sp-ok-suave) 0,#fff 90px)}
.sp-paso.is-opt{border-style:dashed;border-left-style:solid;border-left-color:#A89E8A}
.sp-paso__cab{display:flex;gap:15px;align-items:flex-start;margin:0 0 16px}
.sp-circ{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(160deg,var(--sp-vino-claro),var(--sp-vino-hondo));color:#fff;font:500 1.5rem var(--sp-serif);box-shadow:0 8px 18px -8px rgba(90,26,36,.6)}
.sp-circ svg{width:23px;height:23px;display:none}
.sp-paso.is-ok .sp-circ{background:linear-gradient(160deg,#5E9470,var(--sp-ok));box-shadow:0 8px 18px -8px rgba(62,107,75,.55);animation:spPulso 1.5s ease-out 1}
.sp-paso.is-ok .sp-circ svg{display:block}
.sp-paso.is-ok .sp-circ b{display:none}
.sp-paso.is-opt .sp-circ{background:linear-gradient(160deg,#B3A995,#8C8270);box-shadow:none}
.sp-circ b{font-weight:500}
@keyframes spPulso{0%{box-shadow:0 0 0 0 rgba(62,107,75,.5)}100%{box-shadow:0 0 0 14px rgba(62,107,75,0)}}
.sp-paso h3{margin:0;font:500 1.55rem/1.15 var(--sp-serif);color:var(--sp-tinta)}
.sp-paso__s{margin:4px 0 0;color:var(--sp-gris);font-size:.92rem;line-height:1.5}
.sp-opc{display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 10px;border-radius:7px;background:var(--sp-fondo2);border:1px solid var(--sp-linea);color:var(--sp-gris);font:500 .66rem var(--sp-sans);letter-spacing:.1em;text-transform:uppercase}

/* Tipos de solicitud */
.sp-tipos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:0;margin:0;padding:0;min-width:0}
.sp-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:118px;padding:16px 16px 14px;border:1.5px solid var(--sp-linea);border-radius:16px;background:var(--sp-superficie);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s var(--sp-curva),background .2s}
.sp-tile:hover{border-color:var(--sp-vino-claro);transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(90,26,36,.4)}
.sp-tile input{position:absolute;opacity:0;width:1px;height:1px}
.sp-tile:focus-within{outline:3px solid var(--sp-oro-hondo);outline-offset:2px}
.sp-tile__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sp-vino-suave);color:var(--sp-vino);transition:background .2s,color .2s}
.sp-tile__ico svg{width:22px;height:22px}
.sp-tile__t{font:500 1rem/1.25 var(--sp-sans);color:var(--sp-tinta)}
.sp-tile__d{font-size:.8rem;line-height:1.4;color:var(--sp-gris)}
.sp-tile.is-sel{border-color:var(--sp-vino);background:#FCF5F2;box-shadow:0 0 0 3px rgba(90,26,36,.13)}
.sp-tile.is-sel .sp-tile__ico{background:var(--sp-vino);color:#fff}
.sp-tile.is-sel::after{content:"";position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--sp-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M13.5 3.8 6 11.3 2.5 7.8l-1.1 1.1L6 13.5l8.6-8.6z'/%3E%3C/svg%3E") center/13px no-repeat}

.sp-nota{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 16px;border-radius:12px;background:var(--sp-ambar-suave);border:1px solid #E6CE96;color:#5E4412;font-size:.9rem;line-height:1.5}
.sp-nota::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6414' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center/18px no-repeat}
.sp-nota--abierto{background:var(--sp-ok-suave);border-color:#B9D6C1;color:#2D5A3A}
.sp-nota--abierto::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E6B4B' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}

/* Campos */
.sp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.sp-c5{grid-column:span 5}.sp-c6{grid-column:span 6}.sp-c7{grid-column:span 7}.sp-c12{grid-column:span 12}
.sp-lbl{display:block;margin:0 0 6px;font:500 .9rem var(--sp-sans);color:var(--sp-tinta)}
.sp-req{color:var(--sp-error);margin-left:2px}
.sp-in{display:block;width:100%;min-height:48px;margin:0;padding:11px 14px;border:1.5px solid var(--sp-borde);border-radius:11px;background:#fff;color:var(--sp-tinta);font:400 1rem/1.3 var(--sp-sans);box-shadow:none;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s,background .15s}
textarea.sp-in{min-height:132px;resize:vertical;line-height:1.55}
.sp-in::placeholder{color:#968C7E}
.sp-in:focus{border-color:var(--sp-vino);box-shadow:0 0 0 4px rgba(90,26,36,.14)}
.sp-in.is-bad{border-color:var(--sp-error);background:var(--sp-error-suave)}
.sp-in.is-good{border-color:#8FB59A}
.sp-ayuda{margin:6px 0 0;font-size:.82rem;color:var(--sp-gris2);line-height:1.45}
.sp-err{margin:6px 0 0;font:500 .84rem/1.4 var(--sp-sans);color:var(--sp-error)}
.sp-sug{margin-top:8px;display:inline-block;background:var(--sp-ambar-suave);border:1px solid var(--sp-oro);color:#6B4E0E;border-radius:9px;padding:7px 12px;font:500 .84rem var(--sp-sans);cursor:pointer}
.sp-sug:hover{background:#F6E8BE}
.sp-contador{display:flex;justify-content:space-between;gap:10px;margin:6px 0 0;font-size:.82rem;color:var(--sp-gris2)}
.sp-contador b{font-weight:500}
.sp-contador.is-poco b{color:var(--sp-error)}

/* Adjuntos */
.sp-drop{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:6px;padding:22px 16px;border:2px dashed #BDB19A;border-radius:14px;background:var(--sp-fondo);text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.sp-drop:hover,.sp-drop.is-sobre{border-color:var(--sp-vino);background:#FCF5F2}
.sp-drop svg{width:30px;height:30px;color:var(--sp-vino)}
.sp-drop b{font:500 .96rem var(--sp-sans)}
.sp-drop span{font-size:.82rem;color:var(--sp-gris2)}
.sp-archivos{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:12px 0 0;padding:0}
.sp-arch{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--sp-linea);border-radius:12px;background:#fff;min-width:0}
.sp-arch__vista{flex:none;width:52px;height:52px;border-radius:9px;overflow:hidden;background:var(--sp-fondo2);display:grid;place-items:center;border:1px solid var(--sp-linea2)}
.sp-arch__vista img{width:100%;height:100%;object-fit:cover}
.sp-arch__pdf{font:700 .72rem var(--sp-sans);letter-spacing:.06em;color:var(--sp-error)}
.sp-arch__txt{min-width:0;flex:1}
.sp-arch__txt b{display:block;font:500 .84rem var(--sp-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-arch__txt small{color:var(--sp-gris2);font-size:.74rem}
.sp-arch__x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--sp-linea);background:#fff;color:var(--sp-gris);font-size:1.15rem;line-height:1}
.sp-arch__x:hover{border-color:var(--sp-error);color:var(--sp-error)}

/* Declaración y envío */
.sp-terminos{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border:1.5px solid #E6C8C0;border-left:5px solid var(--sp-vino);border-radius:16px;background:#FCF5F2;cursor:pointer;margin:0 0 14px;transition:all .25s}
.sp-terminos.is-ok{border-color:#B9D6C1;border-left-color:var(--sp-ok-claro);background:var(--sp-ok-suave)}
.sp-terminos input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--sp-ok);flex:0 0 auto}
.sp-terminos strong{font:500 1rem var(--sp-sans)}
.sp-terminos small{display:block;margin-top:3px;color:var(--sp-gris);font-size:.86rem;line-height:1.5}
.sp-alerta{margin:0 0 14px;padding:14px 16px;border-radius:14px;border:1.5px solid #E2A99E;background:#FBE9E5;color:#6F241A;font:500 .94rem/1.5 var(--sp-sans)}
.sp-alerta ul{margin:6px 0 0;padding-left:20px;font-weight:400}
.sp-enviar{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:58px;padding:0 22px;border-radius:15px;border:1px solid var(--sp-vino-hondo);
  background:linear-gradient(180deg,var(--sp-vino-claro),var(--sp-vino));color:#fff;font:500 .92rem var(--sp-sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 16px 30px -14px rgba(90,26,36,.65);transition:transform .2s var(--sp-curva),box-shadow .2s,filter .2s}
.sp-enviar:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06)}
.sp-enviar:disabled{opacity:.7;cursor:wait}
.sp-enviar svg{width:20px;height:20px}
.sp-priv{margin:14px 0 0;text-align:center;font-size:.84rem;color:var(--sp-gris2)}

/* Éxito */
.sp-ok{text-align:center;padding:34px 18px 26px}
.sp-ok__ico{width:70px;height:70px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--sp-ok-suave);color:var(--sp-ok);border:2px solid #B9D6C1}
.sp-ok__ico svg{width:36px;height:36px}
.sp-ok h2{margin:0 0 4px;font:500 2rem var(--sp-serif)}
.sp-ok p{margin:8px auto 0;max-width:540px;color:var(--sp-gris);font-size:1rem}
.sp-ok__et{margin-top:6px;font:500 .78rem var(--sp-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sp-oro-hondo)}
.sp-codigo{display:inline-block;margin:10px 0 4px;padding:12px 26px;border-radius:14px;background:linear-gradient(160deg,var(--sp-vino),var(--sp-vino-hondo));color:#fff;font:600 clamp(1.7rem,6vw,2.7rem)/1 var(--sp-serif);letter-spacing:.08em;border-bottom:4px solid var(--sp-oro);user-select:all}
.sp-ok__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:13px;font:500 .84rem var(--sp-sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1.5px solid var(--sp-vino);background:#fff;color:var(--sp-vino);transition:all .2s var(--sp-curva)}
.sp-btn:hover{background:var(--sp-vino-suave)}
.sp-btn--vino{background:var(--sp-vino);color:#fff;border-color:var(--sp-vino-hondo)}
.sp-btn--vino:hover{background:var(--sp-vino-claro)}
.sp-btn:disabled{opacity:.6;cursor:wait}
.sp-ok__wa{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:14px}
.sp-ok__wa .sp-btn{text-transform:none;letter-spacing:.02em;font-size:.92rem;height:auto;padding:12px 20px;text-align:center}
.sp-ok__wa-nota{margin:0;font-size:.8rem;color:var(--sp-gris2);max-width:460px}
.sp-ok__wa[hidden]{display:none}
.sp-ok__aviso{margin:16px auto 0;max-width:540px;padding:12px 16px;border-radius:12px;background:var(--sp-ambar-suave);border:1px solid #E6CE96;color:#6B4E0E;font-size:.9rem;text-align:left}

/* Contacto */
.sp-contacto{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:980px;margin:18px auto 0;padding:18px 22px;border-radius:16px;border-left:5px solid var(--sp-oro);
  background:linear-gradient(135deg,var(--sp-vino) 0%,var(--sp-vino-hondo) 100%);color:#fff}
.sp-contacto b{display:block;font:500 1.4rem var(--sp-serif);letter-spacing:.01em}
.sp-contacto span{color:rgba(255,255,255,.8);font-size:.9rem}
.sp-contacto a{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:12px;background:var(--sp-oro);color:var(--sp-vino-hondo);font:500 .86rem var(--sp-sans);text-decoration:none}
.sp-contacto a:hover{background:var(--sp-oro-claro)}

.sp-pie{max-width:1040px;margin:0 auto;padding:0 20px 36px;text-align:center;font-size:.8rem;color:var(--sp-gris2)}
.sp-pie a{color:var(--sp-oro-hondo)}
.sp-cargando{padding:34px 20px;text-align:center;color:var(--sp-gris)}
.sp-reintentar{margin-top:12px}

/* ══════════ Seguimiento ══════════ */
.sp-seg{max-width:820px;margin:0 auto}
.sp-seg h1{margin:0 0 6px;font:500 clamp(2rem,4.4vw,2.8rem)/1.08 var(--sp-serif)}
.sp-seg__lead{margin:0 0 20px;color:var(--sp-gris);max-width:58ch}
.sp-busca{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:12px;align-items:end}
.sp-hero{position:relative;overflow:hidden;border-radius:20px;padding:24px 26px;color:#fff;border-bottom:4px solid var(--sp-oro);
  background:radial-gradient(520px 240px at 95% -10%,rgba(196,162,74,.34),transparent 60%),linear-gradient(135deg,var(--sp-vino-claro),var(--sp-vino) 45%,var(--sp-vino-hondo))}
.sp-hero>*{position:relative}
.sp-hero__cod{margin:4px 0 0;font:600 clamp(1.8rem,5vw,2.6rem)/1.05 var(--sp-serif);letter-spacing:.06em}
.sp-hero__meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px;font-size:.92rem;color:rgba(255,255,255,.85)}
.sp-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 11px;border-radius:999px;font:500 .8rem var(--sp-sans);letter-spacing:.04em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff}
.sp-pill i{width:9px;height:9px;border-radius:50%;background:var(--sp-oro-claro)}
.sp-pill--ok i{background:#7FBF93}
.sp-pill--espera i{background:#F0B65A;box-shadow:0 0 0 3px rgba(240,182,90,.3)}
.sp-etapas{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0;padding:0}
.sp-etapas li{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:.84rem;color:var(--sp-gris)}
.sp-etapas li::before{content:"";position:absolute;top:17px;right:50%;width:100%;height:3px;background:#D9D0BC}
.sp-etapas li:first-child::before{display:none}
.sp-etapas li.ok::before,.sp-etapas li.act::before{background:var(--sp-ok-claro)}
.sp-etapas__c{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid #D9D0BC;font:600 1rem var(--sp-serif);color:var(--sp-gris)}
.sp-etapas__c svg{width:18px;height:18px}
.sp-etapas li.ok .sp-etapas__c{background:var(--sp-ok-claro);border-color:var(--sp-ok-claro);color:#fff}
.sp-etapas li.act .sp-etapas__c{border-color:var(--sp-oro);background:var(--sp-ambar-suave);color:var(--sp-ambar);box-shadow:0 0 0 4px rgba(196,162,74,.25)}
.sp-etapas b{font:500 .88rem var(--sp-sans);color:var(--sp-tinta)}
.sp-callout{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:14px 16px;border-radius:14px;border:1px solid #E6CE96;background:var(--sp-ambar-suave);color:#5E4412;font-size:.92rem;line-height:1.5}
.sp-callout--ok{background:var(--sp-ok-suave);border-color:#B9D6C1;color:#2D5A3A}
.sp-callout b{font-weight:500}
.sp-linea{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.sp-ev{display:flex;flex-direction:column;max-width:88%}
.sp-ev__caja{padding:13px 16px;border-radius:16px;border:1px solid var(--sp-linea);background:#fff;box-shadow:var(--sp-sombra)}
.sp-ev__quien{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0 0 5px;font:500 .8rem var(--sp-sans);color:var(--sp-gris)}
.sp-ev__quien time{font-weight:300;color:var(--sp-gris2)}
.sp-ev__texto{margin:0;font-size:.98rem;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}
.sp-ev--equipo{align-self:flex-start}
.sp-ev--equipo .sp-ev__caja{border-left:4px solid var(--sp-oro);background:linear-gradient(180deg,#FFFDF7,#fff)}
.sp-ev--cliente{align-self:flex-end}
.sp-ev--cliente .sp-ev__caja{background:linear-gradient(160deg,var(--sp-vino),var(--sp-vino-hondo));border-color:var(--sp-vino-hondo);color:#fff}
.sp-ev--cliente .sp-ev__quien,.sp-ev--cliente .sp-ev__quien time{color:rgba(255,255,255,.78)}
.sp-ev--sistema{align-self:center;max-width:100%;flex-direction:row;align-items:center;gap:10px;font-size:.84rem;color:var(--sp-gris)}
.sp-ev--sistema span{padding:5px 14px;border-radius:999px;background:var(--sp-fondo2);border:1px solid var(--sp-linea);text-align:center}
.sp-responder{margin-top:18px}
.sp-responder textarea{min-height:104px}
.sp-aviso-ok{margin:10px 0 0;font:500 .9rem var(--sp-sans);color:var(--sp-ok)}
.sp-actualiza{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;font-size:.84rem;color:var(--sp-gris2)}

/* ══════════ Responsivo ══════════ */
@media(max-width:860px){
  .sp-info{grid-template-columns:minmax(0,1fr)}
  .sp-tipos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .sp-main{padding:18px 16px 56px}
  .sp-head{padding:24px 18px 20px}
  .sp-cuerpo{padding:14px}
  .sp-paso{padding:16px 14px 18px}
  .sp-paso h3{font-size:1.38rem}
  .sp-c5,.sp-c6,.sp-c7{grid-column:span 12}
  .sp-in{font-size:16px}
  .sp-busca{grid-template-columns:minmax(0,1fr)}
  .sp-ev{max-width:100%}
  .sp-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  .sp-top__int{padding:10px 14px}
  .sp-nav{flex-wrap:nowrap}
  .sp-nav a{padding:8px 11px;font-size:.82rem}
  .sp-largo{display:none}
  .sp-corto{display:inline}
  .sp-tipos{grid-template-columns:minmax(0,1fr)}
  .sp-tile{min-height:0;flex-direction:row;align-items:center;gap:12px;padding:12px 14px;flex-wrap:wrap}
  .sp-tile__t,.sp-tile__d{flex:1 1 calc(100% - 56px)}
  .sp-tile__ico{flex:none}
  .sp-tile__d{margin-left:52px;margin-top:-4px}
  .sp-circ{flex-basis:40px;width:40px;height:40px}
  .sp-codigo{padding:10px 16px}
  .sp-etapas b{font-size:.76rem}
  .sp-hero{padding:20px 18px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}
