/* ============================================================
   TEMA UTILIDAD
   Diseño moderno y minimalista para herramientas y calculadoras.
   Paleta: azul índigo limpio + grises slate + blanco
   ============================================================ */

/* ─── Variables ──────────────────────────────────────────── */
:root {
    --color-primario:      #2563eb;
    --color-primario-osc:  #1d4ed8;
    --color-primario-cla:  #eff6ff;
    --color-cta:           #2563eb;
    --color-cta-hover:     #1d4ed8;
    --color-texto:         #0f172a;
    --color-texto-suave:   #64748b;
    --color-fondo:         #ffffff;
    --color-fondo-alt:     #f8fafc;
    --color-borde:         #e2e8f0;
    --color-exito:         #16a34a;
    --color-advertencia:   #d97706;
    --fuente-cuerpo:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sombra-suave:        0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --sombra-media:        0 4px 16px rgba(15,23,42,.08);
    --radio-tarjeta:       12px;
    --radio-boton:         8px;
    --ancho-herramienta:   720px;
    --ancho-maximo:        1100px;
    --transicion:          .18s ease;
}

/* ─── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--fuente-cuerpo);
    color: var(--color-texto);
    background: var(--color-fondo);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Contenedor ─────────────────────────────────────────── */
.contenedor {
    width: 100%;
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 0 24px;
}

.contenedor--estrecho {
    max-width: var(--ancho-herramienta);
}

/* ─── HEADER ─────────────────────────────────────────────── */
.cabecera {
    background: #fff;
    border-bottom: 1px solid var(--color-borde);
    position: sticky;
    top: 0;
    z-index: 100;
}

.cabecera .contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    gap: 20px;
    min-width: 0; /* evita que el mega-menú empuje el selector de idioma fuera del viewport */
}

.cabecera__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.cabecera__nombre-sitio {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-texto);
    letter-spacing: -.025em;
}

/* Punto de color antes del nombre de sitio */
.cabecera__nombre-sitio::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--color-primario);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Cuando hay favicon inline, suprimir el punto */
.cabecera__nombre-sitio--sin-punto::before { display: none; }

/* Favicon inline en el header */
.cabecera__favicon-inline {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    margin-right: 7px;
    flex-shrink: 0;
    object-fit: contain;
}

/* ─── NAVEGACIÓN ─────────────────────────────────────────── */
.navegacion {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
}

.navegacion a {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-texto-suave);
    transition: background var(--transicion), color var(--transicion);
    text-decoration: none;
}

.navegacion a:hover {
    background: var(--color-fondo-alt);
    color: var(--color-texto);
    text-decoration: none;
}

.navegacion a.activo {
    color: var(--color-primario);
    background: var(--color-primario-cla);
}

/* ─── HERO ───────────────────────────────────────────────── */
.hero--utilidad {
    background: var(--color-fondo-alt);
    border-bottom: 1px solid var(--color-borde);
    padding: 56px 0 48px;
    text-align: center;
}

.hero__titulo {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-texto);
    letter-spacing: -.03em;
    margin-bottom: 14px;
}

/* Subrayado decorativo bajo el título */
.hero__titulo span {
    position: relative;
}
.hero__titulo span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 3px;
    background: var(--color-primario);
    opacity: .35;
    border-radius: 2px;
}

.hero__descripcion {
    font-size: 1.05rem;
    color: var(--color-texto-suave);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ─── ZONA DE HERRAMIENTA ────────────────────────────────── */
.zona-herramienta {
    padding: 48px 0 64px;
}

/* ─── TARJETA / PANEL ────────────────────────────────────── */
.panel {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-suave);
    padding: 36px 40px;
}

.panel--centrado {
    max-width: var(--ancho-herramienta);
    margin: 0 auto;
}

@media (max-width: 640px) {
    .panel { padding: 24px 20px; }
}

/* ─── FORMULARIO (estilos base para herramientas) ────────── */
.campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.campo label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-texto);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-size: .95rem;
    font-family: var(--fuente-cuerpo);
    color: var(--color-texto);
    background: #fff;
    transition: border-color var(--transicion), box-shadow var(--transicion);
    outline: none;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: var(--color-texto-suave);
    opacity: .7;
}

