/* ============================================
     DESIGN TOKENS OFICIALES — Sistema Tequina Wave
     Paleta extraída directamente del logotipo oficial
     (isotipo triángulo + wordmark). Tinta Tequina es
     el único tono que no proviene del logo (el logo no
     define un color de texto/fondo oscuro); se definió
     como un ink cálido que armoniza con naranja y arena.
     ============================================ */
  :root{
    /* — Color primario (del logo) — */
    --naranja:      #FF5C00;  /* Naranja Tequina — isotipo, tono exacto del triángulo */
    --naranja-dark: #CC4900;  /* estado hover/activo de naranja */

    /* — Color secundario (del logo) — */
    --arena:        #EEDFBE;  /* Arena Tequina — tono exacto del wordmark */
    --arena-dark:   #DCC79B;  /* variante más profunda de arena, para bordes/hover sobre arena */

    /* — Color de apoyo (no viene del logo) — */
    --tinta:        #1E1B16;  /* Tinta Tequina — ink cálido, texto principal y fondos oscuros */
    --tinta-2:      #34302A;  /* variante más clara de tinta, para superficies oscuras secundarias */

    --white:        #FFFFFF;

    /* — Texto derivado de Tinta — */
    --ink-muted:    rgba(30,27,22,0.66);
    --ink-faint:    rgba(30,27,22,0.42);
    --line:         rgba(30,27,22,0.14);
    --line-on-dark: rgba(238,223,190,0.18);

    /* — Tipografía — */
    --font-display: 'Newsreader', Georgia, serif;
    --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

    /* — Radios de borde — */
    --radius-sm:   2px;   /* botones, inputs, chips */
    --radius-md:   4px;   /* tarjetas, banners CTA */
    --radius-full: 50%;   /* avatares placeholder */

    /* — Sombras (uso mínimo, institucional) — */
    --shadow-sm: 0 1px 2px rgba(30,27,22,0.06), 0 2px 8px rgba(30,27,22,0.05);
    --shadow-md: 0 8px 24px rgba(30,27,22,0.12);

    /* — Espaciado (escala base 8px) — */
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  40px;
    --space-xl:  64px;
    --space-2xl: 96px;

    --max-w: 1180px;
    --pad: clamp(24px, 5vw, 64px);

    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--tinta);
    background:var(--white);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:500;
    line-height:1.1;
    margin:0;
    color:var(--tinta);
  }

  p{ margin:0; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; margin:0; padding:0; }
  button{ font-family:inherit; cursor:pointer; }
  img,svg{ display:block; max-width:100%; }

  .container{ max-width:var(--max-w); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--naranja-dark);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:1px;
    background:var(--naranja);
    display:inline-block;
  }
  .eyebrow.on-dark{ color:var(--arena); }
  .eyebrow.on-dark::before{ background:var(--naranja); }

  .skip-link{
    position:absolute; left:-999px; top:0;
    background:var(--tinta); color:var(--white);
    padding:12px 18px; z-index:200; font-family:var(--font-body);
  }
  .skip-link:focus{ left:12px; top:12px; }

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--naranja);
    outline-offset:3px;
  }

  /* ============================================
     HEADER / NAV
     ============================================ */
  .site-header{
    position:sticky; top:0; z-index:100;
    background:var(--tinta);
    box-shadow:var(--shadow-sm);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:18px; padding-bottom:18px;
  }
  .brand{ display:flex; align-items:center; }
  .brand-logo{ height:26px; width:auto; display:block; }

  .nav-links{ display:flex; align-items:center; gap:34px; }
  .nav-links a{
    font-size:0.86rem; font-weight:500; letter-spacing:0.02em;
    color:rgba(238,223,190,0.75);
    padding-bottom:4px;
    border-bottom:1px solid transparent;
    transition:color .2s var(--ease), border-color .2s var(--ease);
  }
  .nav-links a:hover{ color:var(--arena); }
  .nav-links a[aria-current="page"]{
    color:var(--white);
    border-bottom-color:var(--naranja);
  }
  .nav-cta{
    background:var(--naranja); color:var(--white) !important;
    padding:10px 20px; border-radius:var(--radius-sm);
    border-bottom:none !important;
    transition:background .2s var(--ease);
  }
  .nav-cta:hover{ background:var(--naranja-dark); color:var(--white) !important; }

  .lang-switch{
    display:flex; align-items:center; gap:6px;
    font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.03em;
    padding-left:16px; border-left:1px solid var(--line-on-dark);
  }
  .lang-switch a{
    color:rgba(238,223,190,0.55); border-bottom:none; padding-bottom:0;
  }
  .lang-switch a:hover{ color:var(--arena); }
  .lang-switch a[aria-current="true"]{ color:var(--white); font-weight:600; }
  .lang-switch span{ color:rgba(238,223,190,0.3); }

  .nav-toggle{
    display:none; background:none; border:none; padding:8px;
    flex-direction:column; gap:5px;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--arena); display:block; }

  @media (max-width:860px){
    .nav-toggle{ display:flex; }
    .nav-links{
      position:fixed; inset:0 0 0 auto; top:63px;
      width:min(320px, 82vw); height:calc(100vh - 63px);
      background:var(--tinta);
      flex-direction:column; align-items:flex-start;
      padding:36px 28px; gap:26px;
      border-left:1px solid var(--line-on-dark);
      box-shadow:var(--shadow-md);
      transform:translateX(100%);
      transition:transform .32s var(--ease);
    }
    .nav-links.is-open{ transform:translateX(0); }
    .nav-links a{ font-size:1rem; }
    .nav-cta{ margin-top:6px; }
    .lang-switch{
      padding-left:0; border-left:none;
      margin-top:4px; padding-top:20px; border-top:1px solid var(--line-on-dark);
      width:100%; font-size:0.85rem;
    }
  }

  /* ============================================
     BUTTONS
     ============================================ */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-body); font-weight:600; font-size:0.92rem;
    padding:14px 26px; border-radius:var(--radius-sm); border:1px solid transparent;
    transition:all .2s var(--ease);
  }
  .btn-primary{ background:var(--naranja); color:var(--white); }
  .btn-primary:hover{ background:var(--naranja-dark); }
  .btn-outline{ background:transparent; color:var(--tinta); border-color:var(--tinta); }
  .btn-outline:hover{ background:var(--tinta); color:var(--white); }
  .btn-outline.on-dark{ color:var(--arena); border-color:var(--line-on-dark); }
  .btn-outline.on-dark:hover{ background:var(--arena); color:var(--tinta); }

  /* ============================================
     PAGE LOAD
     ============================================ */
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  main{ animation:fadeIn .4s var(--ease); }

  section{ padding-top:96px; padding-bottom:96px; }
  @media (max-width:700px){ section{ padding-top:64px; padding-bottom:64px; } }

  .section-head{ max-width:680px; margin-bottom:48px; }
  .section-head h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); margin-top:14px; }
  .section-head p{ margin-top:16px; color:var(--ink-muted); font-size:1.02rem; }

  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.is-visible{ opacity:1; transform:none; }

  /* ============================================
     WAVE / CONTOUR MOTIF (signature element)
     ============================================ */
  .wave-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
  .wave-field svg{ width:100%; height:100%; }
  .wave-divider{ width:100%; height:auto; display:block; }

  /* ============================================
     HERO
     ============================================ */
  .hero{
    position:relative;
    background:var(--arena);
    padding-top:120px; padding-bottom:110px;
    overflow:hidden;
  }
  .hero-inner{ position:relative; z-index:2; max-width:760px; }
  .hero h1{ font-size:clamp(2.4rem, 5vw, 4rem); margin-top:20px; }
  .hero p.lead{ margin-top:24px; font-size:1.15rem; color:var(--ink-muted); max-width:640px; }

  /* Institutional statement — quiet, editorial pull-quote (e.g. company vision) */
  .institutional-statement{
    margin:28px 0 0; padding-left:22px; border-left:2px solid var(--naranja);
    font-family:var(--font-display); font-style:italic; font-size:1.1rem;
    color:var(--tinta); max-width:640px;
  }
  .hero-ctas{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }

  /* Editorial full-width photo — no crop, no overlay, natural proportions */
  .editorial-photo{ display:block; width:100%; max-width:760px; height:auto; margin:48px auto 0; }

  /* ============================================
     ROW LIST (capabilities-style editorial rows)
     ============================================ */
  .row-list{ border-top:1px solid var(--line); }
  .row-item{
    display:grid; grid-template-columns:120px 1fr; gap:32px;
    padding:30px 0; border-bottom:1px solid var(--line);
  }
  .row-item .row-code{ font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-faint); letter-spacing:0.06em; padding-top:4px; }
  .row-item h3{ font-size:1.2rem; font-weight:500; }
  .row-item p{ margin-top:8px; color:var(--ink-muted); font-size:0.98rem; max-width:640px; }
  @media (max-width:640px){
    .row-item{ grid-template-columns:1fr; gap:8px; }
  }

  /* ============================================
     GRID / CARDS
     ============================================ */
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .grid-3 .cell{ background:var(--white); padding:28px; }
  @media (max-width:760px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:460px){ .grid-3{ grid-template-columns:1fr; } }
  .cell .cell-label{ font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-faint); }
  .cell h4{ font-size:1.02rem; margin-top:10px; font-weight:500; }

  /* ============================================
     CTA BANNER (reusable)
     ============================================ */
  .cta-banner{
    position:relative;
    background:var(--tinta); color:var(--arena);
    border-radius:var(--radius-md); overflow:hidden;
    padding:64px var(--pad);
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
  .cta-banner h2{ color:var(--white); font-size:clamp(1.5rem,3vw,2.1rem); max-width:460px; }
  .cta-banner .cta-actions{ display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:2; }
  .cta-banner-content{ position:relative; z-index:2; }

  /* ============================================
     FOOTER
     ============================================ */
  .site-footer{ background:var(--tinta); color:var(--arena); padding-top:72px; padding-bottom:72px; }
  @media (max-width:600px){ .site-footer{ padding-bottom:0; } }
  .footer-grid{
    display:grid; grid-template-columns:1.8fr 0.85fr 1fr 1fr; gap:40px;
    padding-bottom:48px; border-bottom:1px solid var(--line-on-dark);
  }
  @media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
  .footer-brand{ font-family:var(--font-mono); font-size:0.95rem; letter-spacing:0.04em; color:var(--white); }
  .footer-logo{ height:32px; width:auto; }
  @media (max-width:600px){ .footer-logo{ display:none; } }
  .footer-brand p{ margin-top:14px; color:rgba(238,223,190,0.68); font-size:0.92rem; max-width:280px; }
  .footer-col h5{
    font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:rgba(238,223,190,0.55); margin-bottom:16px; font-weight:500;
  }
  .footer-col ul li{ margin-bottom:10px; }
  .footer-col a{ font-size:0.92rem; color:rgba(238,223,190,0.85); transition:color .2s; }
  .footer-col a:hover{ color:var(--naranja); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    padding:24px 0; font-size:0.8rem; color:rgba(238,223,190,0.5);
  }

  /* ============================================
     QUIÉNES SOMOS — specific blocks
     ============================================ */
  .split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  @media (max-width:760px){ .split{ grid-template-columns:1fr; gap:36px; } }
  .somos-no-somos{ padding:28px 0; border-top:1px solid var(--line); }
  .somos-no-somos h4{ font-size:0.95rem; font-weight:600; margin-bottom:14px; }
  .somos-no-somos ul li{ padding:8px 0; color:var(--ink-muted); font-size:0.96rem; border-bottom:1px dashed var(--line); }

  .principles{
    display:grid; grid-template-columns:repeat(2,1fr);
    column-gap:64px; row-gap:0; margin-top:16px;
  }
  .principles .cell{
    background:none; padding:36px 0; border-top:1px solid var(--line);
  }
  .principles .cell:nth-child(even){ padding-left:56px; border-left:1px solid var(--line); }
  .principles .cell-number{
    display:block; font-family:var(--font-mono); font-size:0.82rem; font-weight:600;
    color:var(--naranja); letter-spacing:0.05em; margin-bottom:12px;
  }
  .principles .cell-label{
    font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-faint);
    text-transform:uppercase; letter-spacing:0.06em;
  }
  .principles .cell h4{ font-size:1.08rem; margin-top:10px; font-weight:500; max-width:380px; }
  @media (max-width:640px){
    .principles{ grid-template-columns:1fr; column-gap:0; }
    .principles .cell{ padding:28px 0; }
    .principles .cell:nth-child(even){ padding-left:0; border-left:none; }
  }

  /* Team */
  .team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px; }
  @media (max-width:820px){ .team-grid{ grid-template-columns:1fr; } }
  .team-card{ border:1px solid var(--line); padding:28px; background:var(--white); }
  .avatar-placeholder{
    width:56px; height:56px; border-radius:var(--radius-full);
    background:var(--tinta); color:var(--arena);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:0.95rem; letter-spacing:0.02em;
    margin-bottom:20px;
  }
  .team-card h3{ font-size:1.08rem; font-weight:600; font-family:var(--font-body); }
  .team-card .role{ font-family:var(--font-mono); font-size:0.76rem; color:var(--naranja-dark); letter-spacing:0.02em; margin-top:6px; display:block; }
  .team-card p.desc{ margin-top:14px; color:var(--ink-muted); font-size:0.92rem; }

  .multidisc-block{
    margin-top:40px; padding:32px; background:var(--arena);
    border-left:3px solid var(--naranja);
  }
  .multidisc-block h4{ font-size:1rem; font-weight:600; }
  .multidisc-block p{ margin-top:10px; color:var(--ink-muted); font-size:0.96rem; max-width:640px; }

  /* ============================================
     CAPACIDADES — detail blocks
     ============================================ */
  .cap-block{ border-top:1px solid var(--line); padding:44px 0; display:grid; grid-template-columns:280px 1fr; gap:40px; }
  @media (max-width:760px){ .cap-block{ grid-template-columns:1fr; gap:14px; } }
  .cap-block .cap-code{ font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-faint); }
  .cap-block h3{ font-size:1.4rem; margin-top:8px; }
  .cap-block .cap-body p{ color:var(--ink-muted); font-size:1rem; max-width:620px; }

  /* ============================================
     CASOS DE ÉXITO
     ============================================ */
  .case-card{
    border:1px solid var(--line); padding:36px; margin-top:0;
  }
  .case-card + .case-card{ border-top:none; }
  .case-card .case-tag{ font-family:var(--font-mono); font-size:0.72rem; color:var(--naranja-dark); letter-spacing:0.08em; text-transform:uppercase; }
  .case-card h3{ font-size:1.35rem; margin-top:12px; }
  .case-card .case-meta{ font-size:0.86rem; color:var(--ink-faint); margin-top:8px; font-family:var(--font-mono); }
  .case-card p.case-desc{ margin-top:18px; color:var(--ink-muted); font-size:1rem; max-width:680px; }
  .case-card.placeholder{
    border-style:dashed; display:flex; align-items:center; justify-content:center;
    min-height:160px; color:var(--ink-faint); text-align:center;
  }
  .case-card.placeholder span{ font-family:var(--font-mono); font-size:0.85rem; }

  /* ============================================
     CONVERSEMOS — form
     ============================================ */
  .form-wrap{ display:grid; grid-template-columns:1fr 1.3fr; gap:64px; }
  @media (max-width:900px){ .form-wrap{ grid-template-columns:1fr; gap:40px; } }
  .contact-info h3{ font-size:1.1rem; font-weight:600; margin-top:8px; }
  .contact-line{ display:block; margin-top:22px; }
  .contact-line .label{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.08em; }
  .contact-line a, .contact-line span.value{ display:block; margin-top:6px; font-size:1rem; }
  .contact-line a{ color:var(--tinta); border-bottom:1px solid var(--line); padding-bottom:2px; }
  .contact-line a:hover{ color:var(--naranja-dark); border-color:var(--naranja-dark); }

  .field-group{ margin-bottom:22px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
  label{ display:block; font-size:0.82rem; font-weight:500; margin-bottom:8px; color:var(--tinta); }
  label .req{ color:var(--naranja-dark); }
  input, select, textarea{
    width:100%; font-family:var(--font-body); font-size:0.96rem; color:var(--tinta);
    padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white);
    transition:border-color .2s var(--ease);
  }
  input:focus, select:focus, textarea:focus{ border-color:var(--naranja); outline:none; }
  textarea{ resize:vertical; min-height:120px; }
  fieldset{ border:none; padding:0; margin:0 0 22px 0; }
  legend{ font-size:0.82rem; font-weight:500; margin-bottom:10px; padding:0; }

  .form-success{ display:none; padding:40px; border:1px solid var(--line); background:var(--arena); }
  .form-success.is-visible{ display:block; }
  .form-success h3{ font-size:1.15rem; }
  .form-success p{ margin-top:10px; color:var(--ink-muted); }

  /* misc */
  .mt-64{ margin-top:64px; }
  .divider-space{ height:1px; background:var(--line); margin:80px 0; }
  .center-note{ text-align:center; color:var(--ink-faint); font-size:0.85rem; font-family:var(--font-mono); margin-top:20px; }
  .center-note a{ color:var(--naranja-dark); border-bottom:1px solid var(--naranja-dark); padding-bottom:1px; }
  .center-note a:hover{ color:var(--tinta); border-color:var(--tinta); }

  /* ============================================
     PREVIEW BANNER (internal review only — remove before merging into production page)
     ============================================ */
  .preview-banner{
    background:var(--arena-dark); color:var(--tinta);
    font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.02em;
    text-align:center; padding:10px 20px;
  }
  .preview-banner strong{ font-weight:600; }

  /* ============================================
     IMAGE SLOT (editorial placeholder — never stock, never decorative)
     Corner-bracket motif echoes the site's minimal contour language
     while making it unmistakable that real photography is pending.
     ============================================ */
  .image-slot{
    position:relative;
    aspect-ratio:16/9;
    background:var(--arena);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    margin:32px 0;
  }
  .image-slot::before, .image-slot::after,
  .image-slot .corner-br, .image-slot .corner-bl{
    content:""; position:absolute; width:16px; height:16px;
    border-color:var(--ink-faint); pointer-events:none;
  }
  .image-slot::before{ top:12px; left:12px; border-top:1.5px solid var(--ink-faint); border-left:1.5px solid var(--ink-faint); }
  .image-slot::after{ top:12px; right:12px; border-top:1.5px solid var(--ink-faint); border-right:1.5px solid var(--ink-faint); }
  .image-slot .corner-bl{ bottom:12px; left:12px; border-bottom:1.5px solid var(--ink-faint); border-left:1.5px solid var(--ink-faint); }
  .image-slot .corner-br{ bottom:12px; right:12px; border-bottom:1.5px solid var(--ink-faint); border-right:1.5px solid var(--ink-faint); }
  .image-slot-label{
    font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.04em;
    color:var(--ink-faint); text-transform:uppercase; text-align:center; padding:0 24px;
  }
  .image-slot.is-compact{ aspect-ratio:21/9; margin:24px 0; }

  /* ============================================
     FLAGSHIP CASE STUDY
     ============================================ */
  .flagship-head{ max-width:760px; }
  .flagship-head .flagship-title-es{
    margin-top:10px; color:var(--ink-faint); font-style:italic; font-size:1rem;
  }
  .flagship-meta-row{
    display:flex; flex-wrap:wrap; gap:24px; margin-top:26px; padding-top:26px;
    border-top:1px solid var(--line);
  }
  .flagship-meta-row .meta-item .label{
    font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-faint);
    text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:4px;
  }
  .flagship-meta-row .meta-item .value{ font-size:0.94rem; color:var(--tinta); }

  .flagship-block{ margin-top:52px; }
  .flagship-block h3{
    font-family:var(--font-mono); font-size:0.8rem; font-weight:500;
    text-transform:uppercase; letter-spacing:0.08em; color:var(--naranja-dark);
  }
  .flagship-block p{ margin-top:14px; color:var(--ink-muted); font-size:1.02rem; max-width:720px; }
  .flagship-block ul.contribution-list{ margin-top:16px; max-width:720px; }
  .flagship-block ul.contribution-list li{
    position:relative; padding:9px 0 9px 20px; color:var(--ink-muted); font-size:0.98rem;
    border-bottom:1px dashed var(--line);
  }
  .flagship-block ul.contribution-list li::before{
    content:""; position:absolute; left:0; top:17px; width:8px; height:1px; background:var(--naranja);
  }

  .capability-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
  .capability-tag{
    font-family:var(--font-mono); font-size:0.74rem; color:var(--ink-muted);
    border:1px solid var(--line); border-radius:var(--radius-sm); padding:7px 12px;
  }

  /* ============================================
     SELECTED EXPERIENCE — institutional credential cards
     Reuses the hairline-grid language already used in .grid-3 / .principles
     ============================================ */
  .experience-group{ margin-top:60px; }
  .experience-group-title{
    font-family:var(--font-mono); font-size:0.76rem; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--ink-faint); margin-bottom:20px;
  }
  .experience-cards{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  @media (max-width:760px){ .experience-cards{ grid-template-columns:1fr; } }
  .experience-card{ background:var(--white); padding:26px 28px; }
  .experience-card .card-tag{
    font-family:var(--font-mono); font-size:0.66rem; color:var(--naranja-dark);
    text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:8px;
  }
  .experience-card .org{ font-size:1rem; font-weight:600; }
  .experience-card .desc{ margin-top:8px; color:var(--ink-muted); font-size:0.92rem; }
  .experience-card.is-reference{ background:var(--arena); }

  /* Editorial single-column variant (Less, but stronger) */
  .experience-list{ border-top:1px solid var(--line); margin-top:4px; }
  .experience-row{ padding:30px 0; border-bottom:1px solid var(--line); max-width:760px; }
  .experience-row .card-tag{
    font-family:var(--font-mono); font-size:0.68rem; color:var(--naranja-dark);
    text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:8px;
  }
  .experience-row .org{ font-size:1.05rem; font-weight:600; font-family:var(--font-body); }
  .experience-row .desc{ margin-top:8px; color:var(--ink-muted); font-size:0.95rem; }
  .experience-footnote{
    margin-top:36px; padding-top:26px; border-top:1px solid var(--line);
    color:var(--ink-faint); font-size:0.88rem; max-width:720px;
  }

  /* ============================================
     INTERNAL DEMO BADGE (discreet — remove before production launch)
     ============================================ */
  .internal-badge{
    position:fixed; right:16px; bottom:16px; z-index:150;
    background:var(--tinta); color:var(--arena);
    font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.03em;
    padding:8px 14px; border-radius:var(--radius-sm);
    opacity:0.9; box-shadow:var(--shadow-sm); pointer-events:none;
  }
  @media (max-width:600px){
    .internal-badge{
      position:static; display:inline-block;
      right:auto; bottom:auto;
      font-size:0.62rem; padding:6px 11px;
      margin-top:16px; opacity:1;
    }
  }

  /* ============================================
     SOCIAL LINKS — discreet, text-based, no icons/no counters
     ============================================ */
  /* Footer (dark background) */
  .footer-social{ margin-top:20px; }
  .footer-social .label{
    font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase;
    letter-spacing:0.08em; color:rgba(238,223,190,0.6); display:block; margin-bottom:8px;
  }
  .footer-social .social-row{ display:flex; gap:10px; flex-wrap:nowrap; }
  .footer-social .social-row a{
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    font-family:var(--font-mono); font-size:0.8rem; color:rgba(238,223,190,0.85);
    text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px;
  }
  @media (max-width:800px){
    .footer-social .social-row{ gap:16px; flex-wrap:wrap; }
    .footer-social .social-row a{ white-space:normal; }
  }
  .footer-social .social-row a svg{ flex-shrink:0; }
  .footer-social .social-row a:hover{ color:var(--naranja); border-color:var(--naranja); }

  /* Contact-info block (light background, Let's Talk) */
  .contact-line .social-row{ display:flex; gap:16px; margin-top:6px; flex-wrap:wrap; }
  .contact-line .social-row a{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:0; font-size:0.92rem; color:var(--tinta);
    border-bottom:1px solid var(--line); padding-bottom:2px;
  }
  .contact-line .social-row a svg{ flex-shrink:0; }
  .contact-line .social-row a:hover{ color:var(--naranja-dark); border-color:var(--naranja-dark); }

  /* ============================================
     RECOGNITION / VISIBILITY BAND
     Deliberately low visual weight — credibility footnote, not a feature.
     ============================================ */
  .recognition-band{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:30px 0; margin-top:64px;
  }
  .recognition-list{ display:flex; flex-wrap:wrap; gap:10px 0; }
  .recognition-list li{
    font-family:var(--font-mono); font-size:0.82rem; color:var(--ink-muted);
    padding-right:24px; position:relative;
  }
  .recognition-list li:not(:last-child)::after{
    content:"·"; position:absolute; right:9px; color:var(--ink-faint);
  }

  /* ============================================
     HOME — "Tequina in Action" (curated, not a gallery/feed)
     Reuses .image-slot; only adds a portrait ratio + caption.
     ============================================ */
  .in-action-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
    margin-top:32px;
  }
  @media (max-width:760px){ .in-action-grid{ grid-template-columns:1fr; } }
  .image-slot.is-portrait{ aspect-ratio:4/5; margin:0; }
  .image-slot.is-square{ aspect-ratio:1/1; margin:0; }

  /* Real-photo state — same box, no "pending" frame/label */
  .image-slot.has-photo{ background:none; border:none; overflow:hidden; }
  .image-slot.has-photo::before, .image-slot.has-photo::after{ content:none; }
  .image-slot.has-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .image-slot.has-photo.is-natural{ aspect-ratio:auto; }
  .image-slot.has-photo.is-natural img{ height:auto; object-fit:initial; }
  .in-action-caption{ margin-top:14px; font-size:0.92rem; color:var(--ink-muted); }

  /* ============================================
     HOME — Flagship Case Study teaser (discreet, home-only)
     ============================================ */
  .flagship-teaser{
    display:flex; gap:28px; align-items:center;
    border:1px solid var(--line); padding:26px;
  }
  .flagship-teaser .image-slot{ width:140px; flex:0 0 140px; aspect-ratio:1/1; margin:0; }
  .flagship-teaser .teaser-content p{ margin-top:8px; font-size:1rem; color:var(--tinta); max-width:540px; }
  .flagship-teaser .teaser-link{
    display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:0.85rem;
    color:var(--naranja-dark); text-decoration:none; border-bottom:1px solid var(--naranja-dark);
    padding-bottom:2px;
  }
  .flagship-teaser .teaser-link:hover{ color:var(--tinta); border-color:var(--tinta); }
  @media (max-width:600px){
    .flagship-teaser{ flex-direction:column; align-items:flex-start; }
    .flagship-teaser .image-slot{ width:100%; flex:none; aspect-ratio:16/9; }
  }

  /* Capabilities — editorial photo breather between capability pairs */
  .cap-editorial-photo{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
  .cap-editorial-photo-wrap{ margin:8px 0 8px; }

  /* Contact form — Formspree integration */
  .form-honeypot{
    position:absolute; left:-9999px; top:auto; width:1px; height:1px;
    overflow:hidden; opacity:0;
  }
  .form-privacy-note{
    margin-top:14px; font-size:0.82rem; color:var(--ink-faint);
  }
  .form-error{
    display:none; margin-top:18px; padding:20px 22px; border:1px solid var(--naranja-dark);
    background:rgba(255,92,0,0.06);
  }
  .form-error.is-visible{ display:block; }
  .form-error p{ margin:0; font-size:0.95rem; color:var(--tinta); }
  .form-error a{ color:var(--naranja-dark); border-bottom:1px solid var(--naranja-dark); }
  .btn-primary[disabled]{ opacity:0.6; cursor:not-allowed; }

  /* Memberships & Networks — compact, editorial, no card/sponsor look.
     Grid supports adding future items without redesign. */
  .memberships-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:32px;
    margin-top:8px;
  }
  .membership-item{
    display:flex; flex-direction:column; gap:6px;
    padding:24px 0; border-top:1px solid var(--line);
    text-decoration:none; color:inherit;
  }
  .membership-item .membership-name{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-display); font-size:1.1rem; color:var(--tinta);
  }
  .membership-item .membership-label{
    font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-faint);
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .membership-item .external-icon{ flex-shrink:0; opacity:0.5; transition:opacity .2s; }
  .membership-item:hover .membership-name{ color:var(--naranja-dark); }
  .membership-item:hover .external-icon{ opacity:1; }
  @media (max-width:640px){
    .memberships-grid{ grid-template-columns:1fr; gap:0; }
  }