/* ═══════════════════════════════════════════════════════════════════════════
   gr.css — Sistema visual del portal de grúas.
   Mobile-first. Hereda la estructura del sistema `ec-*` de consulado-ecuatoriano
   (tokens, barra fija, rejillas, tarjetas) con una paleta propia: navy para la
   confianza y ámbar para la urgencia vial, que es el gesto del sector.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
    --gr-ink:        #0d1b2a;   /* titulares */
    --gr-body:       #4a5a6b;   /* texto corrido */
    --gr-muted:      #7a8b9c;   /* etiquetas, apoyos */
    --gr-blue:       #10508c;   /* marca, enlaces */
    --gr-blue-dark:  #0a3a66;
    --gr-blue-soft:  #eaf2f9;
    --gr-blue-line:  #cddfee;
    --gr-amber:      #f6a723;   /* acción: llamar */
    --gr-amber-dark: #dd8f0d;
    --gr-amber-soft: #fff6e6;
    --gr-amber-line: #f5dda6;
    --gr-star:       #f59e0b;
    --gr-cream:      #f4f7fa;   /* fondo de página */
    --gr-line:       #e3eaf1;
    --gr-r-sm:       10px;
    --gr-r:          14px;
    --gr-r-lg:       20px;
    --gr-shadow-1:   0 1px 2px rgba(13,27,42,.05);
    --gr-shadow-2:   0 10px 30px rgba(13,27,42,.08);
    --gr-shadow-3:   0 18px 48px rgba(13,27,42,.15);
    --gr-pad:        clamp(16px, 4vw, 56px);
    --gr-max:        1400px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--gr-cream);
    color: var(--gr-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* `clip` y no `hidden`: con hidden el body pasa a ser contenedor de scroll y
       eso anula el position:sticky de la barra, que se iría con la página. */
    overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
    color: var(--gr-ink);
    margin: 0;
    line-height: 1.18;
    letter-spacing: -.02em;
    font-weight: 700;
}
p, ul, ol { margin: 0; }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--gr-blue); outline-offset: 2px; border-radius: 6px; }
/* La barra fija taparía el destino de cada ancla sin este margen. */
[id] { scroll-margin-top: 78px; }

.gr-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
/* El `display` del atributo `hidden` lo pisa cualquier regla de clase que fije
   uno propio, y quedaban píldoras vacías flotando. Con `!important` el atributo
   vuelve a significar lo que dice. */
[hidden] { display: none !important; }

/* ── Textos plegables ─────────────────────────────────────────────────────────
   La clase la pone gr.js, nunca el HTML: si el recorte viniera de serie, quien
   navegue sin JS vería el texto cortado y sin botón para abrirlo. */
.gr-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--gr-lineas, 3);
            line-clamp: var(--gr-lineas, 3);
    overflow: hidden;
}
.gr-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 7px; padding: 0; cursor: pointer;
    background: none; border: 0;
    font-size: 13px; font-weight: 600; color: var(--gr-blue);
}
.gr-more:hover { color: var(--gr-blue-dark); text-decoration: underline; }
.gr-more-ico {
    width: 17px; height: 17px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--gr-blue-soft); border: 1px solid var(--gr-blue-line);
    border-radius: 50%; font-size: 13px; line-height: 1; font-weight: 700;
}
.gr-wrap { max-width: var(--gr-max); margin: 0 auto; padding: 0 var(--gr-pad); }
/* Solo el eje vertical: `padding: 40px 0` borraría el relleno lateral de
   .gr-wrap en los bloques que llevan las dos clases. */
.gr-section { padding-top: 44px; padding-bottom: 44px; }
.gr-section--tight { padding-top: 30px; padding-bottom: 30px; }
.gr-section--white { background: #fff; border-block: 1px solid var(--gr-line); }
.gr-section-head { margin-bottom: 22px; }
.gr-section-head p { margin-top: 8px; font-size: 15px; color: var(--gr-muted); max-width: 66ch; }

/* ── Encabezados ──────────────────────────────────────────────────────────────
   El h2/h3 lleva la keyword y se pinta pequeño, como antetítulo; el titular
   grande es un <p>, porque es lenguaje de producto y no la etiqueta de la
   sección. Así el esquema de encabezados es el que quiere el buscador sin que
   el diseño quede a merced de él. */
.gr-seo {
    font-size: 13px; font-weight: 600; line-height: 1.35;
    letter-spacing: 0; color: var(--gr-blue); margin: 0 0 5px;
}
.gr-title {
    font-size: clamp(21px, 3.6vw, 27px); font-weight: 700;
    line-height: 1.18; letter-spacing: -.02em; color: var(--gr-ink);
}
.gr-subtitle { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--gr-ink); }
.gr-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--gr-blue);
}