/* ─── BOTONES ─────────────────────────────────────────────── */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radio-boton);
    font-size: .95rem;
    font-weight: 600;
    font-family: var(--fuente-cuerpo);
    cursor: pointer;
    border: none;
    transition: background var(--transicion), box-shadow var(--transicion), transform var(--transicion);
    text-decoration: none;
}

.boton--primario {
    background: var(--color-cta);
    color: #fff;
}

.boton--primario:hover {
    background: var(--color-cta-hover);
    box-shadow: 0 4px 12px rgba(37,99,235,.3);
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}

.boton--primario:active {
    transform: translateY(0);
    box-shadow: none;
}

.boton--secundario {
    background: var(--color-fondo-alt);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
}

.boton--secundario:hover {
    background: var(--color-borde);
    text-decoration: none;
    color: var(--color-texto);
}

.boton--bloque { width: 100%; }

/* ─── RESULTADO (output de herramienta) ──────────────────── */
.resultado {
    background: var(--color-primario-cla);
    border: 1px solid rgba(37,99,235,.2);
    border-radius: var(--radio-tarjeta);
    padding: 24px 28px;
    margin-top: 24px;
}

.resultado__etiqueta {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-primario);
    margin-bottom: 6px;
}

.resultado__valor {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-texto);
    letter-spacing: -.03em;
    line-height: 1.1;
}

.resultado__nota {
    font-size: .85rem;
    color: var(--color-texto-suave);
    margin-top: 8px;
}

/* ─── CUADRÍCULA DE RESULTADOS ───────────────────────────── */
.cuadricula-resultados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.tarjeta-resultado {
    background: var(--color-fondo-alt);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 18px 16px;
    text-align: center;
}

.tarjeta-resultado__etiqueta {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-texto-suave);
    margin-bottom: 6px;
}

.tarjeta-resultado__valor {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-texto);
    letter-spacing: -.025em;
}

/* ─── SEPARADOR ──────────────────────────────────────────── */
.separador {
    border: none;
    border-top: 1px solid var(--color-borde);
    margin: 28px 0;
}

/* ─── ALERTA/AVISO ───────────────────────────────────────── */
.aviso {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: .9rem;
    line-height: 1.5;
}

.aviso--info {
    background: var(--color-primario-cla);
    border: 1px solid rgba(37,99,235,.2);
    color: #1e40af;
}

.aviso--exito {
    background: #f0fdf4;
    border: 1px solid rgba(22,163,74,.2);
    color: #166534;
}

.aviso--advertencia {
    background: #fffbeb;
    border: 1px solid rgba(217,119,6,.2);
    color: #92400e;
}

/* ─── PÁGINA ESTÁTICA ────────────────────────────────────── */
.pagina-estatica {
    padding: 56px 0 80px;
}

.pagina-estatica__cabecera {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-borde);
}

.pagina-estatica__titulo {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--color-texto);
    letter-spacing: -.025em;
    line-height: 1.2;
}

/* Tipografía del contenido HTML generado */
.pagina-estatica__cuerpo {
    font-size: .975rem;
    line-height: 1.8;
    color: var(--color-texto);
}

.pagina-estatica__cuerpo h2,
.pagina-estatica__cuerpo h3,
.pagina-estatica__cuerpo h4 {
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    margin-top: 36px;
    margin-bottom: 12px;
    color: var(--color-texto);
}

.pagina-estatica__cuerpo h2 { font-size: 1.35rem; }
.pagina-estatica__cuerpo h3 { font-size: 1.15rem; }
.pagina-estatica__cuerpo h4 { font-size: 1rem; }

.pagina-estatica__cuerpo p {
    margin-bottom: 16px;
}

