/* p-martin.css · /identidad/martin/ · clases con prefijo mt- · solo tokens */

/* ---- ritmo de la página: menos aire entre secciones para que se lea de un vistazo ---- */
.hero{padding:var(--s-48) 0 var(--s-32)}
.hero-acc{margin-top:var(--s-24)}
.sec{padding:calc(var(--s-32) + var(--s-8)) 0 var(--s-32)}
.sec-head{max-width:none;margin-bottom:var(--s-16)}
.sec-head .eyebrow{margin-bottom:var(--s-12)}
.sec-head .lede{margin-top:var(--s-8)}
.mt-h3{font-size:var(--t-19);letter-spacing:var(--trk-19);line-height:1.25;margin:0 0 var(--s-8)}
.sec>details.mas{margin-top:var(--s-24);padding:var(--s-12) 0}
.sec>details.mas>div{padding-top:var(--s-12)}
.sec>.acciones{margin-top:var(--s-16)}

/* ---- firmas en vivo (las mismas piezas del manual, a su tamaño real) ---- */
.mt-fig .logo,.mt-l2 .logo{display:inline-flex;color:var(--logo);flex:none}
.mt-fig .logo svg,.mt-l2 .logo svg{height:100%;width:auto;display:block}
.mt-fig .logo svg path,.mt-l2 .logo svg path{fill:currentColor}
.mt-l1{display:flex;align-items:center;gap:12px}
.mt-l1 img{border-radius:50%;object-fit:cover;flex:none}
.mt-l1 b{display:block;line-height:1.25;color:var(--texto)}
.mt-l1 span{display:block;line-height:1.35;color:var(--texto-2)}
.mt-l2{display:inline-flex;align-items:flex-start;white-space:nowrap;flex:none}
.mt-l2 b{line-height:1;letter-spacing:0;color:var(--texto)}
.mt-l2 i{display:block;background:var(--borde);flex:none}
.mt-l3 b{display:block;font-size:var(--t-19);line-height:1.25;letter-spacing:var(--trk-19);color:var(--texto)}
.mt-l3 span{display:block;font-size:var(--t-15);line-height:1.35;color:var(--texto-2);margin-top:4px}
.mt-l5{font-size:var(--t-15);line-height:1.5;color:var(--texto-2)}
.mt-l5 b{color:var(--texto)}
.mt-av{border-radius:50%;background:var(--fondo);border:var(--borde-ancho) solid var(--borde);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.mt-fundido{display:flex;flex-direction:column;align-items:center;gap:6px}
.mt-fundido b{font-size:var(--t-19);line-height:1;color:var(--texto)}
.mt-caja{background:var(--fondo);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-campo);padding:12px 16px;max-width:340px}
.mt-caja .rotulo{font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);margin-bottom:6px}
.mt-caja b{display:block;font-size:var(--t-15);line-height:1.35;color:var(--texto)}

/* ---- portada y piezas vivas ---- */
.mt-hero-vis{max-width:700px;margin-top:var(--s-24)}
.mt-fig-cap{font-size:var(--t-15);color:var(--texto-2);margin-top:var(--s-8)}
.mt-fig-cap b{color:var(--texto)}
.mt-cols{display:grid;gap:var(--medianil);align-items:start}
.mt-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.mt-c2{grid-template-columns:minmax(0,1fr)}}
.mt-rol{display:inline-block;font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);margin-bottom:var(--s-8)}

/* ---- la idea: dos piezas y lo que las distingue ---- */
.mt-idea{display:grid;grid-template-columns:minmax(0,300px) minmax(0,300px) minmax(0,1fr);gap:var(--s-24);align-items:start}
@media (max-width:1100px){.mt-idea{grid-template-columns:repeat(2,minmax(0,1fr))}.mt-idea .mt-dif-wrap{grid-column:1/-1}.mt-idea .fig{max-width:340px}}
@media (max-width:620px){.mt-idea{grid-template-columns:minmax(0,1fr)}}
.mt-dif th:first-child,.mt-dif td:first-child{width:22%;color:var(--texto-2)}
.mt-dif td:first-child{font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;font-weight:var(--bold)}
.mt-dif td:nth-child(2){color:var(--texto)}
.mt-dif td{padding-top:var(--s-12);padding-bottom:var(--s-12)}
.mt-idea .mt-dif{font-size:var(--t-15)}
.mt-idea .mt-dif td,.mt-idea .mt-dif th{padding-left:var(--s-8);padding-right:var(--s-8)}
details .mt-dif{min-width:620px}

/* ---- árbol ---- */
.mt-arbol{display:flex;align-items:center}
.mt-nodo{display:flex;align-items:center;gap:12px;padding:12px 16px;border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);background:var(--elevado);min-width:0}
.mt-nodo b{display:block;font-size:var(--t-15)}
.mt-nodo small{display:block;font-size:var(--t-12);color:var(--texto-2);line-height:1.35;margin-top:2px}
.mt-yo{width:200px;flex:none;flex-direction:column;align-items:flex-start;gap:10px;padding:16px}
.mt-yo img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.mt-ramas{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0;max-width:300px}
.mt-nodo .logo{height:22px}
.mt-cable{flex:none;display:block}
@media (max-width:560px){.mt-arbol{flex-direction:column;align-items:stretch}.mt-cable{display:none}.mt-yo{width:auto}.mt-ramas{max-width:none;margin-top:var(--s-16)}}

/* ---- fotos: tres miradas y las reglas en dos columnas ---- */
.mt-fotos3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24);align-items:start}
.mt-fotos3 .shot,.mt-fotos3 .mt-comp{aspect-ratio:5/4;object-fit:cover;object-position:center 20%}
.mt-fotos3 figcaption{font-size:var(--t-15)}
@media (max-width:760px){.mt-fotos3{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16)}.mt-fotos3>:nth-child(3){grid-column:1/-1}}
.mt-reglas{list-style:none;margin:0;padding:0;counter-reset:r}
.mt-reglas li{counter-increment:r;border-top:var(--borde-ancho) solid var(--borde);padding:var(--s-12) 0 var(--s-12) 40px;position:relative;color:var(--texto-2);font-size:var(--t-15)}
.mt-reglas li::before{content:counter(r);position:absolute;left:0;top:var(--s-12);font-size:var(--t-12);font-weight:var(--bold);color:var(--texto-2);font-variant-numeric:tabular-nums;width:24px;height:24px;border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-pill);display:grid;place-items:center}
.mt-reglas li b{color:var(--texto)}
.mt-reglas2{margin-top:var(--s-32);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-48)}
.mt-reglas2 li:nth-last-child(-n+2){border-bottom:var(--borde-ancho) solid var(--borde)}
@media (max-width:760px){.mt-reglas2{grid-template-columns:minmax(0,1fr)}.mt-reglas2 li:nth-last-child(2){border-bottom:0}}

/* ---- comparador antes / después ---- */
.mt-comp{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-captura);border:var(--borde-ancho) solid var(--borde);background:var(--superficie);--p:50%;touch-action:pan-y}
.mt-comp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mt-comp .mt-comp-bn{clip-path:inset(0 0 0 var(--p))}
.mt-comp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.mt-comp-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--papel);pointer-events:none}
.mt-comp-line::after{content:"";position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:var(--papel);border:var(--borde-encendido) solid var(--tinta)}
.mt-comp:focus-within{outline:var(--foco-ancho) solid var(--acento);outline-offset:2px}
.mt-comp-tag{position:absolute;bottom:12px;font-size:var(--t-12);font-weight:var(--bold);background:var(--fondo);color:var(--texto);padding:4px 12px;border-radius:var(--r-pill);border:var(--borde-ancho) solid var(--borde);pointer-events:none}
.mt-comp-tag.l{left:12px}.mt-comp-tag.r{right:12px}

/* ---- galería y curva del blanco y negro (dentro del «Ver…») ---- */
.mt-galeria{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-8)}
.mt-galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-captura);border:var(--borde-ancho) solid var(--borde);display:block;background:var(--superficie)}
@media (max-width:700px){.mt-galeria{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mt-c-cur{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--s-32);align-items:center;margin-top:var(--s-24)}
@media (max-width:700px){.mt-c-cur{grid-template-columns:minmax(0,1fr)}}
.mt-curva{width:100%;height:auto;max-width:260px;display:block}
.mt-curva .ej{stroke:var(--borde);stroke-width:1}
.mt-curva .dia{stroke:var(--texto-3);stroke-width:1;stroke-dasharray:4 4;fill:none}
.mt-curva .cur{stroke:var(--texto);stroke-width:2.5;fill:none;stroke-linejoin:round}
.mt-curva .pt{fill:var(--fondo);stroke:var(--texto);stroke-width:2}
.mt-curva text{font-size:11px;fill:var(--texto-2);font-family:var(--fuente)}
.mt-curva text.v{fill:var(--texto);font-weight:700}

/* ---- avatares ---- */
.mt-avs{display:flex;align-items:flex-end;gap:var(--s-24);flex-wrap:wrap}
.mt-firma.mt-fav{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:var(--s-32);align-items:center;border-top:var(--borde-ancho) solid var(--borde);padding-top:var(--s-24)}
.mt-fav .mt-fh .btn{margin-top:var(--s-12)}
@media (max-width:760px){.mt-firma.mt-fav{grid-template-columns:minmax(0,1fr)}}
.mt-avs figure{margin:0;text-align:center}
.mt-avs img{border-radius:50%;object-fit:cover;display:block;margin:0 auto var(--s-8)}
.mt-avs figcaption{font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums}

/* ---- firmas: dos columnas, cada una con su lienzo a tamaño real ---- */
.mt-firmas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "c d" "e d" "f f";gap:var(--s-24) var(--s-32);align-items:start}
.mt-firmas>:nth-child(1){grid-area:a}.mt-firmas>:nth-child(2){grid-area:b}.mt-firmas>:nth-child(3){grid-area:c}.mt-firmas>:nth-child(4){grid-area:d}.mt-firmas>:nth-child(5){grid-area:e}.mt-firmas>:nth-child(6){grid-area:f}
@media (max-width:900px){.mt-firmas{grid-template-columns:minmax(0,1fr);grid-template-areas:none}.mt-firmas>*{grid-area:auto!important}}
.mt-firma{display:flex;flex-direction:column;gap:var(--s-8);min-width:0}
.mt-fh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s-12)}
.mt-fh .n{font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);color:var(--texto-2);text-transform:uppercase}
.mt-fh h3{font-size:var(--t-19);letter-spacing:var(--trk-19)}
.mt-fh p{flex:1 0 100%;margin:0;color:var(--texto-2);font-size:var(--t-15)}
.mt-fn{margin:0;color:var(--texto-2);font-size:var(--t-15)}
.mt-lienzo{background:var(--superficie);border-radius:var(--r-tarjeta);padding:var(--s-16) var(--s-24);display:flex;align-items:center;min-height:88px;overflow:auto}
.mt-lienzo>*{flex:none}

/* ---- L4 en vivo: el nombre entra, se queda y se va ---- */
.mt-stage{padding:var(--s-12) var(--s-12) 52px;min-height:0;justify-items:center}
.mt-l4{position:relative;width:100%;max-width:400px;aspect-ratio:16/9;container-type:inline-size;border-radius:var(--r-captura);overflow:hidden;background:var(--superficie)}
.mt-l4>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mt-l4-card{position:absolute;left:6.25cqw;bottom:5.625cqw;background:var(--blanco);color:var(--tinta);border:.156cqw solid var(--linea);border-radius:1.25cqw;padding:1.25cqw 1.875cqw;opacity:0}
.mt-l4-card b{display:block;font-size:2.34cqw;line-height:1.25}
.mt-l4-card span{display:block;font-size:1.875cqw;line-height:1.3;color:var(--pizarra);margin-top:.15cqw}
.stage.is-playing .mt-l4-card{animation:mt-l4-in 467ms var(--mov-entrada) both,mt-l4-out 267ms var(--mov-salida) 4467ms forwards}
@keyframes mt-l4-in{from{opacity:0;transform:translateY(.52cqw)}to{opacity:1;transform:none}}
@keyframes mt-l4-out{from{opacity:1}to{opacity:0}}

/* ---- pilares de contenido ---- */
.mt-pilares{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:var(--s-8) var(--s-16);align-items:center;font-size:var(--t-15);margin-top:var(--s-12)}
.mt-pilares .et{color:var(--texto-2)}
.mt-pilares .rl{display:flex;align-items:center;gap:var(--s-12)}
.mt-pilares .rl i{display:block;height:14px;background:var(--control-apagado);border-radius:var(--r-campo);width:calc(var(--v)*.8%)}
.mt-pilares .rl i.on{background:var(--texto)}
.mt-pilares .rl em{font-style:normal;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--texto)}

/* ---- guías sobre la portada ---- */
.mt-guia{position:relative}
.mt-guia .z,.mt-guia .c{position:absolute;pointer-events:none}
.mt-guia .z{left:44.19%;top:20.2%;width:50.76%;height:59.6%;border:var(--borde-encendido) solid var(--acento);border-radius:4px}
.mt-guia .z span,.mt-guia .c span{position:absolute;left:0;top:-22px;font-size:var(--t-12);font-weight:var(--bold);color:var(--acento-texto);white-space:nowrap}
.mt-guia .z span{top:auto;bottom:calc(100% + 4px)}
.mt-guia .corte{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:var(--r-captura)}
.mt-guia .c{left:3.03%;top:59.6%;width:20.2%;aspect-ratio:1;border:var(--borde-encendido) dashed var(--texto-2);border-radius:50%}
.mt-guia .c span{color:var(--texto-2);top:12px;left:50%;transform:translateX(-50%);font-weight:var(--regular)}

/* ---- LinkedIn: el celular, con su explicación al lado ---- */
.mt-cel{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-32);align-items:center}
@media (max-width:620px){.mt-cel{grid-template-columns:minmax(0,1fr)}.mt-cel .scaled{max-width:200px}}

/* ---- posts: el feed y el carrusel juntos ---- */
.mt-posts{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);gap:var(--s-32);align-items:start}
.mt-posts [data-tabs]>.tabs{margin-bottom:var(--s-16)}
.mt-posts .tabs button{padding:var(--s-8) var(--s-12)}
@media (max-width:900px){.mt-posts{grid-template-columns:minmax(0,1fr)}.mt-posts>[data-tabs]{max-width:380px}}

/* ---- kit: las piezas en una fila, todas a la misma altura ---- */
.mt-kit{display:flex;gap:var(--s-24);align-items:flex-start}
.mt-kit>.fig{flex:var(--r) 1 0;min-width:0}
.mt-kit-side{flex:0 0 280px;min-width:0}
.mt-kit figcaption{font-size:var(--t-12)}
@media (max-width:1100px){.mt-kit{flex-wrap:wrap}.mt-kit>.fig{flex:1 1 200px}.mt-kit-side{flex:1 1 100%}}
@media (max-width:620px){.mt-kit{gap:var(--s-16)}.mt-kit>.fig{flex:1 1 calc(50% - 8px)}}

/* ---- sí y no ---- */
.mt-panel{background:var(--superficie);border-radius:var(--r-tarjeta);padding:var(--s-16) var(--s-24);min-height:96px;display:flex;align-items:center;justify-content:center}
.mt-panel>*{flex:none;max-width:100%}
.dont .mt-panel{border:var(--borde-ancho) solid var(--texto-3)}
.mt-pares{display:grid;gap:var(--s-24)}
.mt-pares .pair{gap:var(--s-24)}
.mt-pares4{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-24) var(--s-32)}
.mt-pares4 .pair:nth-child(n+3){grid-column:1/-1}
.mt-pares4 .pair:nth-child(-n+2){gap:var(--s-12)}
.mt-pares4 .pair:nth-child(-n+2) .mt-panel{padding:var(--s-12)}
.mt-pares4 .pair:nth-child(-n+2) .mt-l1>div{min-width:0}
@media (max-width:900px){.mt-pares4{grid-template-columns:minmax(0,1fr)}.mt-pares4 .pair:nth-child(n+3){grid-column:auto}}

/* ---- descargas: seis bloques en dos columnas ---- */
.mt-dls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-24) var(--s-32)}
.mt-dl{border-top:var(--borde-ancho) solid var(--borde);padding:var(--s-16) 0 0;display:flex;flex-direction:column;gap:var(--s-12);min-width:0}
.mt-dl h3{font-size:var(--t-19);letter-spacing:var(--trk-19)}
.mt-dl p{color:var(--texto-2);font-size:var(--t-15);margin:var(--s-4) 0 0}
.mt-dl .acciones{margin-top:0;gap:var(--s-8)}
.mt-dl .btn{min-height:32px;padding:0 var(--s-12);font-size:var(--t-12);gap:6px}
.mt-dl .btn-dl::before{width:12px;height:12px}
.mt-dl-zip .btn{min-height:var(--tocable);padding:0 var(--s-24);font-size:var(--t-15)}
.mt-dl-zip .btn-dl::before{width:14px;height:14px}
@media (max-width:760px){.mt-dls{grid-template-columns:minmax(0,1fr)}}

/* ---- biografías ---- */
.mt-bio{background:var(--superficie);border-radius:var(--r-tarjeta);padding:var(--s-24);max-width:none}
.mt-bio p{color:var(--texto);margin:0 0 var(--s-12)}
.mt-bio .acciones{margin-top:var(--s-16)}
.mt-bio small{display:block;color:var(--texto-2);font-size:var(--t-12);margin-bottom:var(--s-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;font-weight:var(--bold)}
[data-tabs]>.tabs{margin-bottom:var(--s-24)}

/* ---- nombre y cargo: las líneas que se copian a la izquierda, los textos a la derecha ---- */
.mt-c-nom{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-32)}
@media (max-width:900px){.mt-c-nom{grid-template-columns:minmax(0,1fr)}}
.mt-cargo{display:flex;flex-direction:column;gap:var(--s-12)}
.mt-cargo .mt-rol{margin-bottom:6px}
.mt-cargo .copy{display:block;width:100%;font-family:inherit;font-size:var(--t-15);text-align:left;padding:8px 12px;border-radius:var(--r-campo);line-height:1.4}
.mt-cargo p{margin:var(--s-4) 0 0}

/* piezas anchas (web de escritorio): en el celular se desliza de lado para poder leerlas */
.mt-c-web{grid-template-columns:minmax(0,720px) 200px;align-items:end;gap:var(--s-32)}
.mt-hs{overflow-x:auto}
.mt-hs .scaled{min-width:560px}
@media (max-width:900px){.mt-c-web{grid-template-columns:minmax(0,1fr);align-items:start}.mt-c-web .fig:last-child{max-width:200px}}

.mt-l2>span{flex:none}

/* celular: la tabla se vuelve lista y la firma L2 se achica para que entre */
@media (max-width:700px){
  .mt-dif,details .mt-dif{min-width:0!important}
  .mt-dif thead{display:none}
  .mt-dif,.mt-dif tbody,.mt-dif tr,.mt-dif td{display:block;width:auto}
  .mt-dif tr{border-top:var(--borde-ancho) solid var(--borde);padding:var(--s-12) 0}
  .mt-dif td{border:0;padding:2px 0}
  .mt-dif td:first-child{width:auto;padding-bottom:6px}
  .mt-dif td:nth-child(2)::before{content:"Martín · ";font-weight:var(--bold)}
  .mt-dif td:nth-child(3)::before{content:"Creators Latam · ";font-weight:var(--bold);color:var(--texto)}
  .mt-guia .z span,.mt-guia .c span{display:none}
}
@media (min-width:701px) and (max-width:900px){.mt-panel .mt-l2{zoom:.62}}
@media (max-width:520px){.mt-lienzo .mt-l2,.mt-panel .mt-l2{zoom:.72}.mt-panel>.mt-l2{max-width:none}}

/* charla: la portada en claro y en oscuro, a un tamaño que cabe sin tocar el resto */
.mt-claro{max-width:440px}