/* =============================================================================
   MEMORA360 · v2 — hoja complementaria
   Se carga DESPUÉS de site.css, así que sólo agrega y ajusta. No reemplaza nada.
   Contiene, en este orden:
     1. Componentes nuevos de la v2 (.layers, .tri, .role.ext) y footer a 5 columnas
     2. Objetivos táctiles de 44 px
     3. Hero visible en pantallas de notebook
   ============================================================================= */

/* =============================================================================
   MEMORA360 · v2 — reglas CSS NUEVAS
   Anexar al final de assets/v/site.css. No reemplaza nada existente.
   Sólo cuatro componentes nuevos; el resto de la v2 reutiliza el sistema actual
   (.roles, .why-grid, .lp-grid, .lp-list, .lp-shot, .fam-card, .fam-link,
   .steps, .demo-proof, .seg, .shot-fig, .sheet).
   ============================================================================= */

/* Franja de capas bajo el hero */
.layers{border-top:1px solid var(--line-dark)}
.layers ul{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-dark);border-bottom:1px solid var(--line-dark)}
.layers li{background:var(--navy-900)}
.layers a{display:flex;flex-direction:column;gap:6px;justify-content:center;padding:20px 18px;min-height:88px;text-decoration:none;transition:background .25s var(--e1)}
.layers a:hover{background:rgba(91,149,242,.1)}
.layers .n{font-family:var(--narrow);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark)}
.layers .s{font-size:13.5px;color:var(--on-dark-3);line-height:1.35}
@media(max-width:900px){.layers ul{grid-template-columns:1fr 1fr}.layers li:last-child{grid-column:1/-1}}
@media(max-width:420px){.layers .s{display:none}.layers a{min-height:64px}}

/* Una plataforma, tres resultados */
.tri{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.tri>div{padding:30px 32px 34px 0;border-right:1px solid var(--line)}
.tri>div+div{padding-left:32px}
.tri>div:last-child{border-right:0;padding-right:0}
.tri .n{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-600)}
.tri h3{font-size:clamp(22px,2.2vw,28px);font-weight:400;line-height:1.15;margin-top:12px}
.tri p{margin-top:12px;color:var(--slate);font-size:15.5px;max-width:42ch}
@media(max-width:880px){.tri{grid-template-columns:1fr}.tri>div{border-right:0;border-bottom:1px solid var(--line);padding:26px 0 28px!important}.tri>div:last-child{border-bottom:0}}

/* Quinta perspectiva: usuario externo autorizado */
.roles.has-ext{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.roles.has-ext{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.roles.has-ext{grid-template-columns:1fr}}
.role.ext{grid-column:1/-1;margin-top:12px;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:6px;padding:26px 24px 24px!important;border-left:1px solid var(--blue-100)!important}
.role.ext .tagx{display:inline-block;font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700);margin-bottom:10px}
.role.ext .link{margin-top:12px}

/* Footer: quinta columna ("Plataforma") */
.ft-top{grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,.62fr))}
@media(max-width:1100px){.ft-top{grid-template-columns:1fr 1fr}.ft-top>div:first-child{grid-column:1/-1}}
/* =============================================================================
   MEMORA360 · Objetivos táctiles de 44 px
   Parche INDEPENDIENTE de la v2. Corrige un hallazgo preexistente de producción:
   varios controles quedan bajo los 44×44 px que pide el documento de aceptación.

   Contexto medido sobre el sitio actual:
   - No hay ningún incumplimiento de WCAG 2.2 AA (SC 2.5.8 pide 24×24 px, y los
     enlaces en línea dentro de un párrafo están exentos). El vacío es contra el
     criterio de 44 px que adoptó el documento, equivalente a WCAG AAA (2.5.5) y
     a la guía de Apple.
   - Se corrigen sólo los controles con riesgo real de toque errado. Los enlaces
     en línea dentro de un texto (Política de Privacidad, el correo del footer)
     se dejan como están: agrandarlos rompería el flujo del párrafo y están
     explícitamente exentos.

   Anexar al final de assets/v/site.css, después de site-additions.css.
   Ningún cambio altera el diseño: donde crecer sumaría alto se usa un área de
   toque invisible con ::after, que no afecta el layout.
   ============================================================================= */

/* --- Crecen de verdad (el alto extra mejora el ritmo, no lo rompe) ---------- */

/* Marca del header: 36 → 44 px. El header sigue midiendo 72 px. */
.brand{height:auto;min-height:44px}

