/* ============================================================================
   yeinermartinez.com — hoja de estilos única
   ----------------------------------------------------------------------------
   ESCRITA MOBILE FIRST.

   Lo que ves fuera de un @media es el diseño para teléfono (desde 320px).
   A partir de ahí solo se AÑADE, con @media (min-width: ...). No hay una sola
   regla max-width: si algo se ve mal en móvil, la culpa está en el bloque base,
   no escondida en un parche más abajo.

   Puntos de quiebre:
     640px    tablet pequeña  → dos columnas en formularios y rejillas
     900px    tablet grande   → el menú deja de ser hamburguesa
     1000px   escritorio      → el hero pasa a dos columnas

   Para cambiar el color de marca toca UNA variable: --accent (aparece dos
   veces, una para el tema claro y otra para el oscuro).
   ========================================================================== */

/* 1. TOKENS ================================================================= */

:root {
  /* Tema claro (por defecto) */
  --bg: #fbfbfc;
  --bg-alt: #f3f4f7;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --border: #e4e6ec;
  --border-strong: #d3d7e0;
  --text: #14161a;
  --muted: #5b616b;
  --accent: #c2410c;
  --accent-hover: #9a3412;
  --accent-soft: rgba(194, 65, 12, 0.09);
  --accent-contrast: #ffffff;
  --error: #c0272d;
  --ok: #15803d;
  --shadow-sm: 0 1px 2px rgba(16, 18, 22, 0.05);
  --shadow-md: 0 1px 2px rgba(16, 18, 22, 0.05), 0 10px 28px rgba(16, 18, 22, 0.07);
  --shadow-lg: 0 20px 50px rgba(16, 18, 22, 0.14);
  --glow: radial-gradient(60% 60% at 70% 20%, rgba(194, 65, 12, 0.10), transparent 70%);

  --code-key: #7c3aed;
  --code-type: #0f766e;
  --code-str: #b45309;

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;

  --header-h: 60px;
  --gutter: 1rem;   /* margen lateral en móvil */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0b0c0f;
    --bg-alt: #101217;
    --surface: #14161b;
    --surface-2: #181b21;
    --border: #23262e;
    --border-strong: #31353f;
    --text: #e9eaee;
    --muted: #9aa1ad;
    --accent: #ff8a3d;
    --accent-hover: #ffa666;
    --accent-soft: rgba(255, 138, 61, 0.13);
    --accent-contrast: #14161b;
    --error: #ff6b6f;
    --ok: #4ade80;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
    --glow: radial-gradient(60% 60% at 70% 20%, rgba(255, 138, 61, 0.13), transparent 70%);
    --code-key: #c4a2ff;
    --code-type: #63d7c5;
    --code-str: #ffb86b;
  }
}

:root[data-theme='dark'] {
  --bg: #0b0c0f;
  --bg-alt: #101217;
  --surface: #14161b;
  --surface-2: #181b21;
  --border: #23262e;
  --border-strong: #31353f;
  --text: #e9eaee;
  --muted: #9aa1ad;
  --accent: #ff8a3d;
  --accent-hover: #ffa666;
  --accent-soft: rgba(255, 138, 61, 0.13);
  --accent-contrast: #14161b;
  --error: #ff6b6f;
  --ok: #4ade80;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
  --glow: radial-gradient(60% 60% at 70% 20%, rgba(255, 138, 61, 0.13), transparent 70%);
  --code-key: #c4a2ff;
  --code-type: #63d7c5;
  --code-str: #ffb86b;
}

@media (min-width: 640px) {
  :root { --gutter: 1.5rem; --header-h: 64px; }
}

@media (min-width: 900px) {
  :root { --gutter: 2rem; --header-h: 68px; }
}

/* 2. BASE =================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Red de seguridad contra desbordes laterales. 'clip' y no 'hidden' para no
     romper el position: sticky de la cabecera. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* Evita que una palabra larga rompa el ancho en pantallas estrechas */
  overflow-wrap: break-word;
}

p { margin: 0; overflow-wrap: break-word; }

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

ul { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.1rem;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus { left: 0; }

/* Botones ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 48px de alto: el mínimo cómodo para un dedo */
  min-height: 48px;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}

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

.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* 3. CABECERA Y MENÚ ======================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--header-h);
  /* nowrap: en móvil el menú es un panel flotante, no una fila que se parte */
  flex-wrap: nowrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
}

.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.95rem;
  line-height: 1;
}

.brand-name {
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.4rem;
}

.icon-btn {
  display: grid;
  place-items: center;
  /* 44x44: el mínimo que recomienda WCAG para tocar con el dedo */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Iconos que dependen del tema activo */
.icon-moon { display: none; }
:root[data-theme='dark'] .icon-sun { display: none; }
:root[data-theme='dark'] .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .icon-sun { display: none; }
  :root:not([data-theme='light']) .icon-moon { display: block; }
  :root[data-theme='light'] .icon-sun { display: block; }
  :root[data-theme='light'] .icon-moon { display: none; }
}

