/* ===== design system _ds (inlined: 1 request en vez de 10 @import) ===== */
/* --- tokens/fonts.css --- */
/* ============================================================
   WEBFONTS — toniramon.es (§5.2)
   Three families, all from Google Fonts:
     • Bricolage Grotesque — Display (H1/H2 only)
     • Instrument Sans      — Text (H3↓, body, UI, buttons)
     • JetBrains Mono       — Utility (eyebrows, metrics, chips)

   NOTE FOR PRODUCTION (§9): the live site should SELF-HOST these
   (font-display: swap, latin subset, ≤5 files: Bricolage 600/700,
   Instrument 400/600, JetBrains 400/500). This design-system build
   links Google Fonts directly because the pipeline cannot ship the
   binaries — swap this @import for local @font-face on launch.
   ============================================================ */
/* --- tokens/colors.css --- */
/* ============================================================
   COLOR TOKENS — toniramon.es
   "Ingeniería mediterránea": cool near-neutrals with a green
   cast + ONE accent (deep pine green). No gradients, no second
   decorative accent. Accent appears sparingly (<~10% of any view)
   so the CTAs carry all the weight.
   ============================================================ */
:root {
  /* --- Base palette (§5.1) --- */
  --bg:          #FFFFFF; /* page base */
  --bg-alt:      #F3F5F2; /* alternating sections, soft cards */
  --surface:     #FFFFFF; /* cards, forms, elevated surfaces */

  --ink-900:     #121A17; /* headings + primary text (green-cast near-black) */
  --ink-600:     #48544E; /* secondary text, descriptions */
  --ink-400:     #8B958F; /* captions, placeholders, metadata */

  --accent-700:  #0E6B4F; /* primary accent: buttons, links, active icons, eyebrows */
  --accent-800:  #0A5540; /* hover / active of the accent */
  --accent-100:  #E7F2EC; /* tints: chip / badge / highlight backgrounds */

  --border:      #E4E8E3; /* card, input, divider borders */

  --footer-bg:   #0F1714; /* footer — the ONLY dark block on the site */
  --footer-ink:  #E6EBE8; /* text on footer */

  --error:       #B4231F; /* form validation */
  --success:     #0E6B4F; /* confirmations (reuses the accent) */

  /* --- Semantic aliases (use these in components) --- */
  --text-primary:    var(--ink-900);
  --text-secondary:  var(--ink-600);
  --text-muted:      var(--ink-400);
  --text-on-accent:  #FFFFFF;
  --text-on-dark:    var(--footer-ink);

  --surface-page:    var(--bg);
  --surface-alt:     var(--bg-alt);
  --surface-card:    var(--surface);
  --surface-tint:    var(--accent-100);
  --surface-dark:    var(--footer-bg);

  --border-default:  var(--border);
  --border-strong:   var(--ink-900);
  --border-accent:   color-mix(in srgb, var(--accent-700) 30%, transparent); /* card hover border */

  --link:            var(--accent-700);
  --link-hover:      var(--accent-800);

  --focus-ring-color: var(--accent-700);
}
/* --- tokens/typography.css --- */
/* ============================================================
   TYPOGRAPHY TOKENS — toniramon.es (§5.2)
   Families + a role scale. Sizes are the DESKTOP canonical values;
   mobile overrides live in --*-m and are applied in base.css.
   ============================================================ */
