/* miguelvielma.com v4. Tokens del Manual de marca personal v2.0.
   Contraste (WCAG 2.1): papel/tinta 16,9:1 · naranja/tinta 7,5:1 · arena/grafito 9,6:1 · gris/tinta 7,2:1
   El naranja senal NUNCA va sobre fondo claro (2,3:1): ahi se usa --naranja-prof (4,8:1). */

@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --tinta: #14161b;
  --grafito: #262a31;
  --grafito-2: #30353d;
  --linea: #3a3f48;
  --papel: #f6f7f8;
  --gris: #9aa1ac;
  --gris-claro: #5f6672;      /* texto secundario sobre papel, 5,4:1 */
  --naranja: #f18f01;
  --naranja-prof: #a65a00;
  --arena: #d0d6b3;

  --texto: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Escala tipografica 17 px de base, razon 1,25 aprox. */
  --t-0: 0.8125rem;   /* 13 */
  --t-1: 1.0625rem;   /* 17 */
  --t-2: 1.3125rem;   /* 21 */
  --t-3: 1.75rem;     /* 28 */
  --t-4: clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  --t-5: clamp(2.5rem, 1.6rem + 4vw, 3.75rem);

  --corte: 18px;                 /* la esquina cortada del manual */
  --ancho: 72rem;
  --lateral: clamp(1rem, 4vw, 2.5rem);
  --bloque: clamp(4.5rem, 10vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--papel);
  font: 400 var(--t-1)/1.6 var(--texto);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--naranja); color: var(--tinta); }

:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }
.saltar {
  position: absolute; left: var(--lateral); top: -4rem; z-index: 10;
  background: var(--naranja); color: var(--tinta); padding: 0.6rem 1rem; font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 1rem; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.envoltura { width: min(100% - 2 * var(--lateral), var(--ancho)); margin-inline: auto; }

/* ------------------------------------------------------------- la esquina cortada */
.corte { clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%); }

/* ------------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.4rem;
  font: 600 var(--t-1)/1.2 var(--texto); text-decoration: none; cursor: pointer;
  border: 0; color: var(--tinta); background: var(--naranja);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: background-color 0.15s ease;
}
.boton:hover { background: #ffa224; }
.boton--sobrio { background: var(--grafito-2); color: var(--papel); }
.boton--sobrio:hover { background: var(--linea); }
.boton--claro { background: var(--tinta); color: var(--papel); }
.boton--claro:hover { background: var(--grafito); }

/* ------------------------------------------------------------- cabecera */
.cabecera { position: sticky; top: 0; z-index: 5; background: rgb(20 22 27 / 0.92); backdrop-filter: blur(8px); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.cabecera__marca { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; font-weight: 600; }
.cabecera__marca img { width: 2.25rem; height: 2.25rem; }
.menu { display: flex; align-items: center; gap: clamp(0.75rem, 2.5vw, 2rem); }
.menu a { text-decoration: none; color: var(--gris); font-weight: 600; padding: 0.5rem 0; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--papel); }
.menu .boton { color: var(--tinta); padding: 0.55rem 1.5rem 0.55rem 1.1rem; min-height: 2.5rem; }
.menu__abrir { display: none; }

@media (max-width: 760px) {
  .menu__abrir {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.9rem;
    background: var(--grafito); color: var(--papel); border: 0; font: 600 var(--t-1) var(--texto); cursor: pointer;
  }
  .menu {
    position: absolute; inset: 4.25rem 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--tinta); padding: 0.5rem var(--lateral) 1.25rem; border-bottom: 1px solid var(--linea);
  }
  .menu a { padding: 0.85rem 0; border-bottom: 1px solid var(--grafito); }
  .menu .boton { margin-top: 1rem; border: 0; }
  .js .menu:not(.menu--abierto) { display: none; }
}