/* Botón de demo del header: 42 → 44 px. */
.nav .btn{min-height:44px}

/* Selectores de vista dentro de las capacidades: 36 → 44 px. */
.seg button{min-height:44px}

/* Enlaces de columna del footer: 36 → 44 px.
   Es el caso de mayor riesgo: 13 enlaces apilados sin separación entre sí. */
.ft-col a{min-height:44px}

/* --- Área de toque ampliada sin mover nada (::after invisible) -------------- */

.fam-link,
.crumbs a,
.lp-related a,
.ft-social a,
.ft-bot a{position:relative}

.fam-link::after,
.crumbs a::after,
.lp-related a::after,
.ft-social a::after,
.ft-bot a::after{
  content:"";
  position:absolute;
  left:0;right:0;
  top:50%;
  height:44px;
  transform:translateY(-50%);
}

/* El área ampliada no debe tapar al vecino cuando quedan muy juntos:
   los enlaces relacionados pasan de 10 a 20 px de separación entre filas. */
.crumbs a::after{left:-4px;right:-4px}
.lp-related{gap:20px 22px}
/* =============================================================================
   MEMORA360 · Hero visible en pantallas de notebook
   Parche INDEPENDIENTE. Toca el diseño del hero, así que es una decisión
   explícita y reversible: sin él, la v2 funciona igual.

   Problema medido sobre el sitio actual (alto útil = resolución menos el chrome
   del navegador). Los CTA del hero quedaban bajo la línea de flotación en TODOS
   los tamaños de notebook, incluso en 1920×1080:

     13" 1366×640   fin de los CTA a +402 px de la línea de flotación
     14" 1440×790   +261 px
     15" 1536×730   +321 px
     24" 1920×950   +101 px

   Causa principal: el H1 cae a 6 líneas porque la columna de texto ocupa la
   mitad del ancho y el tamaño escala con 5.6vw. El resto es respiración
   (176 px de padding superior, 80 px sobre la franja de atributos).

   Después del parche, con el párrafo corto de la v2, los CTA entran completos
   en los cuatro tamaños. El hero pasa de 1302 a 887 px (806 px en 13").

   Lo que cambia a la vista:
   - La columna de texto recupera el reparto 1,15 / 0,85 del sistema: el texto
     gana ancho y las capturas se ven algo más chicas.
   - El H1 baja de 78 a 66 px en escritorio (56 px en pantallas de menos de
     700 px de alto). Sigue siendo el elemento dominante.
   - En pantallas bajas se comprimen paddings y márgenes. En pantallas altas
     no cambia nada respecto del parche base.

   Anexar al final de assets/v/site.css, después de site-additions.css.
   ============================================================================= */

/* La columna de texto vuelve al reparto del sistema: menos quiebres en el H1. */
.hero .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}

/* Bajo 900 px el hero sigue apilado como en producción: la regla anterior tiene
   mayor especificidad que el @media base de site.css y hay que replicarlo aquí. */
@media(max-width:900px){
  .hero .hero-grid{grid-template-columns:1fr}
}

/* El H1 escala con más holgura: 6 líneas → 4 en notebook. */
.hero h1{font-size:clamp(38px,4.6vw,66px)}

/* Pantallas de menos de 950 px de alto: se comprime la respiración del hero. */
@media(min-width:900px) and (max-height:950px){
  .hero{padding-top:calc(72px + env(safe-area-inset-top,0px) + 44px)}
  .hero h1{margin-top:18px}
  .hero .lede{margin-top:20px}
  .hero-ctas{margin-top:26px}
  .attrs{margin-top:40px}
  .attrs ul{padding-block:16px}
  .layers a{min-height:70px;padding:14px 18px}
}

/* Pantallas de menos de 700 px de alto (13" con barra de marcadores): un paso más. */
@media(min-width:900px) and (max-height:700px){
  .hero{padding-top:calc(72px + env(safe-area-inset-top,0px) + 26px)}
  .hero h1{font-size:clamp(34px,4.1vw,56px)}
  .hero .lede{margin-top:16px}
  .hero-ctas{margin-top:20px}
  .attrs{margin-top:28px}
}

/* =============================================================================
   MEMORA360 · v2.1 (24-09-2026) — ritmo de fondos y jerarquía de los gráficos
   Tres hallazgos de la revisión visual:
     1. Tres secciones claras seguidas con el mismo fondo (#resultados-plataforma,
        #erp, #roles y, más abajo, #por-que, #recursos, #faq).
     2. El panel de soluciones y el stepper del flujo se leían planos: la pestaña
        activa casi no se distinguía y la tarjeta de detalle no se separaba del fondo.
     3. Los dos bloques de cuatro tarjetas de #familias eran visualmente idénticos.
   ============================================================================= */

