/* Marca Asimov Systems (marca/asimov/brandbook.html): noche, grafito, platino-iridio, hueso y cobre (máx. 5 %).
   Los nombres de variables vienen de la web anterior: brote = platino (etiquetas), ámbar = cobre (agendar), petróleo = línea.
   La página personal /dum/ usa css/dum.css, con la marca Dum Figueroa. */
:root {
  --negro: #0E1116;
  --negro-2: #14181F;
  --negro-3: #1A1D23;
  --petroleo: #2A2F38;
  --hueso: #EDEAE3;
  --hueso-62: rgba(237, 234, 227, .62);
  --hueso-30: rgba(237, 234, 227, .30);
  --brote: #A7ADB5;
  --ambar: #E8743B;
  --radio: 0px;
  --ancho: 1180px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .contenedor { padding: 0 32px; } }

.etiqueta { color: var(--brote); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.cuerpo { color: var(--hueso-62); }
.titular { font-stretch: 125%; font-weight: 900; line-height: 1.02; letter-spacing: -.01em; margin: 0; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; background: rgba(13, 17, 16, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--petroleo); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.firma { font-stretch: 125%; font-weight: 900; font-size: 18px; text-decoration: none; white-space: nowrap; }
.firma span { color: var(--brote); }
.nav { display: flex; gap: 22px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--hueso-62); white-space: nowrap; }
.nav a:hover { color: var(--hueso); }
@media (max-width: 1080px) { .nav a[href="#como"], .nav a[href="#preguntas"] { display: none; } }
@media (max-width: 860px) { .nav { display: none; } }
.boton-chico { white-space: nowrap; }

/* Botones */
.boton { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; border: 1px solid var(--petroleo); background: transparent; color: var(--hueso); transition: border-color .15s, background .15s; }
.boton:hover { border-color: var(--brote); }
.boton-principal { background: var(--ambar); color: var(--negro); border-color: var(--ambar); }
.boton-principal:hover { background: #f5b65a; border-color: #f5b65a; }
.boton-chico { padding: 9px 16px; font-size: 14px; }

/* Portada */
.portada { padding-top: 72px; padding-bottom: 56px; }
.portada .titular { font-size: clamp(38px, 7vw, 84px); max-width: 15ch; margin: 18px 0 22px; }
.portada .bajada { font-size: clamp(17px, 2vw, 20px); max-width: 56ch; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--petroleo); border: 1px solid var(--petroleo); border-radius: var(--radio); overflow: hidden; margin-top: 56px; }
.cifras div { background: var(--negro); padding: 20px; }
.cifras b { display: block; font-stretch: 125%; font-weight: 900; font-size: clamp(26px, 4vw, 40px); line-height: 1; }
.cifras span { color: var(--hueso-62); font-size: 14px; }
@media (max-width: 560px) { .cifras { grid-template-columns: 1fr; } }

/* Secciones */
.seccion { padding: 64px 0; border-top: 1px solid var(--petroleo); }
.seccion h2 { font-size: clamp(28px, 4.5vw, 48px); margin: 10px 0 14px; }
.seccion .intro { max-width: 60ch; margin-bottom: 28px; }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filtro { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--petroleo); background: transparent; color: var(--hueso-62); cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }

/* Tarjetas */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
@media (max-width: 360px) { .rejilla { grid-template-columns: 1fr; } }
.tarjeta { display: flex; flex-direction: column; background: var(--negro-2); border: 1px solid var(--petroleo); border-radius: var(--radio); overflow: hidden; text-decoration: none; transition: transform .2s, border-color .2s; }
.tarjeta:hover { transform: translateY(-3px); border-color: var(--brote); }
.tarjeta-arte { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--negro-3); }
.tarjeta-arte svg { width: 100%; height: 100%; display: block; }
.tarjeta-cuerpo { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tarjeta h3 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 800; }
.tarjeta p { margin: 0; color: var(--hueso-62); font-size: 15px; }
.tarjeta-pie { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--petroleo); color: var(--brote); white-space: nowrap; }
.chip-conf { color: var(--hueso-62); border-style: dashed; }
.chip-demo { color: var(--hueso); border-color: var(--hueso-30); }

/* Pasos */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; counter-reset: paso; }
.paso { border: 1px solid var(--petroleo); border-radius: var(--radio); padding: 22px; }
.paso::before { counter-increment: paso; content: '0' counter(paso); color: var(--brote); font-weight: 700; font-size: 14px; }
.paso h3 { margin: 8px 0 6px; font-size: 20px; }
.paso p { margin: 0; color: var(--hueso-62); font-size: 15px; }

.nota { font-size: 14px; color: var(--hueso-62); border-left: 2px solid var(--petroleo); padding-left: 14px; margin-top: 24px; max-width: 70ch; }
.pie { padding: 40px 0 56px; border-top: 1px solid var(--petroleo); color: var(--hueso-62); font-size: 14px; }

