/* PromoPrint · Contacto: «Tu orden, antes de enviarla».
   A la izquierda, la solicitud en cuatro pasos; a la derecha, una ficha de orden de taller (papel, folio, sello)
   que se imprime mientras el visitante escribe. Su logo se muestra con el acabado de la técnica elegida.
   Tokens de hero.css; funciona en tema oscuro y claro (tema.css). Comportamiento en contacto.js. */

.page-contacto { background: var(--ink); color: var(--paper); font-family: var(--font); }
.ct { --ct-line: rgb(var(--paper-rgb) / 0.12); --ct-soft: rgb(var(--paper-rgb) / 0.64); --ct-field: rgb(var(--paper-rgb) / 0.04); --ct-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }
.ct-wrap { width: var(--wrap); margin-inline: auto; }
.ct [hidden], .ct-dock[hidden] { display: none !important; }

/* ---------- Encabezado ---------- */
.ct-hero { padding: calc(var(--site-nav-h, 80px) + clamp(40px, 6vw, 96px)) 0 clamp(40px, 5vw, 72px); }
.ct-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: end; gap: clamp(32px, 5vw, 96px); }
.ct-kicker { display: flex; align-items: center; gap: 14px; margin: 0; font: 600 12px/1 var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ct-soft); }
.ct-kicker__line { width: 34px; height: 2px; border-radius: 1px; background: var(--brand); }
.ct-title { margin: 22px 0 0; font: 600 clamp(3rem, 1.4rem + 5.4vw, 7rem)/0.95 var(--font); letter-spacing: -0.045em; }
.ct-title em { font-style: normal; color: var(--brand); }
.ct-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ct-line > span { display: inline-block; }
.ct-lead { margin: 0; max-width: 46ch; font: 400 17px/1.6 var(--font); color: var(--ct-soft); }

.ct-canales { display: grid; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.ct-canal {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--ct-line); border-radius: 14px; color: inherit; text-decoration: none;
  transition: border-color var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui), transform 260ms var(--ease-out);
}
.ct-canal svg { width: 40px; height: 40px; padding: 10px; border-radius: 10px; background: rgb(var(--paper-rgb) / 0.06); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-canal:first-child svg, .ct-canales li:first-child .ct-canal svg { fill: currentColor; stroke: none; }
.ct-canal b { display: block; font: 600 14.5px/1.2 var(--font); }
.ct-canal small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.2 var(--font); color: var(--ct-soft); }
.ct-canal:hover { border-color: rgba(253, 87, 0, 0.6); background: rgba(253, 87, 0, 0.06); transform: translateX(3px); }
.ct-canal:hover svg { color: var(--brand); }
.ct-canal:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- Orden: formulario + ficha ---------- */
.ct-orden { padding: 0 0 clamp(96px, 10vw, 160px); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); align-items: start; gap: clamp(32px, 5vw, 96px); }
.ct-form, .ct-hecho { grid-column: 1; grid-row: 1; }
.ct-ficha { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--site-nav-h, 80px) + 24px); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }

.ct-paso { margin: 0; padding: clamp(28px, 3vw, 40px) 0; border: 0; border-top: 1px solid var(--ct-line); min-width: 0; }
/* La leyenda flota para no partir el borde del fieldset: el filete queda arriba, limpio. */
.ct-paso__t { float: left; width: 100%; padding-bottom: 4px !important; display: flex; align-items: baseline; gap: 14px; padding: 0; font: 600 clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem)/1.2 var(--font); letter-spacing: -0.02em; }
.ct-paso__n { font: 700 12px/1 var(--font); letter-spacing: 0.14em; color: var(--brand); font-variant-numeric: tabular-nums; transform: translateY(-3px); }
.ct-paso__t .ct-opc { margin-left: 4px; }
.ct-paso__t + * { clear: both; }
.ct-ayuda { margin: 10px 0 0; font: 400 14px/1.5 var(--font); color: var(--ct-soft); }
.ct-paso > .ct-ayuda { margin: 10px 0 20px; }
.ct-req, .ct-opc { font: 500 12px/1 var(--font); letter-spacing: 0.02em; color: var(--ct-soft); }
.ct-req { color: rgb(var(--paper-rgb) / 0.5); }

