/* MiFicha — web pública (además de app.css y landing.css): la escena de la portada, menú del móvil, lectores,
   bloques, formularios, tablas y pie. Modo claro y oscuro con los mismos tokens. */

.saltar { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--verde); color: #fff; padding: 8px 14px; border-radius: 10px; }
.saltar:focus { left: 12px; }
.aviso-idioma { margin: 0; text-align: center; background: var(--f-verde); font-size: 0.9rem; padding: 6px 12px; }
.aviso-idioma a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--i-verde); }
.publico code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; }

/* Cabecera: menú plegable en pantallas estrechas */
.menu-movil { display: none; position: relative; }
.menu-movil summary { list-style: none; cursor: pointer; display: grid; gap: 4px; place-content: center; width: 42px; height: 42px;
  border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie); }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--tinta); transition: transform .2s, opacity .2s; }
.menu-movil[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-movil[open] summary span:nth-child(2) { opacity: 0; }
.menu-movil[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-movil nav { position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; display: grid; padding: 8px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-alta); z-index: 20; }
.menu-movil nav a { padding: 10px 14px; border-radius: 12px; color: var(--tinta); font-weight: 650; }
.menu-movil nav a:hover { background: var(--plano); text-decoration: none; }
.nav-publica a.activo { color: var(--verde); }
@media (max-width: 860px) { .menu-movil { display: block; } }
@media (max-width: 420px) { .acciones-cab .btn.enlace { display: none; } }

/* ---------- Escena de la portada ---------- */
.hero-mificha h1 { max-width: 15em; }
.escena { position: absolute; inset: 0; }
.escena-esfera { position: absolute; inset: 2%; width: 96%; height: 96%; }
.escena-esfera path { fill: color-mix(in srgb, var(--menta) 55%, transparent); }
.escena-esfera path.on { fill: color-mix(in srgb, var(--verde) 22%, transparent); }
.escena-esfera .agujas { fill: none; stroke: color-mix(in srgb, var(--verde) 30%, transparent); }
.escena-dibujo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.escena-dibujo text { font-family: "Jakarta", system-ui, sans-serif; }
.lector-tipo { fill: #a7f3d0; font-size: 19px; font-weight: 800; letter-spacing: .02em; }
.lector-hora { fill: #fff; font-size: 44px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lector-nombre { fill: #c7d2fe; font-size: 15px; font-weight: 600; }
.lector-pie { fill: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.movil-titulo { fill: #0f172a; font-size: 15px; font-weight: 800; }
.movil-nombre { fill: #0f172a; font-size: 14px; font-weight: 700; }
.movil-cuenta { fill: #64748b; font-size: 12px; font-weight: 600; }
.movil-boton { fill: #fff; font-size: 14px; font-weight: 800; }
.cuenta { stroke-dasharray: 62.8; stroke-dashoffset: 12; }
.escena .flotante { font-size: 0.86rem; }
.escena .flotante code { font-size: .78rem; color: var(--tinta-2); }
.f-cadena { left: 0; top: 4%; }
.f-cola { right: -2%; bottom: 7%; }
.f-inspeccion { left: 4%; bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .haz { animation: haz 3s ease-in-out infinite; transform-origin: 376px 347px; }
  .lector-ok { animation: ok 3s ease-in-out infinite; transform-origin: 416px 150px; }
  .lector-led { animation: led 3s ease-in-out infinite; }
  .movil { animation: flotar 6s ease-in-out infinite; }
  .cuenta { animation: cuenta 15s linear infinite; }
  .escena .flotante { animation: flotar 6s ease-in-out infinite; }
  .f-cola { animation-delay: -2s; }
  .f-inspeccion { animation-delay: -4s; }
  @keyframes haz { 0%, 100% { opacity: 0; } 25%, 55% { opacity: 1; } 70% { opacity: 0; } }
  @keyframes ok { 0%, 45% { transform: scale(.6); opacity: 0; } 55% { transform: scale(1.12); opacity: 1; } 65%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
  @keyframes led { 0%, 45%, 100% { fill: #334155; } 55%, 90% { fill: #22c55e; } }
  @keyframes cuenta { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 62.8; } }
}

.franja-confianza { border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: var(--plano); }
.franja-confianza ul { list-style: none; margin: 0 auto; padding-top: 14px; padding-bottom: 14px; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px 28px; color: var(--tinta-2); font-weight: 700; font-size: 0.92rem; }
.franja-confianza li { display: inline-flex; align-items: center; gap: 6px; }
.franja-confianza svg { color: var(--verde); }

/* Por qué ahora */
.ahora article { border-top: 4px solid var(--borde); }
.ahora article:nth-child(1) { border-top-color: var(--verde); }
.ahora article:nth-child(2) { border-top-color: var(--sol); }
.ahora article:nth-child(3) { border-top-color: var(--coral); }
.nota-ahora { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; color: var(--tinta-2); font-size: 0.9rem; line-height: 1.55; }
.nota-ahora svg { flex: none; margin-top: 2px; color: var(--verde); }
.nota-ahora a { font-weight: 700; }

/* La esfera en los pasos y en la llamada final */
.paso-icono .cuartos path { fill: rgba(255, 255, 255, 0.10); }
.paso-icono .cuartos path.on { fill: var(--menta); }
.cta-final .deco .agujas { stroke: none; }
.mas-seccion { margin: 28px 0 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Lectores */
.lectores { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.lectores li { display: flex; gap: 16px; align-items: flex-start; background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: 20px; }
.lectores li.propio { border: 2px dashed color-mix(in srgb, var(--verde) 55%, transparent); }
.lectores h3 { font-size: 1.05rem; font-weight: 750; margin: 2px 0 6px; }
.lectores p { margin: 0; color: var(--tinta-2); line-height: 1.55; }
.lectores .ficha { flex: none; }

/* Dos bloques (gestorías y MiFactu, requisitos y proceso…) */
.dos-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; align-items: stretch; }
.bloque-destacado { background: var(--superficie); border: 1px solid var(--borde); border-radius: 26px; padding: 32px; display: flex; flex-direction: column; gap: 6px; }
.bloque-destacado h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 6px; }
.bloque-destacado > p { color: var(--tinta-2); line-height: 1.6; }
.bloque-destacado .lista-ok { flex: none; margin: 14px 0 22px; }
.bloque-destacado .btn { align-self: flex-start; margin-top: auto; }
.bloque-destacado.mifactu { background: radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, #0f766e 14%, transparent), transparent 70%), var(--superficie); }
.flujo-mifactu { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-weight: 800; font-size: .9rem; }
.flujo-mifactu span { padding: 6px 12px; border-radius: 999px; background: var(--f-verde); color: var(--i-verde); }
.flujo-mifactu span:last-child { background: color-mix(in srgb, #0f766e 15%, transparent); color: #0f766e; }
.flujo-mifactu i { flex: 1; max-width: 90px; height: 2px; background: repeating-linear-gradient(90deg, var(--verde) 0 6px, transparent 6px 10px); position: relative; }
.flujo-mifactu i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--verde); }
.lista-numerada { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 12px; color: var(--tinta-2); line-height: 1.6; }
.lista-numerada b, .lista-numerada strong { color: var(--tinta); }
.lista-ok.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Precios */
.planes-web { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.precio-pronto strong { font-size: 1.6rem !important; color: var(--verde); letter-spacing: -0.01em !important; }
.plan-medida { background: var(--plano); border-style: dashed; }
.propia-tarjeta { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; margin-top: 28px; padding: 30px 32px;
  border-radius: 26px; color: var(--oscura-tinta); background: radial-gradient(70% 90% at 100% 0%, rgba(165, 180, 252, .22), transparent 70%), var(--oscura); }
.propia-tarjeta > div { flex: 1 1 420px; }
.propia-tarjeta h3 { color: #fff !important; font-size: 1.35rem; font-weight: 800; margin: 2px 0 8px; }
.propia-tarjeta .etiqueta { color: var(--sol); }
.propia-tarjeta .lista-ok { margin: 10px 0 0; }
.propia-tarjeta .lista-ok svg { background: rgba(255, 255, 255, .12); color: #fff; }
.propia-tarjeta .btn { background: var(--sol); color: #0f172a; border-color: transparent; }

/* Páginas interiores */
.pagina-cab h1 { max-width: 20em; }
.indice-funciones { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 24px; }
.indice-funciones a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--superficie);
  border: 1px solid var(--borde); color: var(--tinta); font-weight: 700; font-size: .9rem; }
.indice-funciones .ficha { width: 26px; height: 26px; border-radius: 50%; }
.grupo-cab { display: flex; align-items: center; gap: 14px; }
.grupo-cab h2 { margin: 0; }
.rejilla-funciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px 28px; }
.rejilla-funciones article { padding: 4px 0 14px; border-bottom: 1px solid var(--borde); }
.rejilla-funciones h3 { display: flex; gap: 8px; align-items: center; font-size: 1.02rem; font-weight: 750; margin: 0 0 6px; }
.rejilla-funciones h3 svg { color: var(--i-verde); background: var(--f-verde); border-radius: 50%; padding: 3px; width: 22px; height: 22px; flex: none; }
.rejilla-funciones p { margin: 0; color: var(--tinta-2); line-height: 1.6; }
.enlace-doc { margin-top: 12px !important; }
.enlace-doc a { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }
.codigo { margin: 12px 0; padding: 16px 18px; border-radius: 16px; background: var(--oscura); color: #e2e8f0; overflow-x: auto; font-size: .84rem; line-height: 1.55; }
.codigo code { font-size: inherit; color: inherit; }

/* Tablas (guías, lectores, comparativa) */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); }
table.tabla-guia { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 0; border: 0; }
.texto-guia table.tabla-guia { display: block; overflow-x: auto; margin: 18px 0 22px; border: 1px solid var(--borde); border-radius: 14px; }
table.tabla-guia th, table.tabla-guia td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; color: var(--tinta-2); }
table.tabla-guia thead th { color: var(--tinta); background: var(--plano); font-weight: 750; }
table.tabla-guia tbody th { color: var(--tinta); font-weight: 700; }
table.tabla-guia tr:last-child td, table.tabla-guia tr:last-child th { border-bottom: 0; }

/* Formularios públicos */
.formulario-tarjeta { padding: 32px; border-radius: 26px; box-shadow: var(--sombra-alta); }
.formulario-tarjeta h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 4px; }
.formulario-publico { margin-top: 16px; }
.formulario-publico .campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 18px; }
.formulario-publico .btn[type=submit] { margin-top: 8px; }
.campo-trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Guías: fuentes */
.fuentes-guia { margin-top: 36px; }
.fuentes-guia h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 6px; }
.fuentes-guia ol { padding-left: 22px; display: grid; gap: 6px; font-size: .93rem; }
.fuentes-guia a { overflow-wrap: anywhere; }

/* Llamada final: dos botones y las tiendas */
.cta-centro { justify-content: center; }
.cta-final .btn.claro { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); box-shadow: none !important; }
.cta-apps { margin: 18px 0 8px !important; font-size: .95rem !important; opacity: .85; }
.tiendas-centro { justify-content: center; }

/* Pie en columnas */
.pie-columnas { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.pie-columnas nav { display: grid; gap: 8px; align-content: start; }
.pie-columnas nav h2 { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta); margin: 4px 0 4px; }
.pie-columnas nav a { color: var(--tinta-2); font-weight: 600; font-size: .93rem; }
.pie-marca .tiendas { margin-top: 14px; }
.idiomas-pie { display: flex; align-items: center; gap: 6px 12px; margin: 0; font-size: .9rem; color: var(--tinta-2); }
.idiomas-pie a { font-weight: 700; }
.idiomas-pie [aria-current] { color: var(--tinta); font-weight: 700; }
.tema { border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); border-radius: 999px; width: 40px; height: 32px; cursor: pointer; font-size: 1rem; }
.tema .tema-oscuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tema .tema-claro { display: none; } :root:not([data-theme="light"]) .tema .tema-oscuro { display: inline; } }
:root[data-theme="dark"] .tema .tema-claro { display: none; }
:root[data-theme="dark"] .tema .tema-oscuro { display: inline; }

/* Modo oscuro: lo que landing.css no cubre */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nota-pronto { background: #362a0e; color: #f8cf72; }
  :root:not([data-theme="light"]) .flujo-mifactu span:last-child { color: #5eead4; }
}
:root[data-theme="dark"] .nota-pronto { background: #362a0e; color: #f8cf72; }
:root[data-theme="dark"] .flujo-mifactu span:last-child { color: #5eead4; }

@media (max-width: 960px) { .pie-columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pie-columnas .pie-marca { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .bloque-destacado, .formulario-tarjeta, .propia-tarjeta { padding: 22px; border-radius: 20px; }
  .escena .flotante { font-size: .74rem; }
  .f-cadena { top: 0; }
  .f-inspeccion { display: none; }
  .lector-hora { font-size: 40px; }
}