/* ==========================================================================
   Tarjeta de Presentación Digital — hoja de estilos común
   HTML5 + CSS3, sin frameworks. Es la misma en todas las tarjetas: lo único
   que cambia por persona son las variables de color del bloque :root.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Colores de marca muestreados de las webs de Imprezion Group. Azul deliberadamente
   más claro que el de la otra tarjeta del grupo, para que se distingan de un vistazo.
   Todas las combinaciones verificadas en contraste WCAG AA. */
:root {
  --brand:         #154BA6;  /* azul Imprezion Group */
  --brand-light:   #2266D2;  /* extremo claro del degradado */

  --bg:            #FFFFFF;
  --bg-page:       #F4F7FD;
  --text:          #111A2E;
  --text-soft:     #576478;
  --action:        var(--brand);
  --action-hover:  var(--brand-light);
  --tint:          #F5F8FE;  /* fondo azulado muy claro para tarjetas */
  --line:          #E2E9F5;
  --line-strong:   #C0CFE8;
  --on-brand:      #FFFFFF;
  --on-brand-soft: #E3EEFB;  /* texto secundario sobre el azul: 4,6:1 en el peor punto del degradado */

  --radius-sm:  12px;
  --radius:     16px;
  --radius-lg:  22px;

  --pad: 24px;
  --max: 650px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
          'Segoe UI', Roboto, system-ui, sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

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

h1, h2, h3, p, figure, blockquote { margin: 0; }

svg { flex: none; }

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Contenedor
   -------------------------------------------------------------------------- */

.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) 40px;
  background: var(--bg);
  overflow: hidden;   /* recorta la banda azul contra las esquinas de la tarjeta */
}

@media (min-width: 720px) {
  body { background: var(--bg-page); }
  .page {
    margin: 48px auto;
    padding: 0 48px 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(21, 75, 166, 0.05),
                0 16px 44px -14px rgba(21, 75, 166, 0.16);
  }
}

/* --------------------------------------------------------------------------
   Banda azul de cabecera — sangra hasta los bordes del contenedor
   -------------------------------------------------------------------------- */

.band {
  margin: 0 calc(var(--pad) * -1) 0;
  padding: 44px var(--pad) 34px;
  background: linear-gradient(158deg, var(--brand) 0%, var(--brand-light) 100%);
  color: var(--on-brand);
}

@media (min-width: 720px) {
  .band {
    margin: 0 -48px 0;
    padding: 54px 48px 40px;
  }
}

.section { margin-top: 40px; }

.section--hairline {
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { text-align: center; }

.avatar {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  background: #E9F0FB;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92),
              0 10px 30px -8px rgba(10, 35, 85, 0.42);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.name {
  font-size: clamp(2rem, 8.5vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.role {
  margin-top: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--on-brand-soft);
  letter-spacing: 0.005em;
}

.quote {
  position: relative;
  margin: 24px auto 0;
  padding-top: 24px;
  max-width: 26em;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--on-brand);
  text-wrap: balance;
}

.quote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
}

.quote span { display: block; color: var(--on-brand-soft); }

/* --------------------------------------------------------------------------
   Acciones rápidas
   -------------------------------------------------------------------------- */

.actions {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 560px) {
  .actions { grid-template-columns: repeat(4, 1fr); }
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 92px;
  padding: 16px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  transition: transform 0.25s var(--ease),
              border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}

.action svg { color: var(--action); }

@media (hover: hover) {
  .action:hover {
    transform: scale(1.02);
    border-color: var(--line-strong);
    box-shadow: 0 6px 20px -10px rgba(21, 75, 166, 0.26);
  }
}

.action:active { transform: scale(0.985); }

/* --------------------------------------------------------------------------
   Datos de contacto escritos, para copiar y pegar
   -------------------------------------------------------------------------- */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.contact + .contact { border-top: 1px solid var(--line); }

.contact__text { min-width: 0; }

.contact__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.contact__value {
  display: block;
  margin-top: 3px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;   /* el correo largo no desborda en móvil */
  -webkit-user-select: all;  /* un toque selecciona el dato entero */
  user-select: all;
}

.contact__copy {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background-color 0.2s var(--ease);
}

@media (hover: hover) {
  .contact__copy:hover {
    color: var(--action);
    border-color: var(--line-strong);
  }
}

.contact__copy.is-done {
  color: #FFFFFF;
  background: var(--action);
  border-color: var(--action);
}

/* --------------------------------------------------------------------------
   Tarjeta "Quién soy"
   -------------------------------------------------------------------------- */

.card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint);
}

