/* ============================================================ LogiRed — Páginas de nodo (material: presentaciones + galería) Usado por nodo-san-antonio.html y nodo-los-andes.html. Archivo nuevo y versionado: al no existir antes, ningún visitante lo tiene cacheado, así que no necesita ir inline como el resto de los estilos añadidos sobre logired.v5.css. Toda la hoja depende de cuatro variables locales. Los Andes es el mismo markup con .nodopage--land en el : solo cambian esas cuatro variables, ninguna regla se duplica. ============================================================ */ .nodopage { --nodo-deep: var(--navy); /* titulares y botón primario */ --nodo-accent: var(--blue); /* número de bloque, acentos */ --nodo-soft: var(--pale-blue-soft); /* fondo de la banda de la tarjeta */ --nodo-line: #cfe2f6; /* bordes */ } .nodopage--land { --nodo-deep: var(--green-dark); --nodo-accent: var(--green); --nodo-soft: var(--green-soft); --nodo-line: #cbe3d5; } /* ---------- Hero ---------- */ .nodohero__back { display: inline-flex; align-items: center; gap: 6px; color: var(--nodo-accent); font-weight: 600; font-size: 15px; margin-bottom: var(--space-2); } .nodohero__back:hover { color: var(--nodo-deep); } .nodohero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-3); color: #43566a; font-size: 15.5px; } .nodohero__meta span { display: inline-flex; align-items: center; gap: 8px; } .nodohero__meta svg { flex: none; color: var(--nodo-accent); } /* ---------- Sección de presentaciones ---------- */ .decks { padding: var(--space-8) 0 var(--space-12); } /* Un solo separador entre bloques: el margen superior lo pone el bloque siguiente, así el primero queda pegado al encabezado de la sección sin un hueco extra. */ .deck-block + .deck-block { margin-top: var(--space-8); } .deck-block__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 2px solid var(--nodo-line); margin-bottom: var(--space-4); } /* El número manda sobre el nombre del bloque: dos de las seis presentaciones se titulan igual que su bloque, y con el nombre en grande la tarjeta parecía un eco del encabezado. Con el número dominante, el nombre queda como contexto. */ .deck-block__num { font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); text-transform: uppercase; letter-spacing: .02em; color: var(--nodo-deep); } .deck-block__time { font-weight: 600; font-size: 14px; letter-spacing: .06em; color: var(--white); background: var(--nodo-accent); padding: 3px 10px; border-radius: 999px; } .deck-block__name { flex: 1 1 320px; font-weight: 500; font-size: 16.5px; line-height: 1.35; color: #43566a; } /* auto-fill (no auto-fit): los bloques de una sola presentación mantienen el mismo ancho de tarjeta que el bloque de tres, en vez de estirarse a todo el contenedor. */ .deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); } /* ---------- Tarjeta ---------- */ .deck-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--nodo-line); border-radius: var(--radius); overflow: hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease); } .deck-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .deck-card__band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 14px 18px; background: linear-gradient(105deg, var(--nodo-deep), var(--nodo-accent)); color: var(--white); } .deck-card__badge { font-weight: 800; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; } .deck-card__band svg { flex: none; opacity: .85; } .deck-card__body { padding: var(--space-3) 18px var(--space-2); flex: 1 1 auto; } .deck-card__title { color: var(--nodo-deep); font-weight: 800; font-size: 18.5px; line-height: 1.25; margin-bottom: 10px; } .deck-card__author { font-weight: 600; font-size: 16px; color: var(--ink); } .deck-card__org { font-size: 14px; line-height: 1.4; color: #5b6b7d; margin-top: 2px; } .deck-card__mail { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; color: var(--nodo-accent); word-break: break-all; } .deck-card__mail:hover { color: var(--nodo-deep); text-decoration: underline; } .deck-card__mail svg { flex: none; } .deck-card__foot { padding: 0 18px 18px; } .deck-card__meta { font-size: 13px; color: var(--gray); padding-top: var(--space-2); border-top: 1px solid var(--cream); margin-bottom: var(--space-2); } .deck-card__actions { display: flex; align-items: center; gap: 10px; } .deck-card__view { flex: 1 1 auto; background: var(--nodo-deep); color: var(--white); } .deck-card__view:hover { background: var(--nodo-accent); } /* El botón de descarga es un icono de 44x44: el mínimo táctil accesible sin que compita en peso visual con "Ver presentación". */ .deck-card__dl { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; border: 2px solid var(--nodo-line); color: var(--nodo-deep); transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .deck-card__dl:hover { background: var(--nodo-soft); border-color: var(--nodo-accent); } /* ---------- Estado vacío (Los Andes antes de su jornada) ---------- */ .deck-empty { border: 2px dashed var(--nodo-line); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-4); text-align: center; background: var(--white); } .deck-empty__title { color: var(--nodo-deep); font-weight: 800; font-size: 22px; margin-bottom: 8px; } .deck-empty__text { color: #5b6b7d; max-width: 52ch; margin: 0 auto; } /* ---------- Galería ---------- */ .gallery__panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); background: var(--white); border: 1px solid var(--nodo-line); border-radius: var(--radius-lg); padding: var(--space-4); margin-top: var(--space-4); } /* Pila de tres rectángulos: sugiere un álbum sin recurrir a un icono genérico de cámara, y se dibuja con CSS puro para no sumar un asset por una decoración. */ .gallery__stack { position: relative; flex: none; width: 168px; height: 116px; } .gallery__stack i { position: absolute; inset: 0; border-radius: 10px; background: var(--nodo-soft); border: 1px solid var(--nodo-line); } .gallery__stack i:nth-child(1) { transform: rotate(-7deg) translate(-6px, 4px); } .gallery__stack i:nth-child(2) { transform: rotate(4deg) translate(6px, -2px); } .gallery__stack i:nth-child(3) { background: linear-gradient(140deg, var(--nodo-deep), var(--nodo-accent)); border-color: transparent; display: grid; place-items: center; color: rgba(255,255,255,.9); } .gallery__body { flex: 1 1 320px; } .gallery__title { color: var(--nodo-deep); font-weight: 800; font-size: 22px; margin-bottom: 6px; } .gallery__text { color: #5b6b7d; max-width: 56ch; } .gallery__soon { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-2); background: var(--cream); color: var(--gray); font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: 999px; } .gallery__soon span { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); } /* ---------- Salto al otro nodo ---------- */ .nodoswitch { padding-bottom: var(--space-12); } .nodoswitch__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; background: var(--white); border: 1px solid var(--nodo-line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); transition: box-shadow .2s var(--ease), transform .2s var(--ease); } .nodoswitch__link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .nodoswitch__label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); font-weight: 600; } .nodoswitch__name { font-weight: 800; font-size: 20px; color: var(--navy); } .nodoswitch__go { font-weight: 600; color: var(--blue); } @media (max-width: 660px) { .deck-block__head { gap: 10px; } .gallery__panel { padding: var(--space-3); } .gallery__stack { margin-inline: auto; } } /* ---------- Visor de PDF ---------- */ .pdfmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; } .pdfmodal[hidden] { display: none; } .pdfmodal__backdrop { position: absolute; inset: 0; background: rgba(4,44,83,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; } .pdfmodal__card { position: relative; width: min(1080px, 100%); height: min(880px, calc(100dvh - 40px)); display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 32px 80px rgba(4,44,83,.35); overflow: hidden; opacity: 0; transform: translateY(20px) scale(.98); transition: opacity .28s ease, transform .28s ease; } .pdfmodal.is-open .pdfmodal__backdrop { opacity: 1; } .pdfmodal.is-open .pdfmodal__card { opacity: 1; transform: translateY(0) scale(1); } .pdfmodal__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: 18px 20px; border-bottom: 1px solid var(--cream); } .pdfmodal__heading { flex: 1 1 auto; min-width: 0; } .pdfmodal__kicker { color: var(--orange-dark); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; } .pdfmodal__title { color: var(--navy); font-weight: 800; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.25; margin-top: 2px; } .pdfmodal__author { color: #5b6b7d; font-size: 14px; margin-top: 2px; } .pdfmodal__tools { flex: none; display: flex; align-items: center; gap: 10px; } .pdfmodal__dl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--navy); color: var(--white); font-weight: 600; font-size: 15px; } .pdfmodal__dl:hover { background: var(--blue); } .pdfmodal__close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--cream); color: var(--navy); cursor: pointer; } .pdfmodal__close:hover { background: var(--orange-light); } .pdfmodal__frame { flex: 1 1 auto; background: #55606c; } .pdfmodal__frame iframe { width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 760px) { .pdfmodal__dl span { display: none; } .pdfmodal__dl { padding: 8px; width: 44px; justify-content: center; } } /* ---------- Bloque de una sola presentación ---------- Con el grid uniforme, un bloque de una tarjeta dejaba dos tercios del ancho en blanco bajo un encabezado que sí lo ocupaba entero, y se leía como un hueco. En escritorio esa tarjeta pasa a formato horizontal —banda / contenido / acciones— y aprovecha el ancho completo. Bajo 861px vuelve sola al formato vertical, que es el que funciona cuando no hay ancho que repartir. */ /* La columna única aplica en todos los anchos: en tablet el grid daba dos pistas y la tarjeta solitaria ocupaba la mitad, repitiendo el hueco que este bloque corrige. */ .deck-grid--solo { grid-template-columns: 1fr; } .deck-grid--solo .deck-card__title { max-width: 42ch; } /* La disposición en fila sí necesita ancho: bajo 861px la tarjeta vuelve a apilarse, pero ya a ancho completo. */ @media (min-width: 861px) { .deck-grid--solo .deck-card { flex-direction: row; align-items: stretch; } .deck-grid--solo .deck-card:hover { transform: translateY(-3px); } .deck-grid--solo .deck-card__band { flex: none; width: 152px; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 20px 18px; } .deck-grid--solo .deck-card__band svg { width: 34px; height: 34px; } .deck-grid--solo .deck-card__body { display: flex; flex-direction: column; justify-content: center; padding: var(--space-3) var(--space-4); } .deck-grid--solo .deck-card__title { font-size: 22px; max-width: 36ch; } .deck-grid--solo .deck-card__org { max-width: 62ch; } .deck-grid--solo .deck-card__foot { flex: none; width: 296px; display: flex; flex-direction: column; justify-content: center; padding: var(--space-3) var(--space-4); border-left: 1px solid var(--cream); } /* El separador ya lo pone el borde izquierdo de la columna: la línea superior de .deck-card__meta sobraría y cortaría la columna en dos por nada. */ .deck-grid--solo .deck-card__meta { border-top: 0; padding-top: 0; } } /* En la tarjeta ancha apilada (tablet) el botón heredaba flex:1 y se estiraba a ~620px, muy por encima de cualquier ancho de botón razonable. Con una base de 320px se queda en ese ancho en tablet y sigue ocupando la línea completa en móvil, donde el espacio disponible es menor que la base y el flex-shrink lo ajusta solo. */ @media (max-width: 860px) { .deck-grid--solo .deck-card__view { flex: 0 1 320px; } }