:root {
  /* --- Families --- */
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; /* H1/H2 only */
  --font-text:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* everything else */
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* utility only */

  /* --- Weights --- */
  --weight-regular:  400; /* @kind other */
  --weight-medium:   500; /* @kind other */
  --weight-semibold: 600; /* @kind other */
  --weight-bold:     700; /* @kind other */

  /* ---------- Role scale: size / line-height / tracking ---------- */
  /* Display XL — H1 of the hero (home only) */
  --text-display-xl:   60px; /* @kind font */
  --text-display-xl-m: 38px; /* @kind font */
  --lh-display-xl:       1.05;     /* @kind other */
  --tracking-display-xl: -0.015em; /* @kind other */

  /* H1 — interior pages */
  --text-h1:   46px; /* @kind font */
  --text-h1-m: 32px; /* @kind font */
  --lh-h1:       1.1;      /* @kind other */
  --tracking-h1: -0.01em;  /* @kind other */

  /* H2 — section titles */
  --text-h2:   38px; /* @kind font */
  --text-h2-m: 28px; /* @kind font */
  --lh-h2:       1.15;     /* @kind other */
  --tracking-h2: -0.01em;  /* @kind other */

  /* H3 — card / subsection titles */
  --text-h3:   24px; /* @kind font */
  --text-h3-m: 20px; /* @kind font */
  --lh-h3:       1.25; /* @kind other */
  --tracking-h3: 0;    /* @kind other */

  /* H4 — minor subheads */
  --text-h4:   19px; /* @kind font */
  --text-h4-m: 17px; /* @kind font */
  --lh-h4:       1.35; /* @kind other */
  --tracking-h4: 0;    /* @kind other */

  /* Body L — lead paragraph (hero subtitle, intros) */
  --text-body-l:   19px; /* @kind font */
  --text-body-l-m: 17px; /* @kind font */
  --lh-body-l: 1.65; /* @kind other */

  /* Body — general text */
  --text-body:   17px; /* @kind font */
  --text-body-m: 16px; /* @kind font */
  --lh-body: 1.65; /* @kind other */

  /* Small — notes, legal-in-forms */
  --text-small: 15px;  /* @kind font */
  --lh-small:   1.5;   /* @kind other */

  /* Eyebrow — "$ label" mono, lowercase, accent (signature element) */
  --text-eyebrow:     13px;    /* @kind font */
  --lh-eyebrow:       1;       /* @kind other */
  --tracking-eyebrow: 0.04em;  /* @kind other */

  /* Metric — big numbers (10M, 30M, 8+) */
  --text-metric:   44px; /* @kind font */
  --text-metric-m: 32px; /* @kind font */
  --lh-metric:       1;       /* @kind other */
  --tracking-metric: -0.01em; /* @kind other */

  /* Chip — technology tags */
  --text-chip: 13px; /* @kind font */
  --lh-chip:   1;    /* @kind other */
}
/* --- tokens/spacing.css --- */
/* ============================================================
   SPACING, GRID & LAYOUT TOKENS — toniramon.es (§5.3)
   Fixed 10-step scale. Do NOT invent intermediate values.
   4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 112
   ============================================================ */
:root {
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-96:  96px;
  --space-112: 112px;

  /* --- Grid & layout --- */
  --container-max:   1160px; /* max content width */
  --measure:         640px;  /* max text column ≈ 65–70 chars */
  --grid-columns:    12; /* @kind other */
  --gutter:          24px;
  --margin:          24px;   /* desktop side margins */
  --margin-mobile:   20px;

  /* --- Vertical rhythm --- */
  --section-py:         112px; /* section padding top/bottom (desktop) */
  --section-py-mobile:  64px;
  --section-py-compact: 64px;  /* credentials / products bands */
  --heading-gap:        48px;  /* section title → content (desktop) */
  --heading-gap-mobile: 32px;
}
/* --- tokens/radii.css --- */
/* ============================================================
   RADIUS TOKENS — toniramon.es (§5.3)
   ============================================================ */
:root {
  --radius-button: 10px; /* buttons + inputs */
  --radius-input:  10px;
  --radius-card:   14px; /* cards + images */
  --radius-image:  14px;
  --radius-pill:   999px; /* chips / pills / badges */
}
/* --- tokens/shadows.css --- */
/* ============================================================
   ELEVATION & FOCUS TOKENS — toniramon.es (§5.3 / §5.4)
   ONE system shadow for elevated cards. Nothing else.
   Prefer whitespace and hairline borders over shadow.
   ============================================================ */
:root {
  --shadow-card: 0 1px 2px rgba(18, 26, 23, .05), 0 8px 24px rgba(18, 26, 23, .06);

  --hairline: 1px solid var(--border);

  /* Focus ring (§5.4): 2px accent ring, 2px offset. Use as:
     outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); */
  --focus-ring:        2px solid var(--accent-700);
  --focus-ring-offset: 2px;
  /* Soft focus wash for inputs (accent-100 ring behind the border) */
  --focus-wash: 0 0 0 3px var(--accent-100);
}
/* --- tokens/motion.css --- */
/* ============================================================
   MOTION TOKENS — toniramon.es (§5.5)
   Principle: the site feels FAST, not animated.
   Hover 150–200ms ease-out, max 2px lift. Reveal once, no stagger.
   ============================================================ */