/* ── Franja superior ──────────────────────────────────────────────────────── */
.gr-topbar {
    background: var(--gr-ink); color: #c6d5e4;
    font-size: 12.5px;
}
.gr-topbar-inner {
    max-width: var(--gr-max); margin: 0 auto;
    padding: 7px var(--gr-pad);
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 6px 18px;
}
.gr-topbar-item { display: inline-flex; align-items: center; gap: 7px; }
.gr-topbar-item svg { flex: 0 0 auto; color: var(--gr-amber); }
.gr-topbar-sep { display: none; color: #3d5064; }

/* Por debajo de 720px la franja solo lleva el aviso corto, en una línea. Con
   los tres elementos se iba a 80px de alto —tres líneas, una de ellas con una
   palabra suelta— y empujaba el contenido fuera de la primera pantalla. La
   fecha no se pierde: está en el pie y en cada ficha de ciudad. */
@media (max-width: 719px) {
    .gr-topbar-inner { padding-top: 6px; padding-bottom: 6px; }
    .gr-topbar-item  { font-size: 11.5px; text-align: center; }
    .gr-topbar-largo,
    .gr-topbar-fecha { display: none; }
}
@media (min-width: 720px) { .gr-topbar-sep { display: inline; } }

/* ── Barra de navegación ──────────────────────────────────────────────────── */
/* El <header> no genera caja: un sticky solo se pega mientras su padre está a
   la vista, y el header mide lo que ocupa la barra. */
body > header { display: contents; }

.gr-nav {
    position: sticky; top: 0; z-index: 1200;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gr-line);
}
.gr-nav-inner {
    max-width: var(--gr-max); margin: 0 auto;
    padding: 11px var(--gr-pad);
    display: flex; align-items: center; gap: 16px;
}
.gr-brand { display: inline-flex; align-items: center; gap: 10px; }
.gr-brand-mark {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--gr-ink); color: var(--gr-amber);
    border-radius: 11px;
}
.gr-brand-name {
    font-size: 17px; font-weight: 800; color: var(--gr-ink);
    line-height: 1.05; letter-spacing: -.03em;
}
.gr-brand-name span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gr-muted); }

.gr-nav-links { display: none; }
@media (min-width: 1040px) {
    .gr-nav-links { display: flex; align-items: center; gap: 28px; margin: 0 auto; padding: 0; list-style: none; }
    .gr-nav-links > li { position: relative; }
    .gr-nav-links a, .gr-nav-drop-btn {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 15px; font-weight: 500; color: var(--gr-body);
        background: none; border: 0; padding: 6px 0; cursor: pointer;
    }
    .gr-nav-links a:hover, .gr-nav-drop-btn:hover { color: var(--gr-blue); }
    .gr-nav-drop {
        position: absolute; top: calc(100% + 10px); left: -14px;
        min-width: 240px; padding: 8px; margin: 0;
        background: #fff; border: 1px solid var(--gr-line);
        border-radius: var(--gr-r); box-shadow: var(--gr-shadow-2);
        list-style: none; display: none;
    }
    .gr-nav-drop.is-open { display: block; }
    .gr-nav-drop--cols.is-open { display: grid; grid-template-columns: 1fr 1fr; min-width: 430px; }
    .gr-nav-drop a { display: block; padding: 8px 12px; border-radius: var(--gr-r-sm); font-size: 14.5px; }
    .gr-nav-drop a:hover { background: var(--gr-blue-soft); }
}
.gr-nav-cta { margin-left: auto; white-space: nowrap; }
@media (min-width: 1040px) { .gr-nav-cta { margin-left: 0; } }

/* El rótulo largo del botón y el subtítulo de la marca solo caben en pantallas
   anchas: en móvil partían en dos líneas y hacían de la barra el bloque más
   alto de la página. */
@media (max-width: 1039px) {
    .gr-nav-cta-mas { display: none; }
}
@media (max-width: 519px) {
    .gr-brand-name span { display: none; }
    .gr-brand-name { font-size: 16px; }
}
@media (max-width: 419px) {
    .gr-brand-name { font-size: 15px; }
    .gr-nav-cta { padding: 9px 14px; font-size: 13.5px; }
}

.gr-burger {
    margin-left: 4px; width: 42px; height: 42px;
    display: grid; place-items: center;
    background: #fff; border: 1px solid var(--gr-line);
    border-radius: var(--gr-r-sm); cursor: pointer; color: var(--gr-ink);
}
@media (min-width: 1040px) { .gr-burger { display: none; } }

