/* integrascope.es — hoja única. Tinta de basalto, suelo de tiza, papel, líneas finas, Barlow. */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/web/fonts/Barlow-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/web/fonts/Barlow-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/web/fonts/Barlow-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/web/fonts/BarlowCondensed-600-latin.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --tinta: #1e252a;
  --tinta-2: #4a555c;
  --tiza: #eef1ef;
  --papel: #ffffff;
  --linea: #cfd6d3;
  --linea-fuerte: #1e252a;
  --senal: #f2c230;          /* la casilla amarilla del roadbook */
  --sobre-foto: #ffffff;
  --acento: var(--tinta);
  --acento-texto: #ffffff;
  --fondo: var(--tiza);
  --superficie: var(--papel);

  --f-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-cartel: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  --t-0: 0.9375rem;   /* 15 */
  --t-1: 1.125rem;    /* 18, cuerpo */
  --t-2: 1.375rem;    /* 22, entradilla */
  --t-3: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
  --t-4: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --t-5: clamp(3rem, 1.2rem + 7vw, 7.5rem);
  --t-6: clamp(3.25rem, 0.6rem + 11.5vw, 11rem);

  --hueco: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --seccion: clamp(4.5rem, 3rem + 7vw, 10rem);
  --ancho: 84rem;
  --radio: 6px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e5e9eb;
    --tinta-2: #a9b3b8;
    --tiza: #101417;
    --papel: #1a1f23;
    --linea: #2f383e;
    --linea-fuerte: #e5e9eb;
    --acento-texto: #101417;
  }
}
/* Acento de cada app, solo en su página */
.app-fusiona   { --acento: #0b8f7a; --acento-texto: #fff; }
.app-makeabook { --acento: #2445c8; --acento-texto: #fff; }
.app-visor     { --acento: #23774a; --acento-texto: #fff; }
.app-integra   { --acento: #c2410c; --acento-texto: #fff; }
.app-federa2   { --acento: #8a5d0c; --acento-texto: #fff; }
@media (prefers-color-scheme: dark) {
  .app-fusiona   { --acento: #3cc7ad; --acento-texto: #08201b; }
  .app-makeabook { --acento: #8ea2ff; --acento-texto: #0d1640; }
  .app-visor     { --acento: #5cc98f; --acento-texto: #0a2416; }
  .app-integra   { --acento: #fb923c; --acento-texto: #2a1205; }
  .app-federa2   { --acento: #e4b862; --acento-texto: #2b1c02; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 400 var(--t-1)/1.55 var(--f-texto);
  font-kerning: normal; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, .contacto :focus-visible, .apps-hero :focus-visible, .apps-portada :focus-visible, .mision :focus-visible { outline-color: var(--senal); }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-cartel); font-weight: 600; line-height: 0.95; letter-spacing: -0.01em; text-wrap: balance; }
p, ul, ol, dl, figure { margin: 0; }
p { text-wrap: pretty; }
::selection { background: var(--senal); color: #1e252a; }

.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--tinta); color: var(--fondo); padding: 0.6rem 1rem; border-radius: var(--radio); font-weight: 600; }
.saltar:focus { top: 1rem; }
.envoltura { width: min(100% - 2 * var(--hueco), var(--ancho)); margin-inline: auto; }
.visual-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera-dentro { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.marca { flex: none; display: block; padding-block: 0.5rem; }
.marca img { width: clamp(9.5rem, 7rem + 6vw, 12.5rem); height: auto; }
.nav { margin-left: auto; min-width: 0; }
.nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: clamp(0.9rem, 0.2rem + 1.6vw, 2rem); }
.nav a { display: block; padding: 0.6rem 0; font-weight: 500; font-size: var(--t-0); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--linea); }
.nav a[aria-current="page"], .nav a.es-actual { border-bottom-color: var(--acento); }
.nav .idioma { font-weight: 600; }
@media (max-width: 860px) {
  .cabecera-dentro { flex-wrap: wrap; gap: 0; padding-top: 0.35rem; }
  .nav { margin-left: 0; width: 100%; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav ul { padding-bottom: 0.1rem; padding-right: 2rem; }
  .nav a { padding: 0.45rem 0 0.6rem; }
}

/* ---------- Piezas comunes ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.7rem 1.35rem; border-radius: var(--radio); background: var(--acento); color: var(--acento-texto); font-weight: 600; text-decoration: none; border: 1px solid var(--acento); }
.boton:hover { filter: brightness(1.08); }
.boton-claro { background: transparent; color: inherit; border-color: currentColor; }
.boton-foto { background: var(--sobre-foto); color: #1e252a; border-color: var(--sobre-foto); }
.enlace-fuerte { font-weight: 600; text-decoration-thickness: 2px; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.entradilla { font-size: var(--t-2); line-height: 1.45; max-width: 36em; }
.prosa { max-width: 38rem; }
.prosa > * + * { margin-top: 1em; }
.prosa h2 { font-size: var(--t-3); margin-top: 2.2em; }
.prosa h3 { font-size: 1.5rem; margin-top: 1.8em; line-height: 1.05; }
.prosa ul { padding-left: 1.2em; }
.prosa li + li { margin-top: 0.4em; }
.tenue { color: var(--tinta-2); }

.estado { display: inline-flex; align-items: center; gap: 0.5em; font: 600 var(--t-0)/1 var(--f-texto); padding: 0.45em 0.7em 0.45em 0.55em; border: 1px solid currentColor; border-radius: 3px; white-space: nowrap; }
.estado::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.estado.pruebas::before { background: transparent; border: 2px solid currentColor; }
.estado.desarrollo::before { border-radius: 1px; transform: rotate(45deg); }

/* Fotografías grandes */
.foto { position: relative; overflow: hidden; background: #2a3034; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.credito { font-size: 0.8125rem; color: var(--tinta-2); margin-top: 0.5rem; }

/* ---------- Portada: hero ---------- */
.hero { position: relative; color: var(--sobre-foto); min-height: min(92svh, 62rem); display: grid; align-items: end; isolation: isolate; }
.hero > .foto { position: absolute; inset: 0; z-index: -1; }
.hero > .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(16 20 23 / 0.05) 30%, rgb(16 20 23 / 0.72) 100%); }
.hero-dentro { padding-block: 8rem clamp(2.5rem, 1rem + 5vw, 5rem); }
.hero h1 { font-size: var(--t-6); line-height: 0.86; letter-spacing: -0.02em; text-wrap: initial; }
.hero h1 span { display: block; }
.hero-pie { display: grid; grid-template-columns: minmax(0, 34rem) auto; gap: 1.5rem 3rem; align-items: end; justify-content: space-between; margin-top: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.hero-pie p { font-size: var(--t-2); line-height: 1.4; }
.hero .boton-claro { color: var(--sobre-foto); }
@media (max-width: 760px) { .hero-pie { grid-template-columns: 1fr; } }

/* ---------- Portada: la consultora ---------- */
.consultora { padding-block: var(--seccion) 0; }
.consultora-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--hueco); align-items: end; }
.consultora h2 { grid-column: 1 / span 8; font-size: var(--t-5); line-height: 0.9; }
.consultora .prosa { grid-column: 9 / span 4; font-size: var(--t-1); }
.consultora-foto { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.consultora-foto .foto { aspect-ratio: 21 / 9; }
@media (max-width: 900px) {
  .consultora h2, .consultora .prosa { grid-column: 1 / -1; }
  .consultora-foto .foto { aspect-ratio: 4 / 3; }
}

/* ---------- Portada: misión ---------- */
.mision { background: #1e252a; color: #eef1ef; padding-block: var(--seccion); }
.mision h2 { font-family: var(--f-texto); font-weight: 600; font-size: var(--t-0); letter-spacing: 0.02em; color: #c4ccd0; }
.mision-texto { font-family: var(--f-cartel); font-weight: 600; font-size: var(--t-4); line-height: 1.02; max-width: 22ch; margin-top: 1.25rem; text-wrap: balance; }
.valores { margin-top: clamp(3rem, 2rem + 5vw, 7rem); border-top: 1px solid #4a555c; }
.valores h3 { font-family: var(--f-texto); font-size: var(--t-0); font-weight: 600; color: #c4ccd0; padding-block: 1rem; }
.valores ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.valores li { font-family: var(--f-cartel); font-weight: 600; font-size: clamp(2.4rem, 0.5rem + 4.4vw, 4.25rem); line-height: 1; overflow-wrap: normal; padding: 1rem 0 0.5rem; border-left: 1px solid #4a555c; padding-left: clamp(0.6rem, 0.2rem + 1vw, 1.25rem); }
.valores li:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 1100px) { .valores ul { grid-template-columns: 1fr 1fr; } .valores li:nth-child(3) { border-left: 0; padding-left: 0; } .valores li { border-top: 1px solid #4a555c; } }
@media (max-width: 420px) { .valores li { font-size: 8.6vw; } }

/* ---------- Portada: servicios ---------- */
.servicios-cabeza { padding-block: var(--seccion) clamp(2rem, 1rem + 3vw, 4rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--hueco); align-items: end; }
.servicios-cabeza h2 { grid-column: 1 / span 6; font-size: var(--t-5); }
.servicios-cabeza p { grid-column: 8 / span 5; font-size: var(--t-2); line-height: 1.4; }
@media (max-width: 900px) { .servicios-cabeza h2, .servicios-cabeza p { grid-column: 1 / -1; } }

.servicio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--hueco); padding-block: clamp(3rem, 2rem + 4vw, 6rem); border-top: 1px solid var(--linea); }
.servicio-foto { grid-column: 1 / span 5; align-self: start; position: sticky; top: 6rem; }
.servicio-foto .foto { aspect-ratio: 4 / 5; border-radius: var(--radio); }
.servicio-texto { grid-column: 7 / span 6; }
.servicio-texto h3 { font-size: var(--t-5); }
.servicio-texto .entradilla { margin-top: 1.25rem; }
.puntos { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.punto { padding-block: 1.25rem; border-top: 1px solid var(--linea); display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.5rem 2rem; }
.punto h4 { font-size: 1.6rem; line-height: 1; }
.servicio-texto .acciones { margin-top: 2rem; }
.servicio.invertido .servicio-foto { grid-column: 8 / span 5; grid-row: 1; }
.servicio.invertido .servicio-texto { grid-column: 1 / span 6; grid-row: 1; }
@media (max-width: 900px) {
  .servicio-foto, .servicio-texto, .servicio.invertido .servicio-foto, .servicio.invertido .servicio-texto { grid-column: 1 / -1; grid-row: auto; position: static; }
  .servicio-foto .foto { aspect-ratio: 3 / 2; }
  .punto { grid-template-columns: 1fr; }
}
.banda { margin-top: 0; }
.banda .foto { aspect-ratio: 3 / 1; }
@media (max-width: 700px) { .banda .foto { aspect-ratio: 16 / 9; } }

/* ---------- Portada: aplicaciones ---------- */
.apps-portada { position: relative; color: #eef1ef; background: #101417; isolation: isolate; overflow: hidden; padding-block: var(--seccion); }
.apps-portada > .foto { position: absolute; inset: 0; z-index: -1; background: #101417; }
.apps-portada > .foto img { opacity: 0.45; }
.apps-portada-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--hueco); align-items: center; }
.apps-portada-texto { grid-column: 1 / span 5; }
.apps-portada h2 { font-size: clamp(2.75rem, 1rem + 4.4vw, 5.25rem); }
.apps-portada p { font-size: var(--t-2); line-height: 1.4; margin-top: 1.25rem; max-width: 26em; }
.apps-portada ul { list-style: none; padding: 0; margin-top: 2rem; border-top: 1px solid rgb(255 255 255 / 0.25); }
.apps-portada li { border-bottom: 1px solid rgb(255 255 255 / 0.25); }
.apps-portada li a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; text-decoration: none; font-family: var(--f-cartel); font-size: 1.75rem; line-height: 1; }
.apps-portada li a span { font-family: var(--f-texto); font-size: var(--t-0); color: #c4ccd0; align-self: center; text-align: right; }
.apps-portada li a:hover { color: var(--senal); }
.apps-portada .acciones { margin-top: 2rem; }
.apps-portada .boton { background: var(--senal); color: #1e252a; border-color: var(--senal); }
.apps-collage { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 1rem; }
.apps-collage figure { border-radius: var(--radio); overflow: hidden; box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.6); background: #fff; }
.apps-collage .c-visor { grid-column: 1 / span 6; }
.apps-collage .c-makeabook { grid-column: 1 / span 4; align-self: start; }
.apps-collage .c-fusiona { grid-column: 5 / span 2; grid-row: 2; border-radius: 18px; align-self: start; }
@media (max-width: 900px) { .apps-portada-texto, .apps-collage { grid-column: 1 / -1; } }

/* ---------- Portada: contacto ---------- */
.contacto { position: relative; color: var(--sobre-foto); isolation: isolate; min-height: min(86svh, 54rem); display: grid; align-items: center; }
.contacto > .foto { position: absolute; inset: 0; z-index: -1; }
.contacto > .foto::after { content: ""; position: absolute; inset: 0; background: rgb(16 20 23 / 0.55); }
.contacto-dentro { padding-block: var(--seccion); }
.contacto h2 { font-size: var(--t-5); max-width: 12ch; }
.contacto p { font-size: var(--t-2); margin-top: 1.25rem; max-width: 28em; }
.telefono { display: inline-block; margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); text-decoration: none; }
.telefono span { display: block; }
.telefono-etiqueta { font-weight: 500; font-size: var(--t-1); }
.telefono-numero { font-family: var(--f-cartel); font-weight: 600; font-size: clamp(2.6rem, 0.8rem + 8vw, 8rem); line-height: 1; letter-spacing: -0.01em; border-bottom: 3px solid var(--senal); padding-bottom: 0.1em; }
.telefono:hover .telefono-numero { color: var(--senal); }

/* ---------- Pie ---------- */
.pie { background: var(--papel); border-top: 1px solid var(--linea); padding-top: 2.5rem; }
.pie-dentro { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.pie-marca img { width: 10rem; height: auto; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-size: var(--t-0); }
.pie-enlaces a { text-decoration: none; padding-block: 0.4rem; }
.pie-enlaces a:hover { text-decoration: underline; }
.financiacion { margin-top: 2rem; padding: 1.5rem var(--hueco) 2rem; background: #ffffff; color: #1e252a; text-align: center; border-top: 1px solid #e3e7e5; }
.financiacion p { font-size: 0.875rem; max-width: 60rem; margin-inline: auto; }
.financiacion-logos { margin: 1rem auto 0; max-width: 64rem; overflow-x: auto; }
.financiacion-logos img { min-width: 40rem; width: 100%; }
@media (max-width: 700px) { .financiacion-logos img { min-width: 0; } }

/* ---------- Migas ---------- */
.migas { font-size: var(--t-0); padding-top: 1.5rem; }
.migas ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.migas li + li::before { content: "/"; margin-right: 0.6rem; color: var(--tinta-2); }
.migas a { text-decoration: none; color: var(--tinta-2); }
.migas a:hover { text-decoration: underline; color: var(--tinta); }

/* ---------- /apps/: índice ---------- */
.apps-hero { position: relative; color: var(--sobre-foto); isolation: isolate; min-height: min(70svh, 44rem); display: grid; align-items: end; }
.apps-hero > .foto { position: absolute; inset: 0; z-index: -1; }
.apps-hero > .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(16 20 23 / 0.15), rgb(16 20 23 / 0.75)); }
.apps-hero .migas a, .apps-hero .migas li::before, .apps-hero .migas li { color: rgb(255 255 255 / 0.85); }
.apps-hero-dentro { padding-block: 6rem clamp(2.5rem, 1rem + 4vw, 4.5rem); }
.apps-hero h1 { font-size: var(--t-6); line-height: 0.86; margin-top: 1rem; }
.apps-hero p { font-size: var(--t-2); line-height: 1.4; max-width: 32em; margin-top: 1.25rem; }

.familia { padding-top: var(--seccion); }
.familia-cabeza { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem var(--hueco); align-items: end; margin-bottom: 2rem; }
.familia-cabeza h2 { grid-column: 1 / span 6; font-size: var(--t-4); }
.familia-cabeza p { grid-column: 7 / span 6; color: var(--tinta-2); max-width: 34em; }
@media (max-width: 900px) { .familia-cabeza h2, .familia-cabeza p { grid-column: 1 / -1; } }

/* La viñeta: tres casillas separadas por línea fina, como una fila de roadbook */
.vineta { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 1.25fr); border: 1px solid var(--linea-fuerte); background: var(--superficie); }
.vineta + .vineta { border-top: 0; }
.vineta > * { padding: clamp(1rem, 0.6rem + 1.5vw, 2rem); min-width: 0; }
.vineta-casilla { border-right: 1px solid var(--linea-fuerte); display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; }
.vineta-icono { width: 4rem; height: 4rem; border-radius: 14px; }
.vineta-tipo { font-size: var(--t-0); color: var(--tinta-2); line-height: 1.35; }
.vineta-cuerpo { border-right: 1px solid var(--linea-fuerte); display: flex; flex-direction: column; }
.vineta-cuerpo h3 { font-size: clamp(2.5rem, 1rem + 3.6vw, 5rem); line-height: 0.9; }
.vineta-casilla .estado { white-space: normal; line-height: 1.2; }
.vineta-cuerpo h3 a { text-decoration: none; }
.vineta-cuerpo h3 a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.vineta-cuerpo p { margin-top: 1rem; max-width: 30em; }
.vineta-cuerpo .acciones { margin-top: auto; padding-top: 1.5rem; }
.vineta-imagen { background: var(--tiza); display: grid; place-items: center; padding: clamp(1rem, 0.6rem + 1.5vw, 2rem); }
.vineta-imagen img, .vineta-imagen svg { border-radius: 4px; box-shadow: 0 12px 30px -16px rgb(16 20 23 / 0.45); }
.vineta-imagen .telefono-captura { max-width: 13rem; border-radius: 22px; }
.vineta-imagen svg { box-shadow: none; width: 100%; }
@media (max-width: 1000px) {
  .vineta { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .vineta-imagen { grid-column: 1 / -1; border-top: 1px solid var(--linea-fuerte); }
  .vineta-cuerpo { border-right: 0; }
}
@media (max-width: 620px) {
  .vineta { grid-template-columns: 1fr; }
  .vineta-casilla { border-right: 0; border-bottom: 1px solid var(--linea-fuerte); flex-direction: row; align-items: center; justify-content: flex-start; }
  .vineta-icono { width: 3rem; height: 3rem; border-radius: 11px; }
}
.puente { margin-top: 1.25rem; padding: 1rem 1.25rem; border-left: 4px solid var(--senal); background: var(--superficie); max-width: 46rem; }

.apps-contacto { padding-block: var(--seccion); }
.apps-contacto-caja { border-top: 1px solid var(--linea-fuerte); padding-top: 2rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--hueco); align-items: start; }
.apps-contacto h2 { grid-column: 1 / span 6; font-size: var(--t-4); }
.apps-contacto-texto { grid-column: 7 / span 6; }
.correo { font-family: var(--f-cartel); font-weight: 600; font-size: clamp(1.75rem, 1rem + 3vw, 3.25rem); line-height: 1.05; text-decoration-color: var(--senal); text-decoration-thickness: 3px; display: inline-block; margin-top: 0.75rem; }
@media (max-width: 900px) { .apps-contacto h2, .apps-contacto-texto { grid-column: 1 / -1; } }

/* ---------- Página de app ---------- */
.ficha-hero { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); border-bottom: 1px solid var(--linea); }
.ficha-hero-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--hueco); align-items: center; margin-top: clamp(2rem, 1rem + 3vw, 4rem); }
.ficha-hero-texto { grid-column: 1 / span 5; }
.ficha-hero-media { grid-column: 6 / span 7; }
.ficha-icono { width: 5.5rem; height: 5.5rem; border-radius: 20px; margin-bottom: 1.5rem; }
.ficha-hero h1 { font-size: var(--t-6); line-height: 0.85; color: var(--acento); letter-spacing: -0.02em; }
.ficha-lema { font-family: var(--f-cartel); font-weight: 600; font-size: var(--t-4); line-height: 1; margin-top: 0.75rem; }
.ficha-hero .entradilla { margin-top: 1.5rem; font-size: var(--t-1); }
.ficha-datos { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 1.75rem; color: var(--acento); }
.ficha-datos .plataforma { color: var(--tinta-2); font-size: var(--t-0); }
.ficha-hero .acciones { margin-top: 2rem; }
.ficha-hero-media img { border-radius: var(--radio); box-shadow: 0 30px 70px -30px rgb(16 20 23 / 0.5); }
.ficha-hero-media svg { width: 100%; }
@media (max-width: 960px) { .ficha-hero-texto, .ficha-hero-media { grid-column: 1 / -1; } }

.bloque { padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem); border-bottom: 1px solid var(--linea); }
.bloque-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--hueco); }
.bloque-rejilla > h2 { grid-column: 1 / span 4; font-size: var(--t-4); }
.bloque-rejilla > .bloque-cuerpo { grid-column: 5 / span 8; }
@media (max-width: 900px) { .bloque-rejilla > h2, .bloque-rejilla > .bloque-cuerpo { grid-column: 1 / -1; } }

.funciones { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--hueco); }
.funciones li { border-top: 1px solid var(--linea-fuerte); padding: 1rem 0 1.75rem; }
.funciones h3 { font-size: 1.6rem; line-height: 1; color: var(--acento); }
.funciones p { margin-top: 0.5rem; }
@media (max-width: 700px) { .funciones { grid-template-columns: 1fr; } }

.galeria { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 2vw, 2.5rem) var(--hueco); margin-top: 2.5rem; }
.galeria figure { grid-column: span 6; }
.galeria figure.ancha { grid-column: 1 / -1; }
.galeria figure.estrecha { grid-column: span 4; }
.galeria figure.media { grid-column: span 8; }
.galeria img { border-radius: var(--radio); border: 1px solid var(--linea); background: #fff; }
.galeria figcaption, .ficha-hero-media figcaption { font-size: var(--t-0); color: var(--tinta-2); margin-top: 0.75rem; max-width: 40em; }
@media (max-width: 760px) { .galeria figure, .galeria figure.estrecha, .galeria figure.media { grid-column: 1 / -1; } }

.formatos { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin-top: 1.25rem; }
.formatos li { font: 600 1.25rem/1 var(--f-cartel); padding: 0.5rem 0.8rem; border: 1px solid var(--linea-fuerte); border-radius: 3px; background: var(--superficie); }

.estado-tabla { margin-top: 1rem; border-top: 1px solid var(--linea-fuerte); }
.estado-fila { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 0.5rem 2rem; padding-block: 1.1rem; border-bottom: 1px solid var(--linea); align-items: start; }
.estado-fila dt { font-family: var(--f-cartel); font-weight: 600; font-size: 1.6rem; line-height: 1.05; }
.estado-fila dd { margin: 0; }
.estado-fila .estado { color: var(--acento); margin-bottom: 0.6rem; }
@media (max-width: 620px) { .estado-fila { grid-template-columns: 1fr; } }

.otras { padding-block: var(--seccion); }
.otras h2 { font-size: var(--t-4); }
.otras ul { list-style: none; padding: 0; margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); border-top: 1px solid var(--linea-fuerte); }
.otras li a { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0.5rem 1.1rem 0; text-decoration: none; border-bottom: 1px solid var(--linea); }
.otras li img { width: 2.75rem; height: 2.75rem; border-radius: 10px; flex: none; }
.otras li strong { display: block; font: 600 1.6rem/1 var(--f-cartel); }
.otras li span span { font-size: var(--t-0); color: var(--tinta-2); }
.otras li a:hover strong { text-decoration: underline; }

/* Fusiona */
.video-marco { position: relative; border-radius: 14px; overflow: hidden; background: #f2f2ef; box-shadow: 0 30px 70px -30px rgb(16 20 23 / 0.5); }
.video-marco video { width: 100%; height: auto; }
.video-vertical { display: none; }
@media (max-width: 640px) {
  .video-horizontal { display: none; }
  .video-vertical { display: block; }
  .video-marco { max-width: 22rem; margin-inline: auto; }
}
.video-control { position: absolute; right: 0.75rem; bottom: 0.75rem; min-height: 2.75rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 0; background: rgb(16 20 23 / 0.78); color: #fff; font: 600 var(--t-0)/1 var(--f-texto); cursor: pointer; }
.video-control[hidden] { display: none; }
.pantallas { list-style: none; padding: 0 var(--hueco) 1rem; margin-top: 2.5rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12.5rem, 16rem); gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hueco); }
.pantallas li { scroll-snap-align: start; counter-increment: paso; }
.pantallas img { border-radius: 24px; border: 1px solid var(--linea); }
.pantallas h3 { font-size: 1.5rem; margin-top: 1rem; display: flex; gap: 0.5rem; align-items: baseline; }
.pantallas h3::before { content: counter(paso); font-family: var(--f-texto); font-size: var(--t-0); color: var(--acento); font-weight: 600; }
.pantallas p { font-size: var(--t-0); margin-top: 0.35rem; color: var(--tinta-2); }
.precios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--linea-fuerte); margin-top: 0.5rem; }
.precio { padding: clamp(1.25rem, 0.8rem + 1.5vw, 2rem); background: var(--superficie); }
.precio + .precio { border-left: 1px solid var(--linea-fuerte); }
.precio h3 { font-size: 1.75rem; }
.precio-cifra { font: 600 var(--t-5)/1 var(--f-cartel); color: var(--acento); margin-top: 0.75rem; }
.precio p { margin-top: 0.75rem; }
@media (max-width: 620px) { .precios { grid-template-columns: 1fr; } .precio + .precio { border-left: 0; border-top: 1px solid var(--linea-fuerte); } }
.lista-enlaces { list-style: none; padding: 0; border-top: 1px solid var(--linea-fuerte); }
.lista-enlaces a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; font: 600 1.6rem/1.05 var(--f-cartel); }
.lista-enlaces a span { font: 400 var(--t-0)/1.3 var(--f-texto); color: var(--tinta-2); align-self: center; text-align: right; }
.lista-enlaces a:hover { color: var(--acento); }