/* ------------------------------------------------------------- portada (pagina 1 del manual) */
.portada { padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(3rem, 8vw, 6rem); }
.portada__logo { width: min(100%, 52rem); height: auto; }
.portada__frase {
  margin-top: clamp(1.75rem, 4vw, 2.75rem); max-width: 22ch;
  font: 800 var(--t-5)/1.02 var(--texto); letter-spacing: -0.025em;
}
.portada__frase span { display: block; }
.portada__frase .final { color: var(--naranja); }
.portada__bajada { margin-top: 1.5rem; max-width: 46ch; color: var(--gris); font-size: var(--t-2); line-height: 1.5; }
.portada__acciones { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Un unico momento orquestado: las lineas de la frase se escriben una vez al cargar. */
@media (prefers-reduced-motion: no-preference) {
  .js .portada__frase span { clip-path: inset(0 100% 0 0); animation: escribir 0.7s steps(18, end) forwards; }
  .js .portada__frase span:nth-child(2) { animation-delay: 0.75s; }
  .js .portada__frase span:nth-child(3) { animation-delay: 1.5s; }
}
@keyframes escribir { to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------- secciones */
.seccion { padding-block: var(--bloque); }
.seccion--grafito { background: var(--grafito); }
.seccion__titulo { font: 800 var(--t-4)/1.05 var(--texto); letter-spacing: -0.02em; max-width: 24ch; }
.seccion__intro { margin-top: 1rem; max-width: 60ch; color: var(--gris); font-size: var(--t-2); line-height: 1.5; }

/* Manifiesto + tarjetas (pagina 3 del manual) */
.esencia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.esencia__manifiesto { font: 800 var(--t-5)/1.02 var(--texto); letter-spacing: -0.025em; }
.esencia__manifiesto .final { color: var(--naranja); }
.esencia__texto { margin-top: 1.75rem; max-width: 48ch; color: var(--gris); }
.tarjetas { display: grid; gap: 1rem; }
.tarjeta { background: var(--grafito); padding: 1.5rem 1.6rem 1.6rem; }
.seccion--grafito .tarjeta { background: var(--grafito-2); }
.tarjeta__nombre { font: 500 var(--t-0)/1.4 var(--mono); color: var(--arena); }
.tarjeta__texto { margin-top: 0.5rem; }
@media (max-width: 860px) { .esencia { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- servicios */
.servicios { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.servicio { display: flex; flex-direction: column; background: var(--grafito-2); padding: 1.75rem 1.6rem; }
.servicio h3 { font: 800 var(--t-3)/1.1 var(--texto); letter-spacing: -0.015em; }
.servicio p { margin-top: 0.75rem; color: var(--gris); }
.servicio ul { margin-top: 1.25rem; display: grid; gap: 0.45rem; }
.servicio li { padding-left: 1.25rem; position: relative; }
.servicio li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 0.5rem; background: var(--naranja); }
.servicio__precio { margin-top: auto; padding-top: 1.5rem; font: 500 var(--t-1)/1.4 var(--mono); color: var(--arena); }
.servicio__precio strong { display: block; font: 800 var(--t-3)/1.1 var(--texto); color: var(--papel); }
.nota { margin-top: 1.25rem; color: var(--gris); font-size: var(--t-0); }
@media (max-width: 960px) { .servicios { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- demo del bot (pagina 9: el lienzo enmarcado) */
.demo { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1rem; }
.lienzo { background: var(--grafito); padding: clamp(1rem, 3vw, 2.25rem); }
.lienzo__marco { border: 1px solid var(--arena); padding: clamp(1rem, 2.5vw, 1.75rem); min-height: 27rem; display: flex; flex-direction: column; }
.lienzo__pie { margin-top: 0.85rem; text-align: center; font: 400 var(--t-0)/1.4 var(--mono); color: var(--arena); }

.chat { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.chat__cabeza { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.9rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--linea); }
.chat__avatar { width: 2.25rem; height: 2.25rem; }
.chat__nombre { font-weight: 600; line-height: 1.2; }
.chat__estado { font-size: var(--t-0); color: var(--gris); }
.chat__mensajes { display: flex; flex-direction: column; gap: 0.6rem; }
.burbuja { max-width: 85%; padding: 0.65rem 0.9rem; line-height: 1.45; }
.burbuja--bot { align-self: flex-start; background: var(--papel); color: var(--tinta); }
.burbuja--cliente { align-self: flex-end; background: var(--grafito-2); }
.chat__opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 1rem; }
.chip {
  min-height: 2.75rem; padding: 0.5rem 1rem; cursor: pointer; border: 1px solid var(--arena);
  background: transparent; color: var(--papel); font: 600 var(--t-0)/1.2 var(--texto);
}
.chip:hover { background: var(--grafito-2); }
@media (prefers-reduced-motion: no-preference) {
  .burbuja--nueva { animation: aparecer 0.25s ease-out; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }

.terminal { background: var(--tinta); padding: 1.5rem; font: 400 var(--t-0)/1.7 var(--mono); color: var(--papel); display: flex; flex-direction: column; }
.terminal__titulo { font-family: var(--texto); font-size: var(--t-1); font-weight: 600; margin-bottom: 0.25rem; }
.terminal__ayuda { font-family: var(--texto); color: var(--gris); margin-bottom: 1rem; }
.terminal__lineas { display: grid; gap: 0.15rem; }
.terminal__lineas .prompt { color: var(--naranja); }
.terminal__lineas .ok { color: var(--arena); }
.terminal__cursor { display: inline-block; width: 0.6em; height: 1.1em; background: var(--naranja); vertical-align: -0.2em; }
@media (prefers-reduced-motion: no-preference) { .terminal__cursor { animation: titilar 1.1s steps(1) infinite; } }
@keyframes titilar { 50% { opacity: 0; } }
.terminal__ahorro { margin-top: auto; padding-top: 1.25rem; font-family: var(--texto); color: var(--gris); }
.terminal__ahorro strong { color: var(--papel); }
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } .lienzo__marco { min-height: 24rem; } }

/* ------------------------------------------------------------- proceso (si es una secuencia: lleva numero) */
.proceso { margin-top: 3rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: paso; }
.paso { background: var(--grafito); padding: 1.5rem; counter-increment: paso; }
.paso::before { content: counter(paso); display: block; font: 800 var(--t-3)/1 var(--texto); color: var(--naranja); margin-bottom: 1rem; }
.paso h3 { font: 600 var(--t-2)/1.2 var(--texto); }
.paso p { margin-top: 0.5rem; color: var(--gris); }
@media (max-width: 960px) { .proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .proceso { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- lo que construyo */
.obras { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.seccion--grafito .obra { background: var(--grafito-2); }
.seccion--grafito .lienzo { background: var(--tinta); }
.obra { background: var(--grafito); padding: 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
.obra h3 { font: 600 var(--t-2)/1.2 var(--texto); }
.obra p { color: var(--gris); }
.obra__estado { margin-top: auto; padding-top: 0.75rem; font: 500 var(--t-0)/1.4 var(--mono); color: var(--arena); }
.obra a { color: var(--papel); font-weight: 600; text-underline-offset: 0.2em; }
@media (max-width: 900px) { .obras { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- sobre mi */
.sobre { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sobre__foto { background: var(--papel); padding: 1.25rem; }
.sobre__foto img { width: 100%; height: auto; }
.sobre__texto h2 + p { margin-top: 1.25rem; }
.sobre__texto p + p { margin-top: 1rem; }
.sobre__texto p { max-width: 58ch; color: var(--gris); }
.sobre__texto p:first-of-type { color: var(--papel); font-size: var(--t-2); line-height: 1.5; }
@media (max-width: 760px) { .sobre { grid-template-columns: 1fr; } .sobre__foto { max-width: 15rem; } }

/* ------------------------------------------------------------- cierre (pagina 20) */
.cierre { padding-block: calc(var(--bloque) * 0.6) var(--bloque); text-align: center; }
.cierre__logo { width: min(100%, 30rem); margin-inline: auto; }
.cierre__frase { margin-top: 1.5rem; font: 800 var(--t-5)/1.05 var(--texto); letter-spacing: -0.025em; color: var(--naranja); }
.cierre__texto { margin: 1rem auto 0; max-width: 44ch; color: var(--gris); }
.cierre .boton { margin-top: 2rem; }

/* ------------------------------------------------------------- pie */
.pie { border-top: 1px solid var(--grafito); padding-block: 2rem 2.5rem; color: var(--gris); font-size: var(--t-0); }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.pie a { color: var(--gris); }
.pie a:hover { color: var(--papel); }
.pie nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ------------------------------------------------------------- paginas interiores */
.cabeza-pagina { padding-block: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem); }
.cabeza-pagina h1 { font: 800 var(--t-5)/1.02 var(--texto); letter-spacing: -0.025em; max-width: 18ch; }
.cabeza-pagina p { margin-top: 1.25rem; max-width: 58ch; color: var(--gris); font-size: var(--t-2); line-height: 1.5; }

.cabeza-pagina + .seccion { padding-top: clamp(1.5rem, 4vw, 3rem); }

.preguntas { margin-top: 2.5rem; display: grid; gap: 0.75rem; max-width: 50rem; }
.pregunta { background: var(--grafito); }
.pregunta summary { cursor: pointer; padding: 1.15rem 1.4rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; color: var(--naranja); font: 500 var(--t-2)/1 var(--mono); }
.pregunta[open] summary::after { content: "−"; }
.pregunta p { padding: 0 1.4rem 1.3rem; color: var(--gris); max-width: 64ch; }

/* Texto legal: legible, ancho de lectura */
/* La columna legal se alinea con el titulo de la pagina; el ancho de lectura va en cada bloque. */
.legal > * { max-width: 46rem; }
.legal h2 { font: 800 var(--t-3)/1.15 var(--texto); margin-top: 2.75rem; letter-spacing: -0.01em; scroll-margin-top: 6rem; }
.legal h3 { font: 600 var(--t-2)/1.3 var(--texto); margin-top: 1.75rem; }
.legal p, .legal li { color: #c5cad2; }
.legal p { margin-top: 0.9rem; }
.legal ul { margin-top: 0.9rem; display: grid; gap: 0.45rem; }
.legal li { padding-left: 1.25rem; position: relative; }
.legal li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45rem; height: 0.45rem; background: var(--arena); }
.legal strong { color: var(--papel); }
.legal__fecha { margin-top: 1rem; font: 400 var(--t-0)/1.4 var(--mono); color: var(--arena); }

.legal__numerada { margin-top: 0.9rem; padding-left: 1.4rem; list-style: decimal; display: grid; gap: 0.6rem; }
.legal__numerada li { padding-left: 0.25rem; }
.legal__numerada li::before { content: none; }
.legal a { color: var(--papel); text-underline-offset: 0.2em; }
.legal__tabla { margin-top: 1.25rem; width: 100%; border-collapse: collapse; }
.legal__tabla caption { text-align: left; font-weight: 600; padding-bottom: 0.5rem; color: var(--papel); }
.legal__tabla th, .legal__tabla td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--linea); color: #c5cad2; }
.legal__tabla th { color: var(--papel); background: var(--grafito); }
.legal__otros { margin-top: 3.5rem; padding: 1.5rem 1.6rem; background: var(--grafito); }
.legal__otros h2 { margin-top: 0; font-size: var(--t-2); }
.legal__otros ul { margin-top: 0.75rem; }
.solo-impresion { display: none; }

/* ------------------------------------------------------------- impresion y PDF */
@page { size: A4; margin: 18mm 16mm 18mm; }
@media print {
  :root { --papel: #14161b; --gris: #4a5059; }
  body { background: #fff; color: #14161b; font-size: 10.5pt; line-height: 1.5; }
  .cabecera, .pie, .saltar, .portada__acciones, .demo, .legal__otros { display: none !important; }
  .solo-impresion { display: block; }
  .logo-impresion { width: 62mm; height: auto; margin-bottom: 8mm; }
  .cabeza-pagina { padding: 0 0 4mm; border-bottom: 0.6pt solid #c9cdd3; }
  .cabeza-pagina h1 { font-size: 24pt; max-width: none; color: #14161b; }
  .cabeza-pagina p { font-size: 11pt; color: #4a5059; max-width: none; }
  .legal__fecha { color: #a65a00 !important; }
  .seccion { padding: 6mm 0 0; }
  .envoltura { width: 100%; }
  .legal { max-width: none; }
  .legal h2 { font-size: 13.5pt; margin-top: 7mm; color: #14161b; break-after: avoid; }
  .legal h3 { font-size: 11pt; margin-top: 4mm; color: #14161b; break-after: avoid; }
  .legal p, .legal li, .legal__tabla td { color: #262a31; }
  .legal strong, .legal a { color: #14161b; }
  .legal li::before { background: #a65a00; }
  .legal__tabla th { background: #eef0f2; color: #14161b; }
  .legal__tabla th, .legal__tabla td { border-bottom-color: #c9cdd3; }
  li, tr { break-inside: avoid; }
}