.pagina-estatica__cuerpo a {
    color: var(--color-primario);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pagina-estatica__cuerpo ul,
.pagina-estatica__cuerpo ol {
    padding-left: 22px;
    margin-bottom: 16px;
}

.pagina-estatica__cuerpo li {
    margin-bottom: 8px;
}

.pagina-estatica__cuerpo strong {
    font-weight: 600;
    color: var(--color-texto);
}

/* ─── PIE DE PÁGINA ──────────────────────────────────────── */
.pie-pagina {
    border-top: 1px solid var(--color-borde);
    padding: 28px 0;
    margin-top: auto;
}

.pie-pagina .contenedor {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.pie-pagina p {
    font-size: .82rem;
    color: var(--color-texto-suave);
    text-align: center;
}

.pie-pagina a {
    color: var(--color-texto-suave);
    text-decoration: none;
    font-size: .82rem;
    transition: color var(--transicion);
}

.pie-pagina a:hover {
    color: var(--color-texto);
    text-decoration: none;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero--utilidad {
        padding: 40px 0 32px;
    }

    .hero__titulo {
        font-size: 1.75rem;
    }

    .cabecera .contenedor {
        height: 56px;
    }

    .navegacion a {
        padding: 5px 10px;
        font-size: .82rem;
    }
}

@media (max-width: 480px) {
    .contenedor { padding: 0 16px; }

    .navegacion {
        gap: 0;
    }

    .pagina-estatica {
        padding: 36px 0 56px;
    }
}

/* ─── ACCESIBILIDAD ──────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ─── UTILIDADES ─────────────────────────────────────────── */
.texto-centrado  { text-align: center; }
.texto-suave     { color: var(--color-texto-suave); }
.oculto          { display: none; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

/* ════════════════════════════════════════════════════════════
   MEGA-MENÚ PRINCIPAL
   ──────────────────────────────────────────────────────────
   Estructura:
     .nav-hamburger        — botón hamburger (solo móvil)
     #nav-mega             — contenedor flex (desktop) / side-drawer (móvil)
       .nav-mega__lista    — barra de ítems de nivel 1
       .nav-mega__panel    — dropdown / mega-panel
       .nav-idiomas        — selector de idioma
     .nav-overlay          — fondo semitransparente al abrir menú
   ════════════════════════════════════════════════════════════ */

/* ── Variables extra ────────────────────────────────────── */
:root {
    --altura-cabecera: 61px; /* 60px container + 1px border-bottom */
    --ancho-drawer:    320px;
    --z-overlay:       90;   /* DEBAJO del header (100) para no bloquear el nav */
    --z-panel:         110;  /* encima del header */
    --z-drawer:        150;
    --z-hamburger:     160;
}

/* ── Bloquear scroll cuando el drawer está abierto ─────── */
body.body--menu-abierto { overflow: hidden; }

/* ── HAMBURGER ──────────────────────────────────────────── */
.nav-hamburger {
    display: none;              /* oculto en desktop */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    z-index: var(--z-hamburger);
    transition: border-color var(--transicion), background var(--transicion);
}
.nav-hamburger:hover {
    background: var(--color-fondo-alt);
    border-color: var(--color-primario);
}
.nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-texto);
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
    transform-origin: center;
}
/* Animación → X cuando está abierto */
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── NAV-MEGA — contenedor principal ───────────────────── */
.nav-mega {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
    justify-content: flex-end;
}

/* Cabecera del drawer (solo visible en móvil) */
.nav-mega__drawer-header {
    display: none;
}

/* ── LISTA NIVEL 1 ──────────────────────────────────────── */
.nav-mega__lista {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* ── ÍTEM NIVEL 1 ───────────────────────────────────────── */
.nav-mega__item {
    position: static;   /* los panels son position:fixed, no necesitan relative */
}

/* ── BOTÓN NIVEL 1 ──────────────────────────────────────── */
.nav-mega__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 500;
    font-family: var(--fuente-cuerpo);
    color: var(--color-texto-suave);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transicion), color var(--transicion);
    line-height: 1;
}
.nav-mega__btn:hover,
.nav-mega__item--activo .nav-mega__btn {
    background: var(--color-fondo-alt);
    color: var(--color-primario);
}
.nav-mega__btn-svg {
    flex-shrink: 0;
    opacity: .7;
}
.nav-mega__chevron {
    flex-shrink: 0;
    transition: transform .18s ease;
}
.nav-mega__item--activo .nav-mega__chevron {
    transform: rotate(180deg);
}