/* 1 · RITMO DE FONDOS --------------------------------------------------------
   El sitio alterna tres tonos: navy (#0E1629 / #0A101F), hueso (#F6F4EF, el del
   body) y arena. Se sube la arena de #EFEDE6 a #EAE7DE para que el corte se lea,
   y se aplica también a #erp y #recursos. Resultado en la portada: 16 secciones
   sin que ninguna repita el fondo de la anterior.
   navy · hueso · navy · hueso · arena · navy · hueso · arena · hueso · arena ·
   hueso · navy · hueso · arena · hueso · navy                                  */
.impl, #erp, #recursos { background: #EAE7DE }

/* 2 · PANEL DE SOLUCIONES ---------------------------------------------------- */

/* La pestaña activa pasaba de #F6F4EF a #FCFBF8: 6 puntos de diferencia.
   Se oscurecen las inactivas y se engrosa la barra azul superior. */
.sol-tab:not([aria-selected="true"]) { background: #EFEDE6 }
.sol-tab:not([aria-selected="true"]) .n { color: #5C6377 }
.sol-tab::after { height: 3px }

/* El panel deja de fundirse con la página. */
.sol-panel { box-shadow: 0 1px 2px rgba(20,30,56,.04), 0 16px 32px -24px rgba(20,30,56,.28) }
.sol-caps { background: #EFEDE6 }

/* La lista de capacidades se leía como cuatro filas sueltas: el marcador original
   (.sol-caps li::before) está anulado por la regla "sin marcas decorativas" de
   site.css. Se numera con ::after, que queda libre. */
.sol-caps ul { counter-reset: solcap }
.sol-caps li { position: relative; padding-left: 34px }
.sol-caps li::after {
  counter-increment: solcap;
  content: counter(solcap, decimal-leading-zero);
  position: absolute; left: 0; top: 16px;
  font-family: var(--narrow); font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--blue-600);
}

/* "Solicitar demo" se leía como un pie de foto junto al enlace principal. */
.sol-main .ctas2 { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px }
.sol-main .ctas2 .link { margin-top: 0 }
.sol-main .link-demo {
  border: 1px solid var(--line); border-radius: 4px; padding: 11px 16px;
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--ink); background: var(--bone);
}
.sol-main .link-demo:hover { border-color: var(--blue-600); color: var(--blue-600); background: var(--blue-50) }

/* 3 · STEPPER DEL FLUJO ------------------------------------------------------ */

/* Tres estados distinguibles: cumplida (relleno azul claro), activa (azul sólido)
   y pendiente (hueso). #666D80 da 4,70:1 sobre #F6F4EF, sobre el mínimo AA. */
.st.done:not([aria-selected="true"]) .dot { background: var(--blue-50); border-color: var(--blue-400); color: var(--blue-700) }
.st:not(.done):not([aria-selected="true"]) .nm { color: #666D80 }
.st[aria-selected="true"] .nm { color: var(--ink); font-weight: 700 }

/* La tarjeta era enorme para una línea de texto y no se separaba del fondo. */
.flow-detail {
  margin-top: 34px;
  padding: clamp(22px,2.6vw,34px) clamp(24px,3vw,40px);
  border-left: 3px solid var(--blue-600);
  box-shadow: 0 1px 2px rgba(20,30,56,.04), 0 16px 32px -24px rgba(20,30,56,.28);
  align-items: start;
}
.flow-detail .big { font-size: clamp(48px,5.2vw,72px); line-height: .9 }
.flow-detail p { margin-top: 8px }
.flow-detail .nx { margin-top: 14px }

/* En escritorio, "actualiza la siguiente etapa" ocupa el vacío de la derecha. */
@media(min-width:861px){
  .flow-detail > div:last-child { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: clamp(24px,4vw,64px); align-items: start }
  .flow-detail h3, .flow-detail p:not(.nx) { grid-column: 1 }
  .flow-detail .nx { grid-column: 2; grid-row: 1 / span 3; align-self: end; justify-self: end; text-align: right; margin-top: 0; max-width: 22ch }
}

/* 4 · CAPACIDADES TRANSVERSALES ---------------------------------------------
   Eran cuatro tarjetas idénticas a las cuatro soluciones de arriba. Ahora son un
   solo panel con cuatro columnas separadas por filete: se leen como una capa
   sobre MEMORA Core, no como cuatro productos más.                            */
.arch-top.xcaps {
  gap: 0; margin-top: 26px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line-dark); border-radius: 6px; overflow: hidden;
}
.xcaps .fam-card {
  border: 0; border-right: 1px solid var(--line-dark); border-radius: 0;
  background: none; padding: 28px 26px 26px; gap: 10px;
}
.xcaps .fam-card:last-child { border-right: 0 }
.xcaps .fam-card::before { display: none }
.xcaps .fam-card .pre { letter-spacing: .22em; font-size: 11px; color: var(--on-dark-3) }
.xcaps .fam-card h3 { font-size: clamp(19px,1.5vw,22px) }
.xcaps .fam-card p { font-size: 14.5px; color: var(--on-dark-3) }
@media(max-width:980px){
  .xcaps .fam-card:nth-child(2) { border-right: 0 }
  .xcaps .fam-card:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark) }
}
@media(max-width:560px){
  .xcaps .fam-card { border-right: 0; border-bottom: 1px solid var(--line-dark) }
  .xcaps .fam-card:last-child { border-bottom: 0 }
}

