/* =========================================================
   Le Corch · bridge al motor (motor v3.0.0-rc22+)
   ─────────────────────────────────────────────────────────
   Filosofía 512:
     · Cero !important
     · Cero hacks de specificity
     · Cero override de reglas del motor

   Mecanismo único:
     · El motor expone vars cromáticas/tipográficas (--tema-*).
     · El bridge solo asigna valores a esas vars.
     · Reglas custom del child viven en `@layer plugins.le-corch`,
       que el motor reservó vacío y gana sobre `@layer components`
       sin specificity-war.

   Si necesitás algo que el motor no exponga como var, primero
   se agrega la var al motor (rc22+). Cero overrides locales.
   ========================================================= */


/* =========================================================
   1) Aliases legacy del motor → paleta Atlántico Uruguayo
   ─────────────────────────────────────────────────────────
   Algunos partials del motor (footer, cookies, whatsapp)
   leen vars semánticas tipo --color-bg, --color-text. Las
   mapeamos a la paleta del child. Tokens.css del child es
   la fuente de verdad de los valores hex/rgb.
   ========================================================= */
:root {
  /* Aliases retro-compat del motor v2.x */
  --paper:               var(--color-arena);
  --paper-soft:          var(--color-arena-soft);
  --paper-densa:         var(--color-arena-densa);
  --graphite:            var(--color-tinta);
  --graphite-soft:       var(--color-marina);
  --platinum:            var(--color-arena-soft);
  --terracota:           var(--color-firma);
  --terracota-deep:      var(--color-firma-deep);

  /* Vars semánticas del motor */
  --color-fondo:         var(--color-arena);
  --color-fondo-suave:   var(--color-arena-soft);
  --color-fondo-arena:   var(--color-arena-densa);
  --color-texto:         var(--color-tinta);
  --color-texto-suave:   rgba(24, 35, 49, 0.72);
  --color-texto-inverso: var(--color-arena-soft);
  --color-borde:         var(--hairline-mid);
  --color-borde-fuerte:  var(--hairline-strong);
  --color-accent:        var(--color-firma);
  --color-accent-deep:   var(--color-firma-deep);

  /* Tipografía expuesta al motor */
  --tema-font-display:   var(--font-display);
  --tema-font-body:      var(--font-body);

  /* Easing del motor */
  --tema-ease-premium:   var(--ease-premium);
  --tema-dur-hover:      var(--dur-hover);
}


/* =========================================================
   2) Header del motor v3.0 · solo asignación de vars expuestas
   ─────────────────────────────────────────────────────────
   El motor (header.php rc22+) expone:
     --tema-header-bg, --tema-header-color
     --tema-header-scrolled-bg, --tema-header-scrolled-color
     --tema-header-on-light-color, --tema-header-on-light-scrolled-bg
     --tema-header-blur, --tema-header-rule
     --tema-header-font-display
     --tema-header-link-hover-color, --tema-header-link-hover-opacity

   El motor (idiomas.php rc22+) expone:
     --tema-idiomas-color, --tema-idiomas-hover-color, --tema-idiomas-active-color

   Comportamiento Le Corch:
     · Idle (sobre hero foto)  → bg transparent, letras foam
     · Scrolled                → bg tinta (azul más oscuro), letras foam
     · Hover de cualquier letra → arena-densa
     · Idioma activo (siempre) → arena-densa cuando scrolled
   ========================================================= */
.tema-header {
  /* Tipografía heredada del child */
  --tema-header-font-display: var(--font-display);

  /* Idle: header sobre foto del hero · transparent + foam */
  --tema-header-bg:    transparent;
  --tema-header-color: var(--color-foam);

  /* Scrolled: bg tinta sólido (sin blur), letras foam.
     Cubre las dos combinaciones: scrolled puro Y scrolled+is-on-light
     (el motor solo usa la second var si is-on-light está activo). */
  --tema-header-scrolled-bg:             var(--color-tinta);
  --tema-header-on-light-scrolled-bg:    var(--color-tinta);
  --tema-header-scrolled-color:          var(--color-foam);
  --tema-header-on-light-color:          var(--color-foam);
  --tema-header-blur:                    none;

  /* Hover: arena-densa (override del 0.7 default del motor) */
  --tema-header-link-hover-color:   var(--color-arena-densa);
  --tema-header-link-hover-opacity: 1;

  /* Hairline inferior del header · foam tenue cuando hay fondo */
  --tema-header-rule: rgba(240, 232, 214, 0.10);

  /* Lang switcher · ES | EN · TODOS EN BLANCO (foam).
     · inactivo:  foam
     · activo:    foam (igual que inactivo · sin diferenciación cromática)
     · hover:     arena-densa (único cambio de color, en hover)
     · separador: foam
     La diferenciación del activo se da por underline + weight 700
     en `@layer plugins.le-corch` más abajo. */
  --tema-idiomas-gap:               0px;
  --tema-idiomas-color:             var(--color-foam);
  --tema-idiomas-hover-color:       var(--color-arena-densa);
  --tema-idiomas-active-color:      var(--color-foam);
  --tema-idiomas-sep-color:         var(--color-foam);
  --tema-idiomas-link-padding-x:    2px;   /* padding lateral del link */
  --tema-idiomas-sep-margin:        2px;   /* margen del "|" · ES|EN bien juntito */

  /* Close del overlay · blanco + posición más cómoda (despegado de la esquina) */
  --tema-overlay-close-color: var(--color-foam);
  --tema-overlay-close-top:   16px;
  --tema-overlay-close-left:  16px;
}

