/* =====================================================================
   Open Root — sitio publico standalone (open-root.net)
   Sin conexion a dns.open-root.net / sin backend.
   Extraido y adaptado de panel.css + home.css reales (v4.1):
   IBM Plex Sans + IBM Plex Mono, acento ladrillo-naranja, tema claro/oscuro.
   ===================================================================== */

/* =====================================================================
   Open Root DNS Panel — sistema visual v4.1
   Alineado con panel.xhandro.com / AMX Antispam
   IBM Plex Sans + IBM Plex Mono · grises fríos · acento ladrillo-naranja
   Tema claro/oscuro vía [data-theme] con fallback a prefers-color-scheme
   ===================================================================== */

/* Fuentes servidas desde el propio dominio. El @import a fonts.googleapis.com
   bloqueaba el render con una peticion extra a otro dominio (DNS + TLS +
   descarga) antes de poder pintar nada. font-display:swap pinta ya con la
   fuente del sistema y cambia cuando llega Plex. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plex-sans-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plex-sans-400-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plex-sans-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plex-sans-500-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/plex-sans-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/plex-sans-600-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/plex-sans-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/plex-sans-700-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plex-mono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/plex-mono-600.woff2') format('woff2');}

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
    /* Acento ladrillo-naranja */
    --brick: #C2542C;
    --brick-dark: #A03F1D;
    --brick-darker: #7C2E13;
    --clay: #E08A50;
    --clay-soft: #F2B489;
    --brick-tint: rgba(194, 84, 44, .10);
    --brick-ring: rgba(194, 84, 44, .20);

    /* Superficies */
    --bg: #EEF1F4;
    --surface: #FFFFFF;
    --surface-2: #F6F8FA;
    --surface-3: #E7ECF1;
    --shell: #1C2530;
    --shell-2: #141C25;
    --shell-line: #2C3846;
    --shell-ink: #C6CFDA;
    --shell-faint: #8A94A3;

    /* Texto y líneas */
    --ink: #1B2430;
    --ink-soft: #5B6673;
    --ink-faint: #8A94A0;
    --line: #DDE3E9;
    --line-soft: #E9EDF1;

    /* Estados */
    --green: #2E7D5B;   --green-bg: #E2F0EA;
    --amber: #B6791F;   --amber-bg: #F7ECD5;
    --red: #B23B32;     --red-bg: #F6DDD9;
    --gray: #6B7683;    --gray-bg: #E7EBEF;
    --blue: #2F6E8F;    --blue-bg: #DEEBF2;
    --purple: #6D5A9C;  --purple-bg: #E9E4F3;
    --cyan: #217F86;    --cyan-bg: #DCEEF0;

    /* Alias del tema anterior, por si algún inline style los usa */
    --navy: #1C2530;
    --panel: #FFFFFF;
    --text: #1B2430;
    --muted: #5B6673;
    --border: #DDE3E9;

    --radius: 7px;
    --radius-lg: 11px;
    --radius-pill: 100px;
    --shadow-sm: 0 1px 2px rgba(27, 36, 48, .05);
    --shadow: 0 1px 3px rgba(27, 36, 48, .06), 0 6px 20px rgba(27, 36, 48, .05);
    --shadow-lg: 0 18px 50px rgba(15, 22, 32, .18);

    --font: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "Courier New", monospace;
    --sidebar-width: 244px;

    color-scheme: light;
}

