/* ============================================================================
   ZENITH 360 — sections.css
   Ajustes que solo aplican a una sección concreta y que no tienen sentido
   como componente reutilizable. Si algo de aquí se usa dos veces, se muda
   a components.css.
   ========================================================================= */

/* ---- 01 · Hero ---- */
.hero { background: var(--brand-900); }
.hero__title .line span { display: block; }

/* ---- 02 · Barra de confianza ---- */
.trustbar { color: var(--brand-200); }
.trustbar__item span { flex: none; }

/* ---- 03 · El punto de partida ---- */
.start__head h2 { max-width: 12ch; }

/* ---- 04 · Servicios ---- */
#servicios .services__grid { align-items: stretch; }
.service-card { height: 100%; }

/* ---- 05 · Diagnóstico ---- */
#diagnostico { color: var(--paper-50); }
.diagnostic__intro { margin-top: var(--s-12); padding: var(--s-8); border: 1px solid var(--rule-on-dark); border-radius: var(--r-md); }
@media (min-width: 640px) { .diagnostic__intro { padding: var(--s-12); } }

/* ---- 06 · Metodología ---- */
.method__orbit { min-height: 1px; }
@media (min-width: 1024px) { .method__orbit { min-height: 420px; } }

/* ---- 07 · Casos ---- */
.case__body h3 { max-width: 22ch; }

/* ---- 08 · Sobre ---- */
#sobre .marker--credential { background: var(--brand-600); }

/* ---- 09 · Modelo de trabajo ---- */
.fees__table tbody tr:hover { background: color-mix(in srgb, var(--brand-100) 40%, transparent); }

/* ---- 11 · Testimonios ---- */
.testimonial__quote { position: relative; }

/* ---- 13 · Contacto ---- */
.contact-map { border: 1px solid var(--rule); }

/* ---- Ajustes de tamaño pequeño ---- */
@media (max-width: 559px) {
  .hero__plane--photo { width: 92%; }
  .hero__plane--card { width: 100%; }
  .footer__wordmark span { font-size: clamp(3rem, 18vw, 6rem); }
}


/* ===========================================================================
   HERO OSCURO
   El azul de marca como suelo. Es la única superficie del sitio donde el
   verde #00B454 alcanza contraste legible (6,11:1), así que aquí sí puede
   ser texto y no solo relleno de botón.
   =========================================================================== */
.hero .eyebrow { color: var(--proof-500); }
.hero .eyebrow::after { background: rgba(0,180,84,.35); }
.hero__title { color: var(--paper-50); }
.hero .lead { color: var(--brand-200); }
.hero__tile { box-shadow: 0 24px 48px -20px rgba(0,0,0,.55); }

/* El nav flota sobre el hero oscuro: mientras no se reduzca, va en claro */
.site-nav:not(.is-shrunk) .wordmark { color: var(--paper-50); }
.site-nav:not(.is-shrunk) .site-nav__links a { color: var(--brand-200); }
.site-nav:not(.is-shrunk) .site-nav__links a:hover { color: var(--paper-50); }
.site-nav:not(.is-shrunk) .lang-switch { border-color: rgba(255,255,255,.3); }
.site-nav:not(.is-shrunk) .lang-switch__btn { color: var(--brand-200); }
.site-nav:not(.is-shrunk) .lang-switch__btn[aria-pressed="true"] {
  background: var(--paper-50); color: var(--brand-900);
}
.site-nav:not(.is-shrunk) .menu-toggle__bars i { background: var(--paper-50); }


/* ===========================================================================
   BANDA DE HERRAMIENTAS
   El texto va encima de la foto, así que el velo no es decorativo: es lo que
   garantiza el contraste. Regla de tokens.css: nada de verde directo sobre
   fotografía. Por eso la marca verde aquí es una barra, no texto.
   =========================================================================== */
/* El velo se mantiene por encima del 84 % en toda la altura que ocupa texto y
   solo se abre en el último tramo. Medido: el «01» cae al 73 % de la caja, y
   ahí el velo va por .84. Con el degradado anterior quedaba en .68 y el azul
   claro del número perdía contraste sobre las fotos claras. */
.toolstrip__label {
  background: linear-gradient(to top,
    rgba(0,31,56,.97) 0%, rgba(0,31,56,.94) 45%, rgba(0,31,56,.84) 72%,
    rgba(0,31,56,.40) 90%, rgba(0,31,56,0) 100%);
}
.toolstrip__num  { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; color: var(--brand-200); }
.toolstrip__rule { background: var(--proof-500); }
.toolstrip__name {
  font-family: var(--font-ui); font-weight: 600; line-height: 1.15;
  font-size: clamp(1.05rem, .55vw + .85rem, 1.3rem);
  color: var(--paper-50);
}
.toolstrip__desc { font-size: var(--fs-micro); line-height: 1.4; color: var(--brand-200); }

/* La foto se acerca al pasar el cursor; el velo se cierra un poco más para
   que el nombre no pierda contraste durante el movimiento. */
.toolstrip__media img,
.toolstrip__media video { transition: transform var(--dur-slow) var(--ease-out-expo); }
.toolstrip__link:hover .toolstrip__media img,
.toolstrip__link:hover .toolstrip__media video,
.toolstrip__link:focus-visible .toolstrip__media img,
.toolstrip__link:focus-visible .toolstrip__media video { transform: scale(1.06); }
.toolstrip__link:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: -5px; }
@media (prefers-reduced-motion: reduce) {
  .toolstrip__media img,
  .toolstrip__media video { transition: none; }
  .toolstrip__link:hover .toolstrip__media img,
  .toolstrip__link:hover .toolstrip__media video { transform: none; }
}