/* =============================================================
   Porcenta — hoja de estilos única
   1 Tokens · 2 Reset · 3 Utilidades · 4 Botones · 5 Cabecera
   6 Hero · 7 Herramienta · 8 Resultado · 9 Anuncios · 10 Contenido
   11 FAQ · 12 Más herramientas · 13 Footer · 14 Consentimiento
   15 Responsive · 16 Reduced-motion
   ============================================================= */

/* ===================== 1. TOKENS ===================== */
:root {
  --bg: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #edf1fb;
  --ink: #12172b;
  --ink-2: #454c6b;
  --muted: #767ea0;
  --line: #dfe3f2;
  --line-2: #e9ecf8;

  --accent: #2454d9;
  --accent-dark: #173da3;
  --accent-ink: #ffffff;
  --accent-soft: #e2eafd;
  --accent-2: #c98a22;
  --accent2-soft: #faedd3;
  --ok: #1c8a63;
  --ok-soft: #e1f4ec;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(18, 23, 55, .06);
  --shadow: 0 14px 28px -14px rgba(18, 23, 55, .22), 0 2px 6px -1px rgba(18, 23, 55, .08);
  --shadow-lg: 0 30px 60px -22px rgba(18, 23, 55, .28), 0 8px 20px -8px rgba(18, 23, 55, .12);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --maxw: 1040px;
}

/* ===================== 2. RESET ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.08; letter-spacing: -.015em; font-weight: 700; font-family: var(--display); }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ===================== 3. UTILIDADES ===================== */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container + .container { margin-top: var(--space-5); }
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .6rem 1rem; background: var(--ink); color: #fff;
  border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }
.section-kicker {
  display: block; font-family: var(--mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem;
}
.section-sub { color: var(--muted); margin-top: .35rem; margin-bottom: 1.25rem; max-width: 62ch; }
.section-tint { background: var(--surface-2); border-block: 1px solid var(--line-2); }
.noscript-note {
  background: var(--accent2-soft); border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
  border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--ink-2); margin-bottom: 1rem;
}

/* ===================== 4. BOTONES ===================== */
.copy-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 8px; color: var(--muted); flex-shrink: 0; border: 1px solid transparent;
  transition: color .16s var(--ease-out), background .16s var(--ease-out), border-color .16s var(--ease-out);
}
.copy-btn:hover { color: var(--accent); background: var(--surface); border-color: var(--line); }
.copy-btn.is-copied { color: var(--ok); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: .92rem;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out);
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-2); color: var(--ink); }

/* ===================== 5. CABECERA ===================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.01em; }
.brand-mark {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--ink); color: #fff;
}
.brand-name { font-size: 1.15rem; font-family: var(--display); }
.site-nav { display: none; gap: 1.4rem; font-size: .92rem; font-weight: 500; color: var(--ink-2); }
.site-nav a { padding: .25rem 0; border-bottom: 2px solid transparent; transition: border-color .2s var(--ease-out), color .2s var(--ease-out); }
.site-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
@media (min-width: 720px) { .site-nav { display: flex; } }

/* ===================== 6. HERO ===================== */
.hero { padding-block: clamp(2rem, 6vw, 3.5rem) 1.5rem; position: relative; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); max-width: 20ch; }
.hero h1 .hero-accent { color: var(--accent); }
.hero-sub { margin-top: 1rem; color: var(--ink-2); max-width: 60ch; font-size: 1.1rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.hero-fact { display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.hero-fact svg { color: var(--ok); flex-shrink: 0; }

/* ===================== 7. HERRAMIENTA ===================== */
.tool-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 1.85rem); box-shadow: var(--shadow-lg);
}
.mode-tabs {
  position: relative; display: flex; flex-wrap: wrap; gap: .15rem; margin-bottom: 1.5rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .25rem;
}
.mode-tab {
  position: relative; z-index: 1; padding: .55rem .95rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
  color: var(--ink-2); transition: color .18s var(--ease-out);
}
.mode-tab.is-active { color: var(--accent-ink); }
.mode-tab-indicator {
  position: absolute; top: .25rem; left: 0; height: calc(100% - .5rem); border-radius: 999px;
  background: var(--accent); box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform .28s var(--ease-out), width .28s var(--ease-out);
}

