:root {
    --color-background: #f4f7fb;
    --color-surface: #ffffff;
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-secondary: #0f172a;
    --color-text: #1e293b;
    --color-muted: #64748b;
    --color-border: #dbe3ef;
    --color-success: #059669;
    --color-warning: #d97706;
    --color-danger: #dc2626;
    --shadow-small: 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-large: 0 24px 70px rgba(15, 23, 42, 0.12);
    --border-radius: 20px;
}

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    background: var(--color-background);
    color: var(--color-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    .site-header .navbar {
        min-height: 76px;
    }

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
}

    .navbar-brand:hover,
    .navbar-brand:focus {
        color: #ffffff;
    }

.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

    .brand-icon svg {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: #ffffff;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.btn-header {
    padding: 10px 19px;
    border-radius: 11px;
    background: #ffffff;
    color: var(--color-secondary);
    font-weight: 700;
    border: 1px solid #ffffff;
    transition: all 0.2s ease;
}

    .btn-header:hover,
    .btn-header:focus {
        background: #e2e8f0;
        color: var(--color-secondary);
        transform: translateY(-1px);
    }

.hero-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0 125px;
    background: radial-gradient(circle at 90% 10%, rgba(59, 130, 246, 0.28), transparent 34%), radial-gradient(circle at 5% 80%, rgba(6, 182, 212, 0.15), transparent 28%), linear-gradient(145deg, #0f172a 0%, #172554 52%, #0f172a 100%);
    color: #ffffff;
}

    .hero-section::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.06;
        background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
        background-size: 48px 48px;
        pointer-events: none;
    }

    .hero-section .container {
        position: relative;
        z-index: 2;
    }

.hero-badge,
.section-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-badge {
    margin-bottom: 24px;
    background: rgba(59, 130, 246, 0.18);
    border: 1px solid rgba(147, 197, 253, 0.28);
    color: #bfdbfe;
}

.hero-title {
    max-width: 760px;
    margin: 0;
    font-size: clamp(1.80rem, 4.0vw, 4.0rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

    .hero-title span {
        display: block;
        color: #67e8f9;
    }

.hero-description {
    max-width: 660px;
    margin: 26px 0 0;
    color: #cbd5e1;
    font-size: 1.18rem;
    line-height: 1.75;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 13px 25px;
    margin-top: 33px;
}

.hero-feature {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #e2e8f0;
    font-size: 0.94rem;
    font-weight: 600;
}

.feature-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.17);
    color: #6ee7b7;
    font-size: 0.82rem;
}

.hero-security-card {
    position: relative;
    max-width: 390px;
    min-height: 390px;
    margin-left: auto;
    overflow: hidden;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(18px);
}

.security-visual {
    position: relative;
    height: 285px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.security-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(103, 232, 249, 0.18);
}

.security-circle-large {
    width: 240px;
    height: 240px;
}

.security-circle-medium {
    width: 175px;
    height: 175px;
    border-color: rgba(147, 197, 253, 0.25);
}

.security-shield {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 118px;
    border-radius: 35px;
    background: linear-gradient(145deg, #2563eb, #06b6d4);
    box-shadow: 0 25px 50px rgba(37, 99, 235, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    transform: rotate(-4deg);
}

    .security-shield svg {
        width: 68px;
        height: 68px;
        fill: none;
        stroke: #ffffff;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.security-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 30px 30px;
}

    .security-card-text strong {
        font-size: 1.05rem;
    }

    .security-card-text span {
        color: #cbd5e1;
        font-size: 0.9rem;
    }

.analyzer-section {
    position: relative;
    z-index: 5;
    margin-top: -68px;
    padding-bottom: 80px;
}

.analyzer-card {
    padding: 38px;
    border-radius: var(--border-radius);
    background: var(--color-surface);
    border: 1px solid rgba(219, 227, 239, 0.8);
    box-shadow: var(--shadow-large);
}

.analyzer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 32px;
}

.section-label {
    margin-bottom: 10px;
    background: #dbeafe;
    color: #1d4ed8;
}

.analyzer-header h2 {
    margin: 0;
    color: var(--color-secondary);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.analyzer-header p {
    margin: 9px 0 0;
    color: var(--color-muted);
    line-height: 1.6;
}

.analyzer-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.82rem;
    font-weight: 700;
}

    .analyzer-status span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #10b981;
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
    }

