/* =========================================================================
   3CWeb — Herramientas de texto. Prefijo .herr- para no tocar el sistema
   de diseño general. Reutiliza tipografía, colores y botones de style.css.
   ========================================================================= */

/* ---------- Listado ---------- */
.herr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.herr-grid--sm { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.herr-card {
    display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--gris-linea);
    border-radius: var(--radio-lg); background: var(--blanco); transition: transform .3s, box-shadow .3s, border-color .3s;
}
.herr-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -36px rgba(0,0,0,.3); border-color: transparent; }
.herr-card__icono { width: 26px; height: 26px; margin-bottom: 14px; animation: blog-filtro-arcoiris 5s linear infinite; }
.herr-card__icono svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .herr-card__icono { animation: none; } }
.herr-card h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin-bottom: 10px; }
/* En el listado (herramientas.php) el título de cada tarjeta es <h2> (el h1
   de la página no debe saltar directo a <h3>); en "otras herramientas" sigue
   siendo <h3>, nesteado bajo su propio <h2>, así que no se toca esa regla. */
.herr-grid .herr-card h2 { font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin-bottom: 10px; }
.herr-card p { color: var(--texto-mute); font-size: .92rem; line-height: 1.55; margin-bottom: 18px; }
/* Botón con degradado en movimiento del color de la herramienta (mismo
   lenguaje que .recurso-card__link, a partir de --cat-color puesto en la
   propia tarjeta). */
.herr-card__link {
    margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border-radius: var(--radio-pill); font-weight: 700; font-size: .88rem;
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35);
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--cat-color, var(--acento)) 55%, #000),
        var(--cat-color, var(--acento)),
        color-mix(in srgb, var(--cat-color, var(--acento)) 70%, #000),
        var(--cat-color, var(--acento)),
        color-mix(in srgb, var(--cat-color, var(--acento)) 55%, #000));
    background-size: 200% 100%; background-position: 0% 0;
    box-shadow: 0 10px 26px -12px rgba(0,0,0,.4);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background-position .6s var(--ease), box-shadow .3s ease;
}
.herr-card:hover .herr-card__link { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 34px -12px rgba(0,0,0,.55); }
@media (max-width: 980px) { .herr-grid, .herr-grid--sm { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .herr-grid, .herr-grid--sm { grid-template-columns: 1fr; } }

/* ---------- Listado con barra lateral de navegación por tipo ---------- */
.herr-layout { display: grid; grid-template-columns: 210px 1fr; gap: 44px; align-items: start; }
.herr-aside { position: sticky; top: 110px; }
.herr-aside__tit { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-mute); margin: 0 0 14px; display: block; }
.herr-aside nav { display: flex; flex-direction: column; gap: 11px; }
.herr-aside nav a { font-size: .88rem; line-height: 1.4; color: var(--texto-mute); transition: color .2s; }
.herr-aside nav a:hover, .herr-aside nav a.is-activo { color: var(--negro); font-weight: 600; }
.herr-listado__tit { font-size: 1.3rem; font-weight: 600; margin: 0 0 22px; }
@media (max-width: 900px) {
    .herr-layout { grid-template-columns: 1fr; }
    .herr-aside { position: static; margin-bottom: 8px; }
    .herr-aside nav { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
}
/* Línea ondulada arcoíris que separa las herramientas de texto de las de redes
   sociales: al ir entre dos .herr-listado__seccion (no directamente pegadas
   entre sí), el hueco real lo pone el margen de este elemento. */
.herr-onda.herr-onda--separador { margin: 72px 0; }

/* ---------- Destacadas (generador de redirecciones + calculadoras) ---------- */
.herr-destacadas-tit { font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-mute); margin: 0 0 16px; }
/* Línea ondulada arcoíris entre el título "Las más usadas" y las tarjetas destacadas */
.herr-onda { display: block; width: 100%; height: 26px; margin: 0 0 18px; overflow: visible; }
.herr-onda path {
    fill: none; stroke: url(#herrOndaGrad); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 22 16; animation: herr-onda-fluye 3.2s linear infinite;
}
@keyframes herr-onda-fluye { to { stroke-dashoffset: -38; } }
@media (prefers-reduced-motion: reduce) { .herr-onda path { animation: none; } }
.herr-destacadas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 48px; }
.herr-card--destacada {
    position: relative; border-width: 1.5px; padding-top: 30px;
    box-shadow: 0 20px 40px -28px rgba(0,0,0,.25);
}
.herr-card--destacada .herr-card__icono { width: 32px; height: 32px; margin-bottom: 16px; }
.herr-card--destacada h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin-bottom: 10px; }
.herr-card__badge {
    position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 5px;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--cat-color, var(--acento)); background: color-mix(in srgb, var(--cat-color, var(--acento)) 12%, #fff);
    padding: 4px 10px; border-radius: var(--radio-pill);
}
@media (max-width: 980px) { .herr-destacadas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .herr-destacadas { grid-template-columns: 1fr; } }

