/* Lo mínimo para que se lea. La máquina no es un producto para clientas: es un
   taller. Se invierte en que los datos se distingan, no en decorarlo. */
:root{--tinta:#1b1b1f;--suave:#6b6b76;--linea:#e3e3e8;--fondo:#faf9f7;--acento:#8a6a3b;--mal:#a3302a;--bien:#2f6b3a}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:900px;margin:0 auto;padding:24px 18px 64px}
h1{font-size:1.5rem;margin:0 0 4px}h2{font-size:1.1rem;margin:24px 0 8px}
a{color:var(--acento)}
.barra{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;background:#fff;border-bottom:1px solid var(--linea)}
.barra b{font-weight:600}
.nota{color:var(--suave);font-size:.9rem;margin:4px 0}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:16px;margin:12px 0}
.lista{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.lista a{display:block;background:#fff;border:1px solid var(--linea);border-radius:10px;padding:14px 16px;text-decoration:none;color:inherit}
.lista a:hover{border-color:var(--acento)}
label{display:block;margin:10px 0}
label span{display:block;font-size:.85rem;color:var(--suave);margin-bottom:3px}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid var(--linea);border-radius:8px;font:inherit;background:#fff;color:inherit}
textarea{min-height:80px;resize:vertical}
button{font:inherit;padding:9px 16px;border:1px solid var(--acento);background:var(--acento);color:#fff;border-radius:8px;cursor:pointer}
button.suave{background:#fff;color:var(--acento)}
.aviso{padding:10px 12px;border-radius:8px;margin:12px 0;font-size:.95rem}
.aviso.bien{background:#eef6ef;color:var(--bien);border:1px solid #cfe3d2}
.aviso.mal{background:#fbeeed;color:var(--mal);border:1px solid #f0d2cf}
.aviso.ojo{background:#fdf6e7;color:#7a5a12;border:1px solid #efe0bd}
.falta{color:var(--mal);font-weight:600}
.dinero{border:1px solid #efe0bd;background:#fdf6e7;border-radius:10px;padding:14px 16px;margin:16px 0}
.dinero h2{margin-top:0}
img.muestra{max-width:100%;border:1px solid var(--linea);border-radius:8px;background:#fff}

/* ── Ficha del negocio ─────────────────────────────────────────────────── */
/* La tabla del horario: siete renglones que se llenan en el teléfono del
   mostrador, así que las casillas de hora van cómodas y la de «abierto» es
   grande de tocar (≥44px de blanco alrededor, que es el dedo, no el cursor). */
table.horario{width:100%;border-collapse:collapse;margin:8px 0}
table.horario th{text-align:left;font-size:.8rem;color:var(--suave);font-weight:600;padding:4px 6px}
table.horario td{padding:4px 6px;vertical-align:middle}
table.horario td:first-child{white-space:nowrap;font-size:.92rem}
table.horario input[type=checkbox]{width:22px;height:22px;margin:11px 0}
table.horario input[type=time]{min-width:7.5rem}
/* En pantalla chica la tabla se sale antes que encogerse: una casilla de hora
   apretada se llena mal, y un horario mal llenado sale en un anuncio. */
.tabla-ancha{overflow-x:auto}
.sub{border-top:1px solid var(--linea);padding-top:12px;margin-top:14px}
.sub:first-of-type{border-top:0;padding-top:0;margin-top:0}
.sub h3{margin:0 0 6px;font-size:1rem}
.sub input[type=file]{padding:6px 0;border:0;background:none}
code{background:#f2f0ed;padding:1px 5px;border-radius:4px;font-size:.88em}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL — la pantalla de entrar
   ═══════════════════════════════════════════════════════════════════════════
   El resto de esta máquina es un taller y se ve como un taller: claro, denso,
   sin adorno. Esta pantalla NO: es lo primero que ve alguien a quien le vamos a
   cobrar por llevarle la publicidad, y una puerta de aluminio no vende una casa.
   Ex 25:9 — «conforme al diseño»: la belleza del tabernáculo era exacta, no
   arbitraria. Aquí cada pieza trabaja.

   LOS COLORES NO SON MÍOS: salen de la marca del negocio (`/marca.css`), y el
   servidor los oscurece si hacen falta para que el texto claro se lea. El oro
   es el acento de la MÁQUINA, no de ninguna clienta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Auto-hospedadas, las mismas que ya usa el sitio de Veloura desde julio
   (Google Fonts, licencia OFL). `swap` para que el texto se vea desde el primer
   cuadro: una pantalla de entrar en blanco esperando una fuente se siente rota. */
@font-face{font-family:'Cormorant';src:url('/e/fuentes/cormorant-garamond.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('/e/fuentes/jost.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

body.portal{
  /* EL RESPALDO VA EN CADA `var(...)`, NO REDECLARANDO LA VARIABLE AQUÍ.
     Redeclararla parece una red de seguridad y es lo contrario: una propiedad
     personalizada puesta en `body` **le gana** a la que `:root` recibió de
     /marca.css, porque está más cerca del elemento. El 14-sep eso dejó la
     pantalla de Veloura en el ciruela por omisión en vez de su azul petróleo —
     y no falló nada: se veía bien, sólo que del color equivocado. */
  --crema:#F3EEE7;
  margin:0;
  min-height:100svh;              /* svh y no vh: en el teléfono, vh miente y
                                     deja la caja bajo la barra del navegador */
  display:grid;place-items:center;
  padding:28px 20px;
  background:var(--marca,#161318);
  color:var(--crema);
  font-family:'Jost',system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:hidden;
}

/* ── El aura ──────────────────────────────────────────────────────────────
   Dos manchas de luz muy grandes y muy difusas. Dan profundidad sin dibujar
   nada: el ojo lee «hay espacio» antes de leer una palabra.
   `filter:blur` sobre un radial y no una imagen — cero bytes que bajar. */
.aura{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.aura span{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.55}
.aura span:first-child{
  width:62vmax;height:62vmax;left:-18vmax;top:-24vmax;
  background:radial-gradient(circle,var(--marca-aura,#443c48) 0%,transparent 68%);
  animation:respira 28s ease-in-out infinite}
.aura span:last-child{
  width:52vmax;height:52vmax;right:-16vmax;bottom:-20vmax;
  background:radial-gradient(circle,var(--oro,#C8A96A) 0%,transparent 66%);
  opacity:.16;
  animation:respira 34s ease-in-out infinite reverse}
/* VEINTIOCHO SEGUNDOS, Y EL RECORRIDO ES DIMINUTO. Hoy mismo (14-sep) el video
   de la portada de Veloura tuvo que rehacerse porque mareaba: lo que marea no
   es el largo, es la velocidad. Aquí el movimiento tiene que estar por debajo
   del umbral de la atención — se siente, no se ve. */
@keyframes respira{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(2%,-2%,0) scale(1.07)}
}
/* Y se apaga ENTERO para quien pidió menos movimiento. No se ralentiza: se
   apaga. Media medida no sirve a quien se marea. */
@media (prefers-reduced-motion:reduce){
  .aura span{animation:none}
}

.portal-in{position:relative;z-index:1;width:100%;max-width:392px;text-align:center}

/* ── La marca ─────────────────────────────────────────────────────────── */
.portal-marca{margin-bottom:26px}
.portal-logo{
  max-width:190px;max-height:84px;width:auto;height:auto;
  margin:0 auto 18px;display:block;
  /* Sombra suavísima: despega el logo del fondo sin que se note que hay sombra. */
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}
.portal-inicial{
  display:grid;place-items:center;width:66px;height:66px;margin:0 auto 18px;
  border:1px solid color-mix(in srgb,var(--oro,#C8A96A) 55%,transparent);
  border-radius:50%;
  font-family:'Cormorant',Georgia,serif;font-size:2rem;color:var(--oro,#C8A96A)}
.portal-marca h1{
  font-family:'Cormorant',Georgia,serif;
  font-weight:300;
  /* clamp para que el nombre largo de La Joya no se parta en el teléfono */
  font-size:clamp(1.85rem,7.4vw,2.6rem);
  line-height:1.1;letter-spacing:.012em;margin:0;color:var(--crema)}
.filete{
  width:52px;height:1px;margin:15px auto 12px;
  background:linear-gradient(90deg,transparent,var(--oro,#C8A96A),transparent)}
.portal-giro{
  margin:0;font-size:.71rem;letter-spacing:.34em;text-transform:uppercase;
  /* pasaba a 62% (4.83) pero con margen de nada; a 72% son 5.91. */
  color:color-mix(in srgb,var(--crema) 72%,transparent)}

/* ── La caja ──────────────────────────────────────────────────────────────
   Vidrio: un velo claro sobre el fondo, no una tarjeta blanca. Una tarjeta
   blanca encima de esto apagaría de golpe toda la profundidad de arriba. */
.portal-caja{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.115);
  border-radius:16px;
  padding:22px 20px 20px;
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
  box-shadow:0 20px 56px rgba(0,0,0,.34);
  text-align:left}

.campo{display:block;margin:0 0 14px}
.campo span{
  display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  /* 72% Y NO 58%, QUE ES DONDE LO DEJÉ AL PRINCIPIO. A 58% daba 3.95 sobre el
     azul de Veloura, por debajo del 4.5 que pide AA — el error clásico de
     apagar el texto secundario «porque se ve más fino». Calculado sobre las dos
     marcas: a 72% el peor caso da 5.16. */
  color:color-mix(in srgb,var(--crema) 72%,transparent);margin-bottom:7px}
.portal-caja input{
  width:100%;
  /* 15px y no menos: por debajo de 16px, iOS hace zoom solo al tocar el campo
     y la pantalla salta. Con el padding, el alto queda por encima de los 44px
     que pide un dedo. */
  font:15px/1.4 'Jost',system-ui,sans-serif;
  padding:13px 14px;
  color:var(--crema);
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.portal-caja input::placeholder{color:rgba(255,255,255,.26)}
.portal-caja input:hover{border-color:rgba(255,255,255,.24)}
/* El foco se VE. Un anillo de oro, no el azul del navegador: quien navega con
   teclado tiene que saber dónde está parado, y es lo mismo que pide la a11y. */
.portal-caja input:focus{
  outline:none;
  border-color:var(--oro,#C8A96A);
  background:rgba(0,0,0,.32);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--oro,#C8A96A) 22%,transparent)}

.portal-btn{
  width:100%;margin-top:6px;
  font:600 .88rem/1 'Jost',system-ui,sans-serif;
  letter-spacing:.17em;text-transform:uppercase;
  padding:15px 18px;border:0;border-radius:10px;cursor:pointer;
  color:#20180C;
  background:linear-gradient(135deg,var(--oro,#C8A96A),color-mix(in srgb,var(--oro,#C8A96A) 62%,#fff));
  box-shadow:0 8px 22px color-mix(in srgb,var(--oro,#C8A96A) 26%,transparent);
  transition:transform .16s ease,box-shadow .22s ease,filter .16s ease}
.portal-btn:hover{transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 12px 30px color-mix(in srgb,var(--oro,#C8A96A) 34%,transparent)}
.portal-btn:active{transform:translateY(0)}
.portal-btn:focus-visible{outline:3px solid var(--crema);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .portal-btn,.portal-caja input{transition:none}
  .portal-btn:hover{transform:none}
}

.portal-mal{
  margin:0 0 14px;padding:11px 13px;border-radius:9px;font-size:.87rem;
  background:rgba(190,70,60,.17);
  border:1px solid rgba(220,110,100,.4);
  color:#FFD9D4}

.portal-pie{
  margin:18px 0 0;font-size:.76rem;
  /* 68% y no 46%: a 46% daba 3.39 sobre Veloura y 4.17 sobre La Joya, las dos
     por debajo de AA. A 68% el peor caso da 5.45. */
  color:color-mix(in srgb,var(--crema) 68%,transparent)}

/* En pantallas bajas —un teléfono acostado— el aire de arriba se recorta antes
   que la caja, para que el botón nunca quede debajo del doblez. */
@media (max-height:620px){
  body.portal{padding-block:16px}
  .portal-logo{max-height:56px;margin-bottom:12px}
  .portal-marca{margin-bottom:18px}
  .filete{margin:10px auto 8px}
}

/* El nombre sigue estando para quien navega con lector de pantalla y para el
   buscador — se esconde a la vista, NO se quita. `clip-path` y no
   `display:none`, que sí lo sacaría del árbol de accesibilidad. */
.solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.portal-sello{
  margin:0;font-family:'Jost',system-ui,sans-serif;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--crema) 72%,transparent)}

/* ── Clases que reemplazan estilos inline ──────────────────────────────────
   NO ES ORDEN, ES QUE LOS INLINE NO FUNCIONABAN. Esta máquina manda
   `style-src 'self'` sin `unsafe-inline` desde el primer día (main.go), así que
   cada `style="…"` de las plantillas lo estaba BLOQUEANDO el navegador en
   silencio: la página cargaba, la regla no se aplicaba, y nadie lo reportaba
   porque nada «falla» — sólo se ve un poco peor. Comprobado con navegador el
   14-sep: cuatro violaciones por pantalla. `altar_ficha §P4c` lo caza ahora. */
.barra-nombre{text-decoration:none;color:inherit}
.alarma{color:var(--mal)}
.sinmargen{margin:0}
.pega{margin:8px 0 0}
.lista-sangrada{margin:6px 0 0 18px}
.logo-vista{max-height:64px;max-width:240px}
/* Facebook e Instagram (→ meta.html): la liga que se ve como botón (conectar
   lleva a Facebook, así que es una liga y no un formulario) y cada página a
   escoger en su propio renglón tocable. */
a.boton{display:inline-block;padding:9px 16px;border:1px solid var(--acento);background:var(--acento);color:#fff;border-radius:8px;text-decoration:none}
label.opcion{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #eee}

/* ═══════════════════════════════════════════════════════════════════════════
   TALLER — la máquina por dentro (3-oct-2026)
   ═══════════════════════════════════════════════════════════════════════════
   Isaac: «hazme un poco más bonita la máquina… está horrible». La pantalla de
   entrar ya vestía la marca y por dentro todo era gris de formulario. Ahora el
   interior usa las MISMAS piezas: el color de la marca de cada negocio en la
   barra (`/marca.css`, ya oscurecido para que el texto claro se lea), las
   letras del portal (Cormorant para títulos, Jost para todo lo demás) y el oro
   de la máquina como acento. Cero imágenes, cero guiones: sólo esta hoja. */
body.taller{
  --crema:#F3EEE7;
  --papel:#F6F2EC;
  --borde:#E7DFD4;
  background:var(--papel);
  font-family:'Jost',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;color:#1f1b22}
.taller main{max-width:960px;padding:28px 20px 72px}
.taller h1{font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:clamp(1.8rem,4.6vw,2.4rem);
  line-height:1.12;letter-spacing:.005em;margin:6px 0 6px;color:var(--marca,#161318)}
.taller h2{font-family:'Cormorant',Georgia,serif;font-weight:600;font-size:1.45rem;line-height:1.2;margin:4px 0 10px;
  color:var(--marca,#161318)}
.taller a{color:color-mix(in srgb,var(--marca,#161318) 85%,var(--oro,#C8A96A))}
.taller .nota{color:#6b6470}

/* ── La barra ─────────────────────────────────────────────────────────── */
.taller .barra{display:block;position:sticky;top:0;z-index:10;padding:0;border:0;
  background:linear-gradient(120deg,var(--marca,#161318),color-mix(in srgb,var(--marca,#161318) 78%,var(--marca-aura,#443c48)));
  color:var(--crema);box-shadow:0 6px 22px rgba(20,14,24,.18)}
.barra-in{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.barra-marca{display:flex;flex-direction:column;text-decoration:none;color:var(--crema)!important;line-height:1.05;margin-right:auto}
.barra-nombre{font-family:'Cormorant',Georgia,serif;font-size:1.4rem;font-weight:500;letter-spacing:.01em}
.barra-sub{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--oro,#C8A96A);margin-top:4px}
.barra-nav{display:flex;gap:4px;flex-wrap:wrap}
.barra-nav a{color:color-mix(in srgb,var(--crema) 82%,transparent)!important;text-decoration:none;font-size:.92rem;
  padding:8px 12px;border-radius:999px;transition:background .15s ease,color .15s ease}
.barra-nav a:hover{background:rgba(255,255,255,.09);color:var(--crema)!important}
.barra-nav a.on{background:rgba(255,255,255,.13);color:var(--crema)!important;
  box-shadow:inset 0 -2px 0 var(--oro,#C8A96A)}
.barra-nav a:focus-visible,.barra-salir:focus-visible{outline:2px solid var(--oro,#C8A96A);outline-offset:2px}
.barra-yo{display:flex;align-items:center;gap:10px;font-size:.85rem}
.barra-quien{color:color-mix(in srgb,var(--crema) 75%,transparent)}
.chip{display:inline-block;font-size:.72rem;letter-spacing:.04em;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.1);color:color-mix(in srgb,var(--crema) 85%,transparent);border:1px solid rgba(255,255,255,.14)}
.chip-alarma{background:#7b231d;color:#fff;border-color:#a3302a}
.taller button.barra-salir{background:transparent;color:var(--crema);border:1px solid rgba(255,255,255,.35);
  padding:6px 14px;border-radius:999px;font-size:.85rem;box-shadow:none;text-transform:none;letter-spacing:0}
.taller button.barra-salir:hover{background:rgba(255,255,255,.1)}
/* En el teléfono la barra se acomoda en dos pisos y el menú se desliza de lado
   en vez de amontonarse: siete palabras apiladas no se tocan bien con el dedo. */
@media (max-width:760px){
  .barra-in{gap:10px;padding:10px 14px}
  .barra-nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -4px}
  .barra-nav::-webkit-scrollbar{display:none}
  .barra-nav a{white-space:nowrap}
  .barra-quien{display:none}
}

/* ── Tarjetas, avisos, formularios ───────────────────────────────────── */
.taller .tarjeta,.taller .dinero{background:#fff;border:1px solid var(--borde);border-radius:18px;padding:22px 22px 20px;
  margin:18px 0;box-shadow:0 1px 2px rgba(30,20,40,.04),0 10px 30px rgba(30,20,40,.05)}
.taller .dinero{background:linear-gradient(180deg,#fffaf0,#fff);border-color:#efe2c4}
.taller .aviso{border-radius:12px;padding:12px 14px;border-width:0 0 0 4px;border-style:solid}
.taller .aviso.bien{background:#eef6f0;border-color:#3f8a52}
.taller .aviso.mal{background:#fbefee;border-color:#b23a32}
.taller .aviso.ojo{background:#fdf5e4;border-color:var(--oro,#C8A96A)}
.taller label span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#7a7180;margin-bottom:6px}
.taller input,.taller select,.taller textarea{border:1px solid var(--borde);border-radius:12px;padding:11px 13px;background:#fffdfa;
  transition:border-color .15s ease,box-shadow .15s ease}
.taller input:focus,.taller select:focus,.taller textarea:focus{outline:none;border-color:var(--oro,#C8A96A);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--oro,#C8A96A) 24%,transparent)}
.taller button,.taller a.boton{font:600 .8rem/1 'Jost',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 20px;border-radius:12px;border:0;cursor:pointer;color:var(--crema);text-decoration:none;
  background:var(--marca,#161318);box-shadow:0 6px 16px color-mix(in srgb,var(--marca,#161318) 25%,transparent);
  transition:transform .15s ease,box-shadow .2s ease,filter .15s ease}
.taller button:hover,.taller a.boton:hover{transform:translateY(-1px);filter:brightness(1.08)}
.taller button.suave{background:#fff;color:var(--marca,#161318);border:1px solid var(--borde);box-shadow:none}
.taller a.boton{display:inline-block;color:var(--crema)!important;
  background:linear-gradient(135deg,var(--oro,#C8A96A),color-mix(in srgb,var(--oro,#C8A96A) 62%,#fff));color:#20180C!important}
@media (prefers-reduced-motion:reduce){.taller button,.taller a.boton,.barra-nav a{transition:none}
  .taller button:hover,.taller a.boton:hover{transform:none}}
.taller .lista a{border-radius:14px;border-color:var(--borde);transition:border-color .15s ease,transform .15s ease}
.taller .lista a:hover{transform:translateY(-1px)}
.taller code{background:#f3eee6;border-radius:6px}
.taller label.opcion{border:1px solid var(--borde);border-radius:12px;padding:12px 14px;margin:8px 0;background:#fffdfa;cursor:pointer}
.taller label.opcion input{width:auto}

/* ── La revisión de Meta: cada prueba es un renglón con su sello ──────── */
.revision{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.revision > li{border:1px solid var(--borde);border-radius:14px;padding:14px 16px;background:#fffdfa}
.revision .rev-cab{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.sello{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.8rem;font-weight:700;flex:none}
.sello.si{background:#e3f1e6;color:#2f6b3a}
.sello.no{background:#f8e3e1;color:#a3302a}
.rev-que{font-weight:600}
.rev-det{color:#6b6470;font-size:.92rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.chips li{font-size:.78rem;padding:4px 10px;border-radius:999px;background:#f3eee6;color:#4a4350}
.rev-renglones{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.rev-renglones li{font-size:.92rem;padding:8px 10px;border-radius:10px;background:#faf6f0}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.cifra{background:#faf6f0;border-radius:12px;padding:12px 14px}
.cifra b{display:block;font-family:'Cormorant',Georgia,serif;font-size:1.9rem;line-height:1;color:var(--marca,#161318)}
.cifra span{font-size:.78rem;color:#6b6470}
/* Cormorant dibuja los números «a la antigua» (unos suben, otros bajan): en
   una cifra grande se lee chueco. Rectos y de ancho parejo donde hay números. */
.taller h1,.taller h2,.cifra b,.barra-nombre{font-variant-numeric:lining-nums tabular-nums}
/* El logo CLARO es para fondos oscuros: enseñado sobre blanco no se veía (la
   versión clara de Veloura salía casi invisible). Cada versión se enseña sobre
   el fondo para el que se hizo. */
.logo-fondo{display:inline-block;padding:14px 18px;border-radius:12px;margin:8px 0}
.logo-fondo-claro{background:var(--marca,#161318)}
.logo-fondo-oscuro{background:#fff;border:1px solid var(--borde,#E7DFD4)}
/* ── El tablero de Inicio ─────────────────────────────────────────────── */
.tablero{margin:6px 0 10px}
.tablero-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tablero-cab h2{margin:0}
.filtro{display:flex;gap:4px;padding:4px;background:#fff;border:1px solid var(--borde,#E7DFD4);border-radius:999px;
  overflow-x:auto;scrollbar-width:none;max-width:100%}
.filtro::-webkit-scrollbar{display:none}
.filtro a{white-space:nowrap;text-decoration:none;font-size:.86rem;padding:7px 13px;border-radius:999px;color:#4a4350!important}
.filtro a:hover{background:#f3eee6}
.filtro a.on{background:var(--marca,#161318);color:var(--crema,#F3EEE7)!important}
.filtro a:focus-visible{outline:2px solid var(--oro,#C8A96A);outline-offset:2px}
.bloque h3{font-family:'Cormorant',Georgia,serif;font-weight:600;font-size:1.35rem;margin:0 0 4px;color:var(--marca,#161318)}
.cifra{position:relative}
.cifra small{display:block;font-size:.72rem;color:#8a8290;margin-top:4px;line-height:1.3}
.cambio{position:absolute;top:10px;right:10px;font-style:normal;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;background:#eee8df;color:#5c5560}
.cambio.sube{background:#e3f1e6;color:#2f6b3a}
.cambio.baja{background:#f8e3e1;color:#a3302a}
.actualizar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 18px}
.bloque-salon .cifras{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.bloque-salon .cifras{grid-template-columns:repeat(2,1fr)}}

/* ── CONSTRUCTOR DE ANUNCIOS (3-oct-2026) ─────────────────────────────────
   Sin JavaScript: pasos como ligas, botones grandes para la tableta (≥ 44 px),
   foco visible. Los colores salen de las mismas variables de la barra. */
.tipos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:12px 0 24px}
.tipo-tarjeta{background:#fff;border:1px solid var(--borde,#E7DFD4);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;margin:0}
.tipo-tarjeta h3{margin:0;font-size:1.05rem}
.tipo-botones{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.taller .tipo-botones button{min-height:44px}
.anuncios-lista{list-style:none;padding:0;margin:8px 0 24px;display:grid;gap:8px}
.anuncios-lista a{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--borde,#E7DFD4);border-radius:12px;text-decoration:none;color:inherit}
.anuncios-lista a:hover{border-color:var(--oro,#C8A96A)}
.anuncio-frase{font-style:italic}
.sello-ok{color:var(--bien);font-weight:600}
.pasos{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:10px 0 18px}
.pasos a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--borde,#E7DFD4);background:#fff;text-decoration:none;color:#4a4350}
.pasos li.on a{background:var(--marca,#161318);color:var(--crema,#F3EEE7);border-color:transparent}
.pasos a:focus-visible,.catalogo button:focus-visible{outline:2px solid var(--oro,#C8A96A);outline-offset:2px}
.elegidos,.catalogo{list-style:none;padding:0;margin:8px 0 16px;display:grid;gap:6px}
.elegidos li,.catalogo li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--borde,#E7DFD4);border-radius:10px}
.catalogo button,.elegidos button{min-height:44px;white-space:nowrap}
.en-linea{display:inline}
.buscar{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin:14px 0 8px}
.buscar label{flex:1;min-width:200px}
.casilla{display:flex;gap:10px;align-items:center;min-height:44px}
.casilla input{width:22px;height:22px;flex:none}
.casilla.grande{font-size:1.05rem}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
fieldset{border:1px solid var(--borde,#E7DFD4);border-radius:10px;padding:10px 14px;margin:10px 0}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:10px 0 16px}
.galeria .foto{margin:0;padding:8px;background:#fff;border:2px solid var(--borde,#E7DFD4);border-radius:12px;display:flex;flex-direction:column;gap:8px}
.galeria .foto.elegida{border-color:var(--oro,#C8A96A)}
.galeria img{width:100%;height:auto;border-radius:8px}
.pieza{margin:10px 0 16px}
.pieza img{width:100%;max-width:540px;height:auto;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.acciones-pie{display:flex;gap:10px;margin:24px 0}
.cupo{max-width:420px}
@media (max-width:560px){.dos{grid-template-columns:1fr}}
.pasos li.no-aplica span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px dashed var(--borde,#E7DFD4);color:#a39b93}

/* ── Selectores de la marca (9-oct) — color nativo + vista previa servida ── */
.sel-titulo{font-size:1.05rem;margin:22px 0 4px}
.sel-colores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:10px 0}
label.sel-color{display:flex;align-items:center;gap:12px;margin:0;padding:12px;border:1px solid var(--linea,#E7DFD4);border-radius:12px;background:#fff;cursor:pointer}
label.sel-color input[type=color]{width:56px;height:56px;padding:0;border:0;border-radius:12px;background:none;cursor:pointer;flex:0 0 auto}
label.sel-color span{display:grid;gap:2px;margin:0;color:inherit;font-size:inherit}
label.sel-color b{font-weight:600}
label.sel-color small{color:var(--suave,#777);font-size:.8rem}
.muestra{border-radius:14px;overflow:hidden;border:1px solid var(--linea,#E7DFD4);max-width:440px;margin:14px 0 6px}
.muestra-cuerpo{background:#F1EBE6;color:var(--marca-texto,#1b1b1f);padding:22px 20px;display:grid;gap:6px}
.muestra-titulo{font-family:Georgia,serif;font-size:1.5rem;line-height:1.15}
.muestra-sub{font-size:.9rem;letter-spacing:.04em}
.muestra-barra{background:var(--marca-real,#1f3f4a);color:var(--marca-barra-texto,#f1ebe6);padding:12px 20px;font-weight:600;letter-spacing:.06em;font-size:.85rem}
ul.contraste{list-style:none;padding:0;margin:6px 0 4px;display:grid;gap:4px;font-size:.85rem}
ul.contraste li.bien::before{content:"✓ ";color:#1e6e4f;font-weight:700}
ul.contraste li.mal::before{content:"✗ ";color:#8a2b2b;font-weight:700}
ul.contraste li.mal{color:#8a2b2b}

/* ── Formato de la pieza (9-oct): teléfono 4:5 o computadora 1:1 ── */
.formato-sel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 14px}
.formato-et{font-size:.85rem;color:var(--suave,#777);margin-right:4px}
.formato-op{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;border:1px solid var(--linea,#E7DFD4);background:#fff;color:inherit;cursor:pointer;text-align:left;min-height:56px}
.formato-op span{display:grid;line-height:1.2}
.formato-op small{font-size:.75rem;color:var(--suave,#777)}
.formato-op.activo{border:2px solid var(--marca,#1f3f4a);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.formato-op:disabled{opacity:.55;cursor:default}
.formato-ico{display:inline-block;border:2px solid currentColor;border-radius:4px;flex:0 0 auto}
.formato-ico.tel{width:20px;height:25px}
.formato-ico.pc{width:24px;height:24px}

/* ── Tipografía de la marca en la muestra (9-oct): la MISMA letra que dibuja la pieza ── */
@font-face{font-family:'mq-baskerville-400';src:url(/fuente/baskerville-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-cormorant-500';src:url(/fuente/cormorant-500.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-dmsans-400';src:url(/fuente/dmsans-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-dmsans-500';src:url(/fuente/dmsans-500.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-dmserif-400';src:url(/fuente/dmserif-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-fraunces-500';src:url(/fuente/fraunces-500.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-inter-400';src:url(/fuente/inter-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-inter-500';src:url(/fuente/inter-500.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-italiana';src:url(/fuente/italiana.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-jost-400';src:url(/fuente/jost-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-jost-500';src:url(/fuente/jost-500.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-lato-400';src:url(/fuente/lato-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-lato-700';src:url(/fuente/lato-700.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-montserrat-400';src:url(/fuente/montserrat-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-montserrat-500';src:url(/fuente/montserrat-500.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-nunito-400';src:url(/fuente/nunito-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-nunito-600';src:url(/fuente/nunito-600.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-playfair-400';src:url(/fuente/playfair-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-poppins-500';src:url(/fuente/poppins-500.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-sourcesans-400';src:url(/fuente/sourcesans-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:'mq-sourcesans-600';src:url(/fuente/sourcesans-600.ttf) format('truetype');font-display:swap}
.muestra.juego-italiana .muestra-titulo{font-family:'mq-italiana',Georgia,serif}
.muestra.juego-italiana .muestra-sub,.muestra.juego-italiana .muestra-barra{font-family:'mq-jost-500',system-ui,sans-serif}
.muestra.juego-playfair .muestra-titulo{font-family:'mq-playfair-400',Georgia,serif}
.muestra.juego-playfair .muestra-sub,.muestra.juego-playfair .muestra-barra{font-family:'mq-montserrat-500',system-ui,sans-serif}
.muestra.juego-cormorant .muestra-titulo{font-family:'mq-cormorant-500',Georgia,serif}
.muestra.juego-cormorant .muestra-sub,.muestra.juego-cormorant .muestra-barra{font-family:'mq-lato-700',system-ui,sans-serif}
.muestra.juego-dmserif .muestra-titulo{font-family:'mq-dmserif-400',Georgia,serif}
.muestra.juego-dmserif .muestra-sub,.muestra.juego-dmserif .muestra-barra{font-family:'mq-dmsans-500',system-ui,sans-serif}
.muestra.juego-poppins .muestra-titulo{font-family:'mq-poppins-500',Georgia,serif}
.muestra.juego-poppins .muestra-sub,.muestra.juego-poppins .muestra-barra{font-family:'mq-inter-500',system-ui,sans-serif}
.muestra.juego-jost .muestra-titulo{font-family:'mq-jost-500',Georgia,serif}
.muestra.juego-jost .muestra-sub,.muestra.juego-jost .muestra-barra{font-family:'mq-jost-500',system-ui,sans-serif}
.muestra.juego-baskerville .muestra-titulo{font-family:'mq-baskerville-400',Georgia,serif}
.muestra.juego-baskerville .muestra-sub,.muestra.juego-baskerville .muestra-barra{font-family:'mq-sourcesans-600',system-ui,sans-serif}
.muestra.juego-fraunces .muestra-titulo{font-family:'mq-fraunces-500',Georgia,serif}
.muestra.juego-fraunces .muestra-sub,.muestra.juego-fraunces .muestra-barra{font-family:'mq-nunito-600',system-ui,sans-serif}

/* ── «Generando la foto…» (9-oct) ── */
.generando{display:flex;gap:14px;align-items:center;margin:14px 0 4px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--linea,#E7DFD4)}
.generando[hidden]{display:none}
.generando b{display:block;font-weight:600}
button[data-espera]:disabled{opacity:.6;cursor:progress}
.generando small{display:block;color:var(--suave,#777);font-size:.85rem;margin-top:2px}
.giro{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:4px solid #e9e1d6;border-top-color:var(--marca,#1f3f4a);animation:giro 1s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.avance{display:block;height:6px;border-radius:99px;background:#eee6dc;margin-top:8px;overflow:hidden;width:min(320px,60vw)}
.avance span{display:block;height:100%;width:0;background:var(--marca,#1f3f4a);animation:avance 22s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes avance{to{width:95%}}
@media (prefers-reduced-motion:reduce){.giro{animation-duration:3s}.avance span{animation:none;width:60%}}
button[value=generar]:disabled{opacity:.6;cursor:progress}

/* ── Publicar (9-oct) ── */
.publicar{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:760px){.publicar{grid-template-columns:1fr}}
.texto-pub{white-space:pre-line;background:#faf7f2;border:1px solid var(--linea,#E7DFD4);border-radius:10px;padding:12px 14px;font-size:.92rem}
.botones-final{display:flex;flex-wrap:wrap;gap:10px}

/* ── Imágenes ya generadas (9-oct) ── */
.galeria-todas figcaption{display:grid;gap:4px;font-size:.82rem}
.galeria-todas .cuando{font-weight:600}
.galeria-todas .quien{color:var(--suave,#777)}
.galeria-todas .usos{display:flex;flex-wrap:wrap;gap:4px}
.galeria-todas .uso{display:inline-block;padding:2px 8px;border-radius:99px;background:#f4eee6;color:inherit;text-decoration:none;font-size:.78rem}
.galeria-todas .boton.chico{justify-self:start;padding:6px 12px;font-size:.8rem;min-height:0}
.paginas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}