/* Generado por build/build.py — no editar a mano.
   El diseño se cambia en el prototipo y se vuelve a generar. */
/* Generado por build/fuentes.py a partir de la hoja de Google Fonts.
   Los ficheros viven en prototipo/assets/fuentes/. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fuentes/inter-400-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'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fuentes/inter-400-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: 500; font-display: swap; src: url(/assets/fuentes/inter-500-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'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fuentes/inter-500-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: 600; font-display: swap; src: url(/assets/fuentes/inter-600-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'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fuentes/inter-600-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: 700; font-display: swap; src: url(/assets/fuentes/inter-700-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'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fuentes/inter-700-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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fuentes/jetbrains-mono-400-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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fuentes/jetbrains-mono-400-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: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fuentes/jetbrains-mono-500-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: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fuentes/jetbrains-mono-500-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: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fuentes/jetbrains-mono-700-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: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fuentes/jetbrains-mono-700-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; }

/* ===========================================================================
   Carvel Analytics — Color tokens
   Petroleum blue (primary) + orange (accent). Techy, high-contrast.
   Source of truth: CarvelWeb/src/styles/global.css (@theme).
   =========================================================================== */

:root {
  /* --- Brand: primary (petroleum blue) --------------------------------- */
  --color-primary: #00506e;       /* section backgrounds, navbar, footer */
  --color-primary-dark: #003a50;  /* depth / hover of primary */

  /* --- Brand: accent (orange) ------------------------------------------ */
  --color-accent: #ff4000;        /* CTAs, links, details, æ monogram */
  --color-accent-dark: #cc3300;   /* hover of accent */

  /* --- Neutrals -------------------------------------------------------- */
  --color-surface: #e1e5e8;       /* light section fills */
  --color-white: #ffffff;
  --color-ink: #0a0a0a;           /* text & dark fills */
  --color-muted: #5b6b73;         /* secondary text (blue-grey) */
  --color-border: #cfd6da;        /* borders on light backgrounds */

  /* --- Editorial "paper" surface (2026 redesign) ----------------------- */
  --color-paper: #d0d6d9;         /* warm off-white editorial page bg */
  --color-paper-line: #b7c0c4;    /* hairline dividers on paper */
  --hairline-on-dark: rgba(255, 255, 255, 0.14); /* borders on petrol/dark sections */
  --grain-opacity: 0.05; /* @kind other */ /* strength of the fine-grain overlay */

  /* --- Semantic aliases ------------------------------------------------ */
  --color-bg: var(--color-white);
  --color-fg: var(--color-ink);

  --text-body: var(--color-ink);
  --text-muted: var(--color-muted);
  --text-on-primary: var(--color-white);
  --text-on-accent: var(--color-white);

  --surface-page: var(--color-white);
  --surface-card: var(--color-white);
  --surface-muted: var(--color-surface);
  --surface-inverse: var(--color-primary);
  --surface-paper: var(--color-paper);   /* editorial off-white sections */

  --border-default: var(--color-border);
  --border-strong: var(--color-primary-dark);

  /* --- Tints (opacity matices used across the site) -------------------- */
  --accent-tint: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --primary-tint: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* ===========================================================================
   Carvel Analytics — Typography tokens
   Sans (Inter) for running text; Mono (JetBrains Mono) for techy details:
   kickers, labels, numbers, code, nav, buttons.
   =========================================================================== */

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale (rem) — matches the marketing site's Tailwind usage. */
  --text-xs: 0.75rem;    /* 12px — micro labels, footnotes */
  --text-sm: 0.875rem;   /* 14px — nav, meta, captions */
  --text-base: 1rem;     /* 16px — body */
  --text-lg: 1.125rem;   /* 18px — lead paragraphs */
  --text-xl: 1.25rem;    /* 20px — card titles */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px — section titles */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px — hero */
  --text-6xl: 3.75rem;   /* 60px — hero large */

  /* Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-widest: 0.2em;  /* mono kickers / eyebrows, uppercased */
}

