/* Papelería El Compàs — копистерия. Общая система — в estilo.css. */
/* ════════════════════ копистерия ════════════════════ */
.cop-cab { padding-block: 10px 36px; }
.cop-cab__env { display: grid; gap: 30px; }
.cop-cab__texto { display: grid; gap: 14px; align-content: start; }
.cop-cab__datos { display: grid; gap: 8px; margin-top: 10px; }
.cop-cab__datos li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; padding: 11px 14px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(29, 36, 51, .1); }
@media (min-width: 600px) {
  .cop-cab__datos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .cop-cab__datos li { display: grid; gap: 2px; padding: 12px 12px 10px; }
}
.cop-cab__datos b { font-size: 16px; letter-spacing: -.01em; }
.cop-cab__datos span { font-size: 13px; color: var(--tinta-3); line-height: 1.35; }
.cop-cab__escalera { position: relative; align-self: end; padding: 22px 20px 18px; border-radius: 16px; background: var(--amarillo-claro); box-shadow: 0 0 0 1px rgba(232, 197, 44, .5); }
.cop-cab__esc-tit { font-weight: 700; font-size: 15px; margin-bottom: 14px; max-width: 56%; }
/* пачка листов лежит в пустом углу над короткими ступенями */
.cop-cab__foto { position: absolute; z-index: 2; right: 14px; top: -26px; width: 132px; --giro: 5deg; padding: 6px 6px 0; }
.cop-cab__foto img { aspect-ratio: 4 / 3; object-fit: cover; }
.cop-cab__foto figcaption { font-size: 16px; padding: 6px 2px 8px; }
.cop-cab__foto .cinta { width: 70px; height: 22px; top: -10px; }
.escalera { --alto: 150px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 8px; }
.peldano { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; gap: 6px; }
.peldano__precio { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.peldano__barra {
  height: calc(var(--h) * var(--alto)); border: 2px solid var(--tinta); border-bottom-width: 3px; border-radius: 6px 6px 2px 2px;
  background: #fff repeating-linear-gradient(0deg, transparent 0 11px, rgba(36, 86, 201, .16) 11px 12px);
  transition: background-color .3s, transform .3s;
}
.peldano__caras { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); line-height: 1.25; font-variant-numeric: tabular-nums; }
.peldano--activo .peldano__barra { background-color: var(--amarillo); transform: translateY(-4px); }
.peldano--activo .peldano__precio { color: var(--azul); }
.peldano--activo .peldano__caras { color: var(--tinta); }
@media (min-width: 600px) {
  .cop-cab__foto { width: 176px; right: 22px; top: -34px; }
  .cop-cab__foto figcaption { font-size: 18px; }
}
@media (min-width: 1024px) {
  .cop-cab__env { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: end; }
  .cop-cab__escalera { padding: 26px 28px 22px; }
  .escalera { --alto: 180px; gap: 12px; }
}