.form-section {
    margin-bottom: 24px;
}

.form-label-custom {
    display: block;
    margin-bottom: 9px;
    color: var(--color-secondary);
    font-weight: 700;
}

.form-select-custom,
.form-control-custom {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 13px;
    background-color: #ffffff;
    color: var(--color-text);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-select-custom {
    min-height: 52px;
}

.form-control-custom {
    min-height: 190px;
    padding: 16px 17px;
    line-height: 1.6;
    resize: vertical;
}

    .form-select-custom:focus,
    .form-control-custom:focus {
        border-color: #60a5fa;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
    }

    .form-control-custom::placeholder {
        color: #94a3b8;
    }

.field-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 7px;
    color: #94a3b8;
    font-size: 0.78rem;
}

.validation-summary {
    color: var(--color-danger);
}

.btn-analyze {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 100%;
    min-height: 57px;
    border: none;
    border-radius: 13px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
    transition: all 0.2s ease;
}

    .btn-analyze:hover,
    .btn-analyze:focus {
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 15px 34px rgba(37, 99, 235, 0.3);
    }

    .btn-analyze svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

.form-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 17px;
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

    .form-warning svg {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        fill: none;
        stroke: #64748b;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

.result-panel {
    margin-top: 31px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-small);
}

.result-panel--alto {
    --risk-color: var(--color-danger);
    --risk-background: #fef2f2;
    --risk-border: #fecaca;
}

.result-panel--medio {
    --risk-color: var(--color-warning);
    --risk-background: #fffbeb;
    --risk-border: #fde68a;
}

.result-panel--bajo {
    --risk-color: var(--color-success);
    --risk-background: #ecfdf5;
    --risk-border: #a7f3d0;
}

.result-header {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 28px 31px 22px;
    background: var(--risk-background);
    border-bottom: 1px solid var(--risk-border);
}

.risk-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    border-radius: 15px;
    background: var(--risk-color);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 900;
}

.result-title {
    flex: 1;
}

    .result-title span {
        color: var(--color-muted);
        font-size: 0.79rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .result-title h2 {
        margin: 2px 0 0;
        color: var(--risk-color);
        font-size: 1.5rem;
        font-weight: 800;
    }

.result-score {
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: var(--color-muted);
}

    .result-score strong {
        color: var(--risk-color);
        font-size: 2rem;
        line-height: 1;
    }

.risk-meter {
    height: 8px;
    background: #e2e8f0;
}

.risk-meter-value {
    height: 100%;
    min-width: 2%;
    background: var(--risk-color);
    transition: width 0.5s ease;
}

.result-summary {
    margin: 0;
    padding: 26px 31px;
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.65;
    border-bottom: 1px solid var(--color-border);
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.result-section {
    padding: 29px 31px;
}

    .result-section + .result-section {
        border-left: 1px solid var(--color-border);
    }

.result-section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

    .result-section-title svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: var(--risk-color);
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .result-section-title h3 {
        margin: 0;
        color: var(--color-secondary);
        font-size: 1rem;
        font-weight: 800;
    }

.result-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .result-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: var(--color-text);
        font-size: 0.91rem;
        line-height: 1.55;
    }

        .result-list li > span {
            flex-shrink: 0;
            width: 7px;
            height: 7px;
            margin-top: 7px;
            border-radius: 50%;
            background: var(--risk-color);
        }

.recommendation-list li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.68rem;
    font-weight: 900;
}

.empty-result {
    padding: 13px 15px;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.result-disclaimer {
    padding: 17px 31px;
    background: #f8fafc;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.how-it-works-section {
    padding: 85px 0 100px;
    background: #ffffff;
}

.section-heading {
    max-width: 630px;
    margin: 0 auto 46px;
    text-align: center;
}

    .section-heading h2 {
        margin: 0;
        color: var(--color-secondary);
        font-size: 2.25rem;
        font-weight: 800;
        letter-spacing: -0.035em;
    }

    .section-heading p {
        margin: 13px 0 0;
        color: var(--color-muted);
    }

.step-card {
    height: 100%;
    padding: 29px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--shadow-small);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .step-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
    }