/* ── PANEL DROPDOWN — base ──────────────────────────────── */
.nav-mega__panel {
    position: fixed;
    top: var(--altura-cabecera);
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
    box-shadow: 0 8px 32px rgba(15, 23, 42, .1);
    padding: 28px 0 32px;
    z-index: var(--z-panel);
    display: none;          /* JS añade .nav-mega__panel--visible */
}
/* La animación va en --visible para que se ejecute CADA VEZ que se abre */
.nav-mega__panel--visible {
    display: block;
    animation: panelEntrar .16s ease;
}

@keyframes panelEntrar {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Panel mega (4 columnas) */
.nav-mega__panel--mega .nav-mega__panel-inner {
    grid-template-columns: repeat(3, minmax(170px, 1fr)) minmax(180px, 220px);
}

/* ── PANEL INNER — grid de grupos ───────────────────────── */
.nav-mega__panel-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0 40px;
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── GRUPO DENTRO DEL PANEL ─────────────────────────────── */
.nav-mega__grupo {
    min-width: 0;
}
.nav-mega__grupo ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── TÍTULO DE GRUPO ────────────────────────────────────── */
.nav-mega__titulo-grupo {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-texto-suave);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-borde);
}
.nav-mega__grupo-emoji {
    font-size: .9rem;
    line-height: 1;
}

/* ── GRUPO "MÁS BUSCADAS" — separador visual ────────────── */
.nav-mega__grupo--populares {
    border-left: 1px solid var(--color-borde);
    padding-left: 32px;
}

/* ── ENLACE GENÉRICO DENTRO DEL PANEL ──────────────────── */
.nav-mega__enlace {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: .875rem;
    color: var(--color-texto);
    text-decoration: none;
    transition: background var(--transicion), color var(--transicion);
    margin-bottom: 1px;
}
.nav-mega__enlace:hover {
    background: var(--color-primario-cla);
    color: var(--color-primario);
    text-decoration: none;
}
.nav-mega__enlace em {
    font-style: normal;
    font-size: .75rem;
    color: var(--color-texto-suave);
    margin-left: 2px;
}

/* Enlace con tarjeta de formato (col Convertir) */
.nav-mega__enlace--fmt {
    align-items: center;
}
.nav-mega__enlace-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.nav-mega__enlace-texto strong {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-texto);
}
.nav-mega__enlace-texto small {
    font-size: .75rem;
    color: var(--color-texto-suave);
    font-weight: 400;
}
.nav-mega__enlace--fmt:hover .nav-mega__enlace-texto strong { color: var(--color-primario); }
.nav-mega__enlace--fmt:hover .nav-mega__enlace-texto small  { color: var(--color-primario); opacity: .75; }

/* Enlace "próximamente" — deshabilitado visualmente */
.nav-mega__enlace--pronto {
    opacity: .45;
    pointer-events: none;
    cursor: default;
}