/* =============================================================================
   MEMORA360 · v2.2 (24-09-2026)
     a) #roles y #faq traían `padding-top:0` en línea para fundirse con la sección
        anterior, que era del mismo color. Al alternar los fondos ese borde quedó
        visible y sin aire: se quitó el inline en template.html.
     b) #familias eran dos bloques hermanos de cuatro tarjetas. Ahora es UNA pila
        de tres capas con las relaciones escritas entre ellas:
          Soluciones → "todas comparten" → MEMORA Core → "y sobre esa base se
          activan" → Capacidades transversales
        Las capacidades se tiñen del azul de Core, para leerse como algo que se
        apoya en él, y pierden el rótulo "MEMORA" repetido cuatro veces.
   ============================================================================= */

/* Rótulo de capa: texto corto + filete que recorre el ancho. */
.arch .tier-h{
  display: flex; align-items: center; gap: 18px; margin: 0 0 16px;
  font-family: var(--narrow); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-400);
}
.arch .tier-h::after{ content: ""; flex: 1; height: 1px; background: var(--line-dark) }

/* Junta entre capas: filete vertical con la relación escrita al medio. */
.arch .joint{
  position: relative; margin: 0; padding: 30px 0; text-align: center;
  font-family: var(--narrow); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue-400);
}
.arch .joint::before{
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(91,149,242,.18), rgba(91,149,242,.55));
}
.arch .joint span{ position: relative; background: #0E1629; padding: 0 16px }

/* Las juntas ya dan el aire: los bloques no llevan margen propio. */
.arch .core{ margin-top: 0 }
.arch .arch-top.xcaps{
  margin-top: 0;
  background: rgba(91,149,242,.08);
  border-color: rgba(91,149,242,.30);
}
.xcaps .fam-card{ border-right-color: rgba(91,149,242,.22) }
.xcaps .fam-card .pre{ display: none }
@media(max-width:980px){ .xcaps .fam-card{ border-bottom-color: rgba(91,149,242,.22) } }
@media(max-width:560px){ .xcaps .fam-card{ border-bottom-color: rgba(91,149,242,.22) } }

/* =============================================================================
   MEMORA360 · v2.3 (24-09-2026) — hero
     · Se quitó el pie "Capturas reales en ambiente de demostración" (marcado).
     · La captura de adelante (catastro GIS) crece de 118% a 124% del contenedor.
       El 118% original nunca se aplicaba: `img{max-width:100%}` lo recortaba a
       100%, por eso hay que soltar también el max-width.
     · Acotado a escritorio: bajo 901 px el hero se apila y .hero-shots queda con
       max-width 640 px, donde un 124% sin tope se saldría de la pantalla.
   ============================================================================= */
@media(min-width:901px){
  .hero-shots{ padding-bottom: 6% }
  .hs-front{ width: 124%!important; max-width: none!important; margin-left: -14% }
}
/* Entre 901 y 1099 px la columna del hero es muy angosta: con el tiro de -14%
   la captura se montaba 11 px sobre el párrafo. Ahí crece menos y se corre menos. */
@media(min-width:901px) and (max-width:1099px){
  .hs-front{ width: 114%!important; margin-left: -6% }
}
@media(max-width:900px){ .hero-shots{ padding-bottom: 4% } }

/* =============================================================================
   MEMORA360 · v2.4 (24-09-2026) — páginas de solución
   Diagnóstico sobre las cuatro páginas publicadas:
     · Los bloques de capacidades eran 5–6 <section> seguidas con padding-top:0,
       sin antetítulo, sin numeración y con H2 de 56 px contra un H1 de 66 px.
       No había jerarquía ni agrupación: se leían como un índice sin terminar.
     · En /software-para-funerarias/ sólo 1 de 5 bloques tenía imagen; los otros
       cuatro quedaban en una columna de 760 px con el 40% derecho vacío.
     · El listado "Otras soluciones" vivía apretado dentro de la columna del FAQ.
   ============================================================================= */

/* 1 · Índice de módulos bajo el hero -----------------------------------------
   Mismo lenguaje que la franja .layers de la portada: navy, columnas separadas
   por filete. Da entrada a la secuencia y sirve de navegación interna.        */
.mod-nav{ background: var(--navy-900); border-bottom: 1px solid var(--line-dark) }
.mod-nav .wrap{ padding-inline: 0 }
.mod-nav ul{
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line-dark);
  border-top: 1px solid var(--line-dark);
}
.mod-nav li{ background: var(--navy-900) }
.mod-nav a{
  display: flex; flex-direction: column; gap: 7px; justify-content: center;
  min-height: 88px; padding: 18px; text-decoration: none;
  transition: background .25s var(--e1);
}
.mod-nav a:hover, .mod-nav a:focus-visible{ background: rgba(91,149,242,.12) }
.mod-nav .n{ font-family: var(--narrow); font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--blue-400) }
.mod-nav .t{ font-size: 14.5px; line-height: 1.3; color: var(--on-dark) }
@media(max-width:560px){ .mod-nav a{ flex-direction: row; align-items: baseline; gap: 12px; min-height: 64px } }