/* Técnica: tarjetas seleccionables (radios reales). */
.ct-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.ct-chip { position: relative; display: block; cursor: pointer; }
.ct-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ct-chip__box {
  position: relative; display: grid; gap: 4px; min-height: 78px; padding: 16px 44px 16px 16px; border: 1px solid var(--ct-line); border-radius: 14px;
  background: var(--ct-field);
  transition: border-color var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui), transform 360ms var(--ct-spring);
}
.ct-chip__name { font: 600 15.5px/1.2 var(--font); }
.ct-chip__sub { font: 500 13px/1.3 var(--font); color: var(--ct-soft); }
.ct-chip__tick { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid rgb(var(--paper-rgb) / 0.28); border-radius: 50%; transition: background-color var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui); }
.ct-chip__tick svg { width: 12px; height: 12px; fill: none; stroke: #0b0b0c; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 320ms var(--ease-out) 60ms; }
.ct-chip:hover .ct-chip__box { border-color: rgb(var(--paper-rgb) / 0.32); }
.ct-chip input:checked + .ct-chip__box { border-color: var(--brand); background: rgba(253, 87, 0, 0.1); transform: translateY(-2px); }
.ct-chip input:checked + .ct-chip__box .ct-chip__tick { border-color: var(--brand); background: var(--brand); }
.ct-chip input:checked + .ct-chip__box .ct-chip__tick svg { stroke-dashoffset: 0; }
.ct-chip input:focus-visible + .ct-chip__box { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Campos */
.ct-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ct-campo { position: relative; display: grid; align-content: start; margin-top: 20px; min-width: 0; }
.ct-paso > .ct-campo:first-of-type, .ct-paso > .ct-fila:first-of-type .ct-campo { margin-top: 22px; }
.ct-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font: 600 14px/1.2 var(--font); }
.ct-input {
  width: 100%; height: 56px; padding: 0 18px; border: 1px solid rgb(var(--paper-rgb) / 0.16); border-radius: 14px;
  background: var(--ct-field); color: var(--paper); font: 500 16px/1.2 var(--font);
  transition: border-color var(--t-ui) var(--ease-ui), box-shadow var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui);
}
.ct-input::placeholder { color: rgb(var(--paper-rgb) / 0.38); }
.ct-input:hover { border-color: rgb(var(--paper-rgb) / 0.3); }
.ct-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(253, 87, 0, 0.18); background: rgb(var(--paper-rgb) / 0.06); }
.ct-input[aria-invalid="true"] { border-color: #ff7a45; box-shadow: 0 0 0 4px rgba(255, 122, 69, 0.14); }
.ct-textarea { height: auto; min-height: 120px; padding: 16px 18px; resize: vertical; line-height: 1.5; }
.ct-input[type="date"] { color-scheme: inherit; }
.ct-error { margin: 0; max-height: 0; overflow: hidden; font: 600 13.5px/1.4 var(--font); color: #ff8a5c; transition: max-height 260ms var(--ease-out), margin 260ms var(--ease-out); }
.ct-error.is-on { max-height: 60px; margin-top: 8px; }
.ct-error.is-on::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 50%; background: currentColor; }

/* Producto: buscador con fotos del catálogo */
.ct-combo__box { position: relative; }
.ct-combo__box .ct-input { padding-right: 48px; }
.ct-combo__clear { position: absolute; top: 50%; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ct-soft); cursor: pointer; transform: translateY(-50%); }
.ct-combo__clear:hover { color: var(--paper); background: rgb(var(--paper-rgb) / 0.06); }
.ct-combo__clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ct-combo__list {
  position: absolute; top: calc(56px + 34px); left: 0; right: 0; z-index: 5; max-height: 340px; margin: 0; padding: 6px; overflow-y: auto; list-style: none;
  border: 1px solid var(--ct-line); border-radius: 16px; background: rgb(var(--glass-rgb) / 0.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}
.ct-combo__opt { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; border-radius: 10px; cursor: pointer; }
.ct-combo__opt img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #101011; }
.ct-combo__opt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14.5px/1.25 var(--font); }
.ct-combo__opt small { display: block; margin-top: 2px; font: 500 12.5px/1.2 var(--font); color: var(--ct-soft); }
.ct-combo__opt mark { background: none; color: var(--brand); }
.ct-combo__opt .ct-combo__ref { font: 600 12px/1 var(--font); color: rgb(var(--paper-rgb) / 0.45); }
.ct-combo__opt[aria-selected="true"], .ct-combo__opt:hover { background: rgb(var(--paper-rgb) / 0.07); }
.ct-combo__libre { padding: 12px 10px; font: 500 14px/1.4 var(--font); color: var(--ct-soft); }

