/* Base */
body{
  margin:0;
  padding:0;
  background: radial-gradient(circle at 20% 10%, #f7f2ea 0%, #efe8dd 45%, #e7dfd2 100%);
  font-family: "Inter", system-ui, -apple-system, Arial, sans-serif;
  color:#1a1a1a;
  line-height: 1.35;
}

/* Tarjeta principal */
.card{
  max-width: 980px;
  margin: 30px auto;
  padding: 34px 40px 26px;
  background: #fffdf9;
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.14);
  text-align: center;
}

/* Logo de arriba */
.logoTop{
  width: 160px;
  height: auto;
  display:block;
  margin: 0 auto 10px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.10));
}

/* Título */
h1{
  font-family: "Cinzel", "Georgia", serif;
  font-size: 44px;
  letter-spacing: 2px;
  margin: 6px 0 12px;
}

/* Nombre / rol */
.who{
  margin-bottom: 14px;
}
.name{
  font-weight: 600;
  font-size: 16px;
}
.role{
  font-size: 13px;
  opacity: .85;
}

/* Afiche */
.poster{
  margin: 10px 0 14px;
}
.poster img{
  width: 100%;
  max-width: 380px;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.24);
  display:block;
  margin: 0 auto;
}

/* Botón */
.cta{
  display: inline-block;
  margin: 10px auto 16px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #141414;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .3px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  transition: transform .12s ease, opacity .12s ease;
}
.cta:hover{
  transform: translateY(-1px);
  opacity: .95;
}

/* Iconos */
.icons{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin: 6px 0 14px;
}

.iconBtn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  transition: transform .12s ease, background .12s ease;
}

.iconBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.95);
}

.iconBtn i{
  font-size: 18px;
  color: #111;
}

/* Código Ético */
.ethic{
  margin-top: 10px;
}
.ethic img{
  width: 100%;
  max-width: 260px;
  height:auto;
  display:block;
  margin: 0 auto;
}

/* Footer */
.foot{
  margin-top: 12px;
  font-size: 12px;
  opacity: .7;
}

/* Responsive */
@media (max-width: 600px){
  .card{
    margin: 18px 14px;
    padding: 26px 18px 20px;
  }
  h1{
    font-size: 38px;
  }
  .logoTop{
    width: 140px;
  }
  .poster img{
    max-width: 340px;
  }
}