/* 2 · Módulos numerados ------------------------------------------------------
   El padding pasa al .wrap para poder trazar el filete entre módulos por dentro
   del ancho de contenido, y el H2 baja de 56 px a 36 px máximo.               */
.mod{ padding-top: 0; padding-bottom: 0 }
.mod > .wrap{ padding-block: clamp(52px,6vw,84px) }
.mod-first > .wrap{ padding-top: clamp(64px,8vw,104px) }
.mod + .mod > .wrap{ border-top: 1px solid var(--line) }
.mod + section:not(.mod) > .wrap{ border-top: 1px solid var(--line); padding-top: clamp(52px,6vw,84px) }
.mod .mod-k{ margin: 0 0 14px; display: flex; align-items: center; gap: 16px }
.mod .mod-num{ font-family: var(--narrow); font-size: 12px; font-weight: 600; letter-spacing: .18em; color: var(--blue-600) }
.mod .mod-k::after{ content: ""; flex: 1; height: 1px; background: var(--line) }
.mod .sec-head h2{ font-size: clamp(26px,2.6vw,36px); line-height: 1.12 }
.mod .lp-grid{ margin-top: 30px }
.mod .lp-grid .lede{ margin-top: 0 }

/* Bloques sin captura: en vez de una columna de 760 px, dos columnas reales. */
.lp-grid.lp-duo{ align-items: start }
.lp-duo > div:first-child .lede{ max-width: 42ch }
@media(max-width:900px){ .lp-duo > div:first-child .lede{ max-width: none } }

/* 3 · Banda de otras soluciones ---------------------------------------------- */
.xsell{ background: #EAE7DE }
.xsell-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 32px }
.xs-card{
  display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 22px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  text-decoration: none;
  transition: border-color .25s var(--e1), transform .25s var(--e1), box-shadow .25s var(--e1);
}
.xs-card:hover, .xs-card:focus-visible{
  border-color: var(--blue-600); transform: translateY(-2px);
  box-shadow: 0 14px 26px -18px rgba(20,30,56,.34);
}
.xs-card .k{ font-family: var(--narrow); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--slate) }
.xs-card h3{ font-size: clamp(20px,1.9vw,24px); line-height: 1.12; font-weight: 400 }
.xs-card p{ color: var(--slate); font-size: 14.5px }
.xs-card .go{
  margin-top: auto; padding-top: 14px; min-height: 44px;
  display: flex; align-items: flex-end;
  font-family: var(--narrow); font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-600);
}
@media(max-width:860px){ .xsell-grid{ grid-template-columns: 1fr } }

