/* SYMI website · componentes reutilizables entre páginas. Solo variables de tokens.css. */

/* ---------- Títulos de sección ---------- */
.titulo-seccion{display:grid;gap:var(--symi-space-2);margin-bottom:var(--symi-space-5)}
.titulo-seccion h2{font-size:var(--symi-size-2xl);max-width:22ch}
.titulo-seccion p{color:var(--symi-color-text-secondary);font-size:var(--symi-size-lg);max-width:52ch}

/* ---------- Portada (encabezado principal) ---------- */
.portada{position:relative;isolation:isolate;padding-block:var(--symi-space-5) var(--symi-space-6);overflow:hidden}
.portada::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(var(--symi-color-border-default) 1.5px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(var(--symi-color-bg-base) 30%,transparent 95%);mask-image:linear-gradient(var(--symi-color-bg-base) 30%,transparent 95%);
}
.portada-grilla{display:grid;gap:var(--symi-space-5);align-items:center}
.portada-texto{display:grid;gap:var(--symi-space-4);justify-items:start}
.portada h1{font-size:var(--symi-size-3xl)}
.portada h1 em{font-style:normal;color:var(--symi-color-brand-text)}
.portada-bajada{font-size:var(--symi-size-lg);color:var(--symi-color-text-secondary);max-width:38ch}
.portada-nota{font-size:var(--symi-size-sm);color:var(--symi-color-text-secondary)}
.sello{
  display:inline-flex;align-items:center;gap:var(--symi-space-2);
  background:var(--symi-color-accent-yellow);color:var(--symi-color-text-inverse);
  padding:var(--symi-space-1) var(--symi-space-3);border-radius:var(--symi-radius-pill);
  font-family:var(--symi-font-mono);font-size:var(--symi-size-xs);font-weight:var(--symi-font-body-strong);
  text-transform:uppercase;letter-spacing:.06em;transform:rotate(-2deg);
}
@media (min-width:768px){.portada{padding-block:var(--symi-space-6) var(--symi-space-7)}}
@media (min-width:1100px){
  .portada-grilla{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .portada h1{font-size:var(--symi-size-2xl)}
}


/* ---------- Tarjetas ---------- */
.tarjetas{display:grid;gap:var(--symi-space-4);grid-template-columns:minmax(0,1fr)}
.tarjeta{
  min-width:0;position:relative;display:grid;gap:var(--symi-space-2);align-content:start;
  padding:var(--symi-space-4);background:var(--symi-color-bg-raised);
  border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-md);
  transition:transform var(--symi-motion-base) var(--symi-motion-ease),box-shadow var(--symi-motion-base) var(--symi-motion-ease);
}
.tarjeta h3{font-size:var(--symi-size-xl)}
.tarjeta p{color:var(--symi-color-text-secondary)}
.tarjeta .solucion{color:var(--symi-color-text-primary)}
.ficha{
  width:64px;height:64px;display:grid;place-items:center;margin-bottom:var(--symi-space-2);
  border:var(--symi-border-width) solid var(--symi-color-text-inverse);border-radius:var(--symi-radius-md);color:var(--symi-color-text-inverse);
}
.ficha-marca{background:var(--symi-color-brand-fill)}
.ficha-rosa{background:var(--symi-color-accent-pink)}
.ficha-amarilla{background:var(--symi-color-accent-yellow)}
.tarjeta-nota{font-size:var(--symi-size-sm);font-family:var(--symi-font-mono);color:var(--symi-color-accent-violet-text)}
@media (min-width:768px){.tarjeta{padding:var(--symi-space-5)}}
@media (min-width:1100px){.tarjetas-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (hover:hover){.tarjeta:hover{transform:translate(-4px,-4px);box-shadow:var(--symi-shadow-md)}}

/* ---------- Tarjetas de nicho (enlace completo) ---------- */
.fondo-rayado{background-color:var(--symi-color-bg-sunken);background-image:repeating-linear-gradient(135deg,var(--symi-color-bg-raised) 0 2px,transparent 2px 14px)}
.nichos{display:grid;gap:var(--symi-space-3);grid-template-columns:minmax(0,1fr);list-style:none;padding:0}
.nicho{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--symi-space-3);
  min-height:calc(var(--symi-layout-touch) * 2);padding:var(--symi-space-3) var(--symi-space-4);
  background:var(--symi-color-bg-base);color:var(--symi-color-text-primary);text-decoration:none;
  border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-md);
  transition:transform var(--symi-motion-fast) var(--symi-motion-ease),background-color var(--symi-motion-fast),box-shadow var(--symi-motion-fast);
}
.nicho-icono{width:56px;height:56px;display:grid;place-items:center;border-radius:var(--symi-radius-pill);background:var(--symi-color-bg-raised);color:var(--symi-color-brand-text)}
.nicho-nombre{display:grid;gap:var(--symi-space-1)}
.nicho-nombre b{font-family:var(--symi-font-display);font-weight:var(--symi-font-display-weight);text-transform:var(--symi-font-display-transform);letter-spacing:var(--symi-font-display-tracking);font-size:var(--symi-size-sm);line-height:var(--symi-leading-tight);overflow-wrap:break-word}
.nicho-nombre span{font-family:var(--symi-font-mono);font-size:var(--symi-size-xs);color:var(--symi-color-text-secondary)}
.nicho-nombre .lista{color:var(--symi-color-brand-text)}
.nicho:hover{background:var(--symi-color-brand-fill);color:var(--symi-color-text-inverse);box-shadow:var(--symi-shadow-sm)}
.nicho:hover .nicho-nombre span{color:var(--symi-color-text-inverse)}
.nicho:hover .nicho-icono{background:var(--symi-color-text-inverse);color:var(--symi-color-brand-fill)}
@media (min-width:768px){.nichos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.nichos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Sección crema (contraste de ritmo) ---------- */
.crema{background:var(--symi-color-bg-contraste);color:var(--symi-color-text-sobre-contraste)}
.crema .etiqueta{color:var(--symi-color-etiqueta-sobre-contraste)}
.crema .titulo-seccion p{color:var(--symi-color-text-sobre-contraste)}
.crema .enlace-mas{color:var(--symi-color-text-sobre-contraste)}

/* ---------- Pasos ---------- */
.pasos{list-style:none;padding:0;counter-reset:paso;display:grid}
.paso{
  counter-increment:paso;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--symi-space-3) var(--symi-space-4);align-items:start;
  padding-block:var(--symi-space-4);border-top:var(--symi-border-width) solid var(--symi-color-text-sobre-contraste);
}
.paso::before{
  content:counter(paso,decimal-leading-zero);
  font-family:var(--symi-font-display);font-weight:var(--symi-font-display-weight);font-size:var(--symi-size-2xl);line-height:1;
  color:var(--symi-color-acento-sobre-contraste);
}
.paso h3{font-size:var(--symi-size-lg);margin-bottom:var(--symi-space-1)}
@media (min-width:768px){.paso{grid-template-columns:140px minmax(0,1fr)}}