:root {
  /* gentle ease-out */
  --ease-out:      cubic-bezier(0.33, 1, 0.68, 1); /* @kind other */
  --dur-fast:      150ms; /* @kind other */
  --dur-hover:     180ms; /* @kind other */
  --dur-reveal:    250ms; /* @kind other */

  --lift-hover:    -1px;  /* max elevation on hover */
  --reveal-shift:  12px;  /* scroll-reveal translate-y */

  /* hero terminal cursor blink period */
  --cursor-blink:  1.1s; /* @kind other */
}

/* Respect reduced motion everywhere (§5.5) — including the hero cursor. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* --- base.css --- */
/* ============================================================
   BASE — toniramon.es
   Branded baseline + opt-in .ds-* helpers. Element defaults are
   kept light (body / links / focus / selection) so the system is
   safe to link into a real page; the type roles are opt-in classes
   that mirror the tokens in typography.css.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Links — always defined so editor-added links aren't browser-blue. */
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--accent-100); color: var(--ink-900); }
::placeholder { color: var(--ink-400); opacity: 1; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 3px;
}

/* ---------- Layout helpers ---------- */
.ds-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--margin); }
.ds-measure { max-width: var(--measure); }
.ds-section { padding-block: var(--section-py); }
.ds-section--compact { padding-block: var(--section-py-compact); }
.ds-section--alt { background: var(--bg-alt); }

/* ---------- Type roles (opt-in; mirror tokens) ---------- */
.ds-display-xl { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tracking-display-xl); margin: 0; }
.ds-h1 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-h1); margin: 0; }
.ds-h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-h2); margin: 0; }
.ds-h3 { font-family: var(--font-text); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: var(--lh-h3); margin: 0; }
.ds-h4 { font-family: var(--font-text); font-weight: var(--weight-semibold); font-size: var(--text-h4); line-height: var(--lh-h4); margin: 0; }
.ds-body-l { font-family: var(--font-text); font-size: var(--text-body-l); line-height: var(--lh-body-l); margin: 0; }
.ds-body { font-family: var(--font-text); font-size: var(--text-body); line-height: var(--lh-body); margin: 0; }
.ds-small { font-family: var(--font-text); font-size: var(--text-small); line-height: var(--lh-small); margin: 0; }
.ds-eyebrow { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--tracking-eyebrow); color: var(--accent-700); text-transform: lowercase; margin: 0; }
.ds-metric { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-size: var(--text-metric); line-height: var(--lh-metric); letter-spacing: var(--tracking-metric); color: var(--ink-900); margin: 0; }

/* ---------- Signature: hero terminal cursor (§5.5) ---------- */
@keyframes ds-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
.ds-cursor { display: inline-block; color: var(--accent-700); font-weight: var(--weight-bold); animation: ds-blink var(--cursor-blink) step-end infinite; }
.ds-cursor--stopped { animation: none; opacity: 1; }

/* ---------- Scroll reveal (§5.5) — fade + 12px rise, once ---------- */
@keyframes ds-reveal { from { opacity: 0; transform: translateY(var(--reveal-shift)); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  body { font-size: var(--text-body-m); }
  .ds-container { padding-inline: var(--margin-mobile); }
  .ds-section { padding-block: var(--section-py-mobile); }
  .ds-display-xl { font-size: var(--text-display-xl-m); }
  .ds-h1 { font-size: var(--text-h1-m); }
  .ds-h2 { font-size: var(--text-h2-m); }
  .ds-h3 { font-size: var(--text-h3-m); }
  .ds-h4 { font-size: var(--text-h4-m); }
  .ds-body-l { font-size: var(--text-body-l-m); }
  .ds-metric { font-size: var(--text-metric-m); }
}
/* --- styles.css --- */
/* ============================================================
   toniramon.es — Design System entry point.
   Consumers link ONLY this file. It is an @import manifest;
   never add rules here directly.
   ============================================================ */

/* ===== site.css ===== */
/* ===== Accent (más punch) + Semáforo + escala tipográfica grande/legible ===== */
:root{
  --accent-700:#0B7350;
  --accent-800:#08543C;
  --accent-100:#E3F1E9;
  --link:var(--accent-700);
  --link-hover:var(--accent-800);
  --sem-good:#0B7350; --sem-good-bg:#E3F1E9;
  --sem-ok:#B26B00;   --sem-ok-bg:#FBEFD8;
  --sem-bad:#B4231F;  --sem-bad-bg:#FBE7E6;
  /* Tipografía: más grande en desktop, moderada y legible en móvil */
  --text-display-xl:72px; --text-display-xl-m:36px;
  --text-h1:52px;         --text-h1-m:33px;
  --text-h2:44px;         --text-h2-m:29px;
  --text-body-l:20px;     --text-body-l-m:17px;
}

html{scroll-behavior:smooth;color-scheme:light;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink-900);font-family:var(--font-text);font-size:var(--text-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[data-include]{display:contents}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
.ic{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:none}
.ic svg{width:100%;height:100%;display:block}

/* nav + footer links */
.navlink{background:none;border:none;padding:0;margin:0;cursor:pointer;font-family:var(--font-text);font-size:16px;font-weight:500;color:var(--ink-900);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color var(--dur-hover) var(--ease-out)}
.navlink:hover{color:var(--accent-700);text-decoration:none}
.menuitem{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--font-text);font-size:15px;color:var(--ink-900);padding:10px 12px;border-radius:8px;text-decoration:none;transition:background var(--dur-hover) var(--ease-out)}
.menuitem:hover{background:var(--bg-alt);color:var(--accent-700);text-decoration:none}
.mobile-link{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--ink-900);padding:14px 4px;border-bottom:1px solid var(--border);text-decoration:none}
.mobile-link:hover{text-decoration:none;color:var(--accent-700)}
.foot-link{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--font-text);font-size:15px;color:var(--footer-ink);opacity:.78;padding:6px 0;text-decoration:none;transition:opacity var(--dur-hover) var(--ease-out)}
.foot-link:hover{opacity:1;color:var(--footer-ink);text-decoration:none}
.social{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(230,235,232,.18);border-radius:10px;color:var(--footer-ink);opacity:.85;transition:opacity var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out)}
.social:hover{opacity:1;border-color:rgba(230,235,232,.4)}