/* 4 · Aparición al entrar en pantalla ----------------------------------------
   Sólo si el visitante no pidió menos movimiento. El JS añade .rv y, cuando el
   elemento entra, .in; si algo fallara, un temporizador revela todo igual.    */
@media(prefers-reduced-motion:no-preference){
  .rv{ opacity: 0; transform: translateY(14px) }
  .rv.in{ opacity: 1; transform: none; transition: opacity .42s var(--e1), transform .42s var(--e1) }
}

/* 5 · Corrección del bloque sin captura -----------------------------------
   Con la lede a la izquierda y la lista a la derecha quedaba un vacío de
   unos 200 px bajo la lede (59 px contra 259 px). La lede pasa arriba, a
   ancho de lectura, y la lista se reparte en columnas: el módulo baja de
   ~318 px a ~165 px y el ancho se usa entero.                            */
.lp-grid.lp-duo{ display: block }
.lp-duo > div:first-child .lede{ max-width: 60ch; margin: 0 0 26px }
.lp-duo > div:last-child .lp-list{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  column-gap: 44px; row-gap: 0; margin-top: 0;
}
@media(max-width:640px){ .lp-duo > div:last-child .lp-list{ grid-template-columns: 1fr } }

/* 6 · Remates del índice y de las tarjetas --------------------------------
   En móvil el índice cae a dos columnas: con cinco módulos la última fila
   quedaba a medias, con una celda vacía. El último elemento ocupa la fila
   entera cuando el número de módulos es impar. El pie de la tarjeta avanza
   al pasar el cursor para que el destino se lea como enlace.             */
@media(max-width:560px){
  .mod-nav li:last-child:nth-child(odd){ grid-column: 1 / -1 }
}
.xs-card .go{ transition: transform .25s var(--e1) }
.xs-card:hover .go,
.xs-card:focus-visible .go{ transform: translateX(4px) }

/* ===== Franja única del hero: 10 ítems con icono, sin filetes, sobre el fondo del hero (28 sep 2026) ===== */
.hbar{margin-top:clamp(40px,5vw,64px)}
.hbar ul{list-style:none;margin:0;padding:0 0 clamp(16px,2vw,28px);display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.hbar li{display:flex}
.hbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:18px 8px 16px;min-height:100px;border-radius:10px;text-align:center;text-decoration:none;color:var(--on-dark);transition:background-color .2s ease}
.hbar svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--blue-400);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease,transform .2s ease}
.hbar span{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;color:var(--on-dark);text-wrap:balance}
.hbar a:hover{background:rgba(91,149,242,.1)}
.hbar a:hover svg{stroke:var(--on-dark);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.hbar a,.hbar svg{transition:none}.hbar a:hover svg{transform:none}}
@media (min-width:900px) and (max-height:950px){.hbar{margin-top:32px}.hbar a{min-height:92px;padding-block:16px 14px;gap:10px}}
@media (min-width:900px) and (max-height:700px){.hbar{margin-top:20px}}
@media (max-width:1100px){.hbar ul{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:560px){
  .hbar ul{grid-template-columns:1fr 1fr}
  .hbar a{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;padding:14px 16px;min-height:60px;align-items:center}
  .hbar svg{width:20px;height:20px}
}

/* ===== Iconos de apoyo en secciones con diagramas (28 sep 2026) =====
   Misma familia que la franja del hero (estilo Lucide, trazo 1,5). Decorativos: aria-hidden. */
.ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:rgba(46,114,230,.09);margin-bottom:16px;flex:none}
.ico svg{width:24px;height:24px;fill:none;stroke:var(--blue-600);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dark .ico,.erp-m .ico{background:rgba(91,149,242,.14)}
.dark .ico svg,.erp-m .ico svg{stroke:var(--blue-400)}
.tensions .ico{width:40px;height:40px;margin-bottom:14px}
.tensions .ico svg{width:22px;height:22px}
.role.ext>.ico{background:rgba(46,114,230,.14)}
.core b{display:flex;align-items:center;gap:14px}
.core .ico{background:rgba(255,255,255,.16);margin:0}
.core .ico svg{stroke:#fff}
/* Conector entre MEMORA360 y el ecosistema (#erp), sólo con las dos columnas lado a lado */
@media (min-width:901px){
  .erp-grid{position:relative}
  .erp-grid::after{content:"";position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%);border-radius:50%;background:var(--blue-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 0 0 6px #EAE7DE,0 8px 20px rgba(14,22,41,.18);z-index:1;pointer-events:none}
}

/* ===== Páginas de solución · lineamientos del home (28 sep 2026) =====
   H1 con la palabra clave (el antetítulo vive dentro del H1 sin cambiar su aspecto),
   índice de módulos dentro del hero con el lenguaje de .hbar, iconos .ico y capturas sin contorno. */
.hero .h1-sol{margin-top:26px}
.hero:has(> .hbar-mods){padding-bottom:0}
.h1-sol .eyebrow{margin:0 0 20px}
.h1-sol .h1-t{display:block}
.hbar-mods ul{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
.hbar-mods span em{display:block;font-style:normal;color:var(--blue-400);margin-bottom:4px}
@media (max-width:900px){.hbar-mods ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hbar-mods span em{display:inline;margin:0 8px 0 0}}
.mod-k .ico{margin:0}
/* Las capturas traen un marco transparente con sombra: se recorta a la ventana de la aplicación */
.lp-shot .shot-crop{display:block;position:relative;overflow:hidden;border-radius:10px;aspect-ratio:1085/711}
.lp-shot .shot-crop img{position:absolute;left:-5.2535%;top:-6.3291%;width:110.5991%;max-width:none;height:auto;border-radius:0;box-shadow:none}
.lp-shot-flat img{border-radius:10px;box-shadow:none}
.xs-card .ico{margin-bottom:14px}

/* ==========================================================================
   Seguridad y privacidad · 2026-10-05
   Bloque de la portada (#datos) y página /seguridad-y-privacidad/.
   Iconos discretos (trazo 1,5), sin estética de ciberseguridad.
   ========================================================================== */
.sp-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--blue-50);color:var(--blue-600);margin-bottom:18px;flex:none}
.sp-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dark .sp-ico,.sp-home .sp-ico{background:rgba(91,149,242,.14);color:var(--blue-400)}
.sp-n{display:block;font-family:var(--narrow);font-size:13px;letter-spacing:.2em;color:var(--blue-600);margin-bottom:16px}
.dark .sp-n,.sp-home .sp-n{color:var(--blue-400)}
.sp-label{font-family:var(--narrow);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-600);margin:0 0 22px}
.sp-quote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,2.4vw,30px);line-height:1.25;margin:0;max-width:680px;color:var(--ink)}
.dark .sp-quote,.sp-home .sp-quote{color:var(--on-dark)}

