/* =========================================================================
   Tillas Lab · tema
   -------------------------------------------------------------------------
   Un solo tema, derivado del sello de marca. La paleta y las tipografias
   salen de Logo/Tillas-Lab-Logo/MARCA.md y no se inventan aca.

     Crema    #F2ECE1   fondo, relleno de las letras del logo
     Tinta    #131417   texto, contornos, superficies fuertes
     Naranja  #FF5A2D   unico color de acento

   Lo comparten las cuatro paginas: index, pedido, ficha y taller. Si tocas un
   color, tocalo aca y cambia en todas.

   Historia: hasta el 16/08/2026 el sitio tenia tres pieles intercambiables
   (comun, street y grafity) para que el dueno eligiera. Eligio street. Este
   tema es esa piel, repintada con los valores exactos del sello.
   ========================================================================= */

:root{
  /* ---------- Tipografia ---------- */
  --font:"Archivo",system-ui,sans-serif;
  --font-title:"Archivo Black","Archivo",system-ui,sans-serif;
  --font-logo:"Sigmar One",cursive;

  /* ---------- Paleta de marca ---------- */
  --crema:#F2ECE1;
  --tinta:#131417;
  --naranja:#FF5A2D;

  /* ---------- Superficies, de la mas honda a la mas alta ---------- */
  --bg:#F2ECE1;
  --paper:#FAF7F0;
  --card:#FFFFFF;
  --band:#EDE6D9;
  --strong:#131417;

  /* ---------- Texto ---------- */
  --ink:#131417;
  --soft:#5C5648;
  --faint:#8B8579;
  --on-strong:#F2ECE1;
  --on-strong-soft:#C9C4B8;

  /* ---------- Bordes ---------- */
  --hairline:#E3DCCD;
  --hairline-2:#CFC7B5;

  /* ---------- Acento ---------- */
  --accent:#FF5A2D;
  /* tinta sobre naranja da 5.92 de contraste; el blanco daba 3.11 y no pasa AA */
  --on-accent:#131417;
  --accent-soft:rgba(255,90,45,.16);
  /* el naranja de marca sobre fondo claro da 2.65 y es ilegible como texto.
     Mismo tono y misma saturacion, bajado de luminosidad hasta pasar AA:
     4.55 sobre crema y 5.35 sobre blanco. Solo para texto, nunca para relleno. */
  --accent-ink:#CC2C00;
  --wa:#1da851;

  /* ---------- Geometria: esquinas rectas ---------- */
  --radius:0px;
  --radius-lg:0px;
  --pill:0px;

  --title-transform:uppercase;
  --title-settings:normal;
  --title-spacing:.005em;
  --title-height:.98;

  --btn-bd:2px solid var(--ink);
  --btn-sh:3px 3px 0 var(--accent);
  --btn-sh-hover:5px 5px 0 var(--accent);

  --tex:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 2px,transparent 2px 6px);
  --shadow-card:6px 6px 0 rgba(19,20,23,.10);
  --shadow-deep:10px 10px 0 rgba(19,20,23,.16);
  --topbar-bg:rgba(242,236,225,.9);

  --pad-x:44px;
}

/* =========================================================================
   Base
   ========================================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit;font-size:15px;color:var(--ink)}
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

h1,h2,h3,h4{
  font-family:var(--font-title);
  font-variation-settings:var(--title-settings);
  text-transform:var(--title-transform);
  letter-spacing:var(--title-spacing);
  line-height:var(--title-height);
  /* Archivo Black trae un solo peso: pedirle 700 lo deforma donde se simula */
  font-weight:400;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad-x)}
.narrow{max-width:560px;margin:0 auto}
.row{display:flex;flex-wrap:wrap}
.col{display:flex;flex-direction:column}
.num{font-variant-numeric:tabular-nums}

/* rótulo de sección: la volanta chica del afiche */
.lbl{
  font-family:var(--font-title);
  font-size:.74rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);
  display:inline-block;
}
/* título suelto, para las pantallas del flujo */
.h{
  font-family:var(--font-title);
  font-variation-settings:var(--title-settings);
  text-transform:var(--title-transform);
  letter-spacing:var(--title-spacing);
  line-height:var(--title-height);
  font-weight:400;
}
.script{font-family:var(--font-title);font-weight:400;text-transform:uppercase;letter-spacing:.03em}
.label{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.label-dark{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-strong-soft)}