/* Ficha */
.ficha-cabeza { padding: 48px 0 32px; }
.ficha-cabeza .titular { font-size: clamp(32px, 5.5vw, 60px); margin: 14px 0 16px; }
.ficha-cabeza .gancho { font-size: clamp(18px, 2.2vw, 22px); max-width: 52ch; color: var(--hueso-62); margin: 0; }
.volver { display: inline-block; color: var(--hueso-62); text-decoration: none; font-size: 14px; margin-bottom: 18px; }
.ficha-cuerpo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; padding: 8px 0 64px; }
@media (max-width: 860px) { .ficha-cuerpo { grid-template-columns: 1fr; } .lateral { position: static; } }
.bloque { margin-bottom: 32px; }
.bloque h2 { font-size: 22px; margin: 6px 0 10px; }
.bloque ul { margin: 0; padding-left: 20px; color: var(--hueso-62); }
.bloque li { margin-bottom: 8px; }
.bloque p { margin: 0; color: var(--hueso-62); }
.lateral { align-self: start; position: sticky; top: 88px; border: 1px solid var(--petroleo); border-radius: var(--radio); padding: 22px; background: var(--negro-2); }
.lateral dl { margin: 0 0 20px; display: grid; gap: 14px; }
.lateral dt { color: var(--brote); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.lateral dd { margin: 2px 0 0; font-weight: 700; }
.lateral .boton { width: 100%; justify-content: center; margin-top: 10px; }
.estimado { font-size: 12px; color: var(--hueso-62); font-weight: 400; }
.visor { border: 1px solid var(--petroleo); border-radius: var(--radio); overflow: hidden; background: var(--negro-3); margin-bottom: 32px; }
.visor iframe { width: 100%; height: min(72vh, 640px); border: 0; display: block; background: #fff; }
.visor-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; font-size: 14px; color: var(--hueso-62); border-bottom: 1px solid var(--petroleo); }
.sin-demo { padding: 40px 24px; text-align: center; color: var(--hueso-62); }

/* Guiones (página interna) */
.guion { border: 1px solid var(--petroleo); border-radius: var(--radio); padding: 22px; margin-bottom: 16px; background: var(--negro-2); }
.guion h3 { margin: 4px 0 14px; font-size: 20px; }
.guion .linea { margin: 0 0 10px; }
.guion .linea b { color: var(--brote); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; display: block; }
.copiar { margin-top: 6px; }

:focus-visible { outline: 2px solid var(--brote); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* En vivo: botón hueso (el ámbar sigue siendo solo agendar), captura enlazada y sello en la tarjeta */
.boton-vivo { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.boton-vivo:hover { background: #fff; border-color: #fff; }
.punto-vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brote); margin-right: 8px; box-shadow: 0 0 0 0 rgba(143, 185, 124, .6); animation: latido 1.8s infinite; vertical-align: middle; }
.boton-vivo .punto-vivo { background: #3f7a2c; }
@keyframes latido { 70% { box-shadow: 0 0 0 7px rgba(143, 185, 124, 0); } 100% { box-shadow: 0 0 0 0 rgba(143, 185, 124, 0); } }
.captura { display: block; position: relative; }
.captura img { width: 100%; height: auto; }
.captura-cta { position: absolute; right: 16px; bottom: 16px; padding: 12px 20px; border-radius: 999px; background: var(--hueso); color: var(--negro); font-weight: 800; font-size: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform .15s; }
.captura:hover .captura-cta { transform: translateY(-2px); }
.tarjeta-arte img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sello-vivo { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(13, 17, 16, .82); color: var(--hueso); font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); }
.visor-barra .boton { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 480px) { .visor-barra { font-size: 13px; } .captura-cta { right: 10px; bottom: 10px; padding: 9px 15px; font-size: 14px; } }

/* Marcas con las que trabajé: todo en blanco y negro (el filtro vuelve blanco cualquier logo) */
.marcas { margin-top: 48px; }
.marcas ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px; }
.marcas li { opacity: .72; transition: opacity .15s; }
.marcas li:hover { opacity: 1; }
.marcas img { height: 30px; width: auto; filter: grayscale(1) brightness(0) invert(1); }
.marca-texto { font-stretch: 125%; font-weight: 900; font-size: 19px; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 560px) { .marcas ul { gap: 14px 28px; } .marca-texto { font-size: 16px; } .marcas img { height: 24px; } }

/* Agenda */
.agenda-cuerpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; padding: 8px 0 64px; align-items: start; }
.agenda-cuerpo > .agenda-paso { grid-column: 1; min-width: 0; }
.agenda-cuerpo > * { min-width: 0; }
.agenda-lado { grid-column: 2; grid-row: 1 / span 4; }
@media (max-width: 860px) { .agenda-cuerpo { grid-template-columns: minmax(0, 1fr); } .agenda-lado { grid-column: 1; grid-row: auto; position: static; } }
.agenda-paso h2 { font-size: 22px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.agenda-paso h2 span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--petroleo); color: var(--brote); font-size: 14px; }
.agenda-zona { font-size: 14px; margin: 0 0 16px; }
.dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; scrollbar-width: thin; }
.dia { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 10px 8px; border-radius: 12px; border: 1px solid var(--petroleo); background: transparent; color: var(--hueso); font: inherit; cursor: pointer; }
.dia small { font-size: 12px; color: var(--hueso-62); text-transform: capitalize; }
.dia b { font-size: 22px; font-stretch: 125%; line-height: 1; }
.dia[aria-pressed="true"] { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.dia[aria-pressed="true"] small { color: var(--negro); }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.hora { padding: 12px 8px; border-radius: 10px; border: 1px solid var(--petroleo); background: var(--negro-2); color: var(--hueso); font: inherit; font-weight: 700; cursor: pointer; }
.hora small { display: block; font-weight: 400; font-size: 12px; color: var(--hueso-62); }
.hora:hover { border-color: var(--brote); }
.elegido { font-weight: 700; font-size: 18px; margin: 0 0 16px; text-transform: capitalize; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campos label { display: grid; gap: 6px; font-size: 14px; color: var(--hueso-62); }
.campos .ancho { grid-column: 1 / -1; }
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } }
.campos input, .campos select, .campos textarea { font: inherit; font-size: 16px; color: var(--hueso); background: var(--negro-2); border: 1px solid var(--petroleo); border-radius: 10px; padding: 12px; width: 100%; }
.campos input:focus, .campos select:focus, .campos textarea:focus { border-color: var(--brote); outline: none; }
.trampa { position: absolute !important; left: -9999px; }
.error { color: #f0a08a; min-height: 1.5em; margin: 12px 0 0; }
.agenda .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.listo:focus { outline: none; }

/* Mapa de clientes */
.mapa-zona { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .mapa-zona { grid-template-columns: minmax(0, 1fr); } }
.mapa { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.mapa path { fill: var(--negro-3); stroke: var(--negro); stroke-width: 1.2; transition: fill .2s; }
.mapa path.con { fill: var(--petroleo); stroke: var(--brote); stroke-width: 1.5; }
.mapa path.con.activo, .mapa path.con:hover { fill: var(--brote); }
.mapa .pin { fill: var(--brote); }
.mapa .onda { fill: none; stroke: var(--brote); stroke-width: 2; opacity: 0; animation: onda 2.4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes onda { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
.paises { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.paises button { width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--petroleo); background: transparent; color: var(--hueso); font: inherit; cursor: pointer; }
.paises button[aria-pressed="true"], .paises button:hover { border-color: var(--brote); background: var(--negro-2); }
.paises b { font-size: 18px; }
.paises small { grid-column: 2; color: var(--hueso-62); font-size: 14px; }
.paises i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--brote); margin-top: 8px; }

/* Agenda: subtítulo entre bloques del formulario */
.sub-paso { font-size: 15px; color: var(--brote); text-transform: uppercase; letter-spacing: .08em; margin: 28px 0 14px; }

/* Migas de pan (fichas) */
.migas { font-size: 14px; color: var(--hueso-62); margin-bottom: 14px; }
.migas a { color: var(--hueso-62); text-decoration: none; }
.migas a:hover { color: var(--hueso); }

/* Preguntas frecuentes */
.preguntas { display: grid; gap: 10px; max-width: 820px; }
.preguntas details { border: 1px solid var(--petroleo); border-radius: var(--radio); background: var(--negro-2); }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 48px 18px 20px; font-weight: 700; font-size: 17px; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--brote); font-size: 22px; }
.preguntas details[open] summary::after { content: '–'; }
.preguntas details p { margin: 0; padding: 0 20px 18px; color: var(--hueso-62); }