/* layout */
.tr-header{position:sticky;top:0;z-index:50;height:72px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid transparent;transition:border-color var(--dur-hover) var(--ease-out)}
.tr-header.is-scrolled{border-bottom-color:var(--border)}
.tr-nav{display:flex;align-items:center;gap:28px}
.tr-ham{display:none;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:6px;color:var(--ink-900)}
@media(max-width:900px){.tr-nav{display:none}.tr-ham{display:inline-flex}}
.tr-hero{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:900px){.tr-hero{grid-template-columns:7fr 5fr;gap:56px;align-items:start}}
.tr-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-inline:var(--margin-mobile);margin-inline:calc(-1 * var(--margin-mobile));scrollbar-width:none}
.tr-row::-webkit-scrollbar{display:none}
.tr-row>*{scroll-snap-align:start;flex:0 0 82%;min-width:0}
@media(min-width:768px){.tr-row{display:grid;gap:24px;overflow:visible;margin-inline:0;padding-inline:0}.tr-row>*{flex:none}.tr-row--2{grid-template-columns:repeat(2,1fr)}.tr-row--3{grid-template-columns:repeat(3,1fr)}.tr-row--4{grid-template-columns:repeat(4,1fr)}}
.tr-duo{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:768px){.tr-duo{grid-template-columns:1fr 1fr}}
.tr-tri{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.tr-tri{grid-template-columns:repeat(3,1fr)}}
.tr-road{display:grid;grid-template-columns:1fr;gap:26px}
.tr-tl{max-width:780px;margin-inline:auto;border-top:1px solid var(--border)}
.tr-tl__item{display:grid;grid-template-columns:104px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--border)}
.tr-tl__meta{display:flex;flex-direction:column;gap:3px}
.tr-tl__yr{font-family:var(--font-mono);font-size:14px;color:var(--accent-700);line-height:1.2}
.tr-tl__ph{font-family:var(--font-mono);font-size:11px;color:var(--ink-400);letter-spacing:.02em}
.tr-tl__item--now .tr-tl__yr{font-weight:600}
@media(max-width:560px){.tr-tl__item{grid-template-columns:1fr;gap:6px}.tr-tl__meta{flex-direction:row;gap:10px;align-items:baseline}}
.tr-steps{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:560px){.tr-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.tr-steps{grid-template-columns:repeat(4,1fr)}}
.tr-about{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:900px){.tr-about{grid-template-columns:5fr 6fr;gap:56px}}
.tr-contact{display:grid;grid-template-columns:1fr}
@media(min-width:860px){.tr-contact{grid-template-columns:1fr 1fr}}
.tr-contact-left{border-bottom:1px solid var(--border)}
@media(min-width:860px){.tr-contact-left{border-bottom:none;border-right:1px solid var(--border)}}
.tr-foot{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.tr-foot{grid-template-columns:1.4fr 1fr 1fr;gap:40px}}
.tr-footbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.tr-measure{max-width:640px}