/* =========================================================================
   Logo
   -------------------------------------------------------------------------
   Hay una sola marca: el sello. Donde entra completo va como imagen (.sello).
   Donde no entra —la barra, el pie— va el lockup horizontal: el sello chico
   más la palabra al lado.

   La palabra NO imita el arco del sello. Va en Sigmar One, tinta plena, recta
   y sin contornos, para que acompañe al sello en vez de competir con él. Dos
   versiones parecidas pero no iguales del mismo wordmark se leen como un
   error, y es exactamente lo que había antes.
   ========================================================================= */

/* el sello como imagen */
.sello{display:block;height:auto}
.sello-xl{width:clamp(200px,26vw,300px)}

/* lockup horizontal: sello + palabra */
.lk{
  display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;color:inherit;line-height:1;
}
.lk .marca{flex:none;display:block;height:auto}
.lk .palabra{
  font-family:var(--font-logo);font-weight:400;line-height:1;
  text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink);
  white-space:nowrap;
}
/* sobre superficie tinta la palabra va en crema */
footer .lk .palabra,
.proto .lk .palabra,
.cta-final .lk .palabra,
.topbar-app .lk .palabra,
.lk.sobre-tinta .palabra{color:var(--on-strong)}

.lk-sm{gap:10px}
.lk-sm .marca{width:38px}
.lk-sm .palabra{font-size:19px}

.lk-md{gap:13px}
.lk-md .marca{width:52px}
.lk-md .palabra{font-size:26px}

@media (max-width:600px){
  .lk-sm .marca{width:32px}
  .lk-sm .palabra{font-size:16px}
}

/* la bajada de marca. Son las mismas palabras que el arco inferior del sello,
   así que van en la misma fuente: Archivo Black, mayúscula */
.tagline{
  font-family:var(--font-title);font-size:.86rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);display:inline-block;
}

/* =========================================================================
   Botones
   ========================================================================= */
.btn,.btn-dark,.btn-acento,.btn-wa,.btn-ghost,.btn-line,.btn-line-dark{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font);font-weight:700;font-size:.95rem;
  border-radius:var(--pill);padding:.8em 1.6em;
  border:var(--btn-bd);cursor:pointer;text-align:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease,
             box-shadow .15s ease,transform .15s ease;
}
.btn:active,.btn-dark:active,.btn-acento:active,.btn-wa:active{transform:translate(1px,1px)}
.btn:active{transform:translate(1px,1px)}
.btn-sm{padding:.6em 1.2em;font-size:.88rem}

.btn-dark,.btn-acento{
  background:var(--accent);color:var(--on-accent);font-weight:800;
  box-shadow:var(--btn-sh);
}
.btn-dark:hover,.btn-acento:hover{box-shadow:var(--btn-sh-hover)}
.btn-dark:disabled,.btn-acento:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* El botón de WhatsApp lleva sombra en tinta y no en naranja como el resto.
   El verde es un color de marca ajeno a la paleta y pegado al naranja vibra;
   además así los botones de WhatsApp se ven iguales en toda la web, estén
   sobre el fondo claro o sobre los bloques oscuros. */
.btn-wa{background:var(--wa);color:#fff;font-weight:800;box-shadow:3px 3px 0 var(--ink)}
.btn-wa:hover{background:#22bd5c;box-shadow:5px 5px 0 var(--ink)}

.btn-ghost,.btn-line{
  border:2px solid var(--hairline-2);color:var(--ink);background:transparent;
  box-shadow:none;
}
.btn-ghost:hover,.btn-line:hover{border-color:var(--accent);color:var(--accent-ink)}

.btn-line-dark{
  border:2px solid rgba(255,255,255,.35);color:var(--on-strong);
  background:transparent;box-shadow:none;
}
.btn-line-dark:hover{border-color:var(--accent);color:var(--accent)}

/* =========================================================================
   Superficies
   ========================================================================= */
.sheet{
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
}
.card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius)}
.card-dark{
  background:var(--strong);border:1px solid var(--hairline-2);
  border-radius:var(--radius);padding:18px;color:var(--on-strong);
}
.wall{background:var(--strong);background-image:var(--tex)}
/* fondo de las pantallas del flujo: papel crema con la rasante de cemento */
.pagina{background:var(--bg);background-image:var(--tex)}
.chip{
  font-size:.85rem;font-weight:600;color:var(--ink);
  background:var(--card);border:1px solid var(--hairline-2);
  border-radius:var(--pill);padding:.42em 1em;
}
.tag{
  display:inline-block;font-family:var(--font-title);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent);color:var(--on-accent);
  padding:.4em .8em;
  border:2px solid var(--ink);transform:rotate(-2deg);
}
.tag{border-color:var(--ink)}

