/* Va en @layer components por la misma razon que cine-scoped.css: una regla
   sin capa gana a cualquier utilidad de Tailwind, y eso rompia los componentes
   heredados (colores de texto y rellenos). Aqui queda por debajo de ellas. */
@layer components {
/* =============================================================================
   Kangaroo ERP — capa cinematográfica
   Personalidad: libro de cuentas. Verde azulado sobre papel milimetrado cálido,
   sellos de modelo fiscal y una factura real como pieza central. En .cine.
   ========================================================================== */

.cine {
  --bg: #04141A;
  --bg-2: #0A242C;
  --fg: #E7F4F6;
  --fg-2: #A6C6CC;
  --fg-3: #7FA3AB;
  --light: #F6F4EC;        /* papel, no blanco azulado */
  --light-2: #EAE6D9;
  --ink: #0D1B1E;
  --ink-2: #3A4C50;
  --ink-3: #566A6F;
  --b1: #17909F;
  --b2: #0E6478;
  --b3: #7FE3EE;
  --on-b1: #04141A;
  --grad: linear-gradient(115deg, #0E6478, #17909F 52%, #4FCADB);
  --veil: 4, 20, 26;

  --font-d: var(--font-inter, "Inter"), system-ui, sans-serif;
  --font-b: var(--font-inter, "Inter"), system-ui, sans-serif;
  --font-m: ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1240px;
}
.cine h1, .cine h2, .cine h3 { font-weight: 700; letter-spacing: -.03em; }

/* Papel milimetrado: la textura que da carácter a las secciones claras. */
.cine .on-light { background-color: var(--light); background-image:
  linear-gradient(rgba(13,27,30,.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(13,27,30,.045) 1px, transparent 1px);
  background-size: 26px 26px; }

/* --- cabecera -------------------------------------------------------------- */
.kg-nav { position: fixed; inset: 0 0 auto; z-index: 90; border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s; }
.kg-nav.is-stuck { background: rgba(4,20,26,.88); backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom-color: rgba(127,227,238,.18); }
.kg-nav-in { display: flex; align-items: center; gap: 1rem; height: 74px; }
.kg-logo { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
  font-weight: 700; letter-spacing: -.02em; font-size: .96rem; color: #fff; }
.kg-logo em { font-style: normal; color: var(--b3); }

/* --- héroe: copia a la izquierda, factura a la derecha -------------------- */
.kg-hero { min-height: 100svh; display: flex; align-items: center; padding: 126px 0 5rem; }
.kg-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; }
.kg-hero h1 { margin-top: 1.4rem; }
.kg-hero .lead { margin-top: 1.5rem; color: #C3DDE1; }
.kg-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }
.kg-note { font-family: var(--font-m); font-size: .7rem; letter-spacing: .1em; color: var(--fg-3);
  margin-top: 1.3rem; }
@media (max-width: 1000px) { .kg-hero-grid { grid-template-columns: 1fr; } }

/* --- la factura: el documento real con su huella -------------------------- */
.kg-inv { background: #fff; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(13,27,30,.10); box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); }
.kg-inv-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; background: linear-gradient(180deg, #FAFAF6, #F0EEE4);
  border-bottom: 1px solid rgba(13,27,30,.09); }
.kg-inv-h b { font-size: .95rem; color: var(--ink); letter-spacing: -.02em; }
.kg-inv-h span { font-family: var(--font-m); font-size: .68rem; color: var(--ink-3); display: block; margin-top: .25rem; }
.kg-inv-tag { font-family: var(--font-m); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 999px; background: rgba(23,144,159,.13); color: #0A5361;
  border: 1px solid rgba(23,144,159,.3); white-space: nowrap; }
.kg-inv-b { padding: 1.2rem 1.3rem; }
.kg-inv-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0;
  border-bottom: 1px dashed rgba(13,27,30,.12); font-size: .85rem; color: var(--ink-2); }
.kg-inv-row:last-of-type { border-bottom: 0; }
.kg-inv-row b { color: var(--ink); font-weight: 600; }
.kg-inv-tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: .9rem;
  padding-top: .9rem; border-top: 2px solid rgba(13,27,30,.14); }
.kg-inv-tot span { font-family: var(--font-m); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }
.kg-inv-tot b { font-size: 1.6rem; font-weight: 700; letter-spacing: -.04em; color: var(--ink); }
.kg-inv-f { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem;
  background: #F6F4EC; border-top: 1px solid rgba(13,27,30,.09); }
.kg-qr { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 6px;
  background-image:
    linear-gradient(90deg, #0D1B1E 25%, transparent 25% 50%, #0D1B1E 50% 60%, transparent 60%),
    linear-gradient(#0D1B1E 25%, transparent 25% 45%, #0D1B1E 45% 55%, transparent 55%);
  background-size: 12px 12px; background-color: #fff; border: 3px solid #0D1B1E; }
.kg-inv-f p { font-family: var(--font-m); font-size: .64rem; line-height: 1.6; color: var(--ink-3);
  word-break: break-all; }
.kg-inv-f p b { color: #0A5361; display: block; letter-spacing: .1em; text-transform: uppercase;
  font-size: .58rem; margin-bottom: .3rem; }

/* --- banda de normativas ---------------------------------------------------- */
.kg-belt { border-block: 1px solid rgba(127,227,238,.18); padding: 1rem 0;
  background: linear-gradient(90deg, #04141A, #0B2C36, #04141A); }
.kg-belt .st-marquee-track { --st-marquee-gap: 2.6rem; --st-marquee-dur: 52s; }
.kg-belt span { font-family: var(--font-m); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-3); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2.6rem; }
.kg-belt span::after { content: "·"; color: var(--b1); }

/* --- cuatro áreas ----------------------------------------------------------- */
.kg-areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.kg-area { background: #fff; border: 1px solid rgba(13,27,30,.09); border-radius: var(--radius);
  padding: clamp(1.6rem, 2.6vw, 2.2rem); box-shadow: var(--shadow-1);
  transition: box-shadow .35s, transform .35s var(--ease); }
.kg-area:hover { box-shadow: var(--shadow-2); }
.kg-area-h { display: flex; align-items: center; gap: .9rem; }
.kg-area-ico { width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--grad); flex: 0 0 auto; }
.kg-area-ico svg { width: 22px; height: 22px; color: #fff; }
.kg-area h3 { font-size: 1.2rem; color: var(--ink); }
.kg-area p { font-size: .87rem; color: var(--ink-3); margin-top: .25rem; }
.kg-area ul { list-style: none; margin-top: 1.3rem; display: grid; gap: .6rem;
  border-top: 1px solid rgba(13,27,30,.09); padding-top: 1.2rem; }
.kg-area li { display: flex; gap: .6rem; font-size: .89rem; color: var(--ink-2); align-items: flex-start; }
.kg-area li svg { width: 16px; height: 16px; color: var(--b2); flex: 0 0 auto; margin-top: .2rem; }
@media (max-width: 860px) { .kg-areas { grid-template-columns: 1fr; } }

/* --- sellos de modelo fiscal ------------------------------------------------ */
.kg-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: clamp(.7rem, 1.4vw, 1rem); margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.kg-model { border-radius: var(--radius-sm); padding: 1.1rem 1.15rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(127,227,238,.20); }
.kg-model b { display: block; font-family: var(--font-m); font-size: 1.32rem; font-weight: 600;
  color: var(--b3); letter-spacing: -.02em; }
.kg-model span { display: block; font-size: .78rem; color: var(--fg-2); margin-top: .5rem; line-height: 1.5; }

/* --- pasos ------------------------------------------------------------------ */
.kg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.kg-step { background: #fff; border: 1px solid rgba(13,27,30,.09); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.4vw, 2rem); box-shadow: var(--shadow-1); }
.kg-step-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-weight: 700; font-size: .9rem; }
.kg-step h3 { font-size: 1.02rem; margin-top: 1.1rem; color: var(--ink); }
.kg-step p { font-size: .89rem; color: var(--ink-2); margin-top: .6rem; }
@media (max-width: 900px) { .kg-steps { grid-template-columns: 1fr; } }

/* --- perfiles ---------------------------------------------------------------- */
.kg-who { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.kg-who > div { border-radius: var(--radius); padding: clamp(1.5rem, 2.4vw, 2rem);
  background: rgba(255,255,255,.05); border: 1px solid rgba(127,227,238,.18); }
.kg-who h3 { font-size: 1.08rem; }
.kg-who ul { list-style: none; margin-top: 1.1rem; display: grid; gap: .6rem; }
.kg-who li { display: flex; gap: .6rem; font-size: .88rem; color: var(--fg-2); align-items: flex-start; }
.kg-who li::before { content: "→"; color: var(--b3); flex: 0 0 auto; }
@media (max-width: 900px) { .kg-who { grid-template-columns: 1fr; } }

/* --- pie ---------------------------------------------------------------------- */
.kg-foot { background: #030F14; border-top: 1px solid rgba(127,227,238,.14); }
.kg-foot .foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 2rem;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.4rem; }
.kg-foot h4 { font-family: var(--font-m); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 500; }
.kg-foot ul { list-style: none; margin-top: 1.1rem; display: grid; gap: .55rem; }
.kg-foot a { font-size: .88rem; color: var(--fg-2); transition: color .25s; }
.kg-foot a:hover { color: var(--b3); }
.kg-foot-brand p { color: var(--fg-3); font-size: .87rem; margin-top: 1rem; max-width: 34ch; }
.kg-foot-mark { font-size: clamp(2.4rem, 13vw, 11rem); font-weight: 800; letter-spacing: -.055em;
  line-height: .84; background: linear-gradient(180deg, rgba(127,227,238,.18), rgba(127,227,238,0));
  -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; padding-bottom: .1em; }
.kg-foot-legal { border-top: 1px solid rgba(127,227,238,.12); padding: 1.3rem 0 2.2rem;
  font-size: .8rem; color: var(--fg-3); }
@media (max-width: 860px) { .kg-foot .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kg-foot .foot-top { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .kg-foot a { min-height: 44px; display: inline-flex; align-items: center; } }


/* --- seguridad y cumplimiento (recuperada de la portada anterior) --------- */
.kg-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.kg-seg article { background: #fff; border: 1px solid rgba(13,27,30,.09); border-radius: var(--radius);
  padding: clamp(1.2rem, 2vw, 1.6rem); box-shadow: var(--shadow-1); }
.kg-seg-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--grad); }
.kg-seg-ico svg { width: 19px; height: 19px; color: #fff; }
.kg-seg h3 { font-size: .92rem; margin-top: .9rem; color: var(--ink); }
.kg-seg p { font-size: .82rem; color: var(--ink-2); margin-top: .5rem; line-height: 1.55; }
@media (max-width: 1100px) { .kg-seg { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .kg-seg { grid-template-columns: 1fr; } }

/* El logo oficial en la cabecera y el pie. */
.kg-logo img { width: 34px; height: 34px; border-radius: 9px; }

/* ===========================================================================
   Revisión de diseño 2026-08-22 — dimensiones medidas en navegador real.
   Todo lo de aquí abajo corrige medidas comprobadas, no gustos.
   ======================================================================== */

/* 1. La barra superior partía CADA entrada del menú en dos y tres líneas desde
      1024 px en adelante: los seis enlaces medían 63 px de alto dentro de una
      barra de 74 px («Qué / incluye», «Modelos / fiscales», «Crear / cuenta»).
      El menú, el enlace de acceso y el botón sumaban exactamente el ancho útil
      de 1240 px, así que el navegador resolvía el empate rompiendo las
      palabras. Se prohíbe el corte y se ajusta el aire entre entradas. */
.cine .nav-menu { gap: clamp(.8rem, 1.45vw, 1.6rem); }
.cine .nav-menu a { white-space: nowrap; }
.cine .nav-cta { gap: .5rem; }
.cine .nav-cta .login-link { padding-inline: .7rem; }
.cine .btn { white-space: nowrap; }
.cine .kg-nav-in { gap: clamp(.6rem, 1.2vw, 1rem); }

/* 1 bis. Con las palabras ya sin partir, los seis enlaces + acceso + botón
      necesitan 1.048 px de barra y en 1024 sólo hay 1.024: la barra desbordaba
      24 px en horizontal. El corte a menú desplegable estaba en 980 px, justo
      por debajo del ancho problemático. Se sube a 1.100 px, que es donde la
      barra deja de caber de verdad; el panel ya ofrece las seis secciones, el
      acceso y el botón, así que no se pierde nada. */
@media (max-width: 1100px) {
  .cine .nav-menu,
  .cine .nav-cta { display: none; }
  .cine .burger { display: block; }
  .cine .sheet { display: flex; }
}

/* 2. El titular del héroe llegaba a 108,8 px (--d0) y ocupaba 653 px de alto en
      una columna de 633 px: seis líneas que empujaban los botones a 1064 px, es
      decir, FUERA de la primera pantalla en 1280, 1440 y 1920. Un titular de
      doce palabras no admite la escala de display completa. Se le da una escala
      propia y la llamada a la acción vuelve a verse sin desplazar. */
.cine .kg-hero h1 { font-size: clamp(2.3rem, 4.35vw, 4rem); line-height: 1.03; }

/* 4. El pie de la factura del héroe llevaba `word-break: break-all`, pensado
      para la huella (que no tiene espacios) pero aplicado a TODO el párrafo:
      en 1024 px partía «Sede Electrónica» en «Sede E / lectrónica». Con
      `overflow-wrap: anywhere` sólo se parte lo que no cabe de ninguna otra
      manera, que es exactamente la huella. */
.cine .kg-inv-f p { word-break: normal; overflow-wrap: anywhere; }

/* 3. Cinco tarjetas de seguridad en una rejilla de tres dejaban la tercera
      celda de la segunda fila vacía entre 700 y 1100 px. Con seis columnas y
      saltos de dos y de tres, las dos filas quedan completas. */
@media (max-width: 1100px) and (min-width: 701px) {
  .kg-seg { grid-template-columns: repeat(6, 1fr); }
  .kg-seg article { grid-column: span 2; }
  .kg-seg article:nth-child(4),
  .kg-seg article:nth-child(5) { grid-column: span 3; }
}

}