/* accordion */
.tr-acc summary::-webkit-details-marker{display:none}
.tr-acc summary::marker{content:""}
.tr-acc-chev{width:9px;height:9px;border-right:2px solid var(--ink-600);border-bottom:2px solid var(--ink-600);transform:rotate(45deg);transition:transform var(--dur-hover) var(--ease-out);flex:none;margin-top:-2px}
.tr-acc details[open] .tr-acc-chev{transform:rotate(-135deg);margin-top:3px}

/* semáforo status pill */
.tr-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;line-height:1;padding:6px 11px;border-radius:999px;white-space:nowrap}
.tr-status::before{content:"";width:8px;height:8px;border-radius:999px;background:currentColor;flex:none}
.tr-status--good{color:var(--sem-good);background:var(--sem-good-bg)}
.tr-status--ok{color:var(--sem-ok);background:var(--sem-ok-bg)}
.tr-status--bad{color:var(--sem-bad);background:var(--sem-bad-bg)}

/* chips */
.tr-chip{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:13px;line-height:1;color:var(--ink-900);background:var(--accent-100);padding:4px 10px;border-radius:999px;white-space:nowrap}

/* card */
.tr-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:box-shadow var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),transform var(--dur-hover) var(--ease-out)}
.tr-card--hover:hover{box-shadow:var(--shadow-card);border-color:var(--border-accent);transform:translateY(-1px)}

/* slider + marquee + live dot + arrows */
.tr-live{width:9px;height:9px;border-radius:999px;background:var(--accent-700);flex:none;animation:tr-pulse 2.2s ease-out infinite}
.tr-marq{display:flex;gap:12px;width:max-content;animation:tr-scroll 34s linear infinite}
.tr-marq-wrap:hover .tr-marq{animation-play-state:paused}
.tr-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:border-color var(--dur-hover) var(--ease-out)}
.tr-arrow:hover{border-color:var(--border-accent)}
.tr-slide{display:grid;grid-template-columns:1fr}
.tr-slide .tr-pmedia{aspect-ratio:16 / 10}
@media(min-width:760px){.tr-slide{grid-template-columns:1.05fr 1fr}.tr-slide .tr-pmedia{aspect-ratio:auto;min-height:340px;height:100%}}
.tr-pcard:hover .tr-pzoom{transform:scale(1.05)}
.tr-dot{height:8px;width:8px;border-radius:999px;border:none;cursor:pointer;padding:0;background:var(--ink-400);transition:width var(--dur-hover) var(--ease-out),background var(--dur-hover) var(--ease-out)}
.tr-dot.is-active{width:28px;background:var(--accent-700)}

/* particle background (arenoso) */
.tr-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.9'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'120'%20height%3D'120'%20filter%3D'url(%23n)'%20opacity%3D'0.4'%2F%3E%3C%2Fsvg%3E");background-size:120px 120px;background-repeat:repeat}

/* lens */
.tr-lens{overflow:hidden;cursor:zoom-in}
.tr-lens>*{transition:transform .12s var(--ease-out);will-change:transform}

/* compare (antes/después) */
.tr-compare{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--border);user-select:none;touch-action:none}
.tr-compare__after{position:absolute;inset:0;overflow:hidden;width:50%}
.tr-compare__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent-700);transform:translateX(-50%);z-index:3}
.tr-compare__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;color:var(--accent-700)}
.tr-compare__tag{position:absolute;top:14px;font-family:var(--font-mono);font-size:12px;padding:6px 11px;border-radius:999px;z-index:2}

