/* Portuaria Design System — tokens (exported from Claude Design) */
/* ============================================================
   Portuaria — Webfonts
   ------------------------------------------------------------
   SUBSTITUTION NOTE: The original PORTUARIA wordmark is a light,
   wide-tracked custom face of unknown origin. It is reproduced
   here with IBM Plex Sans (Light/Thin, tracked uppercase). The
   engineering/technical body + spec voice uses the IBM Plex
   family, which suits a precision-engineering firm. If you have
   the original brand fonts, drop them in and update these rules.
   ============================================================ */

/* IBM Plex Sans — primary UI + display (grotesque, technical) */

/* IBM Plex Mono — specifications, dimensions, load figures */
/* ============================================================
   Portuaria — Color System
   Derived from the corporate logo (steel/sky blue mark,
   graphite wordmark, cool grey ring) and the product imagery
   (white steel structures, Mediterranean sky & water).
   ============================================================ */
:root {
  /* ---- Brand core ---------------------------------------- */
  --portuaria-blue:        #6A9CCD;  /* logo mark fill — primary */
  --portuaria-blue-600:    #4E7FB0;  /* deeper steel — hover/press */
  --portuaria-blue-700:    #3C6693;  /* darkest steel */
  --portuaria-blue-300:    #9DC0E0;  /* light sky */
  --portuaria-blue-100:    #DCEAF5;  /* wash / tint surface */
  --portuaria-blue-050:    #EEF5FB;  /* faint wash */

  /* ---- Graphite / neutral (structure & type) ------------- */
  --graphite-900:          #1A1D21;  /* wordmark ink / headings */
  --graphite-700:          #3B4046;
  --graphite-500:          #6B7178;  /* logo ring grey */
  --graphite-400:          #8C9298;
  --graphite-300:          #B7BCC1;
  --graphite-200:          #D6DADE;
  --graphite-100:          #E9ECEF;
  --graphite-050:          #F4F6F8;  /* off-white panel */

  /* ---- White steel (product surfaces) -------------------- */
  --steel-white:           #FBFCFD;  /* structure white */
  --pure-white:            #FFFFFF;

  /* ---- Signal red (maritime signage accent) -------------- */
  /* Used sparingly: berth signage, safety marks, alerts.     */
  --signal-red:            #C1272D;
  --signal-red-600:        #9E1F24;

  /* ---- Semantic status ----------------------------------- */
  --status-success:        #2E7D57;
  --status-warning:        #C6841A;
  --status-danger:         #C1272D;
  --status-info:           #4E7FB0;

  /* ============ Semantic aliases ========================== */
  /* Text */
  --text-strong:           var(--graphite-900);
  --text-body:             var(--graphite-700);
  --text-muted:            var(--graphite-500);
  --text-faint:            var(--graphite-400);
  --text-on-brand:         var(--pure-white);
  --text-on-dark:          var(--steel-white);
  --text-link:             var(--portuaria-blue-600);

  /* Surfaces */
  --surface-page:          var(--pure-white);
  --surface-subtle:        var(--graphite-050);
  --surface-card:          var(--pure-white);
  --surface-wash:          var(--portuaria-blue-050);
  --surface-brand:         var(--portuaria-blue);
  --surface-brand-strong:  var(--portuaria-blue-700);
  --surface-dark:          var(--graphite-900);
  --surface-inverse:       #101418;

  /* Lines */
  --border-subtle:         var(--graphite-200);
  --border-default:        var(--graphite-300);
  --border-strong:         var(--graphite-500);
  --border-brand:          var(--portuaria-blue);

  /* Focus */
  --focus-ring:            var(--portuaria-blue-600);
}
/* ============================================================
   Portuaria — Typography
   IBM Plex Sans (UI + display) · IBM Plex Mono (specs/figures)
   Display treatment echoes the wordmark: light weight, wide
   letter-spacing, uppercase.
   ============================================================ */
:root {
  /* Families */
  --font-sans:   'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: var(--font-sans);

  /* Weights */
  --fw-thin:   300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:   700; /* @kind font */

  /* Type scale (px @ 1rem = 16px) */
  --fs-display: 3.75rem;  /* 60 — hero wordmark headings */
  --fs-h1:      2.75rem;  /* 44 */
  --fs-h2:      2rem;     /* 32 */
  --fs-h3:      1.5rem;   /* 24 */
  --fs-h4:      1.25rem;  /* 20 */
  --fs-lead:    1.1875rem;/* 19 — intro paragraphs */
  --fs-body:    1rem;     /* 16 */
  --fs-sm:      0.875rem; /* 14 */
  --fs-xs:      0.75rem;  /* 12 — eyebrows, labels */
  --fs-mono-sm: 0.8125rem;/* 13 — spec figures */

  /* Line heights */
  --lh-tight:   1.08; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-display: 0.14em; /* @kind font */
  --ls-eyebrow: 0.22em; /* @kind font */
  --ls-tight:   -0.01em; /* @kind font */
  --ls-normal:  0; /* @kind font */
}