:root[data-theme="dark"] {
    --brick: #D9663A;
    --brick-dark: #C2542C;
    --brick-darker: #A03F1D;
    --clay: #E89B67;
    --clay-soft: #F3BE9B;
    --brick-tint: rgba(217, 102, 58, .14);
    --brick-ring: rgba(217, 102, 58, .28);

    --bg: #10161E;
    --surface: #19212B;
    --surface-2: #1F2934;
    --surface-3: #26313E;
    --shell: #0D1319;
    --shell-2: #090E13;
    --shell-line: #212C39;
    --shell-ink: #B7C2CE;
    --shell-faint: #77828F;

    --ink: #E3E9EF;
    --ink-soft: #98A4B2;
    --ink-faint: #6D7885;
    --line: #2A3542;
    --line-soft: #232D39;

    --green: #58B98D;   --green-bg: rgba(46, 125, 91, .22);
    --amber: #DBA548;   --amber-bg: rgba(182, 121, 31, .22);
    --red: #E1706A;     --red-bg: rgba(178, 59, 50, .22);
    --gray: #96A1AE;    --gray-bg: rgba(107, 118, 131, .22);
    --blue: #6BA9C9;    --blue-bg: rgba(47, 110, 143, .24);
    --purple: #A492D3;  --purple-bg: rgba(109, 90, 156, .26);
    --cyan: #56B3B9;    --cyan-bg: rgba(33, 127, 134, .24);

    --navy: #0D1319;
    --panel: #19212B;
    --text: #E3E9EF;
    --muted: #98A4B2;
    --border: #2A3542;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
    --shadow: 0 1px 3px rgba(0, 0, 0, .32), 0 8px 24px rgba(0, 0, 0, .28);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brick: #D9663A; --brick-dark: #C2542C; --brick-darker: #A03F1D;
        --clay: #E89B67; --clay-soft: #F3BE9B;
        --brick-tint: rgba(217, 102, 58, .14); --brick-ring: rgba(217, 102, 58, .28);
        --bg: #10161E; --surface: #19212B; --surface-2: #1F2934; --surface-3: #26313E;
        --shell: #0D1319; --shell-2: #090E13; --shell-line: #212C39;
        --shell-ink: #B7C2CE; --shell-faint: #77828F;
        --ink: #E3E9EF; --ink-soft: #98A4B2; --ink-faint: #6D7885;
        --line: #2A3542; --line-soft: #232D39;
        --green: #58B98D; --green-bg: rgba(46,125,91,.22);
        --amber: #DBA548; --amber-bg: rgba(182,121,31,.22);
        --red: #E1706A;   --red-bg: rgba(178,59,50,.22);
        --gray: #96A1AE;  --gray-bg: rgba(107,118,131,.22);
        --blue: #6BA9C9;  --blue-bg: rgba(47,110,143,.24);
        --purple: #A492D3;--purple-bg: rgba(109,90,156,.26);
        --cyan: #56B3B9;  --cyan-bg: rgba(33,127,134,.24);
        --navy: #0D1319; --panel: #19212B; --text: #E3E9EF; --muted: #98A4B2; --border: #2A3542;
        --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
        --shadow: 0 1px 3px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.28);
        --shadow-lg: 0 20px 60px rgba(0,0,0,.55);
        color-scheme: dark;
    }
}

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { font-size: 15px; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: .93rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--brick); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; }
p { line-height: 1.6; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

code, .mono, .inline-code, .code-value, .code-block, .resolver-value, .ns-value, .big-tld {
    font-family: var(--mono);
}

::selection { background: var(--brick-ring); }

:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }


/* ---- Formularios base (input/select/textarea) ---- */
   9. Formularios
   --------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label, label { font-size: .77rem; font-weight: 600; color: var(--ink); }
.field .hint, .note, .choice-note, .security-note, .privacy-note { font-size: .74rem; color: var(--ink-soft); line-height: 1.55; }
.security-note, .privacy-note { margin-top: 10px; }

input, select, textarea, .input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--brick); }
input:focus, select:focus, textarea:focus, .input:focus { border-color: var(--brick); box-shadow: 0 0 0 3px var(--brick-tint); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
textarea { min-height: 90px; resize: vertical; font-family: var(--mono); font-size: .84rem; }
select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                      linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 15px) 51%, calc(100% - 10px) 51%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 30px;
}

/* ---- Conmutador de tema (lo inyecta theme.js) ---- */
/* Conmutador de tema (lo inyecta theme.js) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: background .12s, color .12s, border-color .12s;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--brick); border-color: var(--ink-faint); }
.theme-toggle .ic-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-dark { display: inline; }
:root[data-theme="dark"] .theme-toggle .ic-light { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .ic-dark { display: inline; }
    :root:not([data-theme="light"]) .theme-toggle .ic-light { display: none; }
}

/* =====================================================================
   Componentes de portada (equivalente a home.css real + extensiones)
   =====================================================================

/* =====================================================================
   Open Root DNS — portada publica v4.1.0
   Hereda los tokens de panel.css (que se carga antes), asi que el tema
   claro/oscuro y la paleta ladrillo-naranja funcionan sin duplicar nada.
   Movil primero en los puntos criticos: nav, hero, buscador y tablas.
   ===================================================================== */

