<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>onHTML Project</title>
  <style>
    /* =========================================
       VARIABLES REF
    ========================================= */
    
    :root {
      --navy: #082a4a;
      --navy-dark: #041b31;
      --blue: #0085ff;
      --blue-light: #29a4ff;
    
      --white: #ffffff;
      --gray-bg: #f4f7fa;
      --gray: #66798c;
      --text: #10283f;
    
      --container: 1200px;
    }
    
    
    /* =========================================
       RESET
    ========================================= */
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      scroll-behavior: smooth;
    }
    
    body {
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      background: var(--white);
      line-height: 1.6;
    }
    
    img {
      width: 100%;
      display: block;
    }
    
    a {
      color: inherit;
      text-decoration: none;
    }
    
    .container {
      width: min(92%, var(--container));
      margin: auto;
    }
    
    
    /* =========================================
       HEADER
    ========================================= */
    
    .header {
      position: sticky;
      top: 0;
      z-index: 1000;
    
      background: rgba(255, 255, 255, .96);
      border-bottom: 1px solid #e8edf2;
    }
    
    .nav-container {
      min-height: 82px;
    
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }
    
    .logo img {
      width: 190px;
    }
    
    .nav {
      display: flex;
      gap: 28px;
    }
    
    .nav a {
      font-size: 14px;
      font-weight: 700;
    }
    
    .nav a:hover {
      color: var(--blue);
    }
    
    
    /* =========================================
       BOTONES
    ========================================= */
    
    .btn-phone,
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    
      border-radius: 8px;
    
      background:
        linear-gradient(135deg,
          var(--blue),
          var(--blue-light));
    
      color: white;
      font-weight: 800;
    }
    
    .btn-phone {
      padding: 11px 20px;
    }
    
    .btn-primary {
      padding: 14px 25px;
      border: none;
      cursor: pointer;
    }
    
    
    /* =========================================
       HERO
    ========================================= */
    
    .hero {
      overflow: hidden;
    
      background:
        linear-gradient(90deg,
          #fff 0%,
          #f5faff 48%,
          #e8f4ff 100%);
    }
    
    .hero-grid {
      min-height: 650px;
    
      display: grid;
      grid-template-columns: 45% 55%;
      align-items: center;
    }
    
    .hero-content {
      padding: 70px 40px 70px 0;
    }
    
    .eyebrow {
      display: block;
    
      margin-bottom: 12px;
    
      color: var(--blue);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 2px;
    }
    
    .eyebrow.light {
      color: var(--blue-light);
    }
    
    .hero h1 {
      margin-bottom: 25px;
    
      color: var(--navy);
      font-size: clamp(48px, 5vw, 76px);
      line-height: .98;
      text-transform: uppercase;
    }
    
    .hero h1 span {
      color: var(--blue);
    }
    
    .hero-content>p {
      max-width: 530px;
      margin-bottom: 30px;
    
      font-size: 18px;
    }
    
    .hero-values {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    
      margin-top: 50px;
    }
    
    .hero-values div {
      padding-right: 15px;
      border-right: 1px solid #d6e1eb;
    }
    
    .hero-values strong,
    .hero-values span {
      display: block;
    }
    
    .hero-values strong {
      color: var(--navy);
      text-transform: uppercase;
    }
    
    .hero-values span {
      color: var(--gray);
      font-size: 13px;
    }
    
    
    .hero-image {
      position: relative;
      height: 650px;
    }
    
    .hero-image>img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .experience-box {
      position: absolute;
      right: 0;
      bottom: 70px;
    
      width: 250px;
      padding: 28px;
    
      background: var(--navy);
      color: white;
    }
    
    .experience-box strong,
    .experience-box span,
    .experience-box small {
      display: block;
    }
    
    .experience-box strong {
      color: var(--blue-light);
      font-size: 32px;
    }
    
    .experience-box span {
      font-size: 20px;
      font-weight: 700;
    }
    
    .experience-box small {
      margin-top: 8px;
      opacity: .8;
    }
    
    
    /* =========================================
       SECCIONES GENERALES
    ========================================= */
    
    .section {
      padding: 90px 0;
    }
    
    .section-heading {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
    
      margin-bottom: 45px;
    }
    
    .section h2,
    .compliance h2,
    .prevention h2 {
      color: var(--navy);
      font-size: clamp(36px, 4vw, 55px);
      line-height: 1.05;
      text-transform: uppercase;
    }
    
    
    /* =========================================
       SERVICIOS
    ========================================= */
    
    .services {
      background: var(--gray-bg);
    }
    
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    
    .service-card {
      overflow: hidden;
    
      background: white;
      border-radius: 8px;
    
      box-shadow:
        0 10px 30px rgba(4, 27, 49, .08);
    
      transition: .3s ease;
    }
    
    .service-card:hover {
      transform: translateY(-7px);
    }
    
    .service-card img {
      height: 180px;
      object-fit: cover;
    }
    
    .service-content {
      padding: 22px;
    }
    
    .service-content h3 {
      margin-bottom: 8px;
    
      color: var(--navy);
      font-size: 20px;
    }
    
    .service-content p {
      color: var(--gray);
      font-size: 14px;
    }
    
    .service-content>span {
      display: block;
    
      margin-bottom: 7px;
    
      color: var(--blue);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }
    
    
    /* =========================================
       QUIÉNES SOMOS
    ========================================= */
    
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 70px;
    }
    
    .about-image img {
      min-height: 550px;
      object-fit: cover;
    }
    
    .about-content>p {
      margin: 20px 0;
      font-size: 17px;
    }
    
    .about-values {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    
      margin-top: 35px;
    }
    
    .about-values div {
      padding: 20px;
    
      background: var(--gray-bg);
      border-left: 4px solid var(--blue);
    }
    
    .about-values strong,
    .about-values span {
      display: block;
    }
    
    .about-values strong {
      color: var(--navy);
    }
    
    .about-values span {
      color: var(--gray);
      font-size: 13px;
    }
    
    
    /* =========================================
       CUMPLIMIENTO
    ========================================= */
    
    .compliance {
      background: var(--navy-dark);
      color: white;
    }
    
    .compliance-grid {
      display: grid;
      grid-template-columns: 55% 45%;
      align-items: stretch;
    }
    
    .compliance-content {
      padding: 90px 70px 90px 0;
    }
    
    .compliance h2,
    .prevention h2 {
      color: white;
    }
    
    .compliance-content>p {
      max-width: 650px;
      margin: 25px 0;
    }
    
    .compliance-image img {
      height: 100%;
      min-height: 500px;
      object-fit: cover;
    }
    
    .check-list {
      list-style: none;
      margin: 30px 0;
    }
    
    .check-list li {
      margin: 13px 0;
    }
    
    .check-list li::before {
      content: "✓";
    
      display: inline-flex;
      align-items: center;
      justify-content: center;
    
      width: 25px;
      height: 25px;
    
      margin-right: 10px;
    
      border-radius: 50%;
    
      background: var(--blue);
      color: white;
    
      font-weight: bold;
    }
    
    .compliance-message {
      display: inline-block;
    
      margin-top: 20px;
      padding: 15px 20px;
    
      background: var(--blue);
    
      font-size: 20px;
    }
    
    
    /* =========================================
       CLIENTES
    ========================================= */
    
    .section-title-center {
      margin-bottom: 45px;
      text-align: center;
    }
    
    .clients-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 15px;
    }
    
    .clients-grid div {
      min-height: 120px;
    
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    
      padding: 20px;
    
      background: var(--gray-bg);
      border: 1px solid #e0e8ef;
    
      text-align: center;
      font-size: 28px;
    }
    
    .clients-grid strong {
      margin-top: 10px;
    
      color: var(--navy);
      font-size: 14px;
    }
    
    
    /* =========================================
       PREVENCIÓN
    ========================================= */
    
    .prevention {
      background: var(--navy);
      color: white;
    }
    
    .prevention-grid {
      display: grid;
      grid-template-columns: 45% 55%;
      align-items: center;
    }
    
    .prevention-content {
      padding: 80px 60px 80px 0;
    }
    
    .prevention-content>p {
      margin: 20px 0;
      font-size: 18px;
    }
    
    .prevention-image img {
      height: 550px;
      object-fit: cover;
    }
    
    
    /* =========================================
       CONTACTO
    ========================================= */
    
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
    }
    
    .contact-info>p {
      max-width: 430px;
      margin: 20px 0 35px;
    }
    
    .contact-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .contact-list a {
      color: var(--navy);
      font-size: 18px;
      font-weight: 700;
    }
    
    .contact-list small {
      display: block;
      margin-left: 22px;
      color: var(--gray);
    }
    
    
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    
    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 16px;
    
      border: 1px solid #d6e0e9;
      border-radius: 6px;
    
      font: inherit;
    }
    
    .contact-form input:focus,
    .contact-form textarea:focus {
      outline: 2px solid var(--blue);
      border-color: transparent;
    }
    
    
    /* =========================================
       FOOTER
    ========================================= */
    
    .footer {
      padding: 65px 0 20px;
    
      background: #03182a;
      color: white;
    }
    
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1.5fr 1fr;
      gap: 60px;
    }
    
    .footer-brand img {
      width: 220px;
      margin-bottom: 20px;
    }
    
    .footer-brand p {
      max-width: 350px;
      color: #a9bac8;
    }
    
    .footer h4 {
      margin-bottom: 18px;
      text-transform: uppercase;
    }
    
    .footer a,
    .footer span {
      display: block;
      margin: 8px 0;
      color: #b8c7d4;
    }
    
    .footer a:hover {
      color: var(--blue-light);
    }
    
    .copyright {
      width: min(92%, var(--container));
      margin: 50px auto 0;
      padding-top: 20px;
    
      border-top: 1px solid rgba(255, 255, 255, .12);
    
      color: #8096a8;
      font-size: 13px;
    }
    
    
    /* =========================================
       RESPONSIVE
    ========================================= */
    
    @media (max-width: 1000px) {
    
      .nav {
        display: none;
      }
    
      .hero-grid,
      .about-grid,
      .compliance-grid,
      .prevention-grid,
      .contact-grid {
        grid-template-columns: 1fr;
      }
    
      .hero-content {
        padding-right: 0;
      }
    
      .hero-image {
        height: 500px;
      }
    
      .services-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    
      .clients-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    
      .compliance-content,
      .prevention-content {
        padding-right: 0;
      }
    
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    
    }
    
    
    @media (max-width: 650px) {
    
      .section {
        padding: 65px 0;
      }
    
      .logo img {
        width: 150px;
      }
    
      .btn-phone {
        font-size: 12px;
        padding: 10px;
      }
    
      .hero-grid {
        min-height: auto;
      }
    
      .hero-content {
        padding: 60px 0;
      }
    
      .hero h1 {
        font-size: 43px;
      }
    
      .hero-values {
        grid-template-columns: 1fr;
      }
    
      .hero-image {
        height: 430px;
      }
    
      .experience-box {
        bottom: 20px;
        width: 210px;
      }
    
      .section-heading {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    
      .services-grid,
      .about-values,
      .clients-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }
    
      .service-card img {
        height: 220px;
      }
    
      .contact-grid {
        gap: 50px;
      }
    
    }
    
  </style>
