/* Kirimi · web pública */
:root {
  --marca: #0f766e;
  --marca-oscura: #115e59;
  --marca-suave: #e6f4f1;
  --acento: #f59e0b;
  --texto: #1c2430;
  --suave: #5b6675;
  --borde: #e4e7ec;
  --fondo: #ffffff;
  --fondo-suave: #f6f8f8;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--texto); background: var(--fondo); line-height: 1.6; font-size: 17px; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--marca); text-underline-offset: 3px; }
a:hover { color: var(--marca-oscura); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--marca) 50%, transparent); outline-offset: 2px; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 12px; background: #fff; padding: 8px 14px; border-radius: 8px; z-index: 10; }
.contenedor { width: min(1160px, 100% - 32px); margin-inline: auto; }
.estrecho { width: min(780px, 100% - 32px); margin-inline: auto; }
.centrado { text-align: center; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 10px; font-weight: 650; text-decoration: none; border: 1px solid transparent; font-size: 1rem; transition: background .15s, transform .15s; cursor: pointer; }
.btn:hover { transform: translateY(-1px); }
.btn-primario { background: var(--marca); color: #fff; }
.btn-primario:hover { background: var(--marca-oscura); color: #fff; }
.btn-secundario { background: #fff; color: var(--texto); border-color: var(--borde); }
.btn-secundario:hover { border-color: var(--marca); color: var(--marca-oscura); }
.btn-blanco { background: #fff; color: var(--marca-oscura); }
.btn-grande { min-height: 52px; padding: 12px 26px; font-size: 1.05rem; }
.btn-bloque { width: 100%; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--borde); }
.cabecera-in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.logo { display: flex; }
.nav-principal { flex: 1; }
.nav-principal ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav-principal a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--texto); text-decoration: none; font-weight: 550; font-size: .96rem; }
.nav-principal a:hover, .nav-principal a[aria-current] { background: var(--marca-suave); color: var(--marca-oscura); }
.cabecera-acciones { display: flex; align-items: center; gap: 14px; }
.enlace-entrar { color: var(--texto); text-decoration: none; font-weight: 550; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 0; margin: 0; font-size: .88rem; color: var(--suave); }
.migas li + li::before { content: "›"; margin-right: 6px; }
.migas a { color: var(--suave); }

/* Hero */
.hero { background: radial-gradient(1200px 500px at 85% -10%, #d9f2ec 0, transparent 60%), linear-gradient(#fff, #f7fbfa); padding: 64px 0 72px; }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.antetitulo { color: var(--marca); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; margin-bottom: 12px; }
.hero h1 span { color: var(--marca); }
.entradilla { font-size: 1.15rem; color: var(--suave); max-width: 40em; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 14px; }
.hero-nota { color: var(--suave); font-size: .92rem; }

/* Maqueta */
.maqueta { background: #fff; border: 1px solid var(--borde); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(15, 118, 110, .35), var(--sombra); overflow: hidden; font-size: .88rem; }
.maqueta-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f2f4f7; border-bottom: 1px solid var(--borde); }
.maqueta-barra span { width: 10px; height: 10px; border-radius: 50%; background: #d0d5dd; }
.maqueta-barra em { margin-left: 10px; font-style: normal; color: var(--suave); font-size: .78rem; background: #fff; padding: 2px 10px; border-radius: 6px; }
.maqueta-cuerpo { padding: 18px; display: grid; gap: 14px; }
.maqueta-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.maqueta-kpis div { border: 1px solid var(--borde); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; }
.maqueta-kpis small { color: var(--suave); font-size: .72rem; }
.maqueta-kpis b { font-size: .98rem; }
.maqueta-factura { border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.maqueta-fila { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--borde); }
.maqueta-verifactu { padding: 9px 12px; background: var(--marca-suave); color: var(--marca-oscura); font-weight: 600; }
.sello { background: var(--marca); color: #fff; font-size: .7rem; padding: 2px 6px; border-radius: 4px; margin-right: 6px; }
.maqueta-modelo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-radius: 10px; padding: 12px; background: #fff7ed; border: 1px solid #fde4c3; }
.maqueta-modelo i { font-style: normal; background: var(--marca); color: #fff; border-radius: 6px; padding: 4px 10px; font-size: .78rem; }

/* Franja */
.franja { background: var(--texto); color: #e6e9ee; }
.ventajas-cortas { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 18px 0; margin: 0 auto; font-size: .95rem; }
.ventajas-cortas li::before { content: "✓"; color: #5eead4; margin-right: 8px; font-weight: 700; }
.ventajas-cortas strong { color: #fff; }

/* Secciones */
.seccion { padding: 72px 0; }
.seccion-suave { background: var(--fondo-suave); }
.seccion-sin-arriba { padding-top: 0; }
.cabecera-pagina { padding-bottom: 40px; }
.titulo-seccion { text-align: center; }
.subtitulo-seccion { text-align: center; color: var(--suave); margin: 0 auto 40px; max-width: 40em; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra); }
.tarjeta svg { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--marca-suave); stroke: var(--marca); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.tarjeta p { color: var(--suave); margin-bottom: .6em; }
.tarjeta a { font-weight: 600; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pasos { padding-left: 0; list-style: none; counter-reset: paso; display: grid; gap: 16px; margin: 24px 0 28px; }
.pasos li { counter-increment: paso; position: relative; padding-left: 52px; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; font-weight: 700; }
.cita { background: #fff; border-radius: var(--radio); padding: 36px; box-shadow: var(--sombra); border-left: 6px solid var(--marca); }
.cita p { font-size: 1.25rem; margin: 0; }

/* FAQ */
.faq { display: grid; gap: 10px; margin: 24px 0; }
.faq details { border: 1px solid var(--borde); border-radius: 12px; background: #fff; }
.faq summary { cursor: pointer; padding: 16px 20px; font-weight: 650; list-style: none; position: relative; padding-right: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 12px; font-size: 1.4rem; color: var(--marca); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 20px 6px; color: var(--suave); }

/* CTA final */
.cta-final { background: linear-gradient(120deg, var(--marca-oscura), var(--marca)); color: #fff; text-align: center; padding: 64px 0; }
.cta-final p { color: #d5f5ee; font-size: 1.1rem; }

/* Precios */
.precios { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: 24px; margin-bottom: 64px; }
.plan { position: relative; background: #fff; border: 1px solid var(--borde); border-radius: 18px; padding: 32px; box-shadow: var(--sombra); }
.plan-destacado { border: 2px solid var(--marca); }
.plan .etiqueta { position: absolute; top: -13px; left: 32px; background: var(--acento); color: #3b2300; font-weight: 700; font-size: .82rem; padding: 4px 12px; border-radius: 99px; }
.precio { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; }
.precio b { font-size: 2.8rem; letter-spacing: -.03em; }
.precio span { color: var(--suave); }
.texto-suave { color: var(--suave); }
.lista-check { list-style: none; padding: 0; display: grid; gap: 10px; margin: 20px 0 40px; }
.lista-check li { position: relative; padding-left: 30px; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--marca-suave); color: var(--marca); display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
.lista-check.columnas { grid-template-columns: 1fr 1fr; }

/* Textos largos */
.texto-largo h2 { margin-top: 1.8em; }
.texto-largo p, .texto-largo li { color: #344054; }
.nota { font-size: .9rem; color: var(--suave); }
.caja-destacada { background: var(--marca-suave); border-radius: var(--radio); padding: 24px; margin: 28px 0; }
.linea-tiempo { display: grid; gap: 12px; margin: 20px 0; }
.linea-tiempo div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--borde); }
.linea-tiempo b { color: var(--marca-oscura); }
.tabla-modelos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tabla-modelos div { border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; background: #fff; box-shadow: var(--sombra); }
.tabla-modelos b { display: inline-block; font-size: 1.4rem; color: var(--marca-oscura); background: var(--marca-suave); border-radius: 8px; padding: 2px 10px; margin-right: 8px; }
.tabla-modelos span { font-weight: 650; }
.tabla-modelos p { color: var(--suave); margin: 10px 0 0; }
.legal h2 { font-size: 1.25rem; }

/* Pie */
.pie { background: #0e1a1f; color: #c4cbd3; padding: 56px 0 24px; font-size: .94rem; }
.pie-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 28px; }

.pie h2, .pie-titulo { font-size: .85rem; font-weight: 700; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie a { color: #c4cbd3; text-decoration: none; }
.pie a:hover { color: #fff; }
.pie-legal { border-top: 1px solid #22313a; margin-top: 40px; padding-top: 20px; font-size: .82rem; color: #8b96a3; }

@media (max-width: 960px) {
  .nav-principal { display: none; }
  .cabecera-acciones { margin-left: auto; }
  .hero-in, .dos-columnas { grid-template-columns: 1fr; }
  .rejilla-3, .tabla-modelos { grid-template-columns: 1fr 1fr; }
  .ventajas-cortas { grid-template-columns: 1fr 1fr; }
  .pie-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { padding: 40px 0 48px; }
  .seccion { padding: 52px 0; }
  .rejilla-3, .tabla-modelos, .precios, .lista-check.columnas, .ventajas-cortas, .pie-in { grid-template-columns: 1fr; }
  .linea-tiempo div { grid-template-columns: 1fr; gap: 4px; }
  .enlace-entrar { display: none; }
  .maqueta-kpis { grid-template-columns: 1fr 1fr; }
  .maqueta-kpis div:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn:hover { transform: none; } }
.menu-movil { display: none; position: relative; }
.menu-movil summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--borde); }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil svg { stroke: var(--texto); stroke-width: 2; stroke-linecap: round; fill: none; }
.menu-movil nav { position: absolute; right: 0; top: 52px; background: #fff; border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); min-width: 230px; padding: 8px; }
.menu-movil ul { list-style: none; margin: 0; padding: 0; }
.menu-movil a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--texto); text-decoration: none; font-weight: 550; }
.menu-movil a:hover { background: var(--marca-suave); }
@media (max-width: 960px) { .menu-movil { display: block; } }
@media (max-width: 380px) { .cabecera-acciones .btn { padding: 8px 12px; font-size: .92rem; } }
.comparativa { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; }
.comparativa-col { background: #fff; border-radius: var(--radio); padding: 28px; border: 1px solid var(--borde); box-shadow: var(--sombra); }
.comparativa-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.comparativa-col li { position: relative; padding-left: 30px; }
.comparativa-col li::before { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; }
.comparativa-no li { color: var(--suave); text-decoration: line-through; text-decoration-color: #d0d5dd; }
.comparativa-no li::before { content: "✕"; background: #fef3f2; color: #d92d20; }
.comparativa-si { border: 2px solid var(--marca); }
.comparativa-si li::before { content: "✓"; background: var(--marca-suave); color: var(--marca); }
@media (max-width: 620px) { .comparativa { grid-template-columns: 1fr; } }

/* Así es Kirimi por dentro (pestañas sin JS) */
.pestanas > input { position: absolute; opacity: 0; pointer-events: none; }
.pestanas-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
.pestanas-nav label { cursor: pointer; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--borde); background: #fff; font-weight: 600; font-size: .95rem; color: var(--texto); transition: background .15s, border-color .15s; }
.pestanas-nav label:hover { border-color: var(--marca); color: var(--marca-oscura); }
.pestanas-paneles figure { display: none; margin: 0; }
.pestanas-paneles img { display: block; width: 100%; border-radius: 16px; border: 1px solid var(--borde); box-shadow: 0 30px 60px -20px rgba(15, 118, 110, .35), var(--sombra); }
.pestanas-paneles figcaption { text-align: center; color: var(--suave); max-width: 46em; margin: 22px auto 28px; }
.pestanas-paneles figcaption b { color: var(--texto); }
#pd-1:checked ~ .pestanas-paneles figure:nth-child(1), #pd-2:checked ~ .pestanas-paneles figure:nth-child(2),
#pd-3:checked ~ .pestanas-paneles figure:nth-child(3), #pd-4:checked ~ .pestanas-paneles figure:nth-child(4),
#pd-5:checked ~ .pestanas-paneles figure:nth-child(5), #pd-6:checked ~ .pestanas-paneles figure:nth-child(6),
#pd-7:checked ~ .pestanas-paneles figure:nth-child(7) { display: block; animation: aparecer .25s ease; }
#pd-1:checked ~ .pestanas-nav label[for="pd-1"], #pd-2:checked ~ .pestanas-nav label[for="pd-2"],
#pd-3:checked ~ .pestanas-nav label[for="pd-3"], #pd-4:checked ~ .pestanas-nav label[for="pd-4"],
#pd-5:checked ~ .pestanas-nav label[for="pd-5"], #pd-6:checked ~ .pestanas-nav label[for="pd-6"],
#pd-7:checked ~ .pestanas-nav label[for="pd-7"] { background: var(--marca); border-color: var(--marca); color: #fff; }
#pd-1:focus-visible ~ .pestanas-nav label[for="pd-1"], #pd-2:focus-visible ~ .pestanas-nav label[for="pd-2"], #pd-3:focus-visible ~ .pestanas-nav label[for="pd-3"], #pd-4:focus-visible ~ .pestanas-nav label[for="pd-4"], #pd-5:focus-visible ~ .pestanas-nav label[for="pd-5"], #pd-6:focus-visible ~ .pestanas-nav label[for="pd-6"], #pd-7:focus-visible ~ .pestanas-nav label[for="pd-7"] { outline: 3px solid color-mix(in srgb, var(--marca) 50%, transparent); outline-offset: 2px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) {
  .pestanas-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 6px; margin-inline: -16px; padding-inline: 16px; }
  .pestanas-nav label { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .pestanas-paneles figure { animation: none !important; } }

/* Capturas del panel en las páginas */
.captura { margin: 32px 0; }
.captura img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--borde); box-shadow: 0 30px 60px -20px rgba(15, 118, 110, .35), var(--sombra); background: #fff; }
.captura figcaption { color: var(--suave); font-size: .95rem; text-align: center; margin-top: 14px; }
.captura figcaption b { color: var(--texto); }
.captura-hero { margin: 0; }
.captura-movil { max-width: 560px; margin: 0 auto; }
.captura-movil img { border: 0; box-shadow: none; background: transparent; }
.dos-capturas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.dos-capturas .captura { margin: 0; }
.texto-largo .captura { margin: 28px 0 32px; }
@media (max-width: 960px) { .dos-capturas { grid-template-columns: 1fr; } }

/* Guías */
.guia-meta { color: var(--suave); font-size: .9rem; margin-top: -4px; }
.guia h2 { scroll-margin-top: 90px; }
.guia h3 { margin-top: 1.6em; }
.guia ul, .guia ol { padding-left: 1.3em; }
.guia li { margin-bottom: .4em; }
.indice-guia { background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 22px; margin: 28px 0; }
.indice-guia p { font-weight: 700; margin: 0 0 8px; }
.indice-guia ol { margin: 0; }
.tabla-guia { overflow-x: auto; margin: 24px 0; border: 1px solid var(--borde); border-radius: 12px; }
.tabla-guia table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla-guia th, .tabla-guia td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-guia th { background: var(--fondo-suave); font-size: .85rem; }
.tabla-guia tr:last-child td { border-bottom: 0; }
.caja-cta { border-left: 6px solid var(--marca); }
.caja-cta .btn { margin-top: 4px; }
.relacionadas { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--borde); }
.relacionadas h2 { margin-top: 0; font-size: 1.3rem; }
.titulo-categoria { font-size: 1.3rem; margin: 40px 0 16px; }
.aviso-herramientas { background: var(--marca-suave); border-radius: 14px; padding: 18px 22px; margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.aviso-herramientas p { margin: 0; }
.aviso-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.enlace-mas { font-weight: 600; }
.otros-recursos { max-width: 760px; }
.tarjeta-guia h3 a { color: var(--texto); text-decoration: none; }
.tarjeta-guia h3 a:hover { color: var(--marca-oscura); text-decoration: underline; }
.tarjeta-guia p { font-size: .95rem; }

/* Calculadora de factura */
.calculadora { display: grid; gap: 20px; }
.calc-modo { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 600; }
.calc-modo label, .calc-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.calc-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.calc-campo span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.calc-campo input, .calc-campo select { width: 100%; font: inherit; min-height: 46px; padding: 10px 12px; border: 1px solid #cfd5dd; border-radius: 10px; background: #fff; color: var(--texto); }
.calc-campo input:focus, .calc-campo select:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); }
.calc-check { grid-column: 1 / -1; font-size: .95rem; }
.calc-resultado { margin: 0; display: grid; gap: 8px; background: var(--fondo-suave); border-radius: 12px; padding: 18px 20px; }
.calc-resultado div { display: flex; justify-content: space-between; gap: 12px; }
.calc-resultado dt { color: var(--suave); }
.calc-resultado dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.calc-total { border-top: 2px solid var(--texto); padding-top: 10px; margin-top: 4px; font-size: 1.25rem; }
.calc-total dt { color: var(--texto); font-weight: 700; }
@media (max-width: 620px) { .calc-campos { grid-template-columns: 1fr; } }
.calc-resultado dd { white-space: nowrap; }
.cabecera-acciones .btn { white-space: nowrap; }
@media (max-width: 420px) { .cabecera-in { gap: 12px; } .cabecera-acciones { gap: 8px; } .cabecera-acciones .btn { padding: 8px 14px; font-size: .95rem; } }
h1.antetitulo { line-height: 1.4; }
.titular { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--texto); }
.hero .titular span { color: var(--marca); }
.subtitular { font-size: 1.25rem; font-weight: 700; color: var(--marca); margin: 0 0 14px; }
.lista-guias { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lista-guias a { display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; color: var(--texto); text-decoration: none; font-weight: 600; box-shadow: var(--sombra); }
.lista-guias a:hover { border-color: var(--marca); color: var(--marca-oscura); }
.lista-guias a::after { content: " →"; color: var(--marca); }
@media (max-width: 620px) { .lista-guias { grid-template-columns: 1fr; } }
/* Índice de guías: herramientas destacadas */
.destacados-guias { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 8px; }
.destacado-guia { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: var(--radio); border: 1px solid var(--borde); background: #fff; box-shadow: var(--sombra); color: var(--texto); text-decoration: none; transition: border-color .15s, transform .15s; }
.destacado-guia:first-child { border: 2px solid var(--marca); background: linear-gradient(160deg, var(--marca-suave), #fff 60%); }
.destacado-guia:hover { border-color: var(--marca); transform: translateY(-2px); color: var(--texto); }
.destacado-guia svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--marca-suave); stroke: var(--marca); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.destacado-etiqueta { color: var(--marca); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.destacado-guia strong { font-size: 1.3rem; line-height: 1.25; letter-spacing: -.01em; }
.destacado-guia > span:not(.btn):not(.destacado-etiqueta) { color: var(--suave); }
.destacado-guia .btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 760px) { .destacados-guias { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .destacado-guia:hover { transform: none; } }
/* Generador de facturas gratis */
.generador { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.generador-form { display: grid; gap: 18px; }
.generador-form fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.generador-form legend { font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; padding: 0; }
.generador-form legend small { font-weight: 400; color: var(--suave); }
.generador-form .ancho-2, .gen-lineas, .generador-form fieldset > .btn { grid-column: 1 / -1; }
.generador-form fieldset > .btn { justify-self: start; }
.gen-lineas { display: grid; gap: 10px; }
.gen-linea { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, 1.2fr) 40px; gap: 8px; align-items: end; }
.gen-quitar { height: 46px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; font-size: 1.3rem; color: var(--suave); cursor: pointer; }
.generador-vista { position: sticky; top: 90px; }
.factura-generada { background: #fff; border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); padding: 30px; font-size: .88rem; color: #1c2430; }
.factura-generada p { margin: 0 0 3px; }
.factura-generada header { display: flex; justify-content: flex-end; text-align: right; margin-bottom: 22px; }
.fg-titulo { font-size: 1.5rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--marca); }
.fg-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.fg-etiqueta { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.fg-nombre { font-weight: 700; }
.fg-lineas { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.fg-lineas th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); border-bottom: 2px solid #1c2430; padding: 6px 4px; }
.fg-lineas td { padding: 8px 4px; border-bottom: 1px solid var(--borde); }
.fg-lineas th:not(:first-child), .fg-lineas td:not(:first-child) { text-align: right; white-space: nowrap; }
.fg-totales { margin: 0 0 14px auto; max-width: 280px; display: grid; gap: 4px; }
.fg-totales div { display: flex; justify-content: space-between; gap: 12px; }
.fg-totales dd { margin: 0; font-variant-numeric: tabular-nums; }
.fg-total { border-top: 2px solid #1c2430; padding-top: 6px; font-weight: 800; font-size: 1.1rem; }
.fg-nota { font-size: .8rem; color: #475467; }
.gen-acciones { margin: 18px 0 6px; }
.aviso-verifactu { border-left: 6px solid #f79009; background: #fffaeb; }
.aviso-verifactu h2 { margin-top: 0; }
@media (max-width: 900px) { .generador { grid-template-columns: 1fr; } .generador-vista { position: static; } }
@media (max-width: 560px) { .generador-form fieldset, .fg-partes { grid-template-columns: 1fr; } .gen-linea { grid-template-columns: 1fr 1fr 40px; } .gen-linea label:first-child { grid-column: 1 / -1; } .factura-generada { padding: 18px; } }
#hoja-impresion { display: none; }
@media print {
  body.imprimiendo > *:not(#hoja-impresion) { display: none !important; }
  body.imprimiendo #hoja-impresion { display: block; }
  #hoja-impresion .factura-generada { border: 0; box-shadow: none; padding: 0; font-size: 11pt; }
  @page { margin: 18mm; }
}
[hidden] { display: none !important; }
/* Vengo de otro programa */
.miedos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.miedo h2 { font-size: 1.2rem; margin-top: 0; }
.miedo p { margin-bottom: 0; color: #344054; }
.pasos-cambio { list-style: none; counter-reset: paso; padding: 0; margin: 28px 0 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pasos-cambio li { counter-increment: paso; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 8px; }
.pasos-cambio li::before { content: counter(paso); width: 36px; height: 36px; border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; font-weight: 700; }
.pasos-cambio span { color: var(--suave); font-size: .95rem; }
.franja-cambio { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; border: 2px solid var(--marca); border-radius: var(--radio); padding: 28px; background: linear-gradient(120deg, var(--marca-suave), #fff 70%); }
.franja-cambio h2 { margin: 0 0 6px; }
.franja-cambio p { margin: 0; color: #344054; max-width: 62ch; }
@media (max-width: 960px) { .pasos-cambio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .miedos, .pasos-cambio { grid-template-columns: 1fr; } }
.hero-acciones.centrado { justify-content: center; }
/* Con «Herramientas» en el menú, por debajo de 1120 px se usa el menú desplegable */
@media (max-width: 1120px) { .nav-principal { display: none; } .menu-movil { display: block; } .cabecera-acciones { margin-left: auto; } }

.pasos-export { padding-left: 22px; display: grid; gap: 14px; margin: 16px 0 24px; }
.pasos-export .fuente { display: block; font-size: .8rem; color: var(--texto-suave); margin-top: 4px; }