/* Páginas legales de Fusiona */
.legal { padding-bottom: var(--seccion); }
.legal-cabeza { display: flex; gap: 1.5rem; align-items: center; margin-top: clamp(2rem, 1rem + 3vw, 4rem); padding-bottom: 2rem; border-bottom: 1px solid var(--linea); }
.legal-cabeza img { width: 4.5rem; height: 4.5rem; border-radius: 16px; flex: none; }
.legal-cabeza h1 { font-size: var(--t-5); color: var(--acento); }
.legal-cabeza p { font-weight: 500; margin-top: 0.4rem; }
.legal .prosa { margin-top: 1rem; max-width: 42rem; }
.legal section h2 { font-size: var(--t-3); margin-top: 2.5rem; }
.legal section h3 { font-size: 1.5rem; margin-top: 2rem; }
.legal section p { margin-top: 0.75rem; }

/* Ilustraciones propias (SVG en línea, colores por clase) */
.ilu { width: 100%; height: auto; }
.ilu .i-papel { fill: var(--papel); }
.ilu .i-tiza { fill: var(--tiza); }
.ilu .i-linea { stroke: var(--linea-fuerte); fill: none; stroke-width: 2; }
.ilu .i-fina { stroke: var(--linea); fill: none; stroke-width: 2; }
.ilu .i-texto { fill: var(--tinta-2); }
.ilu .i-tinta { fill: var(--tinta); }
.ilu .i-acento { fill: var(--acento); }
.ilu .i-acento-linea { stroke: var(--acento); fill: none; stroke-width: 3; }
.ilu .i-sobre-acento { fill: var(--acento-texto); }
.ilu .i-senal { fill: var(--senal); }
.ilu text { font-family: var(--f-cartel); font-weight: 600; }
.ilu .i-letra { font-family: var(--f-texto); font-weight: 500; }