/* Cantidad */
.ct-qty__box { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; }
.ct-qty__input { grid-column: 1 / -1; grid-row: 1; padding: 0 84px 0 60px; text-align: center; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-qty__u { grid-column: 2; grid-row: 1; justify-self: end; margin-right: 8px; font: 600 13px/1 var(--font); color: var(--ct-soft); pointer-events: none; }
.ct-qty__step { position: relative; z-index: 1; grid-row: 1; width: 44px; height: 44px; margin: 0 6px; border: 0; border-radius: 10px; background: rgb(var(--paper-rgb) / 0.06); color: var(--paper); font: 500 20px/1 var(--font); cursor: pointer; transition: background-color var(--t-ui) var(--ease-ui); }
.ct-qty__step[data-step="-1"] { grid-column: 1; }
.ct-qty__step[data-step="1"] { grid-column: 3; justify-self: end; }
.ct-qty__step:hover { background: rgba(253, 87, 0, 0.16); color: var(--brand); }
.ct-qty__step:focus-visible, .ct-qty__opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ct-qty__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ct-qty__opt { min-height: 34px; padding: 0 12px; border: 1px solid var(--ct-line); border-radius: 999px; background: none; color: var(--ct-soft); font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: all var(--t-ui) var(--ease-ui); }
.ct-qty__opt:hover { color: var(--paper); border-color: rgb(var(--paper-rgb) / 0.32); }
.ct-qty__opt[aria-pressed="true"] { color: #0b0b0c; background: var(--brand); border-color: var(--brand); }

/* Logo */
.ct-drop {
  display: grid; justify-items: center; gap: 8px; margin-top: 22px; padding: 30px 20px; text-align: center; cursor: pointer;
  border: 1.5px dashed rgb(var(--paper-rgb) / 0.22); border-radius: 18px; background: var(--ct-field);
  transition: border-color var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui), transform 300ms var(--ct-spring);
}
.ct-drop:hover, .ct-drop.is-over { border-color: var(--brand); background: rgba(253, 87, 0, 0.06); }
.ct-drop.is-over { transform: scale(1.01); }
.ct-drop:focus-within { outline: 2px solid var(--brand); outline-offset: 3px; }
.ct-drop__ico svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: rgba(253, 87, 0, 0.12); fill: none; stroke: var(--brand); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms var(--ct-spring); }
.ct-drop:hover .ct-drop__ico svg, .ct-drop.is-over .ct-drop__ico svg { transform: translateY(-3px); }
.ct-drop__t { font: 500 15.5px/1.4 var(--font); }
.ct-drop__t u { text-decoration-color: var(--brand); text-underline-offset: 3px; }
.ct-drop .ct-ayuda { margin: 0; }
.ct-drop__file { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(253, 87, 0, 0.12); color: var(--brand); font: 600 13px/1.2 var(--font); }