/* stateful button */
.tr-btn.is-loading{color:transparent !important;pointer-events:none;position:relative}
.tr-btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:999px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;animation:tr-spin .7s linear infinite}
.tr-btn.is-done{--_bg:var(--sem-good);--_fg:#fff}

/* lo que sí / lo que no — panel con resalte deslizante */
.tr-truths{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;display:grid;grid-template-columns:1fr}
@media(min-width:768px){.tr-truths{grid-template-columns:1fr 1fr}}
.tr-truths__col{display:flex;flex-direction:column;padding:16px}
@media(min-width:768px){.tr-truths__col+.tr-truths__col{border-left:1px solid var(--border)}}
@media(max-width:767px){.tr-truths__col+.tr-truths__col{border-top:1px solid var(--border)}}
.tr-truths__head{display:flex;align-items:center;gap:9px;padding:10px 16px 14px;font-family:var(--font-mono);font-size:13px;letter-spacing:.01em}
.tr-truths__item{position:relative;z-index:1;padding:14px 16px;border-radius:10px}
.tr-truths__glow{position:absolute;top:0;left:0;z-index:0;background:var(--bg-alt);border-radius:10px;opacity:0;pointer-events:none;transition:transform .22s var(--ease-out),width .22s var(--ease-out),height .22s var(--ease-out),opacity .18s var(--ease-out)}

/* motion */
@keyframes tr-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tr-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-700) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes tr-spin{to{transform:rotate(360deg)}}
@keyframes rise-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0;animation:rise-in .7s cubic-bezier(.33,1,.68,1) both}
  .rise-1{animation-delay:.04s}.rise-2{animation-delay:.12s}.rise-3{animation-delay:.2s}.rise-4{animation-delay:.28s}.rise-5{animation-delay:.36s}
  .reveal{transform:translateY(20px);transition:transform .7s cubic-bezier(.33,1,.68,1)}
  .reveal.is-in{transform:none}
}
@media (prefers-reduced-motion: reduce){.tr-live,.tr-marq{animation:none}}

