/* ==========================================================================
   Fayter — Sistema de diseño
   Dhomper Tecnologías
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tipografía — alojada en este servidor, no en Google
   --------------------------------------------------------------------------

   Inter e Inter Tight, © The Inter Project Authors, bajo SIL Open Font
   License 1.1. La licencia completa está en assets/fonts/OFL.txt y debe
   viajar con los archivos: la OFL exige distribuirla junto a la fuente.

   Se sirven desde aquí y no desde fonts.gstatic.com a propósito: cargarlas
   de Google enviaba la IP de cada visitante a un tercero, lo que convierte
   una tipografía en una transferencia de datos declarable ante el INAI.

   Son fuentes VARIABLES (font-weight: 400 700), no estáticas. Por eso el
   titular del hero puede pedir font-weight: 620 y obtener exactamente 620
   en vez de saltar a 600.

   Los unicode-range hacen que el navegador descargue latin-ext SOLO si la
   página contiene alguno de esos caracteres. En un sitio en español eso casi
   nunca pasa, así que sus ~170 KB no se piden: están por si algún día entra
   un nombre con ł, ř o ș.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/inter-tight-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/inter-tight-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Tinta y papel */
	--ink:            #0A0C10;
	--ink-2:          #12161C;
	--ink-3:          #1B212A;
	--paper:          #FBFBF8;
	--paper-2:        #F2F2ED;

	/* --- Rojo de marca: #f23838 ---
	   Para cambiar el rojo, toca SOLO --accent-rgb: todo lo demás deriva de ahí.

	   Este rojo es claro, y eso decide el color del texto que va ENCIMA:
	     tinta oscura -> 5.03:1  (pasa AA)
	     blanco       -> 3.89:1  (NO pasa)
	   Por eso --accent-on es tinta, no blanco. Si algún día oscureces el rojo,
	   inviértelo: por debajo de ~#D42B2B el blanco pasa a ser la opción legible.

	   Sobre tinta oscura el rojo ya rinde 5.03:1, así que sirve tal cual para
	   texto e iconos. Sobre papel claro cae a 3.71:1: ahí va --accent-deep. */
	--accent-rgb:     242, 56, 56;
	--accent:         rgb(var(--accent-rgb));
	--accent-hover:   #FF5252;
	--accent-deep:    #C21F1F;
	--accent-on:      var(--ink);
	--accent-soft:    rgba(var(--accent-rgb), 0.12);

	/* --- Verde: NO es de marca, es semántico ---
	   Se usa solo en "Venta aprobada". En una terminal de pago el verde significa
	   aprobado y el rojo, rechazado: un palomeo rojo diciendo "aprobada" se lee
	   como declinada. No usar este verde para nada más. */
	--ok:             #12D07E;

	/* Texto sobre papel */
	--text:           #0A0C10;
	--text-2:         #4A5260;
	--text-3:         #79818F;

	/* Texto sobre tinta */
	--on-ink:         #FBFBF8;
	--on-ink-2:       rgba(251, 251, 248, 0.66);
	--on-ink-3:       rgba(251, 251, 248, 0.40);

	/* Líneas — hairlines, nunca #ddd */
	--line:           rgba(10, 12, 16, 0.10);
	--line-soft:      rgba(10, 12, 16, 0.06);
	--line-on-ink:    rgba(251, 251, 248, 0.12);

	/* Tipografía */
	--font-display:   'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Escala tipográfica fluida.
	   El tope del display está calculado para la columna de ~546px del hero:
	   más grande, el titular se rompe en cinco líneas y estira el hero. */
	--fs-display:     clamp(2.5rem, 1.55rem + 3vw, 4rem);
	--fs-h2:          clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	--fs-h3:          clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
	--fs-lead:        clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
	--fs-body:        1rem;
	--fs-sm:          0.875rem;
	--fs-xs:          0.78125rem;

	/* Ritmo vertical */
	--section-y:      clamp(4.5rem, 3rem + 7vw, 9rem);
	--gutter:         clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
	--maxw:           1200px;

	/* Radios */
	--r-sm:           8px;
	--r-md:           14px;
	--r-lg:           22px;
	--r-xl:           32px;

	/* Sombras en capas — la diferencia entre barato y caro */
	--shadow-sm:
		0 1px 2px rgba(10, 12, 16, 0.04),
		0 2px 6px rgba(10, 12, 16, 0.04);
	--shadow-md:
		0 2px 4px rgba(10, 12, 16, 0.03),
		0 8px 16px rgba(10, 12, 16, 0.05),
		0 16px 32px rgba(10, 12, 16, 0.05);
	--shadow-xl:
		0 2px 4px rgba(10, 12, 16, 0.04),
		0 8px 16px rgba(10, 12, 16, 0.06),
		0 24px 48px rgba(10, 12, 16, 0.09),
		0 48px 96px rgba(10, 12, 16, 0.12);
	--shadow-glow:    0 0 0 1px rgba(var(--accent-rgb), 0.25), 0 8px 32px rgba(var(--accent-rgb), 0.22);

	/* Movimiento — una sola curva, aplicada en todo */
	--ease:           cubic-bezier(0.16, 1, 0.3, 1);
	--ease-inout:     cubic-bezier(0.65, 0, 0.35, 1);
	--dur:            0.55s;

	/* Botones flotantes: se apilan en la esquina, así que sus medidas viven
	   aquí y el de "subir" se coloca a partir de las del de WhatsApp. */
	--fab:            56px;
	--fab-gap:        clamp(0.875rem, 2vw, 1.75rem);
}

