: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;
    /* Acento propio de cada web: distingue el servicio sin romper la marca. */
    --acento:#0e7490;
    --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}
  /* El fichero del logo lleva la marca en azul marino y el texto en blanco:
     sobre el rojo corporativo la marca DESAPARECE (se veia asi en la propia
     gesforgroupapp.com publicada). Por eso aqui va la version toda en blanco. */
  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}
  }

  /* ── Piezas propias de cada servicio ─────────────────────── */
  /* Linea de tiempo, para lo que tiene fechas */
  .linea{list-style:none;margin:0;padding:0 0 0 28px;border-left:2px solid var(--linea)}
  .linea li{position:relative;padding:0 0 26px 24px}
  .linea li::before{content:"";position:absolute;left:-35px;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--acento)}
  .linea li:last-child{padding-bottom:0}
  .linea .cuando{font-size:.78rem;font-weight:700;color:var(--acento);text-transform:uppercase;letter-spacing:.06em}
  .linea h3{margin:3px 0 5px}
  .linea p{margin:0;color:var(--gris);font-size:.96rem;max-width:66ch}

  /* Ficha de la norma */
  .norma{border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:#fff}
  .norma .cab{background:var(--acento);color:#fff;padding:13px 20px;font-weight:700}
  .norma dl{margin:0;padding:4px 20px 18px}
  .norma dt{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--acento);margin-top:17px}
  .norma dd{margin:5px 0 0;color:var(--gris);font-size:.96rem}

  /* Preguntas */
  .dudas details{border-bottom:1px solid var(--linea)}
  .dudas summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;font-weight:700;position:relative}
  .dudas summary::-webkit-details-marker{display:none}
  .dudas summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:1.45rem;font-weight:400;color:var(--acento);line-height:1}
  .dudas details[open] summary::after{content:"–"}
  .dudas details[open] summary{color:var(--acento)}
  .dudas .resp{padding:0 0 20px;color:var(--gris);max-width:70ch;font-size:.96rem}

  /* Secuencia de un caso */
  .pasos{list-style:none;margin:0;padding:0}
  .pasos li{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--linea)}
  .pasos li:first-child{border-top:0}
  .pasos .cuando{font-weight:800;color:var(--acento);font-size:.88rem}
  .pasos h3{margin:0 0 4px}
  .pasos p{margin:0;color:var(--gris);font-size:.96rem}
  @media (max-width:640px){.pasos li{grid-template-columns:1fr;gap:3px}}

  /* Lista de detalle numerada */
  .detalle{list-style:none;counter-reset:n;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
  .detalle li{counter-increment:n;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:20px 22px}
  .detalle li h3{margin:0 0 5px}
  .detalle li h3::before{content:counter(n,decimal-leading-zero) " ";color:var(--acento);font-weight:800}
  .detalle li p{margin:0;color:var(--gris);font-size:.96rem}