/* ==========================================================================
   LA TARJETA — elaletz.com/soy

   Se carga SÓLO en la plantilla "Tarjeta · soy" (ver elaletz_soy_assets()).
   Hereda los tokens y el lienzo de style.css: aquí no se define ni un hex
   nuevo, ni una fuente nueva. Lo único propio es el ancho de la columna y
   cómo se apilan las piezas.

   La columna mide 580px y no los 460 de la referencia: con tres destacados
   arriba, a 460 los títulos de dos palabras se partían en tres renglones.
   Arriba de 620 la lista de contacto empieza a verse como una tabla y deja
   de leerse como tarjeta.
   ========================================================================== */

:root { --soy-ancho: 580px; }

/* El pad lateral tiene que librar el marco desgarrado, que en pantalla chica
   mide 24px y en grande 93px. Como la columna está centrada y es angosta, en
   pantallas anchas sobra lugar de sobra; el clamp es para el celular. */
.soy {
  max-width: calc(var(--soy-ancho) + 2 * clamp(34px, 9vw, 48px));
  margin: 0 auto;
  padding: clamp(74px, 15vw, 180px) clamp(34px, 9vw, 48px) clamp(46px, 8vw, 90px);
}

/* --------------------------------------------------------------------------
   1. LA CABEZA: foto, logo, nombre
   -------------------------------------------------------------------------- */
.soy-cabeza { display: flex; flex-direction: column; gap: 18px; }

.soy-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: 6px;
}

/* La foto va en un marco negro con sombra dura y de ladito, como las tarjetas
   del muro. La rotación es fija y no derivada del ID porque aquí hay una sola
   foto: no hay vecinas de las que distinguirse. */
.soy-retrato {
  flex: none;
  width: clamp(112px, 30vw, 148px);
  height: clamp(112px, 30vw, 148px);
  border: 5px solid var(--negro);
  box-shadow: 9px 9px 0 var(--negro);
  transform: rotate(-2deg);
  background: var(--crema);
}
.soy-retrato img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }

.soy-logo { display: block; flex: 1 1 auto; min-width: 0; }
.soy-logo img { display: block; width: 100%; max-width: clamp(130px, 34vw, 200px); height: auto; margin-left: auto; }

.soy-nombre {
  margin: 4px 0 0;
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(54px, 13.5vw, 88px); line-height: .82;
  letter-spacing: -.005em; text-transform: uppercase;
  color: var(--negro);
}

.soy-bio {
  margin: 0; max-width: 34ch;
  font-family: var(--cuerpo); font-weight: 400;
  font-size: clamp(16px, 2.2vw, 19px); line-height: 1.45;
  color: var(--texto); text-wrap: pretty;
}

/* Sin opacidad: el negro rebajado sobre naranja se cae a 3.1:1 y esto es
   texto de 13px. En sólido da 6:1. Es la misma nota que ya trae --texto. */
