@font-palette-values --plata {
  font-family: "Nabla";
  override-colors: 0 #f5f7fb, 1 #c9cfdb, 2 #eef1f6, 3 #8e96a8, 4 #b7f0ff, 5 #5d6578, 6 #e4c8ff, 7 #343a4a, 8 #ffffff, 9 #aab2c2;
}

:root {
  --fondo: #06070c;
  --fondo-2: #0d0f17;
  --panel: #12141d;
  --linea: rgba(214, 222, 240, .16);
  --texto: #eef0f6;
  --suave: #a9afbf;
  --cromo: linear-gradient(100deg, #ffffff 0%, #c4cad6 24%, #f5f7fb 44%, #a7aebd 62%, #e8ecf5 82%, #ffffff 100%);
  --holo: linear-gradient(105deg, #b9f3ff, #d9c6ff 38%, #ffc9e8 64%, #cdfbe0);
  --ancho: 1240px;
  --radio: 18px;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid #b9f3ff; outline-offset: 3px; border-radius: 4px; }
.envoltura { width: min(var(--ancho), 100% - 40px); margin-inline: auto; }


/* Encabezado */
.encabezado {
  position: sticky; top: 0; z-index: 20;
  background: rgba(6, 7, 12, .78); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.encabezado .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.marca { font-weight: 700; font-size: 20px; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.menu { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.menu a { text-decoration: none; color: var(--suave); transition: color .2s; }
.menu a:hover, .menu a[aria-current] { color: var(--texto); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.boton:hover { transform: translateY(-2px); }
.boton-primario { background: var(--cromo); color: #0a0c12; box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset, 0 10px 34px rgba(185, 243, 255, .16); }
.boton-primario:hover { box-shadow: 0 0 0 1px #fff inset, 0 12px 44px rgba(217, 198, 255, .34); }
.boton-secundario { border-color: var(--linea); color: var(--texto); background: transparent; }
.boton-secundario:hover { border-color: #fff; }
.menu .boton { min-height: 40px; padding: 8px 18px; font-size: 14px; color: #0a0c12; }

/* Titulares */
h1, h2 { font-family: "Orbitron", "Hanken Grotesk", sans-serif; line-height: 1.12; letter-spacing: -.01em; font-weight: 600; }
h3 { font-weight: 700; }
h1 { font-size: clamp(34px, 4.6vw, 64px); overflow-wrap: anywhere; hyphens: manual; }
h2 { font-size: clamp(27px, 3.3vw, 46px); }
.titulo-rosa { background: linear-gradient(100deg, #ffc9e8 0%, #e4c8ff 45%, #c9d8ff 80%, #cdf4ea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
h3 { font-size: 24px; letter-spacing: -.02em; line-height: 1.18; }
.cromado { background: var(--cromo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.antetitulo { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
.antetitulo.holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.parrafo-grande { font-size: clamp(18px, 1.5vw, 21px); color: var(--suave); }
.seccion { padding-block: clamp(72px, 9vw, 128px); }
.cabeza-seccion { display: grid; gap: 16px; max-width: 800px; margin-bottom: 48px; }

/* Secciones intercaladas: degradado rosa */
.rosa {
  --texto: #15121f; --suave: #3f3a4e; --linea: rgba(40, 20, 70, .2); --panel: rgba(255, 255, 255, .52);
  color: var(--texto);
  background: linear-gradient(105deg, #ffc9e8 0%, #e4c8ff 40%, #c9d8ff 72%, #cdf4ea 100%);
}
.rosa .cromado { background: none; color: #15121f; }
.rosa .antetitulo { color: #4d3b6b; }
.rosa .boton-primario { background: #15121f; color: #fff; box-shadow: none; }
.rosa .formato span { color: #15121f; }
.rosa .campo { color: #2a2438; }
.rosa input, .rosa select, .rosa textarea { background: rgba(255, 255, 255, .78); }
.rosa input:focus, .rosa select:focus, .rosa textarea:focus { outline-color: #15121f; }
.rosa :focus-visible { outline-color: #15121f; }
.rosa .miniatura { background: linear-gradient(135deg, #fff, rgba(255,255,255,.3)); }
.rosa .video { --suave: #a9afbf; --linea: rgba(214, 222, 240, .16); }
.lista-barra a { text-decoration: none; display: block; }
.lista-barra a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero .envoltura { position: relative; display: grid; grid-template-columns: 1.12fr .88fr; gap: 48px; align-items: center; padding-block: 56px 72px; }
.hero-texto { display: grid; gap: 26px; position: relative; z-index: 2; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-visual { position: relative; aspect-ratio: 4 / 5; max-height: 660px; justify-self: end; width: 100%; max-width: 500px; }
.retrato {
  position: absolute; inset: 7% 6% 0 6%; border-radius: 240px 240px 22px 22px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.45);
  background: linear-gradient(160deg, #ffc9e8 0%, #e4c8ff 42%, #c9d8ff 76%, #cdf4ea 100%);
  display: flex; align-items: flex-end; justify-content: center;
}
.retrato img { width: 96%; height: auto; max-height: 97%; object-fit: contain; object-position: bottom; }
#cromo { position: absolute; width: 44%; aspect-ratio: 1; bottom: -4%; right: -10%; z-index: 3; pointer-events: none; }
.cromo-respaldo {
  position: absolute; width: 30%; aspect-ratio: 1; bottom: 2%; right: -5%; border-radius: 50%; z-index: 4;
  background: conic-gradient(from 40deg, #fff, #8e96a8, #b9f3ff, #e4c8ff, #fff, #5d6578, #ffc9e8, #fff);
  filter: blur(1px);
}
.destello { position: absolute; width: 58px; left: -6%; top: 14%; z-index: 3; fill: #f5f7fb; animation: girar 14s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Barra de reconocimientos */
.barra { border-block: 1px solid var(--linea); background: var(--fondo-2); }
.barra .envoltura { display: grid; grid-template-columns: 1fr; gap: 16px; padding-block: 26px; }
.lista-barra { display: grid; grid-template-columns: repeat(5, auto); gap: 14px 28px; justify-content: space-between; list-style: none; padding: 0; font-weight: 700; color: #d9dde7; letter-spacing: -.01em; font-size: 16px; }
.lista-barra small { display: block; font-weight: 500; font-size: 12px; color: var(--suave); letter-spacing: 0; }

/* Servicios */
.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tarjeta {
  position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 320px; padding: 30px;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  text-decoration: none; transition: transform .25s, border-color .25s;
}
.tarjeta:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.55); }
.tarjeta .numero { font-size: 13px; color: var(--suave); font-weight: 700; letter-spacing: .12em; }
.tarjeta p { color: var(--suave); font-size: 17px; }
.tarjeta .ir { margin-top: auto; font-weight: 700; }

/* Diferenciador */
.diferenciador { background: radial-gradient(90% 90% at 86% 10%, rgba(185,243,255,.12), transparent 60%), radial-gradient(70% 90% at 10% 90%, rgba(228,200,255,.13), transparent 60%), var(--fondo-2); }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.lista-lineas { list-style: none; padding: 0; }
.lista-lineas li { padding-block: 24px; border-top: 1px solid var(--linea); display: grid; gap: 8px; }
.lista-lineas li:last-child { border-bottom: 1px solid var(--linea); }
.lista-lineas p { color: var(--suave); font-size: 17px; }

/* Video */
.video { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); background: linear-gradient(130deg, #1a1d29, #06070c 60%), #06070c; text-decoration: none; }
.video::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg at 62% 40%, transparent 0 60%, rgba(185,243,255,.2), rgba(228,200,255,.24), transparent 90%); }
.reproducir { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--cromo); }
.reproducir svg { width: 28px; margin-left: 4px; }
.video-etiqueta { position: absolute; left: 24px; bottom: 20px; right: 24px; color: var(--suave); font-size: 15px; }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cifra { padding: 28px 0; border-top: 1px solid var(--linea); display: grid; gap: 8px; }
.cifra b { font-family: "Nabla", "Hanken Grotesk", sans-serif; font-palette: --plata; font-weight: 400; font-size: clamp(44px, 5.2vw, 70px); line-height: 1; }
.cifra span { color: var(--suave); font-size: 16px; }

/* Propósito */
.proposito { border-radius: 26px; padding: clamp(32px, 6vw, 72px); background: #0f1119; position: relative; overflow: hidden; border: 1px solid var(--linea); display: grid; gap: 22px; }
.proposito::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--holo); }
.proposito p { max-width: 760px; }

/* Formularios */
.formulario { display: grid; gap: 16px; }
.formulario.dos { grid-template-columns: 1fr 1fr; }
.campo { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: #cfd3de; }
.campo.todo { grid-column: 1 / -1; }
input, select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 16px; font-weight: 400;
  color: var(--texto); background: #0a0c13; border: 1px solid var(--linea); border-radius: 10px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #b9f3ff; outline-offset: 1px; }
.bloque-recurso { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.nota-privacidad { font-size: 13px; color: var(--suave); }

/* Blog e Instagram */
.rejilla-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rejilla-blog a { text-decoration: none; display: grid; gap: 14px; }
.miniatura { aspect-ratio: 3 / 2; border-radius: 14px; background: linear-gradient(135deg, #272b39, #0d0f17 70%); border: 1px solid var(--linea); }
.rejilla-blog small { color: var(--suave); }
.rejilla-ig { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.rejilla-ig div { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--linea); background: linear-gradient(145deg, #2d3140, #0d0f17); }
.rejilla-ig div:nth-child(2n) { background: linear-gradient(145deg, #1a1d29, #3a3346); }
.fila-titulo { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.enlace { font-weight: 700; text-underline-offset: 4px; }

/* Proyectos */
.proyectos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.proyectos a { display: grid; gap: 16px; justify-items: center; text-decoration: none; }
.proyecto-img {
  width: 100%; aspect-ratio: 1; display: grid; place-items: center; text-align: center; padding: 16px;
  border-radius: 20px; background: radial-gradient(90% 90% at 80% 10%, rgba(228,200,255,.3), transparent 60%), #0d0f17;
  color: #f5f7fb; font-family: "Orbitron", sans-serif; font-weight: 600; font-size: clamp(19px, 2.2vw, 30px); line-height: 1.15;
  transition: transform .25s;
}
.proyectos a:hover .proyecto-img { transform: translateY(-4px); }
.pastilla { padding: 10px 22px; border-radius: 999px; background: #15121f; color: #fff; font-size: 15px; font-weight: 700; }

/* Sobre mí */
.texto-corrido { display: grid; gap: 20px; color: var(--suave); font-size: 19px; }
.linea-tiempo { list-style: none; padding: 0; }
.linea-tiempo li { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding-block: 24px; border-top: 1px solid var(--linea); align-items: baseline; }
.linea-tiempo li:last-child { border-bottom: 1px solid var(--linea); }
.linea-tiempo b { font-family: "Orbitron", sans-serif; font-size: 28px; font-weight: 600; background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.linea-tiempo p { color: var(--suave); }
.proposito-rosa { display: grid; gap: 24px; justify-items: start; }
.rosa .boton-secundario { border-color: #15121f; color: #15121f; }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding-block: 64px 36px; background: var(--fondo-2); }
.pie-redes { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: baseline; }
.pie-redes .grande { font-size: clamp(38px, 6vw, 80px); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; text-decoration: none; }
.pie-redes .grande:hover { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pie-chicas { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; color: var(--suave); }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--linea); font-size: 15px; color: var(--suave); }
.pie a { text-underline-offset: 3px; }
.pie-enlaces a, .pie-chicas a { text-decoration: none; }
.pie-enlaces a:hover, .pie-chicas a:hover { color: var(--texto); }

/* Conferencias */
.hero-interno { padding-block: 80px 56px; display: grid; gap: 24px; max-width: 980px; }
.temas { list-style: none; padding: 0; counter-reset: tema; }
.temas li { counter-increment: tema; display: grid; grid-template-columns: 70px 1fr 1.25fr; gap: 24px; padding-block: 30px; border-top: 1px solid var(--linea); align-items: start; }
.temas li:last-child { border-bottom: 1px solid var(--linea); }
.temas li::before { content: "0" counter(tema); font-weight: 700; color: var(--suave); padding-top: 3px; }
.temas p { color: var(--suave); font-size: 17px; }
.formato { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.formato div { padding: 26px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); display: grid; gap: 10px; align-content: start; }
.formato b { font-size: 26px; letter-spacing: -.03em; line-height: 1.1; }
.formato span { font-size: 15px; font-weight: 700; color: #d9dde7; }
.formato p { color: var(--suave); font-size: 16px; }
.precio { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 64px; }
.precio .monto { font-family: "Orbitron", sans-serif; letter-spacing: -.01em; font-size: clamp(32px, 4vw, 54px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; margin-block: 8px 10px; }
.precio ul { padding-left: 20px; color: var(--suave); display: grid; gap: 12px; font-size: 17px; }

@media (max-width: 980px) {
  .hero .envoltura, .dos-columnas, .bloque-recurso, .precio { grid-template-columns: 1fr; }
  .hero-visual { justify-self: center; max-width: 430px; }
  .servicios, .rejilla-blog { grid-template-columns: 1fr; }
  .tarjeta { min-height: 0; }
  .lista-barra { grid-template-columns: 1fr; justify-content: flex-start; }
  .rejilla-ig { grid-template-columns: repeat(3, 1fr); }
  .proyectos { grid-template-columns: 1fr 1fr; }
  .formato { grid-template-columns: 1fr 1fr; }
  .temas li { grid-template-columns: 44px 1fr; }
  .temas li p { grid-column: 2; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .cifras, .formato, .formulario.dos { grid-template-columns: 1fr; }
  .hero-acciones .boton { width: 100%; }
  .linea-tiempo li { grid-template-columns: 1fr; gap: 6px; }
  .pastilla { font-size: 14px; padding: 9px 14px; text-align: center; }
  .hero .envoltura { padding-block: 36px 56px; }
  .destello { left: -2%; }
  .video-etiqueta { display: none; }
  #cromo { right: -5%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* Sitio real */
.saltar { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; z-index: 50; }
.saltar:focus { left: 8px; }
.sin-margen { margin: 0; }
.pegada { padding-top: 24px; }
.separado { margin-top: 32px; }
.alto-minimo { min-height: 62vh; display: grid; align-items: center; }
.h1-interno { font-size: clamp(30px, 4vw, 54px); }
.h2-chico { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 18px; }
.envoltura-texto { width: min(760px, 100% - 40px); margin-inline: auto; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vacio { display: grid; gap: 18px; justify-items: start; padding-block: 24px; }
.aviso-ok { background: rgba(255,255,255,.62); border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; }
.aviso-ok h2 { margin-bottom: 8px; }
.aviso-error { background: #fff0f3; color: #8c1230; border: 1px solid #f0b4c2; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 15px; }
.nota-privacidad a { color: inherit; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .video-etiqueta { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 40px; }
.testimonios figure { margin: 0; padding: 26px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); }
.testimonios blockquote { margin: 0 0 14px; font-size: 18px; }
.testimonios figcaption { color: var(--suave); font-size: 15px; }
.logo-barra { height: 34px; width: auto; max-width: 150px; object-fit: contain; margin-bottom: 6px; }
.proyecto-foto { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; transition: transform .25s; }
.proyectos a:hover .proyecto-foto { transform: translateY(-4px); }
.rejilla-ig a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; }
.rejilla-ig img { width: 100%; height: 100%; object-fit: cover; }
span.miniatura, img.miniatura { display: block; width: 100%; object-fit: cover; }
.talleres { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.taller { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 30px; display: grid; gap: 12px; align-content: start; }
.taller p, .taller li { color: var(--suave); font-size: 17px; }
.taller ul { padding-left: 20px; display: grid; gap: 8px; margin: 0; }
.taller b { color: var(--texto); }
.duracion { font-size: 13px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lista-enlaces { list-style: none; padding: 0; }
.lista-enlaces a { display: grid; gap: 4px; padding-block: 16px; border-top: 1px solid var(--linea); text-decoration: none; }
.lista-enlaces a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.lista-enlaces span { color: var(--suave); font-size: 15px; }
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.producto { display: grid; gap: 10px; align-content: start; padding: 18px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none; }
.producto img, .producto .miniatura { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: 12px; }
.producto p { color: var(--suave); font-size: 16px; }
.producto .ir { font-weight: 700; font-size: 15px; }
.articulo { padding-block: 64px 80px; }
.titulo-articulo { font-size: clamp(30px, 4vw, 48px); margin-block: 14px; }
.meta-articulo { color: var(--suave); font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.etiqueta { border: 1px solid var(--linea); border-radius: 999px; padding: 3px 12px; font-size: 13px; }
.portada-articulo { width: 100%; border-radius: var(--radio); margin-top: 28px; }
.contenido { margin-block: 32px; font-size: 19px; display: grid; gap: 18px; }
.contenido h2, .contenido h3 { font-family: "Hanken Grotesk", sans-serif; font-size: 27px; letter-spacing: -.02em; margin-top: 16px; }
.contenido a { color: #d9c6ff; }
.contenido img { border-radius: 12px; height: auto; }
.contenido blockquote { margin: 0; padding-left: 18px; border-left: 3px solid #e4c8ff; color: var(--suave); }
.menu-movil { display: none; position: relative; }
.menu-movil summary { list-style: none; cursor: pointer; display: grid; gap: 5px; padding: 10px; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary span { display: block; width: 24px; height: 2px; background: var(--texto); }
.menu-movil nav { position: absolute; right: 0; top: 48px; width: 230px; display: grid; background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 8px; }
.menu-movil nav a { padding: 12px; text-decoration: none; border-radius: 8px; }
.menu-movil nav a:hover { background: rgba(255,255,255,.08); }
.pie-derechos { margin-left: auto; }
@media (max-width: 980px) {
  .menu { display: none; }
  .menu-movil { display: block; }
  .talleres { grid-template-columns: 1fr; }
  .rejilla-blog { grid-template-columns: 1fr; }
  .pie-derechos { margin-left: 0; }
}