/* Enlace con ícono emoji (herramientas) */
.nav-mega__enlace--tool {
    gap: 8px;
}
.nav-mega__tool-icon {
    font-size: .95rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ── FORMATO BADGES ─────────────────────────────────────── */
.fmt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 22px;
    padding: 0 7px;
    border-radius: 5px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    flex-shrink: 0;
    line-height: 1;
}
.fmt-badge--verde    { background: #dcfce7; color: #15803d; }
.fmt-badge--azul     { background: #dbeafe; color: #1d4ed8; }
.fmt-badge--morado   { background: #ede9fe; color: #6d28d9; }
.fmt-badge--amarillo { background: #fef3c7; color: #92400e; }
.fmt-badge--rojo     { background: #fee2e2; color: #b91c1c; }
.fmt-badge--gris     { background: #f1f5f9; color: #475569; }

/* ── LISTA DE CONVERSIONES POPULARES ───────────────────── */
.nav-mega__lista-conv {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.nav-mega__enlace--conv {
    display: block;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: .82rem;
    font-weight: 600;
    font-family: 'Courier New', 'Courier', monospace;
    color: var(--color-texto);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transicion), color var(--transicion);
}
.nav-mega__enlace--conv:hover {
    background: var(--color-primario-cla);
    color: var(--color-primario);
    text-decoration: none;
}

/* ── ENLACE "VER TODAS" ─────────────────────────────────── */
.nav-mega__ver-todo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--color-primario-cla);
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-primario);
    text-decoration: none;
    transition: background var(--transicion);
}
.nav-mega__ver-todo:hover {
    background: #dbeafe;
    text-decoration: none;
}

/* ── SELECTOR DE IDIOMA ─────────────────────────────────── */
.nav-idiomas {
    position: relative;
    margin-left: 10px;
    flex-shrink: 0;
}
.nav-idiomas__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 700;
    font-family: var(--fuente-cuerpo);
    color: var(--color-texto);
    cursor: pointer;
    letter-spacing: .03em;
    transition: background var(--transicion), border-color var(--transicion);
}
.nav-idiomas__btn:hover {
    background: var(--color-fondo-alt);
    border-color: var(--color-primario);
}
.nav-idiomas__etiqueta {
    font-size: .78rem;
    letter-spacing: .06em;
}
.nav-idiomas__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 165px;
    max-width: min(100vw - 24px, 280px);
    max-height: min(70vh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
    padding: 8px;
    list-style: none;
    z-index: var(--z-panel);
    display: none;
    animation: panelEntrar .15s ease;
}
.nav-idiomas__panel--visible { display: block; }
.nav-idiomas__opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    text-decoration: none;
    color: var(--color-texto);
    font-size: .875rem;
    transition: background var(--transicion);
}
.nav-idiomas__opcion:hover {
    background: var(--color-fondo-alt);
    text-decoration: none;
}
.nav-idiomas__opcion--activa {
    background: var(--color-primario-cla);
    color: var(--color-primario);
    font-weight: 600;
}
.nav-idiomas__cod {
    min-width: 24px;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .05em;
}
.nav-idiomas__nombre {
    font-size: .82rem;
    color: var(--color-texto-suave);
}
.nav-idiomas__opcion--activa .nav-idiomas__nombre { color: var(--color-primario); }

/* ── OVERLAY ────────────────────────────────────────────── */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* top empieza debajo del header para no cubrir el nav */
    top: var(--altura-cabecera);
    background: rgba(15, 23, 42, .30);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: var(--z-overlay);
    /* No bloquear eventos sobre el header (z-index mayor lo gestiona) */
    pointer-events: auto;
}
.nav-overlay--visible { display: block; }

/* ════════════════════════════════════════════════════════════
   MEGA-MENÚ — RESPONSIVE (≤ 768px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Mostrar hamburger */
    .nav-hamburger { display: flex; }

    /* Nav-mega se convierte en side-drawer por la derecha */
    .nav-mega {
        position: fixed;
        top: 0;
        right: 0;
        width: var(--ancho-drawer);
        max-width: 90vw;
        height: 100dvh;
        background: #fff;
        z-index: var(--z-drawer);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 24px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .26s cubic-bezier(.4,0,.2,1);
        box-shadow: -4px 0 32px rgba(15, 23, 42, .14);
        border-left: 1px solid var(--color-borde);
    }
    .nav-mega--abierto {
        transform: translateX(0);
    }

    /* Cabecera del drawer */
    .nav-mega__drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 60px;
        border-bottom: 1px solid var(--color-borde);
        flex-shrink: 0;
    }
    .nav-mega__drawer-titulo {
        font-weight: 700;
        font-size: .95rem;
        color: var(--color-texto);
        letter-spacing: -.02em;
    }
    .nav-mega__drawer-cerrar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background: var(--color-fondo-alt);
        border: 1px solid var(--color-borde);
        border-radius: 7px;
        cursor: pointer;
        color: var(--color-texto);
        transition: background var(--transicion);
    }
    .nav-mega__drawer-cerrar:hover { background: var(--color-borde); }

    /* Lista de ítems en columna */
    .nav-mega__lista {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 0;
    }
    .nav-mega__item {
        border-bottom: 1px solid var(--color-fondo-alt);
    }
    .nav-mega__btn {
        width: 100%;
        justify-content: space-between;
        padding: 13px 20px;
        font-size: .95rem;
        color: var(--color-texto);
        border-radius: 0;
    }
    .nav-mega__btn:hover,
    .nav-mega__item--activo .nav-mega__btn {
        background: var(--color-primario-cla);
        color: var(--color-primario);
    }

    /* Panels: posición estática dentro del drawer */
    .nav-mega__panel {
        position: static;
        border: none;
        box-shadow: none;
        padding: 0 0 8px;
        animation: none;
        background: var(--color-fondo-alt);
    }
    .nav-mega__panel--visible { display: block; }
    .nav-mega__panel-inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }
    .nav-mega__panel--mega .nav-mega__panel-inner {
        grid-template-columns: 1fr;
    }
    .nav-mega__grupo {
        padding: 12px 20px 8px;
        border-bottom: 1px solid var(--color-borde);
    }
    .nav-mega__grupo:last-child { border-bottom: none; }
    .nav-mega__grupo--populares {
        border-left: none;
        padding-left: 20px;
    }
    .nav-mega__lista-conv {
        grid-template-columns: 1fr 1fr;
    }

    /* Selector de idioma en el drawer */
    .nav-idiomas {
        margin: 16px 20px 0;
    }
    .nav-idiomas__panel {
        position: static;
        box-shadow: none;
        border-radius: 8px;
        animation: none;
        margin-top: 8px;
    }
}

