/* Refinado del inicio (nov 2026): misma página, misma marca y mismo Arko,
   con menos ruido para que se lea profesional sin perder lo amigable.
   - Tipografía de titulares más sobria (Inter Tight) con tracking según el tamaño.
   - Azul noche con profundidad en lugar de negro con brillos de neón.
   - Etiquetas en tipo oración, no en mayúsculas espaciadas.
   - El ámbar se reserva para la portada, el lema y el cierre.
   - Botones que responden al presionar (no al soltar) y sin halo. */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../assets/fonts/inter-tight-latin.woff2') format('woff2'); }

:root {
  --font-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --fondo: #080C20;
  --superficie: rgba(255, 255, 255, 0.035);
  --borde: rgba(255, 255, 255, 0.08);
  --borde-luz: rgba(255, 255, 255, 0.14);
}

body {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(32, 44, 108, 0.55), transparent 62%),
    radial-gradient(900px 600px at 0% 38%, rgba(20, 28, 74, 0.45), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
}

/* Titulares: peso firme, tracking negativo que crece con el tamaño */
.disp { font-weight: 650; letter-spacing: -0.02em; }
.portada h1 { letter-spacing: -0.028em; line-height: 1; }
.sec h2 { letter-spacing: -0.024em; line-height: 1.04; }
.pieza h3, .dolor h3, .paso h3 { font-weight: 650; letter-spacing: -0.015em; }
.marca span { letter-spacing: -0.02em; }

/* Etiquetas de sección: discretas y en tipo oración */
.kicker { font: 600 0.95rem/1.3 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--amber); opacity: 0.92; }
.pieza .num { font: 600 0.9rem var(--font-text); letter-spacing: 0; color: var(--teal); }
.dolor .hora { font: 500 0.85rem ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: 0; color: #FF9B8C; }
.nodo small { letter-spacing: 0.06em; }
.pie b { font: 600 0.85rem var(--font-text); letter-spacing: 0; color: var(--bone); }

/* El ámbar solo donde importa: portada, lema y cierre */
#flujo .amb, #servicios .amb, #dolores .amb { color: inherit; }

/* Botones: un principal claro, respuesta inmediata al presionar, sin halo */
.btn { font-weight: 600; transition: transform 0.12s ease-out, background-color 0.2s, border-color 0.2s; }
.btn:hover { transform: none; }
.btn:active { transform: scale(0.97); }
.btn--wa { box-shadow: none; }
.btn--wa:hover { box-shadow: none; background: #2BDE6E; }
.btn--linea { border-width: 1px; border-color: var(--borde-luz); }
.btn--linea:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.04); }
.btn--texto { color: var(--bone); padding-inline: 0.4rem; min-height: 3.25rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.btn--texto:hover { color: var(--amber); }

/* Encabezado como material translúcido, con borde solo al pasar contenido por debajo */
.cab.pegada { background: rgba(8, 12, 32, 0.62); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 1px 0 var(--borde); }

/* Tarjetas: superficie sutil con el borde superior un poco más claro (luz que cae), sin brillos */
.dolor, .paso { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); border: 1px solid var(--borde); border-top-color: var(--borde-luz); border-radius: 1.25rem; }
.dolor::after { display: none; }
.dolor:hover { transform: none; border-color: var(--borde-luz); }
.dolor p:not(.hora) { margin-top: 0.7rem; color: var(--bone-60); font-size: 1rem; }
.paso::before { display: block; width: auto; height: auto; text-align: left; place-items: initial; background: none; color: var(--amber); font: 500 0.85rem ui-monospace, Consolas, monospace; content: '0' counter(paso); }
.flujo, .medida { border-color: var(--borde); }
.portada::before { opacity: 0.85; }
.fin::before { opacity: 0.6; }

/* Caso real */
.caso { display: grid; gap: 2.4rem; align-items: center; }
.caso__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.caso__fotos img { border-radius: 1.2rem; border: 1px solid var(--borde-luz); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.caso__fotos img:last-child { margin-top: 2.6rem; }
.caso .cita { font: 600 clamp(1.6rem, 1.1rem + 2vw, 2.4rem)/1.12 var(--font-display); letter-spacing: -0.02em; margin-top: 0.9rem; }
.caso .txt { margin-top: 1rem; color: var(--bone-60); max-width: 34rem; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.8rem 0 2rem; }
.cifras div { border-top: 1px solid var(--borde-luz); padding-top: 0.8rem; }
.cifras b { display: block; font: 650 clamp(1.5rem, 1.2rem + 1.2vw, 2rem) var(--font-display); letter-spacing: -0.03em; }
.cifras span { color: var(--bone-60); font-size: 0.92rem; }
@media (min-width: 52rem) { .caso { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; } }

@media (prefers-reduced-transparency: reduce) { .cab.pegada { background: var(--fondo); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* Encabezados del pie en tipo oración */
.pie b { text-transform: lowercase; }
.pie b::first-letter { text-transform: uppercase; }