/* =========================================================
   ArqEx Theme 2026 — main.css
   Basado 1:1 en index.html original
   ========================================================= */
    :root{
      --bg: #0b0b0c;
      --fg: #f4f4f5;
      --muted: rgba(244,244,245,.72);
      --line: rgba(244,244,245,.12);
      --glass: rgba(10,10,12,.62);
      --glass-2: rgba(10,10,12,.78);

      --light-1: #f4f4f5;
      --light-2: #ececee;
      --dark: #0b0b0c;
      --dark-muted: rgba(11,11,12,.72);
      --light-line: rgba(11,11,12,.12);

      --fx-radius: 0px;
    }

    html,body{height:100%;}
    body{
      /*background:
        radial-gradient(1200px 600px at 20% 0%, rgba(255,255,255,.06), transparent 55%),
        radial-gradient(900px 500px at 90% 20%, rgba(255,255,255,.05), transparent 55%),
        var(--bg);
      color: var(--fg);*/
      font-family: "Josefin Slab", ui-serif, Georgia, serif;
      overflow-x:hidden;
      padding-bottom: 86px; /* espacio para navbar inferior */
    }

    /* Forum para headings */
    h1,h2,h3,h4,h5,h6,
    .display-xxl,
    .m-card .title,
    .fx-title{
      font-family: "Forum", ui-serif, Georgia, serif;
      font-weight: 400;
      letter-spacing: .02em;
    }

    /* Oversize */
    .display-xxl{
      line-height: 1.03;
      font-size: clamp(2.4rem, 3.6vw, 4.2rem);
      margin: 0 0 .4rem 0;
    }
    .lead-xxl{
      font-size: clamp(1.15rem, 1.6vw, 1.6rem);
      color: var(--muted);
      line-height: 1.35;
    }
    .kicker{
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: .85rem;
      color: rgba(244,244,245,.62);
      font-family: "Josefin Slab", ui-serif, Georgia, serif;
    }

    /* Sin redondeados */
    *{ border-radius: 0 !important; }

    /* Secciones: sin borde superior por defecto */
    section{ border: 0 !important; }

    /* Utilidades tipográficas del prototipo (reemplaza estilos inline previos) */
    .section-title-xxl{ font-size: clamp(2.2rem, 3.2vw, 3.4rem); }
    .section-title-xl{ font-size: clamp(2.1rem, 3vw, 3.1rem); }
    .measure-60ch{ max-width: 60ch; }

    /* ============ NAVBARS (TOP + BOTTOM) ============ */
    .nav-glass{
      background: var(--glass);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .nav-top{
      border-bottom: 1px solid var(--line);
      transform: translateY(0);
      opacity: 1;
      transition: transform .28s ease, opacity .28s ease;
    }
    .nav-bottom{
      border-top: 1px solid var(--line);
      transform: translateY(105%);
      opacity: 0;
      transition: transform .28s ease, opacity .28s ease;
    }
    body.is-scrolled .nav-top{
      transform: translateY(-110%);
      opacity: 0;
      pointer-events: none;
    }
    body.is-scrolled .nav-bottom{
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .navbar .navbar-brand{
      display:flex; align-items:center; gap:.75rem;
      color: var(--fg);
      text-decoration:none;
      white-space: nowrap;
    }
    .brand-mark{
      width: 34px; height: 34px;
      display:inline-grid; place-items:center;
      color: var(--fg);
      opacity: .95;
    }
    .brand-mark svg{width:100%; height:100%; display:block;}
    .brand-mark img{width:100%; height:100%; display:block;}

    .btn-hamb{
      border: 1px solid rgba(244,244,245,.18);
      color: var(--fg);
      padding: .55rem .85rem;
      background: rgba(255,255,255,.03);
    }
    .btn-hamb:hover{ background: rgba(255,255,255,.06); }

    /* Offcanvas */
    .menu-logo{
      max-width: 100px;
    }
    .offcanvas{
      background: var(--glass-2);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-left: 1px solid var(--line);
      color: var(--fg);
    }
    .offcanvas .nav-link{
      color: rgba(244,244,245,.86);
      font-size: 1.35rem;
      padding: .6rem 0;
      border-bottom: 1px solid rgba(244,244,245,.10);
    }
    .offcanvas .nav-link:hover{color: var(--fg);}
    .offcanvas .small{ color: rgba(244,244,245,.62) !important; }

    /* Botones sin pill */
    .btn{ border-radius: 0 !important; }
    .btn-ghost{
      border: 1px solid rgba(244,244,245,.22);
      color: var(--fg);
      background: rgba(255,255,255,.03);
      padding: .85rem 1.1rem;
      font-size: 1.1rem;
    }
    .btn-ghost:hover{ background: rgba(255,255,255,.07); color: var(--fg); }

    .btn-solid{
      border: 1px solid rgba(244,244,245,.22);
      color: #0b0b0c;
      background: rgba(244,244,245,.92);
      padding: .85rem 1.1rem;
      font-size: 1.1rem;
    }
    .btn-solid:hover{ background: rgba(244,244,245,.98); color:#0b0b0c; }

    .btn-solid-dark{
      border: 1px solid rgba(244,244,245,.22);
      color: rgba(244,244,245,.92);
      background: rgba(11,11,12,.35);
      padding: .75rem 1.05rem;
      font-size: 1.05rem;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: background .25s ease, transform .25s ease, opacity .25s ease;
    }
    .btn-solid-dark:hover{
      background: rgba(11,11,12,.55);
      transform: translateY(-1px);
      color: rgba(244,244,245,.98);
    }

    /* ============ SECCIÓN 1 FULL BLEED ============ */
    #blog-folio{ padding: 0; margin: 0; }

    .masonry-wrap{
      border: 0;
      overflow:hidden;
      background: transparent;
    }
    .mx-grid{ margin:0; padding:0; }
    .mx-sizer, .mx-item{ width: 100%; }
    @media (min-width: 576px){
      .mx-sizer, .mx-item{ width: 50%; }
    }
    @media (min-width: 992px){
      .mx-sizer, .mx-item{ width: 33.3333%; }
      .mx-item.card-0{ width: 66.6666%; }
    }
    .mx-item{ margin:0 !important; padding:0 !important; }

    .m-card{
      border: 0;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      overflow:hidden;
      background: rgba(255,255,255,.015);
      height: 100%;
    }
    .mx-item:nth-child(3n) .m-card{ border-right: 0; }
    @media (max-width: 991.98px){
      .mx-item:nth-child(2n) .m-card{ border-right: 0; }
    }
    @media (max-width: 575.98px){
      .m-card{ border-right: 0; }
    }

    .m-card .pad{ padding: 1.55rem 1.55rem 1.4rem; }
    .m-card .meta{
      color: rgba(244,244,245,.62);
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: .78rem;
      font-family: "Josefin Slab", ui-serif, Georgia, serif;
    }
    .m-card .title{
      font-size: clamp(1.55rem, 1.9vw, 2.1rem);
      line-height: 1.08;
      margin: .6rem 0 .75rem;
    }
    .m-card p{
      color: rgba(244,244,245,.72);
      font-size: 1.2rem;
      line-height: 1.35;
      margin: 0;
    }

    .m-card--image .media{ aspect-ratio: 4/3; background: #111; position: relative; }
    .m-card--image img{
      width:100%; height:100%;
      object-fit:cover; display:block;
      filter: contrast(1.05) saturate(.95);
    }

    .m-card--split{ display:grid; grid-template-columns: 1.1fr .9fr; min-height: 280px; }
    .m-card--split .media{ border-left: 1px solid var(--line); background:#111; }
    .m-card--split img{ width:100%; height:100%; object-fit:cover; display:block; }

    .m-card--quote .pad{ padding: 1.75rem 1.65rem 1.5rem; }
    blockquote{
      margin: 0;
      font-family: "Forum", ui-serif, Georgia, serif;
      font-size: clamp(1.55rem, 1.9vw, 2.2rem);
      line-height: 1.08;
      color: rgba(244,244,245,.92);
    }
    .quote-by{
      margin-top: 1.1rem;
      color: rgba(244,244,245,.62);
      letter-spacing:.14em;
      text-transform:uppercase;
      font-size:.8rem;
      font-family: "Josefin Slab", ui-serif, Georgia, serif;
    }

    .m-card--intro{
      background:
        radial-gradient(700px 320px at 20% 10%, rgba(255,255,255,.08), transparent 60%),
        rgba(255,255,255,.02);
      min-height: 360px;
    }

    /* Sections light */
    .section-light{ color: var(--dark); }
    .section-light .lead-xxl{ color: var(--dark-muted); }
    .section-light .kicker{ color: rgba(11,11,12,.55); }

    /* ============ SECCIÓN 2 (LIGHT-1) ============ */
    #showcase{
      background: var(--light-1);
      border: 0;
      background-image: url(../media/animated.svg);
      background-size: cover;
      background-position: center;
    }

    /* ============ SECCIÓN 3 (LIGHT-2) ============ */
    #studio{
      background: var(--light-2);
      border: 0;
    }

    /* ============ SECCIÓN 2: MASONRY LINKS (ASIMÉTRICOS, OSCUROS, SIN BORDES) ============ */
    .fxm-wrap{
      border: 0;
      overflow: visible;
      background: transparent;
    }

    .fxm-grid{ margin:0; padding:0; }
    .fxm-sizer, .fxm-item{ width:100%; }
    @media (min-width: 576px){
      .fxm-sizer, .fxm-item{ width:50%; }
    }
    @media (min-width: 992px){
      .fxm-sizer, .fxm-item{ width:33.3333%; }
      .fxm-item.is-wide{ width:66.6666%; }
    }

    .fxm-item{ margin:0 !important; padding:0 !important; }

    /* Card oscura: bg image + overlay dark, texto claro, contenido abajo-izquierda */
    .fx-card{
      display:block;
      position: relative;
      min-height: 320px;
      text-decoration:none;
      color: rgba(244,244,245,.92);
      overflow:hidden;
      background: rgba(11,11,12,.18);
      transform: translateY(0);
      transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
      box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    .fxm-item.is-tall .fx-card{ min-height: 420px; }
    .fxm-item.is-hero .fx-card{ min-height: 360px; }

    /* Fondo por CSS variable seteada por JS (sin inline styles) */
    .fx-card::before{
      content:"";
      position:absolute;
      inset:0;
      background-image: var(--bgimg);
      background-size: cover;
      background-position: center;
      filter: contrast(1.05) saturate(.95);
      transform: scale(1.03);
      transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s cubic-bezier(.2,.8,.2,1);
      z-index: 0;
    }

    /* Overlay oscuro + gradiente para lectura bottom-left */
    .fx-card::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg,
          rgba(11,11,12,.35) 0%,
          rgba(11,11,12,.55) 35%,
          rgba(11,11,12,.82) 100%);
      transition: opacity .35s ease;
      opacity: .92;
      z-index: 1;
    }

    /* Shine sutil (sobre overlay) */
    .fx-card .shine{
      position:absolute;
      inset:-40% -60%;
      background: linear-gradient(65deg, transparent 45%, rgba(244,244,245,.22) 50%, transparent 55%);
      transform: translateX(-30%) translateY(-10%);
      opacity: 0;
      transition: opacity .25s ease, transform .85s cubic-bezier(.2,.8,.2,1);
      z-index: 2;
      pointer-events:none;
      mix-blend-mode: screen;
    }

    /* Contenido: abajo-izquierda */
    .fx-card .pad{
      position: relative;
      z-index: 3;
      padding: 1.55rem 1.55rem 1.35rem;
      height: 100%;
      display:flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: .55rem;
    }

    .fx-meta{
      color: rgba(244,244,245,.68);
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: .78rem;
      font-family: "Josefin Slab", ui-serif, Georgia, serif;
    }
    .fx-title{
      font-size: clamp(1.65rem, 2.0vw, 2.2rem);
      line-height: 1.06;
      margin: 0;
      color: rgba(244,244,245,.94);
    }

    /* CTA: aparece on hover/focus */
    .fx-actions{
      display:flex;
      align-items:center;
      gap:.75rem;
      padding-top: .85rem;
    }
    .fx-actions .bar{
      height:1px;
      width: 44px;
      background: rgba(244,244,245,.28);
      display:block;
    }
    .fx-actions .btn-solid-dark{
      opacity: 0;
      transform: translateY(6px);
      pointer-events:none;
    }

    /* Interacción */
    @media (hover:hover) and (pointer:fine){
      .fx-card:hover{
        transform: translateY(-4px);
        box-shadow: 0 18px 45px rgba(0,0,0,.28);
      }
      .fx-card:hover::before{
        transform: scale(1.10);
        filter: contrast(1.08) saturate(1.0);
      }
      .fx-card:hover::after{ opacity: .86; }
      .fx-card:hover .shine{
        opacity: .85;
        transform: translateX(14%) translateY(12%);
      }
      .fx-card:hover .btn-solid-dark{
        opacity: 1;
        transform: translateY(0);
        pointer-events:auto;
      }
    }

    /* Focus visible (teclado) + mostrar botón */
    .fx-card:focus-visible{
      outline: 2px solid rgba(244,244,245,.55);
      outline-offset: 3px;
    }
    .fx-card:focus-visible .btn-solid-dark,
    .fx-card:focus-within .btn-solid-dark{
      opacity: 1;
      transform: translateY(0);
      pointer-events:auto;
    }

    /* Card-0 (intro) — sin link, sin imagen */
    .fx-intro{
      background: transparent;
      min-height: 360px;
      display:flex;
      align-items: stretch;
    }
    .fx-intro .pad{
      padding: 3rem;
    }

    /* ============ US BOX ============ */
    .us-box{
      border: 1px solid var(--light-line);
      padding: clamp(1.4rem, 3vw, 2.2rem);
      background: rgba(255,255,255,.5);
    }
    .us-box li{
      font-size: clamp(1.15rem, 1.6vw, 1.55rem);
      color: rgba(11,11,12,.72);
    }

      /* ============ SINGLE ============ */
.redes-sociales ul {
	display: block !important;
	text-align: center !important;
	margin: 0 auto;
	padding: unset;
}
.redes-sociales ul li {
	margin: 0px 10px;
	display: contents;
}