/* =========================================================================
   Formulario
   ========================================================================= */
.field{display:flex;flex-direction:column;gap:7px}
.field input,.field textarea,.field select{
  border:1px solid var(--hairline-2);border-radius:calc(var(--radius) * .75);
  padding:13px 14px;background:var(--card);font-weight:600;width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border:2px solid var(--accent);padding:12px 13px;
}
.opt{
  border:1px solid var(--hairline);background:var(--card);color:var(--ink);
  border-radius:var(--radius);padding:16px 18px;
  display:flex;flex-direction:column;gap:6px;
  cursor:pointer;text-align:left;width:100%;
  transition:border-color .15s ease,background .15s ease;
}
.opt.sel{border:3px solid var(--accent);background:var(--strong);color:var(--on-strong);padding:14px 16px}
.opt.sel .desc{color:var(--on-strong-soft)}
.opt.sel .p{color:var(--accent)}
.opt .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.opt .name{font-size:1.06rem;font-weight:700}
.opt .p{font-size:1.12rem;font-weight:800;font-variant-numeric:tabular-nums}
.opt .desc{font-size:.78rem;color:var(--soft);line-height:1.5}

.pill{
  padding:9px 14px;border-radius:var(--pill);
  border:1px solid var(--hairline-2);background:var(--card);
  font-size:.78rem;font-weight:600;color:var(--soft);cursor:pointer;
}
.pill.sel{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}

.bar{height:5px;flex:1;background:var(--hairline)}
.bar.on{background:var(--accent)}
.footbar{
  padding:20px 22px;border-top:1px solid var(--hairline);
  background:var(--paper);display:flex;align-items:center;gap:12px;
}

/* =========================================================================
   Barra superior de las páginas del flujo
   ========================================================================= */
.topbar-app{background:var(--strong)}
.topbar-app .inner{
  max-width:1080px;margin:0 auto;padding:14px var(--pad-x);
  display:flex;align-items:center;gap:24px;
}
.topbar-app nav{display:flex;gap:22px;margin-left:auto}
.topbar-app nav a{font-size:.88rem;font-weight:500;color:var(--on-strong-soft)}
.topbar-app nav a:hover{color:var(--on-strong)}
.topbar-app nav a.on{
  color:var(--on-strong);font-weight:600;
  border-bottom:2px solid var(--accent);padding-bottom:2px;
}

/* =========================================================================
   Línea de tiempo del taller
   ========================================================================= */
.timeline{display:flex;flex-direction:column}
.tstep{display:flex;gap:14px}
.tstep .dot{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--hairline-2);flex:none;background:transparent;
}
.tstep.done .dot{background:var(--accent);border-color:var(--strong)}
.tstep.now .dot{background:var(--accent);border-color:var(--strong);outline:4px solid var(--accent-soft)}
.tstep .line{width:3px;flex:1;min-height:30px;background:var(--hairline-2)}
.tstep.done .line{background:var(--accent)}
.tstep .txt{padding-bottom:20px;display:flex;flex-direction:column;gap:3px}
.tstep .txt b{font-size:.9rem;color:var(--on-strong-soft);font-weight:600}
.tstep.done .txt b{color:var(--on-strong);font-weight:700}
.tstep.now .txt b{
  color:var(--accent);font-family:var(--font-title);font-weight:400;
  font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;
}
.tstep .txt em{font-style:normal;font-size:.75rem;color:var(--on-strong-soft);opacity:.75}

/* =========================================================================
   Tabla de fichas del taller
   ========================================================================= */
table.fichas{width:100%;border-collapse:separate;border-spacing:0 8px}
table.fichas th{
  font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:0 14px;
}
table.fichas td{
  background:var(--card);padding:14px;font-size:.82rem;
  color:var(--soft);vertical-align:middle;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
table.fichas tr td:first-child{border-radius:var(--radius) 0 0 var(--radius);border-left:1px solid var(--hairline)}
table.fichas tr td:last-child{border-radius:0 var(--radius) var(--radius) 0;text-align:right;border-right:1px solid var(--hairline)}
.state{padding:6px 11px;border-radius:var(--pill);font-size:.69rem;font-weight:700;white-space:nowrap}
.state.taller{background:var(--accent-soft);color:var(--accent-ink)}
.state.lista{background:rgba(29,168,81,.18);color:#37bd6a}
.state.entregada{background:var(--band);color:var(--faint)}
.empty{padding:40px;text-align:center;color:var(--faint);font-size:.88rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--pad-x:36px}
}
@media (max-width:640px){
  :root{--pad-x:26px}
}