/* ===========================================================================
   Carvel Analytics — Spacing, radius, shadow, layout tokens
   =========================================================================== */

:root {
  /* Spacing scale (4px base) */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 — default gutter (px-6) */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 — section padding (py-20) */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 — hero padding */

  /* Radii — site uses md for controls, xl/2xl for cards */
  --radius-sm: 0.25rem;  /* 4 */
  --radius-md: 0.375rem; /* 6 — buttons, inputs */
  --radius-lg: 0.5rem;   /* 8 */
  --radius-xl: 0.75rem;  /* 12 — service cards */
  --radius-2xl: 1rem;    /* 16 — testimonials */
  --radius-full: 9999px;

  /* Shadows — kept subtle; the brand leans on borders, not elevation */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 80, 110, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 58, 80, 0.12);

  /* Layout */
  --max-content: 72rem;  /* 1152px content column */
  --max-wide: 85rem;     /* 1360px — wide editorial column (2026 redesign) */
  --navbar-h: 4rem;      /* 64px sticky header */
  --rail-w: 3.5rem;      /* 56px fixed technical side rail */
}

/* ===========================================================================
   Carvel Analytics — Base element styles
   Minimal resets + brand defaults. Mirrors CarvelWeb @layer base.
   =========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background-color: var(--surface-page);
  color: var(--text-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Techy details in monospace: kicker, labels, code. */
.mono,
code,
kbd,
samp {
  font-family: var(--font-mono);
}

/* The æ monogram — brand accent color by default. */
.monogram {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-dark);
}

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

/* ---------------------------------------------------------------------------
   Fine-grain overlay (2026 redesign). Add `.grain` to any full-bleed element
   to lay a subtle multiplied noise texture over it — crafted, never flat.
   The host element must be `position: relative` (or fixed).
   --------------------------------------------------------------------------- */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Editorial "paper" section — warm off-white background with the grain baked in. */
.surface-paper {
  background: var(--surface-paper);
}

/* ===========================================================================
   Carvel Analytics — Design System entry point
   Consumers link THIS one file. Import order matters: fonts + tokens first,
   base styles last.
   =========================================================================== */