/* --- Utility type classes (optional, semantic) ------------ */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-link);
}
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-strong);
}
.t-h1 { font-weight: var(--fw-semibold); font-size: var(--fs-h1); line-height: var(--lh-tight);  letter-spacing: var(--ls-tight); }
.t-h2 { font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-snug);   letter-spacing: var(--ls-tight); }
.t-h3 { font-weight: var(--fw-medium);   font-size: var(--fs-h3); line-height: var(--lh-snug); }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-body); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); }
.t-mono { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: 0; }
/* ============================================================
   Portuaria — Spacing & Layout
   8-px base grid. Generous, structured, engineering-precise.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: 24px;
  --section-y: 96px;   /* vertical rhythm between page sections */

  /* Radii — restrained, industrial. Small radii only. */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   5px;   /* default cards / inputs */
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;
}
/* ============================================================
   Portuaria — Effects: shadows, elevation, motion
   Cool, crisp, low-diffusion shadows (steel under bright sky).
   ============================================================ */
:root {
  /* Elevation — subtle, cool-tinted (never warm/black-heavy) */
  --shadow-xs: 0 1px 2px rgba(26, 29, 33, 0.06);
  --shadow-sm: 0 1px 3px rgba(26, 29, 33, 0.08), 0 1px 2px rgba(26, 29, 33, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 29, 33, 0.08), 0 2px 4px rgba(26, 29, 33, 0.05);
  --shadow-lg: 0 12px 28px rgba(26, 29, 33, 0.12), 0 4px 8px rgba(26, 29, 33, 0.06);
  --shadow-brand: 0 8px 24px rgba(78, 127, 176, 0.24);

  /* Ring / focus */
  --ring-focus: 0 0 0 3px rgba(78, 127, 176, 0.35);

  /* Motion — measured, mechanical. No bounce/overshoot. */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* Overlays */
  --scrim: rgba(16, 20, 24, 0.55);
  --scrim-brand: rgba(28, 52, 80, 0.55);
}

/* ============================================================
   Fix editor Elementor: mostrar el contenido en el lienzo
   (las animaciones de aparición se neutralizan en el editor,
   donde el JS de reveal no observa los bloques inyectados).
   ============================================================ */
body.elementor-editor-active [data-reveal],
body.elementor-editor-active .reveal-group > *,
.elementor-editor-active [data-reveal],
.elementor-editor-active .reveal-group > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* En el editor, el hero y franjas con alto de viewport se acotan para verse dentro del lienzo */
body.elementor-editor-active .hero { height: auto; min-height: 560px; }

/* ============================================================
   Fix: imágenes "cover" a pantalla completa de su tarjeta.
   Elementor aplica img{height:auto} con prioridad; al llevar las
   imágenes width/height (para CLS) se activaba aspect-ratio y se
   encogían. Forzamos que llenen el contenedor.
   ============================================================ */
.hero-slide img,
.prod img,
.proj img,
.post-img img,
.page-hero > .bg,
.cta-band > .bg,
.news > .bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* ============================================================
   Logotipo: conservar proporción. Los atributos width/height
   del <img> (para CLS) no deben fijar el ancho; el alto lo
   controla el CSS y el ancho es proporcional.
   ============================================================ */
.logo, .fc-left img, .mm-head img { width: auto !important; }

/* ============================================================
   Fix mega-menú: evitar que las columnas "revienten" y los
   ítems se salgan del recuadro (títulos largos).
   ============================================================ */