/* ---------- Panel de herramienta ---------- */
.herr-panel { max-width: 900px; margin-inline: auto; border: 1px solid var(--gris-linea); border-radius: var(--radio-lg); padding: clamp(22px, 4vw, 36px); background: var(--crema); }
.herr-campo { margin-bottom: 16px; }
.herr-campo > label { display: flex; font-weight: 600; font-size: .84rem; margin-bottom: 6px; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.herr-campo input[type="text"], .herr-campo input[type="number"], .herr-campo select {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--gris-linea); border-radius: 10px;
    background: #fff; font-size: .92rem; transition: border-color .2s;
}
.herr-campo input:focus, .herr-campo select:focus { outline: none; border-color: var(--negro); }
.herr-textarea {
    width: 100%; min-height: 170px; padding: 14px 16px; border: 1.5px solid var(--gris-linea); border-radius: 14px;
    background: #fff; font-size: .92rem; line-height: 1.6; resize: vertical; transition: border-color .2s;
    font-family: 'DM Sans', ui-monospace, monospace;
}
.herr-textarea:focus { outline: none; border-color: var(--negro); }
.herr-textarea--sm { min-height: 90px; }
.herr-textarea[readonly] { background: #fafafa; }

.herr-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.herr-fila--4 { grid-template-columns: repeat(4, 1fr); }
.herr-fila--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .herr-fila, .herr-fila--4, .herr-fila--2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .herr-fila, .herr-fila--4, .herr-fila--2 { grid-template-columns: 1fr; } }

.herr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; font-size: .88rem; }
.herr-btn-sm { padding: 10px 20px; font-size: .88rem; }
.herr-check { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 500; cursor: pointer; line-height: 1.35; }
.herr-check input[type="checkbox"], .herr-check input[type="radio"] { accent-color: var(--acento); width: 16px; height: 16px; flex: none; margin-top: 3px; }
.herr-check--inline { font-weight: 500; font-size: .78rem; text-transform: none; letter-spacing: 0; }
.herr-check-row { display: flex; align-items: center; gap: 10px; font-weight: 600; padding-top: 8px; }

.herr-subherramienta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; margin-bottom: 12px;
    background: #fff; border: 1px solid var(--gris-linea); border-radius: 12px; font-size: .88rem;
}
.herr-subherramienta input[type="text"], .herr-subherramienta input[type="number"] {
    padding: 8px 12px; border: 1.5px solid var(--gris-linea); border-radius: 8px; font-size: .88rem;
}

.herr-cargar { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 500; color: var(--texto-mute); cursor: pointer; }
.herr-cargar input[type="file"] { max-width: 160px; font-size: .8rem; }

