/* Orys · web v3 · componentes. Píldora solo aquí (nav, CTA); círculo solo en el conector. */

/* ---------- Conector (símbolo) ---------- */
.conector { width: 28px; height: 28px; color: var(--tinta); }
.conector__disco { fill: var(--naranja); }
[data-fondo="tinta"] .conector { color: var(--texto); }
[data-fondo="naranja"] .conector { color: var(--texto); }
[data-fondo="naranja"] .conector__disco { fill: var(--texto); }

/* ---------- Panel (superficie elevada por tono, no por sombra) ---------- */
.panel { background: var(--hueso-alto); color: var(--tinta); padding: clamp(1.25rem, 2.5vw, 2rem); }
.panel .etiqueta { color: var(--gris); }
.panel .secundario { color: var(--tinta-suave); }
/* Panel dentro de un bloque tinta: en tema oscuro el bloque «tinta» es claro
   (par derivado), así que el panel re-ancla los tokens base a sus valores
   claros para que hijos (etiqueta, hub SVG con var(--tinta)) sigan legibles.
   En tema claro es un no-op. */
[data-fondo="tinta"] .panel {
  --hueso-alto: #F7F5EF; --tinta: #141414; --tinta-suave: #3A3935; --gris: #6B665D; --hairline: #D6D1C4;
  background: var(--hueso-alto); color: var(--tinta);
}
[data-fondo="tinta"] .panel .etiqueta { color: var(--gris); }
[data-fondo="tinta"] .panel .secundario { color: var(--tinta-suave); }

/* ---------- CTA píldora ---------- */
.cta {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .55rem .55rem .55rem 1.35rem;
  background: var(--naranja); color: var(--tinta-sobre-naranja);
  font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; line-height: 1;
  border-radius: 999px;
  transition: transform var(--dur-micro) var(--curva);
}
.cta__disco {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  background: var(--tinta-sobre-naranja); color: #EFEDE6; border-radius: 50%;
  /* Flecha hueso sobre disco tinta (literal: el disco es tinta en ambos temas).
     Nunca naranja: el naranja es material, no glifo ni texto. */
}
.cta__disco svg { width: 1rem; height: 1rem; }
.cta:active { transform: scale(.98); }
/* CTA dentro de un bloque naranja (contacto): la píldora naranja desaparecería
   sobre su propio color, así que se invierte a tinta con texto hueso (misma
   lógica que la píldora de nav) y el disco pasa a hueso con flecha tinta. */
[data-fondo="naranja"] .cta { background: var(--tinta-sobre-naranja); color: #EFEDE6; }
[data-fondo="naranja"] .cta__disco { background: #EFEDE6; color: var(--tinta-sobre-naranja); }
.cta--nav { padding: .45rem .45rem .45rem 1rem; font-size: .9rem; }

/* ---------- Ghost ---------- */
.ghost {
  display: inline-flex; align-items: center; padding: .55rem 0;
  font-weight: 500; color: var(--tinta);
  border-bottom: 1px solid var(--tinta);
}
.ghost:hover { border-bottom-color: var(--naranja); }

/* Ref 1-portada.png (observación, texto del render descartado): el CTA
   naranja es una píldora de altura ~72px con extremos totalmente
   redondeados (radio = mitad de la altura, equivale a 999px); el disco de
   flecha del CTA no es visible como círculo separado en ese render (queda
   fijado por la spec, no por la imagen); el bloque de nav se apoya a
   ~24-32px del borde superior de la página. */
/* ---------- Nav píldora flotante ---------- */
.nav {
  position: sticky; top: var(--nav-desprendido); z-index: 50;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.nav__pildora {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: min(100%, var(--contenedor));
  margin-inline: auto;
  padding: .5rem .5rem .5rem 1rem;
  background: var(--tinta); color: var(--hueso-sobre-tinta);
  border-radius: 999px;
}
.nav__marca { display: inline-flex; align-items: center; gap: .5rem; }
.nav__marca .conector { color: var(--hueso-sobre-tinta); width: 24px; height: 24px; }
.nav__wordmark { font-weight: 700; letter-spacing: var(--track-display); font-size: 1.15rem; }
.nav__enlaces { display: flex; gap: clamp(.75rem, 1.6vw, 1.5rem); }
.nav__enlaces a {
  display: inline-block; padding: .35rem .1rem;
  font-size: .92rem; font-weight: 500; color: var(--gris-sobre-tinta);
  border-bottom: 1px solid transparent;
}
.nav__enlaces a:not(.cta):hover, .nav__enlaces a[aria-current="true"]:not(.cta) { color: var(--hueso-sobre-tinta); border-bottom-color: var(--naranja); }
.nav__enlaces .cta { color: var(--tinta-sobre-naranja); border-bottom: 0; }
.nav__solo-movil { display: none; }
.nav__acciones { display: flex; align-items: center; gap: .5rem; }
.nav__tema {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  color: var(--hueso-sobre-tinta);
}
.nav__tema[aria-pressed="true"] .nav__tema-mitad { transform: rotate(180deg); transform-origin: 50% 50%; }
.nav :focus-visible { outline-color: var(--hueso-sobre-tinta); }

/* Hamburguesa → cruz (solo ≤ 48 rem) */
.nav__toggle { display: none; position: relative; width: 2.25rem; height: 2.25rem; color: var(--hueso-sobre-tinta); }
.nav__barra {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px;
  background: currentColor; transform-origin: center;
  transition: transform var(--dur-micro) var(--curva);
}
.nav__barra:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); }
.nav__barra:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); }
.nav.is-open .nav__barra:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav.is-open .nav__barra:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 48rem) {
  .nav__enlaces {
    position: fixed; inset: 0; z-index: 40;
    display: flex; flex-direction: column; justify-content: center; gap: .25rem;
    padding: var(--gutter);
    background: var(--tinta);
    visibility: hidden; opacity: 0;
    transition: opacity var(--dur-micro) var(--curva), visibility 0s linear var(--dur-micro);
  }
  .nav.is-open .nav__enlaces { visibility: visible; opacity: 1; transition-delay: 0s; }
  .nav__enlaces a { font-size: var(--fs-display); font-weight: 600; letter-spacing: var(--track-display); padding: .35rem 0; border-bottom: 0; }
  .nav__enlaces .cta { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; padding: .55rem .55rem .55rem 1.35rem; }
  .nav__enlaces a[aria-current="true"]:not(.cta) { color: var(--hueso-sobre-tinta); }
  .nav__solo-movil { display: block; margin-top: 1.5rem; }
  .nav__solo-movil .cta--nav { font-size: 1rem; }
  .nav__cta { display: none; }
  .nav__toggle { display: block; z-index: 41; }
  .nav__pildora { position: relative; z-index: 41; }
  /* El overlay cubre marca y tema visualmente (WCAG 2.4.11); se ocultan del
     todo mientras está abierto para que tampoco queden enfocables. */
  .nav.is-open .nav__marca, .nav.is-open .nav__tema { visibility: hidden; }
}