.calc-sec { padding-bottom: clamp(56px, 7vw, 96px); }
.calc { display: grid; gap: 28px; padding: 26px 16px 28px; }
.calc__form { display: grid; gap: 22px; min-width: 0; }
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.grupo__tit { display: flex; align-items: center; gap: 10px; padding: 0; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.grupo__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tinta); color: #fff; font-size: 13.5px; font-weight: 700; flex: none; }
.grupo__opciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grupo__opciones--3 { display: grid; grid-template-columns: minmax(0, 1fr); }
.grupo__opciones--3 .opcion--ficha span { grid-template-columns: 30px 1fr; column-gap: 12px; min-height: 56px; }
.grupo__opciones--3 .hoja-mini { grid-row: 1 / 3; align-self: center; justify-self: center; margin: 0; }
@media (min-width: 600px) {
  .grupo__opciones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grupo__opciones--3 .opcion--ficha span { grid-template-columns: 1fr; min-height: 64px; }
  .grupo__opciones--3 .hoja-mini { grid-row: auto; justify-self: start; margin-bottom: 4px; }
}
.grupo__opciones--enc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grupo__ayuda { font-size: 13.5px; color: var(--tinta-3); }
.grupo__aviso { font-size: 14px; font-weight: 600; color: var(--rojo-texto); }
.grupo__aviso:empty { display: none; }
.grupo__numeros { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.opcion--ancha span { display: inline-flex; align-items: center; gap: 9px; padding: 0 16px; font-weight: 600; }
.opcion--ficha { display: grid; }
.opcion--ficha span { display: grid; place-items: start; align-content: center; gap: 2px; min-height: 64px; height: 100%; padding: 10px 12px; text-align: left; white-space: normal; }
.opcion--ficha b { font-size: 15px; line-height: 1.2; }
.opcion--ficha small { font-size: 13px; font-weight: 500; color: var(--tinta-3); line-height: 1.25; }
.opcion input:checked + span small { color: #dbe5fb; }
.opcion input:disabled + span { opacity: .5; cursor: not-allowed; background: repeating-linear-gradient(-45deg, var(--papel) 0 6px, #eef0f4 6px 8px); }
.opcion input:disabled { cursor: not-allowed; }
.opcion input:disabled + span small { color: var(--rojo-texto); font-weight: 600; opacity: 1; }
.punto-tinta { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.punto-tinta--bn { background: var(--tinta); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--tinta); }
.punto-tinta--color { background: conic-gradient(var(--rojo), var(--amarillo), var(--verde), var(--azul), var(--rojo)); }
.hoja-mini { width: 16px; height: 22px; border: 1.5px solid currentColor; border-radius: 2px; margin-bottom: 4px; background: #fff; opacity: .8; }
.hoja-mini--gruesa { border-width: 3px; }
.hoja-mini--a3 { width: 22px; height: 30px; }
.opcion input:checked + span .hoja-mini { background: transparent; }
.contador__num--ancho { width: 66px; }
.campo--linea { display: inline-flex; align-items: center; gap: 10px; margin-left: 6px; }
.campo--linea[hidden] { display: none; }
.campo__rotulo small { font-weight: 500; color: var(--tinta-3); }
.calc__lado { display: grid; gap: 16px; align-content: start; }
.ticket { position: relative; padding-bottom: 26px; }
.ticket--brilla .ticket__papel { animation: brilla 1.2s ease; }
@keyframes brilla { 20% { background: var(--amarillo-claro); } }
.ticket__sombra { filter: drop-shadow(0 1px 1px rgba(29, 36, 51, .18)) drop-shadow(0 16px 16px rgba(29, 36, 51, .16)); }
.ticket__papel {
  background: #fff; padding: 26px 20px 26px; font-variant-numeric: tabular-nums;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 8px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 16px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 8px repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 8px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 16px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 8px repeat-x;
}
.ticket__cab { display: grid; justify-items: center; gap: 2px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1.5px dashed rgba(29, 36, 51, .35); }
.ticket__cab b { font-size: 21px; letter-spacing: -.01em; }
.ticket__cab span { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.ticket__lineas { display: grid; }
.t-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px dotted rgba(29, 36, 51, .3); font-size: 15px; }
.t-linea span { display: grid; gap: 1px; font-weight: 600; }
.t-linea small { font-size: 13px; font-weight: 500; color: var(--tinta-3); }
.t-linea b { white-space: nowrap; font-weight: 700; }
.t-linea--aviso { color: var(--tinta-3); font-weight: 500; justify-content: center; text-align: center; border-bottom: 0; padding: 18px 0; }
.ticket__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--tinta); }
.ticket__total span { font-weight: 700; font-size: 15px; }
.ticket__total b { font-size: 38px; letter-spacing: -.04em; line-height: 1; }
.ticket__meta { font-size: 13.5px; color: var(--tinta-3); margin-top: 6px; }
.ticket__tramo { font-size: 13.5px; font-weight: 600; color: var(--azul); margin-top: 4px; }
.ticket__papel { padding-bottom: 54px; }
@media (min-width: 1024px) { .ticket__papel { padding-bottom: 30px; } .ticket__tramo { padding-right: 140px; } }
.ticket__meta:empty, .ticket__tramo:empty { display: none; }
.ticket--vacio .sello { opacity: .35; }
.sello {
  position: absolute; right: 14px; bottom: 0; display: grid; justify-items: center; gap: 1px; padding: 7px 14px 8px;
  border: 3px solid var(--rojo); border-radius: 10px; background: rgba(255, 255, 255, .9); color: var(--rojo-texto);
  transform: rotate(-7deg); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3.5px rgba(224, 72, 62, .55);
}
.sello__dia { font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.sello__hora { font-weight: 600; font-size: 12.5px; }
.sello--pum { animation: pum .55s cubic-bezier(.3, .7, .2, 1); }
@keyframes pum { from { transform: rotate(-7deg) scale(1.7); opacity: 0; } 60% { transform: rotate(-7deg) scale(.94); opacity: 1; } }
.calc__regla { font-size: 14px; color: var(--tinta-2); padding: 10px 12px; border-left: 3px solid var(--rojo); background: rgba(255, 255, 255, .7); }
@media (min-width: 600px) {
  .calc { padding: 34px 30px 36px; }
  .grupo__opciones--enc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .calc { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 44px; padding: 44px 44px 46px; }
  .calc__lado { position: sticky; top: calc(var(--alto-cab) + 24px); }
  .grupo__opciones--enc { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.tarifas__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 34px; }
.tarifas__rejilla > * { min-width: 0; }
@media (min-width: 900px) { .tarifas__rejilla { align-items: start; } }
.tarifa { padding: 24px 20px 20px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(29, 36, 51, .1), 0 16px 26px -24px rgba(29, 36, 51, .5); display: grid; gap: 18px; align-content: start; }
.tarifa h3 { font-size: 18px; }
.escalera--mini { --alto: 110px; }
.escalera--color .peldano__barra { background: #fff repeating-linear-gradient(90deg, rgba(224, 72, 62, .18) 0 6px, rgba(255, 228, 92, .25) 6px 12px, rgba(31, 157, 107, .18) 12px 18px, rgba(36, 86, 201, .18) 18px 24px); }
.escalera--color .peldano--activo .peldano__barra { background: var(--amarillo); }
.tabla-acabados { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.tabla-acabados th, .tabla-acabados td { text-align: left; padding: 8px 0; border-bottom: 1px dotted rgba(29, 36, 51, .25); vertical-align: top; }
.tabla-acabados th { font-weight: 700; padding-right: 10px; }
@media (min-width: 900px) { .tabla-acabados th { white-space: nowrap; } }
.tabla-acabados td { color: var(--tinta-2); padding-right: 10px; }
.tabla-acabados td:last-child { text-align: right; font-weight: 700; color: var(--tinta); white-space: nowrap; padding-right: 0; }
@media (min-width: 900px) {
  .tarifas__rejilla { grid-template-columns: 1fr .8fr 1.25fr; }
}

.envio__env { display: grid; gap: 40px; align-items: center; }
.movil { width: min(100%, 300px); justify-self: center; padding: 11px; border-radius: 40px; background: var(--tinta); box-shadow: 0 30px 50px -30px rgba(29, 36, 51, .8), inset 0 0 0 2px #3a4254; transform: rotate(-3deg); }
.movil__pantalla { display: flex; flex-direction: column; min-height: 500px; border-radius: 30px; overflow: hidden; background: #eee6da; }
.movil__cab { display: flex; align-items: center; gap: 10px; padding: 26px 16px 12px; background: var(--azul); color: #fff; font-size: 14.5px; }
.movil__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--amarillo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%231d2433' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M22 16 13 40M26 16l9 24'/%3E%3C/g%3E%3Ccircle cx='24' cy='12' r='5' fill='%232456c9'/%3E%3C/svg%3E") center / 22px no-repeat; flex: none; }
.movil__chat { display: grid; gap: 8px; align-content: start; padding: 14px 12px 18px; }
.burbuja { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.45; white-space: pre-line; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.burbuja--yo { justify-self: end; background: #dbe8ff; border-bottom-right-radius: 4px; }
.burbuja--ellos { justify-self: start; background: #fff; border-bottom-left-radius: 4px; }
.burbuja--archivo { display: flex; align-items: center; gap: 10px; white-space: normal; }
.burbuja--archivo span:last-child { display: grid; }
.burbuja--archivo small { font-size: 12px; color: var(--tinta-3); }
.pdf { display: grid; place-items: center; width: 34px; height: 40px; border-radius: 4px; background: var(--rojo-texto); color: #fff; font-weight: 700; font-size: 11.5px; }
.envio__txt { display: grid; gap: 16px; align-content: start; order: -1; }
@media (min-width: 900px) { .envio__txt { order: 0; } }
.pasos-envio { display: grid; gap: 14px; counter-reset: paso; margin-top: 4px; }
.pasos-envio li { position: relative; display: grid; gap: 2px; padding: 0 0 14px 48px; border-bottom: 1px dashed rgba(29, 36, 51, .2); counter-increment: paso; }
.pasos-envio li::before {
  content: counter(paso); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--rojo); color: var(--rojo-texto); font-weight: 700; font-size: 15px;
}
.pasos-envio b { font-size: 17px; }
.pasos-envio span { color: var(--tinta-2); }
@media (min-width: 900px) {
  .envio__env { grid-template-columns: .8fr 1.2fr; gap: 64px; }
}

.tfg { position: relative; overflow: hidden; background: #1f2d57; color: #e9e1cc; }
.tfg::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 5px); }
.tfg__env { position: relative; display: grid; gap: 36px; padding-block: clamp(60px, 8vw, 104px); }
.tfg__txt { display: grid; gap: 16px; align-content: start; }
.tfg .rotulo { color: #c9bb8f; }
.tfg .rotulo::before { background: #e8c15a; }
.tfg .titulo { color: #f0cf73; }
.tfg .entrada { color: #d9d2bf; }
.tfg__consejos { display: grid; gap: 10px; margin-block: 4px 8px; }
.tfg__consejos li { position: relative; padding-left: 30px; color: #e9e1cc; }
.tfg__consejos li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 16px; height: 9px; border-left: 2.5px solid #e8c15a; border-bottom: 2.5px solid #e8c15a; transform: rotate(-45deg); }
.tfg .btn { justify-self: start; border-color: #0e1633; box-shadow: 0 3px 0 #0e1633; }
.tfg__collage { position: relative; justify-self: center; width: min(92%, 400px); margin-bottom: 30px; }
.tfg__foto { --giro: -3deg; width: 86%; }
.tfg__foto img { aspect-ratio: 1; object-fit: cover; }
.tfg__foto figcaption { text-align: left; padding-left: 14px; padding-right: 24%; }
.tfg__libro { position: absolute; right: -6%; bottom: -10%; width: 36%; transform: rotate(7deg); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .45)); }
.tfg__libro svg { width: 100%; height: auto; }
@media (min-width: 900px) {
  .tfg__env { grid-template-columns: 1.2fr .8fr; align-items: center; gap: 56px; }
}