@media (max-width: 640px) {
	:root { --fab: 52px; }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* El [hidden] del navegador es UA-level: cualquier `display` de autor lo pisa.
   Sin esto, ocultar un elemento con display:grid/flex vía .hidden no hace nada. */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	font-feature-settings: 'ss01', 'cv05';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.035em;   /* tracking negativo = el look editorial caro */
	margin: 0;
	text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

/* Focus visible de verdad — accesibilidad leída como calidad */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection { background: var(--accent); color: var(--accent-on); }

/* --------------------------------------------------------------------------
   3. Utilidades de layout
   -------------------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--paper2 { background: var(--paper-2); }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-3);
}
.section--ink .eyebrow { color: var(--on-ink-3); }

.eyebrow::before {
	content: '';
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.lead {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--text-2);
	letter-spacing: -0.011em;
}
.section--ink .lead { color: var(--on-ink-2); }

/* Grano sutil sobre superficies oscuras — mata el look "plano de plantilla" */
.grain::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9375rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 100px;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	white-space: nowrap;
	transition:
		transform 0.35s var(--ease),
		box-shadow 0.35s var(--ease),
		background-color 0.35s var(--ease),
		border-color 0.35s var(--ease),
		color 0.35s var(--ease);
}

.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary {
	background: var(--accent);
	color: var(--accent-on);
	box-shadow: 0 1px 2px rgba(10,12,16,.08), 0 6px 20px rgba(var(--accent-rgb), 0.28);
}
.btn--primary:hover {
	background: var(--accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(10,12,16,.08), 0 14px 34px rgba(var(--accent-rgb), 0.38);
}

.btn--ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--text);
}
.btn--ghost:hover {
	border-color: var(--text);
	transform: translateY(-2px);
	background: rgba(10, 12, 16, 0.03);
}

.section--ink .btn--ghost,
.hero .btn--ghost {
	border-color: var(--line-on-ink);
	color: var(--on-ink);
}
.section--ink .btn--ghost:hover,
.hero .btn--ghost:hover {
	border-color: var(--on-ink);
	background: rgba(251, 251, 248, 0.07);
}

.btn--lg { padding: 1.0625rem 2.125rem; font-size: 1rem; }

/* Flecha que se desliza al hover */
.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Navegación
   -------------------------------------------------------------------------- */

.nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	/* Arranca sobre el hero oscuro -> tinta clara. Al pegarse cambia a fondo
	   claro y la tinta se invierte. */
	color: var(--on-ink);
	transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
}

.nav.is-stuck { color: var(--text); }

.nav__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	height: 76px;
	transition: height 0.5s var(--ease);
}

.nav.is-stuck {
	background: rgba(251, 251, 248, 0.82);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--line-soft);
}
.nav.is-stuck .nav__inner { height: 64px; }

.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	font-family: var(--font-display);
	font-size: 1.3125rem;
	font-weight: 700;
	letter-spacing: -0.045em;
	margin-right: auto;
}

/* La bolsa de la marca (theme/img/fayter-logo.svg).

   Va como MÁSCARA y no como <img>: la máscara sólo toma la silueta del SVG
   y el color lo pone background. Así un único archivo sirve para los tres
   fondos donde aparece el logo (el header sobre el hero oscuro, el header
   pegado sobre fondo claro y el pie oscuro) sin tener que mantener una
   copia por color. Y si algún día cambia el rojo, se cambia en un solo
   sitio: la variable accent.

   Por eso también da igual que fayter-logo.svg lleve dentro el rojo del
   logo original (#E30613): la máscara lo descarta y aquí manda accent, que
   es el rojo del resto del sitio. Ver theme/img/README.md.

   30px y no los 28px del cuadrito anterior: aquello era una mancha sólida y
   esto es un contorno, que pesa menos a la vista y necesita algo más de
   tamaño para equilibrar la palabra "Fayter" de al lado. */
.logo__mark {
	width: 30px;
	height: 30px;
	flex: none;
	background: var(--accent);
	-webkit-mask: url('../img/fayter-logo.svg') center / contain no-repeat;
	        mask: url('../img/fayter-logo.svg') center / contain no-repeat;
	transition: transform 0.5s var(--ease);
}
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); }

.nav__links {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Hereda la tinta del nav (clara sobre el hero, oscura al pegarse) y baja el
   contraste con opacidad, no con un color fijo. */
.nav__link {
	position: relative;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: currentColor;
	opacity: 0.68;
	transition: opacity 0.3s var(--ease);
}
.nav__link:hover { opacity: 1; }

/* Subrayado que crece desde la izquierda */
.nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 100%;
	height: 1.5px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }

/* --- Sección actual (lo pone el scroll spy de fayter.js) -------------------
   Subrayado fijo + color de marca. El rojo cambia según el fondo de la barra:
   sobre la tinta del hero rinde 5:1, pero sobre la barra clara cae a 3.7:1 y
   hay que bajar a --accent-deep. En la práctica manda el caso claro, porque
   cuando hay sección actual ya hiciste scroll y la barra está pegada. */
.nav__link.is-current {
	opacity: 1;
	color: var(--accent);
}
.nav__link.is-current::after { transform: scaleX(1); }

.nav.is-stuck .nav__link.is-current { color: var(--accent-deep); }