/* ---------- Marcos de capturas (celular y computador) ---------- */
.galeria{display:grid;gap:var(--symi-space-5);grid-template-columns:minmax(0,1fr);align-items:end}
.galeria figure{display:grid;gap:var(--symi-space-3);justify-items:center;min-width:0}
.galeria figcaption{font-size:var(--symi-size-sm);color:var(--symi-color-text-secondary);text-align:center;max-width:36ch}
.marco-celular{
  width:min(100%,260px);aspect-ratio:9/19;padding:var(--symi-space-2);
  background:var(--symi-color-bg-sunken);border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-lg);
  box-shadow:var(--symi-shadow-md);
}
.marco-computador{
  width:100%;aspect-ratio:16/10;padding:var(--symi-space-2);
  background:var(--symi-color-bg-sunken);border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-md);
  box-shadow:var(--symi-shadow-lg);
}
.marco-celular > *,.marco-computador > *{width:100%;height:100%;border-radius:var(--symi-radius-md);object-fit:cover}
.marco-computador > *{border-radius:var(--symi-radius-sm)}
.captura-pendiente{
  display:grid;place-items:center;align-content:center;gap:var(--symi-space-2);padding:var(--symi-space-3);text-align:center;
  background:var(--symi-color-bg-raised);border:var(--symi-border-width) dashed var(--symi-color-accent-yellow);
  color:var(--symi-color-status-warning-fg);font-family:var(--symi-font-mono);font-size:var(--symi-size-xs);
}
@media (min-width:768px){.galeria{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}

/* ---------- Preguntas plegables ---------- */
.preguntas{display:grid;gap:var(--symi-space-3);max-width:860px}
.pregunta{border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-md);background:var(--symi-color-bg-raised)}
.pregunta summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--symi-space-3);
  min-height:var(--symi-layout-touch);padding:var(--symi-space-3) var(--symi-space-4);
  cursor:pointer;list-style:none;font-weight:var(--symi-font-body-strong);font-size:var(--symi-size-lg);line-height:1.3;
}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary .ic{transition:transform var(--symi-motion-base) var(--symi-motion-ease);color:var(--symi-color-brand-text)}
.pregunta[open] summary .ic{transform:rotate(180deg)}
.pregunta[open]{box-shadow:var(--symi-shadow-sm)}
.pregunta > div{padding:0 var(--symi-space-4) var(--symi-space-4);color:var(--symi-color-text-secondary)}
.pregunta > div p + p{margin-top:var(--symi-space-2)}
.enlace-mas{display:inline-flex;align-items:center;gap:var(--symi-space-2);min-height:var(--symi-layout-touch);margin-top:var(--symi-space-4);font-weight:var(--symi-font-body-strong)}

/* ---------- Portada de página interna (nichos, sistemas) ---------- */
.portada-nicho{padding-block:var(--symi-space-4) var(--symi-space-6)}
.portada-nicho h1{font-size:var(--symi-size-3xl);max-width:20ch}
@media (min-width:1100px){.portada-nicho h1{font-size:var(--symi-size-3xl)}}

/* ---------- Ruta de navegación (migas) ---------- */
.migas ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--symi-space-2);font-size:var(--symi-size-sm);color:var(--symi-color-text-secondary)}
.migas li{display:inline-flex;align-items:center;gap:var(--symi-space-2)}
.migas li + li::before{content:"/";color:var(--symi-color-border-input)}
.migas a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--symi-layout-touch);min-width:var(--symi-layout-touch);color:var(--symi-color-text-link)}
.migas [aria-current="page"]{color:var(--symi-color-text-primary)}