/* Enviar */
.ct-enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--ct-line); }
.ct-submit {
  position: relative; display: inline-flex; align-items: center; gap: 14px; height: 60px; padding: 0 26px 0 30px; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--brand); color: #0b0b0c; font: 700 16.5px/1 var(--font); letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  box-shadow: 0 18px 40px -16px rgba(253, 87, 0, 0.7); transition: transform 200ms var(--ease-ui), box-shadow 240ms var(--ease-ui);
}
.ct-submit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--ct-spring); }
.ct-submit > svg:first-child { fill: currentColor; stroke: none; }
.ct-submit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-100%); }
.ct-submit:hover { box-shadow: 0 22px 46px -16px rgba(253, 87, 0, 0.85); }
.ct-submit:hover svg:last-child { transform: translateX(4px); }
.ct-submit:hover::after { transform: translateX(100%); transition: transform 800ms var(--ease-out); }
.ct-submit:active { transform: scale(0.97); }
.ct-submit:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.ct-form.is-lista .ct-submit:not(.ct-submit--dock) { animation: ct-listo 1.6s var(--ease-out) 1; }
@keyframes ct-listo { 0% { box-shadow: 0 0 0 0 rgba(253, 87, 0, 0.55); } 100% { box-shadow: 0 0 0 18px rgba(253, 87, 0, 0); } }
.ct-nota { margin: 0; max-width: 36ch; font: 400 13.5px/1.5 var(--font); color: var(--ct-soft); }
.ct-ghost { height: 60px; padding: 0 24px; border: 1px solid rgb(var(--paper-rgb) / 0.24); border-radius: 999px; background: none; color: var(--paper); font: 600 15px/1 var(--font); cursor: pointer; transition: border-color var(--t-ui) var(--ease-ui); }
.ct-ghost:hover { border-color: var(--brand); }
.ct-ghost:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- Ficha de orden (papel de taller) ---------- */
.ct-ticket {
  --t-ink: #161618; --t-soft: rgba(22, 22, 24, 0.56); --t-rule: rgba(22, 22, 24, 0.14); --corte: 92px;
  position: relative; padding: 22px 24px 24px; border-radius: 18px; overflow: clip; color: var(--t-ink); /* el sello grande antes de caer no ensancha la página */
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(253, 87, 0, 0.07), transparent 60%),
    linear-gradient(180deg, #faf8f3, #f1ede4);
  /* La sombra va en .ct-ficha (drop-shadow): la máscara de las muescas recortaría un box-shadow. */
  /* Muescas de talonario a la altura del corte. */
  -webkit-mask: radial-gradient(circle 11px at 0 var(--corte), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% var(--corte), #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 var(--corte), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% var(--corte), #0000 98%, #000) right / 51% 100% no-repeat;
  transform-origin: 50% 0;
}
.ct-ticket.is-golpe { animation: ct-golpe 520ms var(--ease-out); }
@keyframes ct-golpe { 0% { transform: none; } 30% { transform: translateY(3px) scale(0.992); } 100% { transform: none; } }
.ct-ticket__head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: calc(var(--corte) - 22px); border-bottom: 1.5px dashed var(--t-rule); }
.ct-ticket__logo { width: 28px; height: 28px; }
.ct-ticket__t { margin: 0; font: 700 11.5px/1.2 var(--font); letter-spacing: 0.18em; text-transform: uppercase; }
.ct-ticket__folio { margin: 4px 0 0; font: 500 12.5px/1 var(--font); color: var(--t-soft); }
.ct-ticket__folio b { color: var(--t-ink); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ct-ticket__fecha { align-self: start; margin: 4px 0 0; font: 600 11.5px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-soft); }