@media (max-width: 400px) {
    .nav-mega__lista-conv {
        grid-template-columns: 1fr;
    }
}

/* ─── HERO — HERRAMIENTAS ─────────────────────────────────── */
.hero--herramienta {
    background: var(--color-fondo-alt);
    border-bottom: 1px solid var(--color-borde);
    padding: 48px 0 40px;
}

.hero--herramienta .hero__titulo {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
    margin-bottom: 14px;
    color: var(--color-texto);
}

.hero--herramienta .hero__titulo strong {
    color: var(--color-primario);
}

.hero--herramienta .hero__descripcion {
    font-size: 1rem;
    color: var(--color-texto-suave);
    max-width: 640px;
    line-height: 1.7;
}

/* ─── MIGA DE PAN ────────────────────────────────────────── */
.miga-pan {
    margin-bottom: 20px;
}

.miga-pan__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .8125rem;
    color: var(--color-texto-suave);
}

.miga-pan__item + .miga-pan__item::before {
    content: '/';
    margin-right: 4px;
    color: var(--color-borde);
}

.miga-pan__enlace {
    color: var(--color-texto-suave);
    text-decoration: none;
}

.miga-pan__enlace:hover {
    color: var(--color-primario);
    text-decoration: underline;
}

.miga-pan__item--actual {
    color: var(--color-texto);
    font-weight: 500;
}

/* ─── ZONA HERRAMIENTA ───────────────────────────────────── */
.zona-herramienta {
    padding: 48px 0;
}

/* ─── CONVERSOR JPG → WEBP ───────────────────────────────── */
.conversor-webp {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-tarjeta);
    padding: 32px;
    box-shadow: var(--sombra-suave);
}

/* Alerta de error o aviso */
.conversor-webp__alerta {
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: .875rem;
    margin-bottom: 1.25rem;
}

.conversor-webp__alerta--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.conversor-webp__alerta--aviso {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* Dropzone */
.conversor-webp__dropzone {
    border: 2px dashed var(--color-borde);
    border-radius: var(--radio-tarjeta);
    background: var(--color-fondo-alt);
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transicion), background var(--transicion);
    position: relative;
    user-select: none;
}

.conversor-webp__dropzone:hover,
.conversor-webp__dropzone--activa {
    border-color: var(--color-primario);
    background: var(--color-primario-cla);
}

.conversor-webp__dropzone:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 3px;
}

.conversor-webp__dropzone-icono {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .5rem;
    line-height: 1;
}

.conversor-webp__dropzone-texto {
    color: var(--color-texto);
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0;
}

.conversor-webp__dropzone-meta {
    font-size: .8125rem;
    color: var(--color-texto-suave);
}

/* Input oculto que activa el selector de archivos */
.conversor-webp__input-oculto {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 0;
}

