:root{
    /* Paleta corporativa, sacada de gesforgroup.com (no a ojo):
       · rojo  #b81b1a — el color de marca, 38 usos en su hoja de estilos
       · navy  #00263a — el azul EXACTO del icono del logo
       Su web usa cabecera roja con el logo encima; aquí igual. */
    --rojo:#b81b1a;
    --rojo-osc:#9a1615;
    --rojo-hondo:#7e1211;
    --navy:#00263a;
    --navy-2:#013d5a;
    --azul:#b81b1a;
    --tinta:#12212b;
    --gris:#5b6b76;
    --linea:#e3e9ed;
    --fondo:#ffffff;
    --suave:#f5f8fa;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--tinta);
    background:var(--fondo);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  .env{max-width:1060px;margin:0 auto;padding:0 24px}
  a{color:var(--azul)}

  /* ── Cabecera ───────────────────────────────────────────── */
  header{background:var(--rojo);padding:22px 0}
  header .env{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  /* Sobre el rojo corporativo el logo va TAL CUAL, sin retocar: el icono en
     azul marino y el texto en blanco se leen los dos, que es exactamente como
     lo pone gesforgroup.com en su cabecera. */
  header img{height:44px;width:auto;display:block}
  header nav{display:flex;gap:26px;flex-wrap:wrap}
  header nav a{color:#ffe1e1;text-decoration:none;font-size:.95rem}
  header nav a:hover{color:#fff}

  /* ── Portada ────────────────────────────────────────────── */
  /* Degradado del rojo corporativo a uno más profundo: enlaza con la cabecera
     y da fondo sin que sea un bloque plano. */
  .portada{background:linear-gradient(180deg,var(--rojo) 0%,var(--rojo-hondo) 100%);color:#fff;padding:64px 0 72px}
  .portada h1{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.2;margin:0 0 18px;font-weight:700;letter-spacing:-.01em}
  .portada p{font-size:clamp(1.05rem,2vw,1.25rem);color:#ffdcdb;margin:0 0 12px;max-width:62ch}
  .lema{display:inline-block;margin-top:26px;font-style:italic;color:#f2aeac;font-size:1rem}

  /* ── Bloques ────────────────────────────────────────────── */
  section{padding:60px 0;border-bottom:1px solid var(--linea)}
  section.suave{background:var(--suave)}
  h2{font-size:clamp(1.35rem,2.6vw,1.8rem);margin:0 0 14px;letter-spacing:-.01em}
  h3{font-size:1.05rem;margin:0 0 8px}
  .intro{color:var(--gris);max-width:70ch;margin:0 0 34px}

  .rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
  .tarjeta{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:24px}
  .tarjeta p{margin:0;color:var(--gris);font-size:.96rem}
  section.suave .tarjeta{background:#fff}

  ul.lista{margin:0;padding-left:20px;color:var(--gris)}
  ul.lista li{margin-bottom:8px}

  .empresas{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;padding:0;list-style:none}
  .empresas li{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:8px 16px;font-size:.9rem;color:var(--tinta)}

  /* ── Contacto ───────────────────────────────────────────── */
  .contacto a.correo{
    display:inline-block;margin-top:6px;font-size:1.15rem;font-weight:600;
    color:var(--navy);text-decoration:none;border-bottom:2px solid var(--azul);padding-bottom:2px
  }
  .contacto a.correo:hover{color:var(--azul)}

  /* ── Pie ────────────────────────────────────────────────── */
  footer{background:var(--rojo-hondo);color:#f3bfbe;padding:40px 0;font-size:.9rem}
  footer .env{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
  footer a{color:#ffe4e3}
  footer .legal{display:flex;gap:20px;flex-wrap:wrap}
  /* Identificación del prestador del servicio: la LSSI (art. 10) obliga a que
     razón social, CIF y domicilio estén accesibles en la web. */
  footer .identidad{line-height:1.8}
  footer .identidad .razon{color:#ffffff;font-weight:600}
  footer .identidad .copia{margin-top:12px;color:#e8a9a8;font-size:.85rem}

  /* ── Empresas del grupo ─────────────────────────────────── */
  .empresas-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
  .empresa{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:22px;text-align:center}
  .empresa .marca{height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .empresa .marca img{max-height:56px;max-width:100%;width:auto;object-fit:contain}
  .empresa h3{margin:0 0 4px;font-size:1rem}
  .empresa p{margin:0;color:var(--gris);font-size:.88rem}

  /* ── Nosotros ───────────────────────────────────────────── */
  .nosotros{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
  .nosotros img{width:100%;height:auto;border-radius:14px;display:block}
  @media(max-width:760px){.nosotros{grid-template-columns:1fr;gap:26px}}

  /* ── Clientes ───────────────────────────────────────────── */
  .clientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;align-items:center}
  .cliente{background:#fff;border:1px solid var(--linea);border-radius:10px;height:78px;
           display:flex;align-items:center;justify-content:center;padding:10px}
  .cliente img{max-height:52px;max-width:100%;width:auto;object-fit:contain;
               filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s}
  .cliente:hover img{filter:none;opacity:1}

  /* ── ODS ────────────────────────────────────────────────── */
  .ods{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
  .ods img{width:100%;height:auto;border-radius:8px;display:block}

  /* ── Páginas legales ────────────────────────────────────── */
  .legal-doc{padding:56px 0 72px}
  .legal-doc h1{font-size:clamp(1.6rem,3.2vw,2.2rem);margin:0 0 6px;letter-spacing:-.01em}
  .legal-doc .actualizado{color:var(--gris);font-size:.9rem;margin:0 0 34px}
  .legal-doc h2{font-size:1.15rem;margin:34px 0 10px}
  .legal-doc p, .legal-doc li{color:#3d4d58;max-width:78ch}
  .legal-doc ul{padding-left:20px}
  .legal-doc li{margin-bottom:8px}
  .ficha{background:var(--suave);border:1px solid var(--linea);border-radius:12px;padding:20px 24px;margin:0 0 8px}
  .ficha div{margin-bottom:4px}
  .ficha .razon{font-weight:600;color:var(--tinta)}
  .volver{display:inline-block;margin-top:40px;color:var(--azul);text-decoration:none;font-weight:600}
  .volver:hover{text-decoration:underline}

  /* ── Registro horario con el móvil al lado ──────────────── */
  .con-movil{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
  .rejilla-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .movil{margin:0;text-align:center}
  .movil img{width:100%;max-width:270px;height:auto;display:block;margin:0 auto;
             border-radius:18px;box-shadow:0 14px 34px rgba(4,40,60,.16)}
  .movil figcaption{margin-top:14px;color:var(--gris);font-size:.88rem}
  @media(max-width:820px){
    .con-movil{grid-template-columns:1fr;gap:32px}
    .movil{order:-1}
  }