/* ============================================================ KV 4 — "EXPEDICIÓN" · tokens y base Territorio: la competencia técnica. No vende paisaje: vende saber leer el terreno. Datos en monoespaciada, todo con ficha técnica. Tipografía de marca: NUNITO (manual del cliente, lámina 4). Redondeada y amable, mucho más cerca del logo que la Archivo condensada que se usó en la primera versión. IBM Plex Mono se queda para los datos. Los valores de color son los del KV aprobado: no se "mejoran". ============================================================ */ :root{ --naranja:#FF3700; --tinta:#F2F3F5; --fondo:#0F1013; --panel:#17191E; --panel-2:#1E2128; --linea:rgba(242,243,245,.12); --linea-2:rgba(242,243,245,.07); --apagado:#8C9099; --apagado-2:#5E626B; --D:'Nunito',system-ui,sans-serif; --M:'IBM Plex Mono',Consolas,monospace; /* medidas propias del tema, no del KV */ --ancho:min(1240px,90vw); --admin-bar:0px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--fondo);color:var(--tinta);font-family:var(--D); font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} .wrap{width:var(--ancho);margin:0 auto} /* El KV no lo trae, pero una web real necesita foco visible y salto de menú. */ :focus-visible{outline:2px solid var(--naranja);outline-offset:3px} .saltar{position:absolute;left:-9999px;top:0;z-index:999;background:var(--naranja);color:#fff; padding:12px 18px} .saltar:focus{left:12px;top:12px} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); white-space:nowrap} /* La barra de administración es fija: sin esto tapa la cabecera absoluta. */ body.admin-bar{--admin-bar:32px} body.admin-bar .cabecera{top:var(--admin-bar)} /* revelado al hacer scroll (lo activa andes.js) */ .rv{opacity:0;transform:translateY(24px);transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1)} .rv.in{opacity:1;transform:none} /* etiqueta monoespaciada. Ya NO va en mayúsculas por defecto: Mateo pidió bajarle a la caja alta. Las etiquetas de ficha técnica que sí se quedan en mayúscula llevan `.et` (`.mono.et`), que es donde el mono en caja alta funciona como rótulo. */ .mono{font-family:var(--M);font-size:11.5px;font-weight:500;letter-spacing:.14em} .mono.et{text-transform:uppercase;letter-spacing:.16em} .kick{color:var(--naranja)} .apagado{color:var(--apagado)} /* titular de marca: Nunito, redondeada. Sin mayúscula forzada ni eje de ancho (Nunito no tiene eje `wdth`): la caja la decide el texto que escribe el cliente, no el CSS. */ .cond{font-family:var(--D);font-weight:800;letter-spacing:-.015em;line-height:1.02} /* ---------- secciones ---------- */ section{padding:104px 0;position:relative} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px; margin-bottom:52px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--linea)} h2{font-size:clamp(30px,4.2vw,54px);margin-top:16px} .sec-head p{color:var(--apagado);max-width:42ch;font-size:16px} /* * Rótulo naranja que va encima del titular de cada sección. * * El cliente lo pidió «unos 5 o 6 px más grande y más peso». Estaba en 12 px y * peso 600; ahora 17 px (14 en móvil) y peso 700. * * Al crecer había que soltarle el `letter-spacing`: con 0.16em un texto de 17 px * se abría demasiado y se salía del titular. A 0.08em sigue leyéndose como * etiqueta espaciada, pero ya no se desparrama. Se mantiene en monoespaciada y * en caja alta: esos dos rasgos son los que lo distinguen de un antetítulo. */ .num-sec{font-family:var(--M);font-size:clamp(14px,1.2vw,17px);font-weight:700; color:var(--naranja);letter-spacing:.08em;text-transform:uppercase} .vermas{font-family:var(--M);font-size:12px;font-weight:600;letter-spacing:.06em; color:var(--tinta);border-bottom:1px solid var(--naranja);padding-bottom:5px} .vermas:hover{color:var(--naranja)} /* ---------- botones ---------- Redondeados y con borde visible, como pidió el cliente (lo repitió cuatro veces en el audio). El primario mantiene el relleno naranja; el borde es del mismo naranja para que el contorno se lea sobre la foto. El secundario va transparente con línea, y el blanco (sobre el bloque naranja) con borde blanco. Sin mayúsculas: caja normal. */ .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px; font-family:var(--M);font-size:13px;font-weight:600;letter-spacing:.02em; border:1px solid transparent;border-radius:12px; transition:transform .5s cubic-bezier(.32,.72,0,1),background .5s cubic-bezier(.32,.72,0,1), border-color .5s cubic-bezier(.32,.72,0,1)} .btn.prim{background:var(--naranja);border-color:var(--naranja);color:#fff} .btn.prim:hover{background:#ff5122;border-color:#ff5122;transform:translateY(-2px)} .btn.sec{border:1px solid var(--linea);color:var(--tinta)} .btn.sec:hover{border-color:var(--tinta);transform:translateY(-2px)} .btn.blanco{background:#fff;border-color:#fff;color:#141518} .btn.blanco:hover{transform:translateY(-2px)} /* Íconos en línea dentro de un botón (SVG, nunca fuente de iconos). */ .btn__icono{width:18px;height:18px;flex:none;display:block} .btn__icono--wa{fill:#25D366} .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} /* ---------- nivel de dificultad ---------- El KV usa `.nivel .n1..n5`. El plugin (fuente de verdad de los datos) devuelve `.andes-nivel.andes-nivel--1..5`: se estilan igual, bloque a bloque, para que la pieza firma salga idéntica venga de donde venga. */ .nivel,.andes-nivel{display:inline-flex;gap:3px;vertical-align:middle} .nivel i,.andes-nivel i{width:9px;height:17px;background:rgba(242,243,245,.18);display:block} .n1 i:nth-child(-n+1),.n2 i:nth-child(-n+2),.n3 i:nth-child(-n+3), .n4 i:nth-child(-n+4),.n5 i:nth-child(-n+5), .andes-nivel--1 i:nth-child(-n+1),.andes-nivel--2 i:nth-child(-n+2), .andes-nivel--3 i:nth-child(-n+3),.andes-nivel--4 i:nth-child(-n+4), .andes-nivel--5 i:nth-child(-n+5){background:var(--naranja)} /* La palabra (Baja/Media/Alta) hereda la tipografía de su contenedor porque el KV la pinta con la fuente del que la envuelve. */ .andes-nivel__etiqueta{white-space:nowrap} .b-nivel{display:inline-flex;align-items:center;gap:12px} .spec .r .b-nivel{gap:10px} /* ---------- fondos con curvas de nivel ---------- */ .curvas{position:relative} .curvas::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='420'%3E%3Cg fill='none' stroke='%23F2F3F5' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M-20 340 Q120 292 260 326 T540 300'/%3E%3Cpath d='M-20 378 Q140 330 280 364 T540 338'/%3E%3Cpath d='M-20 416 Q160 368 300 402 T540 376'/%3E%3Cpath d='M-20 150 Q130 108 250 140 T540 116'/%3E%3Cpath d='M-20 190 Q150 148 270 180 T540 156'/%3E%3Cpath d='M-20 230 Q170 188 290 220 T540 196'/%3E%3C/g%3E%3C/svg%3E")} /* ---------- listas de datos ---------- `andes_lista_html()` del plugin devuelve