/* En el panel móvil el subrayado no aplica: se marca con una barra al costado */
@media (max-width: 900px) {
	.nav__link.is-current { color: var(--accent-deep); }
}

.nav__cta { padding: 0.625rem 1.25rem; font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   5b. Menú móvil
   -------------------------------------------------------------------------- */

.nav__toggle {
	display: none;
	place-items: center;
	width: 42px; height: 42px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 11px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.3s var(--ease);
}
.nav__toggle:hover { opacity: 1; }

/* Tres líneas que se vuelven X: la de en medio se desvanece, las otras giran */
.nav__toggle span {
	position: relative;
	width: 17px; height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transition: background-color 0.2s var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
	content: '';
	position: absolute;
	left: 0;
	width: 17px; height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.4s var(--ease);
}
.nav__toggle span::before { top: -5.5px; }
.nav__toggle span::after  { top: 5.5px; }

.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(5.5px) rotate(45deg); }
.nav.is-open .nav__toggle span::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
	.nav__toggle { display: grid; }

	/* Con el panel abierto la barra se vuelve clara aunque esté sobre el hero
	   oscuro, para que barra y panel se lean como una sola pieza. */
	.nav.is-open {
		color: var(--text);
		background: var(--paper);
	}

	.nav__links {
		position: absolute;
		top: 100%; left: 0; right: 0;
		display: grid;
		gap: 0;
		padding: 0.5rem var(--gutter) 1.25rem;
		/* Sólido, no esmerilado: encima del hero el titular blanco se traslucía
		   y el panel se veía lavado. */
		background: var(--paper);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-md);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition:
			transform 0.4s var(--ease),
			opacity 0.4s var(--ease),
			visibility 0.4s;
	}

	.nav.is-open .nav__links {
		transform: none;
		opacity: 1;
		visibility: visible;
	}

	.nav__links li + li { border-top: 1px solid var(--line-soft); }

	/* El panel siempre es claro: la tinta no sigue a la barra aquí */
	.nav__link {
		display: block;
		padding: 0.9375rem 0;
		font-size: 1.0625rem;
		color: var(--text);
		opacity: 1;
	}
	.nav__link::after { display: none; }
}

@media (max-width: 560px) {
	.nav__cta { padding: 0.5625rem 1rem; font-size: 0.8125rem; }
	.nav__inner { gap: 0.75rem; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	background: var(--ink);
	color: var(--on-ink);
	padding-block: 8.5rem 5rem;
	overflow: hidden;
}

/* Malla de luz detrás del hero */
.hero__glow {
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(90px);
}
.hero__glow--1 {
	width: 620px; height: 620px;
	top: -220px; right: -120px;
	background: radial-gradient(circle, rgba(var(--accent-rgb), 0.30), transparent 68%);
}
/* Ámbar, no azul: el azul contra el rojo daba un choque frío/cálido. */
.hero__glow--2 {
	width: 520px; height: 520px;
	bottom: -260px; left: -160px;
	background: radial-gradient(circle, rgba(255,140,60,0.16), transparent 68%);
}

/* Cuadrícula técnica, casi invisible */
.hero__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--line-on-ink) 1px, transparent 1px),
		linear-gradient(90deg, var(--line-on-ink) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(ellipse 90% 60% at 50% 40%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 40%, #000 20%, transparent 75%);
	opacity: 0.5;
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: clamp(2.5rem, 4vw, 4.5rem);
	align-items: center;
}

@media (max-width: 980px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero { padding-block: 7rem 4rem; }
}

.hero .eyebrow { color: var(--accent); margin-bottom: 1.5rem; }

.hero h1 {
	font-size: var(--fs-display);
	font-weight: 620;
	letter-spacing: -0.045em;
	margin-bottom: 1.5rem;
}

.hero h1 em {
	font-style: normal;
	color: var(--accent);
	position: relative;
	white-space: nowrap;
}

/* Subrayado dibujado a mano bajo la palabra clave */
.hero h1 em::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0.06em;
	height: 0.09em;
	background: var(--accent);
	opacity: 0.28;
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	animation: draw 1s var(--ease) 0.7s forwards;
}

@keyframes draw { to { transform: scaleX(1); } }

.hero .lead { max-width: 30rem; margin-bottom: 2.25rem; }

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-bottom: 2rem;
}

.hero__note {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-sm);
	color: var(--on-ink-3);
}

.pulse {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.7);
	animation: pulse 2.4s var(--ease-inout) infinite;
	flex: none;
}

@keyframes pulse {
	50%  { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* --------------------------------------------------------------------------
   7. Terminal POS interactiva — la pieza central
   -------------------------------------------------------------------------- */

/* La terminal va sobre el hero, que también es oscuro. Sin una superficie más
   clara y una luz de canto arriba, el objeto se funde con el fondo y se pierde
   la pieza central de la página. */
.pos {
	position: relative;
	background: linear-gradient(168deg, #232A35, #12171E);
	border: 1px solid rgba(251, 251, 248, 0.16);
	border-radius: var(--r-xl);
	padding: 0.875rem;
	box-shadow:
		0 2px 8px rgba(0,0,0,.4),
		0 24px 60px rgba(0,0,0,.55),
		0 60px 120px rgba(0,0,0,.45),
		inset 0 1px 0 rgba(255,255,255,.14);
	/* Vía --t para que el reveal no lo pise (ver sección 18) */
	--t: perspective(2000px) rotateY(-7deg) rotateX(2.5deg);
	transform: var(--t);
	transition: transform 1.1s var(--ease);
}
.pos:hover { --t: perspective(2000px) rotateY(-2.5deg) rotateX(1deg); }

@media (max-width: 980px) {
	.pos, .pos:hover { --t: none; }
}

.pos__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.5rem 0.75rem;
}

.pos__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }

.pos__title {
	margin-left: auto;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-ink-3);
}

