/* Fuente del lema y la firma (la misma de la landing) */
@font-face {
  font-family: "Argine";
  src: url("../fonts/Argine.woff2") format("woff2"),
    url("../fonts/Argine.otf") format("opentype");
  font-display: swap;
}

/* Poppins guardada en la propia página (antes venía de Google Fonts) */
@font-face {
  font-family: "Poppins";
  font-weight: 300;
  src: url("../fonts/poppins-latin-300-normal.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  font-weight: 400;
  src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  font-weight: 500;
  src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  font-weight: 600;
  src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
  font-display: swap;
}


/* Colores de la landing */
:root {
  --verde-sidebar: #0a2119;
  --verde-fondo: #0e2c22;
  --verde-seccion: #12362a;
  --verde-placeholder: #2a4a3f;

  --crema: #f3ecdc;
  --crema-suave: rgba(243, 236, 220, 0.75);
  --dorado: #d4af37;

  --font-texto: "Poppins", sans-serif;
  --font-firma: "Argine", cursive;

  /* Todo se mide según el alto de la pantalla, para que en el celular quepa
     casi todo sin bajar; si no cabe, la página se puede desplazar */
  --u: 1vh;
}

/* En celulares nuevos, "dvh" descuenta la barra del navegador */
@supports (height: 1dvh) {
  :root {
    --u: 1dvh;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-texto);
  color: var(--crema);
  background-color: var(--verde-sidebar);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* La página tiene forma de pantalla de celular (9:16) */
.tarjeta {
  min-height: calc(var(--u) * 100);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--u) * 2.5);
  padding: calc(var(--u) * 4) 22px calc(var(--u) * 2.5);
  overflow: hidden;
  background-color: var(--verde-fondo);
  background-image: radial-gradient(
    circle at 50% 0%,
    var(--verde-seccion) 0%,
    var(--verde-fondo) 55%,
    var(--verde-sidebar) 100%
  );
}

/* Foto y nombre */
/* La foto ocupa todo el ancho arriba (se sale del margen de la tarjeta)
   y el nombre queda encima, en la parte de abajo de la foto */
.perfil {
  position: relative;
  isolation: isolate;
  margin: calc(var(--u) * -4) -22px 0;
  padding: calc(var(--u) * 21) 22px 0;
  text-align: left;
}

.foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* La parte de abajo se vuelve transparente: se funde con el fondo sin dejar línea */
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Se conserva la cara de Andrés al recortar */
  object-position: 65% 18%;
  /* Igual que en la landing: blanco y negro, oscuro y con contraste */
  filter: grayscale(1) brightness(0.68) contrast(1.2);
}

/* Tono verde encima de la foto (igual que en la landing) */
.foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #2f6b55;
  mix-blend-mode: color;
  opacity: 0.45;
}

/* La foto se funde con el fondo abajo y a la izquierda, para que el texto se lea */
.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top, rgba(14, 44, 34, 0.6) 0%, transparent 50%),
    linear-gradient(to right, rgba(14, 44, 34, 0.7) 0%, transparent 55%);
}

.nombre,
.cargo,
.lema {
  text-shadow: 0 2px 12px rgba(10, 33, 25, 0.8);
}

.nombre {
  font-size: calc(var(--u) * 3.1);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.cargo {
  font-size: calc(var(--u) * 1.6);
  font-weight: 300;
  color: var(--crema-suave);
  margin-top: calc(var(--u) * 0.3);
}

.lema {
  font-family: var(--font-firma);
  font-size: calc(var(--u) * 3.2);
  color: var(--dorado);
  margin-top: calc(var(--u) * 0.8);
  line-height: 1.2;
}

/* Botones de enlaces */
.enlaces {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.1);
}