/* ---------- Módulos (rejilla de lo que incluye) ---------- */
.modulos{list-style:none;padding:0;display:grid;gap:var(--symi-space-3);grid-template-columns:minmax(0,1fr)}
.modulo{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--symi-space-3);align-items:start;
  padding:var(--symi-space-4);background:var(--symi-color-bg-base);
  border:var(--symi-border-width) solid var(--symi-color-border-default);border-radius:var(--symi-radius-md);
}
.modulo > .ic{color:var(--symi-color-brand-text)}
.modulo h3{font-size:var(--symi-size-lg);margin-bottom:var(--symi-space-1)}
.modulo p{color:var(--symi-color-text-secondary)}
@media (min-width:768px){.modulos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.modulos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Caminos: plantilla o a medida ---------- */
@media (min-width:768px){.caminos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.camino-precio{font-family:var(--symi-font-display);font-weight:var(--symi-font-display-weight);font-size:var(--symi-size-2xl);line-height:1;color:var(--symi-color-text-primary);text-transform:var(--symi-font-display-transform)}
.camino-precio .mono{font-family:var(--symi-font-mono);color:var(--symi-color-brand-text)}

/* ---------- Centro de ayuda ---------- */
.buscador-ayuda{width:100%;max-width:640px;display:grid;gap:var(--symi-space-2);margin-top:var(--symi-space-2)}
.buscador-ayuda label{font-weight:var(--symi-font-body-strong);font-size:var(--symi-size-md)}
.buscador-fila{
  display:flex;align-items:center;gap:var(--symi-space-2);padding-inline:var(--symi-space-3);
  background:var(--symi-color-bg-raised);border:var(--symi-border-width) solid var(--symi-color-border-strong);
  border-radius:var(--symi-radius-pill);box-shadow:var(--symi-shadow-sm);
}
.buscador-fila .ic{color:var(--symi-color-brand-text)}
.buscador-fila input{
  flex:1;min-width:0;min-height:calc(var(--symi-layout-touch) + var(--symi-space-2));border:0;background:transparent;
  color:var(--symi-color-text-primary);font:inherit;font-size:var(--symi-size-lg);
}
.buscador-fila input::placeholder{color:var(--symi-color-text-secondary)}
.buscador-fila input:focus{outline:none}
.buscador-fila:focus-within{outline:3px solid var(--symi-color-focus-ring);outline-offset:3px}
.buscador-estado{font-family:var(--symi-font-mono);font-size:var(--symi-size-sm);color:var(--symi-color-text-secondary);min-height:1.5em}
.ayuda-version{display:flex;gap:var(--symi-space-2);align-items:flex-start;font-size:var(--symi-size-sm);color:var(--symi-color-text-secondary);max-width:60ch}
.ayuda-version .ic{flex:none;margin-top:2px;color:var(--symi-color-brand-text)}

.ayuda-categoria{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--symi-space-3);
  min-height:calc(var(--symi-layout-touch) * 1.75);padding:var(--symi-space-3);
  background:var(--symi-color-bg-base);color:var(--symi-color-text-primary);text-decoration:none;
  border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-md);
  transition:transform var(--symi-motion-fast) var(--symi-motion-ease),background-color var(--symi-motion-fast),box-shadow var(--symi-motion-fast);
}
.ayuda-categoria:hover{background:var(--symi-color-brand-fill);color:var(--symi-color-text-inverse);box-shadow:var(--symi-shadow-sm)}
.ayuda-categoria:hover .nicho-nombre span{color:var(--symi-color-text-inverse)}
.ayuda-categoria:hover .nicho-icono{background:var(--symi-color-text-inverse);color:var(--symi-color-brand-fill)}

.ayuda-grupos{display:grid;gap:var(--symi-space-6)}
.ayuda-grupo{scroll-margin-top:calc(var(--symi-layout-touch) + var(--symi-space-5))}
.ayuda-grupo h2{display:flex;align-items:center;gap:var(--symi-space-3);font-size:var(--symi-size-xl);margin-bottom:var(--symi-space-4)}
.ayuda-grupo h2 .ic{color:var(--symi-color-brand-text)}
.ayuda-lista{list-style:none;padding:0;display:grid;gap:var(--symi-space-2)}
.ayuda-lista a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--symi-space-1) var(--symi-space-3);align-items:center;
  min-height:var(--symi-layout-touch);padding:var(--symi-space-3) var(--symi-space-4);
  background:var(--symi-color-bg-raised);color:var(--symi-color-text-primary);text-decoration:none;
  border:var(--symi-border-width) solid var(--symi-color-border-default);border-radius:var(--symi-radius-md);
}
.ayuda-lista a b{grid-column:1;font-size:var(--symi-size-md)}
.ayuda-lista a span{grid-column:1;color:var(--symi-color-text-secondary);font-size:var(--symi-size-sm)}
.ayuda-lista a > .ic{grid-column:2;grid-row:1 / span 3;color:var(--symi-color-brand-text)}
.ayuda-lista a .etiqueta-sim{color:var(--symi-color-brand-text)}
.ayuda-lista a:hover{border-color:var(--symi-color-border-strong);box-shadow:var(--symi-shadow-sm)}
.ayuda-sin-resultados{display:grid;gap:var(--symi-space-3);justify-items:start;padding:var(--symi-space-5);border:var(--symi-border-width) dashed var(--symi-color-border-input);border-radius:var(--symi-radius-md)}
.ayuda-sin-resultados h2{font-size:var(--symi-size-xl)}
.ayuda-sin-resultados p{color:var(--symi-color-text-secondary)}
@media (min-width:1100px){.ayuda-grupos{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}

/* Guía individual */
.guia-grilla{display:grid;gap:var(--symi-space-6)}
.guia-grilla > div{display:grid;gap:var(--symi-space-5);align-content:start}
.guia-pasos{list-style:none;padding:0;counter-reset:guia;display:grid;gap:var(--symi-space-3);max-width:68ch}
.guia-pasos li{
  counter-increment:guia;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--symi-space-3);align-items:start;
  padding:var(--symi-space-3) var(--symi-space-4);background:var(--symi-color-bg-raised);
  border:var(--symi-border-width) solid var(--symi-color-border-default);border-radius:var(--symi-radius-md);
  font-size:var(--symi-size-lg);line-height:1.5;
}
.guia-pasos li > span{padding-top:var(--symi-space-2)}
.guia-pasos li::before{
  content:counter(guia);display:grid;place-items:center;width:var(--symi-layout-touch);height:var(--symi-layout-touch);
  border-radius:var(--symi-radius-pill);background:var(--symi-color-brand-fill);color:var(--symi-color-text-inverse);
  font-family:var(--symi-font-display);font-weight:var(--symi-font-display-weight);font-size:var(--symi-size-lg);
}
.guia-pasos b,.guia-notas b{color:var(--symi-color-text-primary);background:var(--symi-color-bg-sunken);padding:0 var(--symi-space-1);border-radius:var(--symi-radius-sm)}
.guia-notas{padding:var(--symi-space-4);background:var(--symi-color-status-info-bg);color:var(--symi-color-status-info-fg);border-radius:var(--symi-radius-md);max-width:68ch}
.guia-notas h2{display:flex;align-items:center;gap:var(--symi-space-2);font-family:var(--symi-font-body);font-weight:var(--symi-font-body-strong);text-transform:none;letter-spacing:0;font-size:var(--symi-size-md);line-height:1.4;margin-bottom:var(--symi-space-2)}
.guia-notas ul{display:grid;gap:var(--symi-space-2);padding-left:var(--symi-space-4)}
.guia-notas b{color:var(--symi-color-status-info-fg);background:transparent;padding:0}
.guia-relacionadas{display:grid;gap:var(--symi-space-3);align-content:start}
@media (min-width:1100px){.guia-grilla{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}}