.home-body { background: var(--bg); color: var(--ink); }

.home-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

/* ---------------------------------------------------------------------
   Cabecera y navegacion
   --------------------------------------------------------------------- */
.home-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--shell);
    border-bottom: 1px solid var(--shell-line);
}
.home-nav { min-height: 66px; display: flex; align-items: center; gap: 24px; }

.home-brand { display: flex; align-items: center; gap: 10px; color: #fff; min-width: max-content; }
.home-brand:hover { text-decoration: none; }
.home-brand strong { display: block; font-size: .95rem; font-weight: 700; }
.home-brand small { display: block; color: var(--shell-faint); font-size: .66rem; letter-spacing: .04em; margin-top: 2px; }
.home-logo {
    width: 34px; height: 34px;
    border-radius: var(--radius);
    display: grid; place-items: center;
    background: var(--brick);
    box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .18);
    font-size: .8rem; font-weight: 700; color: #fff;
}

.home-links { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.home-links a { color: var(--shell-ink); font-size: .82rem; font-weight: 500; }
.home-links a:hover { color: #fff; text-decoration: none; }

.home-nav-actions { display: flex; align-items: center; gap: 9px; }
.home-language select {
    min-height: 34px;
    padding: 6px 26px 6px 9px;
    background-color: var(--shell-2);
    color: var(--shell-ink);
    border-color: var(--shell-line);
    font-size: .76rem;
    width: auto;
}
.home-login { color: var(--shell-ink); font-size: .82rem; font-weight: 500; padding: 8px; }
.home-login:hover { color: #fff; text-decoration: none; }

.home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 17px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--brick);
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    transition: background .12s, border-color .12s, color .12s;
}
.home-button:hover { background: var(--brick-dark); color: #fff; text-decoration: none; }
.home-button.small { min-height: 34px; padding: 8px 13px; font-size: .78rem; }
.home-button.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.home-button.ghost:hover { background: var(--surface-2); border-color: var(--ink-faint); color: var(--ink); }
.home-button.white { background: #fff; color: var(--brick-darker); }
.home-button.white:hover { background: #fff; color: var(--brick-darker); filter: brightness(.94); }
.home-button.outline-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.home-button.outline-white:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.home-menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 8px;
    width: auto;
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.home-hero {
    position: relative;
    overflow: hidden;
    background: var(--shell);
    color: #fff;
    padding: 74px 0 84px;
    border-bottom: 1px solid var(--shell-line);
}
.home-hero::before {
    content: "";
    position: absolute;
    inset: -30% -20% auto auto;
    width: 70%; height: 130%;
    background: radial-gradient(circle at 70% 30%, rgba(217, 102, 58, .22), transparent 62%);
    pointer-events: none;
}
.home-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 60px;
    align-items: center;
}
.home-eyebrow {
    display: flex; align-items: center; gap: 8px;
    color: var(--clay-soft);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-weight: 700;
    margin-bottom: 16px;
}
.home-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 5px rgba(224, 138, 80, .18); }
.home-hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.9rem);
    line-height: 1.06;
    letter-spacing: -.035em;
    margin: 0;
    max-width: 780px;
    font-weight: 700;
    color: #fff;
}
.home-hero-copy > p { max-width: 700px; color: var(--shell-ink); font-size: 1rem; line-height: 1.7; margin: 20px 0 26px; }

.home-domain-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 7px;
    max-width: 700px;
    box-shadow: var(--shadow-lg);
}
.home-domain-search .search-mark { color: var(--ink-faint); font-size: 1.1rem; margin-left: 9px; background: none; padding: 0; }
.home-domain-search input { border: 0; box-shadow: none; flex: 1; min-width: 0; font-size: .92rem; background: transparent; }
.home-domain-search input:focus { outline: 0; box-shadow: none; border: 0; }
.home-domain-search button {
    border: 0;
    background: var(--brick);
    color: #fff;
    border-radius: var(--radius);
    padding: 11px 18px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    width: auto;
}
.home-domain-search button:hover { background: var(--brick-dark); }
.home-hero-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* Tarjeta de red */
.home-network-card {
    border: 1px solid var(--shell-line);
    border-radius: var(--radius-lg);
    background: var(--shell-2);
    overflow: hidden;
}
.network-card-head, .network-card-foot {
    display: flex; align-items: center; gap: 9px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--shell-line);
    font-size: .76rem;
    color: var(--shell-ink);
}
.network-card-head small { margin-left: auto; color: var(--shell-faint); }
.live-dot, .node-status { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(46, 125, 91, .18); flex-shrink: 0; }