/* Lista de archivos */
.conversor-webp__lista {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.conversor-webp__archivo {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--color-fondo-alt);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: .5rem .85rem;
    font-size: .875rem;
    color: var(--color-texto);
    animation: aparecer .15s ease;
}

@keyframes aparecer {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.conversor-webp__archivo-icono {
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
}

.conversor-webp__archivo-nombre {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
}

.conversor-webp__archivo-tamano {
    color: var(--color-texto-suave);
    font-size: .8rem;
    flex-shrink: 0;
}

.conversor-webp__archivo-eliminar {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-texto-suave);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 .2rem;
    flex-shrink: 0;
    border-radius: 4px;
    transition: color var(--transicion);
}

.conversor-webp__archivo-eliminar:hover {
    color: #b91c1c;
}

/* Control de calidad */
.conversor-webp__calidad {
    margin-top: 1.5rem;
}

.conversor-webp__calidad-etiqueta {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: .5rem;
}

.conversor-webp__calidad-control {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.conversor-webp__slider {
    flex: 1;
    min-width: 140px;
    accent-color: var(--color-primario);
    cursor: pointer;
}

.conversor-webp__calidad-valor {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primario);
    min-width: 3ch;
    text-align: center;
}

.conversor-webp__calidad-unidad {
    font-size: .875rem;
    color: var(--color-texto-suave);
}

.conversor-webp__calidad-ayuda {
    font-size: .8125rem;
    color: var(--color-texto-suave);
    margin-top: .5rem;
}

/* Barra de progreso indeterminada */
.conversor-webp__progreso {
    height: 4px;
    background: var(--color-borde);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 1rem;
}

.conversor-webp__progreso-relleno {
    height: 100%;
    background: var(--color-primario);
    width: 60%;
    animation: progreso-indeterminado 1.2s linear infinite;
}

@keyframes progreso-indeterminado {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* Acciones */
.conversor-webp__acciones {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.conversor-webp__btn-convertir {
    background: var(--color-primario);
    color: #fff;
    border: none;
    border-radius: var(--radio-boton);
    padding: .75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transicion), opacity var(--transicion);
    white-space: nowrap;
}

.conversor-webp__btn-convertir:hover:not(:disabled) {
    background: var(--color-primario-osc);
}

.conversor-webp__btn-convertir:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.conversor-webp__contador {
    font-size: .875rem;
    color: var(--color-texto-suave);
}

/* Nota de privacidad */
.conversor-webp__nota {
    margin-top: 1.25rem;
    background: var(--color-primario-cla);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: .8125rem;
    color: #1d4ed8;
    line-height: 1.5;
}

/* ─── CONTENIDO SEO ──────────────────────────────────────── */
.contenido-seo {
    background: var(--color-fondo-alt);
    border-top: 1px solid var(--color-borde);
    padding: 56px 0 64px;
}

.contenido-seo__seccion {
    margin-bottom: 3rem;
}

.contenido-seo__seccion:last-child {
    margin-bottom: 0;
}

.contenido-seo__h2 {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: 1rem;
    letter-spacing: -.02em;
    border-bottom: 2px solid var(--color-primario-cla);
    padding-bottom: .5rem;
}

.contenido-seo__lista {
    padding-left: 1.3rem;
    color: var(--color-texto);
    line-height: 1.8;
    margin-top: .75rem;
}

.contenido-seo__lista li {
    margin-bottom: .5rem;
}

.contenido-seo__pasos {
    padding-left: 1.3rem;
    counter-reset: none;
    color: var(--color-texto);
    line-height: 1.8;
    margin-top: .75rem;
}

.contenido-seo__pasos li {
    margin-bottom: .75rem;
}

/* Tabla comparativa */
.tabla-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radio-tarjeta);
    border: 1px solid var(--color-borde);
}

.tabla-comparativa {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    min-width: 480px;
}

.tabla-comparativa th,
.tabla-comparativa td {
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
}

.tabla-comparativa thead th {
    background: var(--color-primario-cla);
    color: var(--color-primario-osc);
    font-weight: 700;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tabla-comparativa tbody tr:last-child td {
    border-bottom: none;
}

.tabla-comparativa tbody tr:hover td {
    background: var(--color-fondo-alt);
}

/* FAQ */
.faq-seccion__item {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-tarjeta);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--sombra-suave);
}