/* El menú se lleva más ancho que el ticket: con 1.15fr las celdas quedaban en
   69px y "Chilaquiles" se recortaba. */
.pos__body {
	display: grid;
	grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
	gap: 0.875rem;
}

@media (max-width: 480px) { .pos__body { grid-template-columns: 1fr; } }

/* — Rejilla de productos — */
.pos__menu {
	background: rgba(255,255,255,.028);
	border: 1px solid var(--line-on-ink);
	border-radius: var(--r-md);
	padding: 0.75rem;
}

.pos__label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--on-ink-3);
	margin-bottom: 0.625rem;
}

/* minmax(0, 1fr) y no 1fr: 1fr respeta el ancho minimo del contenido, asi que
   "Chilaquiles" salia mas ancho que "Agua" y la rejilla quedaba despareja.
   Tres columnas en todos los tamaños: con 9 productos dan 3x3 exactas. */
.pos__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.4375rem;
}

.prod {
	background: rgba(255,255,255,.05);
	border: 1px solid var(--line-on-ink);
	border-radius: 10px;
	padding: 0.625rem 0.4375rem;
	text-align: left;
	cursor: pointer;
	color: var(--on-ink);
	transition:
		transform 0.28s var(--ease),
		background-color 0.28s var(--ease),
		border-color 0.28s var(--ease),
		box-shadow 0.28s var(--ease);
}

.prod:hover {
	background: rgba(var(--accent-rgb), 0.14);
	border-color: rgba(var(--accent-rgb), 0.45);
	transform: translateY(-2px);
}

/* Feedback táctil al agregar */
.prod.is-hit {
	animation: hit 0.4s var(--ease);
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-on);
}

@keyframes hit {
	0%   { transform: scale(1); }
	40%  { transform: scale(0.93); }
	100% { transform: scale(1); }
}

.prod__emoji { font-size: 1.0625rem; line-height: 1; margin-bottom: 0.375rem; }

/* El ellipsis es red de seguridad para nombres largos, no el caso normal:
   la celda está dimensionada para que "Chilaquiles" quepa entero. */
.prod__name {
	display: block;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin-bottom: 0.125rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.prod__price {
	display: block;
	font-size: 0.625rem;
	color: var(--on-ink-3);
	font-variant-numeric: tabular-nums;
}
.prod.is-hit .prod__price { color: rgba(10,12,16,.7); }

/* — Ticket — */
.pos__ticket {
	background: rgba(255,255,255,.028);
	border: 1px solid var(--line-on-ink);
	border-radius: var(--r-md);
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	min-height: 316px;
}

.ticket__items {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	max-height: 172px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.16) transparent;
}
.ticket__items::-webkit-scrollbar { width: 3px; }
.ticket__items::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }

.ticket__empty {
	height: 100%;
	min-height: 150px;
	display: grid;
	place-content: center;
	justify-items: center;
	text-align: center;
	gap: 0.625rem;
	color: var(--on-ink-3);
	font-size: 0.75rem;
	padding: 1rem;
}
.ticket__empty .icon { width: 26px; height: 26px; opacity: 0.45; }

.item {
	display: grid;
	grid-template-columns: 22px 1fr auto;
	gap: 0.5rem;
	align-items: center;
	padding: 0.4375rem 0;
	border-bottom: 1px solid rgba(255,255,255,.05);
	font-size: 0.75rem;
	animation: slide-in 0.42s var(--ease);
}

@keyframes slide-in {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: none; }
}

.item__qty {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 0.6875rem;
	color: var(--accent);
	background: var(--accent-soft);
	border-radius: 5px;
	text-align: center;
	padding: 0.125rem 0;
}

.item__name {
	color: var(--on-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item__sum {
	font-variant-numeric: tabular-nums;  /* cifras que no bailan = producto real */
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ticket__totals {
	border-top: 1px dashed rgba(255,255,255,.16);
	margin-top: 0.625rem;
	padding-top: 0.625rem;
}

.row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.71875rem;
	color: var(--on-ink-3);
	margin-bottom: 0.3125rem;
}
.row span:last-child { font-variant-numeric: tabular-nums; }

.row--total {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.035em;
	color: var(--on-ink);
	margin: 0.625rem 0 0.75rem;
}

.pos__pay {
	width: 100%;
	padding: 0.8125rem;
	border: 0;
	border-radius: 10px;
	background: var(--accent);
	color: var(--accent-on);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	cursor: pointer;
	transition: all 0.3s var(--ease);
}
.pos__pay:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--shadow-glow); }
.pos__pay:disabled { background: rgba(255,255,255,.07); color: var(--on-ink-3); cursor: not-allowed; }

