/* Global: tipografía y paleta refinada */
:root{
  --bg: #f6faf7;
  --card-bg: #ffffff;
  --brand-1: #15592b;   /* un tono más sobrio */
  --brand-2: #1e8f4a;
  --muted: #566a62;
  --shadow-1: 0 18px 48px rgba(8,30,18,0.06);
  --radius: 18px;
  --container-max: 1400px;
}

/* Base: usar Arial para toda la página de eticCode */
body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: #0b2b27;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Main: aspecto más profesional y centrado */
main{
  max-width:var(--container-max);
  margin:64px auto;
  padding:48px 32px;
  box-sizing:border-box;
}

/* Código de Ética: tarjeta limpia y sobria */
.codigo-etica{
  background: var(--card-bg);
  border-radius: var(--radius);
  padding:48px;
  box-shadow: var(--shadow-1);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  border: 1px solid rgba(12,45,30,0.04);
}

/* Título: más formal */
.codigo-etica h1{
  margin:0;
  font-size:36px;
  font-weight:700;
  color:var(--brand-1);
  letter-spacing:-0.4px;
  text-align:center;
  line-height:1.05;
}

/* Párrafo: justificado y legible */
.codigo-etica p{
  max-width:980px;
  margin:0;
  font-size:17px;
  line-height:1.85;
  color:var(--muted);
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  padding: 6px 0;
}

/* Imagen: contenedor controlado y centrado */
.codigo-etica-imagen{
  width:100%;
  display:flex;
  justify-content:center;
}
.codigo-etica-imagen img{
  width:100%;
  max-width:900px;
  height:auto;
  max-height:560px;
  object-fit:cover;
  border-radius:12px;
  box-shadow: 0 12px 36px rgba(6,30,20,0.05);
  border: 1px solid rgba(10,40,30,0.03);
}

/* Botón PDF: contraste accesible y estilo profesional */
.btn-ver-codigo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  border-radius:12px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand-1));
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  box-shadow: 0 10px 30px rgba(15,106,52,0.10);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform .14s ease, box-shadow .14s ease, opacity .12s ease;
}
.btn-ver-codigo i{ font-size:18px; }

/* Hover / Focus */
.btn-ver-codigo:hover,
.btn-ver-codigo:focus{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(15,106,52,0.14);
  opacity:0.98;
}
.btn-ver-codigo:focus{ outline: 3px solid rgba(30,143,74,0.16); outline-offset:3px; }

/* Spacing: asegurar separación amplia entre secciones */
.section + .section{
  margin-top:48px;
}

/* Responsive: ajustar para móviles sin perder profesionalidad */
@media (max-width:1024px){
  main{ padding:36px 24px; margin:40px auto; }
  .codigo-etica{ padding:36px; gap:20px; }
  .codigo-etica h1{ font-size:30px; }
  .codigo-etica-imagen img{ max-width:720px; max-height:460px; }
}
@media (max-width:720px){
  main{ padding:20px; margin:20px; }
  .codigo-etica{ padding:18px; border-radius:14px; gap:14px; }
  .codigo-etica h1{ font-size:22px; }
  .codigo-etica p{ font-size:15px; line-height:1.6; }
  .codigo-etica-imagen img{ max-width:100%; max-height:320px; }

  /* botón: no ocupar 100% completo, limitar y centrar para mejor aspecto */
  .btn-ver-codigo{
    width: auto;               /* permitir tamaño natural */
    max-width: 360px;          /* un poco menos ancho */
    display: inline-flex;
    justify-content:center;
    padding:12px 18px;
    margin: 0 auto;            /* centrar horizontalmente */
    box-sizing: border-box;
  }
}

/* Extra responsive refinements: small phones and very small screens */
@media (max-width:480px){
  /* Reduce main padding and margins to fit pantalla pequeña */
  main{
    margin:14px auto;
    padding:12px 12px;
  }

  /* Compactar la tarjeta manteniendo legibilidad */
  .codigo-etica{
    padding:14px;
    gap:12px;
    border-radius:12px;
  }

  /* Título y párrafo más pequeños */
  .codigo-etica h1{
    font-size:20px;
    line-height:1.12;
  }
  .codigo-etica p{
    font-size:14px;
    line-height:1.5;
    max-width:100%;
    padding:4px 0;
  }

  /* Imagen más contenida */
  .codigo-etica-imagen img{
    max-width:100%;
    max-height:260px;
    object-fit:cover;
  }

  /* botón: un poco menos ancho en pantallas muy pequeñas */
  .btn-ver-codigo{
    width: auto;
    max-width: 320px;
    padding:12px 16px;
    margin: 0 auto;
    justify-content:center;
  }

  /* Ajustes visuales para bordes y sombras más sutiles */
  .codigo-etica{
    box-shadow: 0 8px 24px rgba(8,30,18,0.05);
    border: 1px solid rgba(12,45,30,0.03);
  }
}

/* Very small devices (narrow phones) */
@media (max-width:360px){
  main{ padding:10px; margin:10px; }
  .codigo-etica{ padding:10px; gap:10px; border-radius:10px; }
  .codigo-etica h1{ font-size:18px; }
  .codigo-etica p{ font-size:13px; line-height:1.45; }
  .codigo-etica-imagen img{ max-height:200px; }
  .btn-ver-codigo{
    width: auto;
    max-width: 280px;
    padding:10px;
    font-size:14px;
    margin: 0 auto;
  }
  /* Ensure links/buttons remain tappable */
  .btn-ver-codigo, a, button { min-height:44px; }
}