/* ===== Botones (del sistema, para HTML plano) ===== */
.tr-btn{--_bg:var(--accent-700);--_fg:#fff;--_bd:transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-text);font-weight:var(--weight-semibold);font-size:16px;line-height:1;text-decoration:none;padding:14px 24px;border-radius:var(--radius-button);border:1.5px solid var(--_bd);background:var(--_bg);color:var(--_fg);cursor:pointer;white-space:nowrap;transition:background var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),transform var(--dur-hover) var(--ease-out)}
.tr-btn:hover{color:var(--_fg);text-decoration:none}
.tr-btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.tr-btn--primary{--_bg:var(--accent-700);--_fg:#fff}
.tr-btn--primary:hover{--_bg:var(--accent-800);transform:translateY(-1px)}
.tr-btn--primary:active{transform:translateY(0)}
.tr-btn--secondary{--_bg:transparent;--_fg:var(--ink-900);--_bd:var(--ink-900)}
.tr-btn--secondary:hover{--_bg:var(--ink-900);--_fg:#fff}
.tr-btn--link{--_bg:transparent;--_fg:var(--accent-700);--_bd:transparent;padding:6px 2px}
.tr-btn--link:hover{--_fg:var(--accent-800)}
.tr-btn--link .tr-btn__arrow{transition:transform var(--dur-hover) var(--ease-out)}
.tr-btn--link:hover .tr-btn__arrow{transform:translateX(3px)}
.tr-btn--sm{font-size:15px;padding:10px 16px}
.tr-btn--lg{font-size:17px;padding:16px 28px}
.tr-btn--block{display:flex;width:100%}
.tr-btn--cta{white-space:normal;text-align:left}
.tr-btn:disabled,.tr-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none;transform:none}
.tr-btn--onaccent{--_bg:#fff;--_fg:var(--accent-800);--_bd:#fff}
.tr-btn--onaccent:hover{--_bg:#fff;transform:translateY(-1px)}
.tr-btn--ghost-onaccent{--_bg:transparent;--_fg:#fff;--_bd:rgba(255,255,255,.55)}
.tr-btn--ghost-onaccent:hover{--_bg:rgba(255,255,255,.14)}

/* ===== Formularios (del sistema, para HTML plano) ===== */
.tr-field{display:flex;flex-direction:column;gap:8px}
.tr-field__label{font-family:var(--font-text);font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--ink-900);line-height:1.3}
.tr-field__req{color:var(--accent-700)}
.tr-field__error{font-family:var(--font-text);font-size:14px;line-height:1.4;color:var(--error)}
.tr-control{font-family:var(--font-text);font-size:var(--text-body);color:var(--ink-900);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-input);width:100%;box-sizing:border-box;transition:border-color var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out)}
.tr-control::placeholder{color:var(--ink-400)}
.tr-input,.tr-select{height:52px;padding:0 14px}
.tr-textarea{min-height:132px;padding:12px 14px;line-height:1.6;resize:vertical}
.tr-control:hover:not(:disabled){border-color:var(--ink-400)}
.tr-control:focus,.tr-control:focus-visible{outline:none;border-color:var(--accent-700);box-shadow:var(--focus-wash)}
.tr-control--error{border-color:var(--error)}
.tr-select-wrap{position:relative;display:block}
.tr-select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.tr-select-wrap::after{content:"";position:absolute;right:18px;top:calc(50% - 4px);width:9px;height:9px;border-right:1.75px solid var(--ink-600);border-bottom:1.75px solid var(--ink-600);transform:rotate(45deg);pointer-events:none}
.tr-check{position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.tr-check input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.tr-check__box{flex:none;width:22px;height:22px;border:1.5px solid var(--border);border-radius:6px;background:var(--surface);display:inline-flex;align-items:center;justify-content:center;margin-top:1px;transition:border-color var(--dur-hover) var(--ease-out),background var(--dur-hover) var(--ease-out)}
.tr-check__box svg{opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.tr-check input:checked + .tr-check__box{background:var(--accent-700);border-color:var(--accent-700)}
.tr-check input:checked + .tr-check__box svg{opacity:1}
.tr-check__label{font-family:var(--font-text);font-size:var(--text-small);line-height:1.5;color:var(--ink-600)}
.tr-check__label a{color:var(--accent-700)}

/* grain overlay on section blocks */
main>section{position:relative;background:var(--bg)}
main>section>.ds-container{position:relative;z-index:1}
main>section::before{content:"";position:absolute;inset:0;background:url("noise.png") repeat;background-size:128px 128px;pointer-events:none;z-index:0}
main>section:first-of-type::before{opacity:.56}
main>section:not(:first-of-type)::before{opacity:.3}
.tr-code{display:block;font-family:var(--font-mono);font-size:13px;line-height:1.65;background:var(--bg-alt);border:1px solid var(--border);color:var(--ink-900);padding:18px 20px;border-radius:12px;overflow:auto;white-space:pre;margin:0}
.tr-swatch{display:flex;flex-direction:column;gap:6px}
.tr-swatch span:first-child{height:52px;border-radius:10px;border:1px solid var(--border)}
.tr-swatch span:last-child{font-family:var(--font-mono);font-size:12px;color:var(--ink-600)}

/* image placeholder nativo (sustituye al <image-slot>; reemplázalo por <img>) */
.tr-imgph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--ink-400);background:var(--bg-alt)}

/* ===== componentes nuevos del rediseño de la home ===== */
/* hero: media 4:5, avatar redondo arriba en móvil */
.tr-hero__media{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--bg-alt);border:1px solid var(--border)}
@media(max-width:899px){
  .tr-hero{gap:24px}
  .tr-hero>div:last-child{order:-1}
  .tr-hero__media{width:104px;aspect-ratio:1;border-radius:999px}
}

/* servicios: dos bloques editoriales */
.tr-svc{display:grid;grid-template-columns:1fr;gap:28px;padding-block:40px;border-bottom:1px solid var(--border)}
@media(min-width:860px){.tr-svc{grid-template-columns:5fr 6fr;gap:64px;padding-block:56px}}
.tr-svc:last-child{border-bottom:none;padding-bottom:8px}
.tr-svc__intro{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.tr-svc__list{display:flex;flex-direction:column;justify-content:center}
.tr-svc__item{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--border)}
.tr-svc__item:first-child{border-top:none;padding-top:0}
.tr-svc__item:last-child{padding-bottom:0}

/* sobre mí: datos rápidos */
.tr-facts{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:768px){.tr-facts{grid-template-columns:repeat(4,1fr);gap:24px}}

/* compromisos: filas editoriales numeradas */
.tr-comp{display:grid;grid-template-columns:44px 1fr;column-gap:16px;row-gap:8px;padding-block:26px;border-bottom:1px solid var(--border)}
.tr-comp__num{font-family:var(--font-mono);font-weight:600;font-size:15px;color:var(--accent-700);line-height:1.7}
.tr-comp__t{grid-column:2;margin:0}
.tr-comp__d{grid-column:2;margin:0}
@media(min-width:860px){.tr-comp{grid-template-columns:120px 5fr 7fr;align-items:baseline}.tr-comp__d{grid-column:3;grid-row:1}}

/* sobre mí: banda de métricas verificables */
.tr-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px}
@media(min-width:860px){.tr-metrics{grid-template-columns:repeat(4,1fr)}}
.tr-metrics>div{display:flex;flex-direction:column;gap:6px;padding-left:18px;border-left:1px solid var(--border)}
.tr-metrics .num{font-family:var(--font-mono);font-weight:600;font-size:clamp(26px,3vw,34px);line-height:1;color:var(--ink-900)}
.tr-metrics .lbl{font-family:var(--font-text);font-size:14px;line-height:1.45;color:var(--ink-600)}

