/* InvenTia · sitio público. Lenguaje de «libro de bodega»: papel, tinta, líneas finas, esquinas rectas.
   Sin fuentes ni recursos externos. Colores con contraste AA (lo exige una prueba). */
:root {
  --tinta: #1b1814; --texto: #4a443c; --suave: #5f574d; --fondo: #f4efe5; --lienzo: #ebe4d6; --linea: #d9cfba; --blanco: #ffffff;
  --acento: #e0563b; --boton: #b83c24; --boton-hover: #9c321c; --oscuro: #1b1814; --oscuro-2: #2a241d;
  --ok: #2f7d5d; --ancho: 1160px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body { margin: 0; font: 17px/1.65 var(--fuente); color: var(--texto); background-color: var(--fondo); -webkit-font-smoothing: antialiased;
  /* Papel con un grano muy fino (dibujado con SVG dentro del propio CSS, sin imágenes externas) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .18  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); color: var(--tinta); line-height: 1.08; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.2rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.salto { position: absolute; left: -999px; top: 0; background: var(--blanco); color: var(--tinta); padding: .7rem 1rem; z-index: 100; }
.salto:focus { left: 0; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

/* Cabecera negra, con la cinta de inventario debajo */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--oscuro); color: #f4efe5; }
.cabecera .contenedor { display: flex; align-items: center; gap: 2.4rem; padding-block: .85rem; position: relative; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tinta); font: 700 1.45rem/1 var(--serif); letter-spacing: -.02em; }
.cabecera .logo { color: #f4efe5; }
/* El logo es el de la app y los correos: cuadrado redondeado terracota con un cuadrado blanco hueco (docs/marca.md). */
.logo-marca { flex: none; width: 28px; height: 28px; border-radius: 8px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='16' fill='%23e0563b'/><rect x='15' y='35' width='15' height='15' rx='3' fill='none' stroke='%23fff' stroke-width='3'/><path d='M22.5 35v6' stroke='%23fff' stroke-width='3'/><rect x='34' y='35' width='15' height='15' rx='3' fill='none' stroke='%23fff' stroke-width='3'/><path d='M41.5 35v6' stroke='%23fff' stroke-width='3'/><rect x='24.5' y='17' width='15' height='15' rx='3' fill='none' stroke='%23fff' stroke-width='3'/><path d='M32.0 17v6' stroke='%23fff' stroke-width='3'/></svg>") center / contain no-repeat; }
.menu { display: flex; gap: 1.8rem; }
.menu a { text-decoration: none; font-size: .95rem; font-weight: 600; color: #f4efe5; padding: .3rem 0; background: linear-gradient(var(--acento), var(--acento)) left bottom / 0 2px no-repeat; transition: background-size .22s ease; }
.menu a:hover { background-size: 100% 2px; }
.acciones { margin-left: auto; display: flex; gap: 1.4rem; align-items: center; }
.enlace-ingresar { text-decoration: none; font-weight: 700; font-size: .95rem; color: #f4efe5; border-bottom: 2px solid #f4efe5; padding-bottom: .1rem; }
.enlace-ingresar:hover { color: var(--acento); border-color: var(--acento); }
.cabecera .boton-lleno { border-color: #f4efe5; }
.cabecera .boton-lleno:hover { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .26), inset 0 -3px 0 rgba(0, 0, 0, .24), 4px 4px 0 #f4efe5; }

/* Cinta de inventario: movimientos que corren al bajar por la página */
.cinta { position: relative; overflow: hidden; background: var(--oscuro-2); border-top: 1px solid #3a3128; border-bottom: 3px solid var(--acento); height: 30px; }
.cinta::after { content: ""; position: absolute; top: 0; bottom: 0; left: 22%; width: 2px; background: var(--acento); box-shadow: 0 0 10px 2px rgba(224, 86, 59, .75); pointer-events: none; }  /* el «lector» */
.cinta-pista { display: flex; width: max-content; height: 100%; align-items: center; font: 600 .7rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: #d9d2c4; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.cinta-tramo { display: flex; align-items: center; flex: none; }
.cinta-tramo span { padding-inline: 1.5rem; position: relative; }
.cinta-tramo span::after { content: "▪"; position: absolute; right: -.35rem; color: #6d6253; }
.cinta-tramo b { margin-left: .4rem; }
.cinta-tramo .entra { color: #7ed0a8; } .cinta-tramo .sale { color: #ff8f73; } .cinta-tramo .dato { color: #fbe9a8; }

/* Botones: rectángulos, con una sombra dura al pasar el cursor */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: 2px; font: 700 .95rem/1 var(--fuente); text-decoration: none; border: 2px solid var(--tinta); cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s, color .12s; }
.boton:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--tinta); }
.boton:active { transform: none; box-shadow: none; }
.boton-lleno { background: var(--boton); color: #fff; }
.boton-borde-oscuro { background: transparent; color: var(--tinta); }
.boton-tinta { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.boton-tinta:hover { box-shadow: 4px 4px 0 #fff; }
.boton-grande { padding: 1.05rem 1.9rem; font-size: 1.02rem; }
.enlace-flecha { font-weight: 700; color: var(--tinta); text-decoration: none; border-bottom: 2px solid var(--tinta); padding-bottom: .1rem; }
.enlace-flecha:hover { color: var(--boton); border-color: var(--boton); }
.menu-movil { display: none; margin-left: auto; }
.menu-movil summary { list-style: none; cursor: pointer; padding: .5rem 1rem; border: 2px solid #f4efe5; color: #f4efe5; font-weight: 700; font-size: .9rem; border-radius: 2px; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil nav { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); background: var(--fondo); border: 2px solid var(--tinta); box-shadow: 6px 6px 0 rgba(0, 0, 0, .4); padding: 1rem 1.25rem 1.3rem; display: grid; gap: .3rem; z-index: 20; }
.menu-movil nav a { text-decoration: none; padding: .6rem 0; font-weight: 600; color: var(--tinta); border-bottom: 1px solid var(--linea); }
.menu-movil nav .boton { margin-top: .8rem; color: #fff; border-bottom: 2px solid var(--tinta); }

/* Portada */
.portada { padding-block: 4.5rem 1rem; }
.portada .contenedor { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: center; }
.portada .bajada { font-size: 1.22rem; color: var(--texto); max-width: 33em; margin-top: 1.4rem; }
.portada .botones { display: flex; gap: 1.8rem; align-items: center; flex-wrap: wrap; margin-top: 2.2rem; }
.portada .detalle { margin: 2rem 0 0; font: .85rem var(--mono); color: var(--suave); }

/* Libro de movimientos */
.libro { margin: 0; background: transparent; border: 2px solid var(--tinta); box-shadow: 10px 10px 0 var(--linea); }
.libro-cabecera { display: flex; justify-content: space-between; gap: 1rem; background: var(--tinta); color: #fff; padding: .65rem 1rem; font: 700 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.libro-cuerpo { background: #fff; padding: .4rem 1rem 1rem; font: .82rem var(--mono); color: var(--tinta); }
.fila { display: grid; grid-template-columns: 3.4rem 1fr 4.6rem 4.6rem; gap: .6rem; padding: .62rem 0; border-bottom: 1px dashed var(--linea); }
.fila.encabezado { color: var(--suave); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--tinta); }
.fila span:nth-child(3) { text-align: right; font-weight: 700; }
.fila .entra { color: var(--ok); } .fila .sale { color: var(--boton); }
.libro-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; font: .8rem/1.4 var(--mono); }
.libro-pie b { background: #fbe9a8; padding: 0 .2rem; color: var(--tinta); }
.sello { flex: none; font-style: normal; font: 800 .68rem/1.15 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--boton); border: 2px solid var(--boton); padding: .35rem .55rem; transform: rotate(-5deg); text-align: center; }

/* Secciones */
.seccion { padding-block: 5.5rem 0; }
.numero { font: 700 .8rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--suave); margin: 0 0 1rem; padding-top: 1rem; background: linear-gradient(var(--tinta), var(--tinta)) left top / 100% 2px no-repeat; }
.numero.claro { color: #d9d2c4; background-image: linear-gradient(#f4efe5, #f4efe5); }
.intro { font-size: 1.15rem; color: var(--suave); margin-top: -.2rem; }
.lista-filas { margin: 2.4rem 0 0; }
.fila-def { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--linea); }
.fila-def:last-child { border-bottom: 1px solid var(--linea); }
.fila-def dt { font: 700 1.3rem/1.2 var(--serif); color: var(--tinta); }
.fila-def dd { margin: 0; color: var(--texto); max-width: 38em; }
.pasos { counter-reset: paso; list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); }
.pasos li { counter-increment: paso; padding: 1.6rem 1.8rem 1.6rem 0; margin-right: 1.8rem; border-right: 1px solid var(--linea); }
.pasos li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.pasos li::before { content: counter(paso, decimal-leading-zero); display: block; font: 700 2.8rem/1 var(--mono); color: var(--boton); margin-bottom: 1rem; letter-spacing: -.04em; }
.pasos h3 { margin-bottom: .4rem; }
.pasos p { margin: 0; color: var(--texto); }

/* Tus datos: bloque de tinta, plano */
.datos { margin-top: 5.5rem; background: var(--oscuro); color: #d9d2c4; padding-block: 4.5rem 5rem; }
.datos h2 { color: #f4efe5; max-width: 18em; }
.lista-filas.oscura .fila-def { border-color: #4a4137; }
.lista-filas.oscura dt { color: #f4efe5; }
.lista-filas.oscura dd { color: #d9d2c4; }

/* Precios: tres columnas separadas por líneas, sin tarjetas */
.aviso-ejemplo { background: #fbf1dc; border: 2px dashed #c9922e; color: #6b4a0d; padding: .9rem 1.2rem; text-align: center; font-weight: 700; margin: 1.6rem 0; }
.planes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2.4rem; border: 2px solid var(--tinta); background: #fff; }
.plan { padding: 2.7rem 1.8rem 2.2rem; display: flex; flex-direction: column; position: relative; border-left: 2px solid var(--tinta); }
.plan:first-child { border-left: 0; }
.plan.destacado { background: #fffaf0; box-shadow: inset 0 6px 0 var(--boton); }
.plan .etiqueta { position: absolute; top: 1.2rem; left: 1.8rem; font: 800 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--boton); margin: 0; }
.plan h3 { font-size: 1.6rem; margin-bottom: .3rem; }
.plan .bajada { color: var(--suave); min-height: 3.3em; }
.precio { margin: .8rem 0 0; color: var(--tinta); }
.precio strong { display: block; font: 700 2.5rem/1.05 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.precio span { color: var(--suave); font-size: .9rem; }
.plan ul { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: grid; }
.plan li { padding: .6rem 0; border-top: 1px dashed var(--linea); }
.plan li::before { content: "— "; color: var(--boton); font-weight: 700; }
.plan .boton { margin-top: auto; }
.nota-precios { color: var(--suave); margin-top: 1.4rem; font-size: .92rem; font-family: var(--mono); }

/* Preguntas */
.preguntas { margin-top: 2.2rem; border-bottom: 1px solid var(--linea); }
.preguntas details { border-top: 1px solid var(--linea); padding: 1.3rem 0; }
.preguntas summary { cursor: pointer; font: 700 1.2rem/1.3 var(--serif); color: var(--tinta); list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font: 400 1.7rem/1 var(--mono); color: var(--boton); }
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { margin: .9rem 0 0; color: var(--texto); max-width: 46em; }

/* Cierre y pie */
.cierre { margin-top: 6rem; background: var(--boton); color: #fff; padding-block: 5rem; border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); }
.cierre h2 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.cierre p { color: #fff; font-size: 1.2rem; margin-bottom: 1.8rem; }
.pie { background: var(--oscuro); color: #d9d2c4; padding-block: 3.6rem 2rem; font-size: .95rem; }
.pie-grilla { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 2.4rem; border-bottom: 1px solid #4a4137; }
.pie-marca p { margin: 1rem 0 0; max-width: 24rem; }
.pie nav, .pie-grilla > div:last-child { display: grid; gap: .55rem; align-content: start; }
.pie-titulo { font: 700 .75rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #f4efe5; margin: 0 0 .5rem; }
.pie a { color: #d9d2c4; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie .logo { color: #f4efe5; }
.pie-base { margin: 1.6rem 0 0; color: #a89f92; font: .8rem var(--mono); }

/* Ingresar y solicitar */
.caja { max-width: 34rem; margin: 3.5rem auto 5rem; background: transparent; border: 2px solid var(--tinta); box-shadow: 8px 8px 0 var(--linea); padding: 2.4rem; }
.caja h1 { font-size: 2.1rem; }
.campo { margin-bottom: 1.2rem; }
.campo label { display: block; font-weight: 700; color: var(--tinta); margin-bottom: .4rem; }
.campo input, .campo select, .campo textarea { width: 100%; padding: .8rem .9rem; border: 2px solid #8f8576; border-radius: 2px; font: 1rem var(--fuente); background: #fff; color: var(--tinta); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--boton); }
.campo input[aria-invalid="true"] { border-color: #b3372a; background: #fbeae7; }
.con-sufijo { display: flex; align-items: stretch; }
.con-sufijo input { border-right: 0; min-width: 0; }
.con-sufijo span { display: grid; place-items: center; padding: 0 .9rem; background: var(--lienzo); border: 2px solid #8f8576; color: var(--suave); font-family: var(--mono); font-size: .88rem; white-space: nowrap; }
.ayuda { color: var(--suave); font-size: .9rem; margin: .4rem 0 0; }
.error { color: #b3372a; font-weight: 600; min-height: 1.4em; margin: .4rem 0 0; }
.caja .boton { width: 100%; }
.aviso { background: #fbf1dc; border-left: 4px solid #c9922e; padding: 1rem 1.2rem; margin-bottom: 1.4rem; color: #5c4210; }
.separado { margin-top: 1.4rem; }
.sin-borde { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled { opacity: .55; }
.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* Elegir plan: tarjetas de selección (accesibles: son botones de opción reales) */
.opciones-plan { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; display: grid; gap: .7rem; }
.opciones-plan legend { font-weight: 700; color: var(--tinta); margin-bottom: .6rem; padding: 0; }
.opcion-plan { position: relative; }
.opcion-plan input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.opcion-plan label { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .95rem 3rem .95rem 1.1rem; border: 2px solid #8f8576; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.opcion-plan:hover label { border-color: var(--tinta); box-shadow: 3px 3px 0 var(--linea); transform: translate(-1px, -1px); }
.opcion-plan label::after { content: ""; position: absolute; top: 1rem; right: 1rem; width: 1.3rem; height: 1.3rem; border: 2px solid #8f8576; background: #fff; transition: background .15s, border-color .15s; }
.opcion-nombre { font: 700 1.1rem var(--serif); color: var(--tinta); }
.opcion-nombre em { font: 800 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--boton); border: 1.5px solid var(--boton); padding: .12rem .4rem; margin-left: .5rem; vertical-align: .15em; }
.opcion-precio { font: 700 1.05rem var(--mono); color: var(--tinta); text-align: right; letter-spacing: -.03em; }
.opcion-precio small { font: .72rem var(--fuente); color: var(--suave); letter-spacing: 0; }
.opcion-detalle { grid-column: 1 / -1; font-size: .88rem; color: var(--suave); }
.opcion-plan input:checked + label { border-color: var(--tinta); background: #fffaf0; box-shadow: inset 6px 0 0 var(--boton); }
.opcion-plan input:checked + label::after { background: var(--boton) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 80% no-repeat; border-color: var(--boton); }
.opcion-plan input:focus-visible + label { outline: 3px solid var(--acento); outline-offset: 3px; }
fieldset:disabled .opcion-plan input { cursor: not-allowed; }

/* Código de descuento y resumen del precio */
.opcional { font-weight: 400; color: var(--suave); }
.con-boton { display: flex; gap: .6rem; align-items: stretch; }
.con-boton input { flex: 1; min-width: 0; text-transform: uppercase; font-family: var(--mono); letter-spacing: .06em; }
.con-boton .boton { width: auto; padding-inline: 1.1rem; }
.resumen-precio { margin: 0 0 1.2rem; padding: .9rem 1rem; background: var(--lienzo); border-left: 4px solid var(--boton); font: .92rem/1.5 var(--mono); color: var(--tinta); }
.resumen-precio p { margin: 0; }
.resumen-precio .resumen-fuerte { font-weight: 800; }

/* Seguimiento de la creación de la empresa */
.caja-ancha { max-width: 42rem; }
.avance { list-style: none; margin: 1.4rem 0; padding: 0; border-top: 2px solid var(--tinta); }
.etapa { display: flex; align-items: center; gap: .9rem; padding: .9rem .2rem; border-bottom: 1px solid var(--linea); color: var(--suave); }
.etapa-marca { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border: 2px solid currentColor; font: 800 .85rem var(--mono); }
.etapa-hecho { color: var(--tinta); }
.etapa-hecho .etapa-marca { background: var(--ok); border-color: var(--ok); color: #fff; }
.etapa-en_curso { color: var(--tinta); background: #fff6e0; }
.etapa-en_curso .etapa-marca { background: var(--boton); border-color: var(--boton); color: #fff; animation: parpadeo 1.3s ease-in-out infinite; }
.etapa-detenido { color: #b3372a; background: #fbeae7; }
@keyframes parpadeo { 50% { opacity: .45; } }

@media (max-width: 960px) {
  .menu, .enlace-ingresar, .acciones .boton { display: none; }
  .menu-movil { display: block; }
  .portada .contenedor { grid-template-columns: 1fr; gap: 3rem; }
  .portada { padding-block: 3rem 4rem; }
  .fila-def { grid-template-columns: 1fr; gap: .4rem; }
  .pasos { grid-template-columns: 1fr; }
  .pasos li { border-right: 0; margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--linea); }
  .planes { grid-template-columns: 1fr; }
  .plan { border-left: 0; border-top: 2px solid var(--tinta); }
  .plan:first-child { border-top: 0; }
  .pie-grilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .fila { grid-template-columns: 3rem 1fr 4.2rem; }
  .fila span:nth-child(4) { display: none; }
  .libro-pie { flex-direction: column; align-items: flex-start; }
  .pie-grilla { grid-template-columns: 1fr; }
  .seccion { padding-top: 4rem; }
}

/* ───────── Relieve ───────── */
h1, h2 { text-shadow: 0 1px 0 rgba(255, 255, 255, .75); }              /* tipografía «prensada» sobre el papel */
.datos h2, .cierre h2, .datos dt { text-shadow: none; }
.boton-lleno, .boton-tinta { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .26), inset 0 -3px 0 rgba(0, 0, 0, .24); }
.boton-lleno:hover { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .26), inset 0 -3px 0 rgba(0, 0, 0, .24), 4px 4px 0 var(--tinta); }
.boton-tinta:hover { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -3px 0 rgba(0, 0, 0, .3), 4px 4px 0 #fff; }
.boton-borde-oscuro { box-shadow: inset 0 -3px 0 rgba(27, 24, 20, .12); }
.boton:active { transform: translate(1px, 1px); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25); }

/* El libro es una pila de hojas */
.libro { position: relative; isolation: isolate; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.libro::before, .libro::after { content: ""; position: absolute; inset: 0; background: #fff; border: 2px solid var(--tinta); z-index: -1; }
.libro::before { transform: translate(7px, 8px) rotate(1.4deg); background: #fbf8f1; }
.libro::after { transform: translate(14px, 15px) rotate(2.8deg); background: #f3ecdd; }
.libro:hover { transform: rotate(-.7deg) translateY(-3px); }
.libro-cabecera { box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .08); }
.fila { transition: background .15s; }
.libro-cuerpo .fila:not(.encabezado):hover { background: #fff6e0; }
.sello { box-shadow: inset 0 0 0 1px rgba(184, 60, 36, .35); background: rgba(184, 60, 36, .05); }

/* Hojas apiladas también en los formularios */
.caja { position: relative; isolation: isolate; box-shadow: none; }
.caja::before { content: ""; position: absolute; inset: 0; background: #fbf8f1; border: 2px solid var(--tinta); transform: translate(9px, 10px) rotate(.5deg); z-index: -2; }
.caja::after { content: ""; position: absolute; inset: 0; background: #fff; z-index: -1; }

.plan { transition: box-shadow .2s, background .2s; }
.plan:hover { background: #fffaf0; box-shadow: inset 0 6px 0 var(--boton); }
.fila-def { transition: background .2s, padding .2s; }
.fila-def:hover { background: rgba(255, 255, 255, .55); padding-inline: 1rem; }
.lista-filas.oscura .fila-def:hover { background: rgba(255, 255, 255, .05); }
.pasos li::before { text-shadow: 3px 3px 0 var(--linea); }            /* número «en relieve» */
.datos { background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(244, 239, 229, .045) 31px 32px); }
.cierre { background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0, 0, 0, .05) 14px 15px); }
.preguntas details { transition: background .2s; }
.preguntas details[open] { background: rgba(255, 255, 255, .6); padding-inline: 1rem; }

/* ───────── Animaciones (solo CSS; se apagan con «reducir movimiento») ───────── */
@keyframes subir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fila-entra { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes resaltar { to { background-size: 100% 100%; } }
@keyframes sellar { 0% { opacity: 0; transform: rotate(-5deg) scale(2.4); } 55% { opacity: 1; transform: rotate(-5deg) scale(.92); } 75% { transform: rotate(-5deg) scale(1.04); } 100% { opacity: 1; transform: rotate(-5deg) scale(1); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes trazo { from { background-size: 0 2px; } to { background-size: 100% 2px; } }
@keyframes sombra-cabecera { to { box-shadow: 0 10px 0 -4px rgba(27, 24, 20, .16); } }
@keyframes parpadeo { 50% { opacity: .45; } }
@keyframes correr { to { transform: translateX(-50%); } }

.portada-texto > * { animation: subir .75s cubic-bezier(.2, .8, .2, 1) both; }
.portada-texto > :nth-child(2) { animation-delay: .1s; }
.portada-texto > :nth-child(3) { animation-delay: .2s; }
.portada-texto > :nth-child(4) { animation-delay: .3s; }
.libro { animation: subir .9s .25s cubic-bezier(.2, .8, .2, 1) both; }
.libro-cuerpo .fila:not(.encabezado) { animation: fila-entra .5s cubic-bezier(.2, .8, .2, 1) both; }
.libro-cuerpo .fila:nth-child(2) { animation-delay: .75s; }
.libro-cuerpo .fila:nth-child(3) { animation-delay: .95s; }
.libro-cuerpo .fila:nth-child(4) { animation-delay: 1.15s; }
.libro-cuerpo .fila:nth-child(5) { animation-delay: 1.35s; }
.libro-cuerpo .fila:nth-child(6) { animation-delay: 1.55s; }
.libro-pie { animation: subir .5s 1.8s both; }
.libro-pie b { background: linear-gradient(#fbe9a8, #fbe9a8) left 88% / 0 100% no-repeat; animation: resaltar .7s 2.1s ease-out forwards; }
.sello { animation: sellar .55s 2.5s cubic-bezier(.3, 1.4, .5, 1) both; }

/* Al bajar por la página, cada pieza aparece cuando entra en pantalla (los navegadores sin soporte las muestran ya) */
@supports (animation-timeline: view()) {
  .fila-def, .pasos li, .plan, .preguntas details, .aviso-ejemplo { animation: aparecer linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  .numero { animation: trazo linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  .cabecera { animation: sombra-cabecera linear both; animation-timeline: scroll(); animation-range: 0 140px; }
  .cinta-pista { animation: correr linear both; animation-timeline: scroll(root); }
}
@supports not (animation-timeline: scroll()) { .cinta-pista { animation: correr 90s linear infinite; } }
.etapa-en_curso .etapa-marca { animation: parpadeo 1.3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .libro:hover { transform: none; }
  .libro-pie b { background-size: 100% 100%; }
}

/* ── Registro de la tarjeta ── */
.bloque-tarjeta { background: #fff; border: 2px solid var(--tinta); padding: 1.3rem 1.4rem; margin: 1.4rem 0; }
.bloque-tarjeta h2 { margin: 0 0 .6rem; font-size: 1.35rem; }
.bloque-tarjeta p { margin: 0 0 .8rem; }

/* ── Tono: más cerca de la app de InvenTia ─────────────────────────────────────────────────────────────────────────────
   Sin hojas apiladas ni inclinadas, sin sombras duras ni bordes negros gruesos: fondo neutro cálido, bordes finos y suaves, esquinas
   de 8 px y un solo acento. Se mantienen la cabecera negra y la cinta de inventario. */
:root { --borde: rgba(27, 24, 20, .12); --borde-campo: rgba(27, 24, 20, .22); --radio: 8px; --sombra: 0 1px 2px rgba(27, 24, 20, .05), 0 10px 28px -14px rgba(27, 24, 20, .16); }
body { background-color: #f7f5f2; background-image: none; }
h1, h2, h3, .logo, .fila-def dt, .preguntas summary { font-family: var(--fuente); }
h1, h2, h3 { font-weight: 650; letter-spacing: -.028em; line-height: 1.12; }
h1 { letter-spacing: -.035em; }
.logo { font-weight: 700; letter-spacing: -.02em; }
.fila-def dt, .preguntas summary { font-weight: 650; }

.libro, .caja, .planes, .bloque-tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.libro { overflow: hidden; }
.libro::before, .libro::after, .caja::before, .caja::after { display: none; }
.caja { position: static; isolation: auto; background: #fff; }
.libro:hover { transform: none; }
.libro-cabecera { box-shadow: none; }
.fila.encabezado { border-bottom: 1px solid var(--borde); }
.sello { transform: none; animation: none; border-width: 1px; border-radius: 6px; box-shadow: none; }

.planes { overflow: hidden; }
.plan { border-left: 1px solid var(--borde); }
.plan.destacado, .plan:hover { box-shadow: inset 0 3px 0 var(--boton); }
.numero { background: none; border-top: 1px solid var(--borde); }
.numero.claro { background: none; border-top: 1px solid #4a4137; }

.boton { border-width: 1px; border-radius: var(--radio); }
.boton:hover, .boton-lleno:hover, .boton-tinta:hover, .cabecera .boton-lleno:hover { transform: none; box-shadow: none; }
.boton:active { transform: none; box-shadow: none; }
.boton-lleno { box-shadow: 0 1px 2px rgba(184, 60, 36, .28); }
.boton-lleno:hover { background: var(--boton-hover); }
.boton-tinta { box-shadow: 0 1px 2px rgba(27, 24, 20, .25); }
.boton-borde-oscuro { box-shadow: none; border-color: var(--borde-campo); background: #fff; }
.boton-borde-oscuro:hover { border-color: var(--tinta); background: #fff; }
.menu-movil summary { border-width: 1px; border-radius: var(--radio); }
.menu-movil nav { border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }

.campo input, .campo select, .campo textarea { border: 1px solid var(--borde-campo); border-radius: var(--radio); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--boton); box-shadow: 0 0 0 3px rgba(224, 86, 59, .12); outline: none; }
.con-sufijo input { border-radius: var(--radio) 0 0 var(--radio); }
.con-sufijo span { border: 1px solid var(--borde-campo); border-left: 0; border-radius: 0 var(--radio) var(--radio) 0; }
.opcion-plan label { border: 1px solid var(--borde-campo); border-radius: var(--radio); }
.opcion-plan:hover label { border-color: var(--tinta); box-shadow: none; transform: none; }
.opcion-plan input:checked + label { border-color: var(--boton); background: #fff; box-shadow: 0 0 0 3px rgba(224, 86, 59, .12); }
.opcion-plan label::after { border-width: 1px; border-radius: 50%; }
.aviso, .aviso-ejemplo { border-radius: var(--radio); }
.aviso-ejemplo { border-width: 1px; }
.etapa-marca { border-width: 1.5px; border-radius: 50%; }
.etapa-en_curso, .etapa-detenido { border-radius: var(--radio); }
.bloque-tarjeta { padding: 1.3rem 1.4rem; }

/* Gráfico de fondo de la portada, como en la app: salidas reales, pronóstico con rango y cruce con el stock disponible. Cubre todo el fondo; marcado arriba, vacío hacia abajo. */
.portada { position: relative; isolation: isolate; }
.portada::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700' preserveAspectRatio='xMidYMin slice'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23e0563b' stop-opacity='.30'/><stop offset='1' stop-color='%23e0563b' stop-opacity='0'/></linearGradient></defs><path d='M0 480.0H1600' stroke='%2317140f' stroke-opacity='0.25'/><text x='96' y='485.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='end' fill='%2317140f' fill-opacity='0.5'>0</text><path d='M0 420.0H1600' stroke='%2317140f' stroke-opacity='0.08'/><path d='M0 360.0H1600' stroke='%2317140f' stroke-opacity='0.08'/><text x='96' y='365.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='end' fill='%2317140f' fill-opacity='0.5'>1.000</text><path d='M0 300.0H1600' stroke='%2317140f' stroke-opacity='0.08'/><path d='M0 240.0H1600' stroke='%2317140f' stroke-opacity='0.08'/><text x='96' y='245.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='end' fill='%2317140f' fill-opacity='0.5'>2.000</text><path d='M0 180.0H1600' stroke='%2317140f' stroke-opacity='0.08'/><path d='M0 120.0H1600' stroke='%2317140f' stroke-opacity='0.08'/><text x='96' y='125.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='end' fill='%2317140f' fill-opacity='0.5'>3.000</text><text x='120' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S1</text><text x='225' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S2</text><text x='330' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S3</text><text x='435' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S4</text><text x='540' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S5</text><text x='645' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S6</text><text x='750' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S7</text><text x='855' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S8</text><text x='960' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='700' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.9'>S9</text><text x='1065' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S10</text><text x='1170' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S11</text><text x='1275' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S12</text><text x='1380' y='510.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='500' letter-spacing='1' text-anchor='middle' fill='%2317140f' fill-opacity='0.5'>S13</text><polygon points='960,222.0 1065,187.2 1170,147.6 1275,108.0 1380,74.4 1380,153.6 1275,168.0 1170,188.4 1065,208.8 960,222.0' fill='%23e0563b' fill-opacity='.14'/><polygon points='120,480.0 120,324.0 225,300.0 330,312.0 435,276.0 540,282.0 645,252.0 750,258.0 855,228.0 960,222.0 960,480.0' fill='url(%23g)'/><path d='M0 168.0H1600' stroke='%23c0392b' stroke-opacity='.6' stroke-width='2' stroke-dasharray='2 6' stroke-linecap='round'/><text x='1480' y='198.0' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='700' letter-spacing='1' text-anchor='end' fill='%23c0392b' fill-opacity='0.85'>STOCK DISPONIBLE · 2.600</text><path d='M960 50V480.0' stroke='%2317140f' stroke-opacity='.3' stroke-dasharray='4 5'/><polyline points='120,324.0 225,300.0 330,312.0 435,276.0 540,282.0 645,252.0 750,258.0 855,228.0 960,222.0' fill='none' stroke='%2317140f' stroke-opacity='.85' stroke-width='3.5' stroke-linejoin='round' stroke-linecap='round'/><polyline points='960,222.0 1065,198.0 1170,168.0 1275,138.0 1380,114.0' fill='none' stroke='%23e0563b' stroke-width='3.5' stroke-dasharray='9 8' stroke-linecap='round'/><circle cx='120' cy='324.0' r='4.5' fill='%23f7f5f2' stroke='%2317140f' stroke-opacity='.85' stroke-width='2.5'/><circle cx='225' cy='300.0' r='4.5' fill='%23f7f5f2' stroke='%2317140f' stroke-opacity='.85' stroke-width='2.5'/><circle cx='330' cy='312.0' r='4.5' fill='%23f7f5f2' stroke='%2317140f' stroke-opacity='.85' stroke-width='2.5'/><circle cx='435' cy='276.0' r='4.5' fill='%23f7f5f2' stroke='%2317140f' stroke-opacity='.85' stroke-width='2.5'/><circle cx='540' cy='282.0' r='4.5' fill='%23f7f5f2' stroke='%2317140f' stroke-opacity='.85' stroke-width='2.5'/><circle cx='645' cy='252.0' r='4.5' fill='%23f7f5f2' stroke='%2317140f' stroke-opacity='.85' stroke-width='2.5'/><circle cx='750' cy='258.0' r='4.5' fill='%23f7f5f2' stroke='%2317140f' stroke-opacity='.85' stroke-width='2.5'/><circle cx='855' cy='228.0' r='4.5' fill='%23f7f5f2' stroke='%2317140f' stroke-opacity='.85' stroke-width='2.5'/><circle cx='960' cy='222.0' r='4.5' fill='%23f7f5f2' stroke='%2317140f' stroke-opacity='.85' stroke-width='2.5'/><circle cx='960' cy='222.0' r='7' fill='%23e0563b' stroke='%23f7f5f2' stroke-width='3'/><circle cx='1170' cy='168.0' r='6' fill='%23c0392b' stroke='%23f7f5f2' stroke-width='3'/><text x='948' y='46' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='14' font-weight='700' letter-spacing='1' text-anchor='end' fill='%2317140f' fill-opacity='0.9'>HOY</text><text x='972' y='46' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='14' font-weight='700' letter-spacing='1' text-anchor='start' fill='%23e0563b' fill-opacity='1'>PRONÓSTICO</text><text x='120' y='46' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='14' font-weight='700' letter-spacing='1' text-anchor='start' fill='%2317140f' fill-opacity='0.9'>SALIDAS DE CAJA CARTÓN · UNIDADES POR SEMANA</text><path d='M1130 41H1154' stroke='%2317140f' stroke-opacity='.85' stroke-width='3.5' stroke-linecap='round'/><text x='1162' y='46' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='600' letter-spacing='1' text-anchor='start' fill='%2317140f' fill-opacity='0.7'>REAL</text><path d='M1230 41H1254' stroke='%23e0563b' stroke-width='3.5' stroke-dasharray='6 5'/><text x='1262' y='46' font-family='ui-monospace,Menlo,Consolas,monospace' font-size='13' font-weight='600' letter-spacing='1' text-anchor='start' fill='%2317140f' fill-opacity='0.7'>PRONÓSTICO</text></svg>") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .06) 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .06) 100%); }
@media (max-width: 900px) { .portada::before { background-size: 100% auto; height: 60vw; bottom: auto; } }