.ct-ticket__pieza { position: relative; margin-top: 20px; }
.ct-ticket__foto { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: repeating-linear-gradient(135deg, rgba(22, 22, 24, 0.04) 0 10px, transparent 10px 20px), #e9e5dc; }
.ct-ticket__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: ct-revela 700ms var(--ease-out); }
@keyframes ct-revela { from { opacity: 0; transform: scale(1.06); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.ct-ticket__vacio { font: 600 13px/1.3 var(--font); color: var(--t-soft); }

/* Arte: el logo con el acabado de la técnica, como una muestra sobre su material. */
.ct-arte {
  position: absolute; right: 12px; bottom: -18px; display: grid; place-items: center; width: 112px; height: 112px; padding: 16px; border-radius: 14px;
  background: #e8e4da; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.55), 0 0 0 4px #faf8f3; transform: rotate(3deg);
  animation: ct-parche 600ms var(--ct-spring);
}
@keyframes ct-parche { from { opacity: 0; transform: rotate(14deg) scale(0.6); } to { opacity: 1; transform: rotate(3deg); } }
.ct-arte img { max-width: 100%; max-height: 100%; object-fit: contain; transition: filter 400ms var(--ease-ui); }
.ct-arte__tag { position: absolute; left: 8px; bottom: -9px; padding: 3px 7px; border-radius: 6px; background: #161618; color: #faf8f3; font: 700 9.5px/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; }
.ct-arte__tag:empty { display: none; }
/* Tela oscura (bordado, serigrafía y DTF): sarga en diagonal. */
.ct-arte[data-tec="bordado"], .ct-arte[data-tec="serigrafia"], .ct-arte[data-tec="dtf"] { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 4px), #202024; }
.ct-arte[data-tec="bordado"]::after { content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(255, 255, 255, 0.28); border-radius: 9px; pointer-events: none; }
.ct-arte[data-tec="bordado"] img { filter: saturate(0.9) contrast(1.08) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.35)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.7)); }
.ct-arte[data-tec="serigrafia"] img { filter: saturate(1.7) contrast(1.5); }
/* DTF: el logo a todo color, tal cual, con el brillo fino de la capa transferida. */
.ct-arte[data-tec="dtf"] img { filter: saturate(1.15) contrast(1.05) drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.35)); }
/* Madera (láser): el logo queda quemado en el material. */
.ct-arte[data-tec="laser"] { background: repeating-linear-gradient(92deg, rgba(90, 50, 20, 0.08) 0 3px, transparent 3px 9px), linear-gradient(160deg, #d2a46c, #b07a45); }
.ct-arte[data-tec="laser"] img { filter: grayscale(1) brightness(0.35) contrast(2.2); mix-blend-mode: multiply; opacity: 0.85; }

.ct-ticket__datos { display: grid; margin: 34px 0 0; }
.ct-ticket__datos > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--t-rule); }
.ct-ticket__datos dt { font: 700 10.5px/1.6 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-soft); }
.ct-ticket__datos dd { position: relative; margin: 0; overflow-wrap: anywhere; font: 600 14.5px/1.4 var(--font); }
.ct-ticket__datos dd.is-vacio { color: rgba(22, 22, 24, 0.34); font-weight: 500; }
.ct-ticket__datos dd.is-nuevo { animation: ct-imprime 650ms var(--ease-out); }
@keyframes ct-imprime { from { clip-path: inset(0 100% 0 0); background: rgba(253, 87, 0, 0.18); } to { clip-path: inset(0 0 0 0); background: transparent; } }

.ct-ticket__pie { margin-top: 18px; }
.ct-progreso { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ct-progreso li { display: grid; justify-items: start; gap: 8px; font: 600 11px/1.2 var(--font); letter-spacing: 0.04em; color: var(--t-soft); }
.ct-progreso li span { display: grid; place-items: center; width: 100%; height: 4px; border-radius: 2px; background: var(--t-rule); overflow: hidden; }
.ct-progreso li span svg { display: none; }
.ct-progreso li span::before { content: ""; display: block; width: 100%; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out); }
.ct-progreso li.is-ok { color: var(--t-ink); }
.ct-progreso li.is-ok span::before { transform: scaleX(1); }

/* Sello: cae cuando la orden tiene lo necesario para cotizar. */
.ct-sello {
  position: absolute; right: 14px; top: calc(var(--corte) + 2px); z-index: 2; display: grid; justify-items: center; padding: 8px 14px 9px;
  border: 2.5px solid var(--brand); border-radius: 10px; color: var(--brand); text-transform: uppercase; pointer-events: none;
  background: rgba(250, 248, 243, 0.94); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: rotate(-11deg) scale(1.9);
}
.ct-sello span { font: 700 9.5px/1 var(--font); letter-spacing: 0.22em; }
.ct-sello b { margin-top: 3px; font: 800 19px/1 var(--font); letter-spacing: 0.06em; }
.ct-ticket.is-lista .ct-sello { opacity: 0.92; transform: rotate(-11deg) scale(1); transition: opacity 180ms ease, transform 420ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.ct-ticket.is-enviada .ct-sello { border-color: #1f9d55; color: #1f9d55; }

/* ---------- Enviada ---------- */
.ct-hecho { padding: clamp(28px, 3vw, 40px) 0; border-top: 1px solid var(--ct-line); outline: none; }
.ct-hecho, .ct-form { scroll-margin-top: calc(var(--site-nav-h, 80px) + 24px); }
.ct-sigue { display: grid; gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: sigue; }
.ct-sigue li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 14px; font: 500 15.5px/1.45 var(--font); color: var(--ct-soft); counter-increment: sigue; }
.ct-sigue li::before { content: counter(sigue, decimal-leading-zero); display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ct-line); border-radius: 50%; font: 700 11.5px/1 var(--font); color: var(--brand); }
.ct-sigue b { color: var(--paper); font-weight: 600; }
.ct-hecho:not([hidden]) { animation: ct-sube 700ms var(--ease-out); }
@keyframes ct-sube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ct-hecho__t { margin: 18px 0 14px; font: 600 clamp(2rem, 1.3rem + 2.4vw, 3.4rem)/1.02 var(--font); letter-spacing: -0.035em; }
.ct-hecho__acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Entradas ---------- */
.js-ct .ct-line > span { transform: translateY(105%); animation: ct-linea 1000ms var(--ease-out) forwards; }
.js-ct .ct-line + .ct-line > span { animation-delay: 110ms; }
@keyframes ct-linea { to { transform: none; } }
.js-ct .ct-hero__side, .js-ct .ct-kicker, .js-ct .ct-ticket { animation: ct-sube 900ms var(--ease-out) 250ms both; }
.js-ct .ct-ticket { animation-delay: 420ms; }