.card h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   Proyectos
   -------------------------------------------------------------------------- */

.projects {
  display: grid;
  gap: 14px;
}

.project {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  transition: transform 0.25s var(--ease),
              border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
  .project:hover {
    transform: scale(1.02);
    border-color: var(--line-strong);
    box-shadow: 0 10px 30px -14px rgba(21, 75, 166, 0.28);
  }
}

.project__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Encaja por altura y respeta la proporción: admite isotipos cuadrados
   (Estrategias Emergentes) y logotipos apaisados (Anothen) sin deformarlos. */
.project__logo {
  height: 54px;
  width: auto;
  max-width: 148px;
  border-radius: 14px;
  object-fit: contain;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--line);
}

.project__name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.project__desc {
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-soft);
}

.project__foot {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--action);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--action);
  background: var(--bg);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

@media (hover: hover) {
  .btn-line:hover { background: var(--action); color: #FFF; }
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

@media (hover: hover) {
  .btn-icon:hover { border-color: var(--line-strong); color: var(--text); }
}

/* --------------------------------------------------------------------------
   CTA principal
   -------------------------------------------------------------------------- */

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 18px 24px;
  border-radius: var(--radius);
  background: var(--action);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}

@media (hover: hover) {
  .cta:hover { background: var(--action-hover); transform: scale(1.02); }
}

.cta:active { transform: scale(0.99); }

.cta svg { transition: transform 0.25s var(--ease); }

@media (hover: hover) {
  .cta:hover svg { transform: translateX(3px); }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.social {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-soft);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease);
}

@media (hover: hover) {
  .social a:hover {
    color: var(--action);
    border-color: var(--line-strong);
    transform: scale(1.06);
  }
}

.footer__buttons {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Rótulos cortos y píldora que crece en vez de desbordarse: así el texto cabe
   en una línea incluso en pantallas de 360 px. */
.footer__buttons .btn-line {
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 8px 10px;
  gap: 7px;
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: center;
}

.footer__hint {
  margin: 22px 0 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.footer__logo {
  width: 128px;
  height: auto;
  margin: 30px auto 0;
  opacity: 0.85;
}

.footer__web {
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 500;
}

.footer__web a {
  color: var(--action);
  transition: color 0.2s var(--ease);
}

@media (hover: hover) {
  .footer__web a:hover { color: var(--action-hover); }
}

.legal {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--action);
  color: #FFF;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 10;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Página de perfil
   -------------------------------------------------------------------------- */

/* Los márgenes negativos compensan el relleno: el enlace se ve en el mismo
   sitio, pero la zona que responde al dedo pasa a medir 44 px de alto. */
.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 14px;
  margin: -11px 0 15px -14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-brand-soft);
  transition: color 0.2s var(--ease);
}

@media (hover: hover) {
  .back:hover { color: var(--on-brand); }
}

.page-title {
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--on-brand);
}

.lead {
  margin-top: 14px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--on-brand-soft);
}

/* --- Cargos (Liderazgo y gestión) ------------------------------------- */

.roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

@media (min-width: 560px) {
  .roles { grid-template-columns: 1fr 1fr; gap: 12px 22px; }
}

.roles li {
  position: relative;
  padding-left: 21px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
}

.roles li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-light);
}

/* --- Idiomas ---------------------------------------------------------- */

.langs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

@media (min-width: 480px) {
  .langs { grid-template-columns: 1fr 1fr; }
}

.langs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--tint);
}

.langs b { font-weight: 600; font-size: 0.9375rem; }

.langs span { color: var(--text-soft); font-size: 0.875rem; }

.prose p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-soft);
}

.prose p + p { margin-top: 14px; }

.prose strong { color: var(--text); font-weight: 600; }

.timeline { list-style: none; margin: 0; padding: 0; }

.timeline li {
  position: relative;
  padding: 0 0 22px 26px;
  border-left: 1px solid var(--line);
}

.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }

.timeline li::before {
  content: '';
  position: absolute;
  left: -4.5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--action);
}

.timeline h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.timeline p {
  margin-top: 4px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-soft);
}

.form { display: grid; gap: 12px; }

.field { display: grid; gap: 7px; }

.field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.2s var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--action);
}

.field textarea { resize: vertical; min-height: 120px; }

.form .cta { margin-top: 4px; border: 0; cursor: pointer; font-family: inherit; }

/* --------------------------------------------------------------------------
   Animaciones (Fade Up, 300 ms)
   -------------------------------------------------------------------------- */

/* Se ocultan solo si hay JS: sin JS todo el contenido es visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}