/* 404 */
.error { min-height: 70svh; display: grid; align-items: center; padding-block: var(--seccion); }
.error h1 { font-size: var(--t-6); line-height: 0.86; }
.error p { font-size: var(--t-2); margin-top: 1.5rem; max-width: 30em; }
.error .acciones { margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Único momento de movimiento: la entrada del titular de la portada */
  .hero h1 span { animation: subir 0.9s cubic-bezier(.2,.7,.2,1) both; }
  .hero h1 span + span { animation-delay: 0.12s; }
  @keyframes subir { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
}
@media print {
  .cabecera, .video-control, .financiacion-logos { display: none; }
  body { background: #fff; color: #000; }
}
.formatos-titulo { font-size: 1.6rem; margin-top: 1.5rem; }
.entradilla + .lista-enlaces, .entradilla + .precios { margin-top: 1.75rem; }
.prosa + .funciones { margin-top: 2rem; }

/* ---------- Destacada: Fusiona en /apps/ y en la portada ---------- */
.etiqueta-destacada { display: inline-block; background: var(--senal); color: #1e252a; font-family: var(--f-texto); font-size: var(--t-0); font-weight: 600; line-height: 1; padding: 0.35rem 0.6rem; border-radius: 2px; margin-bottom: 0.9rem; }
.destacada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hueco); align-items: center; padding-block: var(--seccion); border-bottom: 1px solid var(--linea); }
.destacada-texto { min-width: 0; }
.destacada h2 { font-size: var(--t-5); line-height: 0.9; color: var(--acento); }
.destacada h2 a { color: inherit; text-decoration: none; }
.destacada-lema { font-family: var(--f-cartel); font-size: var(--t-3); line-height: 1.05; margin-top: 0.5rem; }
.destacada-texto > p:not(.etiqueta-destacada):not(.destacada-lema):not(.destacada-datos) { color: var(--tinta-2); max-width: 34em; margin-top: 1rem; }
.destacada-datos { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-top: 1.25rem; color: var(--tinta-2); }
.destacada .acciones { margin-top: 1.75rem; }
.destacada-imagen { margin: 0; min-width: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.45); background: #fff; }
.destacada-imagen img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .destacada { grid-template-columns: minmax(0, 1fr); } }
.apps-portada .destacada-portada a { color: var(--sobre-foto); }
.apps-portada .nombre-destacada { display: inline-flex; align-items: center; gap: 0.75rem; }
.apps-portada .destacada-portada .etiqueta-destacada { margin: 0; color: #1e252a; font-family: var(--f-texto); font-size: var(--t-0); font-weight: 600; text-align: center; }
.apps-portada .destacada-portada a > span:last-child { color: #c4ccd0; }