/* Pie */
.pie-filas { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.redes { display: flex; gap: 18px; }
.redes a { color: var(--hueso-62); text-decoration: none; }
.redes a:hover { color: var(--brote); }

/* Cabecera con botón: en celular el botón se achica */
@media (max-width: 640px) { .cabecera .boton { padding: 8px 14px; font-size: 13px; } }

/* Agenda: país primero */
.pais-titulo { font-size: clamp(24px, 4vw, 34px); }
.paises-agenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; }
.pais-ag { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--petroleo); background: var(--negro-2); color: var(--hueso); cursor: pointer; transition: border-color .15s, transform .15s, background .15s; }
.pais-ag b { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.pais-ag small { color: var(--hueso-62); font-size: 12px; }
.pais-ag:hover { border-color: var(--brote); transform: translateY(-2px); }
.pais-ag:focus-visible { outline: 2px solid var(--brote); outline-offset: 2px; }
.pais-ag.sugerido { grid-column: span 2; border-color: var(--brote); background: linear-gradient(135deg, var(--petroleo), var(--negro-2)); }
.pais-ag.sugerido b { font-size: 22px; }
.pais-ag.sugerido small { color: var(--brote); }
.pais-ag[aria-pressed="true"] { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.pais-ag[aria-pressed="true"] small { color: var(--petroleo); }
@media (max-width: 420px) { .paises-agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Nicho, quién soy, cursos y charlas */
.nicho { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.nicho li { min-width: 0; border: 1px solid var(--petroleo); border-radius: 14px; padding: 14px 16px; background: var(--negro-2); }
.nicho b { display: block; color: var(--brote); font-size: 16px; }
.nicho span { color: var(--hueso-62); font-size: 14px; }
.quien { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: start; }
.quien .cuerpo p { margin: 0 0 14px; }
.trayectoria { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trayectoria li { border: 1px solid var(--petroleo); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.trayectoria li:nth-last-child(2) { border-color: var(--brote); color: var(--brote); }
.ofertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.oferta { min-width: 0; border: 1px solid var(--petroleo); border-radius: 18px; padding: 26px; background: var(--negro-2); display: flex; flex-direction: column; gap: 12px; }
.oferta h3 { margin: 0; font-size: 22px; }
.oferta .cuerpo { margin: 0; flex: 1; }
.precio { margin: 0; }
.precio b { font-size: 28px; color: var(--hueso); }
.precio span { display: block; color: var(--hueso-62); font-size: 14px; }
.oferta .boton { align-self: flex-start; }
.nota { color: var(--hueso-62); font-size: 13px; margin-top: 14px; }
@media (max-width: 760px) { .quien, .ofertas { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
#paso-horario { margin-top: 8px; }

/* ===== Asimov Systems: capa de marca ===== */
:root { --cobre: #E8743B; --display: 'Michroma', 'Eurostile', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; }
.titular { font-family: var(--display); font-weight: 400; font-stretch: normal; letter-spacing: .03em; line-height: 1.18; text-wrap: balance; }
.portada .titular { font-size: clamp(28px, 5.2vw, 60px); max-width: 18ch; }
.seccion h2 { font-size: clamp(22px, 3.4vw, 38px); }
.ficha-cabeza .titular { font-size: clamp(24px, 4.2vw, 46px); }
.etiqueta, .lateral dt, .sub-paso, .guion .linea b { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; }
.etiqueta b { color: var(--cobre); font-weight: 500; }
.cifras b, .dia b, .marca-texto { font-family: var(--display); font-weight: 400; font-stretch: normal; letter-spacing: .03em; }
.cifras b { font-size: clamp(22px, 3.2vw, 32px); }
.firma img { height: 26px; width: auto; display: block; }
.cabecera { background: rgba(14, 17, 22, .9); }
/* Esquinas: biseladas, nunca redondas */
.bisel, .tarjeta, .paso, .lateral, .oferta, .nicho li, .visor, .preguntas details, .cifras, .boton, .captura-cta { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.boton, .filtro, .chip, .dia, .hora, .paises button, .pais-ag, .campos input, .campos select, .campos textarea, .trayectoria li, .sello-vivo, .captura-cta { border-radius: 0; }
.boton-principal:hover { background: #F08A55; border-color: #F08A55; }
.boton-vivo .punto-vivo, .punto-vivo { background: var(--cobre); }
.reticula { background-image: linear-gradient(var(--petroleo) 1px, transparent 1px), linear-gradient(90deg, var(--petroleo) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; }
.portada-marco { position: relative; }
.micro { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brote); }
.micro b { color: var(--cobre); font-weight: 500; }
.mapa path.con { stroke: var(--cobre); }
.mapa path.con.activo, .mapa path.con:hover { fill: var(--cobre); }
.mapa .pin, .paises i { fill: var(--cobre); background: var(--cobre); }
.mapa .onda { stroke: var(--cobre); }
.paso::before { font-family: var(--mono); color: var(--cobre); content: 'D' counter(paso); }
.pasos.p7 .paso:nth-child(1)::before { content: 'DÍA 0'; } .pasos.p7 .paso:nth-child(2)::before { content: 'DÍAS 1–2'; }
.pasos.p7 .paso:nth-child(3)::before { content: 'DÍAS 3–6'; } .pasos.p7 .paso:nth-child(4)::before { content: 'DÍA 7'; }
:focus-visible { outline-color: var(--cobre); }
/* Equipo y leyes */
.equipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 2px; background: var(--petroleo); margin-top: 28px; }
.equipo article { background: var(--negro-2); padding: 22px; min-width: 0; }
.equipo .ini { font: 400 15px var(--display); color: var(--cobre); letter-spacing: .08em; }
.equipo h3 { margin: 14px 0 4px; font-size: 19px; }
.equipo .rol { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brote); }
.equipo p { margin: 10px 0 0; color: var(--hueso-62); font-size: 15px; }
.leyes { display: grid; gap: 2px; background: var(--petroleo); margin-top: 24px; max-width: 900px; }
.leyes div { background: var(--negro-2); padding: 18px 20px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
.leyes .n { font: 400 20px var(--display); color: var(--cobre); }
.leyes p { margin: 0; }
.leyes small { display: block; color: var(--hueso-62); font-size: 15px; margin-top: 4px; }
.fundador { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: start; }
@media (max-width: 760px) { .fundador { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.mercados { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.mercados li { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--petroleo); padding: 7px 12px; color: var(--hueso); }
.mercados li.nuevo { border-color: var(--cobre); color: var(--cobre); }
/* Menú: mismo idioma técnico que el logo */
.nav { gap: 26px; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.nav a { color: var(--brote); }
.nav a:hover { color: var(--hueso); }
.firma img { height: 30px; }
.boton-chico { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.punto-vivo { animation-name: latido-cobre; }
@keyframes latido-cobre { 0% { box-shadow: 0 0 0 0 rgba(232, 116, 59, .6); } 70% { box-shadow: 0 0 0 7px rgba(232, 116, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 116, 59, 0); } }
.chip { font-family: var(--mono); letter-spacing: .06em; }
.tarjeta:hover { border-color: var(--cobre); }
.tarjeta h3 { font-weight: 600; }
.equipo h3 a { color: inherit; text-decoration: none; }
.equipo h3 a:hover { color: var(--cobre); }
.mercados a { color: inherit; text-decoration: none; }
.mercados li:has(a):hover { border-color: var(--cobre); }
/* Landings del equipo */
.perfil-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 18px; }
.monograma { position: relative; aspect-ratio: 1; border: 1px solid var(--petroleo); display: grid; place-items: center; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.monograma span { font: 400 clamp(56px, 9vw, 120px) var(--display); color: var(--hueso); letter-spacing: .06em; position: relative; z-index: 1; }
.monograma .orbita { position: absolute; inset: 8%; width: 84%; height: 84%; fill: none; stroke: var(--cobre); stroke-width: 2; }
.monograma .sat { fill: var(--cobre); stroke: none; }
@media (prefers-reduced-motion: no-preference) { .monograma .orbita { animation: girar 40s linear infinite; transform-origin: 50% 50%; } }
@keyframes girar { to { transform: rotate(360deg); } }
.servicios { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@media (max-width: 760px) { .perfil-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .monograma { max-width: 260px; } }

/* ---------- Portada: imagen de fondo + diagnóstico a la derecha ---------- */
.portada-banda { position: relative; overflow: hidden; isolation: isolate; }
.portada-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.portada-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; opacity: .9; }
.portada-fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--negro) 0%, rgba(14, 17, 22, .86) 34%, rgba(14, 17, 22, .3) 70%, rgba(14, 17, 22, .55) 100%), linear-gradient(0deg, var(--negro) 0%, transparent 35%); }
.portada-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.portada-texto { min-width: 0; }
@media (max-width: 960px) { .portada-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .portada-fondo img { opacity: .5; } }

.diagnostico { position: relative; background: rgba(20, 24, 31, .92); border: 1px solid var(--petroleo); padding: 22px; backdrop-filter: blur(8px); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.diagnostico::before { content: ''; position: absolute; top: 0; left: 0; width: 64px; height: 2px; background: var(--cobre); }
.diag-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.diag-cuenta { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--brote); }
.diag-barra { height: 2px; background: var(--petroleo); margin: 14px 0 20px; overflow: hidden; }
.diag-barra span { display: block; height: 100%; background: var(--cobre); transform-origin: left; transform: scaleX(0); transition: transform .3s ease; }
.diag-paso { border: 0; margin: 0; padding: 0; min-width: 0; }
.diag-paso + .diag-paso { margin-top: 22px; }
.diagnostico.activo .diag-paso + .diag-paso { margin-top: 0; }
.diag-paso legend { font-family: var(--display); font-size: clamp(17px, 2vw, 21px); line-height: 1.3; letter-spacing: .02em; margin-bottom: 16px; padding: 0; }
.diag-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.diag-opciones label { position: relative; cursor: pointer; min-width: 0; }
.diag-opciones input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.diag-opciones span { display: flex; align-items: center; min-height: 52px; padding: 12px 14px; border: 1px solid var(--petroleo); background: var(--negro); color: var(--hueso); font-size: 15px; line-height: 1.3; transition: border-color .15s, background .15s; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.diag-opciones label:hover span { border-color: var(--brote); background: var(--negro-3); }
.diag-opciones input:focus-visible + span { outline: 2px solid var(--brote); outline-offset: 2px; }
.diag-opciones input:checked + span { border-color: var(--cobre); background: rgba(232, 116, 59, .12); }
.diag-fin { display: none; }
.diagnostico.activo .diag-fin:not([hidden]) { display: block; }
.diag-listo { font-size: 17px; margin: 0 0 18px; }
.diag-fin .boton { width: 100%; justify-content: center; }
.diag-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--petroleo); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hueso-62); }
.diag-pie span { margin-left: auto; }
.diag-atras { background: none; border: 0; padding: 0; color: var(--brote); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.diag-atras:hover { color: var(--hueso); }
@media (max-width: 420px) { .diag-opciones { grid-template-columns: minmax(0, 1fr); } .diag-opciones span { min-height: 46px; } }

/* ---------- Cómo trabajamos: imagen de arquitectura ---------- */
.como-arte { margin: 8px 0 28px; border: 1px solid var(--petroleo); background: var(--negro-2); overflow: hidden; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.como-arte img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; max-height: 520px; }
.como-arte figcaption { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 12px 16px; border-top: 1px solid var(--petroleo); font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brote); }
.como-arte figcaption b { color: var(--cobre); font-weight: 500; }

/* ---------- Mapa: recuadro de España ---------- */
.mapa .recuadro rect { fill: none; stroke: var(--petroleo); stroke-width: 1.5; stroke-dasharray: 4 4; }
.mapa .recuadro text { font: 500 13px var(--mono); letter-spacing: .14em; fill: var(--brote); }

/* ---------- Pie ---------- */
.pie { padding: 0 0 0; border-top: 1px solid var(--petroleo); color: var(--hueso-62); font-size: 14px; overflow: hidden; }
.pie-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; margin: 56px 0 48px; padding: 32px; border: 1px solid var(--petroleo); background-color: var(--negro-2); }
.pie-cta > div { max-width: 60ch; }
.pie-cta .titular { font-size: clamp(22px, 3.2vw, 34px); margin: 10px 0 10px; color: var(--hueso); }
.pie-cta .cuerpo { margin: 0; }
.pie-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 40px; }
.pie-marca p { margin: 14px 0 0; max-width: 36ch; }
.pie-sedes { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brote); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.pie-sedes b { color: var(--cobre); font-weight: 500; }
.pie-marca .redes { margin-top: 20px; gap: 10px; }
.redes a { display: inline-flex; align-items: center; justify-content: center; }
.pie .redes a { width: 40px; height: 40px; border: 1px solid var(--petroleo); color: var(--hueso-62); transition: border-color .15s, color .15s; }
.pie .redes a:hover { border-color: var(--cobre); color: var(--cobre); }
.redes svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.redes svg .lleno { fill: currentColor; stroke: none; }
.pie-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pie-col h2 { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brote); margin: 0 0 6px; }
.pie-col a { color: var(--hueso-62); text-decoration: none; }
.pie-col a:hover { color: var(--hueso); }
.pie-col p { margin: 0; }
.pie-ley { display: flex; gap: 14px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--petroleo); margin: 0; color: var(--hueso); }
.pie-ley span { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cobre); white-space: nowrap; }
.pie-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 18px 0; border-top: 1px solid var(--petroleo); font-size: 13px; }
.pie-base a { color: var(--hueso-62); text-decoration: none; }
.pie-base a:hover { color: var(--cobre); }
.pie-gigante { font-family: var(--display); font-size: clamp(64px, 17vw, 220px); line-height: .8; letter-spacing: .06em; color: transparent; -webkit-text-stroke: 1px var(--petroleo); text-align: center; margin: 12px 0 -0.12em; user-select: none; white-space: nowrap; }
@media (max-width: 900px) { .pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie-marca { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pie-grid { grid-template-columns: minmax(0, 1fr); } .pie-cta { padding: 22px; } .pie-cta .boton { width: 100%; justify-content: center; } }

/* ---------- Blog: tarjetas ---------- */
.blog-cabeza { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.blog-cabeza h2 { margin-bottom: 0; }
.post-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.post-tarjeta { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--hueso); border: 1px solid var(--petroleo); background: var(--negro-2); transition: border-color .15s, transform .15s; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.post-tarjeta:hover { border-color: var(--brote); transform: translateY(-2px); }
.post-arte { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--petroleo); }
.post-texto { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.post-texto h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.post-texto p { margin: 0; color: var(--hueso-62); font-size: 15px; }
.post-leer { margin-top: auto; padding-top: 6px; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cobre); }
.post-destacado { margin-bottom: 18px; }
.post-destacado .post-tarjeta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.post-destacado .post-arte { height: 100%; object-fit: cover; border-bottom: 0; border-right: 1px solid var(--petroleo); }
.post-destacado .post-texto { justify-content: center; padding: 28px 32px; }
.post-destacado h3 { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.6vw, 28px); letter-spacing: .02em; }
@media (max-width: 760px) { .post-destacado .post-tarjeta { display: flex; } .post-destacado .post-arte { border-right: 0; border-bottom: 1px solid var(--petroleo); } .post-destacado .post-texto { padding: 18px 20px 20px; } }
@media (max-width: 360px) { .post-rejilla { grid-template-columns: minmax(0, 1fr); } }
.blog-portada { padding-bottom: 40px; }
.blog-portada .titular { max-width: 22ch; }

/* ---------- Blog: artículo ---------- */
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20; pointer-events: none; }
.progreso span { display: block; height: 100%; background: var(--cobre); transform-origin: left; transform: scaleX(0); }
.articulo { padding-top: 40px; padding-bottom: 24px; }
.articulo-cabeza { max-width: 820px; }
.articulo-cabeza .titular { font-size: clamp(26px, 4.4vw, 48px); margin: 16px 0 18px; }
.articulo-cabeza .bajada { font-size: clamp(17px, 2vw, 20px); margin: 0; }
.articulo-meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brote); }
.articulo-meta b { color: var(--cobre); font-weight: 500; }
.articulo-arte { margin: 32px 0; border: 1px solid var(--petroleo); overflow: hidden; }
.articulo-arte .post-arte { border: 0; max-height: 420px; object-fit: cover; }
.prosa { max-width: 720px; font-size: 18px; line-height: 1.7; }
.prosa p { margin: 0 0 1.1em; color: rgba(237, 234, 227, .86); }
.prosa h2 { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 2.4vw, 24px); letter-spacing: .02em; line-height: 1.3; margin: 2em 0 .7em; }
.prosa strong { color: var(--hueso); }
.prosa ul, .prosa ol { margin: 0 0 1.3em; padding-left: 0; list-style: none; counter-reset: li; }
.prosa li { position: relative; padding-left: 28px; margin-bottom: .55em; color: rgba(237, 234, 227, .86); }
.prosa ul li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; background: var(--cobre); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.prosa ol li { counter-increment: li; }
.prosa ol li::before { content: '0' counter(li); position: absolute; left: 0; top: .25em; font: 500 12px var(--mono); color: var(--cobre); }
.prosa blockquote { margin: 1.8em 0; padding: 18px 22px; border-left: 2px solid var(--cobre); background: var(--negro-2); font-size: 19px; color: var(--hueso); }
.articulo-cta { max-width: 720px; margin: 48px 0 0; padding: 28px; border: 1px solid var(--petroleo); background: var(--negro-2); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.articulo-cta .titular { font-size: clamp(20px, 2.8vw, 28px); margin: 10px 0; }
.articulo-cta .cuerpo { margin: 0 0 20px; color: var(--hueso-62); }
@media (max-width: 480px) { .prosa { font-size: 17px; } .articulo-cta { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .diag-barra span, .post-tarjeta { transition: none; } .post-tarjeta:hover { transform: none; } }

/* ---------- Vida: filtros por categoría, animaciones y cajón de radiografía (js/vida.js) ---------- */
[hidden] { display: none !important; }
.filtro small { font-family: var(--mono); font-size: 11px; opacity: .6; margin-left: 4px; }
.filtro { transition: background .2s, color .2s, border-color .2s; }
.filtro:hover { border-color: var(--cobre); color: var(--hueso); }
.filtro[aria-pressed="true"] { background: var(--cobre); border-color: var(--cobre); color: #0E1116; }
.filtro[aria-pressed="true"] small { opacity: .8; }
.tarjeta.entra { animation: entra .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }

@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--rv, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--rv, 0ms); }
  .rv.rv-on { opacity: 1; transform: none; }
  .tarjeta.rv.rv-on, .paso.rv.rv-on { transition: opacity .7s var(--rv, 0ms), transform .25s, border-color .25s; }

  /* Tarjetas: zoom del arte y flecha que avanza */
  .tarjeta-arte img, .tarjeta-arte svg { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .tarjeta:hover .tarjeta-arte img, .tarjeta:hover .tarjeta-arte svg { transform: scale(1.05); }
  .tarjeta-pie span[aria-hidden], .post-leer, .boton { transition: transform .25s, background .2s, border-color .2s, color .2s; }
  .tarjeta:hover .tarjeta-pie span[aria-hidden] { transform: translateX(6px); color: var(--cobre); }

  /* Botón principal con brillo que lo cruza */
  .boton-principal { position: relative; overflow: hidden; isolation: isolate; }
  .boton-principal::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); animation: brillo 4.5s ease-in-out 1.5s infinite; }
  @keyframes brillo { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

  /* Pasos: línea de proceso que se llena y cada paso se enciende en secuencia */
  .pasos { position: relative; }
  .pasos::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 2px; background: var(--cobre); transform: scaleX(0); transform-origin: left; transition: transform 2.4s cubic-bezier(.5, 0, .2, 1) .2s; }
  .pasos.en-marcha::before { transform: scaleX(1); }
  .pasos.en-marcha .paso { animation: encender 1s ease both; }
  .pasos.en-marcha .paso:nth-child(2) { animation-delay: .6s; } .pasos.en-marcha .paso:nth-child(3) { animation-delay: 1.2s; } .pasos.en-marcha .paso:nth-child(4) { animation-delay: 1.8s; }
  @keyframes encender { 0% { border-color: var(--petroleo); } 40% { border-color: var(--cobre); box-shadow: inset 0 0 0 1px var(--cobre); } 100% { border-color: var(--petroleo); } }
  .paso { transition: transform .25s, border-color .25s; }
  .paso:hover { transform: translateY(-4px); border-color: var(--cobre); }

  /* Leyes: el número late al pasar */
  .leyes div { transition: background .25s; }
  .leyes div:hover { background: #1A1D23; }
  .leyes div:hover .n { text-shadow: 0 0 18px rgba(232, 116, 59, .6); }

  /* Equipo: la inicial gira un poco al pasar */
  .equipo article { transition: transform .25s, border-color .25s; }
  .equipo article:hover { transform: translateY(-4px); }
  .equipo .ini { transition: transform .5s, color .25s; display: inline-block; }
  .equipo article:hover .ini { transform: rotate(-8deg) scale(1.08); color: var(--cobre); }

  /* Mapa: los pines aparecen de a uno */
  .mapa.rv-on .pin { animation: pin .6s cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: center; }
  .mapa.rv-on .pin:nth-of-type(2) { animation-delay: .1s; } .mapa.rv-on .pin:nth-of-type(3) { animation-delay: .2s; } .mapa.rv-on .pin:nth-of-type(4) { animation-delay: .3s; }
  .mapa.rv-on .pin:nth-of-type(5) { animation-delay: .4s; } .mapa.rv-on .pin:nth-of-type(6) { animation-delay: .5s; } .mapa.rv-on .pin:nth-of-type(7) { animation-delay: .6s; }
  @keyframes pin { from { opacity: 0; transform: scale(0); } }

  /* Hero: barrido de escáner sobre la imagen y el diagnóstico respirando */
  .portada-banda::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(232, 116, 59, .07), transparent); animation: escaner 7s linear infinite; }
  @keyframes escaner { from { transform: translateY(-120px); } to { transform: translateY(110vh); } }
  .portada-fondo img { will-change: transform; transform: scale(1.06); }
  .diagnostico { animation: aparece-der .9s cubic-bezier(.2, .7, .2, 1) .2s both; }
  @keyframes aparece-der { from { opacity: 0; transform: translateX(30px); } }
  .portada-texto > * { animation: sube .8s cubic-bezier(.2, .7, .2, 1) both; }
  .portada-texto > :nth-child(2) { animation-delay: .08s; } .portada-texto > :nth-child(3) { animation-delay: .16s; } .portada-texto > :nth-child(4) { animation-delay: .24s; } .portada-texto > :nth-child(5) { animation-delay: .32s; }
  @keyframes sube { from { opacity: 0; transform: translateY(18px); } }
  .diag-paso:not([hidden]), .diag-fin:not([hidden]) { animation: entra .35s ease both; }

  /* Preguntas: se abren con suavidad */
  .preguntas details[open] p { animation: sube .35s ease both; }

  /* Marcas: un leve flotar al pasar */
  .marcas li { transition: transform .3s, opacity .3s; }
  .marcas li:hover { transform: translateY(-3px); }
}