/* contacto: tarjeta a sangre en móvil */
.tr-contact-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card)}
.tr-contact-left,.tr-contact-right{padding:40px}
@media(max-width:767px){
  .tr-contact-card{margin-inline:calc(-1 * var(--margin-mobile));border-inline:none;border-radius:0;box-shadow:none}
  .tr-contact-left,.tr-contact-right{padding:28px var(--margin-mobile)}
}

/* botón LinkedIn en contacto: izquierda en desktop, centrado en móvil */
.tr-li{align-self:flex-start}
@media(max-width:767px){.tr-li{align-self:center}}

/* hero: bloque foto + caption (rol · ubicación) */
.tr-hero__aside{display:flex;flex-direction:column;gap:14px}
.tr-hero__cap{display:flex;flex-direction:column;gap:2px;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--ink-600)}
.tr-hero__loc{text-transform:uppercase;letter-spacing:.04em}
@media(min-width:900px){
  .tr-hero__cap{flex-direction:row;flex-wrap:wrap;gap:6px;font-size:14px}
  .tr-hero__loc::before{content:"·";margin-right:6px;opacity:.5}
}
@media(max-width:899px){
  .tr-hero__aside{flex-direction:row;align-items:center;gap:16px}
}

/* móvil: cards de proyectos apiladas con el margen normal del contenedor (no scroll a sangre) */
@media(max-width:767px){
  #proyectos .tr-row{display:grid;grid-template-columns:1fr;gap:16px;overflow:visible;margin-inline:0;padding-inline:0}
  #proyectos .tr-row>*{flex:none}
  /* contacto es la última sección: sin el padding vertical de 64px en móvil */
  #contacto{padding-block:0}
}

/* móvil: foto a la izquierda; primera parte a 48px del top-bar y botones a 48px del fondo; la banda "Ahora" entra en el mismo viewport */
@media(max-width:899px){
  #hola>.ds-container{min-height:calc(100svh - 190px);box-sizing:border-box;display:flex;flex-direction:column;padding-top:48px!important;padding-bottom:48px!important}
  #hola .tr-hero{flex:1;display:flex;flex-direction:column;align-items:stretch}
  #hola .tr-hero>div:first-child{flex:1;display:flex;flex-direction:column}
  #hola .tr-hero>div:first-child>.rise-4{margin-top:auto}
}

/* móvil: el hueco que deja el redondeo del footer toma el color de la sección de arriba (contacto) */
@media(max-width:767px){
  .tr-foot-wrap{background:var(--bg-alt)}
}

/* ===== Consentimiento de cookies ===== */
.tr-cookie{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(18,26,23,.08);padding:18px var(--margin-mobile);flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:16px 48px}
.tr-cookie__text{font-family:var(--font-text);font-size:14px;line-height:1.55;color:var(--ink-600);margin:0;max-width:760px;text-align:left}
.tr-cookie__text a{color:var(--accent-700);text-decoration:underline}
.tr-cookie__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;flex:none}
.tr-cc-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.tr-cc-modal[hidden]{display:none}
.tr-cc-backdrop{position:absolute;inset:0;background:rgba(15,23,20,.5)}
.tr-cc-panel{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:28px;display:flex;flex-direction:column;gap:16px}
.tr-cc-cat{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--border)}
.tr-cc-cat__info{display:flex;flex-direction:column;gap:4px}
.tr-cc-cat__info strong{font-family:var(--font-text);font-weight:600;font-size:16px;color:var(--ink-900)}
.tr-cc-cat__info span{font-family:var(--font-text);font-size:14px;line-height:1.5;color:var(--ink-600)}
.tr-cc-always{font-family:var(--font-mono);font-size:12px;color:var(--accent-700);white-space:nowrap;flex:none;padding-top:3px}
.tr-cc-panel__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.tr-cc-switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.tr-cc-switch input{position:absolute;opacity:0;width:0;height:0}
.tr-cc-slider{position:absolute;inset:0;background:var(--border);border-radius:999px;transition:background var(--dur-hover) var(--ease-out);cursor:pointer}
.tr-cc-slider::before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:999px;transition:transform var(--dur-hover) var(--ease-out);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tr-cc-switch input:checked + .tr-cc-slider{background:var(--accent-700)}
.tr-cc-switch input:checked + .tr-cc-slider::before{transform:translateX(18px)}