.faq-seccion__pregunta {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: .5rem;
    line-height: 1.4;
}

.faq-seccion__respuesta p {
    font-size: .9375rem;
    color: var(--color-texto-suave);
    line-height: 1.7;
    margin: 0;
}

/* Responsive ajustes conversor */
@media (max-width: 600px) {
    .conversor-webp {
        padding: 20px 16px;
    }

    .conversor-webp__acciones {
        flex-direction: column;
        align-items: stretch;
    }

    .conversor-webp__btn-convertir {
        width: 100%;
        text-align: center;
    }

    .hero--herramienta {
        padding: 32px 0 28px;
    }

    .zona-herramienta {
        padding: 28px 0;
    }

    .contenido-seo {
        padding: 40px 0 48px;
    }
}

/* ============================================================
   HUB DE CASOS DE USO (sección de navegación en la madre)
   ============================================================ */

.hub-casos {
    background: #eff6ff;
    border-top: 1px solid #dbeafe;
    border-bottom: 1px solid #dbeafe;
    padding: 56px 0 60px;
}

.hub-casos__titulo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-texto, #1e293b);
    text-align: center;
    margin: 0 0 10px;
}

.hub-casos__subtitulo {
    text-align: center;
    color: var(--color-texto-secundario, #64748b);
    margin: 0 0 36px;
    font-size: 1rem;
}

.hub-casos__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.hub-casos__tarjeta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 14px 18px;
    background: #fff;
    border: 1.5px solid #dbeafe;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    gap: 8px;
}

.hub-casos__tarjeta:hover,
.hub-casos__tarjeta:focus-visible {
    border-color: var(--color-primario, #2563eb);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.14);
    transform: translateY(-3px);
    outline: none;
}

.hub-casos__icono {
    font-size: 2rem;
    line-height: 1;
}

.hub-casos__nombre {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-texto, #1e293b);
    line-height: 1.3;
}

.hub-casos__desc {
    font-size: 0.775rem;
    color: var(--color-texto-secundario, #64748b);
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .hub-casos__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .hub-casos__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .hub-casos__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .hub-casos {
        padding: 40px 0 44px;
    }

    .hub-casos__tarjeta {
        padding: 16px 10px 14px;
    }
}

/* ============================================================
   ENLACES INTERNOS (sección de navegación en páginas hija)
   ============================================================ */

.enlaces-internos {
    padding: 48px 0 56px;
    background: var(--color-fondo-alt, #f8fafc);
    border-top: 1px solid var(--color-borde, #e2e8f0);
}

.enlaces-internos__titulo {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-texto-secundario, #475569);
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.enlaces-internos__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.enlace-herramienta {
    display: inline-flex;
    flex-direction: column;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--color-borde, #e2e8f0);
    border-radius: var(--radio-tarjeta, 12px);
    text-decoration: none;
    color: var(--color-texto, #1e293b);
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    min-width: 160px;
    flex: 0 1 auto;
}

.enlace-herramienta:hover,
.enlace-herramienta:focus-visible {
    border-color: var(--color-primario, #2563eb);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
    transform: translateY(-2px);
    outline: none;
}

.enlace-herramienta--madre {
    border-color: var(--color-primario, #2563eb);
    background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
}

.enlace-herramienta--madre:hover,
.enlace-herramienta--madre:focus-visible {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
}

.enlace-herramienta__titulo {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primario, #2563eb);
    margin-bottom: 2px;
}

.enlace-herramienta__desc {
    font-size: 0.8rem;
    color: var(--color-texto-secundario, #64748b);
    line-height: 1.4;
}

.enlaces-internos__ver-todos {
    margin: 20px 0 0;
    text-align: center;
}

.enlaces-internos__ver-todos a {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primario, #2563eb);
    text-decoration: none;
}

.enlaces-internos__ver-todos a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .enlaces-internos__grid {
        flex-direction: column;
    }

    .enlace-herramienta {
        min-width: unset;
        width: 100%;
    }
}