/* El botón hamburguesa alterna sus dos iconos según esté abierto o cerrado */
.nav-toggle .icon-cerrar { display: none; }
.nav-toggle[aria-expanded='true'] .icon-menu { display: none; }
.nav-toggle[aria-expanded='true'] .icon-cerrar { display: block; }

/* Menú: en móvil es un panel desplegable bajo la cabecera */
.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  padding: 0.25rem var(--gutter) 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.nav.abierto { display: flex; }

.nav a {
  padding: 0.9rem 0.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
}

.nav a:last-child { border-bottom: 0; }
.nav a:hover { color: var(--accent); }

/* Capa oscura detrás del menú abierto */
.telon {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 40;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

/* 4. HERO =================================================================== */

.hero {
  position: relative;
  padding-block: 2.5rem 3rem;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 420px;
  background: var(--glow);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

/* Imprescindible: sin esto el <pre> del terminal impone su ancho mínimo a la
   columna del grid y desborda toda la página en móvil. */
.hero-grid > * { min-width: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.badge-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}

.hero-title {
  margin-bottom: 0.5rem;
  font-size: clamp(2.1rem, 9vw, 4.2rem);
}

.hero-role {
  margin-bottom: 1rem;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}

.hero-lead {
  max-width: 54ch;
  margin-bottom: 1.75rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* En móvil los botones se apilan y ocupan todo el ancho */
.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 2.25rem;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.hero-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.hero-meta span {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Tarjeta tipo terminal */
.terminal {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.dot-red { background: #ef5f56; }
.dot-yellow { background: #f4bf4f; }
.dot-green { background: #61c454; }

.terminal-title {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.terminal-body {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
}

.c-key { color: var(--code-key); }
.c-type { color: var(--code-type); }
.c-str { color: var(--code-str); }

/* 5. SECCIONES ============================================================== */

.section { padding-block: 3.5rem; }

.section-alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.section-head { margin-bottom: 2rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.section-title {
  max-width: 22ch;
  font-size: clamp(1.6rem, 6vw, 2.5rem);
}

.section-sub {
  max-width: 60ch;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.prose p {
  max-width: 68ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.prose p + p { margin-top: 1rem; }

/* Stack -------------------------------------------------------------------- */

.stack-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.stack-group-title {
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.chip:hover { border-color: var(--accent); color: var(--accent); }

/* Proyectos ---------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.card-tag {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
}

.card-meta,
.card-year {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.35;
}

.card-title { margin-bottom: 0.5rem; font-size: 1.15rem; }

.card-text {
  margin-bottom: 1.15rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

/* Clientes: carrusel infinito ---------------------------------------------- */

.marquee {
  --marquee-duracion: 36s;
  position: relative;
  overflow: hidden;
  padding-block: 0.5rem;
  /* La tira ocupa todo el ancho de la pantalla para que el desfile no tenga
     bordes visibles, pero las tarjetas ARRANCAN alineadas con el contenedor,
     igual que los títulos. Sin esto, en pantallas grandes empiezan pegadas al
     borde izquierdo y la sección se ve desalineada del resto de la página. */
  padding-inline: max(var(--gutter), (100% - 1120px) / 2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: desfilar var(--marquee-duracion) linear infinite;
  will-change: transform;
}

.marquee-group { display: flex; flex: 0 0 auto; }

/* La separación vive en el margen de cada tarjeta y no como "gap" del
   contenedor: así las dos copias miden exactamente el doble que una y
   translateX(-50%) cierra el bucle sin saltos. */
@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.client {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.65rem;
  margin-right: 0.75rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  white-space: nowrap;
}

.client:hover { border-color: var(--accent); }

.client-monogram {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  padding-inline: 0.35rem;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
}

.client-name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
}

/* Servicios ---------------------------------------------------------------- */

.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.service {
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.service:hover { border-color: var(--accent); transform: translateY(-3px); }

.service-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}

.service-title { margin-bottom: 0.5rem; font-size: 1.05rem; }

.service-text { color: var(--muted); font-size: 0.92rem; line-height: 1.65; }

/* 6. CONTACTO Y PIE ========================================================= */

.contact-card {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  text-align: center;
  overflow: hidden;
}

.contact-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.contact-card .eyebrow { justify-content: center; }

.contact-title {
  margin-bottom: 0.85rem;
  font-size: clamp(1.45rem, 5.5vw, 2.3rem);
}

.contact-text {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 1.75rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Formulario */
.contact-form { margin-bottom: 1.75rem; text-align: left; }

.form-fila { display: grid; grid-template-columns: 1fr; }

.campo { position: relative; margin-bottom: 1.35rem; }

.campo label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.campo .opcional { color: var(--muted); font-weight: 400; }

.campo input,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  /* 16px exactos: con menos, iOS hace zoom al enfocar el campo */
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.campo textarea { min-height: 130px; resize: vertical; }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--muted); opacity: 0.7; }

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.contact-form.validado .campo input:invalid,
.contact-form.validado .campo textarea:invalid { border-color: var(--error); }

.contador {
  position: absolute;
  right: 0;
  bottom: -1.15rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

/* La trampa para bots: fuera de la vista, pero no display:none, porque
   algunos robots ignoran los campos ocultos de esa forma */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn-enviar { width: 100%; margin-top: 0.5rem; }
.btn-enviar[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.form-estado {
  min-height: 1.4rem;
  margin-top: 0.9rem;
  font-size: 0.9rem;
  text-align: center;
}

.form-estado.ok { color: var(--ok); font-weight: 600; }
.form-estado.error { color: var(--error); font-weight: 600; }

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.contact-actions .btn { flex: 1 1 auto; }

.contact-note {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.9;
}

.contact-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.contact-note a:hover { color: var(--accent-hover); }

.site-footer {
  padding-block: 1.75rem;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

/* 7. ANIMACIONES ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================================
   8. DE AQUÍ EN ADELANTE: SOLO MEJORAS PARA PANTALLAS MÁS GRANDES
   ========================================================================== */

/* --- 640px: tablet pequeña ------------------------------------------------ */
@media (min-width: 640px) {
  .hero { padding-block: 3.5rem 4rem; }

  .hero-cta { flex-direction: row; flex-wrap: wrap; }
  .hero-cta .btn { flex: 0 0 auto; }

  .hero-role { font-size: 1.1rem; }
  .hero-lead { font-size: 1.05rem; }

  .hero-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 1.75rem;
  }

  .hero-meta strong { font-size: 1.35rem; }
  .hero-meta span { font-size: 0.85rem; }

  .terminal-body { padding: 1.25rem 1.35rem; font-size: 0.8rem; }

  .section { padding-block: 4.5rem; }
  .section-head { margin-bottom: 2.5rem; }

  .stack-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }

  .cards,
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

  .card,
  .service { padding: 1.6rem; }

  /* Nombre y correo lado a lado */
  .form-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }

  .contact-card { padding: 2.5rem 2rem; }
  .contact-actions .btn { flex: 0 0 auto; }
  .btn-enviar { width: auto; min-width: 220px; }
  .contact-form { text-align: center; }
  .contact-form .campo { text-align: left; }

  .footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .client { margin-right: 1rem; padding: 0.9rem 1.4rem; }
  .client-monogram { min-width: 38px; height: 38px; font-size: 0.82rem; }
  .client-name { font-size: 1rem; }
}

/* --- 900px: se acaba la hamburguesa --------------------------------------- */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .telon { display: none; }

  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .nav a {
    position: relative;
    padding: 0.35rem 0;
    border: 0;
    color: var(--muted);
    font-size: 0.93rem;
    transition: color 0.18s ease;
  }

  .nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.22s ease;
  }

  .nav a:hover { color: var(--text); }
  .nav a:hover::after { width: 100%; }

  .brand-name { font-size: 1rem; }
  .icon-btn { width: 40px; height: 40px; }

  .section { padding-block: 5.5rem; }

  .stack-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }

  .contact-card { padding: 3rem 3.5rem; }
}

/* --- 1000px: el hero se abre en dos columnas ------------------------------ */
@media (min-width: 1000px) {
  .hero { padding-block: 5rem 4.5rem; }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
  .hero-title { margin-bottom: 0.6rem; }
  .hero-role { margin-bottom: 1.25rem; font-size: 1.25rem; }
  .hero-lead { margin-bottom: 2rem; }
  .section { padding-block: 7rem; }
  .services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 9. PREFERENCIAS Y MEDIOS ================================================== */

@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;
  }

  .reveal { opacity: 1; transform: none; }

  /* Sin movimiento automático el carrusel NO se congela: se convierte en un
     slider que el visitante arrastra con el dedo o con el trackpad. Respeta la
     preferencia del sistema y sigue siendo funcional. */
  .marquee {
    /* 'auto' y no 'visible': el contenido mide ~1100px y desbordaría la página */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Barra delgada: en escritorio es la pista de que se puede desplazar */
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }

  .marquee::-webkit-scrollbar { height: 6px; }
  .marquee::-webkit-scrollbar-track { background: transparent; }
  .marquee::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
  }

  .marquee-track {
    animation: none !important;
    transform: none !important;
    width: max-content;
    flex-wrap: nowrap;
  }

  /* La segunda copia solo existe para que el bucle automático no salte.
     Sin animación sobra, y duplicaría los nombres al arrastrar. */
  .marquee-group[aria-hidden='true'] { display: none; }

  .client { scroll-snap-align: start; }
}

@media print {
  .site-header,
  .hero-visual,
  .contact-form,
  .contact-actions,
  .icon-btn { display: none; }

  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}