/* — Pantalla de "Aprobado" — */
.pos__done {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: rgba(10, 12, 16, 0.93);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: var(--r-xl);
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.75rem;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.pos__done.is-on { opacity: 1; visibility: visible; }

/* Verde, no rojo: es un estado de pago, no un elemento de marca. Un palomeo
   rojo bajo "Venta aprobada" se lee como rechazada. Ver --ok en los tokens. */
.check {
	width: 66px; height: 66px;
	border-radius: 50%;
	background: var(--ok);
	display: grid;
	place-items: center;
	transform: scale(0);
}
.pos__done.is-on .check { animation: pop 0.7s var(--ease) 0.1s forwards; }

@keyframes pop {
	0%   { transform: scale(0) rotate(-45deg); }
	60%  { transform: scale(1.16) rotate(6deg); }
	100% { transform: scale(1) rotate(0); }
}

.check svg { width: 30px; height: 30px; stroke: var(--ink); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.check path { stroke-dasharray: 32; stroke-dashoffset: 32; }
.pos__done.is-on .check path { animation: tick 0.45s var(--ease) 0.45s forwards; }

@keyframes tick { to { stroke-dashoffset: 0; } }

.pos__done h4 { font-size: 1.4375rem; font-weight: 700; }
.pos__done p { font-size: 0.8125rem; color: var(--on-ink-3); }
.pos__done .amount { color: var(--ok); font-variant-numeric: tabular-nums; }

/* Etiqueta flotante que ancla el demo */
.pos__hint {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;
	background: var(--accent);
	color: var(--accent-on);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	padding: 0.3125rem 0.875rem;
	border-radius: 100px;
	white-space: nowrap;
	box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
	animation: bob 3s var(--ease-inout) infinite;
}

@keyframes bob {
	50% { transform: translateX(-50%) translateY(-4px); }
}

/* La barra de cifras (.strip / .stat) se eliminó junto con su HTML: mostraba
   números inventados. Está en el historial de git. */

/* --------------------------------------------------------------------------
   9. Antes / Después
   -------------------------------------------------------------------------- */

.compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-top: 3rem;
}

@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

.card {
	border-radius: var(--r-lg);
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	border: 1px solid var(--line);
	background: var(--paper);
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.card--bad { background: var(--paper-2); border-color: var(--line-soft); }
.card--good {
	background: var(--ink);
	color: var(--on-ink);
	border-color: transparent;
	box-shadow: var(--shadow-xl);
	position: relative;
	overflow: hidden;
}
.card--good::before {
	content: '';
	position: absolute;
	top: -60px; right: -60px;
	width: 220px; height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--accent-rgb), .28), transparent 70%);
	filter: blur(40px);
}

.card h3 { font-size: var(--fs-h3); margin-bottom: 1.25rem; position: relative; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; position: relative; }

.checklist li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 0.75rem;
	align-items: start;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.checklist .mark {
	width: 20px; height: 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	margin-top: 1px;
	flex: none;
}

.card--bad .mark { background: rgba(10,12,16,.07); color: var(--text-3); }
.card--bad li { color: var(--text-2); }
.card--good .mark { background: var(--accent); color: var(--accent-on); }
.card--good li { color: var(--on-ink-2); }

/* --------------------------------------------------------------------------
   10. Pasos
   -------------------------------------------------------------------------- */

.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 3rem;
	counter-reset: step;
}

@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.step {
	position: relative;
	padding: 2rem 1.5rem 1.75rem;
	border-radius: var(--r-lg);
	border: 1px solid var(--line-on-ink);
	background: rgba(255,255,255,.028);
	transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.step:hover {
	background: rgba(255,255,255,.055);
	border-color: rgba(var(--accent-rgb), .35);
	--t: translateY(-4px);
}

.step__n {
	counter-increment: step;
	font-family: var(--font-display);
	font-size: 3.25rem;
	font-weight: 700;
	letter-spacing: -0.06em;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(var(--accent-rgb), 0.5);
	margin-bottom: 1rem;
	transition: color 0.5s var(--ease);
}
.step__n::before { content: '0' counter(step); }
.step:hover .step__n { color: rgba(var(--accent-rgb), 0.16); }

.step h3 { font-size: 1.25rem; margin-bottom: 0.625rem; }
.step p { font-size: 0.9375rem; color: var(--on-ink-2); line-height: 1.55; }

/* --------------------------------------------------------------------------
   11. Funcionalidades (bento)
   -------------------------------------------------------------------------- */

.bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1rem;
	margin-top: 3rem;
}

/* Las filas tienen que sumar 6 exactas o la última queda a medias:
   3+3 · 2+2+2 · 6 */
.bento > * { grid-column: span 2; }
.bento > .feat--wide { grid-column: span 3; }
.bento > .feat--full { grid-column: span 6; }

@media (max-width: 900px) {
	.bento { grid-template-columns: 1fr 1fr; }
	.bento > *,
	.bento > .feat--wide { grid-column: span 1; }
	/* La ancha sigue ocupando la fila entera: es el cierre de la sección */
	.bento > .feat--full { grid-column: span 2; }
}
@media (max-width: 560px) {
	.bento { grid-template-columns: 1fr; }
	.bento > .feat--full { grid-column: span 1; }
}