/* Bloque de soporte */
.ayuda-soporte{display:grid;gap:var(--symi-space-4);align-items:center}
.ayuda-soporte h2{font-size:var(--symi-size-2xl)}
.ayuda-soporte .boton{justify-self:start}
@media (min-width:768px){.ayuda-soporte{grid-template-columns:minmax(0,1fr) auto}}
/* Buscador dentro de la sección de contraste */
.crema .buscador-fila{background:var(--symi-color-bg-raised);border-color:var(--symi-color-bg-raised)}
.crema .buscador-fila input{color:var(--symi-color-text-primary)}
.a-medida{margin-top:var(--symi-space-6)}
.nota-medida{margin-top:var(--symi-space-5);font-weight:var(--symi-font-body-strong);font-size:var(--symi-size-lg)}

/* ---------- Precio destacado ---------- */
.banda-precio{background:var(--symi-color-accent-yellow);color:var(--symi-color-text-inverse);padding-block:var(--symi-space-6);border-block:var(--symi-border-width) solid var(--symi-color-text-inverse)}
.banda-precio-grilla{display:grid;gap:var(--symi-space-4);align-items:center}
.banda-precio .etiqueta{color:var(--symi-color-text-inverse)}
.banda-precio h2{font-size:var(--symi-size-2xl);max-width:20ch}
.banda-precio h2 .mono{font-family:var(--symi-font-display)}
.banda-precio p{font-size:var(--symi-size-lg);max-width:44ch}
.banda-precio-lista{list-style:none;padding:0;display:grid;gap:var(--symi-space-2);font-weight:var(--symi-font-body-strong)}
.banda-precio-lista li{display:flex;align-items:center;gap:var(--symi-space-2)}
.banda-precio .enlace-mas{color:var(--symi-color-text-inverse);margin-top:0}
.banda-precio .acciones{align-items:center}
@media (min-width:1100px){.banda-precio-grilla{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.banda-precio .acciones{grid-column:1 / -1}}
.portada-nota b{color:var(--symi-color-text-primary)}
.precio-grande{color:var(--symi-color-brand-text);white-space:nowrap}
.plan{gap:var(--symi-space-3)}
.plan .boton{justify-self:start;margin-top:var(--symi-space-2)}
.plan-pago{font-family:var(--symi-font-mono);font-weight:var(--symi-font-body-strong);color:var(--symi-color-brand-text)}
.modulo.provisional{outline-offset:-2px}

/* ---------- Comprobante ilustrado de la portada (maximalismo ligero: capas, bordes y sombra dura) ---------- */
.comprobante-arte{position:relative;justify-self:center;width:min(100%,360px);margin-top:var(--symi-space-4);margin-right:var(--symi-space-4)}
.comprobante-arte::before,.comprobante-arte::after{content:"";position:absolute;inset:0;border-radius:var(--symi-radius-md);border:var(--symi-border-width) solid var(--symi-color-text-inverse)}
.comprobante-arte::before{background:var(--symi-color-accent-pink);transform:translate(20px,20px) rotate(4deg)}
.comprobante-arte::after{background:var(--symi-color-accent-yellow);transform:translate(10px,10px) rotate(2deg)}
.comprobante{
  position:relative;z-index:1;display:grid;gap:var(--symi-space-3);padding:var(--symi-space-4);
  background:var(--symi-color-accent-cream);color:var(--symi-color-text-inverse);
  border:var(--symi-border-width) solid var(--symi-color-text-inverse);border-radius:var(--symi-radius-md);
  font-family:var(--symi-font-mono);font-size:var(--symi-size-sm);transform:rotate(-2deg);
}
.comprobante-cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:var(--symi-space-2);border-bottom:var(--symi-border-width) dashed var(--symi-color-text-inverse);padding-bottom:var(--symi-space-2)}
.comprobante-cabeza b{font-family:var(--symi-font-display);font-weight:var(--symi-font-display-weight);font-size:var(--symi-size-lg);letter-spacing:var(--symi-font-display-tracking)}
.comprobante ul{list-style:none;padding:0;display:grid;gap:var(--symi-space-1)}
.comprobante li{display:flex;justify-content:space-between;gap:var(--symi-space-2)}
.comprobante-total{display:flex;justify-content:space-between;border-top:var(--symi-border-width) solid var(--symi-color-text-inverse);padding-top:var(--symi-space-2);font-weight:var(--symi-font-body-strong);font-size:var(--symi-size-md)}
.comprobante-sello{
  justify-self:end;display:inline-flex;align-items:center;gap:var(--symi-space-1);
  background:var(--symi-color-brand-fill);color:var(--symi-color-text-inverse);
  border:var(--symi-border-width) solid var(--symi-color-text-inverse);border-radius:var(--symi-radius-pill);
  padding:var(--symi-space-1) var(--symi-space-3);font-weight:var(--symi-font-body-strong);transform:rotate(-4deg);
}
@media (min-width:1100px){.comprobante-arte{margin-top:0}}