/* --- Portada: Tus datos. Tu operación. Bajo tu control. --- */
.sp-home{background:var(--navy-900);color:var(--on-dark)}
.sp-home .sec-head{max-width:820px}
.sp-pillars{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.sp-pillars li{padding:30px 28px 8px 0}
.sp-pillars li+li{padding-left:28px;border-left:1px solid var(--line-dark)}
.sp-pillars h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2;margin:0 0 12px;color:var(--on-dark)}
.sp-pillars p{font-size:15.5px;line-height:1.6;color:var(--on-dark-2);margin:0}
.sp-close{margin-top:56px;padding-top:36px;border-top:1px solid var(--line-dark);display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}

/* --- Página: columnas de conceptos --- */
.sp-cols{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.sp-cols>*{padding:30px 32px 8px 0}
.sp-cols>*+*{padding-left:32px;border-left:1px solid var(--line)}
.sp-cols h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;margin:0 0 12px;color:var(--ink)}
.sp-cols p{font-size:15.5px;line-height:1.6;color:var(--slate);margin:0}

/* --- Propiedad intelectual: cliente vs. plataforma --- */
.sp-split{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;margin-top:56px}
.sp-panel{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:34px 34px 10px}
.sp-panel-alt{background:transparent;border-style:dashed}
.sp-item{display:flex;gap:18px;padding-bottom:24px}
.sp-item+.sp-item{border-top:1px solid var(--line-2);padding-top:24px}
.sp-item .sp-ico{margin-bottom:0}
.sp-item h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;margin:4px 0 10px;color:var(--ink)}
.sp-item p{font-size:15.5px;line-height:1.6;color:var(--slate);margin:0}
.sp-quote-c{margin:56px auto 0;text-align:center}

/* --- Dos columnas: título a la izquierda, contenido a la derecha --- */
.sp-two{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px 72px;align-items:start}
.sp-two .sec-head{max-width:none}
.sp-two .sec-head .lede+.lede{margin-top:16px}
.sp-text{padding-top:34px}
.sp-text .lede{margin:0}