.network-orbit {
    height: 290px;
    position: relative;
    display: grid; place-items: center;
    background: radial-gradient(circle, rgba(217, 102, 58, .14), transparent 60%);
}
.orbit { position: absolute; border: 1px solid rgba(226, 174, 145, .22); border-radius: 50%; }
.orbit-one { width: 168px; height: 168px; }
.orbit-two { width: 248px; height: 248px; }
.network-core {
    width: 70px; height: 70px;
    border-radius: 18px;
    display: grid; place-items: center;
    background: var(--brick);
    box-shadow: inset 0 -14px 0 rgba(0, 0, 0, .2), 0 12px 30px rgba(0, 0, 0, .35);
    font-size: 1.25rem; font-weight: 700; color: #fff;
}
.network-node { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 4px solid var(--clay); }
.node-1 { top: 44px; left: 50%; }
.node-2 { top: 92px; right: 55px; }
.node-3 { bottom: 70px; right: 76px; }
.node-4 { bottom: 55px; left: 76px; }
.node-5 { top: 90px; left: 55px; }
.network-card-foot { border-top: 1px solid var(--shell-line); border-bottom: 0; justify-content: space-around; }
.network-card-foot b { color: #fff; margin-left: 4px; }

/* ---------------------------------------------------------------------
   Franja de estadisticas
   --------------------------------------------------------------------- */
.home-stats-wrap { position: relative; margin-top: -32px; z-index: 4; }
.home-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.home-stats > div { padding: 20px 24px; border-right: 1px solid var(--line-soft); }
.home-stats > div:last-child { border-right: 0; }
.home-stats strong { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.home-stats span { display: block; color: var(--ink-soft); font-size: .68rem; margin-top: 4px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

/* ---------------------------------------------------------------------
   Secciones
   --------------------------------------------------------------------- */
.home-section { padding: 78px 0; }
.home-section-alt { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-intro-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 70px; align-items: center; }
.home-section-kicker { color: var(--brick); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 700; margin-bottom: 12px; }
.home-section h2 { font-size: clamp(1.65rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -.028em; margin: 0; font-weight: 700; }
.home-lead, .home-section-heading > p { font-size: .95rem; line-height: 1.75; color: var(--ink-soft); }
.home-inline-links { display: flex; gap: 22px; margin-top: 20px; flex-wrap: wrap; }
.home-inline-links a { color: var(--brick); font-weight: 600; font-size: .85rem; }

.home-stack-diagram { display: grid; gap: 10px; }
.home-stack-diagram > div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 17px 19px;
    display: grid;
    grid-template-columns: 40px 1fr;
    box-shadow: var(--shadow-sm);
}
.home-stack-diagram span { grid-row: 1 / 3; color: var(--brick); font-size: .82rem; font-weight: 700; }
.home-stack-diagram strong { font-size: .92rem; }
.home-stack-diagram small { color: var(--ink-soft); margin-top: 4px; font-size: .8rem; line-height: 1.5; }

.home-section-heading { display: grid; grid-template-columns: 1fr .8fr; gap: 46px; align-items: end; margin-bottom: 32px; }
.home-section-heading > p { margin: 0; }

.home-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-feature-grid article {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 21px;
    box-shadow: var(--shadow-sm);
    transition: border-color .12s;
}
.home-feature-grid article:hover { border-color: var(--brick); }
.feature-icon { width: 36px; height: 36px; border-radius: var(--radius); display: grid; place-items: center; font-weight: 700; margin-bottom: 16px; }
.feature-icon.blue   { background: var(--blue-bg);   color: var(--blue); }
.feature-icon.purple { background: var(--purple-bg); color: var(--purple); }
.feature-icon.green  { background: var(--green-bg);  color: var(--green); }
.feature-icon.cyan   { background: var(--cyan-bg);   color: var(--cyan); }
.home-feature-grid h3, .usage-grid h3, .node-card h3 { font-size: .95rem; margin: 0 0 8px; }
.home-feature-grid p, .usage-grid p, .node-card p { font-size: .84rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* ---------------------------------------------------------------------
   Seccion de DNS cifrado (fondo oscuro en ambos temas)
   --------------------------------------------------------------------- */
.home-encrypted-section { background: var(--shell); color: #fff; border-top: 1px solid var(--shell-line); border-bottom: 1px solid var(--shell-line); }
.light-heading h2 { color: #fff; }
.light-heading > p { color: var(--shell-ink); }

.resolver-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.resolver-card {
    background: var(--shell-2);
    border: 1px solid var(--shell-line);
    border-radius: var(--radius-lg);
    padding: 20px;
}
.resolver-card.recommended { border-color: var(--brick); box-shadow: inset 0 3px 0 var(--brick); }
.resolver-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.resolver-top span { font-size: .82rem; font-weight: 700; color: var(--clay-soft); }
.resolver-top b { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; background: rgba(255, 255, 255, .1); padding: 5px 8px; border-radius: var(--radius-pill); color: var(--shell-ink); }
.resolver-card h3 { font-size: 1.05rem; margin: 15px 0 8px; color: #fff; word-break: break-word; }
.resolver-card p { color: var(--shell-ink); font-size: .84rem; line-height: 1.6; min-height: 52px; }
.resolver-value { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--shell-line); font-size: .76rem; }
.resolver-value span { color: var(--shell-faint); }
.resolver-value code { color: #fff; font-size: .76rem; word-break: break-all; text-align: right; font-family: var(--mono); }
.resolver-card button, .home-check-card button {
    margin-top: 13px;
    background: #fff;
    color: var(--brick-darker);
    border: 0;
    border-radius: var(--radius);
    padding: 9px 13px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    width: auto;
}
.resolver-card button.copied, .home-check-card button.copied { background: var(--green-bg); color: var(--green); }

.home-check-card {
    margin-top: 18px;
    background: var(--shell-2);
    border: 1px solid var(--shell-line);
    border-radius: var(--radius-lg);
    padding: 16px 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.home-check-card > div { display: flex; align-items: center; gap: 12px; }
.home-check-card h3 { font-size: .92rem; margin: 0 0 4px; color: #fff; }
.home-check-card p { margin: 0; color: var(--shell-ink); font-size: .8rem; }
.home-check-icon { width: 36px; height: 36px; border-radius: var(--radius); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.home-check-icon.checking { background: rgba(255, 255, 255, .1); color: #fff; }
.home-check-icon.yes { background: var(--green-bg); color: var(--green); }
.home-check-icon.no  { background: var(--red-bg);   color: var(--red); }
.privacy-note { text-align: center; color: var(--shell-faint); font-size: .78rem; margin: 18px 0 0; }

/* ---------------------------------------------------------------------
   Como se usa y nodos
   --------------------------------------------------------------------- */
.usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.usage-grid article { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 21px; background: var(--surface); box-shadow: var(--shadow-sm); }
.usage-number { font-size: .78rem; font-weight: 700; color: var(--brick); margin-bottom: 16px; }

.node-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.node-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.node-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.node-card-top small { color: var(--green); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.node-card h3 { word-break: break-word; }
.node-card dl { margin: 16px 0 0; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.node-card dl > div { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 4px 0; align-items: baseline; }
.node-card dt { font-size: .62rem; color: var(--ink-faint); text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }
.node-card dd { font-size: .74rem; color: var(--ink-soft); margin: 0; word-break: break-all; font-family: var(--mono); }

/* ---------------------------------------------------------------------
   Llamada final y pie
   --------------------------------------------------------------------- */
.home-cta-section { padding: 52px 0; background: var(--brick); }
.home-cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; color: #fff; flex-wrap: wrap; }
.home-cta h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; }
.home-cta p { color: rgba(255, 255, 255, .88); max-width: 700px; margin: 9px 0 0; }
.home-cta > div:last-child { display: flex; gap: 9px; flex-wrap: wrap; }

.home-footer { background: var(--shell); color: #fff; padding: 30px 0; border-top: 1px solid var(--shell-line); }
.home-footer > .home-shell { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand small { max-width: 480px; color: var(--shell-faint); font-size: .76rem; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { font-size: .78rem; color: var(--shell-ink); }
.footer-links a:hover { color: #fff; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .home-links, .home-nav-actions { display: none; }
    /* Con el menu abierto la fila se parte, asi que se fija el orden para que
       la hamburguesa siga arriba junto a la marca y no caiga al final. */
    .home-nav { flex-wrap: wrap; }
    .home-brand { order: 1; margin-right: auto; }
    .home-menu-toggle { display: block; order: 2; margin-left: 0; }
    .home-menu-open .home-nav { min-height: 66px; height: auto; padding: 12px 0 14px; }
    .home-menu-open .home-links,
    .home-menu-open .home-nav-actions {
        display: flex;
        width: 100%;
        margin: 0;
        justify-content: center;
    }
    .home-menu-open .home-links {
        order: 3;
        padding-top: 12px;
        margin-top: 12px;
        border-top: 1px solid var(--shell-line);
    }
    .home-menu-open .home-nav-actions { order: 4; padding-top: 12px; }
    .home-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .home-network-card { max-width: 560px; }
    .home-feature-grid, .usage-grid, .node-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .home-shell { width: min(100% - 28px, 1180px); }
    .home-hero { padding: 52px 0 64px; }
    .home-hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
    .home-hero-copy > p { font-size: .92rem; margin: 16px 0 22px; }

    /* El buscador es la accion principal en movil: campo arriba, boton ancho. */
    .home-domain-search { flex-wrap: wrap; padding: 10px; gap: 10px; }
    .home-domain-search .search-mark { display: none; }
    .home-domain-search input { width: 100%; flex: 1 1 100%; padding: 10px 4px; }
    .home-domain-search button { width: 100%; min-height: 44px; }
    .home-hero-actions { flex-direction: column; align-items: stretch; }
    .home-hero-actions .home-button { width: 100%; }

    .home-network-card { display: none; }
    .home-stats-wrap { margin-top: -24px; }
    .home-stats { grid-template-columns: repeat(2, 1fr); }
    .home-stats > div { padding: 16px 18px; }
    .home-stats > div:nth-child(2n) { border-right: 0; }
    .home-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
    .home-stats strong { font-size: 1.4rem; }

    .home-section { padding: 52px 0; }
    .home-intro-grid, .home-section-heading { grid-template-columns: 1fr; gap: 24px; }
    .home-section-heading { align-items: start; }
    .home-feature-grid, .resolver-grid, .usage-grid, .node-grid { grid-template-columns: 1fr; }
    .resolver-card p { min-height: 0; }
    .resolver-card button, .home-check-card button { width: 100%; }

    .home-check-card { flex-direction: column; align-items: stretch; }
    .home-cta { flex-direction: column; align-items: flex-start; }
    .home-cta > div:last-child { width: 100%; }
    .home-cta > div:last-child .home-button { flex: 1 1 auto; }

    .home-footer > .home-shell { flex-direction: column; align-items: flex-start; gap: 20px; }
    .footer-links { gap: 14px 18px; }

    .home-menu-open .home-links, .home-menu-open .home-nav-actions { flex-direction: column; align-items: stretch; gap: 4px; }
    .home-menu-open .home-links a { text-align: center; padding: 11px; border-radius: var(--radius); }
    .home-menu-open .home-links a:hover { background: rgba(255, 255, 255, .06); }
    .home-language, .home-language select, .home-login, .home-nav-actions .home-button { width: 100%; }
    .home-login { text-align: center; padding: 11px; }
}

@media (max-width: 360px) {
    .home-brand small { display: none; }
    .home-stats { grid-template-columns: 1fr; }
    .home-stats > div { border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .home-stats > div:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------------------
   DNS cifrado — bloques por protocolo, sin filtro / con filtro
   --------------------------------------------------------------------- */
.protocol-block { margin-bottom: 30px; }
.protocol-block:last-child { margin-bottom: 0; }
.protocol-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.protocol-head h3 { font-size: 1rem; color: #fff; margin: 0; }
.protocol-head span { font-size: .78rem; color: var(--shell-faint); }
.resolver-grid.two-up { grid-template-columns: repeat(2, 1fr); }
.resolver-card.plain h3 { margin-top: 0; }
.tag-libre, .tag-filtro {
    display: inline-flex; align-items: center;
    font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: 4px 10px; border-radius: var(--radius-pill);
}
.tag-libre { background: var(--brick-tint); color: var(--clay-soft); border: 1px solid var(--brick-ring); }
.tag-filtro { background: var(--amber-bg); color: var(--amber); border: 1px solid rgba(182, 121, 31, .3); }

.node-noads-tag { margin-left: auto; font-size: .62rem; padding: 3px 9px; }

/* ---- Bloque "como funciona noads" + nota honesta ---- */
.noads-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; margin-top: 32px; box-shadow: var(--shadow-sm); }
.noads-block h3 { font-size: 1.05rem; margin: 0 0 10px; }
.noads-block p { font-size: .88rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; }
.noads-block p:last-child { margin-bottom: 0; }
.noads-source { font-family: var(--mono); font-size: .8rem; color: var(--ink); }
.note-callout { display: flex; gap: 12px; background: var(--amber-bg); border: 1px solid rgba(182, 121, 31, .3); border-radius: var(--radius); padding: 14px 16px; margin-top: 18px; }
.note-callout span.mark { color: var(--amber); font-weight: 700; flex-shrink: 0; }
.note-callout p { color: var(--amber); margin: 0; font-size: .82rem; line-height: 1.65; }

/* ---- FAQ ---- */
.faq-list { display: grid; gap: 10px; margin-top: 22px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 18px; }
.faq-item summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: .9rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--brick); font-size: 1.1rem; font-weight: 400; flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 0 0 16px; font-size: .85rem; line-height: 1.7; color: var(--ink-soft); }

/* ---------------------------------------------------------------------
   Pestañas de configuración (DoH por navegador / DoT por sistema)
   --------------------------------------------------------------------- */
.tabs-block { margin-bottom: 34px; }
.tabs-block:last-of-type { margin-bottom: 30px; }
.tabs-block > h3 { font-size: .95rem; font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.tabs-nav { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 4px; margin-bottom: 16px; }
.tabs-nav button { background: none; border: 0; color: var(--ink-soft); font-family: var(--font); font-size: .82rem; font-weight: 600; padding: 8px 16px; border-radius: var(--radius); cursor: pointer; }
.tabs-nav button[aria-selected="true"] { background: var(--brick); color: #fff; }
.tab-panel { display: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.tab-panel.active { display: block; }
.tab-panel ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.tab-panel li { color: var(--ink-soft); font-size: .87rem; line-height: 1.55; }
.tab-panel li b { color: var(--ink); }
.tab-panel p { color: var(--ink-soft); font-size: .87rem; margin: 0 0 10px; }
.tab-panel code { background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 6px; color: var(--brick); font-family: var(--mono); font-size: .82em; }
.tab-panel pre { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: .78rem; color: var(--ink); line-height: 1.7; }

/* ---------------------------------------------------------------------
   Router y perfiles móviles
   --------------------------------------------------------------------- */
.router-card { display: flex; gap: 18px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px; margin-bottom: 34px; }
.router-badge { width: 38px; height: 38px; border-radius: var(--radius); background: var(--brick-tint); color: var(--brick); display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; }
.router-card h3 { font-size: .95rem; margin: 0 0 6px; }
.router-card p { color: var(--ink-soft); font-size: .87rem; line-height: 1.6; margin: 0; }

.profile-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
.profile-list a { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 16px; font-size: .85rem; color: var(--ink); box-shadow: var(--shadow-sm); }
.profile-list a:hover { border-color: var(--brick); text-decoration: none; }
.profile-list .arrow { color: var(--ink-faint); font-family: var(--mono); }

/* ---------------------------------------------------------------------
   Privacidad
   --------------------------------------------------------------------- */
.privacy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.privacy-list li { display: flex; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.privacy-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.privacy-list .mark { color: var(--brick); font-family: var(--mono); flex-shrink: 0; }
.privacy-list span:last-child { font-size: .88rem; color: var(--ink-soft); line-height: 1.6; }

@media (max-width: 760px) {
    .resolver-grid.two-up { grid-template-columns: 1fr; }
    .profile-list { grid-template-columns: 1fr; }
    .tabs-nav { width: 100%; overflow-x: auto; }
    .router-card { flex-direction: column; }
}