/* ---------- Bloques de color: lo que exige el SRI ---------- */
.bloques-sri{list-style:none;padding:0;display:grid;gap:var(--symi-space-3);grid-template-columns:minmax(0,1fr)}
.bloque-sri{
  display:grid;gap:var(--symi-space-2);align-content:start;padding:var(--symi-space-4);
  color:var(--symi-color-text-inverse);border:var(--symi-border-width) solid var(--symi-color-text-inverse);
  border-radius:var(--symi-radius-md);box-shadow:var(--symi-shadow-sm);
}
.bloque-sri h3{font-size:var(--symi-size-lg)}
.bloque-sri:nth-child(1){background:var(--symi-color-brand-fill)}
.bloque-sri:nth-child(2){background:var(--symi-color-accent-yellow)}
.bloque-sri:nth-child(3){background:var(--symi-color-accent-pink)}
.bloque-sri:nth-child(4){background:var(--symi-color-accent-cream)}
@media (min-width:768px){.bloques-sri{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.bloques-sri{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nota-sri{margin-top:var(--symi-space-4);color:var(--symi-color-text-secondary);font-size:var(--symi-size-sm);max-width:70ch}
.contacto-subtitulo{font-size:var(--symi-size-xl)}
.contacto-ubicacion{display:flex;align-items:center;gap:var(--symi-space-2);margin-top:var(--symi-space-5);color:var(--symi-color-text-secondary)}
.contacto-ubicacion .ic{color:var(--symi-color-brand-text)}
ul.tarjetas{list-style:none;padding:0}

/* ---------- Cinta de novedades (se desplaza sola; se pausa con botón, al pasar el mouse o con foco) ---------- */
.cinta{position:relative;display:flex;align-items:center;background:var(--symi-color-brand-fill);color:var(--symi-color-text-inverse);border-block:var(--symi-border-width) solid var(--symi-color-text-inverse);overflow:hidden}
.cinta-pista{display:flex;width:max-content;animation:cinta-avanza 40s linear infinite}
.cinta:hover .cinta-pista,.cinta:focus-within .cinta-pista,.cinta.pausada .cinta-pista{animation-play-state:paused}
.cinta-lista{display:flex;list-style:none;padding:0;margin:0}
.cinta-lista li{
  display:inline-flex;align-items:center;gap:var(--symi-space-4);white-space:nowrap;padding:var(--symi-space-3) var(--symi-space-4);
  font-family:var(--symi-font-display);font-weight:var(--symi-font-display-weight);text-transform:var(--symi-font-display-transform);
  letter-spacing:var(--symi-font-display-tracking);font-size:var(--symi-size-md);
}
.cinta-lista li::after{content:"";width:10px;height:10px;border-radius:var(--symi-radius-pill);background:var(--symi-color-text-inverse);margin-left:var(--symi-space-4)}
.cinta-pausa{
  position:absolute;right:var(--symi-space-2);display:grid;place-items:center;width:var(--symi-layout-touch);height:var(--symi-layout-touch);
  background:var(--symi-color-text-inverse);color:var(--symi-color-brand-fill);border:0;border-radius:var(--symi-radius-pill);cursor:pointer;
}
.cinta-pausa .ic-play{display:none}
.cinta.pausada .cinta-pausa .ic-play{display:block}
.cinta.pausada .cinta-pausa .ic-pausa{display:none}
@keyframes cinta-avanza{to{transform:translateX(-50%)}}
/* Quien pide menos movimiento ve la lista quieta y completa */
@media (prefers-reduced-motion:reduce){
  .cinta-pista{animation:none;width:auto;flex-wrap:wrap}
  .cinta-lista{flex-wrap:wrap;justify-content:center}
  .cinta-lista[aria-hidden="true"],.cinta-pausa{display:none}
}

/* ---------- Tarjetas de precio ---------- */
.banda-precio .titulo-seccion{margin-bottom:var(--symi-space-4)}
.banda-precio .titulo-seccion h2{color:var(--symi-color-text-inverse)}
.precios{display:grid;gap:var(--symi-space-4);grid-template-columns:minmax(0,1fr);margin-bottom:var(--symi-space-4)}
.precio-tarjeta{
  display:grid;gap:var(--symi-space-3);align-content:start;padding:var(--symi-space-4);
  background:var(--symi-color-accent-cream);color:var(--symi-color-text-inverse);
  border:var(--symi-border-width) solid var(--symi-color-text-inverse);border-radius:var(--symi-radius-md);box-shadow:8px 8px 0 var(--symi-color-text-inverse);
}
.precio-tarjeta h3{font-size:var(--symi-size-xl)}
.precio-monto{font-family:var(--symi-font-display);font-weight:var(--symi-font-display-weight);font-size:var(--symi-size-2xl);line-height:1;text-transform:var(--symi-font-display-transform)}
.precio-monto .mono{font-family:var(--symi-font-display)}
.precio-tarjeta ul{display:grid;gap:var(--symi-space-1);padding-left:var(--symi-space-4)}
.precio-tarjeta .boton{justify-self:start}
.precio-destacado{background:var(--symi-color-brand-fill)}
@media (min-width:768px){.precios{grid-template-columns:repeat(2,minmax(0,1fr))}.precio-tarjeta{padding:var(--symi-space-5)}}

/* ---------- Desglose plegable (asistente IA) ---------- */
.desglose{max-width:860px;border:var(--symi-border-width) solid var(--symi-color-text-sobre-contraste);border-radius:var(--symi-radius-md)}
.desglose summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--symi-space-3);min-height:var(--symi-layout-touch);
  padding:var(--symi-space-3) var(--symi-space-4);cursor:pointer;list-style:none;font-weight:var(--symi-font-body-strong);font-size:var(--symi-size-lg);
}
.desglose summary::-webkit-details-marker{display:none}
.desglose summary .ic{transition:transform var(--symi-motion-base) var(--symi-motion-ease)}
.desglose[open] summary .ic{transform:rotate(180deg)}
.desglose ul{display:grid;gap:var(--symi-space-3);padding:0 var(--symi-space-4) var(--symi-space-4) var(--symi-space-6)}

/* ---------- Nicho informativo (sin página propia) ---------- */
.nicho-info{grid-template-columns:auto minmax(0,1fr);border-style:dashed}
.nicho-info:hover{background:var(--symi-color-bg-base);box-shadow:none}
.redes{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--symi-space-3);margin-top:var(--symi-space-5)}
.redes a{
  display:inline-flex;align-items:center;gap:var(--symi-space-2);min-height:var(--symi-layout-touch);padding:var(--symi-space-2) var(--symi-space-4);
  background:var(--symi-color-bg-base);color:var(--symi-color-text-primary);text-decoration:none;font-weight:var(--symi-font-body-strong);
  border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-pill);
}
.redes a:hover{box-shadow:var(--symi-shadow-sm)}
.redes .ic{color:var(--symi-color-brand-text)}