/* --- Segregación: niveles anidados --- */
.sp-scope{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--paper)}
.sp-lvl{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:12px}
.sp-lvl+.sp-lvl{margin-top:10px}
.sp-lvl:nth-child(1){background:var(--mist)}
.sp-lvl:nth-child(2){background:var(--blue-50);margin-left:22px}
.sp-lvl:nth-child(3){background:var(--blue-100);margin-left:44px}
.sp-lvl .sp-ico{margin-bottom:0;background:#fff}
.sp-lvl h3{font-family:var(--narrow);font-weight:600;font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;margin:3px 0 6px;color:var(--ink)}
.sp-lvl p{font-size:15.5px;line-height:1.5;color:var(--slate);margin:0}

/* --- Seguridad de la información: cobertura --- */
.sp-dark{background:var(--navy-900);color:var(--on-dark)}
.sp-dark h2,.sp-dark h3{color:var(--on-dark)}
.sp-grid{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.sp-grid li{display:flex;flex-direction:column;padding:28px 24px 28px 0;font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--on-dark);border-bottom:1px solid var(--line-dark)}
.sp-grid li:not(:nth-child(4n+1)){padding-left:24px;border-left:1px solid var(--line-dark)}

/* --- Continuidad y portabilidad (protagonista) --- */
.sp-feature .sec-head{max-width:860px}
.sp-feature h2{font-size:clamp(38px,5.4vw,68px)}
.sp-steps>li{position:relative}
.sp-quote-xl{margin-top:64px;padding-top:40px;border-top:1px solid var(--line);font-size:clamp(28px,3.6vw,46px);max-width:none;color:var(--blue-700)}

/* --- Protección de datos personales --- */
.sp-law{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--blue-600);border-radius:14px;padding:32px 32px 30px;margin-top:34px}
.sp-law .sp-label{margin-bottom:10px}
.sp-law-t{font-family:var(--serif);font-size:26px;line-height:1.2;color:var(--ink);margin:0 0 14px}
.sp-law p:last-child{font-size:15.5px;line-height:1.6;color:var(--slate);margin:0}

/* --- IA: franja breve --- */
.sp-band{padding-top:96px;padding-bottom:96px}
.sp-band .sp-text{display:flex;gap:18px;align-items:flex-start}
.sp-band .sp-text .sp-ico{margin-bottom:0}

/* --- CTA enterprise --- */
.sp-cta{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:32px 56px;align-items:end;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:clamp(28px,4vw,56px)}
.sp-cta h2{font-size:clamp(30px,3.4vw,44px);margin:0 0 16px}
.sp-cta .lede{margin:0;max-width:640px}
.sp-cta-btns{display:flex;flex-direction:column;gap:12px}
.sp-cta-btns .btn{justify-content:center}

.sp-panel-alt{align-self:start;border:1px dashed rgba(75,83,103,.38)}
.sp-quote-c{max-width:860px}
.sp-text .lede,.sp-feature .sec-head .lede{font-size:19px;line-height:1.6}
.sp-cta .eyebrow{margin-bottom:14px}
/* --- Responsive --- */
@media(max-width:1000px){
  .sp-pillars,.sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-pillars li:nth-child(3){padding-left:0;border-left:0}
  .sp-pillars li:nth-child(n+3){border-top:1px solid var(--line-dark)}
  .sp-grid li:not(:nth-child(4n+1)){padding-left:0;border-left:0}
  .sp-grid li:nth-child(2n){padding-left:24px;border-left:1px solid var(--line-dark)}
  .sp-two,.sp-split,.sp-cta{grid-template-columns:1fr}
  .sp-text{padding-top:0}
  .sp-cta-btns{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:760px){
  .sp-cols{grid-template-columns:1fr}
  .sp-cols>*+*{padding-left:0;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:600px){
  .sp-pillars,.sp-grid{grid-template-columns:1fr}
  .sp-pillars li+li{padding-left:0;border-left:0;border-top:1px solid var(--line-dark)}
  .sp-grid li:nth-child(n){padding-left:0;border-left:0;flex-direction:row;align-items:center;gap:16px;font-size:18px;padding-top:18px;padding-bottom:18px}
  .sp-grid li .sp-ico{margin-bottom:0}
  .sp-panel{padding:26px 22px 4px}
  .sp-item{flex-direction:column;gap:14px}
  .sp-lvl:nth-child(2){margin-left:12px}
  .sp-lvl:nth-child(3){margin-left:24px}
  .sp-cta-btns{flex-direction:column}
  .sp-band .sp-text{flex-direction:column}
}