.soy-meta {
  margin: 0;
  font-family: var(--titulo); font-weight: 600;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   2. LOS TRES DESTACADOS

   Van arriba de la lista porque es lo que estás promocionando hoy: quien
   escanea el QR ve primero el libro nuevo y luego tu teléfono. Tres es tope
   duro en PHP — con cuatro, ninguno destaca.
   -------------------------------------------------------------------------- */
.soy-destacados { display: flex; flex-direction: column; gap: 20px; margin-top: clamp(34px, 6vw, 46px); }

.soy-destacado {
  position: relative; display: block;
  padding: 17px 62px 19px 20px;      /* el hueco de la derecha es de la flecha */
  border: 4px solid var(--negro);
  box-shadow: 8px 8px 0 var(--negro);
  transform: rotate(var(--giro, 0deg));
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.soy-destacado:hover { transform: rotate(0deg) translate(3px, 3px); box-shadow: 4px 4px 0 var(--negro); }

.d-rosa  { background: var(--rosa);  color: var(--negro); }
.d-limon { background: var(--limon); color: var(--negro); }
.d-crema { background: var(--crema); color: var(--texto); }
.soy-destacado:hover { color: var(--negro); }

.soy-chip {
  display: inline-block; margin-bottom: 9px;
  background: var(--negro); color: var(--crema);
  font-family: var(--titulo); font-weight: 700;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  padding: 5px 10px;
}

.soy-destacado h2 {
  margin: 0;
  font-family: var(--titulo); font-weight: 700;
  font-size: clamp(21px, 4.6vw, 27px); line-height: 1.06;
  text-transform: uppercase; letter-spacing: .005em;
}
.soy-destacado p {
  margin: 7px 0 0;
  font-family: var(--cuerpo); font-size: 15px; line-height: 1.4;
}

.soy-flecha {
  position: absolute; right: 16px; bottom: 12px;
  font-family: var(--titulo); font-weight: 700; font-size: 30px; line-height: 1;
}

/* --------------------------------------------------------------------------
   3. LA LISTA DE CONTACTO

   Un solo panel negro y las filas separadas por una línea, en vez de una caja
   por renglón: ocho cajas con sombra a un lado se ven como una lista de
   pendientes, no como una tarjeta.
   -------------------------------------------------------------------------- */
.soy-lista {
  margin-top: clamp(34px, 6vw, 46px);
  background: var(--negro);
  border: 4px solid var(--negro);
  box-shadow: 8px 8px 0 var(--negro);
  transform: rotate(.3deg);
}

.soy-fila {
  display: flex; align-items: center; gap: 14px;
  min-height: 62px; padding: 14px 18px;
  color: var(--crema);
  border-bottom: 2px solid var(--borde-tenue);
  transition: background 120ms ease;
}
.soy-fila:last-child { border-bottom: 0; }
.soy-fila:hover { background: var(--limon); color: var(--negro); }

.soy-icono { flex: none; color: var(--limon); }
.soy-fila:hover .soy-icono { color: var(--negro); }

.soy-etiqueta {
  flex: none; width: 84px;
  font-family: var(--titulo); font-weight: 600;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tenue);
}
.soy-fila:hover .soy-etiqueta { color: var(--negro); }

.soy-valor {
  flex: 1; min-width: 0;
  font-family: var(--titulo); font-weight: 700;
  font-size: clamp(17px, 3.4vw, 19px); line-height: 1.15;
  /* break-word y NO anywhere: con `anywhere` el navegador parte la palabra
     para achicar el renglon aunque quepa entera, y "podcast nuevo" salia
     cortado en "podcas / t nuevo" por culpa del sello de PRONTO de al lado.
     Con break-word solo se parte lo que de verdad no cabe — un correo largo. */
  letter-spacing: .01em; overflow-wrap: break-word;
}

/* El correo y los dominios: ver el comentario de $largo en pagina-soy.php. */
.soy-valor.largo { font-size: clamp(14px, 3.1vw, 17px); }

/* El renglón sin liga. Se apaga con un gris que sigue dando 7:1 sobre negro:
   "todavía no" no es lo mismo que "ilegible". */
.soy-fila.apagada { color: #a2968a; }
.soy-fila.apagada:hover { background: none; color: #a2968a; }
.soy-fila.apagada .soy-icono,
.soy-fila.apagada .soy-etiqueta { color: #a2968a; }

.soy-pronto {
  flex: none;
  font-family: var(--titulo); font-weight: 600;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #a2968a; border: 2px solid var(--borde-tenue); padding: 4px 7px;
}

/* --------------------------------------------------------------------------
   4. EL BOTÓN DE LA AGENDA
   -------------------------------------------------------------------------- */
.soy-guardar { margin-top: clamp(30px, 5vw, 40px); text-align: center; }

.soy-boton {
  display: block; width: 100%;
  padding: 18px 20px;
  background: var(--limon); color: var(--negro);
  border: 4px solid var(--negro);
  box-shadow: 8px 8px 0 var(--negro);
  font-family: var(--titulo); font-weight: 700;
  font-size: clamp(16px, 3.4vw, 19px); letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(-.5deg);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.soy-boton:hover {
  background: var(--rosa); color: var(--negro);
  transform: rotate(0deg) translate(3px, 3px); box-shadow: 4px 4px 0 var(--negro);
}

.soy-guardar p {
  margin: 16px 0 0;
  font-family: var(--cuerpo); font-size: 14px; line-height: 1.4;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   5. LA NOTA SUELTA Y EL PIE
   -------------------------------------------------------------------------- */
.soy-nota { margin-top: clamp(34px, 6vw, 46px); }
.soy-nota > :first-child { margin-top: 0; }
.soy-nota > :last-child { margin-bottom: 0; }

.soy-pie { margin-top: clamp(40px, 7vw, 60px); border-top: 4px solid var(--negro); padding-top: 20px; }

.soy-pie a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  color: var(--texto);
}
.soy-pie span {
  font-family: var(--cuerpo); font-size: 15px;
}
.soy-pie strong {
  font-family: var(--titulo); font-weight: 700;
  font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
}
.soy-pie a:hover strong { color: var(--rosa); }

/* --------------------------------------------------------------------------
   6. EL CELULAR ANGOSTO

   En 375px de ancho el renglón se queda con 263px por dentro, y la etiqueta
   fija de 84px se comía un tercio: al valor le sobraban 51px y "podcast" —que
   mide 54— no cabía ni entero. Aquí se aprieta la etiqueta, los huecos y el
   sello de PRONTO para devolverle esos 30px al valor, que es lo único que la
   gente lee de verdad.
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .soy-fila { gap: 11px; padding: 14px 14px; }
  .soy-etiqueta { width: 68px; letter-spacing: .12em; }
  .soy-pronto { font-size: 9px; padding: 4px 6px; letter-spacing: .12em; }
}