.dropdown-mega { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
.dropdown-mega .mega-link { min-width: 0; }
.mega-link .mt, .mega-link .md { white-space: normal; overflow-wrap: break-word; }
/* Desktop estrecho: el mega (600px, anclado con right:0) se salía por la izquierda.
   Se ancla a la izquierda del ítem y se acota el ancho al viewport disponible. */
@media (max-width: 1300px) {
	.dropdown-mega { right: auto !important; left: 0 !important; width: min(560px, calc(100vw - 320px)) !important; }
}
@media (max-width: 900px) {
	.dropdown-mega { grid-template-columns: 1fr !important; width: min(320px, calc(100vw - 40px)) !important; }
}

/* ============================================================
   Fix cabecera interiores: el hero debe llegar arriba del todo
   (sin padding-top heredado) para que el header transparente
   quede sobre el hero oscuro y el menú blanco sea visible.
   ============================================================ */
body { padding-top: 0 !important; }

/* ============================================================
   Paginación de entradas (blog / archivos): botones con estilo.
   ============================================================ */
.pagination .screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.pagination .nav-links { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border:1px solid var(--border-default); border-radius:var(--radius-md); font-weight:600; font-size:14px; color:var(--graphite-700); background:#fff; transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast); }
.page-numbers:hover { border-color:var(--portuaria-blue); color:var(--portuaria-blue-700); background:var(--surface-wash); }
.page-numbers.current { background:var(--portuaria-blue); color:#fff; border-color:var(--portuaria-blue); }
.page-numbers.dots { border:none; background:transparent; min-width:auto; }
.page-numbers.next, .page-numbers.prev { padding:0 18px; }

/* ============================================================
   Contenido legal / texto enriquecido (widget richtext).
   ============================================================ */
.legal-rich { counter-reset: legalsec; color: var(--text-body); }
.legal-rich > p:first-of-type { font-size: 1.08rem; line-height: 1.75; color: var(--text-strong); margin-bottom: 1.4rem; }
.legal-rich h2 {
  counter-increment: legalsec;
  display: flex; align-items: baseline; gap: .8rem;
  font-size: 1.28rem; font-weight: 600; color: var(--text-strong);
  letter-spacing: -.01em; line-height: 1.3;
  margin: 2.6rem 0 1.1rem; padding-top: 1.6rem;
  border-top: 1px solid var(--border-subtle);
}
.legal-rich h2::before {
  content: counter(legalsec, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  color: var(--portuaria-blue-600); flex: 0 0 auto; padding-top: .18rem;
}
.legal-rich h3 { font-size: 1.05rem; font-weight: 600; color: var(--text-strong); margin: 1.6rem 0 .6rem; }
.legal-rich p { font-size: 1rem; line-height: 1.72; color: var(--text-body); margin: 0 0 1.05rem; }
.legal-rich ul { list-style: none; padding-left: 0; margin: .2rem 0 1.3rem; }
.legal-rich li { position: relative; padding-left: 1.5em; margin-bottom: .55rem; line-height: 1.62; color: var(--text-body); }
.legal-rich li::before { content: ""; position: absolute; left: .25em; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--portuaria-blue-300); }
.legal-rich a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.legal-rich a:hover { color: var(--portuaria-blue-700); }
.legal-rich strong { color: var(--text-strong); font-weight: 600; }
.legal-rich em { color: var(--text-muted); }

/* Ficha de datos identificativos (Etiqueta: valor) */
.legal-data { margin: .4rem 0 1.6rem; padding: 22px 26px; background: var(--surface-wash); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); border-left: 3px solid var(--portuaria-blue-600); }
.legal-data .row { display: grid; grid-template-columns: 210px 1fr; gap: 6px 20px; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.legal-data .row:first-child { border-top: 0; padding-top: 0; }
.legal-data .k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); align-self: center; }
.legal-data .v { font-size: 15px; color: var(--text-strong); align-self: center; }
.legal-data .v a { color: var(--text-link); }
@media (max-width: 560px) { .legal-data .row { grid-template-columns: 1fr; gap: 2px; } .legal-data .k { align-self: start; } }

/* Banner de cookies acorde a la marca */
#cookie-notice { font-family: var(--font-sans) !important; background: #1b3a59 !important; }
#cookie-notice .cookie-notice-container { padding: 16px 20px !important; }
#cookie-notice .cn-button { border-radius: var(--radius-md) !important; font-weight: 600 !important; padding: 10px 22px !important; margin: 4px 6px !important; }
#cookie-notice a.cn-privacy-policy-link { color: var(--portuaria-blue-300) !important; text-decoration: underline; }

/* ============================================================
   Banner de cookies como TARJETA abajo-izquierda (no barra
   completa) para no tapar el botón flotante de la derecha.
   ============================================================ */
#cookie-notice {
  left: 24px !important;
  right: auto !important;
  bottom: 24px !important;
  width: min(420px, calc(100vw - 48px)) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 40px rgba(16,36,58,.38) !important;
  border: 1px solid rgba(255,255,255,.08);
}
#cookie-notice .cookie-notice-container {
  display: block !important;
  text-align: left !important;
  padding: 18px 20px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}
#cookie-notice .cn-button {
  display: inline-block !important;
  margin: 12px 8px 0 0 !important;
  font-size: 13px !important;
  padding: 9px 18px !important;
}
@media (max-width: 560px) {
  #cookie-notice { left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; }
}
.legal-rich .legal-defs li { margin-bottom: .7rem; }
.legal-rich .legal-defs li strong { color: var(--text-strong); }