</head>
<body>
  <!DOCTYPE html>
  <html lang="es">
  
  <head>
    <meta charset="UTF-8">
  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    <meta name="description" content="REF Higiene y Seguridad. Soluciones integrales, asesoramiento técnico y cumplimiento normativo para empresas.">
  
    <title>REF | Higiene y Seguridad</title>
  
    <link rel="stylesheet" href="css/style.css">
  </head>
  
  <body>
  
    <!-- ==================================================
       HEADER
  ================================================== -->
  
    <header class="header">
      <div class="container nav-container">
  
        <a href="#inicio" class="logo">
          <img src="img/logo-ref.png" alt="REF Higiene y Seguridad">
        </a>
  
        <nav class="nav">
          <a href="#inicio">Inicio</a>
          <a href="#nosotros">Quiénes somos</a>
          <a href="#servicios">Servicios</a>
          <a href="#cumplimiento">Normativa</a>
          <a href="#clientes">Clientes</a>
          <a href="#contacto">Contacto</a>
        </nav>
  
        <a href="tel:+541165400883" class="btn-phone">
          11 6540 0883
        </a>
  
      </div>
    </header>
  
  
    <main>
  
      <!-- ==================================================
       HERO
  ================================================== -->
  
      <section id="inicio" class="hero">
  
        <div class="container hero-grid">
  
          <div class="hero-content">
  
            <span class="eyebrow">
              REF · HIGIENE Y SEGURIDAD
            </span>
  
            <h1>
              Tu empresa<br>
              más segura,<br>
              <span>siempre en cumplimiento.</span>
            </h1>
  
            <p>
              Soluciones integrales en Higiene y Seguridad
              para entornos de trabajo más seguros,
              productivos y en cumplimiento con
              la normativa vigente.
            </p>
  
            <a href="#servicios" class="btn-primary">
              Nuestros servicios →
            </a>
  
            <div class="hero-values">
  
              <div>
                <strong>Prevención</strong>
                <span>de riesgos</span>
              </div>
  
              <div>
                <strong>Personas</strong>
                <span>más seguras</span>
              </div>
  
              <div>
                <strong>Empresas</strong>
                <span>más productivas</span>
              </div>
  
            </div>
  
          </div>
  
  
          <div class="hero-image">
  
            <img src="img/hero-ref.webp" alt="Profesional REF Higiene y Seguridad">
  
            <div class="experience-box">
              <strong>+20 AÑOS</strong>
              <span>de experiencia</span>
              <small>
                Acompañando a empresas de todos los rubros.
              </small>
            </div>
  
          </div>
  
        </div>
  
      </section>
  
  
      <!-- ==================================================
       SERVICIOS
  ================================================== -->
  
      <section id="servicios" class="section services">
  
        <div class="container">
  
          <div class="section-heading">
  
            <div>
              <span class="eyebrow">QUÉ HACEMOS</span>
              <h2>Nuestros servicios</h2>
            </div>
  
            <p>
              Brindamos soluciones integrales en Higiene
              y Seguridad, adaptadas a las necesidades
              de cada empresa y a los requerimientos
              de los organismos de control.
            </p>
  
          </div>
  
  
          <div class="services-grid">
  
            <article class="service-card featured">
  
              <img src="img/sap.webp" alt="Sistema de Autoprotección SAP">
  
              <div class="service-content">
                <span>Servicio principal</span>
  
                <h3>
                  Sistema de Autoprotección (SAP)
                </h3>
  
                <p>
                  Elaboración y gestión según
                  Ley 5920 – CABA.
                </p>
              </div>
  
            </article>
  
  
            <article class="service-card">
  
              <img src="img/asesoramiento.webp" alt="Asesoramiento técnico">
  
              <div class="service-content">
                <h3>Asesoramiento técnico</h3>
                <p>
                  Seguridad e Higiene en el Trabajo.
                </p>
              </div>
  
            </article>
  
  
            <article class="service-card">
  
              <img src="img/documentacion.webp" alt="Documentación">
  
              <div class="service-content">
                <h3>Documentación y gestión</h3>
                <p>
                  Presentaciones y cumplimiento ante
                  organismos de control.
                </p>
              </div>
  
            </article>
  
  
            <article class="service-card">
  
              <img src="img/mediciones.webp" alt="Mediciones laborales">
  
              <div class="service-content">
                <h3>Mediciones</h3>
                <p>
                  Iluminación, ruido, puesta a tierra
                  y condiciones ambientales.
                </p>
              </div>
  
            </article>
  
  
            <article class="service-card">
  
              <img src="img/auditorias.webp" alt="Auditorías de Seguridad e Higiene">
  
              <div class="service-content">
                <h3>Auditorías y relevamientos</h3>
                <p>
                  Seguimiento periódico de Seguridad
                  e Higiene.
                </p>
              </div>
  
            </article>
  
  
            <article class="service-card">
  
              <img src="img/riesgos.webp" alt="Análisis de riesgos">
  
              <div class="service-content">
                <h3>Análisis de riesgos</h3>
                <p>
                  Evaluación de riesgos por puesto
                  de trabajo.
                </p>
              </div>
  
            </article>
  
  
            <article class="service-card">
  
              <img src="img/capacitacion.webp" alt="Capacitación al personal">
  
              <div class="service-content">
                <h3>Capacitación al personal</h3>
                <p>
                  Formación y cultura preventiva
                  para equipos de trabajo.
                </p>
              </div>
  
            </article>
  
  
            <article class="service-card">
  
              <img src="img/epp.webp" alt="Elementos de protección personal">
  
              <div class="service-content">
                <h3>Control y seguimiento de EPP</h3>
                <p>
                  Verificación y seguimiento de
                  elementos de protección personal.
                </p>
              </div>
  
            </article>
  
          </div>
  
        </div>
  
      </section>
  
  
      <!-- ==================================================
       QUIÉNES SOMOS
  ================================================== -->
  
      <section id="nosotros" class="section about">
  
        <div class="container about-grid">
  
          <div class="about-image">
            <img src="img/quienes-somos.webp" alt="Equipo REF">
          </div>
  
  
          <div class="about-content">
  
            <span class="eyebrow">REF</span>
  
            <h2>Quiénes somos</h2>
  
            <p>
              Somos un equipo de profesionales,
              licenciados y técnicos con más de
              20 años de experiencia, comprometidos
              con la prevención, el cumplimiento
              normativo y el cuidado de las personas
              y el ambiente.
            </p>
  
            <p>
              Interpretamos los requerimientos de los
              organismos de control y los transformamos
              en soluciones concretas, explicando al
              cliente qué se solicita, por qué y cuáles
              son las alternativas disponibles.
            </p>
  
  
            <div class="about-values">
  
              <div>
                <strong>Experiencia</strong>
                <span>y conocimiento técnico</span>
              </div>
  
              <div>
                <strong>Compromiso</strong>
                <span>en cada proyecto</span>
              </div>
  
              <div>
                <strong>Acompañamiento</strong>
                <span>permanente</span>
              </div>
  
              <div>
                <strong>Soluciones</strong>
                <span>a medida</span>
              </div>
  
            </div>
  
          </div>
  
        </div>
  
      </section>
  
  
      <!-- ==================================================
       CUMPLIMIENTO NORMATIVO
  ================================================== -->
  
      <section id="cumplimiento" class="compliance">
  
        <div class="container compliance-grid">
  
          <div class="compliance-content">
  
            <span class="eyebrow light">
              ASESORAMIENTO
            </span>
  
            <h2>Cumplimiento normativo</h2>
  
            <p>
              Te acompañamos para que tu empresa cumpla
              con la normativa vigente y pueda responder
              correctamente ante inspecciones,
              requerimientos y vencimientos.
            </p>
  
  
            <ul class="check-list">
              <li>Interpretamos los requerimientos.</li>
              <li>Explicamos las alternativas disponibles.</li>
              <li>Te asesoramos en cada etapa.</li>
              <li>Realizamos seguimiento y actualizaciones.</li>
            </ul>
  
            <strong class="compliance-message">
              Convertimos los requerimientos en soluciones.
            </strong>
  
          </div>
  
  
          <div class="compliance-image">
  
            <img src="img/cumplimiento.webp" alt="Cumplimiento normativo">
  
          </div>
  
        </div>
  
      </section>
  
  
      <!-- ==================================================
       CLIENTES
  ================================================== -->
  
      <section id="clientes" class="section clients">
  
        <div class="container">
  
          <div class="section-title-center">
            <span class="eyebrow">NUESTROS CLIENTES</span>
            <h2>¿A qué empresas acompañamos?</h2>
          </div>
  
  
          <div class="clients-grid">
  
            <div>🏭 <strong>Industrias</strong></div>
            <div>🏪 <strong>Comercios</strong></div>
            <div>🏢 <strong>Empresas</strong></div>
            <div>🏙️ <strong>Consorcios</strong></div>
            <div>🏬 <strong>Establecimientos</strong></div>
            <div>👥 <strong>Emprendimientos</strong></div>
  
          </div>
  
        </div>
  
      </section>
  
  
      <!-- ==================================================
       PREVENCIÓN
  ================================================== -->
  
      <section class="prevention">
  
        <div class="container prevention-grid">
  
          <div class="prevention-content">
  
            <span class="eyebrow light">
              NUESTRA FORMA DE TRABAJAR
            </span>
  
            <h2>
              Prevención que<br>
              genera valor
            </h2>
  
            <p>
              Menos riesgos, menos costos y
              organizaciones más productivas.
            </p>
  
            <ul class="check-list">
              <li>Entornos de trabajo más seguros.</li>
              <li>Cumplimiento de la legislación vigente.</li>
              <li>Mejora continua.</li>
              <li>Compromiso con el ambiente.</li>
              <li>Cultura preventiva.</li>
            </ul>
  
          </div>
  
  
          <div class="prevention-image">
  
            <img src="img/prevencion.webp" alt="Prevención y seguridad laboral">
  
          </div>
  
        </div>
  
      </section>
  
  
      <!-- ==================================================
       CONTACTO
  ================================================== -->
  
      <section id="contacto" class="section contact">
  
        <div class="container contact-grid">
  
          <div class="contact-info">
  
            <span class="eyebrow">HABLEMOS</span>
  
            <h2>Contacto</h2>
  
            <p>
              Estamos para asesorarte y encontrar
              la mejor solución para tu empresa.
            </p>
  
  
            <div class="contact-list">
  
              <a href="tel:+541165400883">
                ☎ 11 6540 0883
                <small>Eduardo</small>
              </a>
  
              <a href="mailto:gerencia@refhys.com">
                ✉ gerencia@refhys.com
              </a>
  
              <a href="mailto:administracion@refhys.com">
                ✉ administracion@refhys.com
              </a>
  
              <a href="https://www.refhys.com">
                ◉ www.refhys.com
              </a>
  
            </div>
  
          </div>
  
  
          <form class="contact-form">
  
            <input type="text" name="nombre" placeholder="Nombre y apellido" required>
  
            <input type="text" name="empresa" placeholder="Empresa">
  
            <input type="email" name="email" placeholder="Email" required>
  
            <textarea name="mensaje" rows="5" placeholder="¿En qué podemos ayudarte?" required></textarea>
  
            <button type="submit" class="btn-primary">
              Enviar consulta →
            </button>
  
          </form>
  
        </div>
  
      </section>
  
    </main>
  
  
    <!-- ==================================================
       FOOTER
  ================================================== -->
  
    <footer class="footer">
  
      <div class="container footer-grid">
  
        <div class="footer-brand">
  
          <img src="img/logo-ref.png" alt="REF Higiene y Seguridad">
  
          <p>
            Tu aliado en Higiene y Seguridad.
            Experiencia, compromiso y soluciones
            para un entorno de trabajo más seguro.
          </p>
  
        </div>
  
  
        <div>
          <h4>Acceso rápido</h4>
  
          <a href="#inicio">Inicio</a>
          <a href="#nosotros">Quiénes somos</a>
          <a href="#servicios">Servicios</a>
          <a href="#cumplimiento">Normativa</a>
          <a href="#clientes">Clientes</a>
          <a href="#contacto">Contacto</a>
        </div>
  
  
        <div>
          <h4>Contacto</h4>
  
          <a href="tel:+541165400883">
            11 6540 0883
          </a>
  
          <a href="mailto:gerencia@refhys.com">
            gerencia@refhys.com
          </a>
  
          <a href="mailto:administracion@refhys.com">
            administracion@refhys.com
          </a>
  
          <span>CABA · Argentina</span>
        </div>
  
  
        <div>
          <h4>REF</h4>
          <p>
            Higiene y Seguridad
          </p>
        </div>
  
      </div>
  
  
      <div class="copyright">
        © 2026 REF Higiene y Seguridad.
        Todos los derechos reservados.
      </div>
  
    </footer>
  
  </body>
  
  </html>
  
  <script>
    /* Counter animation */
    document.querySelectorAll('.n[data-to]').forEach(el => {
      const t = +el.dataset.to,
        step = t / 45;
      let c = 0;
      const tm = setInterval(() => {
        c = Math.min(c + step, t);
        el.textContent = Math.floor(c);
        if (c >= t) clearInterval(tm);
      }, 25);
    });
    
    function go() {
      window.parent.document.querySelector('.tab-btn[data-tab="html"]')?.click();
      window.parent.document.querySelector('.CodeMirror textarea')?.focus();
    }
    
  </script>
</body>
</html>