.feat {
	padding: 1.75rem 1.5rem;
	border-radius: var(--r-lg);
	border: 1px solid var(--line);
	background: var(--paper);
	position: relative;
	overflow: hidden;
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.feat:hover {
	--t: translateY(-5px);
	box-shadow: var(--shadow-md);
	border-color: rgba(var(--accent-rgb), .4);
}

.feat__icon {
	width: 42px; height: 42px;
	border-radius: 11px;
	background: var(--ink);
	color: var(--accent);
	display: grid;
	place-items: center;
	margin-bottom: 1.125rem;
	transition: transform 0.5s var(--ease);
}
.feat:hover .feat__icon { transform: scale(1.09) rotate(-6deg); }

/* Iconos trazados, no emoji: heredan el acento y comparten grosor de línea */
.icon {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	stroke-width: 1.75;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.feat h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; letter-spacing: -0.025em; }
.feat p { font-size: 0.875rem; color: var(--text-2); line-height: 1.55; }

/* --------------------------------------------------------------------------
   12. Canales
   -------------------------------------------------------------------------- */

.channels {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 3rem;
}

@media (max-width: 860px) { .channels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .channels { grid-template-columns: 1fr; } }

.channel {
	padding: 1.75rem 1.375rem;
	border-radius: var(--r-lg);
	border: 1px solid var(--line-on-ink);
	background: rgba(255,255,255,.028);
	text-align: center;
	transition: all 0.5s var(--ease);
}
.channel:hover {
	background: rgba(var(--accent-rgb), .09);
	border-color: rgba(var(--accent-rgb), .4);
	--t: translateY(-4px);
}

.channel__icon {
	color: var(--accent);
	margin-bottom: 0.875rem;
	display: flex;
	justify-content: center;
	transition: transform 0.5s var(--ease);
}
.channel__icon .icon { width: 26px; height: 26px; }
.channel:hover .channel__icon { transform: translateY(-2px) scale(1.08); }
.channel h3 { font-size: 1rem; margin-bottom: 0.375rem; }
.channel p { font-size: 0.8125rem; color: var(--on-ink-3); line-height: 1.5; }

/* Los testimonios (.quotes / .quote / .avatar) se eliminaron junto con su
   HTML: las personas eran inventadas. Está en el historial de git. */

/* --------------------------------------------------------------------------
   14. Precios
   -------------------------------------------------------------------------- */

/* Cuatro planes. minmax(0,1fr) y no 1fr: con 1fr una lista larga ensancha su
   columna y las cuatro dejan de medir igual. */
.plans {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 3rem;
	align-items: start;
}

/* A 4 columnas cada tarjeta cae a ~260px: 2x2 antes de que se apelmacen */
@media (max-width: 1080px) {
	.plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (max-width: 620px) {
	.plans { grid-template-columns: 1fr; }
}

.plan {
	padding: 1.75rem 1.5rem;
	border-radius: var(--r-lg);
	border: 1px solid var(--line);
	background: var(--paper);
	display: flex;
	flex-direction: column;
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.plan:hover { --t: translateY(-4px); box-shadow: var(--shadow-md); }

/* El plan ancla: elevado, oscuro, imposible de no ver */
.plan--featured {
	background: var(--ink);
	color: var(--on-ink);
	border-color: transparent;
	box-shadow: var(--shadow-xl);
	position: relative;
	overflow: hidden;
}
/* Solo escala en la fila de 4: en el 2x2 una tarjeta más grande que su vecina
   de al lado se lee como un error de maquetación, no como énfasis. */
@media (min-width: 1081px) {
	.plan--featured { --t: scale(1.04); }
	.plan--featured:hover { --t: scale(1.04) translateY(-4px); }
}
.plan--featured::before {
	content: '';
	position: absolute;
	top: -80px; left: 50%;
	transform: translateX(-50%);
	width: 260px; height: 200px;
	background: radial-gradient(ellipse, rgba(var(--accent-rgb), .3), transparent 70%);
	filter: blur(40px);
	pointer-events: none;
}

.plan__tag {
	position: absolute;
	top: 1rem; right: 1rem;
	background: var(--accent);
	color: var(--accent-on);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.25rem 0.625rem;
	border-radius: 100px;
}

.plan__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.025em; position: relative; }
.plan__for { font-size: var(--fs-xs); color: var(--text-3); margin-top: 0.25rem; position: relative; }

/* Reserva dos líneas aunque el texto ocupe una. Sin esto, el subtítulo largo de
   un plan empuja su precio 20px hacia abajo y los importes dejan de alinearse
   entre tarjetas — que es justo como la gente los compara. Solo cuando hay más
   de una columna: apiladas no hay nada con qué alinear. */
@media (min-width: 621px) {
	.plan__for { min-height: 3.2em; }
}
.plan--featured .plan__for { color: var(--on-ink-3); }

.plan__price {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	margin: 1.25rem 0 0.25rem;
	position: relative;
}

.plan__amount {
	font-family: var(--font-display);
	font-size: 2.75rem;
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* "A tu medida" donde iría una cifra: a 2.75rem el texto se sale de la tarjeta,
   y el tracking cerrado que luce en los números aprieta las letras. Se baja de
   tamaño y se destensa para que ocupe la misma altura visual que un precio. */
.plan__amount--text {
	font-size: 1.875rem;
	letter-spacing: -0.03em;
	font-variant-numeric: normal;
}

.plan__per { font-size: var(--fs-sm); color: var(--text-3); }
.plan--featured .plan__per { color: var(--on-ink-3); }

/* Plan sin precio. El borde punteado dice "esto se define contigo" sin tener
   que escribirlo, y el punteado ya está en el vocabulario del sitio (es el
   corte del ticket de la terminal). */
.plan--quote {
	border-style: dashed;
	border-color: rgba(var(--accent-rgb), 0.42);
}
.plan--quote:hover { border-color: rgba(var(--accent-rgb), 0.7); }

.plan__note { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 1.5rem; position: relative; }
.plan--featured .plan__note { color: var(--on-ink-3); }

.plan__list {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 0.75rem;
	position: relative;
}
.plan--featured .plan__list { border-color: var(--line-on-ink); }

.plan__list li {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 0.625rem;
	align-items: start;
	font-size: 0.875rem;
	color: var(--text-2);
	line-height: 1.45;
}
.plan--featured .plan__list li { color: var(--on-ink-2); }

.plan__list svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 3; fill: none; margin-top: 3px; }
/* El plan destacado es oscuro: ahí el rojo de marca se apaga */
.plan--featured .plan__list svg { stroke: var(--accent); }

.plan .btn { width: 100%; margin-top: auto; position: relative; }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: 800px; margin: 3rem auto 0; }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	transition: color 0.3s var(--ease);
}
.faq__q:hover { color: var(--accent-deep); }