/* ---------- Simulación guiada (ventanita dentro del sitio) ---------- */
html.sim-abierta{overflow:hidden}
.sim{
  width:min(100vw - var(--symi-space-3) * 2, 1040px);max-height:calc(100dvh - var(--symi-space-4));padding:0;
  background:var(--symi-color-bg-raised);color:var(--symi-color-text-primary);
  border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-md);box-shadow:var(--symi-shadow-lg);
  overflow:auto;
}
.sim::backdrop{background:var(--symi-color-overlay)}
.sim-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--symi-space-3);padding:var(--symi-space-3) var(--symi-space-4)}
.sim-contador{font-family:var(--symi-font-mono);font-size:var(--symi-size-xs);color:var(--symi-color-brand-text);text-transform:uppercase;letter-spacing:.1em}
.sim-titulo{font-size:var(--symi-size-md)}
.sim-cerrar{display:grid;place-items:center;flex:none;width:var(--symi-layout-touch);height:var(--symi-layout-touch);background:transparent;color:var(--symi-color-text-primary);border:var(--symi-border-width) solid var(--symi-color-border-default);border-radius:var(--symi-radius-pill);cursor:pointer}
.sim-barra{height:6px;background:var(--symi-color-bg-sunken)}
.sim-barra span{display:block;height:100%;width:0;background:var(--symi-color-brand-fill);transition:width var(--symi-motion-base) var(--symi-motion-ease)}
.sim-escena{position:relative;aspect-ratio:1280 / 800;width:min(100%, calc((100dvh - 290px) * 1.6));margin-inline:auto;overflow:hidden;background:var(--symi-color-bg-sunken);cursor:pointer}
.sim-lienzo{position:absolute;inset:0;transform-origin:0 0;transition:transform var(--symi-motion-base) var(--symi-motion-ease)}
.sim-lienzo img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.sim-zona{
  position:absolute;min-width:24px;min-height:24px;padding:0;cursor:pointer;background:transparent;
  border:3px solid var(--symi-color-accent-pink);border-radius:var(--symi-radius-sm);
  box-shadow:0 0 0 4px var(--symi-color-overlay);animation:sim-pulso 1.4s var(--symi-motion-ease) infinite;
}
.sim-zona::after{content:"";position:absolute;inset:-10px} /* área táctil más grande que el borde visible */
.sim-zona:focus-visible{outline:3px solid var(--symi-color-focus-ring);outline-offset:4px}
@keyframes sim-pulso{0%,100%{box-shadow:0 0 0 0 var(--symi-color-accent-pink)}50%{box-shadow:0 0 0 8px transparent}}
.sim-aviso .sim-zona{animation:sim-sacudir .4s}
@keyframes sim-sacudir{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.sim.sin-movimiento .sim-zona,.sim.sin-movimiento .sim-lienzo,.sim.sin-movimiento .sim-barra span{animation:none;transition:none}
.sim-texto{padding:var(--symi-space-3) var(--symi-space-4) 0;font-size:var(--symi-size-lg);line-height:1.4;min-height:3.2em}
.sim-texto b{color:var(--symi-color-brand-text)}
.sim-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--symi-space-3);flex-wrap:wrap;padding:var(--symi-space-3) var(--symi-space-4) var(--symi-space-4)}
.sim-ayuda{font-size:var(--symi-size-sm);color:var(--symi-color-text-secondary)}
.sim-final{display:flex;flex-wrap:wrap;gap:var(--symi-space-2);padding:var(--symi-space-3) var(--symi-space-4) var(--symi-space-4)}
.sim-boton{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--symi-layout-touch);padding:var(--symi-space-2) var(--symi-space-4);
  background:transparent;color:var(--symi-color-text-primary);border:var(--symi-border-width) solid var(--symi-color-border-strong);
  border-radius:var(--symi-radius-pill);font:inherit;font-weight:var(--symi-font-body-strong);text-decoration:none;cursor:pointer;
}
.sim-boton:disabled{opacity:.4;cursor:default}
.sim-boton-principal{background:var(--symi-color-action-primary-bg);color:var(--symi-color-action-primary-fg);border-color:var(--symi-color-action-primary-fg)}

