/* ==========================================================
   in-novus ingeniería · Tarjeta digital
   Colores de acento tomados del archivo del logo (#0754A6).
   Para volver al morado de la tarjeta impresa, cambiar los
   tokens de acento por los valores comentados.
   ========================================================== */

:root {
  --color-fondo: #FFFFFF;
  --color-texto: #1C1C1C;
  --color-texto-suave: #4A4A4A;
  --color-acento: #0754A6;          /* morado impreso: #4B3585 */
  --color-acento-claro: #E6EEF8;    /* morado impreso: #EDE9F5 */
  --color-apellido: #546380;        /* morado impreso: #6B5E86 */
  --color-sobre-acento: #FFFFFF;

  --fuente: "Poppins", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --margen: clamp(1.25rem, 5vw, 3rem);
  --separacion-linea: clamp(1.5rem, 4vw, 3.5rem);
  --duracion-linea: 600ms;

  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #16181D;
    --color-texto: #F2F0F6;
    --color-texto-suave: #B9B8C4;
    --color-acento: #7FAEEB;        /* morado impreso: #A58FE0 */
    --color-acento-claro: #222B3A;
    --color-apellido: #A9B6CC;
    --color-sobre-acento: #16181D;
  }
}

*, *::before, *::after { box-sizing: inherit; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }

ul { list-style: none; padding: 0; margin: 0; }

a:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Página ---------- */

.pagina {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.5rem, 4vh, 3rem);
  max-width: 960px;
  margin: 0 auto;
  padding: var(--margen);
  padding-top: max(var(--margen), env(safe-area-inset-top, 0px));
  padding-bottom: max(var(--margen), env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--margen), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margen), env(safe-area-inset-right, 0px));
}

/* ---------- Logo ---------- */

.marca-enlace { display: inline-block; }

.marca img {
  display: block;
  width: clamp(140px, 18vw, 220px);
  height: auto;
}

/* ---------- Contenido: servicios | línea | persona ---------- */

.contenido {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--separacion-linea);
}

.servicios ul {
  text-align: right;
  display: grid;
  gap: 0.5rem;
}

.servicios li {
  color: var(--color-texto-suave);
  font-size: clamp(0.9rem, 0.5vw + 0.8rem, 1.05rem);
}

.divisor {
  width: 4px;
  align-self: stretch;
  background: var(--color-acento);
  border-radius: 2px;
}

/* ---------- Persona ---------- */

.nombre {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-texto);
}

.apellidos {
  display: block;
  margin-top: 0.35rem;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw + 0.6rem, 1.4rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-apellido);
}

/* ---------- Filas de contacto ---------- */

.contacto {
  margin-top: clamp(1.25rem, 3.5vh, 2rem);
  display: grid;
  gap: 0.125rem;
}

.contacto a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.3rem 0.75rem 0.3rem 0.4rem;
  margin-left: -0.4rem;             /* alinea el ícono con el nombre */
  border-radius: 8px;
  color: var(--color-texto-suave);
  font-size: clamp(0.9rem, 0.5vw + 0.8rem, 1.05rem);
  transition: background-color 150ms ease, color 150ms ease;
}

.contacto a:hover {
  background: var(--color-acento-claro);
  color: var(--color-texto);
}

.contacto .texto {
  min-width: 0;
  overflow-wrap: break-word;
}

.icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-acento);
}

.icono svg,
.boton svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-sobre-acento);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Botón ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  margin-top: clamp(1.25rem, 3.5vh, 2rem);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font-weight: 600;
  font-size: 1rem;
  transition: filter 150ms ease, transform 150ms ease;
}

.boton svg { width: 18px; height: 18px; }

.boton:hover { filter: brightness(1.12); }
.boton:active { transform: translateY(1px); }

/* ---------- Pie ---------- */

.pie {
  text-align: right;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.pie a:hover { color: var(--color-acento); }

/* ---------- Animación única: la línea crece al cargar ---------- */

@media (prefers-reduced-motion: no-preference) {
  .divisor {
    transform-origin: top;
    animation: crecer-y var(--duracion-linea) cubic-bezier(.2, .7, .2, 1) both;
  }

  .servicios,
  .persona,
  .pie {
    animation: aparecer 500ms ease-out both;
    animation-delay: calc(var(--duracion-linea) - 100ms);
  }

  @keyframes crecer-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes crecer-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ---------- ≥ 1200 px: más aire ---------- */

@media (min-width: 1200px) {
  .pagina { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* ---------- Móvil (< 768 px) ---------- */

@media (max-width: 767px) {
  .pagina {
    --margen: 2rem;
    align-content: start;
  }

  .contenido {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    align-content: start;
  }

  .persona  { order: 1; }
  .servicios { order: 2; }
  .servicios ul { text-align: left; }

  .divisor { display: none; }

  /* La línea se vuelve horizontal, debajo del nombre */
  .nombre::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 1rem;
    background: var(--color-acento);
    border-radius: 2px;
    transform-origin: left;
  }

  .boton {
    display: flex;
    width: 100%;
  }

  /* El botón va al final, después de los servicios */
  .persona  { display: contents; }
  .nombre   { order: 1; }
  .contacto { order: 2; margin-top: -0.5rem; }
  .servicios { order: 3; }
  .boton    { order: 4; margin-top: 0; }

  .pie { text-align: left; }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .nombre::after {
    animation: crecer-x var(--duracion-linea) cubic-bezier(.2, .7, .2, 1) both;
  }
  .nombre .apellidos,
  .contacto,
  .servicios,
  .boton {
    animation: aparecer 500ms ease-out both;
    animation-delay: calc(var(--duracion-linea) - 100ms);
  }
}

@media (max-width: 479px) {
  .pagina { --margen: 1.25rem; }
}

/* ---------- Pantallas bajas (móvil horizontal) ---------- */

@media (max-height: 639px) {
  .pagina {
    gap: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }
  .contacto,
  .boton { margin-top: 1rem; }
  .marca img { width: clamp(120px, 14vw, 180px); }
  .nombre { font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem); }
}