.enlace {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(var(--u) * 1.3) 18px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 14px;
  background-color: rgba(10, 33, 25, 0.6);
  color: var(--crema);
  text-decoration: none;
  font-size: calc(var(--u) * 1.9);
  font-weight: 500;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.enlace .ph {
  font-size: calc(var(--u) * 2.8);
  color: var(--dorado);
  transition: color 0.2s;
}

.enlace span {
  flex: 1;
}

.enlace .flecha {
  font-size: calc(var(--u) * 2);
  opacity: 0.6;
}

/* Al tocar el botón en el celular se pone dorado */
.enlace:active,
.enlace:focus-visible {
  background-color: var(--dorado);
  border-color: var(--dorado);
  color: var(--verde-sidebar);
  outline: none;
}

.enlace:active .ph,
.enlace:focus-visible .ph {
  color: var(--verde-sidebar);
}

/* Botón de la página principal: borde dorado completo para que resalte */
.destacado {
  border-color: var(--dorado);
  background-color: rgba(212, 175, 55, 0.12);
}

.destacado .flecha {
  opacity: 1;
}

/* Logos de las empresas */
.empresa img {
  width: calc(var(--u) * 2.8);
  height: calc(var(--u) * 2.8);
  object-fit: contain;
}

.subtitulo {
  font-size: calc(var(--u) * 1.3);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dorado);
  text-align: center;
  margin-top: calc(var(--u) * 0.6);
}

/* Pie */
.pie {
  text-align: center;
}

.logo {
  height: calc(var(--u) * 4);
  opacity: 0.85;
}

.firma {
  font-family: var(--font-firma);
  font-size: calc(var(--u) * 2.2);
  color: var(--crema-suave);
}

/* Redes y empresas van juntas en el centro */
.botones {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.1);
}

/* ===== Formato web (computador) =====
   Foto y nombre a la izquierda, botones a la derecha */
@media (min-width: 900px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow: auto;
  }

  body {
    min-height: 100vh;
    background-color: var(--verde-fondo);
    background-image: radial-gradient(
      circle at 25% 20%,
      var(--verde-seccion) 0%,
      var(--verde-fondo) 50%,
      var(--verde-sidebar) 100%
    );
  }

  .tarjeta {
    height: auto;
    min-height: 100vh;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "perfil botones"
      "pie pie";
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: 96px;
    padding: 64px 48px 40px;
    background: none;
  }

  .perfil {
    grid-area: perfil;
    text-align: left;
  }

  /* En computador la foto es un recuadro alto con el nombre abajo */
  .perfil {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 560px;
    margin: 0;
    padding: 40px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.2);
  }

  /* Aquí la foto va dentro de un recuadro: no se desvanece */
  .foto {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .foto img {
    object-position: 60% 15%;
  }

  .foto::after {
    background:
      linear-gradient(to top, var(--verde-fondo) 0%, rgba(14, 44, 34, 0.7) 32%, transparent 60%),
      linear-gradient(to right, rgba(14, 44, 34, 0.6) 0%, transparent 50%);
  }

  .nombre {
    font-size: 3rem;
  }

  .cargo {
    font-size: 1.05rem;
    margin-top: 8px;
  }

  .lema {
    font-size: 2.6rem;
    margin-top: 20px;
  }

  .botones {
    grid-area: botones;
    gap: 12px;
  }

  .enlaces {
    gap: 12px;
  }

  .enlace {
    padding: 16px 22px;
    font-size: 1.05rem;
  }

  .enlace .ph {
    font-size: 1.5rem;
  }

  .enlace .flecha {
    font-size: 1.1rem;
  }

  .empresa img {
    width: 28px;
    height: 28px;
  }

  .subtitulo {
    font-size: 0.8rem;
    margin-top: 16px;
  }

  .pie {
    grid-area: pie;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 40px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
  }

  .logo {
    height: 44px;
  }

  .firma {
    font-size: 1.5rem;
  }

  .enlace:hover {
    background-color: var(--dorado);
    border-color: var(--dorado);
    color: var(--verde-sidebar);
    transform: translateX(4px);
  }

  .enlace:hover .ph {
    color: var(--verde-sidebar);
  }

  .enlace {
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .enlace {
    transition: none;
  }

  .enlace:hover {
    transform: none;
  }
}