/* Lanzador de simulación en la guía */
.sim-lanzador{
  position:relative;display:block;width:100%;max-width:760px;padding:0;overflow:hidden;cursor:pointer;
  background:var(--symi-color-bg-sunken);border:var(--symi-border-width) solid var(--symi-color-border-strong);
  border-radius:var(--symi-radius-md);box-shadow:var(--symi-shadow-md);
}
.sim-lanzador img{width:100%;aspect-ratio:1280 / 800;object-fit:cover;opacity:.55}
.sim-lanzador span{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--symi-space-2);
  font-family:var(--symi-font-display);font-weight:var(--symi-font-display-weight);text-transform:var(--symi-font-display-transform);
  font-size:var(--symi-size-xl);color:var(--symi-color-text-primary);text-align:center;padding:var(--symi-space-3);
}
.sim-lanzador .sim-play{
  display:grid;place-items:center;width:72px;height:72px;border-radius:var(--symi-radius-pill);
  background:var(--symi-color-action-primary-bg);color:var(--symi-color-action-primary-fg);border:var(--symi-border-width) solid var(--symi-color-action-primary-fg);
}
.sim-lanzador:hover{box-shadow:var(--symi-shadow-lg)}
.etiqueta-sim{display:inline-flex;align-items:center;gap:var(--symi-space-1);font-family:var(--symi-font-mono);font-size:var(--symi-size-xs);color:var(--symi-color-brand-text);font-weight:var(--symi-font-body-strong)}

/* ---------- Filtros del centro de ayuda ---------- */
.portada-ayuda .portada-texto{max-width:none}
.filtros-ayuda{width:100%;display:grid;gap:var(--symi-space-4);margin-top:var(--symi-space-2)}
.filtros-fila{display:grid;gap:var(--symi-space-3);grid-template-columns:minmax(0,1fr)}
.filtros-ayuda .campo{display:grid;gap:var(--symi-space-2)}
.filtros-ayuda label,.temas legend{font-weight:var(--symi-font-body-strong)}
.filtros-ayuda select{
  min-height:var(--symi-layout-touch);padding:0 var(--symi-space-3);font:inherit;
  background:var(--symi-color-bg-raised);color:var(--symi-color-text-primary);
  border:var(--symi-border-width) solid var(--symi-color-border-input);border-radius:var(--symi-radius-sm);
}
.temas{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--symi-space-2)}
.temas legend{margin-bottom:var(--symi-space-2);padding:0}
.chip-tema{
  display:inline-flex;align-items:center;gap:var(--symi-space-2);min-height:var(--symi-layout-touch);padding:var(--symi-space-1) var(--symi-space-3);
  background:var(--symi-color-bg-base);color:var(--symi-color-text-primary);font:inherit;font-weight:var(--symi-font-body-strong);font-size:var(--symi-size-sm);
  border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-pill);cursor:pointer;
}
.chip-tema .ic{color:var(--symi-color-brand-text)}
.chip-tema[aria-pressed="true"]{background:var(--symi-color-brand-fill);color:var(--symi-color-text-inverse);box-shadow:var(--symi-shadow-sm)}
.chip-tema[aria-pressed="true"] .ic{color:var(--symi-color-text-inverse)}
.aviso-personalizado{display:flex;gap:var(--symi-space-2);align-items:flex-start;padding:var(--symi-space-3);background:var(--symi-color-status-info-bg);color:var(--symi-color-status-info-fg);border-radius:var(--symi-radius-sm)}
.desglose-guia{border-color:var(--symi-color-border-strong)}
.desglose-guia .guia-pasos{padding:0 var(--symi-space-3) var(--symi-space-3)}
@media (min-width:768px){.filtros-fila{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}}

