/* Hoja de la portada (ADR-080), que comparten /en/, el blog, el laboratorio, /murcia/ y la 404.
   Ronda del 3/11/2026 por la tarde: fuera lo que suena a plantilla (puntos de color, etiquetas en cada
   sección, iconos en caja, marcas de agua, flechas por costumbre y el mismo fundido en todo). Más visual
   y menos texto: un elemento audaz por pantalla y el movimiento solo donde enseña algo.
   Ritmo: portada oscura, explicar en claro y destacar en oscuro (laboratorio, auditoría y cierre).
   Letra: Segoe UI Variable en seminegrita; la monoespaciada, solo en las cifras grandes del diagnóstico
   y del laboratorio. Con «reducir movimiento», nada se mueve y todo se ve. */
:root {
  --ink: #1d1c1d;
  --soft: #55565b;
  --paper: #fbfbfa;
  --card: #f2f2ef;
  --line: #e2e4e8;
  --campo: #8a8d93;
  --dark: #0f1011;
  --dark2: #18191b;
  --dark3: #222326;
  --dline: #2a2b2e;
  --dsoft: #a7a9ae;
  --brand: #ffe100;
  --brand-hover: #f5d800;
  --sky: #6cbee4;
  --sky-ink: #2a6da3;
  --green: #2f7a5c;
  --error: #a8261b;
  --r-l: 24px;
  --r-m: 16px;
  --r-s: 10px;
  --pad: 32px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --display: 'Segoe UI Variable Display', 'Segoe UI', -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --text: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  /* Minilimón (la rodaja con su X y la órbita del logo): solo en el cierre */
  --limones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke-width='1.3' stroke-linecap='round'%3E%3Cg transform='translate(16 16)'%3E%3Ccircle cx='24' cy='24' r='10' stroke='%23ffe100'/%3E%3Cpath d='M17 17l14 14M31 17L17 31' stroke='%23ffe100'/%3E%3Cellipse cx='24' cy='24' rx='20' ry='6.5' transform='rotate(-20 24 24)' stroke='%236cbee4'/%3E%3C/g%3E%3Cg transform='translate(100 96) scale(.7)'%3E%3Ccircle cx='24' cy='24' r='10' stroke='%23ffe100'/%3E%3Cpath d='M17 17l14 14M31 17L17 31' stroke='%23ffe100'/%3E%3Cellipse cx='24' cy='24' rx='20' ry='6.5' transform='rotate(20 24 24)' stroke='%236cbee4'/%3E%3C/g%3E%3C/svg%3E");
  --grano-luz: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23141400' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
  /* Las fotos recortadas se funden con el fondo: abajo y a los lados, sin bordes duros */
  --fundido: linear-gradient(to bottom, #000 58%, transparent 97%);
  --fundido-lados: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--sky-ink); }