.faq__sign {
	position: relative;
	width: 15px; height: 15px;
	flex: none;
}
.faq__sign::before, .faq__sign::after {
	content: '';
	position: absolute;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.45s var(--ease);
}
.faq__sign::before { top: 7px; left: 0; width: 15px; height: 1.5px; }
.faq__sign::after  { left: 7px; top: 0; width: 1.5px; height: 15px; }
.faq__item.is-open .faq__sign::after { transform: rotate(90deg) scaleX(0); }
.faq__item.is-open .faq__q { color: var(--accent-deep); }

/* Acordeón con grid-template-rows — transición fluida sin medir alturas */
.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a > div { overflow: hidden; }

.faq__a p {
	font-size: 0.9375rem;
	color: var(--text-2);
	line-height: 1.6;
	padding-bottom: 1.5rem;
	max-width: 64ch;
}

/* --------------------------------------------------------------------------
   16. CTA final
   -------------------------------------------------------------------------- */

.cta { position: relative; overflow: hidden; text-align: center; }

.cta__glow {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 900px; height: 460px;
	background: radial-gradient(ellipse, rgba(var(--accent-rgb), .22), transparent 68%);
	filter: blur(70px);
	pointer-events: none;
}

.cta__inner { position: relative; z-index: 2; }
.cta h2 { font-size: var(--fs-h2); margin: 1.25rem 0; }
.cta .lead { max-width: 34rem; margin-inline: auto; }

.cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	justify-content: center;
	margin-top: 2.25rem;
}

/* --------------------------------------------------------------------------
   16b. Aviso de borrador — imposible de pasar por alto
   -------------------------------------------------------------------------- */

.draft {
	border: 2px solid var(--accent);
	background: var(--accent-soft);
	border-radius: var(--r-md);
	padding: 1.25rem 1.375rem;
	margin-bottom: 3rem;
	display: grid;
	gap: 0.5rem;
}

.draft h3 {
	font-size: 1rem;
	letter-spacing: -0.02em;
	color: var(--accent-deep);
}

.draft p {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--text-2);
	max-width: 78ch;
}

/* --------------------------------------------------------------------------
   16c. Página legal / texto largo
   -------------------------------------------------------------------------- */

.legal { max-width: 760px; margin-inline: auto; }

.legal section + section { margin-top: 2.5rem; }

.legal h2 {
	font-size: 1.25rem;
	letter-spacing: -0.03em;
	margin-bottom: 0.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.legal p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-2);
	margin-bottom: 0.75rem;
}

.legal ul { margin: 0 0 0.75rem; padding-left: 1.125rem; }

.legal li {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-2);
	margin-bottom: 0.375rem;
}

/* Lo que la ley exige en esta sección: contexto, no texto publicable */
.legal .req {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--text-3);
	border-left: 2px solid var(--line);
	padding-left: 0.875rem;
	margin-bottom: 0.875rem;
}

/* --------------------------------------------------------------------------
   16d. Tarjetas de contacto
   -------------------------------------------------------------------------- */

.contacts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 3rem;
}

@media (max-width: 860px) { .contacts { grid-template-columns: 1fr; } }

.contact {
	display: grid;
	gap: 0.5rem;
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.contact:hover {
	--t: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(var(--accent-rgb), 0.4);
}

.contact__icon {
	width: 42px; height: 42px;
	border-radius: 11px;
	background: var(--ink);
	color: var(--accent);
	display: grid;
	place-items: center;
	margin-bottom: 0.625rem;
}

.contact h3 { font-size: 1.0625rem; letter-spacing: -0.025em; }

.contact__value {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--accent-deep);
	word-break: break-word;
}
.contact a.contact__value:hover { text-decoration: underline; }

.contact p { font-size: 0.875rem; color: var(--text-3); line-height: 1.5; }

/* --------------------------------------------------------------------------
   16e. Botón flotante de WhatsApp
   --------------------------------------------------------------------------

   Verde #25D366 y no el rojo de Fayter a propósito: es el color de marca de
   WhatsApp y se reconoce sin leer nada. En rojo se confundiría con los CTA
   del sitio y perdería justo lo que lo hace útil.

   Va sin texto encima. El blanco sobre este verde da 1.98:1 — ilegible — pero
   el logotipo está exento de las reglas de contraste (WCAG 1.4.11 excluye
   logos). Poner "Escríbenos" en blanco ahí sí sería un fallo real, así que la
   etiqueta vive fuera de la píldora, sobre tinta oscura.
   -------------------------------------------------------------------------- */