/* Descargar mi sistema (descargar.html) */
[data-resultado-descarga]{margin-top:var(--symi-space-5);max-width:640px}
.pasos-descarga{margin:var(--symi-space-6) 0 var(--symi-space-4);padding-left:1.4em;display:grid;gap:var(--symi-space-2);max-width:60ch}

/* Imagen de un caso de éxito o integrante del equipo (publicada desde el Hub) */
.publicacion-imagen{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--symi-radius-md);margin-bottom:var(--symi-space-3)}

/* Formulario de contacto (contacto.html → Hub: Comercial → Contactos del sitio web) */
.formulario-contacto{display:grid;gap:var(--symi-space-4);grid-template-columns:minmax(0,1fr);max-width:760px}
@media (min-width:640px){.formulario-contacto{grid-template-columns:repeat(2,minmax(0,1fr))}.formulario-contacto .campo-ancho{grid-column:1/-1}}
.formulario-contacto .campo{display:grid;gap:var(--symi-space-2)}
.formulario-contacto label{font-weight:var(--symi-font-body-strong)}
.formulario-contacto input,.formulario-contacto textarea,.formulario-contacto select{width:100%;min-width:0;
  min-height:var(--symi-layout-touch);padding:var(--symi-space-2) var(--symi-space-3);font:inherit;color:var(--symi-color-text-primary);
  background:var(--symi-color-bg-raised);border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-md)}
.formulario-contacto input:focus,.formulario-contacto textarea:focus,.formulario-contacto select:focus{outline:3px solid var(--symi-color-focus-ring);outline-offset:2px}
.campo-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Privacidad y términos: texto corrido, fácil de leer */
.texto-legal{max-width:68ch}
.texto-legal h2{font-size:var(--symi-size-xl);margin:var(--symi-space-6) 0 var(--symi-space-2)}
.texto-legal h2:first-child{margin-top:0}
.texto-legal p,.texto-legal li{color:var(--symi-color-text-secondary);line-height:var(--symi-leading-normal)}
.texto-legal ul{display:grid;gap:var(--symi-space-2);padding-left:var(--symi-space-5);margin:var(--symi-space-2) 0}
.texto-legal p+p{margin-top:var(--symi-space-2)}

/* ---------- Clientes que confían: muro (clientes.html) y banda de logos (portada) ---------- */
.muro{display:grid;gap:var(--symi-space-4);grid-template-columns:minmax(0,1fr);list-style:none;padding:0;margin:0}
@media (min-width:768px){.muro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.muro{grid-template-columns:repeat(3,minmax(0,1fr))}}
.muro-tarjeta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--symi-space-3);padding:var(--symi-space-5);background:var(--symi-color-bg-raised);
  border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-lg);box-shadow:var(--symi-shadow-md)}
.muro-logo{width:100%;height:120px;display:grid;place-items:center;background:var(--symi-color-text-primary);border-radius:var(--symi-radius-md);padding:var(--symi-space-3)}
/* Los logos casi siempre vienen para fondo claro: el recuadro es claro en los dos modos. */
:root[data-tema="claro"] .muro-logo{background:var(--symi-color-bg-raised);border:var(--symi-border-width) solid var(--symi-color-border-default)}
.muro-inicial{color:var(--symi-color-text-inverse)}
:root[data-tema="claro"] .muro-inicial{color:var(--symi-color-brand-text)}
.muro-logo img{max-width:100%;max-height:96px;object-fit:contain}
.muro-inicial{font-family:var(--symi-font-display);font-size:var(--symi-size-3xl);color:var(--symi-color-brand-text)}
.muro-nombre{font-size:var(--symi-size-xl);margin:0}
.muro-frase{margin:0;padding-left:var(--symi-space-3);border-left:var(--symi-border-width) solid var(--symi-color-brand-fill);color:var(--symi-color-text-secondary);font-style:italic}
.muro-video{margin-top:auto}
.muro-vacio{text-align:center;display:grid;justify-items:center;gap:var(--symi-space-4);padding:var(--symi-space-8) 0;color:var(--symi-color-text-secondary)}
.banda-logos{padding:var(--symi-space-6) 0;border-bottom:var(--symi-border-width) solid var(--symi-color-border-strong);overflow:hidden}
.banda-logos-cab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--symi-space-3);margin-bottom:var(--symi-space-4)}
.banda-logos-cab h2{margin:0}
.banda-logos-marco{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.banda-logos-pista{display:flex;width:max-content;animation:cinta-avanza var(--banda-segundos,30s) linear infinite}
.banda-logos:hover .banda-logos-pista{animation-play-state:paused}
.banda-logos-lista{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.banda-logos-lista li{padding:0 var(--symi-space-6);display:flex;align-items:center}
.banda-logo{height:56px;width:auto;max-width:180px;object-fit:contain;background:var(--symi-color-text-primary);border-radius:var(--symi-radius-md);padding:var(--symi-space-2)}
:root[data-tema="claro"] .banda-logo{background:transparent;padding:0}
.banda-logos.quieta .banda-logos-marco{mask-image:none}
.banda-logos.quieta .banda-logos-pista{animation:none;width:auto;justify-content:center}
.banda-logos.quieta .banda-logos-lista{flex-wrap:wrap;justify-content:center;row-gap:var(--symi-space-4)}
@media (prefers-reduced-motion:reduce){.banda-logos-pista{animation:none}}
.formulario-nota{margin:0;font-size:var(--symi-size-sm);color:var(--symi-color-text-secondary)}