.herr-nota { font-size: .82rem; color: var(--texto-mute); margin: 0 0 16px; line-height: 1.6; }
.herr-nota code { background: #fff; border: 1px solid var(--gris-linea); border-radius: 4px; padding: 1px 5px; font-size: .82em; }
.herr-nota-inline { font-size: .84rem; font-weight: 600; color: var(--acento); }

.herr-tabla { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: .92rem; }
.herr-tabla th, .herr-tabla td { padding: 10px 14px; border: 1px solid var(--gris-linea); text-align: center; }
.herr-tabla th { background: #fff; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.herr-tabla td:first-child, .herr-tabla th:first-child { text-align: left; font-weight: 600; }

/* ---------- Generador de nicks ---------- */
.herr-nicks { display: flex; flex-wrap: wrap; gap: 8px; }
.herr-nick-chip {
    padding: 8px 16px; border-radius: var(--radio-pill); border: 1.5px solid var(--gris-linea);
    background: #fff; font-size: .9rem; font-weight: 600; cursor: pointer; transition: border-color .2s, transform .2s, background .2s;
}
.herr-nick-chip:hover { border-color: var(--acento); transform: translateY(-1px); }
.herr-nick-chip.is-copiado { background: var(--acento); border-color: var(--acento); color: var(--acento-contraste); }

/* ---------- Generador de letras bonitas ---------- */
.herr-fancy-lista { display: flex; flex-direction: column; gap: 8px; }
.herr-fancy-fila {
    display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 14px;
    padding: 12px 16px; border-radius: 12px; border: 1px solid var(--gris-linea); background: #fff; cursor: pointer;
    transition: border-color .2s, background .2s;
}
.herr-fancy-fila:hover { border-color: var(--acento); }
.herr-fancy-fila.is-copiado { background: color-mix(in srgb, var(--acento) 16%, #fff); border-color: var(--acento); }
.herr-fancy-fila__nombre { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-mute); }
.herr-fancy-fila__texto { font-size: 1.05rem; word-break: break-word; }
@media (max-width: 640px) {
    .herr-fancy-fila { grid-template-columns: 1fr; gap: 6px; text-align: left; }
    .herr-fancy-fila button { justify-self: start; }
}

/* ---------- Generador de bio para redes sociales ---------- */
.herr-bio-lista { display: flex; flex-direction: column; gap: 12px; }
.herr-bio-card {
    padding: 16px 18px; border-radius: 14px; border: 1px solid var(--gris-linea); background: #fff; cursor: pointer;
    transition: border-color .2s, background .2s;
}
.herr-bio-card:hover { border-color: var(--acento); }
.herr-bio-card.is-copiado { background: color-mix(in srgb, var(--acento) 16%, #fff); border-color: var(--acento); }
.herr-bio-card__texto { font-size: .95rem; line-height: 1.55; white-space: pre-line; margin: 0 0 10px; }
.herr-bio-card__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .78rem; color: var(--texto-mute); }

/* ---------- Generador de códigos QR ---------- */
.herr-campo input[type="color"] {
    width: 100%; height: 44px; padding: 4px; border: 1.5px solid var(--gris-linea); border-radius: 10px;
    background: #fff; cursor: pointer;
}
.herr-qr-preview {
    display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px;
    background: #fff; border: 1px solid var(--gris-linea); border-radius: var(--radio-lg); margin-bottom: 16px;
}
.herr-qr-preview canvas {
    max-width: 100%; width: 260px; height: 260px; border-radius: 8px;
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* ---------- Generador de enlaces de WhatsApp: vista previa de chat ---------- */
.herr-wa-preview { background: #e5ddd5; border-radius: 14px; padding: 20px; display: flex; justify-content: flex-end; }
.herr-wa-burbuja {
    max-width: 78%; background: #dcf8c6; border-radius: 10px 10px 2px 10px; padding: 10px 14px;
    font-size: .92rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
    box-shadow: 0 1px 1px rgba(0,0,0,.1); color: #111;
}

.herr-frecuencia { margin-top: 20px; border: 1px solid var(--gris-linea); border-radius: 14px; background: #fff; padding: 18px 20px; }
.herr-frecuencia__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.herr-frecuencia__tabla { max-height: 320px; overflow-y: auto; }
.herr-frecuencia__tabla table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.herr-frecuencia__tabla th, .herr-frecuencia__tabla td { padding: 7px 10px; border-bottom: 1px solid var(--gris-linea); text-align: left; }
.herr-frecuencia__tabla th:nth-child(2), .herr-frecuencia__tabla td:nth-child(2),
.herr-frecuencia__tabla th:nth-child(3), .herr-frecuencia__tabla td:nth-child(3) { text-align: right; }

.herr-privacidad { max-width: 900px; margin: 20px auto 0; text-align: center; font-size: .82rem; color: var(--texto-mute); }

/* ---------- Resultado de calculadoras (coste web, ROI) ---------- */
.herr-resultado { margin-bottom: 20px; }
.herr-resultado__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 14px; }
.herr-resultado__caja { background: #fff; border: 1px solid var(--gris-linea); border-radius: 14px; padding: 18px 20px; text-align: center; }
.herr-resultado__num { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--negro); margin-bottom: 4px; }
.herr-resultado__lbl { display: block; font-size: .8rem; color: var(--texto-mute); line-height: 1.35; }

.herr-cta { margin-top: 24px; padding: 24px; border-radius: var(--radio-lg); background: var(--negro); color: #fff; text-align: center; }
.herr-cta h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.herr-cta p { font-size: .9rem; color: rgba(255,255,255,.7); margin: 0 0 18px; }
.herr-cta .btn.btn--solido { background: var(--blanco); color: var(--negro); animation: none; }

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

/* ---------- Interlinking «Otras herramientas», agrupado por tipo ---------- */
.herr-otras__grupo + .herr-otras__grupo { margin-top: 40px; }
.herr-otras__cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.herr-otras__tit { font-size: 1.05rem; font-weight: 600; margin: 0; }
.carru-nav--sm button { width: 38px; height: 38px; }
.carru-nav--sm svg { width: 16px; height: 16px; }
.herr-card--carru { flex: 0 0 clamp(230px, 30%, 280px); scroll-snap-align: start; }
@media (max-width: 680px) { .herr-card--carru { flex-basis: 82%; } }

/* Dropdown de sugerencias de Google Places (#grBuscar): por encima del cursor
   personalizado (z-index hasta 9999) y de cualquier modal del sitio. */
.pac-container { z-index: 10000 !important; }

/* Más aire entre la herramienta y el bloque "Otras herramientas" de abajo
   (heredaba el margen ajustado de .blog-post__relacionados de blog.css). */
.herr-tool + .blog-post__relacionados { margin-top: 130px; }
@media (max-width: 680px) { .herr-tool + .blog-post__relacionados { margin-top: 80px; } }

/* ---------- Auditor SEO Técnico (rastreador tipo Screaming Frog) ---------- */
.herr-panel--ancho { max-width: 1180px; }

.herr-crawl-progreso { margin-bottom: 20px; }
.herr-crawl-progreso__barra { height: 8px; border-radius: var(--radio-pill); background: var(--gris-linea); overflow: hidden; margin-bottom: 8px; }
.herr-crawl-progreso__barra span { display: block; height: 100%; background: var(--acento); transition: width .4s ease; }
#crawlProgresoTxt { font-size: .82rem; color: var(--texto-mute); }

.herr-crawl-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.herr-crawl-filtro {
    padding: 7px 16px; border-radius: var(--radio-pill); border: 1.5px solid var(--gris-linea);
    background: #fff; font-size: .82rem; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
.herr-crawl-filtro:hover { border-color: var(--acento); }
.herr-crawl-filtro.is-activo { background: var(--negro); border-color: var(--negro); color: #fff; }

.herr-crawl-tabla-wrap { max-height: 560px; overflow: auto; border: 1px solid var(--gris-linea); border-radius: 14px; margin-bottom: 16px; }
.herr-crawl-tabla { margin-bottom: 0; font-size: .84rem; }
.herr-crawl-tabla thead th { position: sticky; top: 0; z-index: 1; }
.herr-crawl-tabla td, .herr-crawl-tabla th { text-align: left; white-space: nowrap; }
.herr-crawl-tabla td:first-child { white-space: normal; word-break: break-all; max-width: 340px; }
.herr-crawl-tabla tbody tr { cursor: pointer; }
.herr-crawl-tabla tbody tr:hover { background: #fafafa; }
.herr-crawl-tabla tr.oculto-filtro { display: none; }

.herr-crawl-estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.herr-crawl-estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.herr-crawl-estado--ok { color: #16A34A; }
.herr-crawl-estado--redirect { color: #D97706; }
.herr-crawl-estado--error { color: #DC2626; }

.herr-crawl-detalle td { background: #fafafa; white-space: normal; }
.herr-crawl-detalle dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 4px 0; font-size: .82rem; }
.herr-crawl-detalle dt { font-weight: 700; color: var(--texto-mute); }
.herr-crawl-detalle dd { margin: 0; word-break: break-word; }

@media (max-width: 620px) {
    .herr-crawl-tabla-wrap { max-height: 420px; }
}

/* ---------- Herramientas SEO de una página (verificador, comparador, palabra clave) ---------- */
.herr-seo-score { display: flex; align-items: center; gap: 28px; margin-bottom: 22px; flex-wrap: wrap; }
.herr-seo-score__circulo {
    --pct: 0; flex: none; width: 108px; height: 108px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; font-weight: 800; color: var(--negro);
    background: conic-gradient(var(--seo-color, #4ADE80) calc(var(--pct) * 1%), var(--gris-linea) 0);
}
.herr-seo-score__circulo::before {
    content: ''; position: absolute;
}
.herr-seo-score__circulo span { background: var(--blanco); width: 82px; height: 82px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.herr-seo-score__partes { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; }
.herr-seo-score__partes b { font-weight: 700; }

.herr-seo-hallazgo {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border: 1px solid var(--gris-linea);
    border-radius: 12px; margin-bottom: 8px; background: #fff;
}
.herr-seo-hallazgo__resta {
    flex: none; font-weight: 800; font-size: .82rem; padding: 3px 9px; border-radius: var(--radio-pill); color: #fff;
}
.herr-seo-hallazgo--alta .herr-seo-hallazgo__resta { background: #DC2626; }
.herr-seo-hallazgo--media .herr-seo-hallazgo__resta { background: #D97706; }
.herr-seo-hallazgo--baja .herr-seo-hallazgo__resta { background: #64748B; }
.herr-seo-hallazgo__cuerpo strong { display: block; font-size: .92rem; margin-bottom: 2px; }
.herr-seo-hallazgo__cuerpo span { font-size: .84rem; color: var(--texto-mute); line-height: 1.45; }
.herr-seo-ok { padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, #4ADE80 14%, #fff); font-weight: 600; font-size: .9rem; margin-bottom: 8px; }

.herr-seo-checklist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.herr-seo-check { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--gris-linea); font-size: .88rem; }
.herr-seo-check__icono { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; color: #fff; }
.herr-seo-check.is-ok .herr-seo-check__icono { background: #16A34A; }
.herr-seo-check.is-fail .herr-seo-check__icono { background: #DC2626; }

/* Comparador: filas con dos columnas de valor, resaltando la que gana */
#cmpTabla td.gana { font-weight: 700; color: #16A34A; }

/* Verificador de redirecciones */
.herr-redir-variante { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--gris-linea); border-radius: 12px; margin-bottom: 8px; font-size: .88rem; flex-wrap: wrap; }
.herr-redir-variante code { background: #fff; border: 1px solid var(--gris-linea); border-radius: 6px; padding: 2px 7px; font-size: .84em; }
.herr-redir-variante__flecha { color: var(--texto-mute); }
.herr-redir-badge { flex: none; font-weight: 700; font-size: .74rem; padding: 3px 10px; border-radius: var(--radio-pill); color: #fff; }
.herr-redir-badge--ok { background: #16A34A; }
.herr-redir-badge--error { background: #DC2626; }

/* Generador de snippet de Google */
.herr-snippet-preview { padding: 20px 22px; border: 1px solid var(--gris-linea); border-radius: 14px; background: #fff; margin-bottom: 12px; font-family: arial, sans-serif; }
.herr-snippet-preview__url { font-size: .82rem; color: #202124; margin-bottom: 3px; }
.herr-snippet-preview__titulo { font-size: 1.15rem; color: #1a0dab; line-height: 1.3; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.herr-snippet-preview__desc { font-size: .875rem; color: #4d5156; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }