/* ===== Inicio: identidad con una línea continua que recorre la página =====
   Referencia: dakshgajjar.com. Se usa en index.html (tools/generador/pages/1a_inicio.py). */
.inicio { --pl-dark: #07090d; --pl-on-dark: #f1eee6; --pl-on-dark-muted: rgba(241, 238, 230, .7); --pl-stroke: 4px;
  /* Color de la línea: verde amarillo de destacador (flúor) */
  --pl-line: #d4ff3f; }

/* Secciones: claras sin fondo propio; oscuras como panel redondeado. Sin margen vertical para que la línea no se corte */
.pl-sec { position: relative; isolation: isolate; margin-block: 0; }
.pl-light { color: var(--ink); }
.pl-dark { margin-inline: var(--shell-pad); border-radius: var(--shell-inner-radius); background: var(--pl-dark); color: var(--pl-on-dark); overflow: hidden; overflow: clip; }
/* Los títulos globales usan --ink: en las secciones oscuras se fuerza el color claro, en ambos temas */
.pl-dark h1, .pl-dark h2, .pl-dark h3 { color: var(--pl-on-dark); }
.pl-inner { position: relative; z-index: 1; width: var(--content-width); margin-inline: auto; }
.pl-center { display: grid; justify-items: center; text-align: center; gap: var(--space-6); }

/* Tipografía */
/* Titulares: Plus Jakarta Sans 800, ancha y apretada */
.pl-display { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(44px, 8.6vw, 148px); line-height: .9; letter-spacing: -0.055em; word-spacing: .1em; text-wrap: balance; }
.pl-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4.4vw, 68px); line-height: .95; letter-spacing: -0.045em; word-spacing: .08em; text-wrap: balance; }
.pl-lead { max-width: 34rem; margin-top: var(--space-6); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-muted); }
.pl-dark .pl-lead { color: var(--pl-on-dark-muted); }
.pl-mono { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.pl-dark .pl-mono { color: var(--pl-on-dark-muted); }

/* ---- La línea ---- */
.pl-thread { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke: var(--pl-line); stroke-width: var(--pl-stroke); stroke-linecap: round; stroke-linejoin: round; }
.pl-thread path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
/* En la home la línea empieza oculta y solo la dibuja el scroll (js/main.js): así no se ve completa antes de que avance */
.inicio .pl-thread path { stroke-dashoffset: 1; }
.pl-thread-mob { display: none; }
@media (max-width: 40em) { .pl-thread-desk { display: none; } .pl-thread-mob { display: block; } }
/* Firma: mismo grosor que la línea (--pl-stroke), fijo en pantalla */
.pl-firma { fill: none; stroke: var(--pl-line); stroke-width: var(--pl-stroke); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pl-firma path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* Se dibuja con el scroll (navegadores compatibles y sin "reducir movimiento"); si no, se ve completa */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pl-sec:not(.pl-hero) .pl-thread path, .pl-sign .pl-firma path { stroke-dashoffset: 1; animation: pl-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
  }
}
/* El hero se dibuja solo al entrar (js/main.js): la punta redondeada marca el avance */
.pl-head { display: none; position: fixed; z-index: 45; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--pl-line);
  box-shadow: 0 0 0 6px rgba(212, 255, 63, .22); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pl-line) 22%, transparent); transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%)); pointer-events: none; }
.pl-hero.is-live .pl-head { display: block; }
@keyframes pl-draw { to { stroke-dashoffset: 0; } }

/* 1. Hero: la línea pasa por detrás y por delante del titular (la capa delantera solo se ve en franjas) */
/* Fondo del hero anterior (home-v2.css): degradado oscuro, fotografía en monocromo y cuadrícula que se desvanecen.
   Marca y producto repite el degradado y la cuadrícula, sin la fotografía. */
.pl-hero, .pl-producto { background: radial-gradient(60% 70% at 78% 100%, #17233a, transparent), linear-gradient(160deg, #0b1220, #070b13); }
.pl-hero::after, .pl-producto::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 30% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 30% 30%, #000, transparent 75%); }
.pl-hero-bg { position: absolute; z-index: -2; left: 80%; top: 50%; width: auto; height: 100%; max-width: none; transform: translate(-50%, -50%); filter: grayscale(1) contrast(1.05); opacity: .55; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .6) 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .6) 50%, transparent 100%); }
@media (max-width: 53.75em) { .pl-hero-bg { opacity: .4; } }
.pl-hero { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - var(--header-h, 4.5rem) - var(--shell-pad)); padding-block: clamp(8rem, 22vh, 14rem) clamp(3rem, 8vh, 5rem); }
/* Escritorio: hero más bajo (menos aire arriba), para que "Ideas" entre con menos scroll */
@media (min-width: 40em) { .pl-hero { min-height: calc(100svh - var(--header-h, 4.5rem) - var(--shell-pad) - 200px); padding-top: clamp(8rem, 15vh, 14rem); } }
/* La línea pasa por detrás del titular, salvo al entrar a la O: ahí cruza por encima de su anillo (capa delantera,
   recortada por js/main.js a ese cruce). Sin JavaScript, la capa delantera no se ve. */
.pl-hero .pl-thread-front { z-index: 2; clip-path: inset(100% 0 0 0); }
.pl-hero .pl-display { max-width: 10em; }
/* Titular por líneas: entran desde abajo una tras otra (pausadas mientras está la pantalla de carga) */
.pl-line { display: block; }
/* Marca de la línea base de "desean" (js/main.js la usa para el subrayado) */
.pl-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.pl-line-in { display: inline-block; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .pl-hero-title .pl-line { animation: pl-line-in .9s cubic-bezier(.2, .7, .2, 1) both; }
  .pl-hero-title .pl-line:nth-child(1) { animation-delay: .15s; }
  .pl-hero-title .pl-line:nth-child(2) { animation-delay: .3s; }
  .pl-hero-title .pl-line:nth-child(3) { animation-delay: .45s; }
  html.is-loading .pl-hero-title .pl-line { animation-play-state: paused; }
  /* Los demás titulares animados (contacto) entran igual, al aparecer en pantalla (js/main.js agrega .is-in) */
  .pl-reveal .pl-line { opacity: 0; }
  .pl-reveal.is-in .pl-line { opacity: 1; animation: pl-line-in .9s cubic-bezier(.2, .7, .2, 1) both; }
  .pl-reveal.is-in .pl-line:nth-child(2) { animation-delay: .15s; }
  .pl-reveal.is-in .pl-line:nth-child(3) { animation-delay: .3s; }
}
@keyframes pl-line-in { from { opacity: 0; transform: translateY(.22em); } to { opacity: 1; transform: none; } }

/* 2. El mundo de las ideas: la línea queda detrás del collage, salvo los cruces por delante de la botella central
   (capa delantera, recortada por js/main.js; sin JavaScript no se ve) */
.pl-ideas .pl-thread-front { z-index: 3; clip-path: inset(100% 0 0 0); }
.pl-ideas .pl-thread { color: var(--ink); }

/* 3. Sistemas: título arriba a la izquierda (a un lado de la línea) y, debajo, el óvalo con un punto por disciplina;
   en móvil, dos columnas. El óvalo se dibuja dentro de .pl-stage (js/main.js ajusta la línea a ese bloque). */
.pl-caps { padding-top: clamp(5rem, 10vw, 8rem); }
/* Ideas: el titular usa la misma familia que el resto del sitio (Plus Jakarta Sans 800), no Anton de la home anterior */
.inicio .ideas-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -0.055em; word-spacing: .08em; }
/* Ceja encima del título de Ideas */
.inicio .ideas-eyebrow { margin: 0 0 clamp(.75rem, 2svh, 1.25rem); }
/* Plus Jakarta Sans es más ancha que Anton: en escritorio el titular se achica para que no se corte en los bordes */
@media (min-width: 53.75em) { .inicio .ideas-stage { --ideas-fs: clamp(26px, min(5.1vw, 8.4svh), 100px); } }
@media (max-width: 53.75em) { .inicio .ideas-stage { --ideas-fs: min(12.4vw, 8svh); } }
.pl-caps-title { max-width: min(17em, 80%); margin-inline: auto; text-align: center; }
/* Palabras destacadas del título: subrayado ancho de destacador, del color de la línea (el texto sigue oscuro, legible) */
.pl-mark { color: inherit; background: linear-gradient(transparent 58%, var(--pl-line) 58%, var(--pl-line) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .06em; }
.pl-caps-list { margin: 0; padding: 0; list-style: none; }
/* Nombre de cada disciplina: título de la jerarquía (la descripción queda como texto de apoyo) */
.inicio .pl-cap-name { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(18px, 1.7vw, 24px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.pl-cap-desc { font-size: 12px; line-height: 1.55; color: var(--ink-muted); }
.pl-caps { overflow-x: clip; }
@media (max-width: 40em) {
  .pl-caps { padding-top: var(--space-12); }
  .pl-caps-title { max-width: none; font-size: 30px; background: var(--frame); }
  .inicio .pl-cap-name { white-space: normal; font-size: clamp(16px, 4.6vw, 20px); }
  .pl-cap-desc { font-size: 11px; }
}

/* 4. Portafolio: el carrusel tapa la línea */
.pl-folio { padding-block: clamp(4rem, 9vw, 7rem); }
.pl-folio-title { position: relative; z-index: 1; text-align: center; }
.pl-folio .more-stage { position: relative; z-index: 1; }
.pl-folio .pl-inner { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* 5. Marca y producto: texto a la izquierda, la línea ortogonal a la derecha */
.pl-producto { min-height: 640px; display: flex; align-items: center; padding-block: clamp(6rem, 14vw, 10rem); }
.pl-producto .pl-inner { padding-right: 45%; }
/* Firma de la sección: nombre y bajada bajo el texto, separados por una línea fina */
.pl-signature { display: grid; gap: var(--space-2); max-width: 34rem; margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid rgba(241, 238, 230, .18); }
.pl-signature strong { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(20px, 1.8vw, 26px); line-height: 1; color: var(--pl-on-dark); }
/* Las puntas de las flechas van en ángulo */
.pl-producto .pl-thread { stroke-linejoin: miter; stroke-miterlimit: 8; }
@media (max-width: 40em) { .pl-producto .pl-inner { padding-right: 18%; } }

/* 6. Firma */
.pl-sign { padding-block: clamp(6rem, 12vw, 9rem); }
.pl-firma-grande { position: relative; z-index: 1; display: block; width: clamp(240px, 40vw, 560px); margin: 0 auto var(--space-8); }

/* 7. Contacto: la línea llega caminando (huellas) hasta el titular */
.pl-contact { min-height: 720px; padding: 260px 0 clamp(4rem, 9vw, 6rem); }
/* Formulario de contacto (popup de Conversemos): abre el correo de la persona con el mensaje; no envía datos al servidor */
.pl-dialog { width: min(52rem, calc(100% - 2rem)); max-height: calc(100svh - 2rem); padding: 0; overflow: auto; border: 0; border-radius: var(--radius-lg); background: var(--frame); color: var(--ink); box-shadow: 0 24px 60px rgba(11, 18, 32, .28); }
.pl-dialog-grid { display: grid; }
.pl-dialog-head { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 1; }
.pl-dialog-lead { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: var(--space-6); background: var(--surface-sunken); }
.pl-dialog-lead .pl-dialog-title { font-size: clamp(36px, 4.6vw, 58px); line-height: .98; text-transform: uppercase; }
/* "Hablemos" con el destacador flúor; sobre el fondo oscuro, el texto de la marca va en oscuro */
.pl-dialog-title .pl-mark { display: inline-block; line-height: 1.12; color: #0b0d12; background: #d4ff3f; padding: .02em .1em .04em; border-radius: .06em; }
.pl-dialog-lead-text { margin: var(--space-4) 0 0; max-width: 24rem; font-family: var(--mono); font-size: 13px; line-height: 1.7; letter-spacing: .02em; color: rgba(241, 238, 230, .7); }
.pl-dialog-body { display: grid; align-content: start; gap: var(--space-5); padding: var(--space-6); }
@media (min-width: 40em) {
  .pl-dialog-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .pl-dialog-lead { padding: var(--space-8); }
  .pl-dialog-body { padding: var(--space-8); }
}
.pl-dialog::backdrop { background: rgba(7, 9, 13, .55); }
.pl-dialog[open] { animation: pl-dialog-in .25s var(--ease) both; }
@keyframes pl-dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pl-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pl-dialog-title { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.04em; line-height: 1; }
.pl-dialog-close { width: 44px; height: 44px; border: 1px solid var(--line-control); border-radius: 50%; background: transparent; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.pl-dialog-close:focus-visible { outline: 2px solid var(--pl-line); outline-offset: 2px; }
.pl-form { position: relative; display: grid; gap: var(--space-4); margin: 0; text-align: left; }
/* Campos con la etiqueta dentro de la caja: al escribir (o al enfocar) sube y queda sobre el borde superior */
.pl-field { position: relative; }
.pl-field input, .pl-field textarea { display: block; width: 100%; font: inherit; font-size: 16px; padding: var(--space-4) 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--line-control); background: transparent; color: var(--ink); }
.pl-field label { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); padding-inline: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-muted); pointer-events: none; transition: top .2s var(--ease), font-size .2s var(--ease), color .2s var(--ease); background: transparent; }
.pl-field input:focus + label, .pl-field input:not(:placeholder-shown) + label, .pl-field textarea:focus + label, .pl-field textarea:not(:placeholder-shown) + label { top: 0; font-size: 11px; padding-inline: 0; background: transparent; }
.pl-field input:focus, .pl-field textarea:focus { border-bottom-color: var(--pl-line); box-shadow: 0 1px 0 0 var(--pl-line); outline: 0; }
.pl-field input:focus-visible, .pl-field textarea:focus-visible { outline: 0; }
.pl-field textarea { resize: vertical; min-height: 7rem; padding-top: var(--space-5); }
.pl-field textarea:not(:placeholder-shown) + label, .pl-field textarea:focus + label { top: 0; }
.pl-form .btn { justify-self: end; }
.pl-form-note { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink-muted); }
.pl-contact .pl-display { font-size: clamp(44px, 7vw, 120px); max-width: 12em; }
@media (max-width: 40em) { .pl-contact { min-height: 640px; padding-top: 380px; } }
/* Llamado a la acción de contacto: su borde se ilumina en lima cuando la línea llega a él */
#contacto .btn { transition: box-shadow .6s ease; }
#contacto .btn.is-luz { box-shadow: 0 0 0 2px #d4ff3f, 0 0 12px rgba(212, 255, 63, .95), 0 0 30px rgba(212, 255, 63, .6); }
/* Contacto en escritorio: el bloque se fija en pantalla y la línea se completa con el scroll (luego la página sigue) */
@media (min-width: 53.75em) {
  .pl-contact { height: auto; min-height: calc(720px + 100svh); padding: 0; }
  .contact-pin { position: sticky; top: max(0px, calc((100svh - 720px) / 2)); height: 720px; box-sizing: border-box; padding: 260px 0 clamp(4rem, 9vw, 6rem); }
}

/* 8. Blog */
/* Fondo gris claro, tarjetas blancas con marco interior de 8 px y bordes redondeados (referencia visual del blog) */
.pl-blog { padding-block: clamp(5rem, 10vw, 8rem); background: var(--surface-sunken); }
.pl-blog-ceja { margin: 0 0 var(--space-3); }
/* Resalte con la marca lima del menú: una franja inferior bajo la palabra */
.pl-resalte { background: linear-gradient(transparent 56%, #d4ff3f 56%, #d4ff3f 90%, transparent 90%); }
.pl-blog-principal { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); align-items: stretch; margin: var(--space-10) 0 var(--space-6); padding: var(--space-2); border-radius: var(--radius-xl); }
.pl-blog-foto { margin: 0; }
.pl-blog-foto img { display: block; width: 100%; height: 100%; min-height: 20rem; object-fit: cover; border-radius: var(--radius-lg); }
.pl-blog-texto { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) var(--space-8) var(--space-6); }
.pl-chip { display: inline-flex; align-self: flex-start; margin: 0; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink); font-size: 12px; line-height: 1.2; }
.pl-blog-titulo { margin: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.pl-blog-titulo a { color: inherit; text-decoration: none; }
.pl-post-lead { margin: 0; color: var(--ink-muted); }
.pl-blog-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: 14px; color: var(--ink-muted); }
.pl-blog-pie .link-arrow { color: var(--ink); }
.pl-carrusel-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pl-carrusel-botones { display: flex; gap: var(--space-2); }
.pl-carrusel-botones .btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
.pl-carrusel-pista { display: flex; gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0 0 var(--space-2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pl-carrusel-pista::-webkit-scrollbar { display: none; }
.pl-carrusel-pista > li { flex: 0 0 min(340px, 82%); display: flex; flex-direction: column; padding: var(--space-2); border-radius: var(--radius-xl); scroll-snap-align: start; box-shadow: none; }
.pl-tarjeta-foto { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: linear-gradient(160deg, #ffffff 0%, #dfe6f0 100%); }
.pl-tarjeta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pl-tarjeta-foto .pl-chip { position: absolute; top: var(--space-3); right: var(--space-3); background: var(--surface); }
.pl-tarjeta-texto { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-4) var(--space-4); }
.pl-post-title { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 600; }
.pl-post-title a { color: inherit; text-decoration: none; }
/* Tarjetas del blog completas clickeables: el enlace del título cubre toda la tarjeta (enlace extendido) */
.pl-blog-principal, .pl-carrusel-pista .card { position: relative; }
.pl-blog-titulo a::after, .pl-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.prose .noticias-otras-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.prose .noticias-otras-lista > li.card { position: relative; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-xl); }
@media (max-width: 40em) { .prose .noticias-otras-lista { grid-template-columns: 1fr 1fr; gap: var(--space-3); } }
/* Sigue leyendo: separado del texto por una línea y con el tamaño del título del artículo */
.prose .noticias-otras { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.prose .noticias-otras > h2 { margin: 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; font-weight: 500; letter-spacing: -.03em; }
/* Frases clave de un artículo: tamaño mayor para leer rápido */
.prose p.destacado { margin: var(--space-8) 0 var(--space-6); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.45; font-weight: 400; font-style: italic; letter-spacing: -.005em; color: var(--ink); }
/* Tarjetas con imagen del artículo: la imagen va al lado exterior y se difumina hacia el texto */
.prose .noticias-otras-lista > li.card.con-foto { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; align-content: stretch; padding: 0; overflow: hidden; }
.prose .noticias-otras-lista > li.card.con-foto.noticias-otra-der { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.prose .noticias-otras-lista > li.card.con-foto .noticias-otras-texto { padding: var(--space-5); align-self: center; }
.prose .noticias-otras-foto { position: relative; align-self: stretch; margin: 0; overflow: hidden; }
.prose .noticias-otras-foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.prose .noticias-otra-izq .noticias-otras-foto img { -webkit-mask-image: linear-gradient(to right, #000 55%, transparent); mask-image: linear-gradient(to right, #000 55%, transparent); }
.prose .noticias-otra-der .noticias-otras-foto img { -webkit-mask-image: linear-gradient(to left, #000 55%, transparent); mask-image: linear-gradient(to left, #000 55%, transparent); }
@media (max-width: 40em) {
  .prose .noticias-otras-lista > li.card.con-foto, .prose .noticias-otras-lista > li.card.con-foto.noticias-otra-der { grid-template-columns: 1fr; }
  .prose .noticias-otras-lista > li.card.con-foto .noticias-otras-foto { order: -1; height: 6rem; }
  .prose .noticias-otras-lista > li.card.con-foto .noticias-otras-texto { padding: var(--space-4); }
  .prose .noticias-otras-lista .pl-post-title { font-size: 16px; line-height: 1.25; }
  .prose .noticias-otra-der .noticias-otras-texto { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .prose .noticias-otra-izq .noticias-otras-foto img, .prose .noticias-otra-der .noticias-otras-foto img { -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent); mask-image: linear-gradient(to bottom, #000 50%, transparent); }
}
@media (min-width: 61.25em) {
  .pl-carrusel-pista > li { flex: 0 0 calc((100% - 2 * var(--space-5)) / 3); }
}
@media (max-width: 53.75em) {
  .pl-blog-principal { grid-template-columns: 1fr; gap: var(--space-4); }
  .pl-blog-texto { padding: var(--space-5) var(--space-4) var(--space-4); }
}

/* ===== Textos que no son títulos: mismo estilo que "Sigue la línea" (monoespaciada, espaciada y atenuada), sin forzar mayúsculas ===== */
.inicio .pl-lead, .inicio .ideas-intro p, .inicio .pl-mono, .inicio .pl-cap, .inicio .pl-post .pl-mono,
.inicio .faq summary, .inicio .faq details p, .inicio .more-tags li, .inicio .more-foot p {
  font-family: var(--mono); font-weight: 400; letter-spacing: .08em; text-transform: none; }
/* Párrafos: algo más grandes que las etiquetas para que se lean cómodos */
.inicio .pl-lead, .inicio .ideas-intro p, .inicio .faq details p { font-size: 14px; line-height: 1.75; color: var(--ink-muted); }
/* Párrafo de introducción de Ideas: la columna ocupa el 70 % del ancho del bloque */
.inicio .ideas-foot { grid-template-columns: minmax(0, 70%) minmax(0, 1fr); }
.inicio .ideas-intro { width: 100%; max-width: none; }
.inicio .pl-dark .pl-lead { color: var(--pl-on-dark-muted); }
.inicio .faq summary { font-size: 14px; line-height: 1.6; }
.inicio .pl-cap, .inicio .pl-mono { font-size: 12px; }
/* Título del hero en móvil: "Diseño" y "marcas" van en líneas separadas (cuatro líneas en cualquier ancho) */
.pl-br-m { display: none; }
@media (max-width: 40em) { .pl-br-m { display: block; } }
/* Hero: menos separación entre letras para que la bajada ocupe menos espacio (cuatro líneas en móvil, con todo el ancho) */
.inicio .pl-hero .pl-lead { letter-spacing: .02em; }
/* En móvil, la bajada ocupa el mismo ancho que la línea "que desean" del título (262px con el título a 44px) */
@media (max-width: 40em) { .inicio .pl-hero .pl-lead { max-width: 262px; letter-spacing: 0; } }
/* Producto en móvil: la última oración del lead se oculta para un texto más corto */
@media (max-width: 40em) { .inicio .pl-lead-extra { display: none; } }


/* Con JavaScript, el avance de la línea en todas las secciones lo maneja js/main.js (línea de lectura y punta continua) */
.thread-js .pl-sec .pl-thread path, .thread-js .pl-sign .pl-firma path { animation: none; }
.thread-js .pl-head { display: block; }

/* En modo oscuro el hero y Marca y producto se invierten a blanco (como el hero de la home anterior) */

/* Cursor: un anillo del color destacado, solo el borde (solo con mouse o trackpad; js/main.js) */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.pl-cursor { position: fixed; z-index: 1000; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid var(--pl-line); border-radius: 50%; background: transparent;
  pointer-events: none; opacity: 0; transition: opacity .2s, width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease); }
.pl-cursor.is-visible { opacity: 1; }
.pl-cursor.is-hover { width: 44px; height: 44px; margin: -22px 0 0 -22px; }

/* Sistemas: con JavaScript, el título y las disciplinas aparecen cuando la línea pasa por ellos */
.thread-js .pl-caps-title, .thread-js .pl-cap { opacity: 0; translate: 0 10px; filter: blur(4px); transition: opacity .6s var(--ease), translate .6s var(--ease), filter .6s var(--ease); }
.thread-js .pl-caps-title.is-on, .thread-js .pl-cap.is-on { opacity: 1; translate: 0 0; filter: none; }

/* Hero: flecha que invita a bajar (del tamaño del texto de apoyo), con un leve movimiento hacia abajo */
.pl-scroll { position: absolute; z-index: 3; right: var(--gutter); bottom: var(--space-4); display: grid; place-items: center; width: 44px; height: 44px; color: var(--pl-line); }
.pl-scroll .icon { width: 14px; height: 14px; transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) { .pl-scroll .icon { animation: pl-scroll-hint 1.6s var(--ease) infinite; } }
@keyframes pl-scroll-hint { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 5px; } }

/* Popup de Conversemos con el mismo lenguaje oscuro del hero: fondo, degradado y textos claros */
.pl-dialog { background: radial-gradient(60% 70% at 78% 100%, #17233a, transparent), linear-gradient(160deg, #0b1220, #070b13); color: #f1eee6; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.pl-dialog-lead, .pl-dialog-body { background: transparent; }
.pl-dialog-lead .pl-dialog-title, .pl-dialog-title { color: #f1eee6; }
.pl-dialog-close { border-color: rgba(241, 238, 230, .35); color: #f1eee6; }
.pl-field label { color: rgba(241, 238, 230, .6); }
.pl-field input, .pl-field textarea { color: #f1eee6; border-bottom-color: rgba(241, 238, 230, .35); }
.pl-field input:focus, .pl-field textarea:focus { border-bottom-color: var(--pl-line); }
.pl-dialog .btn-primary { background: #f1eee6; color: #0b0d12; }
.pl-dialog .btn-primary:hover, .pl-dialog .btn-primary:focus-visible { background: #d4ff3f; color: #0b0d12; }
.pl-form-note { color: rgba(241, 238, 230, .6); }
.pl-form-note:empty { display: none; }
.pl-check { color: rgba(241, 238, 230, .75); }
.pl-check a { color: #f1eee6; }
.pl-check input { accent-color: #d4ff3f; }
/* El campo activo se marca solo con el subrayado flúor (sin contorno de caja) */
.pl-dialog .pl-field input:focus, .pl-dialog .pl-field textarea:focus { outline: 0; border-bottom: 2px solid #d4ff3f; }

/* Títulos de sección de la home: mismo movimiento que el hero (js/main.js, initSectionTitles) */
.pl-w { display: inline-block; transform: translate3d(calc(var(--shift, 0px) * var(--dir, 1)), 0, 0); will-change: transform; }
.pl-w-mark { background: linear-gradient(transparent 58%, var(--pl-line) 58%, var(--pl-line) 92%, transparent 92%); }
.pl-mark-split { background: none; }
.pl-split:not(.is-in) .pl-w { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pl-split.is-in .pl-w { animation: pl-w-in .9s var(--ease) backwards; animation-delay: calc(var(--line, 0) * .12s); }
}
@keyframes pl-w-in { from { opacity: 0; transform: translate3d(0, .22em, 0); } }

/* Títulos de ideas: las líneas aparecen una tras otra al entrar en pantalla (js/main.js, initIdeasReveal).
   Antes de que el título llegue al centro la composición queda cerrada; después el scroll abre las palabras y crece el producto */
@media (prefers-reduced-motion: no-preference) {
  .inicio .ideas-title .ideas-line { opacity: 0; transition: opacity .7s var(--ease) calc(var(--i, 0) * .2s); }
  .inicio .ideas-title.is-on .ideas-line { opacity: 1; }
}

/* Ideas: la sección se fija en pantalla mientras el scroll abre las palabras y crece el producto; después la página sigue
   bajando. Las animaciones avanzan con el progreso de la fijación (js/main.js, scrubIdeas), no con la línea de tiempo del scroll */
.inicio .ideas { display: block; height: calc(100svh + 500px); min-height: 0; }
/* Móvil: el recorrido fijado es más corto (unos 4 giros de rueda) */
@media (max-width: 40em) { .inicio .ideas { height: calc(100svh + 400px); } }
.inicio .ideas-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(1rem, 3svh, 2.5rem); overflow: hidden; overflow: clip; }
/* Escritorio: el contenido de la home usa el mismo ancho que el encabezado (sin tope de 75 rem), para que el hero y Ideas
   se alineen con el logo y el menú en pantallas grandes */
@media (min-width: 53.75em) {
  .inicio { --content-width: calc(100% - 2 * var(--header-pad)); }
  .inicio .ideas-foot { position: relative; top: -30px; }
}
.inicio .ideas-line > span, .inicio .ideas-w1, .inicio .ideas-w2, .inicio .ideas-item { animation-timeline: auto !important; animation-play-state: paused !important; animation-duration: 1000ms !important; animation-timing-function: linear !important; animation-fill-mode: both !important; }

/* Sistemas: la misma cuadrícula de fondo del hero, en versión clara (líneas oscuras y suaves, desvanecidas) */
.inicio .pl-caps::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(11, 18, 32, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 18, 32, .06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 30% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 30% 30%, #000, transparent 75%); }

/* Disciplinas de Sistemas: la bajada ocupa como máximo dos líneas (texto más apretado, sin salirse del punto) */
.inicio .pl-cap-desc { font-size: 11px; line-height: 1.5; letter-spacing: -0.03em; }

/* Sistemas: círculo de radio fijo. El punto de cada disciplina queda sobre la línea (ancla del elemento) y el texto
   va separado del punto por un desplazamiento constante, siempre hacia afuera del círculo */
.inicio .pl-stage { position: relative; aspect-ratio: 1440 / 1000; min-height: 0; }
.pl-cap { position: absolute; z-index: 1; width: 0; height: 0; }
.pl-cap .pl-dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; box-sizing: border-box; transform: translate(-50%, -50%); border: 4px solid var(--pl-line); border-radius: 50%; background: var(--frame); }
.pl-cap-txt { position: absolute; top: 0; width: clamp(12rem, 23vw, 20rem); display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; transform: translateY(-50%); }
.pl-cap-l .pl-cap-txt { right: 30px; text-align: right; }
.pl-cap-r .pl-cap-txt { left: 30px; text-align: left; }
.pl-cap-1 { left: 38.05%; top: 25.43%; }
.pl-cap-2 { left: 30.42%; top: 39.74%; }
.pl-cap-3 { left: 30.42%; top: 60.26%; }
.pl-cap-4 { left: 38.05%; top: 74.57%; }
.pl-cap-5 { left: 60.42%; top: 24.02%; }
.pl-cap-6 { left: 68.04%; top: 35.00%; }
.pl-cap-7 { left: 70.83%; top: 50.00%; }
.pl-cap-8 { left: 68.04%; top: 65.00%; }
.pl-cap-9 { left: 60.42%; top: 75.98%; }
@media (max-width: 40em) {
  .inicio .pl-stage { aspect-ratio: auto; min-height: 1000px; }
  .pl-cap-l { left: 44%; }
  .pl-cap-r { left: 56%; }
  .pl-cap-1 { top: 20%; } .pl-cap-2 { top: 40%; } .pl-cap-3 { top: 60%; } .pl-cap-4 { top: 80%; }
  .pl-cap-5 { top: 14%; } .pl-cap-6 { top: 30%; } .pl-cap-7 { top: 46%; } .pl-cap-8 { top: 62%; } .pl-cap-9 { top: 78%; }
  .pl-cap-txt { width: calc(44% - 42px); font-size: 12px; }
  .pl-cap-l .pl-cap-txt, .pl-cap-r .pl-cap-txt { width: calc(44% - 42px); }
}

/* Sistemas: cada texto se separa del aro hacia afuera, en la dirección de su punto, con una distancia fija
   (~40 px del aro, fuera del círculo de referencia). --ux/--uy son el vector unitario del punto; --k escala la distancia con el aro */
.pl-stage { container-type: inline-size; }
.pl-cap-txt { --k: calc(60 / 1440 * 100vw); --k: calc(60 / 1440 * 100cqw); left: 0; right: auto; }
.pl-cap-l .pl-cap-txt { text-align: right; transform: translate(calc(-100% - 10px + var(--ux, 0) * var(--k)), calc(-50% + var(--uy, 0) * var(--k))); }
.pl-cap-r .pl-cap-txt { text-align: left; transform: translate(calc(10px + var(--ux, 0) * var(--k)), calc(-50% + var(--uy, 0) * var(--k))); }
.pl-cap-1 { --ux: -0.574; --uy: -0.819; } .pl-cap-2 { --ux: -0.940; --uy: -0.342; }
.pl-cap-3 { --ux: -0.940; --uy: 0.342; } .pl-cap-4 { --ux: -0.574; --uy: 0.819; }
.pl-cap-5 { --ux: 0.5; --uy: -0.866; } .pl-cap-6 { --ux: 0.866; --uy: -0.5; }
.pl-cap-7 { --ux: 1; --uy: 0; } .pl-cap-8 { --ux: 0.866; --uy: 0.5; } .pl-cap-9 { --ux: 0.5; --uy: 0.866; }
@media (max-width: 40em) {
  .pl-cap-l .pl-cap-txt { transform: translate(calc(-100% - 26px), -50%); }
  .pl-cap-r .pl-cap-txt { transform: translate(26px, -50%); }
}

/* Sistemas: ocho puntos sobre el aro (cuatro a cada lado), con la misma separación vertical (16.67 %) */
.pl-cap-1 { left: 38.50%; top: 25.00%; --ux: -0.500; --uy: -0.866; }
.pl-cap-2 { left: 30.00%; top: 41.67%; --ux: -0.866; --uy: -0.500; }
.pl-cap-3 { left: 30.00%; top: 58.33%; --ux: -1.000; --uy: 0.000; }
.pl-cap-4 { left: 38.50%; top: 75.00%; --ux: -0.866; --uy: 0.500; }
.pl-cap-5 { left: 39.58%; top: 75.98%; --ux: -0.500; --uy: 0.866; }
.pl-cap-6 { left: 61.50%; top: 25.00%; --ux: 0.500; --uy: -0.866; }
.pl-cap-7 { left: 70.00%; top: 41.67%; --ux: 0.866; --uy: -0.500; }
.pl-cap-8 { left: 70.00%; top: 58.33%; --ux: 1.000; --uy: 0.000; }
.pl-cap-9 { left: 61.50%; top: 75.00%; --ux: 0.866; --uy: 0.500; }
.pl-cap-10 { left: 60.42%; top: 75.98%; --ux: 0.500; --uy: 0.866; }
@media (max-width: 40em) {
  .pl-cap-1 { top: 14%; }
  .pl-cap-2 { top: 30%; }
  .pl-cap-3 { top: 46%; }
  .pl-cap-4 { top: 62%; }
  .pl-cap-5 { top: 78%; }
  .pl-cap-6 { top: 14%; }
  .pl-cap-7 { top: 30%; }
  .pl-cap-8 { top: 46%; }
  .pl-cap-9 { top: 62%; }
  .pl-cap-10 { top: 78%; }
}

/* Continuidad de la línea entre secciones: cada sección empieza y termina exactamente donde termina la anterior */
.inicio .ideas { padding-top: 0; padding-bottom: 0; }
.inicio .pl-caps { margin-top: 0; }

/* Portafolio de la home: cubos isométricos sobre un escenario de 1000 px, con la línea flúor que lo recorre */
.inicio .alt-folio { padding: 0; min-height: 0; }
.inicio .alt-stage { height: 1000px; width: 100%; max-width: none; margin: 0; }
.inicio .alt-bg { top: 50%; }
@media (max-width: 40em) {
  .inicio .alt-stage { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 0.75rem; width: 100%; padding: 0 1rem; box-sizing: border-box; }
  .inicio .alt-item { position: relative; left: auto !important; top: auto !important; min-width: 0; display: flex; justify-content: center; }
  .inicio .alt-mock img { width: 100%; height: auto; max-width: 100%; }
  .inicio .alt-tag { white-space: normal; font-size: 11px; text-align: center; }
  .inicio .alt-hint { display: none; }
}

/* Marca y producto: flechas de señalética (solo contorno flúor, sin fondo) con el nombre del servicio dentro (posiciones en % de la sección) */
.pl-signs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pl-cartel { position: absolute; left: 76.4%; width: 20%; height: 13%; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: clamp(18px, 1.9vw, 26px); letter-spacing: -0.02em; color: #f1eee6; white-space: nowrap; }
.pl-icono { position: absolute; left: 66.9%; width: 4.86%; height: 7%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: #d4ff3f; }
.pl-icono .icon { width: 50%; height: 50%; fill: none; stroke: currentColor; }
.pl-icono-1 { top: 31.3%; }
.pl-icono-2 { top: 49.3%; }
.pl-icono-3 { top: 67.3%; }
.pl-cartel-1 { top: 28.3%; }
.pl-cartel-2 { top: 46.3%; }
.pl-cartel-3 { top: 64.3%; }
@media (max-width: 40em) {
  /* En móvil las flechas van sobre el título (mismas proporciones que el trazo móvil, 375 × 1000) */
  .pl-producto { padding-top: 370px; min-height: 0; }
  .pl-producto .pl-inner { padding-right: 22px; }
  .pl-signs { display: block; }
  .pl-icono { position: absolute; left: calc(21.5% - 20px); width: 40px; height: 40px; }
  .pl-cartel { position: absolute; left: 33.9%; width: 44.7%; height: 9%; transform: none; font-size: 18px; justify-content: flex-start; padding-right: 0; }
  .pl-icono.pl-icono-1 { top: calc(7.3% - 20px); }
  .pl-icono.pl-icono-2 { top: calc(19.3% - 20px); }
  .pl-icono.pl-icono-3 { top: calc(30.6% - 20px); }
  .pl-cartel.pl-cartel-1 { top: 2.8%; }
  .pl-cartel.pl-cartel-2 { top: 14.8%; }
  .pl-cartel.pl-cartel-3 { top: 26.1%; }
}

/* Marca y producto: el icono y el nombre de cada flecha aparecen con suavidad cuando la línea la recorre (js/main.js, marcas de la sección) */
.pl-cartel, .pl-icono { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.pl-cartel { transform: translateX(-14px); }
.pl-icono { transform: scale(.85); }
.pl-cartel.is-on, .pl-icono.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pl-cartel, .pl-icono { opacity: 1; transform: none; transition: none; } }

/* Sistemas en móvil: la línea baja por el centro (50 %) y cada punto cae sobre ella; los textos van a cada lado, con ancho fijo */
@media (max-width: 40em) {
  .inicio .pl-stage { aspect-ratio: auto; min-height: 1000px; }
  .pl-cap { width: 0; height: 0; }
  .pl-cap-1, .pl-cap-2, .pl-cap-3, .pl-cap-4, .pl-cap-5, .pl-cap-6, .pl-cap-7, .pl-cap-8, .pl-cap-9, .pl-cap-10 { left: 50%; }
  .pl-cap-l .pl-cap-txt, .pl-cap-r .pl-cap-txt { width: 140px; --ux: 0; --uy: 0; font-size: 12px; }
  .pl-cap-l .pl-cap-txt { left: 0; right: auto; transform: translate(calc(-100% - 18px), -50%); text-align: right; }
  .pl-cap-r .pl-cap-txt { left: 0; right: auto; transform: translate(18px, -50%); text-align: left; }
  .pl-cap-name { white-space: normal; font-size: 15px; }
  .pl-cap-desc { display: none; }
}

/* Preguntas frecuentes: fondo blanco con la grilla cuadrille, sin el degradado ni el resplandor del panel */
.inicio #preguntas { background: #fff; }
.inicio #preguntas::before { display: none; }

/* Footer en la portada: ancho completo, con el mismo fondo oscuro de las secciones; el contenido se alinea con el contenedor y el logo se invierte para leerse */
.inicio .site-footer { width: auto; margin-inline: 0; background: var(--pl-dark); border-radius: 0; padding-inline: max(16px, calc((100% - var(--content-width)) / 2)); color: var(--pl-on-dark-muted); }
.inicio .site-footer .brand-logo { filter: invert(1); }
@media (max-width: 40em) { .inicio .site-footer .brand-logo { height: 4.5rem; } }
.inicio .site-footer .brand-tagline { color: var(--pl-on-dark-muted); border-left-color: rgba(241, 238, 230, .25); }
.inicio .site-footer .footer-grid { border-bottom-color: rgba(241, 238, 230, .14); }
.inicio .site-footer .footer-grid h2 { color: var(--pl-on-dark-muted); }
.inicio .site-footer .footer-grid a { color: var(--pl-on-dark); }
.inicio .site-footer .footer-grid a:hover { color: var(--pl-line); }

/* Sobre mí: separación entre secciones (la portada resuelve su espaciado en cada bloque) */
.pl-sobre { padding-block: clamp(3rem, 8vw, 6rem); }
.pl-sobre.pl-intro { padding-block: clamp(3.5rem, 10vw, 8rem) clamp(2rem, 5vw, 4rem); }
.inicio .pl-dark .pl-title, .inicio .pl-dark .pl-title strong { color: var(--pl-on-dark); }
/* Sobre mí: el contacto no está fijado en un bloque de scroll, así que no necesita la altura de la portada */
.pl-sobre.pl-contact { height: auto; min-height: 0; padding: clamp(3rem, 8vw, 6rem) 0; }

/* Sobre mí: retrato de escena (foto completa, no recorte), sin el círculo de acento del recorte */
.portrait-escena::before { display: none; }
.portrait-escena img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }

/* Sobre mí: nombre grande, etiquetas bajo el nombre, bajada, foto con el ancho máximo del contenido y texto de presentación */
.sobre-intro { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4rem); }
.sobre-titulo { margin: 0; font-size: clamp(2.6rem, 8.5vw, 8.5rem); line-height: 0.95; letter-spacing: -0.035em; font-weight: 700; text-transform: uppercase; }
.sobre-bajada { margin: clamp(2.5rem, 6vw, 4rem) auto 0; max-width: 24em; text-align: center; font-size: clamp(1.2rem, 2.4vw, 1.9rem); line-height: 1.25; font-weight: 500; }
.sobre-bajada::before { content: "["; }
.sobre-bajada::after { content: "]"; }
.sobre-foto { margin: 0; }
.sobre-foto img { display: block; width: 100%; height: auto; }
.sobre-texto { padding-block: clamp(3rem, 8vw, 6rem); }
.sobre-texto p { margin: 0 0 1.25em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; }
.sobre-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 0; padding: 1rem 0 0; list-style: none; border-top: 1px solid currentColor; font-size: 0.9rem; line-height: 1.4; }
@media (max-width: 40em) { .sobre-meta { grid-template-columns: 1fr; } .sobre-meta li:nth-child(n) { text-align: left; } }
.sobre-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.sobre-rol { margin: 0 0 0.5rem; max-width: 14em; font-size: 0.95rem; line-height: 1.4; text-align: right; }
@media (max-width: 40em) { .sobre-rol { text-align: left; } }
/* Sobre mí: bajada de la sección de etapas en una sola línea cuando cabe, con aire antes de la lista */
.sobre-etapas-intro { width: max-content; max-width: 100%; margin: 0 0 clamp(2rem, 5vw, 3rem); font-family: inherit; font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: normal; color: inherit; }
/* Sobre mí: aire entre la foto y la sección de etapas */
.sobre-etapas { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
/* Sobre mí: habilidades como tags bajo el texto final */
.sobre-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.sobre-tags li { padding: 0.35rem 0.9rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.9rem; line-height: 1.4; }
/* Sobre mí: en móvil el nombre ocupa todo el ancho del contenido, en una sola línea */
@media (max-width: 40em) { .sobre-titulo { font-size: 12.8vw; white-space: nowrap; } }
/* Sobre mí: la grilla de fondo se concentra hacia la derecha de la sección del nombre */
.sobre-intro.frame-grid { --grid-at: 85% 40%; }