.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.calc-field { display: flex; flex-direction: column; gap: .4rem; }
.calc-field label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.input-suffix {
  display: flex; align-items: center; gap: .4rem;
  background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 0 .9rem; transition: border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.input-suffix input {
  flex: 1; min-width: 0; padding: .75rem 0; font-family: var(--mono); font-weight: 700; font-size: 1.1rem; background: none;
}
.input-suffix span { color: var(--muted); font-weight: 600; font-size: .9rem; }
.input-suffix:focus-within { border-color: var(--accent); background: var(--surface); }

.privacy-badge { display: flex; align-items: center; gap: .5rem; margin-top: 1.35rem; color: var(--ok); font-size: .88rem; font-weight: 600; }
.privacy-badge svg { flex-shrink: 0; }
.honest-limit { margin-top: .5rem; color: var(--muted); font-size: .82rem; max-width: 68ch; }

/* ===================== 8. RESULTADO ===================== */
.result-box {
  margin-top: 1.5rem; padding: 1.25rem 1.4rem; border-radius: var(--radius);
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
}
.result-box::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent-2);
}
.result-label { font-size: .82rem; color: color-mix(in srgb, #fff 65%, transparent); font-weight: 600; letter-spacing: .02em; }
.result-value { display: flex; align-items: center; gap: .7rem; margin-top: .3rem; }
.result-number {
  font-family: var(--mono); font-weight: 700; font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: -.01em; line-height: 1; color: #fff;
}
.result-value .copy-btn { color: color-mix(in srgb, #fff 70%, transparent); }
.result-value .copy-btn:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.result-formula { margin-top: .6rem; color: color-mix(in srgb, #fff 55%, transparent); font-size: .86rem; font-family: var(--mono); }

/* ===================== 9. ANUNCIOS ===================== */
.ad-slot {
  min-height: 90px; display: grid; place-items: center; gap: .2rem;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--muted); font-size: .78rem; text-align: center; padding: .75rem;
}
.ad-slot strong { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ad-slot--infeed { min-height: 250px; }

/* ===================== 10. CONTENIDO ===================== */
.prose-section { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.prose-section h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin-bottom: 1.2rem; }
.prose-section p { color: var(--ink-2); margin-top: .9rem; max-width: 74ch; }
.how-it-works { list-style: none; display: grid; gap: 1rem; margin-bottom: 1.6rem; counter-reset: steps; }
.how-it-works li { counter-increment: steps; position: relative; padding-left: 2.6rem; color: var(--ink-2); }
.how-it-works li::before {
  content: counter(steps); position: absolute; left: 0; top: -.15rem;
  width: 1.8rem; height: 1.8rem; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; font-family: var(--mono); font-size: .85rem;
}
.how-it-works strong { color: var(--ink); }
h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin-bottom: .5rem; }

/* ===================== 11. FAQ ===================== */
.faq-list { display: grid; gap: .6rem; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.faq-item summary { font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
.faq-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq-item[open] .faq-icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.faq-item p { margin-top: .8rem; color: var(--ink-2); }

/* ===================== 12. MÁS HERRAMIENTAS ===================== */
.more-tools { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.more-tools-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.more-tool-card {
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .18s var(--ease-out);
}
.more-tool-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.more-tool-name { font-weight: 700; font-family: var(--display); font-size: 1.05rem; }
.more-tool-desc { color: var(--muted); font-size: .88rem; }

/* ===================== 13. FOOTER ===================== */
.site-footer { padding-block: 2.25rem; margin-top: var(--space-5); border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.footer-brand { color: var(--muted); font-size: .9rem; }
.footer-nav { display: flex; gap: 1.1rem; font-size: .88rem; color: var(--ink-2); }
.footer-nav a:hover { color: var(--accent); }

/* ===================== 14. CONSENTIMIENTO ===================== */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 1.1rem var(--gutter);
  box-shadow: 0 -12px 30px -12px rgba(18,23,55,.35);
}
.consent-banner[hidden] { display: none; }
.consent-inner {
  max-width: var(--maxw); margin-inline: auto; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 1rem;
}
.consent-text { font-size: .88rem; color: color-mix(in srgb, #fff 82%, transparent); max-width: 62ch; }
.consent-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: .6rem; flex-shrink: 0; }
.consent-actions .btn { padding: .6rem 1.05rem; font-size: .86rem; }
.consent-actions .btn-primary { background: var(--accent-2); color: #241a06; }
.consent-actions .btn-ghost { border-color: rgba(255,255,255,.25); color: #fff; }
.consent-actions .btn-ghost:hover { border-color: #fff; }

/* ===================== 15. RESPONSIVE ===================== */
@media (max-width: 539px) {
  .calc-grid { grid-template-columns: 1fr; }
  .consent-inner { flex-direction: column; align-items: stretch; }
  .consent-actions { justify-content: stretch; }
  .consent-actions .btn { flex: 1; }
}

/* ===================== 16. REDUCED-MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mode-tab-indicator { transition: none; }
}


/* =============================================================
   NAVEGACION EN MOVIL
   Por debajo de 720 px la cabecera ocultaba sus enlaces sin dar
   alternativa, asi que el menu era sencillamente inalcanzable desde
   el movil. Este bloque anade la hamburguesa y el panel desplegable.
   El panel se posiciona contra la cabecera (top: 100%) en lugar de
   con una altura fija, para que valga igual en todas las cabeceras
   de la red aunque midan distinto.
   ============================================================= */
.nav-toggle {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; border: 1px solid var(--line); color: var(--ink-2);
  background: none; cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle span {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
.nav-toggle span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 720px) { .nav-toggle { display: none; } }

.nav-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 55;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: grid; gap: .15rem; padding: .75rem var(--gutter) 1.1rem;
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: transform .28s var(--ease-out), opacity .28s var(--ease-out), visibility .28s;
}
.nav-panel.is-open { transform: none; opacity: 1; visibility: visible; }
.nav-panel a {
  padding: .8rem .6rem; border-radius: var(--radius-sm); font-weight: 600;
  color: var(--ink-2); border-left: 3px solid transparent;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out),
              border-color .2s var(--ease-out);
}
.nav-panel a:hover, .nav-panel a:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink); border-left-color: var(--accent);
}
@media (min-width: 720px) { .nav-panel { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-toggle span { transition: none; }
}


/* =============================================================
   CONTROL DE CONSENTIMIENTO EN LA POLITICA DE PRIVACIDAD
   Clases propias en vez de reutilizar las del sitio: cada web de la
   red nombra sus botones de una forma y este bloque tiene que verse
   igual de bien en todas sin depender de eso.
   ============================================================= */
.consent-reset-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.2rem; border-radius: 10px;
  font-weight: 600; font-size: .95rem; cursor: pointer;
  color: var(--ink); background: none;
  border: 1px solid var(--line);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.consent-reset-btn:hover {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.consent-reset-msg {
  margin-top: .6rem; font-size: .88rem; color: var(--accent);
  min-height: 1.2em;
}


/* =============================================================
   JERARQUIA DE TITULARES EN LAS PAGINAS LEGALES
   Estas paginas encadenaban h1 -> h3, saltandose el nivel h2. Quien
   navega con lector de pantalla se mueve por titulares y por niveles,
   y un salto asi le hace creer que se ha perdido una seccion. Ahora
   son h2; esta regla les conserva el tamano que ya tenian para que la
   pagina se vea exactamente igual que antes.
   ============================================================= */
.page-legal h2 { font-size: 1.17rem; }