/* Brand center · "LE" hereda color del header, "CORCH" siempre firma.
   Uniforme con la clase .lc-brand del child (ver más abajo). */
.tema-header__brand--text {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-style: normal;
}
.tema-header__brand--text em {
  color: var(--color-firma);
  font-style: normal;
  font-weight: 700;
}


/* =========================================================
   3) Reglas custom del child → @layer plugins.le-corch
   ─────────────────────────────────────────────────────────
   El motor reservó @layer plugins vacío precisamente para esto.
   Reglas dentro de este layer ganan a las del @layer components
   del motor sin necesidad de specificity tricks ni !important.

   Acá vive el botón "Busca tu foto" (no es del motor, es del
   child) y los micro-overrides del footer.
   ========================================================= */
@layer plugins.le-corch {

  /* =========================================================
     Marca LECORCH · clase canónica reutilizable.

     Geometría única: DM Sans bold 700, uppercase, tracking -0.01em,
     sin italic. "LE" hereda el color del contexto, "CORCH" siempre
     firma (#A88B5C dorado cálido) — identidad consistente en todo
     el sitio (header, footer, hero, about, quote, CTAs).

     Uso:
       <span class="lc-brand">LE<em>CORCH</em></span>
     ========================================================= */
  .lc-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 1;
    display: inline-block;
  }
  .lc-brand em {
    font-style: normal;
    font-weight: 700;
    color: var(--color-firma);
  }

  /* Botón "Busca tu foto" · inyectado en columna END del header.
     Ícono ola surfer + label uppercase. Layout horizontal explícito. */
  .tema-header__buscate {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: currentColor;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    min-block-size: 44px;
    transition: color var(--dur-hover) var(--ease-premium),
                opacity var(--dur-hover) var(--ease-premium);
  }
  .tema-header__buscate:hover {
    color: var(--color-arena-densa);
  }
  .tema-header__buscate-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
  }
  .tema-header__buscate-icon svg {
    display: block;
    width: 22px;
    height: 11px;
  }
  .tema-header__buscate-label {
    display: inline-block;
    line-height: 1;
  }

  /* Mobile · label SIEMPRE visible (es nuestro único CTA del header) */
  @media (max-width: 880px) {
    .tema-header__buscate {
      gap: 8px;
      font-size: 10px;
      letter-spacing: 0.18em;
    }
    .tema-header__buscate-icon svg { width: 20px; height: 10px; }
  }
  @media (max-width: 480px) {
    .tema-header__buscate {
      font-size: 9.5px;
      letter-spacing: 0.14em;
      gap: 6px;
    }
    .tema-header__buscate-icon svg { width: 18px; height: 9px; }
  }

  /* Footer del child · paleta Atlántico (el footer.php del child
     declara su propio markup; estos hovers son cosméticos comunes) */
  .site-footer a:hover,
  .footer-col ul li a:hover,
  .footer-social a:hover {
    color: var(--color-firma);
  }

  /* Lang switcher · diferenciación tipográfica del activo (sin cambio
     cromático). Aplica tanto a las clases nuevas .tema-idiomas__* como
     a las legacy .tema-lang-* del motor — ambas reciben paleta vía las
     vars --tema-idiomas-* expuestas por el motor (motor rc26+).

     ESTAS REGLAS SON SOLO LO QUE NO ES PALETA · cosas decorativas
     específicas del child (weight, underline). El COLOR viaja por var,
     cero override de reglas, cero specificity-war. */

  /* Activo · weight 700 + underline tenue foam (clases nuevas) */
  .tema-idiomas__link--active {
    font-weight: 700;
    position: relative;
  }
  .tema-idiomas__link--active::after {
    content: '';
    position: absolute;
    left: 6px; right: 6px; bottom: 2px;
    height: 1px;
    background: var(--color-foam);
    opacity: 0.65;
  }

  /* Activo · weight 700 + underline tenue foam (clases legacy) */
  .tema-lang-item.is-active a {
    font-weight: 700;
    position: relative;
  }
  .tema-lang-item.is-active a::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px; bottom: 4px;
    height: 1px;
    background: var(--color-foam);
    opacity: 0.65;
  }
}