a:hover { color: #1d4f78; }
[hidden] { display: none !important; }
main:focus { outline: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.dark { background: var(--dark); color: #f4f4f2; }
.dark a:not(.btn) { color: #f4f4f2; }
.dark .sub, .dark .muted { color: var(--dsoft); }
.salto { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--brand); color: #141400; padding: 10px 16px; border-radius: 10px; font-weight: 650; }
.salto:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Letra */
.h1, .h2, .h3 { font-family: var(--display); font-weight: 650; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.h1 { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.04em; }
.h2 { font-size: clamp(31px, 3.6vw, 46px); line-height: 1.07; }
.h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.sub { font-size: 19px; color: var(--soft); line-height: 1.5; margin: 0; text-wrap: pretty; max-width: 58ch; }
.muted { color: var(--soft); }
.mono { font-family: var(--mono); }
/* Etiqueta pequeña sobre un título: solo donde dice algo útil, y sin adornos */
.eyebrow { font-family: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--soft); margin: 0; }
.dark .eyebrow { color: var(--dsoft); }
.eyebrow.amarillo { color: var(--brand); }

/* Botones y enlaces: la flecha, solo en el botón principal */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--brand); color: #141400; font: inherit; font-weight: 650; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; transition: background-color .18s ease, transform .18s var(--ease); }
.btn:hover { background: var(--brand-hover); color: #141400; transform: translateY(-1px); }
.btn:active { transform: none; scale: .98; }
.btn svg { flex-shrink: 0; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn.peq { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn.ancho { width: 100%; }
.btn.oscuro { background: var(--ink); color: #fff; }
.btn.oscuro:hover { background: #000; color: #fff; }
.lnk { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.lnk:hover { color: inherit; text-decoration-thickness: 2px; }
.lnk svg { display: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dark :focus-visible, .res :focus-visible, .dg-res :focus-visible, .pantalla :focus-visible { outline-color: var(--sky); }
.icon { width: 22px; height: 22px; flex-shrink: 0; }

/* Cabecera (fija) */
.barra { position: sticky; top: 0; z-index: 30; background: var(--dark); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color .2s, background-color .2s; }
.barra.bajado { border-bottom-color: var(--dline); background: rgba(15, 16, 17, .9); }
.top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.marca-ll { display: flex; align-items: center; gap: 10px; color: #f4f4f2; text-decoration: none; font-family: var(--display); font-weight: 650; font-size: 19px; letter-spacing: -0.02em; }
.marca-ll img { border-radius: 7px; }
.dark .marca-ll:hover { color: #fff; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.nav a:not(.btn) { color: #d6d7da; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.nav a:not(.btn):hover { color: #fff; }
.nav .nav-cta { display: none; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #3a3b3f; background: transparent; color: #f4f4f2; align-items: center; justify-content: center; cursor: pointer; }

/* Portada: fondo de marca discreto (un degradado quieto y el grano) */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background: radial-gradient(40% 55% at 78% 40%, rgba(255, 225, 0, .07), transparent 70%), radial-gradient(36% 46% at 8% 92%, rgba(108, 190, 228, .09), transparent 70%); }
.hero::after, .cierre::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: var(--grano-luz); }
.fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 32px; align-items: center; padding: 48px 0 64px; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero-pre { margin: 0; font-size: 15px; font-weight: 600; color: var(--dsoft); }
.hero .h1 em, .h1 em { position: relative; font-style: normal; color: var(--brand); }
.hero .h1 em { white-space: nowrap; }
.trazo { position: absolute; left: -2%; bottom: -.1em; width: 104%; height: .24em; overflow: visible; fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }
.trazo path { vector-effect: none; stroke-dasharray: 1; stroke-dashoffset: 0; } /* con non-scaling-stroke, Chrome lo pinta a trozos */
.hero .sub { color: #c9cace; font-size: 20px; max-width: 40ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.hero-nota { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--dsoft); margin: 0; padding: 0; list-style: none; }
.hero-nota li { display: flex; align-items: center; gap: 8px; }
/* La foto de los dos: sin caja; el limón detrás y los bordes fundidos con el fondo */
.foto { position: relative; margin: 0; }
.foto-grid { position: relative; display: flex; justify-content: center; align-items: flex-end;
  background: radial-gradient(circle at 50% 40%, var(--brand) 0 31%, transparent 31.3%);
  -webkit-mask-image: var(--fundido); mask-image: var(--fundido); }
/* Una sola imagen (equipo/duo.webp): Ángel delante tapa el corte del hombro de Miguel y el
   fundido de abajo y de los lados ya va en la propia imagen, sin cortes rectos */
.foto-grid img { width: 100%; height: auto; object-fit: contain; object-position: 50% 100%; }
/* La foto, grande: sobresale un poco de su columna (más hacia la derecha, donde hay aire) */
.foto { margin: 0 -8% 0 -4%; }
@media (min-width: 761px) { .foto-grid { transform: scale(1.18); transform-origin: 50% 100%; } .foto figcaption { margin-top: 6px; } }
.foto figcaption { margin-top: -28px; position: relative; text-align: center; font-size: 14px; color: var(--dsoft); }
.foto figcaption b { color: #f4f4f2; font-weight: 650; }

/* Empresas que confían en nosotros */
.empresas { padding: 40px 0 44px; border-bottom: 1px solid var(--line); text-align: center; }
.empresas h2 { margin: 0 0 22px; font-size: 15px; font-weight: 600; color: var(--soft); font-family: var(--text); letter-spacing: 0; }
.empresas-fila { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 64px; margin: 0; padding: 0; list-style: none; }
.empresas-fila li { --luz: 1; font-family: var(--display); font-weight: 650; font-size: 18px; white-space: nowrap; }
/* Cada logo enlaza a su web. Se encienden de izquierda a derecha al bajar: landing.js pone
   --luz de 0 a 1 en cada uno; sin JS o con «reducir movimiento» se ven ya en color */
.empresas-fila a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px 10px; border-radius: 14px; color: color-mix(in srgb, var(--ink) calc(var(--luz) * 100%), #8f9095); text-decoration: none; transition: background-color .2s, color .2s; }
.empresas-fila a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--brand); transform: scaleX(var(--luz)); transform-origin: left; }
.empresas-fila img { height: 48px; width: auto; filter: grayscale(calc(1 - var(--luz))) saturate(calc(.6 + var(--luz) * .4)); opacity: calc(.45 + var(--luz) * .55); transform: scale(calc(.94 + var(--luz) * .06)); transition: transform .2s; }
.empresas-fila a:hover, .empresas-fila a:focus-visible { --luz: 1; background: var(--card); color: var(--ink); }
.empresas-fila a:hover img { transform: scale(1.05); }
.encendiendo .empresas-fila li { --luz: 0; }
.empresas .nota { max-width: 720px; margin: 20px auto 0; }

/* Secciones y tarjetas */
.sec { padding: 112px 0; position: relative; }
.sec.gris { background: var(--card); }
.cab { max-width: 760px; margin: 0 auto 48px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.cab.cab-izq { max-width: none; margin: 0 0 48px; text-align: left; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px 56px; align-items: end; }
.cab.cab-izq .eyebrow { grid-column: 1 / -1; justify-self: start; }
.cab.cab-izq .sub { max-width: 440px; justify-self: end; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#porque .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { position: relative; background: var(--card); border-radius: var(--r-l); padding: var(--pad); display: flex; flex-direction: column; gap: 12px; }
.gris .card { background: #fff; }
.card p { margin: 0; color: var(--soft); }
.card b { color: var(--ink); }
/* Iconos de línea, sueltos: sin caja */
.ico { display: flex; align-items: center; color: var(--ink); width: auto; height: auto; background: none; border: 0; }
.ico .icon { width: 24px; height: 24px; }
.dark .ico { color: var(--brand); }
.centro { text-align: center; margin-top: 40px; }
.nota { font-size: 13px; color: var(--soft); margin: 16px 0 0; text-align: center; }
.dark .nota { color: var(--dsoft); }

/* Diagnóstico en un minuto */
.dg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.dg-pasos { background: #fff; border-radius: var(--r-l); padding: 28px; display: flex; flex-direction: column; gap: 30px; }
.dg-prog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dg-prog li { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 4px solid var(--line); font-size: 14px; font-weight: 600; color: var(--soft); transition: border-color .3s, color .3s; }
.dg-prog li span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card); color: var(--ink); font-size: 13px; transition: background-color .3s, color .3s; }
.dg-prog li.listo { border-top-color: var(--brand); color: var(--ink); }
.dg-prog li.listo span { background: var(--ink); color: #fff; }
.dg-paso { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dg-paso legend { padding: 0; margin-bottom: 12px; font-family: var(--display); font-weight: 650; font-size: 21px; letter-spacing: -0.02em; }
.baldosas { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.baldosa { min-height: 92px; padding: 12px; border-radius: 14px; border: 1px solid var(--campo); background: #fff; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 10px; transition: background-color .18s, border-color .18s, color .18s, transform .12s; }
.baldosa svg { width: 28px; height: 28px; }
.baldosa:hover { border-color: var(--ink); }
.baldosa:active { transform: scale(.97); }
.baldosa[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.baldosa[aria-pressed="true"] svg { color: var(--brand); }
.tareas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tareas .baldosa { min-height: 60px; flex-direction: row; align-items: center; justify-content: flex-start; }
.caja { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--campo); display: inline-flex; align-items: center; justify-content: center; transition: background-color .18s, border-color .18s; }
.caja svg { width: 13px; height: 13px; }
.caja path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s ease .05s; }
.baldosa[aria-pressed="true"] .caja { background: var(--brand); border-color: var(--brand); color: #141400; }
.baldosa[aria-pressed="true"] .caja path { stroke-dashoffset: 0; }
.dg-vacio { margin: 0; color: var(--soft); font-size: 15px; grid-column: 1 / -1; }
.rapidas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rapida { min-height: 56px; border-radius: 14px; border: 1px solid var(--campo); background: #fff; color: var(--ink); font: inherit; font-weight: 650; font-size: 16px; cursor: pointer; transition: background-color .18s, border-color .18s, transform .12s; }
.rapida:hover { border-color: var(--ink); }
.rapida:active { transform: scale(.97); }
.rapida[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #141400; }
.exacto { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--soft); }
.exacto input { width: 104px; min-height: 44px; border-radius: 12px; border: 1px solid var(--campo); padding: 0 12px; font-size: 16px; color: var(--ink); background: #fff; }
.fila-otro { display: flex; gap: 8px; }
.fila-otro input { flex: 1; min-width: 0; min-height: 46px; border-radius: 12px; border: 1px solid var(--campo); background: #fff; color: var(--ink); padding: 0 12px; font: inherit; font-size: 16px; }
.estado { font-size: 13px; color: var(--soft); margin: 0; min-height: 1.4em; }
.dg-res { position: sticky; top: 96px; background: var(--dark); color: #f4f4f2; border-radius: var(--r-l); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.dg-sector { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; font-weight: 650; color: var(--brand); }
.dg-cifra { display: flex; align-items: flex-end; gap: 16px; }
.dg-num { font-size: clamp(72px, 9vw, 112px); font-weight: 600; line-height: .85; letter-spacing: -0.05em; color: #fff; font-variant-numeric: tabular-nums; }
.dg-ud { padding-bottom: 6px; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--dsoft); }
.dg-dias { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.dia { position: relative; overflow: hidden; width: 30px; height: 30px; border-radius: 7px; background: var(--dark3); }
.dia i { position: absolute; inset: 0 auto 0 0; width: var(--f); background: var(--brand); }
.dg-cuenta { margin: 0; font-size: 14px; color: var(--dsoft); }
.dg-extra { margin: 0; font-size: 15px; color: #e8e8e6; }
.dg-extra b { color: var(--brand); font-size: 18px; }
.dg-res .btn { margin-top: 4px; }
.dg-nota { margin: -6px 0 0; font-size: 12.5px; color: var(--dsoft); text-align: center; }
.ajustar { border-top: 1px solid var(--dline); padding-top: 4px; }
.ajustar summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: #e8e8e6; }
.ajustar summary::-webkit-details-marker { display: none; }
.ajustar summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--dsoft); transition: transform .2s var(--ease); }
.ajustar[open] summary::after { transform: rotate(45deg); }
.ajustar-t { margin: 4px 0 10px; font-size: 14px; color: var(--dsoft); }
.dg-res .rapida { min-height: 48px; background: var(--dark2); border-color: #3a3b3f; color: #f4f4f2; }
.dg-res .rapida:hover { border-color: var(--dsoft); }
.dg-res .rapida[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #141400; }
.ajustar-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.dg-res .campo { color: var(--dsoft); }
.dg-res .campo input { background: var(--dark2); border-color: #4a4b50; color: #f4f4f2; }
.formula { font-size: 13px; color: var(--dsoft); margin: 12px 0 4px; line-height: 1.55; }
.campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--soft); }
.campo input, .campo select, .campo textarea { min-height: 46px; border-radius: 12px; border: 1px solid var(--campo); background: #fff; color: var(--ink); padding: 0 12px; font: inherit; font-size: 16px; width: 100%; transition: border-color .15s; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--ink); }
.campo textarea { padding: 12px; min-height: 96px; resize: vertical; }
.campo input.mono { font-family: var(--mono); }
/* La escena antes/después del sector */
.versus { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.versus::after { content: ''; position: absolute; left: 50%; top: 46%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: var(--brand) var(--flecha) center / 14px no-repeat; box-shadow: 0 0 0 4px var(--dark); }
.vs { background: var(--dark2); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.vs.auto { box-shadow: inset 0 0 0 1px rgba(255, 225, 0, .45); }
.vs-t { font-size: 12px; font-weight: 600; color: var(--dsoft); display: flex; justify-content: space-between; gap: 8px; margin: 0; }
.vs.auto .vs-t span:first-child { color: var(--brand); }
.vs ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.vs li { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--dark3); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; color: #d9dadc; }
.vs-frase { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: #d9dadc; }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 6px; white-space: nowrap; font-weight: 600; }
.t-gris { background: #34363a; color: #c7c8cc; }
.t-rojo { background: #4a2522; color: #f2b8b0; }
.t-verde { background: #1e3b30; color: #9fdcc0; }
.t-amar { background: #3d3810; color: #ffe866; }
.t-azul { background: #1c3443; color: #a8daf1; }
/* Restos del diagnóstico anterior que usa /en/ */
.kpi .v { font-family: var(--mono); }

/* Cómo trabajamos: una escalera que se dibuja */
.proceso { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; align-items: start; }
.etapa { position: relative; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.etapa::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--ink); transform-origin: left; }
.etapa.gratis::before { height: 4px; background: var(--brand); }
.etapa p { margin: 0; font-size: 15px; color: var(--soft); }
.num { font-family: var(--display); font-size: 30px; font-weight: 650; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.dark .num { color: #f4f4f2; }
.precio { align-self: flex-start; font-size: 12.5px; font-weight: 650; border-radius: 999px; padding: 4px 10px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.etapa.gratis .precio { background: var(--brand); border-color: var(--brand); color: #141400; }
.garantia { margin-top: 64px; background: var(--brand); color: #141400; border-radius: var(--r-l); padding: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.garantia-tit { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.garantia .eyebrow { color: #3d3700; }
.garantia .h2 { font-size: clamp(36px, 4vw, 54px); }
.garantia ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.garantia li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; }
.dibuja { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* Soluciones (las usa /en/) */
.serv { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--pad); display: flex; flex-direction: column; gap: 12px; }
.serv dl { margin: 4px 0 0; display: grid; gap: 10px; }
.serv dt { font-size: 12px; font-weight: 650; color: var(--soft); }
.serv dd { margin: 2px 0 0; font-size: 15px; line-height: 1.5; }

/* Qué automatizamos, por dentro: pantallas en HTML, marcadas como ejemplo */
.tramo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; padding: 36px 0; }
.tramo + .tramo { border-top: 1px solid var(--line); }
.tramo.al-reves { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.tramo.al-reves .tramo-txt { order: 2; }
.tramo-txt { display: flex; flex-direction: column; gap: 10px; }
.tramo-txt .h3 { font-size: clamp(24px, 2.4vw, 30px); }
.tramo-txt p { margin: 0; color: var(--soft); max-width: 40ch; font-size: 17px; }
.tramo-txt .num { font-size: 13px; font-family: var(--text); font-weight: 600; color: var(--soft); letter-spacing: 0; }
.pantalla { margin: 0; background: var(--dark); color: #e8e8e6; border-radius: var(--r-l); padding: 20px; box-shadow: 0 30px 60px -30px rgba(15, 16, 17, .45); min-height: 200px; }
.pantalla-cab { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--dsoft); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--dline); }
.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.msg.sale { background: var(--dark3); border-bottom-left-radius: 4px; }
.msg.entra { align-self: flex-end; background: var(--brand); color: #141400; font-weight: 600; border-bottom-right-radius: 4px; }
.msg.sistema { align-self: center; padding: 0; }
.bandeja { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bandeja li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--dark3); border-radius: var(--r-s); padding: 10px 12px; font-size: 14px; }
.stock { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; position: relative; }
.stock li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14px; }
.nivel { position: relative; height: 10px; border-radius: 5px; background: var(--dark3); overflow: hidden; }
.nivel::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--n); border-radius: 5px; background: var(--sky); transition: width 1.1s var(--ease) .2s; }
.nivel::after { content: ''; position: absolute; top: -3px; bottom: -3px; left: 25%; width: 2px; background: var(--brand); }
.bajo .nivel::before { background: #f2b8b0; }
.stock-leyenda { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: var(--dsoft); }
.raya { width: 2px; height: 12px; background: var(--brand); }
.aviso { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-s); background: var(--dark2); box-shadow: inset 0 0 0 1px rgba(255, 225, 0, .45); font-size: 14px; }
.aviso span:nth-child(2) { flex: 1; }
.aviso svg { color: var(--brand); flex-shrink: 0; }

/* Laboratorio (en oscuro: es la prueba). Las tarjetas son enlaces: por eso, y solo por eso, se mueven. */
#laboratorio .eyebrow { color: var(--dsoft); }
.labs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lab { position: relative; overflow: hidden; border-radius: var(--r-l); padding: 26px; min-height: 340px; display: flex; flex-direction: column; gap: 14px; color: #141400; }
.lab p { margin: 0; font-size: 15px; line-height: 1.5; }
.lab .h3 { font-size: 24px; }
.lab-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.lab-tags li { font-size: 12px; border: 1px solid currentColor; border-radius: 999px; padding: 2px 10px; }
.lab-pie { margin-top: auto; border-top: 1px solid currentColor; padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.lab-cifra { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lab-pie small { font-size: 13px; line-height: 1.4; }
.lab.limo, .dark a.lab.limo { background: var(--sky); color: #0f2433; }
.lab.arena, .dark a.lab.arena { background: var(--brand); color: #141400; }
.lab.mcp, .dark a.lab.mcp { background: var(--green); color: #fff; }
.lab.code, .dark a.lab.code { background: var(--ink); color: #fff; }
.dark .labs .lab.code { background: var(--dark3); box-shadow: inset 0 0 0 1px #3a3b3f; }
a.lab { text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
a.lab:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .8); }
.labs-mas { margin: 28px 0 0; text-align: center; }
.lab-vis { position: relative; border-radius: 14px; padding: 12px; font-size: 13px; margin-top: auto; }
.lab-pie + .lab-vis, .lab-vis + .lab-pie { margin-top: 0; }
.lab-ej { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: rgba(0, 0, 0, .1); }
.lab-aviso { background: #fff; color: var(--ink); display: flex; flex-direction: column; gap: 10px; }
.lab-botones { display: flex; gap: 6px; }
.lab-botones span { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--ink); font-weight: 600; font-size: 12px; }
.lab-botones span:first-child { background: var(--ink); color: #fff; }
.lab-duelo { background: rgba(255, 255, 255, .55); display: flex; flex-direction: column; gap: 8px; padding-top: 34px; }
.lab-duelo .fila { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.lab-duelo i, .barras i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: currentColor; transform-origin: left; transition: transform 1s var(--ease) .3s; }
.barras { display: grid; gap: 6px; padding: 0; margin-top: 4px; }
.barras small { font-size: 12px; opacity: .9; }
/* Las herramientas, en una línea de texto grande y no en casillas */
.tec-linea { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--dline); }
.tec-linea p:first-child { margin: 0; max-width: 34em; font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #fff; }
.tec-linea p:first-child span { color: var(--dsoft); font-weight: 400; }
.tec-linea .nota { text-align: left; font-size: 14px; }

/* Casos (oculto hasta el primero medido) */
.caso { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--pad); display: flex; flex-direction: column; gap: 14px; }
.caso-empresa { margin: 0; font-family: var(--display); font-weight: 650; font-size: 22px; }
.caso dl { margin: 0; display: grid; gap: 10px; }
.caso dt { font-size: 12px; font-weight: 650; color: var(--soft); }
.caso dd { margin: 2px 0 0; }
.caso-despues dd { font-weight: 600; color: var(--green); }

/* Tecnologías (las usa /en/) */
.tec-grupos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 20px; }
.tec-grupo { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; }
.tec-t { margin: 0 0 14px; font-family: var(--text); font-size: 13px; font-weight: 650; color: var(--soft); letter-spacing: 0; }
.tec { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tec li { border-radius: 999px; background: var(--card); padding: 8px 16px; font-family: var(--display); font-weight: 600; font-size: 15px; }

/* Equipo: las fotos, delante de un círculo de color y fundidas con el fondo */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; max-width: 920px; margin: 0 auto; }
.socio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.socio img, .persona img { width: 280px; height: 330px; object-fit: cover; object-position: 50% 0;
  background: radial-gradient(circle at 50% 44%, var(--brand) 0 36%, transparent 36.4%);
  -webkit-mask-image: var(--fundido), var(--fundido-lados); -webkit-mask-composite: source-in;
  mask-image: var(--fundido), var(--fundido-lados); mask-composite: intersect; }
.socio + .socio img, .persona + .persona img { background: radial-gradient(circle at 50% 44%, var(--sky) 0 36%, transparent 36.4%); }
.socio .h3 { margin-top: -18px; position: relative; }
.socio p { margin: 0; max-width: 36ch; color: var(--soft); }
/* La versión anterior en tarjeta (la usa /en/) */
.equipo { gap: 24px; }
.persona { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; padding: 8px 0; }
.persona img { width: 200px; height: 250px; }
.persona-txt { display: flex; flex-direction: column; gap: 8px; }
.persona-txt p { margin: 0; color: var(--soft); }
.persona-rol { font-size: 14px; }

/* Opiniones (oculto): mosaico listo, la primera grande */
.mosaico { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.mosaico > * { grid-column: span 3; background: var(--dark2); border-radius: var(--r-l); padding: var(--pad); }
.mosaico > :first-child { grid-column: span 6; grid-row: span 2; }

/* Seguridad y ley: tres frases con su icono de línea y las cifras con fuente */
.garantias { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.garantias li { display: flex; flex-direction: column; gap: 12px; color: var(--soft); font-size: 16px; }
.garantias li p { margin: 0; }
.garantias li b { color: var(--ink); }
.garantias .icon { width: 28px; height: 28px; color: var(--ink); }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dato { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.dato .cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dato .big { font-family: var(--display); font-size: clamp(44px, 4.6vw, 60px); font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.dato .big.verde { color: var(--green); }
.dato .big.gris-t { color: var(--campo); }
.dato small { font-size: 14px; color: var(--soft); display: block; margin-top: 8px; }
.dato p { margin: 0; font-size: 15px; }
.dato p small { display: inline; font-size: 13px; }

/* Auditoría */
.aud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.aud-txt { display: flex; flex-direction: column; gap: 28px; }
.lleva { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; }
.lleva li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; font-size: 18px; line-height: 1.45; color: #e3e4e6; }
.lleva b { color: #fff; }
.lleva .n { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #141400; font-family: var(--display); font-weight: 650; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.aud-nota { margin: 0; color: var(--dsoft); }
.sellos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sellos li { border: 1px solid #3a3b3f; border-radius: 999px; padding: 7px 14px; font-size: 13px; color: #e3e4e6; }
.form { background: #fff; color: var(--ink); border-radius: var(--r-l); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.form .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form .error { margin: 0; color: var(--error); font-size: 14px; }
.form .campos .error { grid-column: 1 / -1; margin-top: -4px; font-size: 13px; }
.form .campo + .error { margin-top: -6px; font-size: 13px; }
.form [aria-invalid="true"] { border-color: var(--error); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--soft); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.check a, .capa a, .dark .form a, .dark .hecho a:not(.btn) { color: var(--sky-ink); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.despues-caja { border-top: 1px solid var(--line); padding-top: 14px; }
.despues-t { margin: 0 0 10px; font-size: 13px; font-weight: 650; color: var(--ink); }
.despues { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.despues li { border-top: 2px solid var(--line); padding-top: 8px; font-size: 13px; color: var(--soft); line-height: 1.4; }
.despues li:first-child { border-top-color: var(--brand); }
.despues b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 2px; }
.capa { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--soft); }
.hecho { background: #fff; color: var(--ink); border-radius: var(--r-l); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.hecho p { margin: 0; color: var(--soft); }
.hecho .btn { align-self: flex-start; }

/* Recursos: enlaces, y por eso se levantan */
.recurso { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--pad); display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s, border-color .2s; }
.recurso:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(29, 28, 29, .35); border-color: var(--campo); }
.recurso p { margin: 0; color: var(--soft); }
.recurso .ico { display: none; }

/* Preguntas */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq-cab { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; position: sticky; top: 100px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; transition: color .15s; }
.faq summary:hover { color: var(--sky-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { box-sizing: content-box; flex-shrink: 0; padding: 6px; border-radius: 50%; color: var(--ink); transition: transform .25s var(--ease), background-color .2s; }
.faq details[open] summary svg { transform: rotate(45deg); background: var(--brand); }
.faq details p { margin: 0 0 22px; color: var(--soft); max-width: 62ch; }

/* Cierre (el único sitio con el minilimón) y pie */
.cierre { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 136px 0; }
.cierre .fondo { background: radial-gradient(50% 60% at 50% 115%, rgba(255, 225, 0, .14), transparent 70%); }
.cierre .fondo::before { content: ''; position: absolute; inset: 0; background: var(--limones) 0 0 / 160px 160px; opacity: .08;
  -webkit-mask-image: radial-gradient(60% 80% at 50% 100%, #000, transparent 75%); mask-image: radial-gradient(60% 80% at 50% 100%, #000, transparent 75%); }
.cierre .wrap { display: flex; flex-direction: column; gap: 32px; align-items: center; }
.cierre .sub { max-width: 620px; }
.cierre .ctas { justify-content: center; }
.pie { padding: 64px 0 40px; font-size: 14px; color: var(--soft); }
.pie-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.pie-marca { display: flex; flex-direction: column; gap: 12px; }
.pie-marca p { margin: 0; max-width: 300px; }
.pie h2, .pie-t { margin: 0 0 14px; font-size: 14px; color: var(--ink); font-weight: 650; font-family: var(--text); }
.pie ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pie a { color: var(--soft); text-decoration: none; }
.pie a:hover { color: var(--ink); text-decoration: underline; }
.pie .marca-ll { color: var(--ink); }
.pie-entidad { margin: 24px 0 0; max-width: 820px; font-size: 13px; line-height: 1.55; }
.pie-fin { margin: 14px 0 0; font-size: 13px; }

/* Aviso del Tech Show Madrid y el test como primer paso (4/11/2026) */
.evento { display: none; background: var(--brand); color: #141400; text-decoration: none; }
.evento-on .evento { display: block; }
.evento:hover { background: var(--brand-hover); color: #141400; }
.evento-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding-top: 11px; padding-bottom: 11px; font-size: 15px; line-height: 1.4; text-align: center; }
.evento-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.evento:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.btn-sec { background: transparent; color: #f4f4f2; box-shadow: inset 0 0 0 1.5px rgba(244, 244, 242, .55); }
.btn-sec:hover { background: rgba(244, 244, 242, .08); color: #fff; }
.hero-sin { margin: 2px 0 0; font-size: 14px; color: var(--dsoft); }
.hero-sin a { color: #f4f4f2; }

/* WhatsApp directo, en todas las páginas */
.wa-flota { position: fixed; z-index: 26; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 14px; border-radius: 999px; background: #0f7a6e; color: #fff; font-family: var(--text); font-weight: 650; font-size: 15px; text-decoration: none; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5); transition: background-color .2s, transform .2s; }
.wa-flota:hover { background: #0b665c; color: #fff; transform: translateY(-2px); }
.wa-flota:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 760px) {
  .wa-flota { right: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); width: 52px; padding: 0; justify-content: center; }
  .wa-flota span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) { .wa-flota { transition: none; } .wa-flota:hover { transform: none; } }
.wa-linea { margin: 4px 0 0; font-size: 14px; color: var(--soft); text-align: center; }
.wa-linea a { color: #0e7368; font-weight: 650; }

/* Botón flotante del móvil */
.flota { display: none; }

/* El titular: las palabras suben una a una y la resaltada hace un barrido de luz, una vez.
   Sin JS (o sin .mov) el titular se ve quieto; si el JS no llega, aparece a los 2,5 s. */
.mov:not(.mov-listo) h1 { opacity: 0; animation: ya .01s 2.5s forwards; }
.mov h1:not([data-palabras]) .pal { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .06em .2em; margin-block: -.06em -.2em; }
.mov h1:not([data-palabras]) .pal > * { display: inline-block; animation: palabra 1s var(--ease) both; animation-delay: calc(var(--i) * 75ms + 120ms); }
.mov h1:not([data-palabras]) .pal > em { background: linear-gradient(100deg, var(--brand) 42%, #fffbe0 50%, var(--brand) 58%) 100% 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: palabra 1s var(--ease) both, brillo 2.4s var(--ease) both; animation-delay: calc(var(--i) * 75ms + 120ms), 1.5s; }
.mov h1:not([data-palabras]) .trazo path { animation: trazar .9s var(--ease) 1.4s both; }
@keyframes palabra { from { transform: translate3d(0, 108%, 0); } to { transform: none; } }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes trazar { from { stroke-dashoffset: 1; } }
@keyframes ya { to { opacity: 1; } }

/* El resto del movimiento: la portada entra en orden al cargar y, al bajar, solo lo que enseña algo */
@media (prefers-reduced-motion: no-preference) {
  .mov .hero-pre, .mov .hero-copy .sub, .mov .hero-copy .ctas, .mov .hero-nota, .mov .foto { animation: sube .8s var(--ease) both; }
  .mov .hero-pre { animation-delay: .05s; }
  .mov .foto { animation-delay: .25s; }
  .mov .hero-copy .sub { animation-delay: .65s; }
  .mov .hero-copy .ctas { animation-delay: .75s; }
  .mov .hero-nota { animation-delay: .85s; }
  .quieta::before, .quieta::after, .quieta *, .quieta *::before { animation-play-state: paused !important; }

  .aparece { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
  .aparece.visto { opacity: 1; transform: none; }
  .etapa.aparece::before { transform: scaleX(0); transition: transform .8s var(--ease) calc(var(--d, 0ms) + 150ms); }
  .etapa.aparece.visto::before { transform: none; }
  .garantia.aparece { opacity: 1; transform: none; }
  .garantia.aparece .dibuja { stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease); }
  .garantia.visto li:nth-child(1) .dibuja { transition-delay: .3s; }
  .garantia.visto li:nth-child(2) .dibuja { transition-delay: .45s; }
  .garantia.visto li:nth-child(3) .dibuja { transition-delay: .6s; }
  .garantia.visto .dibuja { stroke-dashoffset: 0; }
  .lab.aparece i { transform: scaleX(0); }
  .lab.visto i { transform: none; }
  .pantalla.aparece .msg { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .pantalla.visto .msg { opacity: 1; transform: none; }
  .pantalla.visto .msg:nth-child(2) { transition-delay: .8s; }
  .pantalla.visto .msg:nth-child(3) { transition-delay: 1.4s; }
  .pantalla.aparece .nivel::before { width: 0; }
  .pantalla.visto .nivel::before { width: var(--n); }
  .pantalla.aparece .aviso { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) 1.3s, transform .5s var(--ease) 1.3s; }
  .pantalla.visto .aviso { opacity: 1; transform: none; }
  .bandeja .tag { transition: background-color .3s, color .3s; }
  /* El diagnóstico: las jornadas se llenan y la escena «automatizado» se ordena */
  .dia i { animation: llena .5s var(--ease) both; animation-delay: calc(var(--i) * 40ms); transform-origin: left; }
  .vs.auto li { animation: ordena .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .vs.auto .tag { animation: sello .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 320ms); }
  .faq details[open] > p { animation: abre .35s var(--ease) both; }
  @supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}
@keyframes sube { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes llena { from { transform: scaleX(0); } }
@keyframes ordena { from { opacity: 0; transform: translateX(-8px); } }
@keyframes sello { from { opacity: 0; transform: scale(.85); } }
@keyframes abre { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Tableta */
@media (max-width: 1100px) {
  .grid4, .labs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proceso { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .dg { grid-template-columns: minmax(0, 1fr); }
  .dg-res { position: static; }
  .pie-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tec-grupos { grid-template-columns: minmax(0, 1fr); }
  .equipo { grid-template-columns: minmax(0, 1fr); }
  .tramo { gap: 32px; }
  .garantias { gap: 24px; }
}
/* Escalera solo con sitio para las cinco */
@media (min-width: 1101px) {
  .etapa:nth-child(1) { margin-top: 64px; }
  .etapa:nth-child(2) { margin-top: 48px; }
  .etapa:nth-child(3) { margin-top: 32px; }
  .etapa:nth-child(4) { margin-top: 16px; }
}

/* Móvil */
@media (max-width: 760px) {
  :root { --pad: 24px; }
  html { scroll-padding-top: 76px; }
  .wrap { padding: 0 16px; }
  .sec { padding: 72px 0; }
  .barra, .barra.bajado { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dark); }
  .top { height: 64px; }
  .cab, .cab.cab-izq { margin-bottom: 32px; text-align: left; align-items: flex-start; display: flex; }
  .cab.cab-izq .sub { justify-self: start; }
  .h1 { font-size: 42px; line-height: 1.04; }
  .h3 { font-size: 20px; }
  .sub, .hero .sub { font-size: 17px; }
  .nav { display: none; }
  .nav.abierto { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; top: 64px; left: 0; right: 0; background: var(--dark2); border: 1px solid var(--dline); border-radius: 16px; padding: 8px; }
  .nav.abierto a:not(.btn) { padding: 12px; min-height: 44px; }
  .nav.abierto .nav-cta { display: inline-flex; margin-top: 4px; }
  .menu-btn { display: inline-flex; }
  .top .top-cta { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 32px 0 40px; }
  .hero .ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
  .hero .ctas .btn { width: 100%; }
  .hero .ctas .lnk { justify-content: center; }
  .hero .h1 em { white-space: normal; }
  .foto { margin: 0 -16px; }
  .foto-grid img { height: 400px; object-fit: cover; object-position: 50% 100%; }
  .grid2, .grid3, .grid4, #porque .grid4, .labs, .datos, .aud, .faq, .garantia, .garantias, .duo { grid-template-columns: minmax(0, 1fr); }
  .proceso { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .garantia { padding: 28px; gap: 24px; }
  .campos, .form .campos, .ajustar-campos { grid-template-columns: minmax(0, 1fr); }
  .dg-pasos, .dg-res { padding: 20px; }
  .baldosas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baldosa { min-height: 80px; }
  .rapidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .versus { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .versus::after { transform: rotate(90deg); }
  .fila-otro { flex-wrap: wrap; }
  .fila-otro .btn { width: 100%; }
  .lab { min-height: 0; }
  .tramo, .tramo.al-reves { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 0; }
  .tramo.al-reves .tramo-txt { order: 0; }
  .stock li { grid-template-columns: 84px minmax(0, 1fr); }
  .persona { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
  .persona img { width: 112px; height: 140px; }
  .socio img { width: 240px; height: 280px; }
  .duo { gap: 36px; }
  .dato .cifras { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .despues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form, .panel, .res, .hecho { padding: 20px; }
  .empresas-fila { gap: 16px 32px; }
  .empresas-fila li { font-size: 16px; }
  .empresas-fila img { height: 40px; }
  .faq-cab { position: static; }
  .cierre { padding: 88px 0; }
  .pie-cols { grid-template-columns: minmax(0, 1fr); }
  .pie { padding-bottom: 96px; }
  .faq summary { font-size: 17px; }
  .mosaico > *, .mosaico > :first-child { grid-column: 1 / -1; grid-row: auto; }
  /* Flotante: aparece al dejar atrás el botón de la portada y se esconde junto al formulario y el cierre */
  .flota { display: inline-flex; position: fixed; z-index: 25; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .55); transition: transform .3s var(--ease), opacity .3s, visibility .3s; }
  .flota.fuera { transform: translateY(140%); opacity: 0; visibility: hidden; }
}

/* Con qué trabajamos y por qué fiarte (portada, 4/11/2026): logos oficiales y 4 garantías */
.ct-grupos { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 32px; align-items: start; }
.ct-t { margin: 0 0 12px; font-size: 13px; font-weight: 650; color: var(--dsoft); }
.ct-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ct-ias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 104px; padding: 14px 10px; border-radius: 16px; background: var(--dark2); border: 1px solid var(--dline); text-align: center; font-size: 13.5px; color: #e8e8e6; }
.ct-item svg { width: 34px; height: 34px; }
.ct-nombre { font-family: var(--display); font-weight: 650; font-size: 19px; letter-spacing: -0.02em; color: #f4f4f2; }
.ct-nota { text-align: left; margin-top: 14px; }
.ct-conf-t { margin: 56px 0 18px; color: #f4f4f2; }
.ct-confianza { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ct-confianza li { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 18px; background: var(--dark2); border: 1px solid var(--dline); }
.ct-confianza .icon { color: var(--brand); }
.ct-confianza b { font-family: var(--display); font-weight: 650; font-size: 17px; color: #f4f4f2; letter-spacing: -0.01em; }
.ct-confianza span { font-size: 14.5px; line-height: 1.5; color: var(--dsoft); }
.ct-lab { margin: 24px 0 0; }
.ct-lab .lnk { color: #f4f4f2; }
@media (max-width: 1100px) { .ct-grupos { grid-template-columns: minmax(0, 1fr); } .ct-confianza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ct-ias { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-item { min-height: 92px; font-size: 12.5px; } .ct-confianza { grid-template-columns: minmax(0, 1fr); } }

/* Tecnologías animadas (4/11/2026): IAs con borde de luz que gira, dos filas de logos en movimiento y brillo */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#tecnologia { position: relative; overflow: hidden; isolation: isolate; }
#tecnologia::before { content: ''; position: absolute; z-index: -1; inset: -20% -10% auto; height: 70%; pointer-events: none;
  background: radial-gradient(40% 50% at 18% 30%, rgba(255, 225, 0, .10), transparent 70%), radial-gradient(36% 46% at 85% 60%, rgba(108, 190, 228, .12), transparent 70%); }
.ct-ias-dest { margin: 0 0 8px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ct-ia { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 150px; padding: 22px; border-radius: 20px; background: var(--dark2); overflow: hidden; transition: transform .3s var(--ease); }
.ct-ia::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--ang), rgba(255, 255, 255, .07) 0 62%, var(--c) 78%, rgba(255, 255, 255, .07) 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ct-gira 7s linear infinite; }
.ct-ia:nth-child(2)::before { animation-delay: -1.75s; } .ct-ia:nth-child(3)::before { animation-delay: -3.5s; } .ct-ia:nth-child(4)::before { animation-delay: -5.25s; }
.ct-ia::after { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: radial-gradient(80% 70% at 20% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); opacity: .7; transition: opacity .3s; }
.ct-ia:hover { transform: translateY(-3px); }
.ct-ia:hover::after { opacity: 1; }
.ct-ia img { width: 44px; height: 44px; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--c) 45%, transparent)); }
.ct-ia b { font-family: var(--display); font-weight: 650; font-size: 19px; color: #f4f4f2; letter-spacing: -0.02em; margin-top: auto; }
.ct-ia span { font-size: 13.5px; color: var(--dsoft); line-height: 1.4; }
.ct-ia .ct-ia-nombre-logo { font-family: var(--display); font-weight: 650; font-size: 26px; letter-spacing: -0.03em; color: #f4f4f2; line-height: 44px; }
.ct-ia:has(.ct-ia-nombre-logo) span:last-child { margin-top: auto; }
@keyframes ct-gira { to { --ang: 360deg; } }
.ct-t2 { margin-top: 40px; }
.mq { overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq + .mq { margin-top: 4px; }
.mq-pista { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0; list-style: none; animation: ct-pasa 60s linear infinite; }
.mq.rev .mq-pista { animation-direction: reverse; animation-duration: 70s; }
.mq:hover .mq-pista, .mq:focus-within .mq-pista { animation-play-state: paused; }
.mq-item { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 22px 0 18px; border-radius: 16px; background: var(--dark2); border: 1px solid var(--dline); color: #e8e8e6; font-size: 15px; font-weight: 600; white-space: nowrap; transition: border-color .25s, box-shadow .25s, transform .25s; }
.mq-item img { width: 28px; height: 28px; flex-shrink: 0; }
.mq-solo span { font-family: var(--display); font-size: 18px; font-weight: 650; letter-spacing: -0.02em; color: #f4f4f2; padding-left: 4px; }
.mq-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); transform: translateX(-120%); animation: ct-brillo 7s ease-in-out infinite; pointer-events: none; }
.mq-item:nth-child(3n+2)::after { animation-delay: 2.3s; } .mq-item:nth-child(3n)::after { animation-delay: 4.6s; }
.mq-item:hover { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 12px 30px -14px var(--c); transform: translateY(-2px); }
@keyframes ct-pasa { to { transform: translateX(calc(-50% - 6px)); } }
@keyframes ct-brillo { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (max-width: 1100px) { .ct-ias-dest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ct-ia { min-height: 132px; padding: 18px; } .mq-item { height: 56px; font-size: 14px; } .mq-pista { animation-duration: 45s; } .mq.rev .mq-pista { animation-duration: 52s; } }
@media (prefers-reduced-motion: reduce) {
  .ct-ia::before, .mq-item::after { animation: none; }
  .ct-ia::after { opacity: .7; }
  .mq { -webkit-mask-image: none; mask-image: none; }
  .mq-pista { animation: none; width: auto; flex-wrap: wrap; }
  .mq-item[aria-hidden="true"] { display: none; }
  .ct-ia, .mq-item { transition: none; }
}

/* Fichas de Miguel y Ángel: su web sola, bajo el nombre, a la misma altura en las dos (4/11/2026) */
.socio-web { margin: -4px 0 2px; font-size: 15px; font-weight: 600; }
.socio p.socio-web, .persona-txt p.socio-web { color: var(--ink); }
.socio-web a { color: inherit; text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.persona { align-items: start; }
.persona-txt { padding-top: 28px; }
@media (max-width: 760px) { .persona-txt { padding-top: 0; } }

/* Diagnóstico en un minuto (4/11/2026): una pregunta por pantalla y el resultado al final */
.dx { scroll-margin-top: 92px; max-width: 860px; margin: 0 auto; position: relative; overflow: hidden; background: #fff; color: var(--ink); border-radius: var(--r-l); padding: 22px 30px 30px; box-shadow: 0 30px 70px -45px rgba(20, 20, 0, .45); transition: background-color .45s var(--ease), color .45s var(--ease); }
.dx.final { background: var(--dark); color: #f4f4f2; }
.dx.final::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 225, 0, .16), transparent 65%); pointer-events: none; }
.dx-barra { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.dx.final .dx-barra { background: var(--dark3); }
.dx-barra i { display: block; height: 100%; width: 25%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #fff27a, var(--brand)); background-size: 200% 100%; transition: width .55s var(--ease); animation: dx-luz 2.4s linear infinite; }
.dx-top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin: 6px 0; font-size: 14px; font-weight: 600; color: var(--soft); }
.dx.final .dx-top { color: var(--dsoft); }
.dx-atras { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; min-height: 44px; padding: 0 4px; }
.dx-atras:hover { color: var(--ink); }
.dx-pant { position: relative; }
.dx-pant.entra { animation: dx-entra .45s var(--ease) both; }
.dx-q { margin: 0 0 6px; font-family: var(--display); font-weight: 650; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.12; letter-spacing: -0.025em; outline: none; }
.dx-ayuda { margin: 0 0 20px; color: var(--soft); }
.dx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dx-op { position: relative; min-height: 108px; padding: 14px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.25; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; transition: transform .2s var(--ease), border-color .2s, background-color .2s, color .2s, box-shadow .2s; }
.dx-op svg { width: 32px; height: 32px; transition: transform .35s var(--ease), color .2s; }
.dx-op:hover { border-color: var(--ink); background: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .45); }
.dx-op:hover svg { transform: scale(1.14) rotate(-6deg); }
.dx-op:active { transform: scale(.96); }
.dx-op[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; animation: dx-pop .4s var(--ease); }
.dx-op[aria-pressed="true"] svg { color: var(--brand); }
.dx-tareas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dx-tareas .dx-op { min-height: 66px; flex-direction: row; justify-content: flex-start; text-align: left; padding: 12px 16px; }
.dx-op .caja { border-color: var(--campo); }
.dx-op[aria-pressed="true"] .caja { background: var(--brand); border-color: var(--brand); color: #141400; }
.dx-op[aria-pressed="true"] .caja path { stroke-dashoffset: 0; }
.dx-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.dx-cuantas { font-size: 14px; font-weight: 600; color: var(--soft); }
.dx-pie .btn[disabled], .dx-exacto .btn[disabled] { opacity: .35; pointer-events: none; }
.dx-horas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dx-h { min-height: 104px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--paper); color: var(--soft); font: inherit; font-size: 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform .2s var(--ease), border-color .2s, background-color .2s; }
.dx-h b { font-family: var(--display); font-size: 30px; font-weight: 650; letter-spacing: -0.03em; color: var(--ink); }
.dx-h:hover { border-color: var(--ink); background: #fff; transform: translateY(-3px); }
.dx-h[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #141400; animation: dx-pop .4s var(--ease); }
.dx-exacto { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--soft); }
.dx-exacto input { width: 96px; min-height: 44px; border-radius: 12px; border: 1px solid var(--campo); padding: 0 12px; font-size: 16px; color: var(--ink); background: #fff; }
.dx-otro { display: flex; gap: 8px; margin-top: 12px; }
.dx-otro input { flex: 1; min-width: 0; min-height: 46px; border-radius: 12px; border: 1px solid var(--campo); background: #fff; color: var(--ink); padding: 0 12px; font: inherit; font-size: 16px; }
/* El resultado */
.dx-pre { margin: 4px 0 0; font-family: var(--display); font-size: clamp(18px, 2.4vw, 22px); font-weight: 600; color: #e8e8e6; outline: none; }
.dx-pre span { color: #fff; }
.dx-num { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 4px; }
.dx-num span { font-size: clamp(88px, 15vw, 156px); font-weight: 650; line-height: .9; letter-spacing: -0.05em; color: var(--brand); font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(255, 225, 0, .25); }
.dx-num small { font-family: var(--display); font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: #f4f4f2; }
.dx-dias { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 8px; }
.dx-dia { position: relative; overflow: hidden; width: 34px; height: 34px; border-radius: 9px; background: var(--dark3); animation: dx-cae .45s var(--ease) both; animation-delay: calc(var(--i) * 90ms + .35s); }
.dx-dia i { position: absolute; inset: 0 auto 0 0; width: var(--f); background: var(--brand); }
.dx-jornadas { margin: 0 0 18px; font-size: 16px; font-weight: 600; color: #f4f4f2; }
.dx-ano { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px; border-radius: 16px; background: var(--dark2); border: 1px solid var(--dline); animation: dx-entra .5s var(--ease) both; animation-delay: .9s; }
.dx-ano > p { margin: 0; font-size: 16px; color: #e8e8e6; }
.dx-ano b { color: #fff; }
.dx-valor p { margin: 0 0 8px; font-size: 14px; color: var(--dsoft); }
.dx-euros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dx-euros button { min-height: 44px; border-radius: 12px; border: 1px solid #3a3b3f; background: var(--dark3); color: #f4f4f2; font: inherit; font-weight: 650; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s var(--ease); }
.dx-euros button:hover { border-color: var(--dsoft); transform: translateY(-2px); }
.dx-euros button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #141400; }
.dx-valor .dx-dinero { margin: 10px 0 0; font-size: 15px; color: #e8e8e6; }
.dx-dinero b { color: var(--brand); font-size: 19px; }
.dx-alivio { position: relative; margin-top: 16px; padding: 20px 20px 18px; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 225, 0, .14), rgba(255, 225, 0, .03) 55%); border: 1px solid rgba(255, 225, 0, .45); display: flex; flex-direction: column; gap: 12px; animation: dx-entra .55s var(--ease) both; animation-delay: 1.35s; }
.dx-alivio-t { margin: 0; font-family: var(--display); font-size: clamp(22px, 3vw, 28px); font-weight: 650; letter-spacing: -0.02em; color: #fff; }
.dx-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.dx-vs p { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .35); font-size: 14.5px; line-height: 1.45; color: #e8e8e6; }
.dx-empieza { margin: 0; font-size: 15.5px; color: #e8e8e6; }
.dx-empieza b { color: var(--brand); }
.dx-alivio .btn { animation: dx-late 2.2s var(--ease) 2.4s infinite; }
.dx-letra { margin: -4px 0 0; text-align: center; font-size: 13px; color: var(--dsoft); }
.dx-nota { margin: 14px 0 0; font-size: 12.5px; color: var(--dsoft); }
.dx-otra { background: none; border: 0; padding: 0 0 0 6px; font: inherit; color: #f4f4f2; text-decoration: underline; cursor: pointer; min-height: 24px; }
@keyframes dx-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dx-pop { 0% { transform: scale(.94); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes dx-cae { from { opacity: 0; transform: translateY(-14px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes dx-luz { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes dx-late { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(255, 225, 0, 0); } 35% { box-shadow: 0 0 0 8px rgba(255, 225, 0, .18); } }
@media (max-width: 760px) {
  .dx { padding: 16px 16px 22px; border-radius: 20px; }
  .dx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dx-op { min-height: 92px; font-size: 14.5px; }
  .dx-tareas { grid-template-columns: minmax(0, 1fr); }
  .dx-tareas .dx-op { min-height: 58px; }
  .dx-horas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-h { min-height: 84px; }
  .dx-ano, .dx-vs { grid-template-columns: minmax(0, 1fr); }
  .dx-dia { width: 28px; height: 28px; border-radius: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-pant.entra, .dx-op, .dx-dia, .dx-ano, .dx-alivio, .dx-alivio .btn, .dx-barra i { animation: none !important; }
  .dx-op, .dx-h, .dx-barra i { transition: none; }
}

/* Enlaces discretos de «Qué automatizamos» a cada servicio y redes en el pie (SEO, 3/11/2026) */
.tramo-mas { display: flex; flex-wrap: wrap; gap: 0 18px; margin: -4px 0 0; font-size: 15px; }
.centro .lnk { margin-left: 14px; }
.pie-redes { margin: 0; font-size: 14px; }

/* Entrada al reto de las sudaderas (41-reto-tech-show.md), en el sitio del aviso del Tech Show.
   Rehecha el 4/11/2026 (noche): brilla entera para que no se confunda con la portada (luz que la cruza,
   destellos y una cinta de «peligro» abajo), en el móvil va todo en columna y el botón invita a pulsarlo
   (latido, flecha que empuja y «30 segundos · recompensa segura»). Con «reducir movimiento», quieta. */
.reto-entrada { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(120% 160% at 12% 0%, #fff8a8 0%, #ffe94a 30%, var(--brand) 55%, #ffcc00 100%); border-bottom: 7px solid #141400; border-image: repeating-linear-gradient(-45deg, #141400 0 11px, var(--brand) 11px 22px) 7; box-shadow: 0 14px 40px -18px rgba(255, 200, 0, .7); }
.reto-entrada:hover { background: radial-gradient(120% 160% at 12% 0%, #fff8a8 0%, #ffe94a 30%, var(--brand) 55%, #ffcc00 100%); }
/* La luz que la cruza y los destellos */
.reto-entrada::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 48%, rgba(255, 255, 255, .15) 54%, transparent 70%); background-size: 260% 100%; background-repeat: no-repeat; animation: reto-entrada-luz 3.6s cubic-bezier(.4, 0, .2, 1) infinite; }
.reto-entrada::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 8% 30%, #fff 0 1.6px, transparent 2.4px), radial-gradient(circle at 34% 78%, #fff 0 1.3px, transparent 2px), radial-gradient(circle at 58% 18%, #fff 0 1.8px, transparent 2.6px), radial-gradient(circle at 82% 66%, #fff 0 1.4px, transparent 2.2px), radial-gradient(circle at 94% 22%, #fff 0 1.2px, transparent 2px); animation: reto-entrada-destello 2.2s ease-in-out infinite alternate; }
.reto-entrada-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 22px; padding-top: 16px; padding-bottom: 16px; }
.reto-entrada-limon { display: block; width: 60px; height: 60px; transform-origin: 50% 70%; animation: reto-exprime 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(120, 90, 0, .35)); }
.reto-entrada-limon svg { width: 100%; height: 100%; }
.reto-entrada-t { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.12; letter-spacing: -0.015em; color: #141400; }
.reto-entrada-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: #2b2a00; }
.reto-entrada-sub b { color: #141400; font-weight: 750; }
.reto-entrada-premio { margin: 10px 0 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 10px; background: #141400; color: var(--brand); font-size: 13px; font-weight: 750; letter-spacing: .02em; line-height: 1.3; animation: reto-entrada-late 2.4s ease-in-out infinite; }
.reto-entrada-premio svg { width: 16px; height: 16px; flex: none; }
.reto-entrada-acc { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 250px; }
/* El botón: oscuro, con un círculo amarillo que late, el texto en dos líneas y una flecha que empuja */
.reto-entrada-btn { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px 10px 10px; border-radius: 20px; color: var(--brand); text-decoration: none; background-color: #141400; background-image: linear-gradient(105deg, transparent 38%, rgba(255, 225, 0, .28) 50%, transparent 62%); background-size: 260% 100%; background-repeat: no-repeat; box-shadow: 0 12px 24px -10px rgba(20, 20, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); animation: reto-entrada-luz 2.8s cubic-bezier(.4, 0, .2, 1) infinite, reto-entrada-pulso 1.8s ease-out infinite; transition: transform .15s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.reto-entrada-btn:hover { color: var(--brand); transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(20, 20, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .12); }
.reto-entrada-btn:active { transform: scale(.98); }
.reto-entrada-btn-i { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #fff27a, var(--brand) 55%, #ffc400); color: #141400; box-shadow: 0 0 0 0 rgba(255, 225, 0, .6); animation: reto-entrada-aro 1.8s ease-out infinite; }
.reto-entrada-btn-i svg { width: 18px; height: 18px; margin-left: 2px; }
.reto-entrada-btn-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.reto-entrada-btn-t b { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: .04em; line-height: 1.1; white-space: nowrap; }
.reto-entrada-btn-t small { font-size: 12.5px; font-weight: 600; color: #fff3a0; opacity: .85; white-space: nowrap; }
.reto-entrada-btn-f { flex: none; width: 22px; height: 22px; animation: reto-entrada-empuja 1.2s ease-in-out infinite; }
.reto-entrada-link { align-self: center; min-height: 40px; display: inline-flex; align-items: center; color: #141400; font-size: 14.5px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.reto-entrada-link:hover { color: #141400; text-decoration-thickness: 2px; }
.reto-entrada a:focus-visible { outline: 3px solid #141400; outline-offset: 3px; }
@keyframes reto-exprime { 0%, 70%, 100% { transform: scale(1, 1) rotate(0); } 78% { transform: scale(1.12, .86) rotate(-4deg); } 86% { transform: scale(.94, 1.08) rotate(3deg); } }
@keyframes reto-entrada-luz { 0% { background-position: 130% 0; } 55%, 100% { background-position: -130% 0; } }
@keyframes reto-entrada-destello { from { opacity: .25; } to { opacity: .95; } }
@keyframes reto-entrada-late { 0%, 100% { box-shadow: 0 0 0 0 rgba(20, 20, 0, .35); } 50% { box-shadow: 0 0 0 6px rgba(20, 20, 0, 0); } }
@keyframes reto-entrada-pulso { 0% { box-shadow: 0 12px 24px -10px rgba(20, 20, 0, .55), 0 0 0 0 rgba(20, 20, 0, .4); } 70%, 100% { box-shadow: 0 12px 24px -10px rgba(20, 20, 0, .55), 0 0 0 12px rgba(20, 20, 0, 0); } }
@keyframes reto-entrada-aro { 0% { box-shadow: 0 0 0 0 rgba(255, 225, 0, .65); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 225, 0, 0); } }
@keyframes reto-entrada-empuja { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
/* En el móvil, todo en columna: limón y título arriba, el texto y la etiqueta a lo ancho, y el botón grande */
@media (max-width: 760px) {
  .reto-entrada-in { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; padding-top: 18px; padding-bottom: 20px; }
  .reto-entrada-txt { display: contents; }
  .reto-entrada-limon { grid-column: 1; grid-row: 1; width: 52px; height: 52px; }
  .reto-entrada-t { grid-column: 2; grid-row: 1; font-size: 19px; }
  .reto-entrada-sub { grid-column: 1 / -1; margin-top: 12px; font-size: 15.5px; }
  .reto-entrada-premio { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
  .reto-entrada-acc { grid-column: 1 / -1; min-width: 0; margin-top: 16px; gap: 4px; }
  .reto-entrada-btn { min-height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .reto-entrada::before, .reto-entrada::after, .reto-entrada-limon, .reto-entrada-premio, .reto-entrada-btn, .reto-entrada-btn-i, .reto-entrada-btn-f { animation: none; }
}