.wa {
	position: fixed;
	right: var(--fab-gap);
	bottom: var(--fab-gap);
	z-index: 90;          /* bajo el nav (100), sobre el resto */
	width: var(--fab);
	height: var(--fab);
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow:
		0 2px 8px rgba(10, 12, 16, 0.18),
		0 12px 32px rgba(37, 211, 102, 0.35);
	transition:
		transform 0.4s var(--ease),
		box-shadow 0.4s var(--ease);
}

.wa:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow:
		0 4px 12px rgba(10, 12, 16, 0.2),
		0 18px 44px rgba(37, 211, 102, 0.45);
}

.wa:active { transform: translateY(-1px) scale(0.98); }

.wa svg { width: 30px; height: 30px; fill: currentColor; }

/* Etiqueta: aparece al hover, sobre tinta (blanco sobre tinta = 15:1) */
.wa__label {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	background: var(--ink);
	color: var(--on-ink);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	padding: 0.5rem 0.8125rem;
	border-radius: 8px;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.35s var(--ease),
		transform 0.35s var(--ease),
		visibility 0.35s;
}

.wa:hover .wa__label,
.wa:focus-visible .wa__label {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

@media (max-width: 640px) {
	.wa svg { width: 27px; height: 27px; }
	/* En táctil no hay hover: la etiqueta solo estorbaría */
	.wa__label { display: none; }
}

/* --------------------------------------------------------------------------
   16f. Botón de subir al inicio
   --------------------------------------------------------------------------
   Se apila encima del de WhatsApp usando sus medidas, no números a mano: si
   cambia --fab, este se recoloca solo.

   Discreto a propósito — tinta y no rojo. Es una utilidad, no un CTA: si
   compitiera con "Probar gratis" estaría robándole clics a lo que vende.
   -------------------------------------------------------------------------- */

.top {
	position: fixed;
	right: var(--fab-gap);
	bottom: calc(var(--fab-gap) + var(--fab) + 0.625rem);
	z-index: 90;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line-on-ink);
	border-radius: 50%;
	background: rgba(10, 12, 16, 0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--on-ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity 0.35s var(--ease),
		transform 0.35s var(--ease),
		visibility 0.35s,
		background-color 0.35s var(--ease);
}

.top.is-on { opacity: 1; visibility: visible; transform: none; }

.top:hover { background: var(--ink); transform: translateY(-2px); }
.top:active { transform: translateY(0) scale(0.96); }

.top svg {
	width: 18px; height: 18px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.foot {
	background: var(--ink);
	color: var(--on-ink);
	border-top: 1px solid var(--line-on-ink);
	padding-block: 4rem 2rem;
}

.foot__top {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 2.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--line-on-ink);
}

@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 460px) { .foot__top { grid-template-columns: 1fr; } }

.foot .logo { color: var(--on-ink); margin-bottom: 1rem; }
.foot__blurb { font-size: 0.875rem; color: var(--on-ink-3); line-height: 1.6; max-width: 26ch; margin-bottom: 1.25rem; }

.foot__contact { display: grid; gap: 0.5rem; font-size: 0.875rem; }
.foot__contact a { color: var(--on-ink-2); transition: color 0.3s var(--ease); }
.foot__contact a:hover { color: var(--accent); }

.foot h4 {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--on-ink-3);
	margin-bottom: 1.125rem;
}

.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6875rem; }

.foot ul a {
	font-size: 0.875rem;
	color: var(--on-ink-2);
	transition: color 0.3s var(--ease), transform 0.3s var(--ease);
	display: inline-block;
}
.foot ul a:hover { color: var(--accent); transform: translateX(3px); }

.foot__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	padding-top: 2rem;
	font-size: var(--fs-xs);
	color: var(--on-ink-3);
}

.foot__legal { display: flex; gap: 1.25rem; }
.foot__legal a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   18. Revelado al hacer scroll
   -------------------------------------------------------------------------- */

/* Ojo con el `.js`: sin él, un fallo del JS (o un bot sin JS) dejaría TODA la
   página en opacity:0. El <head> marca <html class="js"> antes de pintar, así
   que si el script no corre, el contenido simplemente se ve, sin animación.

   Y ojo con --t: `.js [data-reveal].is-in` tiene especificidad (0,3,0), más que
   cualquier `.tarjeta:hover` (0,2,0). Si aquí se pusiera `transform: none` a
   secas, MATA todos los transforms de los elementos revelados: los hover de las
   tarjetas y la inclinación 3D de la terminal dejan de existir sin que nada
   falle visiblemente. Por eso el transform propio de cada elemento viaja en la
   variable --t y aquí se compone con el desplazamiento de entrada. */
.js [data-reveal] {
	opacity: 0;
	transform: var(--t, ) translateY(22px);
	transition:
		opacity 0.7s var(--ease),
		transform 0.7s var(--ease);
	transition-delay: var(--delay, 0ms);
	will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: var(--t, none); }

/* --------------------------------------------------------------------------
   19. Accesibilidad de movimiento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	/* Se muestra todo de golpe, pero conservando el transform propio (--t): un
	   `transform: none` aquí volvería a matar la inclinación de la terminal y
	   los hover. La inclinación sí se quita: es 3D y con scroll molesta a quien
	   pide menos movimiento. */
	.js [data-reveal] { opacity: 1; transform: var(--t, none); }
	.pos, .pos:hover { --t: none; }
}

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}