/* ============================================================================
EXPO GLOBALPORTS 2026 — sistema visual "Casco y contenedor", versión clara
Ronda 2 (14/9/2026, pedido del cliente en la reunión del 11/9): el campo pasa
a blanco y gris frío; el marino queda para el hero, las cabeceras interiores,
el cierre y el pie; el turquesa sigue siendo banda y acción. Tipo único:
Montserrat (300–900), la alternativa libre a la Gotham de las piezas del evento.
========================================================================== */
/* ---- Tokens -------------------------------------------------------------- */
:root {
/* Pintura */
--marino: #0B2A6B;
--marino-deep: #071B45;
--marino-tint: #1A3F8A; /* filete sobre marino */
--turquesa: #00B398;
--turquesa-ink: #007A67; /* turquesa para texto sobre blanco señal (4.87:1 medido) */
--turquesa-marca: #4BC199; /* el del logo del 36º Seminario; solo en su lockup del hero */
--blanco: #F5F8FB; /* gris frío: fondo del body y tramos alternos */
--blanco-puro: #FFFFFF;
--acero: #1F2933;
--acero-mid: #52606D; /* texto secundario sobre blanco señal (5.96:1 medido) */
--acero-tint: #E4E9EF; /* fondo de espera de fotos */
--linea: #DBE3EC; /* filete sobre claro */
--error: #B3261E; /* único color fuera de la paleta de casco; solo formularios */
--sobre-marino: #FFFFFF;
--sobre-marino-2: #BFD3EA; /* secundario sobre marino, teñido del casco */
/* Niveles de sponsoreo (brochure 2026): solo en la franja de tarjeta y tabla */
--nivel-main: #1F6FC5;
--nivel-gold: #D4A017;
--nivel-silver: #AEB6BF;
--nivel-bronze: #A86F45;
/* Tipos */
/* Montserrat es provisoria hasta resolver la licencia web de Gotham: se cambia
acá y en el de cada página, en ningún otro lugar. --f-mono ya no es
una monoespaciada: es la voz de datos, con numerales tabulares. */
--f-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
--f-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
--f-mono: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Escala */
--fs-display: clamp(2.1rem, 4.4vw, 4.2rem);
--fs-h2: clamp(1.7rem, 3vw, 2.7rem);
--fs-h3: clamp(1.1rem, 1.4vw, 1.3rem);
--fs-body: 1rem;
--fs-small: 0.9rem;
--fs-mono: 0.8125rem;
/* Medidas */
--maxw: 1280px;
--margin: clamp(20px, 4.5vw, 72px);
--band: 10px; /* grosor de la banda de flotación */
--section: clamp(72px, 9vw, 128px);
--measure: 66ch;
--radio: 6px; /* esquina amable: botones, campos, fotos */
/* Movimiento */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur: 320ms;
/* Capas */
--z-rail: 40;
--z-header: 100;
--z-backdrop: 200;
--z-drawer: 210;
--z-toast: 300;
color-scheme: light;
}
/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
margin: 0;
font-family: var(--f-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--acero);
background: var(--blanco);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
strong { font-weight: 700; }
/* Énfasis en texto corrido: peso más tinta de marino. El turquesa nunca enfatiza
texto: en este sistema el turquesa es acción, y un énfasis turquesa se leería
como un vínculo. */
p strong { color: var(--marino); }
.on-marino p strong { color: var(--blanco-puro); }
/* Superficies del navegador teñidas del casco */
::selection { background: var(--turquesa); color: var(--marino-deep); }
html { caret-color: var(--turquesa); accent-color: var(--turquesa); scrollbar-color: var(--marino) var(--acero-tint); }
/* Foco: turquesa tinta sobre claro (el turquesa pleno da 2,7:1 sobre blanco, bajo el
3:1 de WCAG 1.4.11); blanco en los campos oscuros. */
:focus-visible { outline: 3px solid var(--turquesa-ink); outline-offset: 3px; }
.on-marino :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .drawer :focus-visible, .footer :focus-visible { outline-color: var(--blanco-puro); }
.skip-link {
position: absolute; left: 16px; top: -80px; z-index: var(--z-toast);
background: var(--turquesa); color: var(--marino-deep);
font-family: var(--f-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.08em;
padding: 12px 16px;
transition: top 160ms var(--ease-out);
}
.skip-link:focus { top: 16px; }
/* ---- Tipografía ---------------------------------------------------------- */
.display, .h1, .h2, .h3 {
font-family: var(--f-display);
font-weight: 800;
text-transform: uppercase;
line-height: 1.04;
letter-spacing: -0.01em;
}
.display { font-size: var(--fs-display); }
.h2 { font-size: var(--fs-h2); text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.lede { font-size: 1.125rem; line-height: 1.55; max-width: var(--measure); }
.small { font-size: var(--fs-small); }
.muted { color: var(--acero-mid); }
.on-marino .muted { color: var(--sobre-marino-2); }
.measure { max-width: var(--measure); }
.mono {
font-family: var(--f-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
.mono--caps { text-transform: uppercase; letter-spacing: 0.08em; }
.nowrap { white-space: nowrap; }
/* ---- Estarcido: bloques de datos y rótulos -------------------------------- */
.plate-label {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--turquesa-ink);
}
.on-marino .plate-label, .footer .plate-label { color: var(--turquesa); }
.datablock {
font-family: var(--f-mono);
font-size: var(--fs-mono);
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
border-top: 2px solid currentColor;
}
.datablock > div {
display: grid; grid-template-columns: minmax(6ch, 9ch) 1fr; gap: 16px;
padding: 9px 0;
border-bottom: 1px solid currentColor;
}
.datablock dt { opacity: 0.72; font-weight: 400; text-transform: uppercase; }
.datablock dd { margin: 0; font-weight: 500; text-transform: none; letter-spacing: 0.02em; }
.status {
display: inline-block;
font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 3px 8px;
border: 1.5px solid currentColor; border-radius: var(--radio);
}
.status--ok { color: var(--turquesa-ink); }
.on-marino .status--ok { color: var(--turquesa); }
.status--pending { color: var(--acero-mid); }
.on-marino .status--pending { color: var(--sobre-marino-2); }
/* ---- Layout -------------------------------------------------------------- */
.container {
width: min(100% - var(--margin) * 2, var(--maxw));
margin-inline: auto;
}
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.62); }
.on-marino { background: var(--marino); color: var(--sobre-marino); }
/* Tramos claros (ronda 2): blanco y gris frío alternados. El blanco va donde hay
logos: los JPG de sponsors traen fondo blanco y sobre gris dibujarían su caja. */
.on-blanco { background: var(--blanco-puro); color: var(--acero); }
.on-gris { background: var(--blanco); color: var(--acero); }
/* Banda de flotación: la línea pintada que separa casco y agua */
.waterline { height: var(--band); background: var(--turquesa); }
/* Entre tramos claros la juntura es un filete: el paso de blanco a gris ya
separa, y una banda turquesa en cada corte era el contraste que el cliente
pidió bajar. La banda plena queda donde el casco toca el agua: bajo el hero y
sobre el cierre. */
.waterline--thin { height: 1px; background: var(--linea); }
/* La ola de la marca, en un solo lugar (decisión de Nahuel, 15/9): el corte entre
el cierre y el pie. No suma un color: es el marino profundo del pie que sube
con la curva de la ola del 36º (vector del cliente, estirada al ancho) sobre el
marino del cierre. Repetida en otros cortes sería abusar del recurso; las
bandas turquesa siguen rectas. */
.ola-pie { display: block; width: 100%; height: clamp(28px, 4vw, 60px); background: var(--marino); fill: var(--marino-deep); }
.section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.section-head .h2 { max-width: 22ch; }
/* Las medidas cortas de título son para las columnas angostas del escritorio.
En una sola columna el mismo tope parte el título en líneas de dos palabras
con media pantalla vacía al lado, así que solo rigen a partir de 1021 px. */
@media (min-width: 1021px) {
.about__text .h2 { max-width: 16ch; }
.h2--corto { max-width: 14ch; }
}
@media (max-width: 1020px) {
.section-head .h2 { max-width: 30ch; }
}
.section-head .lede { margin-top: 18px; }
.section-head--row {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px;
}
/* `minmax(min(Npx, 100%), 1fr)` y no `minmax(Npx, 1fr)`: con el mínimo fijo, una
caja más angosta que N —280 px de contenido en un viewport de 320— no puede
encogerlo y la grilla desborda la página. Con min() el piso cede al ancho real.
Por encima de N el resultado es idéntico, así que no cambia ningún ancho usable. */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; }
/* ---- Botones estarcidos -------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
min-height: 56px; padding: 0 28px;
font-family: var(--f-display); font-weight: 700;
font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase;
line-height: 1; white-space: nowrap;
border: 2px solid transparent; border-radius: var(--radio);
transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--turquesa); color: var(--marino-deep); border-color: var(--turquesa); }
/* El claro es el tono por defecto: los botones nacen para fondo claro y se
invierten dentro de los campos oscuros (hero, cabecera interior, tramos
marino, cajón móvil). */
.btn--primary:hover { background: var(--marino); border-color: var(--marino); color: var(--blanco-puro); }
.btn--outline { background: transparent; color: var(--marino); border-color: var(--marino); }
.btn--outline:hover { background: var(--marino); color: var(--blanco-puro); }
.hero .btn--primary:hover, .page-hero .btn--primary:hover, .on-marino .btn--primary:hover, .drawer .btn--primary:hover { background: var(--blanco-puro); border-color: var(--blanco-puro); color: var(--marino-deep); }
.hero .btn--outline, .page-hero .btn--outline, .on-marino .btn--outline, .drawer .btn--outline { color: var(--blanco-puro); border-color: var(--blanco-puro); }
.hero .btn--outline:hover, .page-hero .btn--outline:hover, .on-marino .btn--outline:hover, .drawer .btn--outline:hover { background: var(--blanco-puro); color: var(--marino-deep); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.82rem; }
.btn--lg { min-height: 64px; padding: 0 36px; font-size: 1.05rem; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
/* Teléfonos angostos: el rótulo del botón deja de ser una sola línea. `nowrap`
más 36 px de padding daban 345 px para "Avisame cuando abra", y la caja a
360 px mide 320: el botón empujaba la página y aparecía scroll horizontal.
Medido: con wrap y 18 px de padding baja a 309 px a 360 y a 300 a 320. */
@media (max-width: 860px) {
/* `nowrap` más 36 px de padding daban 345 px para "Avisame cuando abra": el
par de botones no entraba en la fila y empujaba la página. `flex-wrap` no
alcanza porque el botón por sí solo ya excede la caja en pantallas angostas. */
.btn--lg { padding: 0 24px; }
}
@media (max-width: 420px) {
.btn { white-space: normal; padding: 0 18px; line-height: 1.15; }
.btn--lg { padding: 0 20px; }
}
.link-arrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--turquesa-ink);
text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px;
}
.on-marino .link-arrow { color: var(--turquesa); }
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
/* ---- Header -------------------------------------------------------------- */
.header {
position: sticky; top: 0; z-index: var(--z-header);
background: var(--blanco-puro); color: var(--acero);
border-bottom: 1px solid var(--linea);
}
/* Tres columnas y el menú en el centro exacto (15/9). Con flex y space-between el
menú quedaba donde lo dejaba el reparto entre logo y acciones: ~95 px a la
izquierda del centro y sin alinear con nada. En la home, sin logo arriba, se
leía corrido. Centrado se lee como decisión, y cuando aparece el logo no se
mueve. Los laterales nunca bajan de su contenido: si las acciones piden más
lugar que el logo (1180-1300 px), el menú cede unos px antes que pisarlas. */
.header__inner {
display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
align-items: center; column-gap: 24px;
min-height: 80px;
}
.header__logo { grid-column: 1; justify-self: start; }
.nav { grid-column: 2; }
.header__actions { grid-column: 3; justify-self: end; }
/* El logo nunca cede ancho: es un ítem flex y, con img{max-width:100%}, encogerlo
lo condensa en vez de recortarlo. A 1024 llegaba a medir 12 px de ancho. */
.header__logo { flex: none; }
.header__logo img { height: 46px; width: auto; }
/* Home (propuesta del 15/9): el logo de la Expo es el titular del hero, así que el
header no lo repite mientras se ve; aparece cuando el hero lo suelta. Solo con
JS: sin él el logo queda siempre. `visibility` lo saca también del orden de
tabulación mientras está oculto, y el ítem conserva su lugar en la fila. */
.js .header[data-marca-en-hero] .header__logo {
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.js .header[data-marca-en-hero].is-marca .header__logo {
opacity: 1; visibility: visible; transform: none;
transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
}
/* Y mientras no hay logo tampoco hay franja (prueba del 15/9): blanca y vacía
sobre el video parecía una carga fallida y era la zona más clara de la
pantalla. El header arranca transparente sobre el hero, con el menú calado en
blanco (sin vidrio ni blur: el velo del video ya fija el contraste), y vuelve
al blanco sólido con logo en el mismo momento en que el logo aparece. Solo con
JS: sin él no hay quien lo devuelva al blanco sobre los tramos claros. */
.js .header[data-marca-en-hero] {
transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.js .header[data-marca-en-hero]:not(.is-marca) { background: transparent; border-bottom-color: transparent; color: var(--blanco-puro); }
/* En blanco y no en el celeste secundario: con el velo en degradado la banda bajo
el header es más clara y el celeste bajaba a 3,7:1 (medido 17/9). */
.js .header[data-marca-en-hero]:not(.is-marca) .nav__link { color: var(--blanco-puro); }
.js .header[data-marca-en-hero]:not(.is-marca) .nav__link:hover,
.js .header[data-marca-en-hero]:not(.is-marca) .nav__link[aria-current="page"] { color: var(--blanco-puro); }
.js .header[data-marca-en-hero]:not(.is-marca) .lang { color: var(--blanco-puro); border-color: var(--marino-tint); }
.js .header[data-marca-en-hero]:not(.is-marca) .btn--primary:hover { background: var(--blanco-puro); border-color: var(--blanco-puro); color: var(--marino-deep); }
.js .header[data-marca-en-hero]:not(.is-marca) .nav-toggle { border-color: var(--marino-tint); }
.js .header[data-marca-en-hero]:not(.is-marca) .nav-toggle span,
.js .header[data-marca-en-hero]:not(.is-marca) .nav-toggle span::before,
.js .header[data-marca-en-hero]:not(.is-marca) .nav-toggle span::after { background: var(--blanco-puro); }
.js .header[data-marca-en-hero]:not(.is-marca) :focus-visible { outline-color: var(--blanco-puro); }
/* El hero sube debajo del header (80 px + 1 de filete) y devuelve ese alto como
aire arriba: el video llega al borde de la pantalla y la columna no se corre. */
.js .hero--bajo-header { margin-top: -81px; }
.js .hero--bajo-header .hero__inner {
padding-top: calc(81px + clamp(24px, 2.6vw, 40px));
/* techo de 840: más alto, la columna apoyada abajo se aleja del header */
min-height: min(calc(100svh - 10px), 840px);
}
@media (max-width: 1100px) { .js .hero--bajo-header .hero__inner { min-height: min(calc(100svh - 10px), 720px); } }
/* Tablet vertical: el hero llena la pantalla, como en escritorio. Con el tope de
720 px el tramo blanco de los apoyos entraba en la primera pantalla y la columna
quedaba chica en medio del video. Arriba gana aire: 24 px contra el header era
poco con el logo más grande. */
@media (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) {
/* La columna ocupa ~63 % del alto: apoyada abajo dejaba 330-420 px de video vacío
arriba, que se leía como contenido que falta. En vertical se centra. */
.js .hero--bajo-header .hero__inner { min-height: min(calc(100svh - 10px), 1100px); padding-top: calc(81px + 40px); align-items: center; }
}
/* Teléfonos: el hero medía 905 px contra 844 de pantalla y la banda caía afuera.
Se recorta el excedente repartido, sin sacar nada de la columna: 12 px de aire
bajo el header en vez de 24, botones de 56, numeral del 36º a 3,2 em, márgenes
de la pausa de 16/18, pie de 24 y el logo topado en 340 px. */
@media (max-width: 640px) {
.js .hero--bajo-header .hero__inner { padding-top: calc(81px + 12px); padding-bottom: 24px; }
}
/* Hasta 860 px el control de pausa va en el flujo, debajo de la columna
(22 + 44 + 24 = 90 px, más 10 de banda): se descuenta para que la banda y la
pausa entren en la primera pantalla. */
@media (min-width: 641px) and (max-width: 860px) and (orientation: portrait) {
.js .hero--bajo-header .hero__inner { min-height: min(calc(100svh - 100px), 1100px); }
}
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
.nav__link {
font-family: var(--f-display); font-weight: 600;
font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase;
padding: 8px 0; position: relative; white-space: nowrap;
color: var(--acero-mid);
transition: color var(--dur) var(--ease-out);
}
.nav__link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: var(--turquesa); transform: scaleX(0); transform-origin: left;
transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--marino); }
.nav__link[aria-current="page"]::after, .nav__link:hover::after { transform: scaleX(1); }
.header__actions { display: flex; align-items: center; gap: 12px; }
/* Contacto directo (reunión 11/9): WhatsApp flotante. El mail en el header se
descartó: no suma frente al botón y compite con el CTA; vive en el footer. */
.wa-float {
position: fixed; right: 20px; bottom: 20px; z-index: calc(var(--z-backdrop) - 10);
display: inline-flex; align-items: center; gap: 10px;
min-height: 56px; padding: 0 18px 0 16px; border-radius: 999px;
background: #25D366; color: var(--marino-deep);
font-family: var(--f-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
box-shadow: 0 6px 18px rgba(7, 27, 69, 0.28);
transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.wa-float svg { width: 26px; height: 26px; flex: none; }
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(7, 27, 69, 0.34); }
/* Solo el ícono hasta 1100 px: en tablet la píldora con texto (153 px) tapaba el
contenido del borde derecho, como el logo de GlobalPorts en los apoyos. */
@media (max-width: 1100px) {
.wa-float { right: 16px; bottom: 16px; width: 56px; padding: 0; justify-content: center; }
.wa-float__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-float:hover { transition: none; transform: none; } }
/* El control de pausa del video vive en la misma esquina: se corre para no quedar tapado */
/* `.hero` suma especificidad: la regla base del control viene más abajo en la hoja
y, con el mismo peso, volvía a pegarlo al margen; a 1366 × 768 quedaba debajo
del botón de WhatsApp. */
@media (min-width: 861px) { .hero .motion-toggle--hero { right: calc(var(--margin) + 150px); } }
.lang {
font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--acero-mid); padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--radio);
}
a.lang:hover { color: var(--marino); border-color: var(--marino); }
.lang[data-pendiente] { opacity: 0.5; cursor: default; }
.nav-toggle {
display: none; width: 48px; height: 48px; position: relative;
border: 1px solid var(--linea); border-radius: var(--radio);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
content: ""; position: absolute; left: 12px; width: 22px; height: 2px; background: var(--marino);
}
.nav-toggle span { top: 23px; }
.nav-toggle span::before { left: 0; top: -7px; }
.nav-toggle span::after { left: 0; top: 7px; }
/* ---- Cajón móvil --------------------------------------------------------- */
.drawer-backdrop {
position: fixed; inset: 0; z-index: var(--z-backdrop);
background: rgba(7, 27, 69, 0.72);
opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.drawer-backdrop.is-open { opacity: 1; }
.drawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
width: min(88vw, 400px);
background: var(--marino-deep); color: var(--blanco-puro);
padding: 24px 28px 40px;
transform: translateX(100%);
transition: transform var(--dur) var(--ease-out);
display: flex; flex-direction: column; gap: 32px;
border-left: var(--band) solid var(--turquesa);
}
.drawer.is-open { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__top img { height: 40px; width: auto; }
.drawer__close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--marino-tint); border-radius: var(--radio); }
.drawer__close svg { width: 20px; height: 20px; }
.drawer__links { display: flex; flex-direction: column; }
.drawer__links a {
font-family: var(--f-display); font-weight: 700; font-size: 1.35rem;
text-transform: uppercase; letter-spacing: 0.02em;
padding: 16px 0; border-bottom: 1px solid var(--marino-tint);
}
.drawer__cta { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
/* ---- Escala de calado (instrumento de lectura) ---------------------------- */
/* Como en un casco: los números crecen hacia arriba desde la quilla y la única
lectura se hace donde toca el agua. No es un menú; no lleva enlaces. */
.draft {
position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
z-index: var(--z-rail);
height: min(60vh, 520px); width: 64px;
display: none;
}
.draft__track { position: absolute; left: 22px; top: 0; bottom: 0; width: 4px; background: rgba(191, 211, 234, 0.35); }
.draft__fill {
position: absolute; left: 20px; bottom: 0; width: 8px; height: 100%;
background: var(--turquesa);
transform-origin: bottom;
transform: scaleY(0);
transition: transform 160ms linear;
}
.draft__mark {
position: absolute; left: 0; width: 64px; height: 28px; margin-top: -14px;
display: flex; align-items: center; gap: 10px;
font-family: var(--f-display); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em;
color: var(--sobre-marino-2);
transition: color var(--dur) var(--ease-out);
}
.draft__mark::before { content: ""; width: 18px; height: 3px; background: currentColor; margin-left: 12px; }
.draft__mark.is-under { color: var(--turquesa); }
/* La lectura: el nombre del tramo, apoyado sobre la línea de flotación y fuera
del agua. Va en vertical para no invadir la caja de texto de la página. */
.draft__read {
position: absolute; left: 0; top: 0; width: 18px;
transition: transform 160ms linear;
}
.draft__read span {
display: block;
writing-mode: vertical-rl; transform: rotate(180deg);
font-family: var(--f-display); font-weight: 600;
font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
white-space: nowrap; color: var(--turquesa);
}
/* sobre tramos claros la escala se tiñe de marino */
.draft.is-light .draft__track { background: rgba(11, 42, 107, 0.16); }
.draft.is-light .draft__mark { color: var(--acero-mid); }
.draft.is-light .draft__mark.is-under { color: var(--turquesa-ink); }
.draft.is-light .draft__read span { color: var(--turquesa-ink); }
@media (min-width: 1180px) { .draft { display: block; } :root { --margin: clamp(96px, 7vw, 120px); } }
/* Home (15/9): la escala no aparece mientras se ve el hero. Con el rayo del timón
colgado fuera del margen, entre 1180 y ~1500 px de ancho la punta caía sobre
las marcas. Además, la primera pantalla queda sin instrumentos, como el header.
La escala entra junto con el logo del header cuando el hero sale de pantalla. */
.draft { transition: opacity var(--dur) var(--ease-out), visibility 0s; }
.en-hero .draft { opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur); }
/* El piso de --fs-display (2.3rem) no contempla un h1 de una sola palabra larga:
"CONTACTANOS" mide 365 px y la caja a 360 px son 320. Una palabra sola no
puede partirse, así que abajo de 400 px el display vuelve a escalar con el
viewport en vez de quedar clavado en su mínimo. */
@media (max-width: 400px) {
:root { --fs-display: clamp(1.7rem, 7.5vw, 2.3rem); --fs-h2: clamp(1.6rem, 6vw, 1.9rem); }
}
/* ---- Hero: el casco filmado ---------------------------------------------- */
/* El video es el campo; encima va el velo marino en degradado (ver .hero__wash),
medido para que el texto cumpla AA en cualquier fotograma del loop. */
.hero {
position: relative;
display: flex;
flex-direction: column;
background: var(--marino-deep);
color: var(--blanco-puro);
isolation: isolate;
}
.hero__film { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero__video {
display: block; width: 100%; height: 100%; object-fit: cover;
/* el metraje se acerca a la paleta del casco antes de recibir el velo */
filter: saturate(0.85) brightness(0.9);
}
/* Velo en degradado (17/9, pedido de Irene del 16/9: el velo plano al 72 % tapaba
el buque). Aprobado por Nahuel. Medido sobre 28 fotogramas del loop (2 por
segundo), con el filtro y las capas compuestas como las pinta el navegador y el
percentil 95 del fondo bajo cada texto:
- Velo plano anterior: se veía el 10 % de la luminancia del video en la mitad
derecha.
- Este degradado: se ve el 24-25 % en escritorio y tablet horizontal, y el
15-16 % en teléfono y tablet vertical. Cumple AA en 1366, 1440, 1920, 390,
768×1024, 834×1194, 1024×768 y 1180×820 con la sede, el menú y "Pausa" en
blanco (en el celeste #BFD3EA bajaban a 3,6-3,8:1; ver sus reglas).
Capas, de arriba hacia abajo: banda bajo el header (160 px), columna de texto a
la izquierda y caída vertical hacia la base. */
.hero__wash {
position: absolute; inset: 0;
background:
linear-gradient(to bottom, rgba(7, 27, 69, 0.55) 0, rgba(7, 27, 69, 0) 160px),
linear-gradient(to right, rgba(7, 27, 69, 0.62) 0%, rgba(7, 27, 69, 0.40) 45%, rgba(7, 27, 69, 0) 72%),
linear-gradient(to bottom, rgba(7, 27, 69, 0.30) 0%, rgba(7, 27, 69, 0.45) 50%, rgba(7, 27, 69, 0.70) 100%);
}
/* Hasta 900 px la columna ocupa todo el ancho: sin caída lateral, más cuerpo abajo */
@media (max-width: 900px) {
.hero__wash {
background:
linear-gradient(to bottom, rgba(7, 27, 69, 0.55) 0, rgba(7, 27, 69, 0) 160px),
linear-gradient(to bottom, rgba(7, 27, 69, 0.55) 0%, rgba(7, 27, 69, 0.62) 35%, rgba(7, 27, 69, 0.80) 100%);
}
}
.hero__inner {
position: relative; z-index: 1;
/* Propuesta del 15/9: la columna se apoya abajo, como en Freightcamp y Offshore
Europe, y deja el metraje a la vista arriba. */
display: flex; align-items: flex-end;
flex: 1 1 auto;
/* -90px y no -80px: lo que hay sobre el hero es el header (80) y lo que lo
cierra es la banda de flotación (10). Descontar solo el header dejaba el
hero exactamente 10 px más alto que el viewport en toda pantalla de menos
de 840 px de alto. */
min-height: min(calc(100svh - 90px), 760px);
/* El aire se ajustó contra el pliegue real, no contra el ideal: medido en las
pantallas del público, el sello del 36º quedaba decapitado y el encuadre del
Seminario cortado a mitad de renglón en una MacBook Air 13" y en cualquier
ventana de ~745 px. Son 78 px repartidos entre este padding y los márgenes
de los bloques que siguen; el hero completo no entra abajo de 1366 × 768 y
no se persigue, pero el corte deja de leerse como una falla. */
/* abajo espera la banda de flotación: ahí va más aire que arriba */
padding-block: clamp(24px, 2.6vw, 40px) clamp(32px, 4vw, 56px);
}
.hero__copy { max-width: min(100%, 48rem); }
/* Cuándo y dónde abren la columna. Es el único lugar del hero con la fecha y la
sede; nada más abajo las repite. Van como dato, no como placa: la versión con
caja, borde y radio (15/9) se leía igual que los botones de abajo. Sin fondo
ni borde, con los íconos del pie y un filete fino entre los dos datos. */
/* Cuándo y dónde, como componente: nace en el hero y se reusa en el cierre, que
repetía el mismo dato con otro dibujo. Mismos iconos que el pie y un filete
fino entre los dos datos. */
.datos-evento {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0;
/* -2 px: el trazo del calendario empieza 2 px adentro de su caja de 18 */
margin: 0 0 0 -2px;
font-family: var(--f-mono); font-variant-numeric: tabular-nums;
font-size: clamp(0.84rem, 1.02vw, 0.96rem); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
}
.datos-evento > span { display: inline-flex; align-items: center; gap: 10px; }
.datos-evento svg { width: 18px; height: 18px; flex: none; color: var(--turquesa); }
.datos-evento__fecha { font-weight: 700; color: var(--blanco-puro); }
/* La sede va en caja baja (15/9, decisión de Nahuel): son 33 caracteres de
nombres propios y en mayúsculas se leían como un bloque. La fecha se queda en
mayúsculas como dato duro, y así aparece la jerarquía cuándo → dónde. */
.datos-evento__sede {
font-weight: 500; color: var(--sobre-marino-2);
text-transform: none; letter-spacing: 0.02em;
margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(191, 211, 234, 0.4);
}
/* Sobre el video va en blanco (velo en degradado, 17/9); en el cierre, marino plano, sigue celeste */
.hero .datos-evento__sede { color: var(--blanco-puro); }
.hero__copy .datos-evento { margin-bottom: clamp(18px, 2.2vw, 26px); }
.final .datos-evento { margin-top: 22px; margin-bottom: 16px; }
/* La marca es el titular: el h1 es el logo de la Expo. Crece con el ancho, pero
también se topa por el alto: el resto de la columna (placa, seminario, tema,
botones) más el aire del hero suman ~525 px, y lo que queda de pantalla,
pasado a ancho con la proporción del logo (1.77), es su máximo. El techo de
550 px es lo que entra en el hero de 840 px sin que la placa toque el header.
Medido: 1454×1174 → 523 px, 1440×900 → 518, 1366×768 → 430, 1289×713 → 332. */
/* Ajuste óptico (15/9): el borde del logo que lee el ojo es el aro del timón, la
forma cerrada y de más peso; el rayo que sale a la izquierda es un saliente,
como una comilla. Se cuelga fuera del margen y el aro queda sobre la misma
vertical que el texto y los botones. Medido sobre el logo: el aro empieza al
9,25 % del ancho. */
.hero__marca { --marca-w: clamp(240px, min(36vw, calc((100svh - 525px) * 1.77)), 550px); margin: 0; line-height: 0; }
/* max(): el rayo nunca queda a menos de 8 px del borde de la pantalla. En tablet el
margen es de ~34 px y el saliente de ~40: sin tope el rayo tocaba el borde. */
.hero__marca img { width: var(--marca-w); height: auto; margin-left: max(calc(var(--marca-w) * -0.0925), calc(8px - var(--margin))); }
/* Tablets (641-1100): la columna tiene 680-1000 px y a 36vw el logo quedaba en
270-300 px, con media pantalla vacía. Crece al 58 % del ancho, topado por el alto
igual que en escritorio. */
@media (min-width: 641px) and (max-width: 1100px) {
.hero__marca { --marca-w: clamp(260px, min(58vw, calc((100svh - 525px) * 1.77)), 460px); }
}
/* El 36º Seminario compuesto como el lockup horizontal de la marca: el numeral
oficial como imagen (PDF del cliente, el 36 en cursiva con la ola) y el nombre
en texto vivo, que se lee a cualquier ancho y se puede traducir. */
.hero__seminario {
display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px);
margin: clamp(16px, 2vw, 22px) 0 0; color: var(--blanco-puro);
}
/* Ajuste óptico: el 36 es cursivo y la base del 3 es su punto más a la izquierda,
30 px más afuera que la mitad de su alto (sobre 180). Si se alinea la base, el
numeral parece entrado; se cuelga un 11 % de su alto para que la mitad del
trazo caiga sobre el margen, como se cuelga una itálica. */
/* El lockup se mide en em del nombre: el numeral mide lo mismo que los cuatro
renglones (1,3 × 1,1 + 3 × 1,22 ≈ 5 em) y queda balanceado a cualquier ancho. */
.hero__seminario { --num-h: 5em; font-size: clamp(0.92rem, 1.02vw, 1rem); }
.hero__seminario-num { width: auto; height: var(--num-h); flex: none; margin-left: calc(var(--num-h) * -0.11); }
.hero__seminario-nombre { font-family: var(--f-display); font-weight: 700; font-size: 1em; line-height: 1.22; }
/* Como en las piezas del cliente, "Seminario Internacional" encabeza en el
turquesa del numeral y un 30 % más grande; el resto sigue en blanco. A 1,3 em
nunca baja de 19 px en negrita, que es texto grande: así el turquesa de la
marca (3,8:1 sobre el fotograma más claro del video) cumple AA. */
.hero__seminario-titulo { font-size: 1.3em; line-height: 1.1; color: var(--turquesa-marca); }
.hero__seminario-nombre > span { display: block; }
/* En teléfonos, al lado del numeral quedan ~170 px: el título se partía y el nombre
corría en seis renglones. Achicarlo hasta que entre bajaba el título de 19 px y
el turquesa dejaba de cumplir AA. Se apila como el logo vertical del PDF: el 36º
arriba y los cuatro renglones debajo, alineados a la columna. */
@media (max-width: 640px) {
.hero__seminario { --num-h: 3.6em; flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* El tema deja de ser el título y pasa a bajada, en caja baja */
.hero__tema {
/* Sin tope de medida en escritorio (15/9, Nahuel): la frase entra en un renglón
dentro de la columna y partida en dos se leía peor. */
margin: clamp(16px, 1.8vw, 22px) 0 0;
font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; line-height: 1.35;
color: var(--blanco-puro); text-wrap: balance;
}
.hero__tema strong { font-weight: 700; }
/* Hasta 900 px la columna es angosta y la frase sí necesita medida */
@media (max-width: 900px) { .hero__tema { max-width: 34ch; } }
@media (max-width: 640px) {
.datos-evento { flex-direction: column; align-items: flex-start; }
.datos-evento__sede { margin-left: 0; padding-left: 0; border-left: 0; }
/* en teléfonos el margen es de 20 px y el rayo mide ~32: se cuelga solo 16 para
que no se corte contra el borde de la pantalla */
.hero__marca img { width: calc(100% + 16px); margin-left: -16px; }
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: start; gap: 14px; margin-top: clamp(22px, 2.6vw, 30px); }
.hero__accion { display: grid; justify-items: start; gap: 10px; }
/* La nota pertenece al botón de inscripción, no a los dos: debajo de la fila
entera modificaba también a "Quiero ser Sponsor", donde no significa nada. */
.hero__nota { margin: 0; font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--blanco-puro); }
/* ---- Contador regresivo ---------------------------------------------------- */
/* Pedido de Diego (11/9). Fuera del hero desde el 15/9. El 17/9, por el documento
de Irene, pasa de Planes a La Expo, donde se cuenta cómo es el evento. Días,
horas y minutos, sin segundos: un número que cambia cada segundo es movimiento
continuo que distrae (WCAG 2.2.2) y repite la fecha del hero. Sin JS no se muestra. */
.cuenta {
/* grilla y no flex: con flex el ancho seguía midiendo rótulo y datos en una
sola fila y la placa quedaba con ~90 px vacíos a la derecha */
display: inline-grid; grid-template-columns: repeat(3, auto); align-items: baseline; gap: 4px 18px;
margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 12px 18px;
background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--marino);
}
/* El rótulo va siempre arriba y los tres datos en una fila (15/9): en una sola
fila el corte dependía del ancho de la columna, y en tablet "min" caía solo al
segundo renglón. */
.cuenta__rotulo { grid-column: 1 / -1; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquesa-ink); }
.cuenta__dato { display: inline-flex; align-items: baseline; gap: 6px; }
.cuenta__num { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 800; line-height: 1; }
.cuenta__uni { font-size: 0.8rem; font-weight: 500; color: var(--acero-mid); }
/* En La Expo, "más destacado" (Irene, 16/9): los días mandan y horas y minutos
acompañan, así el dato que importa se lee de un vistazo. */
.cuenta--expo { margin-top: clamp(28px, 3vw, 40px); padding: 18px 24px; gap: 6px 26px; }
.cuenta--expo .cuenta__rotulo + .cuenta__dato .cuenta__num { font-size: clamp(2.6rem, 4.6vw, 3.8rem); color: var(--marino); }
.cuenta--expo .cuenta__num { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.cuenta--expo .cuenta__uni { font-size: 0.9rem; }
/* Control de movimiento: WCAG 2.2.2, todo lo que se mueve solo se puede detener.
Lo comparten el video del hero y las líneas de fotos de ediciones anteriores. */
.motion-toggle {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; padding: 0 14px;
border: 1px solid var(--linea); border-radius: var(--radio); color: var(--acero-mid);
font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.motion-toggle:hover { color: var(--marino); border-color: var(--marino); }
.hero .motion-toggle { border-color: var(--marino-tint); color: var(--blanco-puro); }
.hero .motion-toggle:hover { color: var(--blanco-puro); border-color: var(--blanco-puro); }
/* En el hero se apoya sobre el propio video, alineado al borde del contenedor */
.motion-toggle--hero { position: absolute; z-index: 2; right: var(--margin); bottom: 30px; }
/* en pantallas chicas la copy llega hasta el borde: el control baja al flujo */
@media (max-width: 860px) {
/* a la izquierda: la esquina derecha es del botón flotante de WhatsApp */
/* 24 px abajo: sin margen, el control quedaba pegado a la banda (15/9) */
.motion-toggle--hero { position: static; align-self: flex-start; margin: 22px var(--margin) 24px; }
}
.motion-toggle svg { width: 13px; height: 13px; flex: none; }
.motion-toggle .motion-toggle__play { display: none; }
.motion-toggle.is-paused .motion-toggle__play { display: block; }
.motion-toggle.is-paused .motion-toggle__pause { display: none; }
/* Placa de contenedor: fotos y medios del resto del sitio */
/* Ronda 2: la placa pierde el borde de 2 px y los remaches macizos. En la versión
clara eran la única esquina viva de la página; queda el recorte con el radio
del sistema. El span .corner sigue en el HTML y no se dibuja. */
.plate { position: relative; overflow: hidden; border-radius: var(--radio); color: var(--blanco-puro); }
.plate--marino { color: var(--marino); }
.plate > .corner { display: none; }
.plate__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--marino-deep); }
.plate__media video, .plate__media img { width: 100%; height: 100%; object-fit: cover; }
.plate > img { display: block; width: 100%; height: auto; }
/* La banda de flotación se pinta al cargar */
.hero .waterline { position: relative; z-index: 1; transform-origin: left; }
.js .hero .waterline { animation: paint 900ms var(--ease-out) both; }
@keyframes paint { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.js .hero__copy > * { animation: rise 700ms var(--ease-out) both; }
.js .hero__copy > :nth-child(2) { animation-delay: 80ms; }
.js .hero__copy > :nth-child(3) { animation-delay: 160ms; }
.js .hero__copy > :nth-child(4) { animation-delay: 240ms; }
.js .hero__copy > :nth-child(5) { animation-delay: 320ms; }
@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
/* ---- Crédito de organizador ---------------------------------------------- */
/* No entra al hero: ahí ya conviven la marca del evento y el 36º Seminario, y una
tercera marca los diluye. Vive en la firma de apoyos (a color, sobre blanco) y
en el pie (calado en blanco sobre marino). */
.organiza { display: grid; justify-items: start; gap: 14px; margin-top: clamp(28px, 4vw, 44px); }
/* El organizador no es un ítem de una lista: es una firma. Junto a los apoyos va
a color (globalports-color.png) sobre el tramo blanco; en el pie, calado en
blanco sobre el marino. Nunca con caja: ya ningún logo la lleva. */
.organiza__marca { display: block; transition: opacity var(--dur) var(--ease-out); }
.organiza__marca img { width: auto; height: 58px; }
.organiza__marca:hover { opacity: 0.72; }
.organiza--fila { margin-top: 0; gap: 10px; justify-items: end; }
@media (max-width: 900px) { .organiza--fila { justify-items: start; } }
.organiza--fila .organiza__marca img { height: 54px; }
.organiza--footer { margin-top: 28px; gap: 12px; }
.organiza--footer .organiza__marca img { height: 44px; }
/* ---- Apoyos como firma institucional (17/9) -------------------------------- */
/* Elegida por Nahuel frente a la sección armada como capítulo (título h2 grande y
"Organiza" arriba a la derecha, que parecía un logo número 13). Se arma como el
pie de las piezas del cliente (tapa del programa): "Organiza" a la izquierda,
filete, "Con el apoyo de" a la derecha. Los dos rótulos son del mismo rango: el
h2 conserva su nivel para lectores de pantalla, pero se ve como rótulo y deja
el protagonismo a los logos. Medido a 1511 px: la sección pasa de 548 a 438 px
y el primer logo de 241 a 130 px desde el tope. */
.apoyos--firma .section-head,
.apoyos--firma .organiza { display: contents; }
.apoyos--firma .section-head .h2 {
margin: 0; max-width: none;
font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 500; line-height: 1.3;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquesa-ink);
}
.apoyos--firma .organiza__marca img { height: 54px; }
/* mismo alto de línea en los dos rótulos: con el inline-flex de .plate-label
"Organiza" quedaba 3 px más arriba que "Con el apoyo de" */
.apoyos--firma .organiza .plate-label { display: block; line-height: 1.3; }
/* En negrita, como "Faltan" del contador: en 500 el rótulo chico pasaba de largo
al recorrer la página. */
.apoyos--firma .organiza .plate-label,
.apoyos--firma .section-head .h2 { font-weight: 700; }
/* Dos columnas solo con la grilla de 6: con la de 3 (hasta 900 px) quedan cuatro
filas y la columna de "Organiza" se vuelve un hueco alto. */
@media (min-width: 901px) {
.apoyos--firma > .container {
--logo-h: clamp(58px, 5.6vw, 78px);
--firma-aire: clamp(28px, 4vw, 56px);
display: grid; grid-template-columns: auto minmax(0, 1fr);
}
/* los dos rótulos en la misma línea de base, arriba de su contenido */
.apoyos--firma .organiza .plate-label,
.apoyos--firma .section-head .h2 { grid-row: 1; align-self: end; padding-bottom: 14px; }
.apoyos--firma .organiza .plate-label { grid-column: 1; padding-right: var(--firma-aire); }
.apoyos--firma .section-head .h2 { grid-column: 2; }
/* el logo de GlobalPorts centrado en la altura de la primera fila de logos */
.apoyos--firma .organiza__marca {
grid-column: 1; grid-row: 2; align-self: start;
display: flex; align-items: center; height: calc(var(--logo-h) + 40px);
padding-right: var(--firma-aire);
}
.apoyos--firma .section-head .h2,
.apoyos--firma .reserved--apoyos { border-left: 1px solid var(--linea); padding-left: var(--firma-aire); }
.apoyos--firma .reserved--apoyos { grid-column: 2; grid-row: 2; }
}
@media (max-width: 900px) {
.apoyos--firma > .container { display: flex; flex-direction: column; align-items: flex-start; }
.apoyos--firma .organiza .plate-label { order: 1; }
.apoyos--firma .organiza__marca { order: 2; margin-top: 10px; }
.apoyos--firma .section-head .h2 { order: 3; align-self: stretch; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linea); }
.apoyos--firma .reserved--apoyos { order: 4; align-self: stretch; margin-top: 14px; }
}
/* ---- Bloque "qué es" ------------------------------------------------------ */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
/* En dos columnas la foto no tiene por qué medir 3:2: crece hasta que las dos
columnas terminan en la misma línea. Sin eso quedaba un hueco de 190–265 px
abajo a la derecha, que es aire sin razón, no respiro. */
@media (min-width: 1021px) {
.about { align-items: stretch; }
.about__media { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.about__media figure { min-height: 340px; }
.about__media figure img { height: 100%; object-fit: cover; }
}
.about__text .h2 { margin-bottom: 28px; }
.about__text p { max-width: var(--measure); }
.about__data { margin-top: 32px; color: var(--marino); max-width: 420px; }
.about__media .about__data { max-width: none; }
@media (max-width: 1020px) { .about { grid-template-columns: 1fr; } }
/* ---- Sponsors: placas ----------------------------------------------------- */
/* Muro por niveles (17/9). Pedido de Irene: el nombre del nivel arriba de cada
grupo y no al costado. Es el patrón de Exporlog (css/exportlog.css, .sponsor-wall):
pastilla con el nivel montada sobre una tarjeta con borde del mismo color, filas
en flex centradas (con grid las filas incompletas quedaban corridas a la
izquierda) y logos recortados a su borde real con la caja óptica --k.
Colores de nivel del brochure. Texto de la pastilla en blanco o marino según
cuál cumpla AA: Main 5,1:1 en blanco; Gold 7,1:1 y Silver 8,2:1 en marino.
Bronze del brochure (#A86F45) no llega a 4,5:1 con ninguno: la pastilla usa
#97643E (5,0:1 en blanco), igual que Exporlog oscureció su "Estándar".
Tamaños: los de Exporlog achicados un escalón, porque el muro 2025 es prueba,
no catálogo; en 2026 Platinum y Main pueden volver a los de Exporlog. */
.sponsor-wall { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); }
.sponsor-tier { position: relative; padding-top: 15px; }
.sponsor-tier__badge {
position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; margin: 0;
background: var(--tc); color: var(--tc-on);
font-family: var(--f-display); font-weight: 800; font-size: 0.78rem; line-height: 1;
letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
padding: 9px 24px; border-radius: 999px;
}
.sponsor-tier__card { border: 2px solid var(--tc); border-radius: var(--radio); background: var(--blanco-puro); padding: 30px 18px 18px; }
.sponsor-tier--platinum { --tc: var(--marino); --tc-on: var(--blanco-puro); --cell: 220px; --box: 116px; }
.sponsor-tier--main { --tc: var(--nivel-main); --tc-on: var(--blanco-puro); --cell: 132px; --box: 100px; }
.sponsor-tier--gold { --tc: var(--nivel-gold); --tc-on: var(--marino-deep); --cell: 132px; --box: 88px; }
.sponsor-tier--silver { --tc: var(--nivel-silver); --tc-on: var(--marino-deep); --cell: 150px; --box: 78px; }
.sponsor-tier--bronze { --tc: #97643E; --tc-on: var(--blanco-puro); --cell: 200px; --box: 60px; }
.sponsor-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; }
.sponsor-item {
flex: 0 1 min(var(--cell), 100%);
display: flex; align-items: center; justify-content: center;
height: var(--box); padding: 10px 12px; border-radius: var(--radio);
}
/* Alto en px y no max-height: 100%, que dentro de flex no resuelve y desbordaba
la celda (mismo aprendizaje que en Exporlog). */
.sponsor-item img { height: calc((var(--box) - 20px) * var(--k, 1)); width: auto; max-width: 100%; object-fit: contain; transition: transform var(--dur) var(--ease-out); }
/* Se mueve el logo y no el enlace: si se moviera el área clicleable, el cursor
cerca del borde entraba y salía del hover en bucle. */
a.sponsor-item:hover img, a.sponsor-item:focus-visible img { transform: translateY(-2px) scale(1.03); }
@media (prefers-reduced-motion: reduce) { a.sponsor-item img, a.sponsor-item:hover img, a.sponsor-item:focus-visible img { transform: none; transition: none; } }
/* Cantidad fija por fila y no ancho fijo de celda: con anchos fijos, entre 1101 y
1365 px quedaban filas de un logo solo (7+1, 6+6+1). Las cantidades salen de los
confirmados al 18/9 (Platinum 7, Main 5, Gold 7, Silver 6, Bronze 1) para que
ninguna fila quede con un logo solo. Alturas de caja un escalón arriba de 2025
(Main 100, Gold 88, Silver 78, Bronze 60): con 6 a 7 por fila hay lugar y en
Silver 64 los logotipos largos no se leían. Cada nivel, siempre más chico que el
de arriba (Nahuel, 18/9: un Bronze no puede verse más grande que un Silver). Por fila: desde 1280, Platinum 4+3 y el resto en una
fila; entre 641 y 1279, Platinum 4+3, Main 3+2, Gold 4+3 y Silver 3+3. Si cambia
la cantidad de un nivel, revisar su número acá. El tamaño lo sigue fijando --box. */
@media (min-width: 641px) and (max-width: 1279px) {
.sponsor-tier--platinum .sponsor-item, .sponsor-tier--gold .sponsor-item { flex-basis: calc((100% - 30px) / 4); }
.sponsor-tier--main .sponsor-item, .sponsor-tier--silver .sponsor-item { flex-basis: calc((100% - 20px) / 3); }
}
@media (min-width: 1280px) {
.sponsor-tier--platinum .sponsor-item { flex-basis: calc((100% - 30px) / 4); }
.sponsor-tier--main .sponsor-item { flex-basis: calc((100% - 40px) / 5); }
.sponsor-tier--gold .sponsor-item { flex-basis: calc((100% - 60px) / 7); }
.sponsor-tier--silver .sponsor-item { flex-basis: calc((100% - 50px) / 6); }
}
/* Última fila: Bronze (un solo logo, a ancho completo quedaba una tarjeta vacía),
Acompañan y Media partners en tres tarjetas chicas. Las dos últimas en acero
(blanco sobre #52606D, 5,96:1): no son niveles de sponsor, no llevan color. */
.sponsor-wall__pares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 44px) clamp(16px, 2vw, 24px); }
.sponsor-wall__pares .sponsor-tier__card { height: 100%; }
.sponsor-wall__pares .sponsor-grid { height: 100%; }
.sponsor-tier--pares { --tc: var(--acero-mid); --tc-on: var(--blanco-puro); --cell: 200px; --box: 64px; }
.sponsor-tier--pares .sponsor-item { flex-basis: calc((100% - 10px) / 2); }
@media (max-width: 900px) { .sponsor-wall__pares { grid-template-columns: 1fr; } }
/* Teléfonos: dos logos por fila en todos los niveles */
@media (max-width: 640px) {
.sponsor-tier__card { padding: 28px 10px 12px; }
.sponsor-grid { gap: 6px 10px; }
.sponsor-tier--platinum { --cell: 150px; --box: 84px; }
.sponsor-tier--main { --cell: 150px; --box: 72px; }
.sponsor-tier--gold { --cell: 150px; --box: 66px; }
.sponsor-tier--silver { --cell: 150px; --box: 60px; }
.sponsor-tier--bronze { --cell: 150px; --box: 52px; }
.sponsor-tier--pares { --cell: 150px; --box: 56px; }
}
/* Grilla de logos de los apoyos. Las clases .reserved* vienen de las placas
"Espacio disponible", que se retiraron el 18/9 al llegar los sponsors reales;
hoy solo las usan los apoyos. */
.reserved { display: grid; gap: 12px; }
/* Apoyos: solo los de la carpeta APOYO del cliente (18/9, Nahuel: lo que no está
ahí no va en el sitio; salieron Prefectura, BCR y UCU). Ocho logos, como en la
carpeta: CIARA y CEC van juntos en una celda, lado a lado, porque el cliente los
manda como un solo apoyo. Orden de Diego del 11/9 (Bolsa de Cereales, CPPC,
CIARA-CEC, Centro de Navegación, AAPA, OEA, CIP, IDR). Cuatro columnas en
escritorio y tablet (4+4) y dos en teléfono (2×4): siempre filas completas. */
.reserved--apoyos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .reserved--apoyos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Logos sin caja (ronda 2, pedido del cliente sobre el modelo Exporlog): el
logo se apoya directo sobre el tramo blanco. La celda es aire parejo, no se dibuja. */
.reserved__slot { display: grid; place-items: center; padding: 12px; border-radius: var(--radio); }
/* Caja óptica común (pedido de Nahuel, 14/9). El logo, recortado a su borde
real, se dibuja con un alto que sale de su proporción:
h = --logo-h × --k, con k = 1.074 / √(ancho/alto) y tope 1. Así un sello
cuadrado y un logotipo largo ocupan una superficie parecida; es el mismo
cálculo del muro de Exporlog. Escalar con transform, como antes, dejaba la caja
de cada logo distinta y los tamaños quedaban desparejos. */
.reserved__slot--logo img { width: auto; height: calc(var(--logo-h, 64px) * var(--k, 1)); max-width: 100%; object-fit: contain; transition: transform var(--dur) var(--ease-out); }
.reserved--apoyos { --logo-h: clamp(58px, 5.6vw, 78px); }
.reserved--apoyos .reserved__slot { aspect-ratio: auto; height: calc(var(--logo-h) + 40px); }
a.reserved__slot--logo:hover img { transform: scale(1.06); }
/* ---- Speakers: manifiesto de oradores ------------------------------------- */
/* Grilla, no multicolumna: el orden de los oradores está jerarquizado por poder
de convocatoria, y la lectura en Z es la que sigue ese ranking sin obligar a
bajar una columna entera y volver a subir. La multicolumna repartía 9 en 5+4 y
ponía al segundo nombre a media altura de la izquierda, lejos del primero. La
grilla además empareja el alto de cada par, así que los filetes corren
derechos de lado a lado.
TODOS IGUALES. En la reunión del 11/9 el cliente pidió no destacar a nadie:
el orden lo define GlobalPorts (el del sitio original) y la jerarquía
protocolar entre figuras mediáticas e institucionales no se resuelve con
escala. Si vuelve un destacado, que lo pidan con nombre y apellido.
Los tamaños son variables y no valores sueltos: cada tramo cambia el número en
un lugar y la foto, el nombre y el padding lo siguen. */
.manifest { border-top: 2px solid var(--marino); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 72px); }
.manifest__row {
--foto: 104px; --nombre: 1.15rem; --aire: 16px;
display: grid; grid-template-columns: var(--foto) minmax(0, 1fr); gap: 16px 20px; align-items: center;
padding: var(--aire) 0; border-bottom: 1px solid var(--linea);
}
.manifest__photo { width: var(--foto); aspect-ratio: 4 / 5; overflow: hidden; background: var(--acero-tint); border-radius: var(--radio); }
.manifest__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.manifest__name { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: var(--nombre); line-height: 1.05; color: var(--marino); }
.manifest__role { margin-top: 6px; font-size: var(--fs-small); color: var(--acero-mid); line-height: 1.4; }
/* Tablet en dos columnas (pedido de Nahuel, 18/9): a 768 la columna única dejaba la
sección en 1529 px. Con dos, cada fila mide ~333 px; la foto baja a 88 px para que
el cargo conserve ~225 px. Una sola columna recién en teléfono. */
@media (min-width: 641px) and (max-width: 900px) {
.manifest__row { --foto: 88px; --nombre: 1.05rem; }
}
@media (max-width: 640px) {
.manifest { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
.manifest__row { --foto: 80px; }
}
/* Tres columnas: los nueve entran exactos, 1-2-3 / 4-5-6 / 7-8-9. En dos
columnas cada fila dejaba ~350 px muertos a la derecha del cargo y Galíndez
quedaba solo en la última fila. */
@media (min-width: 1021px) {
.manifest { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 48px); }
}
/* Tres columnas desde 1021 (pedido de Nahuel, 18/9; antes desde 1300): entre 1021 y
1299 cada fila mide ~285 px y va con la foto compacta de tablet para que el cargo
conserve ~175 px. */
@media (min-width: 1021px) and (max-width: 1299px) {
.manifest__row { --foto: 88px; --nombre: 1.05rem; gap: 16px; }
}
/* ---- Experiencia: marcas de clase de carga -------------------------------- */
/* ---- Métricas (17/9) ------------------------------------------------------- */
/* Dentro de Trayectoria, debajo del título y separadas por un filete. Tres números
con rótulo, al estilo de las placas de datos del sistema: numeral Montserrat 800
en marino con cifras tabulares (el conteo no mueve el ancho), el "+" en turquesa
tinta y el rótulo en mono. Los tres en fila también en teléfono. */
/* Eco del lockup del hero ("Seminario Internacional" en turquesa y negrita), pero en
turquesa tinta: el turquesa de la marca #4BC199 da 2,1:1 sobre este gris y no
llega ni a texto grande; #007A67 da 4,95:1. */
.metricas__lista { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: clamp(24px, 3vw, 36px) 0 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 21/9: cuando la lista es lo único de su sección (En números, después de los
apoyos), el corte lo hace el filete de la sección, no el borde de la lista. */
.metricas__lista--sola { margin-top: 0; padding-top: 0; border-top: 0; }
.metrica { display: grid; align-content: start; gap: 10px; padding: 6px clamp(14px, 2vw, 28px); border-left: 1px solid var(--linea); }
.metrica:first-child { border-left: 0; padding-left: 0; }
.metrica__num {
font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 0.95;
font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--marino);
}
.metrica__num .metrica__signo { color: var(--turquesa-ink); }
.metrica__rotulo { font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; color: var(--acero-mid); }
@media (max-width: 480px) {
.metrica { padding: 4px 10px; }
.metrica__rotulo { font-size: 0.7rem; letter-spacing: 0.04em; }
}
/* ---- Agenda (programa.html, 17/9) ------------------------------------------ */
/* Patrón de Exporlog (pestañas por día, tarjetas de sesión) llevado al sistema:
tres columnas en escritorio —hora, salón de conferencias y workshops— para que
se lea qué pasa en paralelo; apilado hasta 900 px. Los "Representante de…" van
en cursiva: son lugares sin nombre confirmado, no personas. */
.agenda__acciones { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 14px; }
.agenda__intro { max-width: var(--measure); margin: 0 0 clamp(28px, 3vw, 40px); }
.agenda__tabs { display: none; gap: 0; border-bottom: 1px solid var(--linea); margin-bottom: 24px; }
.js .agenda__tabs { display: flex; }
.agenda__tab {
display: grid; gap: 4px; justify-items: start; padding: 12px 22px 14px; margin-bottom: -1px;
border-bottom: 3px solid transparent; color: var(--acero-mid); text-align: left;
}
.agenda__tab:hover { color: var(--marino); }
.agenda__tab[aria-selected="true"] { color: var(--marino); border-bottom-color: var(--marino); }
.agenda__tab-dia { font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; line-height: 1; }
.agenda__tab-fecha { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.04em; }
.agenda__dia + .agenda__dia { margin-top: 48px; }
.js .agenda__dia + .agenda__dia { margin-top: 0; }
.agenda__dia-titulo { font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; color: var(--marino); margin: 0 0 16px; }
.js .agenda__dia-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.agenda__cabecera, .agenda__fila, .agenda__pausa { display: grid; grid-template-columns: 76px minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; }
.agenda__cabecera { padding: 0 0 10px; border-bottom: 2px solid var(--marino); margin-bottom: 14px; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acero-mid); }
.agenda__fila { margin-bottom: 14px; align-items: stretch; }
.agenda__hora { margin: 0; padding-top: 18px; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; color: var(--marino); }
.agenda__pausa { align-items: center; margin: 4px 0 18px; font-family: var(--f-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acero-mid); }
.agenda__pausa > span:last-child { grid-column: 2 / -1; padding: 8px 0; border-top: 1px dashed var(--linea); border-bottom: 1px dashed var(--linea); text-align: center; }
.agenda__pausa .agenda__hora { padding-top: 0; font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
/* Sin filete lateral de color (recurso genérico que el sistema no usa): en
escritorio la columna ya dice qué sala es y apilado lo dice el rótulo de sala. */
.sesion { background: var(--blanco-puro); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 20px 18px; }
.sesion--taller { align-self: start; }
.sesion--vacia { background: none; border: 0; padding: 0; }
.sesion__sala { display: none; margin: 0 0 6px; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquesa-ink); }
.sesion__tipo { margin: 0 0 4px; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquesa-ink); }
.sesion__titulo { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--marino); text-wrap: balance; }
.sesion__desc { margin: 8px 0 0; font-size: var(--fs-small); color: var(--acero-mid); max-width: var(--measure); }
.sesion__rotulo { margin: 14px 0 6px; font-family: var(--f-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acero-mid); }
.sesion__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 6px 20px; }
.speaker { display: grid; gap: 1px; font-size: var(--fs-small); line-height: 1.35; }
.speaker__name { font-weight: 600; color: var(--acero); }
.speaker__role { color: var(--acero-mid); }
.speaker--pendiente .speaker__role { font-style: italic; }
/* Mismo cuerpo que .status (0.72rem): es vocabulario de estado y a 0.66rem caía en
10,56 px, abajo del piso de 11 px para texto funcional. */
.agenda__tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--linea); border-radius: var(--radio); font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acero-mid); vertical-align: 2px; }
.speaker--pendiente .agenda__tag { font-style: normal; }
.sesion__nota { margin: 12px 0 0; font-size: var(--fs-small); font-style: italic; color: var(--acero-mid); }
@media (max-width: 900px) {
.agenda__cabecera { display: none; }
.agenda__fila { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 22px; }
.agenda__hora { padding-top: 0; }
.sesion__sala { display: block; }
.sesion--vacia { display: none; }
.agenda__pausa { grid-template-columns: auto minmax(0, 1fr); }
.agenda__pausa > span:last-child { grid-column: 2; }
.agenda__tab { padding: 10px 14px 12px; flex: 1 1 0; }
}
.cargo { border-top: 2px solid var(--marino); }
/* Cada formato con su prueba: la foto entra como columna de la fila, no como
tarjeta. La lista con filete sigue siendo lista. */
.cargo__item {
/* Columnas y separación por tramo, abajo: foto al costado, foto arriba o apilado. */
display: grid; align-items: start;
padding: 34px 0 26px; border-bottom: 1px solid var(--linea);
}
.cargo__foto { aspect-ratio: 3 / 2; overflow: hidden; background: var(--acero-tint); border-radius: var(--radio); }
.cargo__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cargo__item .h3 { color: var(--marino); }
.cargo__item p { margin: 0; color: var(--acero-mid); max-width: 52ch; }
/* Pantallas grandes (pedido del cliente, 18/9): dos columnas en vez de cuatro filas
a lo ancho. En fila, el texto se cortaba en 52ch y dejaba vacía media fila; en
2 × 2 cada formato es foto | título y texto, la misma fila de tablet, y la
sección baja a la mitad de alto. Filete de cierre en cada ítem, como en la lista. */
@media (min-width: 721px) {
.cargo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
}
@media (min-width: 1101px) {
.cargo__item { grid-template-columns: minmax(200px, 42%) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px 28px; }
.cargo__foto { grid-row: 1 / span 2; }
}
/* Tablet (721-1100, pedido de Nahuel del 18/9: dos columnas también a 1024). Con la
foto al costado, cada ítem mide ~438 px a 1024 y al texto le quedaban 210 px; la
foto va arriba, a lo ancho del ítem, sin caja ni borde: no es una tarjeta. */
@media (min-width: 721px) and (max-width: 1100px) {
.cargo__item { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding-top: 28px; }
}
@media (max-width: 720px) { .cargo__item { grid-template-columns: 1fr; gap: 12px; } .cargo__foto { grid-row: auto; } }
/* ---- Planes: tarjetas (ronda 3, pedido del cliente del 11/9) ------------- */
/* Tarjetas comparables como en el brochure: Platinum, Main y Gold arriba; Silver
y Bronze abajo, centrados. La home lleva la versión resumida (enlace al plan) y
auspicios.html la completa (qué incluye cada stand, beneficios y la tabla).
El color de nivel sale del brochure y vive solo en la franja superior: el
nombre sigue en marino y el rango lo dice el orden. */
.plan, [data-tier="platinum"] { --tier: var(--marino); }
[data-tier="main"] { --tier: var(--nivel-main); }
[data-tier="gold"] { --tier: var(--nivel-gold); }
[data-tier="silver"] { --tier: var(--nivel-silver); }
[data-tier="bronze"] { --tier: var(--nivel-bronze); }
.planes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.planes > .plan { grid-column: span 2; }
.planes > .plan:nth-child(4) { grid-column: 2 / span 2; }
.planes > .plan:nth-child(5) { grid-column: 4 / span 2; }
/* Tablet: Platinum a ancho completo arriba y los otros cuatro de a dos (pedido de
Nahuel, 18/9). Antes el ancho completo quedaba para Bronze, abajo: el plan más
chico era el que más lugar ocupaba. */
@media (max-width: 1020px) {
.planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.planes > .plan, .planes > .plan:nth-child(4), .planes > .plan:nth-child(5) { grid-column: auto; }
.planes > .plan:nth-child(1) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.planes { grid-template-columns: minmax(0, 1fr); }
.planes > .plan:nth-child(1) { grid-column: auto; }
}
.plan {
display: flex; flex-direction: column; min-width: 0;
background: var(--blanco-puro); border: 1px solid var(--linea);
border-radius: var(--radio); overflow: hidden;
transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
/* La franja de nivel es un bloque interno y no un borde grueso: un border-top de
6 px sobre esquinas redondeadas se curva en los extremos. El overflow de la
tarjeta la recorta con el mismo radio. */
.plan::before { content: ""; display: block; flex: none; height: 6px; background: var(--tier); }
.plan:target { border-color: var(--marino); }
.plan__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; }
.plan__name { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1; color: var(--marino); }
/* 17/9 (Irene): en la home la planta abstracta no se entendía sin leyenda y se
reemplazó por el render del stand de la primera opción del plan. Bronze no tiene
stand y queda sin imagen.
21/9 (Irene): "quitar recuadritos de arriba a la derecha". Salieron también de
Auspicios, que era donde seguían. Las reglas .plan__planos / .plano quedaron sin
uso y se borraron. */
/* El head toma el alto del render para que los nombres queden en la misma línea
también en Bronze, que no lleva imagen. En teléfonos las tarjetas van apiladas y
no hay línea que alinear: Bronze no carga ese hueco. */
@media (min-width: 641px) { .plan--resumen .plan__head { min-height: 116px; } }
.plan__foto { width: 104px; height: 78px; flex: none; object-fit: contain; background: var(--blanco-puro); border: 1px solid var(--linea); border-radius: var(--radio); }
.plan__datos {
display: grid; gap: 4px; margin: 0 24px; padding: 12px 0;
border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--acero);
}
.plan__datos strong { color: var(--marino); font-weight: 700; }
.plan__resumen { margin: 14px 24px 0; font-size: var(--fs-small); color: var(--acero-mid); flex: 1 1 auto; }
.plan__ir {
display: inline-flex; align-items: center; gap: 8px; margin: 16px 24px 22px;
font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquesa-ink);
}
.plan__ir svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
a.plan:hover { border-color: var(--marino); transform: translateY(-3px); }
a.plan:hover .plan__ir svg, a.plan:focus-visible .plan__ir svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { a.plan:hover { transform: none; } }
.plan__body { padding: 4px 24px 8px; flex: 1 1 auto; }
.plan__rotulo { margin: 18px 0 6px; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acero-mid); }
.plan__espacio { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--linea); font-weight: 600; font-size: 0.92rem; color: var(--marino); }
.plan__stand { border-bottom: 1px solid var(--linea); }
.plan__stand summary {
list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
padding: 10px 0; font-weight: 700; font-size: 0.92rem; color: var(--marino); white-space: nowrap;
}
.plan__stand summary::-webkit-details-marker { display: none; }
/* Render del stand (brochure 2026, págs. 8-13): miniatura en la fila para que la
diferencia entre opciones se vea sin abrir nada; al abrir, el render grande
arriba de la lista de mobiliario. */
.plan__thumb { width: 64px; height: 48px; flex: none; object-fit: contain; background: var(--blanco-puro); border: 1px solid var(--linea); border-radius: var(--radio); }
.plan__render { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; margin: 2px 0 12px; background: var(--blanco-puro); border: 1px solid var(--linea); border-radius: var(--radio); }
.plan__stand[open] .plan__thumb { opacity: 0.4; }
/* En tarjetas angostas (tres columnas a ~1000 px) la fila no alcanza para miniatura,
medida y rótulo: se queda con la miniatura, la medida y la flecha. */
.plan { container-type: inline-size; }
@container (max-width: 340px) { .plan__stand summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .plan__stand summary::after { margin-left: auto; } }
.plan__stand summary span { margin-left: auto; font-weight: 500; font-size: 0.82rem; color: var(--acero-mid); }
.plan__stand summary::after {
content: ""; width: 16px; height: 16px; flex: none; background: var(--marino);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform var(--dur) var(--ease-out);
}
.plan__stand[open] summary::after { transform: rotate(180deg); }
.plan__stand summary:hover span { color: var(--marino); }
.plan__stand ul { display: grid; gap: 3px; padding: 0 0 12px; font-size: var(--fs-small); color: var(--acero); }
.plan__stand li { display: flex; align-items: baseline; gap: 10px; }
.plan__stand li::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 1px; background: var(--turquesa-ink); transform: translateY(-2px); }
.plan__lista li { position: relative; padding: 7px 0 7px 26px; font-size: var(--fs-small); line-height: 1.45; border-bottom: 1px solid var(--linea); }
.plan__lista li:last-child { border-bottom: 0; }
.plan__lista li::before {
content: ""; position: absolute; left: 0; top: 9px; width: 17px; height: 17px; background: var(--turquesa-ink);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 24px 22px; border-top: 1px solid var(--linea); }
.link-arrow { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
/* ---- Tabla comparativa (auspicios) ---------------------------------------- */
/* La tablita que pedía Diego para comparar rápido, con las filas del brochure.
Bajo 720 px muestra un plan por vez con pestañas, como la tabla de Exporlog. */
.compara { margin-top: clamp(56px, 7vw, 96px); }
.compara .section-head { margin-bottom: 20px; }
.compara .h3 { color: var(--marino); }
.compara__tabs { display: none; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.compara__tabs button {
flex: none; min-height: 42px; padding: 0 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco-puro);
font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acero-mid);
}
.compara__tabs button[aria-pressed="true"] { background: var(--marino); border-color: var(--marino); color: var(--blanco-puro); }
.compara__wrap { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco-puro); overflow-x: auto; }
.compara table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-small); }
.compara thead td { width: 34%; }
.compara th, .compara td { padding: 12px 14px; border-bottom: 1px solid var(--linea); text-align: center; vertical-align: middle; }
.compara thead th, .compara thead td { position: relative; padding-top: 18px; background: var(--blanco); border-bottom: 2px solid var(--marino); }
.compara thead th { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 0.92rem; color: var(--marino); }
.compara__franja { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--tier); }
.compara tbody th { text-align: left; font-weight: 500; color: var(--acero); }
.compara tbody tr:last-child > * { border-bottom: 0; }
.compara td strong { color: var(--marino); font-weight: 700; }
.compara .si svg { width: 20px; height: 20px; margin: 0 auto; color: var(--turquesa-ink); }
.compara .no { color: var(--acero-mid); }
.compara__nota { margin-top: 14px; font-size: var(--fs-small); color: var(--acero-mid); }
.compara__nota a { color: var(--marino); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
.compara__tabs { display: flex; }
.compara tr > :nth-child(n+2) { display: none; }
.compara table[data-show="1"] tr > :nth-child(2), .compara table[data-show="2"] tr > :nth-child(3),
.compara table[data-show="3"] tr > :nth-child(4), .compara table[data-show="4"] tr > :nth-child(5),
.compara table[data-show="5"] tr > :nth-child(6) { display: table-cell; }
.compara thead td { width: 60%; }
}
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px 40px; max-width: 900px; }
.why li { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.why strong { color: var(--marino); }
/* ---- Historia: fotos como placas apiladas --------------------------------- */
.history { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 900px) { .history { grid-template-columns: 1fr; } }
/* ---- Ediciones anteriores: dos líneas de carga --------------------------- */
/* Las fotos pasan como contenedores en una playa: rectángulos planos, altura
pareja, sin marco y con el radio del sistema. La banda de flotación las encuadra arriba y
abajo; el turquesa aparece solo al señalar una. */
.marquee { margin-top: clamp(40px, 5vw, 72px); }
.marquee__head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; padding-bottom: 18px;
}
.marquee__rows {
display: grid; gap: 12px; padding: 12px 0;
overflow: hidden; overflow: clip; /* clip no crea contenedor de scroll */
}
.marquee__row { display: flex; gap: 12px; width: max-content; }
.marquee__set { display: flex; gap: 12px; }
.marquee__row--izq { animation: correr 76s linear infinite; }
.marquee__row--der { animation: correr 76s linear infinite reverse; }
/* el desplazamiento se detiene medio hueco antes del 50 % para caer justo
sobre el duplicado y que el salto sea invisible */
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
.marquee:hover .marquee__row,
.marquee:focus-within .marquee__row,
.marquee.is-paused .marquee__row { animation-play-state: paused; }
.marquee__item {
flex: none; display: block; padding: 0; border: 0;
width: clamp(200px, 22vw, 300px); aspect-ratio: 3 / 2;
background: var(--acero-tint); overflow: hidden; border-radius: var(--radio);
outline: 3px solid transparent; outline-offset: -3px;
transition: outline-color var(--dur) var(--ease-out);
}
.marquee__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter var(--dur) var(--ease-out); }
.marquee__item:hover, .marquee__item:focus-visible { outline-color: var(--turquesa); }
.marquee__item:hover img, .marquee__item:focus-visible img { filter: brightness(1.1); }
@media (max-width: 720px) { .marquee__item { width: clamp(150px, 44vw, 220px); } }
/* ---- Visor de fotos ------------------------------------------------------ */
.lightbox {
border: 0; padding: 0; background: transparent; color: var(--blanco-puro);
max-width: min(1100px, 92vw); max-height: 94vh; overflow: visible;
}
.lightbox::backdrop { background: rgba(7, 27, 69, 0.94); }
.lightbox__frame { margin: 0; background: var(--marino-deep); overflow: visible; border-radius: var(--radio); } /* visible: los controles se apoyan afuera del marco */
.lightbox__frame > img { border-radius: var(--radio) var(--radio) 0 0; }
.lightbox__frame > img { display: block; width: 100%; max-height: 76vh; object-fit: contain; background: var(--marino-deep); }
.lightbox__cap {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 16px 20px; border-top: 2px solid var(--blanco-puro);
}
.lightbox__cap .mono { color: var(--sobre-marino-2); }
.lightbox__nav, .lightbox__close {
position: absolute; z-index: 2; display: grid; place-items: center;
width: 52px; height: 52px;
background: var(--marino-deep); color: var(--blanco-puro);
border: 2px solid var(--blanco-puro); border-radius: var(--radio);
transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.lightbox__nav:hover, .lightbox__close:hover { background: var(--turquesa); color: var(--marino-deep); border-color: var(--turquesa); }
.lightbox__nav svg, .lightbox__close svg { width: 22px; height: 22px; }
.lightbox__nav--prev { left: -26px; top: calc(50% - 26px); }
.lightbox__nav--next { right: -26px; top: calc(50% - 26px); }
.lightbox__close { right: -26px; top: -26px; }
@media (max-width: 860px) {
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__close { right: 12px; top: 12px; }
}
/* ---- Noticias: tarjetas (ronda 3, pedido de Irene el 11/9) --------------- */
/* Fila de tres —foto, fecha y título— como en Exporlog, apiladas en móvil. La
tarjeta entera es el vínculo al portal. Sin extracto: Irene pidió "foto, título
y fecha", y el extracto de WordPress trae restos de maquetado. */
.news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 900px) { .news { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .news { grid-template-columns: minmax(0, 1fr); } }
.news-card {
display: flex; flex-direction: column; min-width: 0; overflow: hidden;
background: var(--blanco-puro); border: 1px solid var(--linea); border-radius: var(--radio);
transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.news-card:hover { border-color: var(--marino); transform: translateY(-3px); }
.news-card__foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--acero-tint); display: grid; place-items: center; }
.news-card__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.news-card:hover .news-card__foto img { transform: scale(1.04); }
.news-card__foto--logo { background: var(--blanco-puro); border-bottom: 1px solid var(--linea); }
.news-card__foto--logo img { width: 42%; height: auto; object-fit: contain; }
.news-card__body { display: grid; gap: 8px; padding: 16px 20px 20px; }
.news-card__fecha { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--turquesa-ink); }
.news-card__titulo { font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: var(--marino); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* text-wrap: pretty y no el balance global de h1–h4: balance con corte a 3 líneas angostaba el título a media tarjeta */
.news-card:hover .news-card__titulo { color: var(--turquesa-ink); }
@media (prefers-reduced-motion: reduce) { .news-card:hover, .news-card:hover .news-card__foto img { transform: none; } }
[hidden] { display: none !important; }
/* ---- Cierre: el agua ------------------------------------------------------ */
.final { text-align: left; }
.final__inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: end; }
.final .display { font-size: clamp(2rem, 4.4vw, 4rem); max-width: 21ch; color: var(--blanco-puro); }
.final__actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
@media (max-width: 860px) { .final__inner { grid-template-columns: 1fr; } .final__actions { justify-content: flex-start; } }
/* ---- Footer: el casco bajo el agua ----------------------------------------- */
/* 96 px abajo: al final del scroll el WhatsApp flotante tapaba el crédito */
.footer { background: var(--marino-deep); color: var(--sobre-marino-2); padding: 64px 0 96px; }
.footer__grid { display: grid; grid-template-columns: minmax(min(240px, 100%), 1.4fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 40px; }
@media (max-width: 720px) {
.footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.footer__brand { grid-column: 1 / -1; }
}
.footer__brand img { height: 56px; width: auto; }
.footer__brand p { margin-top: 20px; max-width: 40ch; font-size: var(--fs-small); }
.footer h3 { font-family: var(--f-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blanco-puro); margin-bottom: 16px; }
.footer__links li { padding: 6px 0; }
.footer__links a { transition: color var(--dur) var(--ease-out); }
.footer__links a:hover { color: var(--turquesa); }
.footer__contact { display: flex; flex-direction: column; gap: 8px; }
.footer__contact svg { width: 18px; height: 18px; flex: none; }
.footer__contact a { display: inline-flex; align-items: center; gap: 10px; }
.footer__bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--marino-tint); display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.03em; }
.footer__bottom a { text-decoration: underline; text-underline-offset: 4px; }
/* ---- Páginas interiores --------------------------------------------------- */
/* Sin padding inferior: la banda de flotación cierra la cabecera y el marino termina en ella */
.page-hero { background: var(--marino); color: var(--blanco-puro); padding-block: clamp(56px, 7vw, 96px) 0; }
.page-hero .display { max-width: 16ch; font-size: clamp(2rem, 4.4vw, 4rem); }
/* 21/9: el título de Programa pasó a "Sé parte del epicentro de la logística
portuaria, marítima y fluvial de América del Sur" (pedido de Irene). Tiene 86
caracteres contra los 72 del anterior y a 16ch caía en 7 líneas, con cortes en
"LOGÍSTICA" y "PORTUARIA," sueltas y la banda turquesa fuera de la primera
pantalla del cliente (fin del bloque en 775 de 792). A 20ch vuelve a 5 líneas,
la misma silueta que tenía la página antes, y el bloque termina en 641. */
.page-hero .display--ancho { max-width: 20ch; }
.page-hero .lede { margin-top: 24px; color: var(--sobre-marino-2); }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 32px; }
/* ---- Formularios ----------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; }
.on-marino .field label { color: var(--blanco-puro); }
.field label { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--marino); }
.field input, .field select, .field textarea {
font: inherit; color: var(--acero); background: var(--blanco-puro);
border: 1.5px solid var(--acero-mid); border-radius: var(--radio); padding: 14px 16px; min-height: 54px; width: 100%;
transition: border-color var(--dur) var(--ease-out);
}
.field textarea { min-height: 140px; resize: vertical; }
/* El select dibuja su propio chevron: el nativo cambiaba de navegador a navegador */
.field select {
appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--acero-mid); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--marino); outline: 3px solid var(--turquesa-ink); outline-offset: 0; }
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--error); }
.field__error { display: none; font-size: var(--fs-small); color: var(--error); }
.is-invalid + .field__error { display: block; }
.form__note { font-size: var(--fs-small); color: var(--acero-mid); max-width: 60ch; }
.form__feedback { display: none; padding: 20px 24px; border: 2px solid var(--turquesa-ink); border-radius: var(--radio); color: var(--turquesa-ink); }
.form__feedback.is-visible { display: block; }
.form__error { display: none; padding: 16px 20px; border: 2px solid var(--error); border-radius: var(--radio); color: var(--error); }
.form__error.is-visible { display: block; }
/* ---- Brochure: diálogo de descarga ---------------------------------------- */
/*