/* Barra fija (teléfono): avance y enviar siempre a mano. */
.ct-dock { display: none; }

@media (max-width: 960px) {
  .ct-hero__grid, .ct-grid { grid-template-columns: minmax(0, 1fr); }
  .ct-ficha { grid-column: 1; grid-row: auto; position: static; }
  .ct-hecho { grid-row: 1; }
  .ct-form .ct-enviar { display: none; }
  .ct-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ct-line);
    background: rgb(var(--glass-rgb) / 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    transition: transform 360ms var(--ease-out);
  }
  .ct-dock.is-oculta { transform: translateY(110%); }
  .ct-dock__info { font: 500 13.5px/1.2 var(--font); color: var(--ct-soft, rgb(var(--paper-rgb) / 0.64)); }
  .ct-dock__info b { color: var(--brand); font-weight: 800; }
  .ct-submit--dock { height: 52px; padding: 0 20px 0 24px; font-size: 15.5px; }
  .page-contacto .foot { padding-bottom: 80px; }
  .page-contacto .wa-flot { display: none; }
}
@media (max-width: 600px) {
  .ct-fila { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ct-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-chip__box { padding: 14px 36px 14px 14px; min-height: 72px; }
  .ct-chip__tick { top: 12px; right: 10px; }
  .ct-ticket { padding: 18px 18px 20px; }
  .ct-arte { width: 92px; height: 92px; right: 10px; }
}

/* Tema claro: la ficha es papel blanco sobre papel; sombras de tinta, no de negro. */
html[data-tema="claro"] .ct-ticket { background: radial-gradient(120% 60% at 100% 0%, rgba(253, 87, 0, 0.06), transparent 60%), #ffffff; }
html[data-tema="claro"] .ct-ficha { filter: drop-shadow(0 24px 34px rgba(22, 22, 24, 0.18)) drop-shadow(0 2px 4px rgba(22, 22, 24, 0.1)); }
html[data-tema="claro"] .ct-combo__list { box-shadow: 0 30px 60px -24px rgba(22, 22, 24, 0.35); }
html[data-tema="claro"] .ct-error { color: #c2410c; }
html[data-tema="claro"] .ct-input[aria-invalid="true"] { border-color: #c2410c; }

@media (prefers-reduced-motion: reduce) {
  .js-ct .ct-line > span { transform: none; animation: none; }
  .js-ct .ct-hero__side, .js-ct .ct-kicker, .js-ct .ct-ticket, .ct-hecho:not([hidden]), .ct-ticket.is-golpe, .ct-arte, .ct-ticket__foto img, .ct-ticket__datos dd.is-nuevo, .ct-form.is-lista .ct-submit { animation: none; }
  .ct-ticket.is-lista .ct-sello { transition: opacity 200ms ease; transform: rotate(-11deg); }
  .ct-chip__box, .ct-drop, .ct-canal { transition-property: border-color, background-color; }
}