.step-number {
    display: block;
    margin-bottom: 26px;
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.step-card h3 {
    margin: 0;
    color: var(--color-secondary);
    font-size: 1.1rem;
    font-weight: 800;
}

.step-card p {
    margin: 12px 0 0;
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

.site-footer {
    padding: 48px 0 25px;
    background: var(--color-secondary);
    color: #cbd5e1;
}

.site-footer .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 28px;
    align-items: start;
}

.footer-content {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-content strong {
    display: block;
    margin-bottom: 11px;
    color: #ffffff;
    font-size: 1rem;
}

.footer-content p {
    max-width: 570px;
    margin: 0;
    color: #94a3b8;
    font-size: 0.87rem;
    line-height: 1.65;
}

.footer-disclaimer {
    justify-self: end;
    max-width: 440px;
    color: #94a3b8;
    font-size: 0.82rem;
    line-height: 1.65;
}

.footer-bottom {
    grid-column: 1;
    align-self: center;
    padding-top: 23px;
    color: #94a3b8;
    font-size: 0.78rem;
}

.footer-legal-links {
    grid-column: 2;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 22px;
    margin: 0;
    padding-top: 23px;
}

.footer-legal-links a {
    color: #e2e8f0;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    opacity: 0.92;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus {
    color: #ffffff;
    text-decoration: underline;
    opacity: 1;
}

.error-page {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding: 80px 0;
}

.error-card {
    max-width: 620px;
    margin: auto;
    padding: 45px;
    border-radius: var(--border-radius);
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-large);
    text-align: center;
}

    .error-card h1 {
        color: var(--color-secondary);
        font-weight: 800;
    }

    .error-card p {
        color: var(--color-muted);
    }

@media (max-width: 991px) {
    .hero-section {
        padding: 70px 0 115px;
    }

    .hero-security-card {
        margin: 0 auto;
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 11px;
}

.btn-install-app {
    padding: 10px 17px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 11px;
    background: transparent;
    color: #ffffff;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-install-app:hover,
.btn-install-app:focus {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

button,
select,
textarea,
input {
    touch-action: manipulation;
}

.analyzed-links {
    padding: 30px;
    border-top: 1px solid var(--color-border);
    background: #ffffff;
}

.analyzed-links > h3 {
    margin: 0 0 18px;
    color: var(--color-secondary);
    font-size: 1.05rem;
    font-weight: 800;
}

.analyzed-links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.analyzed-link {
    --link-risk-color: var(--color-success);
    padding: 20px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--link-risk-color);
    border-radius: 14px;
    background: #f8fafc;
}

.analyzed-link--medio {
    --link-risk-color: var(--color-warning);
}

.analyzed-link--alto {
    --link-risk-color: var(--color-danger);
}

.analyzed-link-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.analyzed-link-header > div:first-child {
    min-width: 0;
}

.analyzed-link-header span {
    display: block;
    margin-bottom: 4px;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.analyzed-link-header strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--color-secondary);
    font-size: 1rem;
}

.analyzed-link-score {
    flex-shrink: 0;
    padding: 5px 9px;
    border-radius: 9px;
    background: #ffffff;
    color: var(--link-risk-color);
    font-size: 0.85rem;
    font-weight: 800;
}

.analyzed-link-data {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.analyzed-link-data span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 700;
}

.rdap-result {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #dbe3ef;
    border-radius: 11px;
    background: #ffffff;
}

.rdap-result strong {
    color: var(--color-secondary);
    font-size: 0.82rem;
}

.rdap-result span {
    display: block;
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.analyzed-link p {
    margin: 15px 0 0;
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.analyzed-link ul {
    margin: 15px 0 0;
    padding-left: 19px;
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.analyzed-link li + li {
    margin-top: 6px;
}

@media (max-width: 767px) {
    .site-header .navbar {
        min-height: 68px;
    }

    .brand-text {
        font-size: 0.9rem;
    }

    .brand-icon {
        width: 38px;
        height: 38px;
    }

    .btn-header {
        display: none;
    }

    .hero-section {
        padding: 55px 0 105px;
    }

    .hero-title {
        font-size: 2.12rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-security-card {
        min-height: 330px;
    }

    .security-visual {
        height: 235px;
    }

    .analyzer-section {
        margin-top: -55px;
    }

    .analyzer-card {
        padding: 25px 20px;
        border-radius: 17px;
    }

    .analyzer-header {
        display: block;
    }

    .analyzer-status {
        margin-top: 18px;
    }

    .field-footer {
        display: block;
    }

    .field-footer > span {
        display: block;
        margin-top: 5px;
    }

    .result-header {
        flex-wrap: wrap;
        padding: 23px 20px;
    }

    .result-score {
        width: 100%;
        padding-left: 66px;
    }

    .result-summary {
        padding: 22px 20px;
    }

    .result-grid {
        grid-template-columns: 1fr;
    }

    .result-section {
        padding: 24px 20px;
    }

    .result-section + .result-section {
        border-top: 1px solid var(--color-border);
        border-left: none;
    }

    .result-disclaimer {
        padding: 17px 20px;
    }

    .how-it-works-section {
        padding: 65px 0 75px;
    }

    .site-footer .container {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-column: 1;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .footer-disclaimer {
        justify-self: start;
    }

    .footer-bottom {
        grid-column: 1;
        text-align: center;
    }

    .footer-legal-links {
        grid-column: 1;
        justify-content: center;
        padding-top: 16px;
    }

    .header-actions {
        margin-left: auto;
    }

    .btn-install-app {
        padding: 9px 12px;
        font-size: 0.78rem;
    }

    .form-select-custom,
    .form-control-custom {
        font-size: 16px;
    }

    .btn-analyze {
        min-height: 60px;
    }

    .analyzed-links {
        padding: 24px 20px;
    }

    .analyzed-links-grid {
        grid-template-columns: 1fr;
    }

    .analyzed-link {
        padding: 17px;
    }
}

@media (max-width: 480px) {
    .btn-install-app {
        max-width: 92px;
        padding: 8px 9px;
        line-height: 1.15;
    }
}
.result-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 31px;
    border-top: 1px solid var(--color-border);
    background: #ffffff;
}

.btn-share-result,
.btn-new-analysis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 10px 17px;
    border-radius: 11px;
    font-size: 0.88rem;
    font-weight: 800;
    transition: all 0.2s ease;
}

.btn-share-result {
    gap: 9px;
    border: 0;
    background: var(--color-primary);
    color: #ffffff;
}

    .btn-share-result:hover,
    .btn-share-result:focus {
        background: var(--color-primary-dark);
        color: #ffffff;
        transform: translateY(-1px);
    }

    .btn-share-result svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.btn-new-analysis {
    border: 1px solid var(--color-border);
    background: #ffffff;
    color: var(--color-secondary);
}

    .btn-new-analysis:hover,
    .btn-new-analysis:focus {
        border-color: #94a3b8;
        background: #f8fafc;
        color: var(--color-secondary);
    }

.share-result-status {
    margin-left: auto;
    color: var(--color-success);
    font-size: 0.82rem;
    font-weight: 700;
}

.share-result-status--error {
    color: var(--color-danger);
}

#resultadoAnalisis {
    scroll-margin-top: 95px;
}

@media (max-width: 767px) {
    .result-actions {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
    }

    .btn-share-result,
    .btn-new-analysis {
        width: 100%;
        min-height: 52px;
    }

    .share-result-status {
        margin-left: 0;
        text-align: center;
    }
}
.result-feedback {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 31px;
    border-top: 1px solid var(--color-border);
    background: #f8fafc;
}

    .result-feedback > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 3px;
        margin-right: auto;
    }

    .result-feedback strong {
        color: var(--color-secondary);
        font-size: 0.92rem;
    }

    .result-feedback span {
        color: var(--color-muted);
        font-size: 0.78rem;
    }

.feedback-actions {
    display: flex;
    gap: 9px;
}

.feedback-button {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--color-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

    .feedback-button:hover,
    .feedback-button:focus {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

.feedback-button--selected {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #ffffff;
}

    .feedback-button--selected:hover,
    .feedback-button--selected:focus {
        color: #ffffff;
    }

.feedback-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.feedback-status {
    color: var(--color-success);
    font-size: 0.78rem;
    font-weight: 700;
}

.feedback-status--error {
    color: var(--color-danger);
}

@media (max-width: 767px) {
    .result-feedback {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
    }

    .feedback-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .feedback-button {
        width: 100%;
        min-height: 49px;
    }

    .feedback-status {
        text-align: center;
    }
}
.limit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    border-radius: 20px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 2rem;
    font-weight: 900;
}
.community-report {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 1fr);
    align-items: center;
    gap: 20px;
    padding: 23px 31px;
    border-top: 1px solid var(--color-border);
    background: #fffaf0;
}

.community-report-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .community-report-copy strong {
        color: var(--color-secondary);
        font-size: 0.94rem;
    }

    .community-report-copy span {
        color: var(--color-muted);
        font-size: 0.79rem;
        line-height: 1.5;
    }

.community-report-controls {
    display: flex;
    gap: 9px;
}

.community-report-select {
    min-width: 0;
    min-height: 43px;
    flex: 1;
    padding: 8px 11px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--color-text);
    font-size: 0.8rem;
}

    .community-report-select:focus {
        border-color: var(--color-primary);
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.community-report-button {
    flex-shrink: 0;
    min-height: 43px;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: #c2410c;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
}

    .community-report-button:hover,
    .community-report-button:focus {
        background: #9a3412;
    }

    .community-report-button:disabled {
        cursor: wait;
        opacity: 0.7;
    }

.community-report-button--registered {
    background: var(--color-success);
}
    .community-report-button--registered:disabled {
        cursor: default;
        opacity: 1;
    }
    .community-report-button--registered:hover,
    .community-report-button--registered:focus {
        background: var(--color-success);
    }

.community-report-status {
    grid-column: 1 / -1;
    color: var(--color-success);
    font-size: 0.78rem;
    font-weight: 700;
}

.community-report-status--error {
    color: var(--color-danger);
}

@media (max-width: 767px) {
    .community-report {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .community-report-controls {
        flex-direction: column;
    }

    .community-report-select,
    .community-report-button {
        width: 100%;
        min-height: 50px;
        font-size: 0.86rem;
    }

    .community-report-status {
        text-align: center;
    }
}
.rdap-result--warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.rdap-signal-list {
    margin: 7px 0 0;
    padding-left: 18px;
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

    .rdap-signal-list li + li {
        margin-top: 4px;
    }
.legal-page {
    padding: 64px 0 82px;
    background: #f8fafc;
}

.legal-card {
    max-width: 940px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}

.legal-header {
    padding: 38px 44px 32px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(135deg, #f8fafc, #eff6ff);
}

.legal-label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-header h1 {
    margin: 0 0 10px;
    color: var(--color-secondary);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-weight: 850;
}

.legal-header p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.legal-content {
    padding: 18px 44px 42px;
}

    .legal-content section {
        padding: 25px 0;
        border-bottom: 1px solid var(--color-border);
    }

        .legal-content section:last-child {
            border-bottom: 0;
        }

    .legal-content h2 {
        margin: 0 0 12px;
        color: var(--color-secondary);
        font-size: 1.08rem;
        font-weight: 800;
    }

    .legal-content p,
    .legal-content li {
        color: var(--color-text);
        font-size: 0.9rem;
        line-height: 1.75;
    }

        .legal-content p:last-child {
            margin-bottom: 0;
        }

    .legal-content ul {
        padding-left: 21px;
    }

.legal-warning,
.legal-pending {
    margin-top: 17px;
    padding: 15px 17px;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.6;
}

.legal-warning {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.legal-pending {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #854d0e;
}

@media (max-width: 767px) {
    .legal-page {
        padding: 28px 0 52px;
    }

    .legal-card {
        border-radius: 16px;
    }

    .legal-header,
    .legal-content {
        padding-left: 21px;
        padding-right: 21px;
    }

    .legal-header {
        padding-top: 28px;
        padding-bottom: 25px;
    }

    .legal-content {
        padding-top: 8px;
        padding-bottom: 28px;
    }

    .footer-legal-links {
        flex-direction: column;
        align-items: center;
        gap: 9px;
    }
}
/* ETAPA 2A.1 - Capturas seguras */
.capture-card {
    margin-bottom: 24px;
    padding: 32px;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
}

.capture-card-header {
    margin-bottom: 24px;
}

.capture-card-header h2 {
    margin: 7px 0 8px;
    color: var(--color-secondary);
    font-size: 1.55rem;
    font-weight: 800;
}

.capture-card-header p {
    max-width: 760px;
    margin: 0;
    color: var(--color-text);
    line-height: 1.65;
}

.capture-error {
    margin-top: 22px;
    padding: 17px 19px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fef2f2;
}

.capture-error strong,
.capture-error span {
    display: block;
}

.capture-error strong {
    color: #991b1b;
    font-weight: 800;
}

.capture-error span {
    margin-top: 5px;
    color: #b91c1c;
    line-height: 1.5;
}

.capture-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 320px);
    gap: 24px;
    align-items: center;
    margin-top: 26px;
    padding: 20px;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    background: #f0fdf4;
}

.capture-result strong,
.capture-result span {
    display: block;
}

.capture-result strong {
    color: #166534;
    font-weight: 800;
}

.capture-result span {
    margin-top: 5px;
    color: #3f6212;
    font-size: 0.9rem;
}

.capture-result img {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 10px;
    background: #ffffff;
}

@media (max-width: 767px) {
    .capture-card {
        padding: 22px;
        border-radius: 16px;
    }

    .capture-result {
        grid-template-columns: 1fr;
    }
}


.audio-card {
    margin-top: 24px;
}

.audio-result {
    margin-top: 26px;
    padding: 20px;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    background: #f0fdf4;
}

.audio-result strong,
.audio-result span {
    display: block;
}

.audio-result strong {
    color: #166534;
    font-weight: 800;
}

.audio-result span {
    margin-top: 5px;
    color: #3f6212;
    font-size: 0.9rem;
}


.audio-recorder {
    margin: 18px 0 22px;
    padding: 18px;
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    background: #f8fafc;
}

.audio-consent {
    margin-bottom: 16px;
}

.audio-consent .form-check-label {
    color: var(--color-text);
    line-height: 1.5;
}

.audio-recorder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.audio-recorder-time {
    min-width: 110px;
    color: var(--color-secondary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.audio-recorder-status {
    margin-top: 13px;
    color: #475569;
    line-height: 1.5;
}

.audio-recorder-status-error {
    color: #b91c1c;
    font-weight: 700;
}

.audio-preview {
    width: 100%;
    margin-top: 14px;
}


/* Etapa 2E.1 */
.header-actions {
    margin-left: auto;
}

.header-create-account {
    margin-left: 1rem;
}

.phone-identification {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.phone-identification h3 {
    margin-bottom: 0.75rem;
}

.phone-identification p:last-child {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .header-create-account {
        margin-left: 0.5rem;
    }
}

/* Etapa 2G.1 — PWA móvil mejorada */
.site-header .navbar .container {
    display: flex;
    align-items: center;
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.header-create-account {
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .site-header .navbar {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }

    .site-header .navbar .container {
        gap: 0.75rem;
    }

    .navbar-brand {
        min-width: 0;
        margin-right: 0;
    }

    .brand-text {
        display: inline-block;
        max-width: 10.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-actions {
        flex-shrink: 0;
        margin-left: auto;
    }

    .header-create-account,
    .btn-install-app {
        min-height: 44px;
        padding: 0.55rem 0.8rem;
        font-size: 0.9rem;
    }

    .capture-card,
    .analyzer-card {
        scroll-margin-top: 5rem;
    }

    input[type="file"] {
        min-height: 48px;
    }

    .btn-analyze,
    .audio-recorder-actions .btn {
        min-height: 46px;
    }
}

@media (max-width: 420px) {
    .brand-text {
        max-width: 7.5rem;
    }

    .header-create-account {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .btn-install-app:not([hidden]) + .header-create-account {
        display: none;
    }
}

.pwa-standalone body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Etapa 2 - Dashboard interno de API */
.admin-api-login,
.admin-api-dashboard {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.admin-api-login-card {
    max-width: 520px;
    margin: 0 auto;
    padding: 2rem;
    border: 1px solid #dbe3ef;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.admin-api-heading,
.admin-api-client-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-api-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.admin-api-summary article,
.admin-api-client-card {
    border: 1px solid #dbe3ef;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.admin-api-summary article {
    padding: 1.25rem;
}

.admin-api-summary span {
    display: block;
    color: #64748b;
}

.admin-api-summary strong {
    display: block;
    margin-top: .25rem;
    font-size: 1.8rem;
}

.admin-api-clients {
    display: grid;
    gap: 1rem;
}

.admin-api-client-card {
    padding: 1.5rem;
}

.admin-api-client-card h2 {
    display: inline-block;
    margin-right: .5rem;
    font-size: 1.25rem;
}

.admin-api-client-card h3 {
    margin-top: 1.25rem;
    font-size: 1rem;
}

.admin-api-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.25rem 0 0;
}

.admin-api-metrics div {
    padding: .75rem;
    border-radius: .75rem;
    background: #f8fafc;
}

.admin-api-metrics dt {
    color: #64748b;
    font-size: .85rem;
    font-weight: 500;
}

.admin-api-metrics dd {
    margin: .2rem 0 0;
    font-weight: 700;
}

@media (max-width: 767px) {
    .admin-api-heading,
    .admin-api-client-header {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-api-summary,
    .admin-api-metrics {
        grid-template-columns: 1fr 1fr;
    }
}

/* Contacto y refuerzo responsive global */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
audio {
    max-width: 100%;
}

main,
.container,
.row,
[class*="col-"],
.analyzer-card,
.capture-card,
.result-panel,
.legal-card,
.admin-api-client-card {
    min-width: 0;
}

p,
li,
a,
strong,
span,
h1,
h2,
h3 {
    overflow-wrap: anywhere;
}

.contact-page {
    padding: 64px 0 82px;
    background: #f8fafc;
}

.contact-card {
    max-width: 760px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}

.contact-header {
    padding: 38px 44px 31px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(135deg, #f8fafc, #eff6ff);
}

.contact-label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-header h1 {
    margin: 0 0 12px;
    color: var(--color-secondary);
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    font-weight: 850;
    letter-spacing: -0.035em;
}

.contact-header p {
    max-width: 620px;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.7;
}

.contact-content {
    padding: 34px 44px 42px;
}

.contact-content h2 {
    margin: 0 0 10px;
    color: var(--color-secondary);
    font-size: 1.15rem;
    font-weight: 800;
}

.contact-content p {
    margin: 0;
    color: var(--color-text);
    line-height: 1.7;
}

.contact-email-box,
.contact-pending {
    margin-top: 24px;
    padding: 20px;
    border-radius: 14px;
}

.contact-email-box {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
}

.contact-email-box strong,
.contact-email-box span {
    display: block;
}

.contact-email-box strong {
    color: var(--color-secondary);
    font-size: 0.9rem;
}

.contact-email-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    padding: 11px 17px;
    border-radius: 12px;
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 800;
    text-align: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.contact-email-link:hover,
.contact-email-link:focus {
    background: var(--color-primary-dark);
    color: #ffffff;
    transform: translateY(-1px);
}

.contact-pending {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #854d0e;
    font-size: 0.9rem;
    line-height: 1.65;
}

.contact-back {
    display: inline-flex;
    align-items: center;
    margin-top: 26px;
    color: var(--color-primary);
    font-weight: 750;
}

.contact-back:hover,
.contact-back:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .contact-page {
        padding: 28px 0 52px;
    }

    .contact-card {
        border-radius: 16px;
    }

    .contact-header,
    .contact-content {
        padding-left: 21px;
        padding-right: 21px;
    }

    .contact-header {
        padding-top: 28px;
        padding-bottom: 25px;
    }

    .contact-content {
        padding-top: 26px;
        padding-bottom: 30px;
    }

    .site-header .navbar .container {
        flex-wrap: nowrap;
    }

    .header-actions {
        min-width: 0;
    }

    .header-create-account,
    .btn-install-app {
        max-width: 132px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-api-summary,
    .admin-api-metrics {
        grid-template-columns: 1fr;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 380px) {
    .brand-text {
        max-width: 6.2rem;
    }

    .header-create-account,
    .btn-install-app {
        max-width: 104px;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        font-size: 0.78rem;
    }

    .analyzer-card,
    .capture-card {
        padding-left: 16px;
        padding-right: 16px;
    }

    .result-header,
    .result-summary,
    .result-section,
    .result-actions,
    .result-feedback,
    .community-report {
        padding-left: 16px;
        padding-right: 16px;
    }
}