/* Cajón de radiografía (panel a la derecha) */
html.cajon-abierto { overflow: hidden; }
.cajon { position: fixed; inset: 0; z-index: 1000; }
.cajon-velo { position: absolute; inset: 0; background: rgba(8, 10, 13, .72); opacity: 0; transition: opacity .3s; }
.cajon-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: #14181F; border-left: 1px solid var(--cobre); color: var(--hueso);
  display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; overflow-y: auto; transform: translateX(100%); transition: transform .34s cubic-bezier(.2, .7, .2, 1);
  background-image: linear-gradient(#1F242C 1px, transparent 1px), linear-gradient(90deg, #1F242C 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; outline: none; }
.cajon.abierto .cajon-velo { opacity: 1; }
.cajon.abierto .cajon-panel { transform: none; }
.cajon-cabeza { display: flex; align-items: center; gap: 12px; }
.cajon-cuenta { font-family: var(--mono); font-size: 12px; color: var(--cobre); margin-left: auto; letter-spacing: .1em; }
.cajon-x { font: 400 26px/1 var(--mono); background: none; border: 1px solid #2A2F38; color: var(--hueso); width: 38px; height: 38px; cursor: pointer; }
.cajon-x:hover { border-color: var(--cobre); color: var(--cobre); }
.cajon .diag-barra { height: 2px; background: #2A2F38; }
.cajon .diag-barra span { display: block; height: 100%; background: var(--cobre); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.cajon-intro { margin: 0; color: #A7ADB5; font-size: 15px; }
.cajon-cuerpo h3 { font: 400 clamp(18px, 2.4vw, 22px)/1.35 var(--display); margin: 6px 0 18px; letter-spacing: .02em; }
.cajon-cuerpo.cambia { animation: entra .35s ease both; }
.cajon-opciones { display: grid; gap: 8px; }
.cajon-op { font: inherit; font-size: 15px; text-align: left; padding: 14px 16px; background: #0E1116; color: var(--hueso); border: 1px solid #2A2F38; cursor: pointer; transition: border-color .2s, transform .2s, background .2s;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.cajon-op:hover, .cajon-op:focus-visible { border-color: var(--cobre); transform: translateX(-4px); }
.cajon-op[aria-pressed="true"] { background: var(--cobre); color: #0E1116; border-color: var(--cobre); }
.cajon-select { display: grid; gap: 6px; margin-bottom: 18px; }
.cajon-select span { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #A7ADB5; }
.cajon-select select { font: inherit; font-size: 16px; padding: 14px 12px; background: #0E1116; color: var(--hueso); border: 1px solid #2A2F38; cursor: pointer; }
.cajon-select select:focus { border-color: var(--cobre); outline: none; }
.cajon-pie { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; color: #A7ADB5; }
.cajon .diag-atras { font: inherit; background: none; border: 0; color: var(--hueso); cursor: pointer; padding: 6px 0; }
.cajon .diag-atras:hover { color: var(--cobre); }
.cajon-sello { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border: 1px solid currentColor; }
.cajon-fin.si .cajon-sello { color: var(--cobre); }
.cajon-fin.no .cajon-sello { color: #A7ADB5; }
.cajon-fin p { color: #A7ADB5; }
.cajon-links { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.cajon-links a { display: block; padding: 12px 14px; border: 1px solid #2A2F38; color: var(--hueso); text-decoration: none; }
.cajon-links a:hover { border-color: var(--cobre); color: var(--cobre); }
@media (prefers-reduced-motion: reduce) { .cajon-panel, .cajon-velo { transition: none; } }
@media (max-width: 560px) { .cajon-panel { padding: 18px 16px; border-left: 0; } }
.chip-cat { color: var(--cobre); border-color: var(--cobre); }

/* ---------- Portada más limpia (2026-10-09): el hero solo lleva titular, bajada, botones y radiografía ---------- */
.portada { padding-top: 64px; padding-bottom: 72px; min-height: min(780px, calc(100svh - 64px)); display: flex; align-items: center; }
.portada-grid { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 64px; }
.portada .titular { font-size: clamp(32px, 4.3vw, 60px); max-width: 15ch; margin: 16px 0 20px; line-height: 1.12; }
.portada .bajada { font-size: clamp(16px, 1.5vw, 18px); max-width: 44ch; color: var(--hueso-62); }
.portada .acciones { margin-top: 28px; }
.portada-fondo img { opacity: .5; }
.portada-fondo::after { background: linear-gradient(90deg, var(--negro) 0%, rgba(14, 17, 22, .94) 45%, rgba(14, 17, 22, .6) 75%, rgba(14, 17, 22, .75) 100%), linear-gradient(0deg, var(--negro) 0%, transparent 30%); }
.diagnostico { box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.franja { padding-top: 40px; padding-bottom: 24px; }
.franja .nicho { margin: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.franja .nicho li { border: 0; border-top: 1px solid var(--petroleo); border-radius: 0; background: none; padding: 14px 0 0; clip-path: none; }
.franja .nicho b { color: var(--hueso); font-size: 15px; margin-bottom: 4px; }
.franja .nicho span { font-size: 13px; }
.franja .cifras { margin-top: 40px; }
@media (max-height: 820px) and (min-width: 961px) { .portada { padding-top: 40px; padding-bottom: 48px; } .portada .titular { font-size: clamp(32px, 3.8vw, 52px); } }
@media (max-width: 960px) { .portada { min-height: 0; display: block; padding-bottom: 48px; } .portada-grid { grid-template-columns: minmax(0, 1fr); } .franja .nicho { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .franja .nicho { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.portada-fondo img { opacity: .9; object-position: right bottom; }
.portada-fondo::after { background: linear-gradient(90deg, var(--negro) 0%, rgba(14, 17, 22, .6) 40%, transparent 65%), linear-gradient(0deg, var(--negro) 0%, transparent 25%); }
.portada .titular { max-width: 17ch; }
.portada-grid.solo { grid-template-columns: minmax(0, 1fr); }
.cajon-intro p { margin: 0 0 12px; }
.cajon-ruta { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; counter-reset: r; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6B717A; }
.cajon-ruta li { counter-increment: r; flex: 1; border-top: 2px solid #2A2F38; padding-top: 8px; }
.cajon-ruta li::before { content: '0' counter(r) ' '; }
.cajon-ruta li.on { color: var(--cobre); border-color: var(--cobre); }

/* Formularios más calmos (cajón y /agenda/, 2026-10-09): sin rejilla ni bisel, letra legible, más aire entre opciones */
.cajon-panel { background-image: none; border-left-color: #2A2F38; gap: 20px; padding: 26px 28px; }
.cajon-cuerpo h3 { font: 600 clamp(19px, 2.4vw, 22px)/1.35 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: 0; margin: 4px 0 20px; }
.cajon-opciones { gap: 12px; }
.cajon-op { clip-path: none; border-radius: 10px; padding: 16px 18px; background: #181C23; }
.cajon-op:hover, .cajon-op:focus-visible { transform: none; background: #1D222A; }
.cajon-op[aria-pressed="true"] { background: #2A1D15; color: var(--hueso); }
.cajon-select span { font-family: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; }
.cajon-select select, .cajon-links a, .cajon-x { border-radius: 10px; }
.cajon-cuenta { font-family: inherit; letter-spacing: 0; color: #A7ADB5; }
.cajon-sello { border-radius: 999px; font-family: inherit; letter-spacing: .04em; text-transform: none; font-size: 13px; }
.cajon .boton, .agenda-cuerpo .boton { clip-path: none; border-radius: 10px; }
.agenda-paso h2 { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: 0; margin-bottom: 14px; }
.pais-linea { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; font-size: 15px; color: var(--hueso-62); }
.pais-linea select { font: inherit; font-size: 15px; color: var(--hueso); background: var(--negro-2); border: 1px solid var(--petroleo); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.pais-linea select:focus { border-color: var(--cobre); outline: none; }
.dias { gap: 12px; padding-bottom: 12px; margin-bottom: 24px; }
.dia { min-width: 78px; padding: 14px 12px; gap: 4px; border-radius: 12px; }
.dia b { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: 0; }
.horas { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.hora { padding: 16px 10px; border-radius: 12px; }
.dia[aria-pressed="true"] { background: var(--cobre); border-color: var(--cobre); color: #0E1116; }
.campos { gap: 18px 16px; }
.campos input, .campos select, .campos textarea { border-radius: 10px; padding: 14px; }
@media (max-width: 560px) { .cajon-panel { padding: 20px 18px; } .horas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Artículo del blog con estructura fija (2026-10-09): en 30 segundos, índice lateral, CTA a mitad, proyectos y preguntas */
.en-corto { max-width: 820px; margin: 28px 0 0; padding: 22px 24px; border: 1px solid var(--petroleo); border-left: 3px solid var(--cobre); background: var(--negro-2); border-radius: 0 10px 10px 0; }
.en-corto ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 17px; line-height: 1.55; color: var(--hueso); }
.en-corto li::marker { color: var(--cobre); }
.para-quien { margin: 14px 0 0; font-size: 15px; color: var(--hueso-62); }
.para-quien b { color: var(--hueso); font-weight: 600; }
.articulo-grid { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 56px; margin-top: 40px; align-items: start; }
.indice { position: sticky; top: 96px; font-size: 14px; }
.indice ol { list-style: none; margin: 12px 0 0; padding: 0; border-left: 1px solid var(--petroleo); display: grid; gap: 2px; }
.indice a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--hueso-62); text-decoration: none; line-height: 1.35; }
.indice a:hover { color: var(--hueso); }
.indice a.on { color: var(--hueso); border-left-color: var(--cobre); }
.prosa h2 { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: 0; font-size: clamp(21px, 2.6vw, 27px); scroll-margin-top: 90px; }
.cta-medio { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 2.2em 0; padding: 20px 22px; border: 1px solid var(--cobre); border-radius: 10px; background: rgba(232, 116, 59, .06); }
.cta-medio p { margin: 0; flex: 1 1 280px; font-size: 16px; line-height: 1.5; }
.cta-medio .boton { clip-path: none; border-radius: 10px; }
.articulo-piezas { margin: 48px 0 0; }
.piezas-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.piezas-mini a { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--petroleo); border-radius: 10px; background: var(--negro-2); color: var(--hueso); text-decoration: none; transition: border-color .2s; }
.piezas-mini a:hover { border-color: var(--cobre); }
.piezas-mini b { font-size: 16px; line-height: 1.3; }
.piezas-mini span { font-size: 14px; line-height: 1.45; color: var(--hueso-62); }
.piezas-mini small { margin-top: auto; font-size: 13px; color: var(--cobre); }
.articulo-faq { margin: 48px 0 0; }
.articulo-faq h2 { font: 600 clamp(21px, 2.6vw, 27px)/1.3 'IBM Plex Sans', system-ui, sans-serif; margin: 0 0 14px; scroll-margin-top: 90px; }
.articulo-faq details { border-top: 1px solid var(--petroleo); padding: 4px 0; }
.articulo-faq details:last-child { border-bottom: 1px solid var(--petroleo); }
.articulo-faq summary { cursor: pointer; padding: 14px 28px 14px 0; font-size: 17px; font-weight: 600; list-style: none; position: relative; }
.articulo-faq summary::-webkit-details-marker { display: none; }
.articulo-faq summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font-size: 22px; color: var(--cobre); }
.articulo-faq details[open] summary::after { content: '–'; }
.articulo-faq details p { margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: rgba(237, 234, 227, .86); }
.articulo-cta { clip-path: none; border-radius: 12px; }
.articulo-cta .boton { clip-path: none; border-radius: 10px; }
@media (max-width: 1000px) {
  .articulo-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .indice { position: static; padding: 16px 18px; border: 1px solid var(--petroleo); border-radius: 10px; }
}
@media (max-width: 480px) { .en-corto { padding: 18px; } .en-corto ul { font-size: 16px; } }