.gr-mobile-menu {
    display: none;
    border-top: 1px solid var(--gr-line); background: #fff;
    padding: 8px var(--gr-pad) 18px;
    /* Con las ciudades dentro el menú mide más que la pantalla y, siendo la
       barra fija, lo que sobresale queda inalcanzable: se desplaza por dentro.
       El alto exacto lo pone gr.js al abrirlo; esto es el respaldo. */
    max-height: calc(100dvh - 128px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.gr-mobile-menu.is-open { display: block; }
@media (min-width: 1040px) { .gr-mobile-menu, .gr-mobile-menu.is-open { display: none; } }
.gr-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.gr-mobile-menu > ul > li > a, .gr-mobile-menu > ul > li > span {
    display: block; padding: 13px 2px; font-size: 16px; font-weight: 600;
    color: var(--gr-ink); border-bottom: 1px solid var(--gr-line);
}
.gr-mobile-menu > ul > li > span {
    color: var(--gr-muted); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; font-weight: 700; border: 0; padding-bottom: 4px;
}
.gr-mobile-sub li a { display: block; padding: 9px 2px; font-size: 15px; color: var(--gr-body); }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.gr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px; border: 1px solid transparent;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
/* El ámbar pide texto oscuro: sobre blanco no llega a 4.5:1 con texto claro. */
.gr-btn--call { background: var(--gr-amber); color: var(--gr-ink); box-shadow: var(--gr-shadow-1); }
.gr-btn--call:hover { background: var(--gr-amber-dark); }
.gr-btn--primary { background: var(--gr-blue); color: #fff; box-shadow: var(--gr-shadow-1); }
.gr-btn--primary:hover { background: var(--gr-blue-dark); }
.gr-btn--ghost { background: #fff; color: var(--gr-ink); border-color: var(--gr-line); }
.gr-btn--ghost:hover { border-color: var(--gr-blue); color: var(--gr-blue); }
.gr-btn:active { transform: translateY(1px); }
.gr-btn--sm { padding: 9px 15px; font-size: 14px; }
.gr-btn--block { width: 100%; }
.gr-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--gr-blue); }
.gr-link:hover { color: var(--gr-blue-dark); }

/* ── Migas ────────────────────────────────────────────────────────────────── */
.gr-crumbs { background: #fff; border-bottom: 1px solid var(--gr-line); font-size: 13px; }
.gr-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 10px 0; }
.gr-crumbs li + li::before { content: '›'; margin-right: 6px; color: var(--gr-muted); }
.gr-crumbs a { color: var(--gr-blue); }
.gr-crumbs a:hover { text-decoration: underline; }
.gr-crumbs span { color: var(--gr-muted); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.gr-hero {
    position: relative;
    background:
        radial-gradient(120% 90% at 88% 6%, #dce9f5 0%, rgba(220,233,245,0) 62%),
        linear-gradient(180deg, #f8fbfd 0%, var(--gr-cream) 100%);
    overflow: hidden;
}
.gr-hero-inner { max-width: var(--gr-max); margin: 0 auto; }
.gr-hero-copy { padding: 30px var(--gr-pad) 30px; }

@media (min-width: 1000px) {
    /* Dos columnas: el texto manda, la foto acompaña. La imagen queda dentro
       del contenedor y no sangra hasta el borde de la ventana, para que respire
       igual que el resto de la página. */
    .gr-hero-inner {
        display: grid; grid-template-columns: 55% 45%;
        align-items: stretch; gap: 0;
    }
    .gr-hero-copy {
        display: flex; flex-direction: column; justify-content: center;
        padding: 40px 20px 44px var(--gr-pad);
    }
}

/* ── Imagen del hero ──────────────────────────────────────────────────────── */
.gr-hero-media { position: relative; padding: 0 var(--gr-pad) 26px; }
.gr-hero-photo { display: block; position: relative; }
.gr-hero-photo img {
    width: 100%; height: 100%; object-fit: cover;
    /* Centrado: con los dos costados difuminados, encuadrar más a la derecha
       metía al operario dentro del degradado y se desvanecía. */
    object-position: 50% center;
}

@media (max-width: 999px) {
    /* Sin marco ni esquinas redondeadas: con los bordes difuminados, un borde
       visible delataría justo el corte que la máscara está ocultando. */
    .gr-hero-photo { aspect-ratio: 16 / 10; overflow: hidden; }
    /* Arriba y por los dos costados: el degradado superior es el que separa la
       foto del texto que tiene encima. */
    .gr-hero-photo img {
        -webkit-mask-image:
            linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 8%, #000 22%),
            linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
                mask-image:
            linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 8%, #000 22%),
            linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
        -webkit-mask-composite: source-in;
                mask-composite: intersect;
    }
}
@media (min-width: 1000px) {
    .gr-hero-media { padding: 0; }
    .gr-hero-photo {
        height: 100%; min-height: 400px;
        /* Sin radio ni borde: con el lado izquierdo difuminado no hay esquina
           que redondear, y un borde delataría el corte que la máscara oculta. */
        border-radius: 0;
    }
    /* Los dos costados se disuelven en el fondo. El derecho es más corto que el
       izquierdo a propósito: por ahí queda el operario y un degradado largo se
       lo comería. */
    .gr-hero-photo img {
        -webkit-mask-image: linear-gradient(90deg,
            transparent 0, rgba(0,0,0,.3) 9%, rgba(0,0,0,.8) 22%, #000 38%,
            #000 84%, rgba(0,0,0,.6) 94%, transparent 100%);
                mask-image: linear-gradient(90deg,
            transparent 0, rgba(0,0,0,.3) 9%, rgba(0,0,0,.8) 22%, #000 38%,
            #000 84%, rgba(0,0,0,.6) 94%, transparent 100%);
    }
}
@media (min-width: 1400px) { .gr-hero-photo { min-height: 460px; } }
.gr-hero-badge {
    /* `align-self` explícito: al pasar .gr-hero-copy a columna flexible, un
       inline-flex se estira a todo el ancho y la píldora dejaba de serlo. */
    display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
    padding: 6px 13px 6px 10px; margin-bottom: 18px;
    background: #fff; border: 1px solid var(--gr-blue-line);
    border-radius: 999px; box-shadow: var(--gr-shadow-1);
    font-size: 13px; font-weight: 600; color: var(--gr-blue-dark);
}
.gr-hero-badge svg { color: var(--gr-amber-dark); }
.gr-hero-title {
    max-width: 19ch;
    font-size: clamp(30px, 5vw, 46px); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.06; color: var(--gr-ink);
}
.gr-hero-title em { font-style: normal; color: var(--gr-blue); }
.gr-hero-sub { margin-top: 16px; max-width: 56ch; font-size: clamp(15px, 2vw, 16.5px); }

/* Buscador de ciudad */
.gr-search { margin-top: 24px; max-width: 620px; }
.gr-search-box {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1.5px solid var(--gr-blue);
    border-radius: 14px; padding: 11px 13px; box-shadow: var(--gr-shadow-2);
}
.gr-search-box svg { color: var(--gr-blue); flex: 0 0 auto; }
.gr-search-box input {
    flex: 1; min-width: 0; border: 0; background: transparent;
    font-size: 16px; color: var(--gr-ink); padding: 6px 0;
}
.gr-search-box input::placeholder { color: #9badbd; }
.gr-search-box input:focus { outline: none; }
.gr-search-hint { font-size: 12.5px; color: var(--gr-muted); }
.gr-search-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin-top: 12px;
}

/* Mensajes de la geolocalización. Ocupan sitio propio: si aparecieran dentro
   del botón, el texto de error lo deformaría. */
.gr-geo-msg {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin-top: 10px; font-size: 13px; color: var(--gr-blue-dark);
    background: var(--gr-blue-soft); border: 1px solid var(--gr-blue-line);
    border-radius: var(--gr-r-sm); padding: 10px 12px; max-width: 68ch;
}
.gr-geo-msg > span { flex: 1; min-width: 12ch; }
.gr-geo-msg strong { color: var(--gr-ink); }
.gr-geo-msg.is-error {
    color: #8a4b00; background: var(--gr-amber-soft); border-color: var(--gr-amber-line);
}

/* Distancia calculada en el navegador, junto a la valoración. */
.gr-dist {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 999px;
    background: var(--gr-blue-soft); border: 1px solid var(--gr-blue-line);
    color: var(--gr-blue-dark); font-size: 11.5px; font-weight: 600;
}
.gr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.gr-chip {
    padding: 5px 12px; background: #fff; border: 1px solid var(--gr-line);
    border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--gr-body);
    white-space: nowrap; cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.gr-chip:hover { border-color: var(--gr-blue); color: var(--gr-blue); background: var(--gr-blue-soft); }

/* ── Pilares ──────────────────────────────────────────────────────────────── */
.gr-pillars { background: #fff; border-block: 1px solid var(--gr-line); }
.gr-pillars-grid {
    display: grid; grid-template-columns: 1fr;
    max-width: var(--gr-max); margin: 0 auto; padding: 4px var(--gr-pad);
}
@media (min-width: 640px)  { .gr-pillars-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .gr-pillars-grid { grid-template-columns: repeat(4, 1fr); } }
.gr-pillar { display: flex; align-items: flex-start; gap: 13px; padding: 19px 22px; border-bottom: 1px solid var(--gr-line); }
.gr-pillar:last-child { border-bottom: 0; }
@media (min-width: 640px) {
    .gr-pillar { border-bottom: 0; border-right: 1px solid var(--gr-line); }
    .gr-pillar:nth-child(2n) { border-right: 0; }
    .gr-pillar:nth-child(-n+2) { border-bottom: 1px solid var(--gr-line); }
}
@media (min-width: 1040px) {
    .gr-pillar { border-right: 1px solid var(--gr-line); border-bottom: 0; }
    .gr-pillar:nth-child(2n) { border-right: 1px solid var(--gr-line); }
    .gr-pillar:last-child { border-right: 0; }
    .gr-pillar:nth-child(-n+2) { border-bottom: 0; }
}
.gr-pillar-icon {
    width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
    border: 1px solid var(--gr-blue-line); border-radius: 12px;
    color: var(--gr-blue); background: #fbfdff;
}
.gr-pillar-title { font-size: 15px; }
.gr-pillar p { margin-top: 4px; font-size: 13px; color: var(--gr-muted); }

/* ── Contadores ───────────────────────────────────────────────────────────── */
.gr-stats { background: var(--gr-ink); color: #fff; }
.gr-stats-inner {
    max-width: var(--gr-max); margin: 0 auto; padding: 26px var(--gr-pad);
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px;
}
@media (min-width: 780px) { .gr-stats-inner { grid-template-columns: repeat(4, 1fr); } }
.gr-stat-n { font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.gr-stat-l { margin-top: 6px; font-size: 13px; color: #9db2c6; }

/* ── Rejilla de ciudades ──────────────────────────────────────────────────── */
.gr-cities { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .gr-cities { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .gr-cities { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .gr-cities { grid-template-columns: repeat(4, 1fr); } }
.gr-city {
    display: flex; flex-direction: column; gap: 4px;
    padding: 15px 16px; background: #fff;
    border: 1px solid var(--gr-line); border-radius: var(--gr-r);
    box-shadow: var(--gr-shadow-1);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gr-city:hover { border-color: var(--gr-blue-line); transform: translateY(-2px); box-shadow: var(--gr-shadow-2); }
.gr-city-name { font-size: 16px; font-weight: 700; color: var(--gr-ink); }
.gr-city-state { font-size: 12.5px; color: var(--gr-muted); }
.gr-city-foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--gr-line);
    font-size: 12.5px; color: var(--gr-body);
}
.gr-city-foot b { color: var(--gr-ink); }
.gr-city.is-hidden { display: none; }
/* Coincidencia señalada por el buscador o por la ubicación. Solo la marca:
   quien pulsa sigue siendo el usuario. */
.gr-city.is-nearest {
    border-color: var(--gr-blue);
    box-shadow: 0 0 0 3px rgba(16,80,140,.12), var(--gr-shadow-2);
}
.gr-noresults { padding: 22px; text-align: center; color: var(--gr-muted); font-size: 15px; }

/* ── Ficha de empresa ─────────────────────────────────────────────────────── */
.gr-list { display: grid; gap: 14px; }
.gr-biz {
    position: relative; display: grid; gap: 14px;
    padding: 18px; background: #fff;
    border: 1px solid var(--gr-line); border-radius: var(--gr-r-lg);
    box-shadow: var(--gr-shadow-1);
}
@media (min-width: 800px) { .gr-biz { grid-template-columns: 1fr 240px; align-items: start; } }
.gr-biz.is-hidden { display: none; }
/* La primera de la lista se distingue sin gritar: un filo ámbar a la izquierda. */
.gr-biz--top { border-color: var(--gr-amber-line); box-shadow: var(--gr-shadow-2); }
.gr-biz--top::before {
    content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
    background: var(--gr-amber); border-radius: 0 3px 3px 0;
}
.gr-biz-head { display: flex; align-items: flex-start; gap: 11px; }
.gr-biz-rank {
    width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--gr-blue-soft); color: var(--gr-blue-dark);
    border-radius: 8px; font-size: 13px; font-weight: 700;
}
.gr-biz--top .gr-biz-rank { background: var(--gr-amber-soft); color: var(--gr-amber-dark); }
.gr-biz-name { font-size: 18px; line-height: 1.25; }
.gr-biz-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 5px; font-size: 13px; color: var(--gr-muted); }
.gr-stars { display: inline-flex; gap: 1px; color: var(--gr-star); }
.gr-stars svg { width: 14px; height: 14px; }
.gr-rating-n { font-weight: 700; color: var(--gr-ink); font-size: 14px; }

.gr-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gr-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: var(--gr-blue-soft); color: var(--gr-blue-dark);
    border: 1px solid var(--gr-blue-line);
}
.gr-badge--24h { background: var(--gr-amber-soft); color: #8a5a00; border-color: var(--gr-amber-line); }
.gr-badge--es  { background: #eaf6ee; color: #1c6b3c; border-color: #c9e6d4; }

.gr-biz-meta { display: grid; gap: 7px; margin-top: 12px; font-size: 14px; }
.gr-biz-meta div { display: flex; align-items: flex-start; gap: 8px; }
.gr-biz-meta svg { flex: 0 0 auto; margin-top: 3px; color: var(--gr-muted); width: 15px; height: 15px; }
.gr-biz-desc { margin-top: 11px; font-size: 14px; color: var(--gr-body); }

/* Lo que destacan las reseñas de esa empresa concreta. */
.gr-biz-aspects {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--gr-line);
}
.gr-biz-aspects-label { font-size: 12px; color: var(--gr-muted); margin-right: 1px; }
.gr-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    border: 1px solid transparent;
}
.gr-tag small { font-weight: 500; opacity: .8; font-size: 11px; }
.gr-tag--bien { background: #eaf6ee; color: #1c6b3c; border-color: #c9e6d4; }
.gr-tag--mal  { background: #fdeeec; color: #a33224; border-color: #f3cfc9; }
.gr-biz-actions { display: grid; gap: 8px; align-content: start; }
@media (min-width: 800px) {
    .gr-biz-actions { padding-left: 18px; border-left: 1px solid var(--gr-line); }
}
.gr-biz-note { font-size: 11.5px; color: var(--gr-muted); text-align: center; }
.gr-biz-links {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
    font-size: 11.5px; color: var(--gr-muted);
}
.gr-biz-links a { color: var(--gr-blue); text-decoration: underline; }

/* ── Barra de filtros ─────────────────────────────────────────────────────── */
.gr-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 14px; margin-bottom: 16px;
    background: #fff; border: 1px solid var(--gr-line); border-radius: var(--gr-r);
}
.gr-filters-label { font-size: 13px; font-weight: 600; color: var(--gr-ink); margin-right: 2px; }
.gr-filters select {
    padding: 7px 11px; border: 1px solid var(--gr-line); border-radius: 999px;
    background: #fff; font-size: 13.5px; color: var(--gr-ink); cursor: pointer;
}
.gr-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--gr-body); cursor: pointer; }
.gr-toggle input { accent-color: var(--gr-blue); width: 16px; height: 16px; }
.gr-filters-count { margin-left: auto; font-size: 13px; color: var(--gr-muted); }

/* ── Bloque de datos / E-E-A-T ────────────────────────────────────────────── */
.gr-note {
    display: flex; gap: 12px; padding: 15px 17px;
    background: var(--gr-blue-soft); border: 1px solid var(--gr-blue-line);
    border-radius: var(--gr-r); font-size: 13.5px; color: #234a6b;
}
.gr-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--gr-blue); }
/* Solo el <strong> que hace de titular pasa a bloque. Sin `:first-child`, la
   regla alcanzaba a cualquier negrita del cuerpo —un teléfono, un «911»— y la
   partía a una línea suelta en mitad de la frase. */
.gr-note > div > strong:first-child { display: block; color: var(--gr-ink); margin-bottom: 3px; font-size: 14px; }
.gr-note strong { color: var(--gr-ink); }
.gr-note a { color: var(--gr-blue); text-decoration: underline; }
.gr-note--warn { background: var(--gr-amber-soft); border-color: var(--gr-amber-line); color: #6f4a00; }
.gr-note--warn svg { color: var(--gr-amber-dark); }

.gr-updated {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--gr-muted);
}
.gr-updated svg { color: #3f9c62; }

/* ── Prosa ────────────────────────────────────────────────────────────────── */
.gr-prose { max-width: 74ch; }
.gr-prose h2 { font-size: clamp(20px, 3vw, 24px); margin-top: 34px; }
.gr-prose h3 { font-size: 17px; margin-top: 24px; }
.gr-prose h2:first-child, .gr-prose h3:first-child { margin-top: 0; }
.gr-prose p { margin-top: 12px; }
.gr-prose ul, .gr-prose ol { margin-top: 12px; padding-left: 20px; display: grid; gap: 7px; }
.gr-prose li::marker { color: var(--gr-blue); }
.gr-prose a { color: var(--gr-blue); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.gr-prose strong { color: var(--gr-ink); }

/* ── Tabla ────────────────────────────────────────────────────────────────── */
.gr-table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--gr-line); border-radius: var(--gr-r); background: #fff; }
.gr-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.gr-table th, .gr-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--gr-line); }
.gr-table th { background: var(--gr-blue-soft); color: var(--gr-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.gr-table tr:last-child td { border-bottom: 0; }
.gr-table td b { color: var(--gr-ink); }

/* ── Análisis de reseñas por aspecto ──────────────────────────────────────── */
.gr-aspects { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px)  { .gr-aspects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .gr-aspects { grid-template-columns: repeat(3, 1fr); } }

.gr-aspect {
    display: flex; flex-direction: column;
    padding: 17px 18px; background: #fff;
    border: 1px solid var(--gr-line); border-radius: var(--gr-r-lg);
    box-shadow: var(--gr-shadow-1);
}
.gr-aspect-head { display: flex; align-items: flex-start; gap: 11px; }
.gr-aspect-icon {
    width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--gr-blue-soft); color: var(--gr-blue); border-radius: 10px;
}
.gr-aspect-head > div { flex: 1; min-width: 0; }
.gr-aspect-title { font-size: 15.5px; }
.gr-aspect-q { font-size: 12.5px; color: var(--gr-muted); margin-top: 2px; }
.gr-aspect-pct {
    flex: 0 0 auto; font-size: 20px; font-weight: 800;
    letter-spacing: -.02em; line-height: 1;
}

/* El color lo decide el dato, no la plantilla: verde solo cuando de verdad
   domina lo positivo, y rojo cuando el aspecto es un problema. */
.gr-aspect--bien  .gr-aspect-pct { color: #1c7a49; }
.gr-aspect--mixto .gr-aspect-pct { color: var(--gr-amber-dark); }
.gr-aspect--mal   .gr-aspect-pct { color: #c0392b; }

.gr-aspect-bar {
    height: 6px; margin: 13px 0 9px; border-radius: 999px;
    background: #eef2f6; overflow: hidden;
}
.gr-aspect-bar span { display: block; height: 100%; border-radius: 999px; }
.gr-aspect--bien  .gr-aspect-bar span { background: #2f9e63; }
.gr-aspect--mixto .gr-aspect-bar span { background: var(--gr-amber); }
.gr-aspect--mal   .gr-aspect-bar span { background: #d9584a; }

.gr-aspect-meta { font-size: 12.5px; color: var(--gr-muted); line-height: 1.5; }
.gr-aspect-meta strong { color: var(--gr-ink); }

.gr-quotes { display: grid; gap: 8px; margin-top: 13px; }
.gr-quote {
    margin: 0; padding: 10px 12px;
    background: var(--gr-cream); border-left: 3px solid var(--gr-line);
    border-radius: 0 var(--gr-r-sm) var(--gr-r-sm) 0;
}
/* El recorte lo aplica gr.js con .gr-clamp, igual que en las descripciones:
   una cita cortada sin manera de leer el resto puede cambiar el sentido de lo
   que alguien dijo, y estas son palabras textuales de personas reales. */
.gr-quote p { font-size: 13px; line-height: 1.5; color: var(--gr-body); }
.gr-quote .gr-more { font-size: 12px; }
.gr-quote p::before { content: '«'; }
.gr-quote p::after  { content: '»'; }
.gr-quote cite {
    display: block; margin-top: 5px; font-size: 11.5px;
    font-style: normal; color: var(--gr-muted);
}
.gr-quote--pos { border-left-color: #64bd8c; }
.gr-quote--neg { border-left-color: #e08b80; }

/* ── Caja de preguntas sobre las reseñas ──────────────────────────────────── */
.gr-qa {
    max-width: 780px;
    padding: 20px; background: #fff;
    border: 1px solid var(--gr-blue-line); border-radius: var(--gr-r-lg);
    box-shadow: var(--gr-shadow-2);
}
.gr-qa-box {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 10px 10px 14px;
    background: #fff; border: 1.5px solid var(--gr-blue);
    border-radius: 14px;
}
.gr-qa-box > svg { color: var(--gr-blue); flex: 0 0 auto; }
.gr-qa-box input {
    flex: 1; min-width: 0; border: 0; background: transparent;
    font-size: 15.5px; color: var(--gr-ink); padding: 6px 0;
}
.gr-qa-box input::placeholder { color: #9badbd; }
.gr-qa-box input:focus { outline: none; }
.gr-qa-send {
    flex: 0 0 auto; width: 38px; height: 38px;
    display: grid; place-items: center; cursor: pointer;
    background: var(--gr-blue); color: #fff; border: 0; border-radius: 10px;
}
.gr-qa-send:hover { background: var(--gr-blue-dark); }

.gr-qa-chips { margin-top: 12px; align-items: center; }
.gr-qa-chips-label { font-size: 12.5px; color: var(--gr-muted); margin-right: 2px; }

.gr-qa-out {
    margin-top: 16px; padding: 15px 17px;
    background: var(--gr-blue-soft); border: 1px solid var(--gr-blue-line);
    border-radius: var(--gr-r);
}
/* La respuesta de respaldo —búsqueda por palabras, no elaborada— se distingue
   a simple vista para que nadie la confunda con lo otro. */
.gr-qa-out.is-fallback { background: var(--gr-cream); border-color: var(--gr-line); }
.gr-qa-answer { font-size: 15px; color: var(--gr-ink); line-height: 1.55; }
.gr-qa-sources-label {
    margin-top: 14px; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--gr-muted);
}
.gr-qa-out .gr-quotes { margin-top: 8px; }
.gr-qa-out .gr-quote { background: #fff; }
.gr-qa-note { margin-top: 12px; font-size: 12px; color: var(--gr-muted); line-height: 1.5; }
.gr-qa-legal { margin-top: 14px; font-size: 11.5px; color: var(--gr-muted); line-height: 1.5; }
.gr-qa-legal a { color: var(--gr-blue); text-decoration: underline; }

/* Espera: tres puntos que laten. Un texto quieto no distingue "pensando" de
   "se ha colgado". */
.gr-qa-loading {
    display: flex; align-items: center; gap: 5px;
    font-size: 14px; color: var(--gr-blue-dark);
}
.gr-qa-loading span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gr-blue); opacity: .35;
    animation: gr-latido 1.1s infinite ease-in-out;
}
.gr-qa-loading span:nth-child(2) { animation-delay: .18s; }
.gr-qa-loading span:nth-child(3) { animation-delay: .36s; margin-right: 6px; }
@keyframes gr-latido {
    0%, 80%, 100% { opacity: .3; transform: scale(.85); }
    40%           { opacity: 1;  transform: scale(1.1); }
}

/* ── Preguntas frecuentes ─────────────────────────────────────────────────── */
.gr-faqs { display: grid; gap: 9px; max-width: 80ch; }
.gr-faq { background: #fff; border: 1px solid var(--gr-line); border-radius: var(--gr-r); overflow: hidden; }
.gr-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 17px; cursor: pointer; list-style: none;
    font-size: 15.5px; font-weight: 600; color: var(--gr-ink);
}
.gr-faq summary::-webkit-details-marker { display: none; }
.gr-faq summary::after {
    content: ''; flex: 0 0 auto; width: 10px; height: 10px;
    border-right: 2px solid var(--gr-muted); border-bottom: 2px solid var(--gr-muted);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.gr-faq[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.gr-faq-body { padding: 0 17px 16px; font-size: 14.5px; }
.gr-faq-body p + p { margin-top: 10px; }
.gr-faq-body a { color: var(--gr-blue); text-decoration: underline; }

/* ── Enlaces relacionados ─────────────────────────────────────────────────── */
.gr-related { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 600px)  { .gr-related { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gr-related { grid-template-columns: repeat(3, 1fr); } }
.gr-rel {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 15px; background: #fff;
    border: 1px solid var(--gr-line); border-radius: var(--gr-r);
    transition: border-color .18s ease, transform .18s ease;
}
.gr-rel:hover { border-color: var(--gr-blue-line); transform: translateY(-2px); }
.gr-rel-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; background: var(--gr-blue-soft); color: var(--gr-blue); border-radius: 10px; }
.gr-rel-body { flex: 1; min-width: 0; }
.gr-rel-title { font-size: 14.5px; font-weight: 600; color: var(--gr-ink); }
.gr-rel-sub { font-size: 12.5px; color: var(--gr-muted); margin-top: 1px; }

/* ── Calculadora ──────────────────────────────────────────────────────────── */
.gr-calc { display: grid; gap: 18px; }
@media (min-width: 900px) { .gr-calc { grid-template-columns: 1fr 340px; align-items: start; } }
.gr-calc-form { display: grid; gap: 15px; padding: 20px; background: #fff; border: 1px solid var(--gr-line); border-radius: var(--gr-r-lg); box-shadow: var(--gr-shadow-1); }
.gr-field { display: grid; gap: 6px; }
.gr-field label { font-size: 13.5px; font-weight: 600; color: var(--gr-ink); }
.gr-field select, .gr-field input[type=number] {
    padding: 10px 12px; border: 1px solid var(--gr-line); border-radius: var(--gr-r-sm);
    background: #fff; font-size: 15px; color: var(--gr-ink); width: 100%;
}
.gr-field-hint { font-size: 12px; color: var(--gr-muted); }
.gr-range-row { display: flex; align-items: center; gap: 12px; }
.gr-range-row input[type=range] { flex: 1; accent-color: var(--gr-blue); }
.gr-range-val { min-width: 74px; text-align: right; font-size: 15px; font-weight: 700; color: var(--gr-ink); }

.gr-calc-out {
    position: sticky; top: 90px;
    padding: 20px; background: var(--gr-ink); color: #fff;
    border-radius: var(--gr-r-lg); box-shadow: var(--gr-shadow-2);
}
.gr-calc-out h3 { color: #fff; font-size: 15px; }
.gr-calc-total { margin-top: 12px; font-size: 36px; font-weight: 800; letter-spacing: -.03em; color: var(--gr-amber); line-height: 1; }
.gr-calc-range { margin-top: 6px; font-size: 13px; color: #9db2c6; }
.gr-calc-break { margin-top: 16px; padding-top: 14px; border-top: 1px solid #24384c; display: grid; gap: 8px; font-size: 13.5px; }
.gr-calc-break div { display: flex; justify-content: space-between; gap: 12px; color: #c6d5e4; }
.gr-calc-break b { color: #fff; font-weight: 600; }
.gr-calc-note { margin-top: 14px; font-size: 11.5px; color: #7f95ab; line-height: 1.5; }

/* ── Barra fija de llamada (móvil) ────────────────────────────────────────── */
.gr-callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    display: flex; align-items: center; gap: 10px;
    padding: 10px var(--gr-pad) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--gr-line);
    box-shadow: 0 -6px 24px rgba(13,27,42,.10);
}
@media (min-width: 800px) { .gr-callbar { display: none; } }
.gr-callbar-txt { flex: 1; min-width: 0; font-size: 12.5px; color: var(--gr-muted); line-height: 1.35; }
.gr-callbar-txt b { display: block; color: var(--gr-ink); font-size: 14px; font-weight: 700; }
/* Con la barra abajo, el pie necesita hueco para no quedar tapado. */
@media (max-width: 799px) { body.has-callbar { padding-bottom: 72px; } }

/* ── Mapa ─────────────────────────────────────────────────────────────────── */
.gr-map {
    height: 380px; border-radius: var(--gr-r-lg); overflow: hidden;
    border: 1px solid var(--gr-line); background: #e8eef4;
    /* Por debajo de la barra fija: Leaflet apila sus paneles en 400 y sin esto
       los marcadores pasaban por delante de la navegación al desplazarse. */
    position: relative; z-index: 0;
}
.gr-map iframe, .gr-map img { width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) { .gr-map { height: 440px; } }

/* Marcador numerado: el mismo número que la empresa lleva en el listado. */
.gr-pin-wrap { background: none; border: 0; }
.gr-pin {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    background: var(--gr-blue); color: #fff;
    border: 2px solid #fff; border-radius: 50%;
    box-shadow: 0 2px 6px rgba(13,27,42,.35);
    font: 700 13px/1 'Inter', sans-serif;
}
.gr-pin--top { background: var(--gr-amber); color: var(--gr-ink); }
/* Punto del usuario: más pequeño y de otro color, para que no se confunda con
   una empresa del listado. */
.gr-pin--yo {
    width: 20px; height: 20px;
    background: #d92d20; border-width: 3px;
    box-shadow: 0 0 0 4px rgba(217,45,32,.22), 0 2px 6px rgba(13,27,42,.35);
}

.leaflet-popup-content-wrapper { border-radius: var(--gr-r-sm); }
.leaflet-popup-content { margin: 12px 14px; font-family: 'Inter', sans-serif; }
.gr-pop-name { display: block; font-size: 14.5px; color: var(--gr-ink); margin-bottom: 4px; }
.gr-pop-meta { display: block; font-size: 12.5px; color: var(--gr-muted); }
.gr-pop-call {
    display: inline-block; margin-top: 9px; padding: 6px 12px;
    background: var(--gr-amber); color: var(--gr-ink) !important;
    border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none !important;
}
.gr-pop-route {
    display: block; width: 100%; margin-top: 10px; padding: 6px 12px;
    background: #fff; color: var(--gr-blue); cursor: pointer;
    border: 1px solid var(--gr-blue-line); border-radius: 999px;
    font-size: 13px; font-weight: 600;
}
.gr-pop-route:hover { background: var(--gr-blue-soft); }

/* Resultado del cálculo de ruta, encima del mapa. */
.gr-route-info {
    margin-top: 12px; padding: 13px 15px;
    background: var(--gr-blue-soft); border: 1px solid var(--gr-blue-line);
    border-radius: var(--gr-r); color: #234a6b; font-size: 14px;
}
.gr-route-info.is-error {
    background: var(--gr-amber-soft); border-color: var(--gr-amber-line); color: #6f4a00;
}
.gr-route-info strong { color: var(--gr-ink); }
.gr-route-note { display: block; margin-top: 6px; font-size: 12px; color: var(--gr-muted); }
.gr-route-clear {
    margin-top: 10px; padding: 5px 12px; cursor: pointer;
    background: #fff; color: var(--gr-body);
    border: 1px solid var(--gr-line); border-radius: 999px; font-size: 12.5px; font-weight: 600;
}
.gr-route-clear:hover { border-color: var(--gr-blue); color: var(--gr-blue); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.gr-footer { background: var(--gr-ink); color: #a8bccf; padding: 40px 0 22px; margin-top: 20px; font-size: 14px; }
.gr-footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .gr-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .gr-footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; } }
.gr-footer .gr-brand-name { color: #fff; }
.gr-footer .gr-brand-name span { color: #7f95ab; }
.gr-footer .gr-brand-mark { background: #1b2d3f; }
.gr-footer-about p { margin-top: 12px; max-width: 42ch; font-size: 13.5px; }
.gr-footer-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 11px; }
.gr-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gr-footer-col a { font-size: 13.5px; }
.gr-footer-col a:hover { color: #fff; text-decoration: underline; }
.gr-footer-note {
    grid-column: 1 / -1; display: flex; gap: 12px;
    margin-top: 6px; padding: 15px 17px;
    background: #16273a; border: 1px solid #24384c; border-radius: var(--gr-r);
    font-size: 13px;
}
.gr-footer-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--gr-amber); }
.gr-footer-note > div > strong:first-child { display: block; margin-bottom: 4px; }
.gr-footer-note strong { color: #fff; }
.gr-footer-note a { color: var(--gr-amber); text-decoration: underline; }
.gr-footer-legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
    margin-top: 26px; padding-top: 18px; border-top: 1px solid #24384c;
    font-size: 12.5px; color: #7f95ab;
}

/* ── Volver arriba ────────────────────────────────────────────────────────── */
.gr-up {
    position: fixed; right: 16px; bottom: 88px; z-index: 1050;
    width: 42px; height: 42px; display: none; place-items: center;
    background: #fff; color: var(--gr-ink);
    border: 1px solid var(--gr-line); border-radius: 50%;
    box-shadow: var(--gr-shadow-2); cursor: pointer;
}
.gr-up.is-visible { display: grid; }
@media (min-width: 800px) { .gr-up { bottom: 24px; } }

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