@import "./tokens/fonts.css";
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/base.css";


  /* Variante Carvel Tech: fondo gris editorial + acento rojo. Los componentes
     del sistema se pintan desde estos tokens, sin reimplementarlos. */
  :root {
    --color-primary: #0a0a0a;
    --color-primary-dark: #1f2426;
    --color-bg: #d0d6d9;
    --surface-page: #d0d6d9;
    --surface-inverse: #0a0a0a;
    --border-strong: #0a0a0a;
    --color-paper: #d0d6d9;
    --color-paper-line: #b7c0c4;
    --color-ink: #0a0a0a;
    --color-muted: #5b6b73;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: #d0d6d9; color: #0a0a0a; font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
  input, select, textarea { font-family: inherit; }
  a { color: #ff4000; text-decoration: none; border-bottom: 1px solid rgba(255, 64, 0, 0.35); }
  a:hover { color: #cc3300; border-bottom-color: #cc3300; }
  @keyframes cvRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes cvFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes cvFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
  @keyframes cvTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes cvPulse { 0% { box-shadow: 0 0 0 0 rgba(255,64,0,0.55); } 70% { box-shadow: 0 0 0 9px rgba(255,64,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,64,0,0); } }
  /* Grano fino: la lámina impresa del universo Carvel, nunca un plano liso. */
  body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999;
    opacity: 0.05; mix-blend-mode: multiply;
    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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .cv-rail { display: none; }
  @media (min-width: 1480px) { .cv-rail { display: flex; } }
  @media (max-width: 860px) {
    .cv-row { grid-template-columns: 52px minmax(0, 1fr) !important; row-gap: 10px !important; }
    .cv-row > span:nth-child(3) { grid-column: 2 !important; }
  }
  .cv-plate:hover .cv-pn { -webkit-text-stroke-color: #ff4000; }
  @media (max-width: 959px) {
    .cv-exp { grid-template-columns: minmax(0, 1fr) !important; }
    .cv-exp-stage { border-left: 0 !important; min-height: 0 !important; }
  }


/* --- Producción -------------------------------------------------------- */
/* Estados de interacción que el prototipo declaraba como atributos de autoría. */
.cv-ds-input:focus { border-color: var(--color-accent) !important; box-shadow: 0 0 0 3px var(--accent-tint); }
[data-ds-boton="accent"]:hover { background: var(--color-accent-dark) !important; border-color: var(--color-accent-dark) !important; }
[data-ds-boton="outline"]:hover { background: var(--color-surface) !important; }
[data-ds-boton="primary"]:hover { background: var(--color-primary-dark) !important; border-color: var(--color-primary-dark) !important; }
[data-ds-boton="ghost"]:hover { background: var(--accent-tint) !important; }
[hidden] { display: none !important; }
/* Los CTA son enlaces de verdad (ver `enlaces_de_verdad`), pero el prototipo
   pinta los enlaces de texto en naranja y subrayados. Un CTA hereda el color
   de su propio estilo; el que traiga borde inferior propio gana igual, porque
   lo lleva en el atributo `style`. */
a.cv-cta { color: inherit; border-bottom: 0; }
/* Sin JavaScript el sitio se lee entero: se ve el contenido, no el aviso de cookies. */
#cv-cookies { display: none; }

/* --- Cabecera en pantallas estrechas ------------------------------------ */
/* Los seis enlaces en línea necesitan unos 861px. Por debajo de 900 se pliegan
   en un menú desplegable; el diseño de escritorio no se toca. La regla se
   condiciona a `html[data-js]` para que, sin JavaScript, la navegación siga
   visible: preferimos verla envuelta que no poder navegar. */
html[data-js] #cv-menu { display: none; }

@media (max-width: 900px) {
  html[data-js] #cv-menu { display: inline-flex !important; }
  /* `!important` en el color porque el botón lleva `color:#0a0a0a` en su
     atributo `style`, que gana a cualquier selector sin marcar. Sin esto, al
     abrir el menú el botón se ponía negro sobre negro: desaparecían la
     palabra «Cerrar» y las tres rayas, que se pintan con `currentColor`. */
  html[data-js] #cv-menu[aria-expanded="true"] {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-color: #0a0a0a !important;
  }

  html[data-js] #cv-nav {
    display: none !important;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    background: #d0d6d9;
    border-bottom: 1px solid #b7c0c4;
    box-shadow: 0 12px 24px rgba(10, 10, 10, 0.08);
    padding: 4px 24px 20px;
  }
  html[data-js] #cv-nav[data-abierto] { display: flex !important; }

  /* Objetivos táctiles cómodos y el mismo pautado de hairlines del resto. */
  html[data-js] #cv-nav > a {
    margin: 0 !important;
    padding: 17px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #c3cacd !important;
    text-align: left !important;
    font-size: 13px !important;
    background: transparent !important;
    color: #0a0a0a !important;
  }
  /* Estimador y Contacto conservan su jerarquía, apilados al final. */
  html[data-js] #cv-nav > a:nth-last-child(2) {
    margin-top: 18px !important;
    border: 1px solid #0a0a0a !important;
    padding: 15px 18px !important;
    text-align: center !important;
  }
  html[data-js] #cv-nav > a:last-child {
    margin-top: 10px !important;
    border: 0 !important;
    padding: 16px 18px !important;
    background: #ff4000 !important;
    color: #ffffff !important;
    text-align: center !important;
  }

  /* En el pie los enlaces van muy juntos para el dedo. */
  footer a, footer button { padding-top: 8px !important; padding-bottom: 8px !important; }

  /* Sin JavaScript no hay menú desplegable, así que la barra deja de medir
     64px fijos y crece con los enlaces: queda alta, pero no se superpone al
     contenido, que es como estaba antes. */
  html:not([data-js]) header > div {
    height: auto !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* --- Bloque comparativo del inicio -------------------------------------- */
/* «Hablemos claro»: tarjeta · flecha · tarjeta, en tres columnas fijas. La
   flecha se lleva 72px pase lo que pase, así que a 390px las tarjetas se
   quedan en 128px y el texto sale a una palabra por línea. Por debajo de
   860px se apila y la flecha pasa a apuntar hacia abajo, que es lo que
   significa ahí: se lee de arriba abajo, no de izquierda a derecha. */
@media (max-width: 860px) {
  .cv-cmp { grid-template-columns: minmax(0, 1fr) !important; }
  .cv-cmp > div:nth-child(2) {
    font-size: 0 !important;      /* oculta la flecha horizontal del marcado */
    padding: 22px 0 !important;
  }
  .cv-cmp > div:nth-child(2)::after {
    content: "↓";
    font-family: "JetBrains Mono", monospace;
    font-size: 30px;
  }
}

/* --- Títulos de las tres líneas de trabajo ------------------------------ */
/* El título va a 30px fijos y la columna es elástica: `auto-fit` con suelo de
   320px deja entre 240px y 341px de texto útil una vez descontado el relleno
   de 40px. A 30px «Automatización con IA» mide 316px y «Software de gestión»
   279px, así que por debajo de 1360px de ventana envolvían —y cada tarjeta lo
   hacía a una anchura distinta, que es lo que se veía mal: unos títulos en una
   línea y otros en dos.

   El tamaño se ata al ancho de la propia tarjeta, no al de la ventana, porque
   es la tarjeta la que decide si cabe: `100cqi` es su caja de contenido —el
   relleno de 40px ya va descontado—, y el divisor 11 es lo que mide el título
   más largo, «Automatización con IA», por píxel de tipo (10,52 medido con la
   Inter real) más un 5% de holgura. El `min()` conserva los 30px del diseño en
   cuanto la columna es lo bastante ancha, que es lo que pasa a partir de
   1330px de ventana, poco antes de que la rejilla deje de crecer. Un navegador
   sin unidades de contenedor descarta la declaración entera y se queda con los
   30px del marcado, que es el comportamiento de antes.

   Solo se aplica desde 712px, que es donde caben dos columnas y empieza a
   verse una tarjeta al lado de otra: es ahí donde un título de dos líneas
   junto a otro de una canta. Por debajo se apilan a todo lo ancho y el título
   se queda a los 30px del diseño. */
@media (min-width: 712px) {
  .cv-linea { container-type: inline-size; }
  .cv-linea-t { font-size: min(30px, calc(100cqi / 11)) !important; }
}

/* --- Entradilla del hero ------------------------------------------------ */
/* La rejilla se parte en dos en cuanto caben 300px por columna, y entonces el
   párrafo baja a 28 caracteres por línea: menos que con la ventana más
   estrecha, porque en una sola columna llega a 55. Ensanchar la pantalla
   empeoraba la lectura.

   Cada columna mide (ventana − 96) / 2, así que hasta 1100px no llega a los
   500px que este párrafo necesita para pasar de 45 caracteres por línea. Por
   debajo de ahí se apila, que además es lo que le conviene al iPad en
   horizontal (1024px). Desde 1101px vuelve el reparto en dos columnas del
   diseño aprobado. */
@media (max-width: 1100px) {
  .cv-hero { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --- Tira de datos bajo el hero ----------------------------------------- */
/* Cuatro datos pensados para ir en fila: el primero pegado al margen, los de
   en medio con 24px a cada lado, el último sangrado 24px por la izquierda, y
   las separaciones verticales. Apilados, esas medidas se leen como cuatro
   sangrías distintas y como rayas verticales que ya no separan nada — es lo
   que se veía descentrado. Mismo margen para los cuatro y la separación pasa
   a horizontal, que es la que corresponde cuando van uno debajo de otro. El
   rótulo sube de 10 a 11px: a 10px con 0.2em de espaciado se lee mal en un
   teléfono. */
@media (max-width: 847px) {
  .cv-tira { column-gap: 24px !important; }
  .cv-tira > div {
    padding: 20px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #b7c0c4 !important;
  }
  .cv-tira > div > div:first-child { font-size: 11px !important; }
}
/* Dos columnas mientras quepan: la última fila es la que no lleva raya. */
@media (min-width: 560px) and (max-width: 847px) {
  .cv-tira { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cv-tira > div:nth-last-child(-n+2) { border-bottom: 0 !important; }
}
@media (max-width: 559px) {
  .cv-tira { grid-template-columns: minmax(0, 1fr) !important; }
  .cv-tira > div:last-child { border-bottom: 0 !important; }
}

/* La misma tira sobre fondo negro —los datos de Contabilify—, que además
   separa con línea a la izquierda en vez de a la derecha. */
@media (max-width: 847px) {
  .cv-tira-oscura > div {
    padding: 24px 0 20px !important;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  }
}
@media (min-width: 560px) and (max-width: 847px) {
  .cv-tira-oscura { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 24px !important; }
  .cv-tira-oscura > div:nth-last-child(-n+2) { border-bottom: 0 !important; }
}
@media (max-width: 559px) {
  .cv-tira-oscura { grid-template-columns: minmax(0, 1fr) !important; }
  .cv-tira-oscura > div:last-child { border-bottom: 0 !important; }
}

/* --- Numeraco del explorador de servicios ------------------------------- */
/* El número gigante del fondo mide 200px como mínimo y va colocado arriba a
   la derecha del escenario. En escritorio no molesta porque el escenario mide
   520px de alto y el texto va abajo; apilado en el móvil el escenario se
   encoge a lo que ocupa el texto y el número le cruza el titular por encima.
   Es decorativo —va con `aria-hidden`— así que en el móvil no se pinta. */
@media (max-width: 959px) {
  .cv-exp-stage > [aria-hidden="true"] { display: none !important; }
}

/* --- Nota de «El método» ------------------------------------------------ */
/* Va alineada a la derecha porque en el diseño está a la derecha del titular.
   Por debajo de 696px la rejilla se apila y esa alineación deja el texto con
   el borde izquierdo dentado justo debajo de un titular alineado a la
   izquierda. */
@media (max-width: 695px) {
  .cv-nota { text-align: left !important; justify-self: start !important; }
}

/* --- Botones principales ------------------------------------------------ */
/* Miden lo que mide su texto, que en fila está bien y apilados deja un
   escalón entre el de «Cuéntanos tu proyecto» y el de al lado. En el móvil
   ocupan el ancho completo, que además agranda el objetivo táctil. */
@media (max-width: 559px) {
  [data-ds-boton] { width: 100% !important; }
  /* El de enviar el formulario va dentro de un envoltorio que mide lo que
     mide el botón, así que el 100% se mediría contra sí mismo. */
  .cv-envio { width: auto !important; justify-self: stretch !important; }
}

/* --- Barra de marca ----------------------------------------------------- */
/* A 390px el reclamo no cabe en una línea con 0.24em de espaciado y deja
   «Producto» descolgado en una línea suelta. Con 0.12em entra entero y la
   barra queda en dos renglones limpios. */
@media (max-width: 559px) {
  .cv-topbar { letter-spacing: 0.12em !important; gap: 6px 16px !important; }
}
/* Por debajo de 390px ni con 0.12em cabe, y la barra se iba a tres renglones.
   Con 0.06em el reclamo aguanta en uno hasta los 330px de ventana. */
@media (max-width: 389px) {
  .cv-topbar { letter-spacing: 0.06em !important; }
}

/* --- Aviso de cookies en el móvil --------------------------------------- */
/* Con el texto a 14px y los dos botones en filas distintas, el aviso medía
   312px: casi la mitad de la pantalla de un móvil, tapando el contenido que
   se supone que hay que leer antes de decidir. Se compacta y los botones
   pasan a compartir una sola fila. */
@media (max-width: 600px) {
  #cv-cookies { padding: 16px 20px !important; }
  #cv-cookies p { font-size: 13px !important; line-height: 1.5 !important; margin-top: 8px !important; }
  #cv-cookies > div { gap: 14px !important; }
  #cv-cookies > div > div:last-child { flex-wrap: nowrap !important; gap: 10px !important; }
  #cv-cookies button { flex: 1 1 0 !important; padding: 13px 8px !important; text-align: center !important; }
}

/* --- Objetivos táctiles ------------------------------------------------- */
/* Los CTA de texto subrayado miden 19–22px de alto: por debajo de los 24px
   que pide el criterio 2.5.8 de las WCAG 2.2. El área se agranda con un
   pseudoelemento y no con relleno, porque el relleno separaría el subrayado
   de la palabra que subraya. */
/* El área crece 6px por arriba y 6px por abajo y no más: 12px es el hueco
   entre filas de las tiras que envuelven (lectura relacionada, «otros
   documentos» de los textos legales), así que el área llega justo hasta el
   borde del hueco y nunca pisa la del enlace de la fila siguiente. Se
   excluyen los enlaces dentro de un párrafo, donde sí solaparían renglones.
   Deja los objetivos entre 30 y 35px, por encima del mínimo de 24px. */
@media (max-width: 700px) {
  main button[data-act^="ir:"],
  main a[data-act^="ir:"]:not(p a),
  main a[target="_blank"]:not(p a) { position: relative; }
  main button[data-act^="ir:"]::after,
  main a[data-act^="ir:"]:not(p a)::after,
  main a[target="_blank"]:not(p a)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -6px; bottom: -6px;
  }
  /* Las migas van en línea y no llevan subrayado, así que ahí el relleno no
     despega nada ni puede solapar: crecen la caja de verdad. */
  nav[aria-label="Ruta de navegación"] a { padding: 8px 0 !important; }
  /* El isotipo de la cabecera mide 24px dentro de una barra de 64px: hay
     sitio de sobra para que toda la altura sea tocable. */
  header [data-act="ir:/"] { padding: 14px 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

.cv-e1:hover{color:#ff4000 !important}
.cv-e2:hover{color:#0a0a0a !important}
.cv-e3:hover{background:#0a0a0a !important;color:#ffffff !important}
.cv-e4:hover{background:#cc3300 !important}
.cv-e5:hover{border-color:#ff4000 !important}
.cv-e6:hover{background:#cc3300 !important;color:#ffffff !important}
.cv-e7:hover{background:rgba(255,255,255,0.28) !important}
.cv-e8:hover{border-color:#ff4000 !important;color:#ff4000 !important}
.cv-e9:hover{color:#ff4000 !important;border-bottom-color:#ff4000 !important}
.cv-e10:hover{border-bottom-color:#ff4000 !important}
.cv-e11:hover{background:#ff4000 !important;color:#ffffff !important}
.cv-e12:hover{background:rgba(10,10,10,0.03) !important}
.cv-e13::after{content:'';position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border:1px solid #ff4000;border-left:0;border-top:0}
.cv-e13::before{content:'';position:absolute;top:-1px;left:-1px;width:12px;height:12px;border:1px solid #ff4000;border-right:0;border-bottom:0}
.cv-e14::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;background:#ff4000}
.cv-e15:hover{border-color:#ff4000 !important;background:#ffffff !important}
.cv-e16:focus{border-color:#ff4000 !important;outline:none !important}
.cv-e17:hover{opacity:0.7 !important}
.cv-e18:focus{border-color:#ff4000 !important;box-shadow:0 0 0 3px rgba(255,64,0,0.12) !important}
.cv-e19:hover{border-color:#ff4000 !important;transform:translateY(-3px) !important;background:rgba(255,255,255,0.4) !important}
.cv-e20::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:4px;background:#ff4000}
.cv-e21::before{content:'›';position:absolute;left:6px;top:-1px;color:#ff4000;font-weight:700;font-size:20px}
.cv-e22:hover{background:#ff4000 !important}
.cv-e23:hover{opacity:0.65 !important}
.cv-e24:hover{border-color:#ff4000 !important;background:rgba(255,255,255,0.4) !important}