/* ==========================================================================
   Página de producto STARSOFT — estilo Apple
   Tokens medidos sobre apple.com/iphone-duo/. Ver references/design-tokens.md
   Lo único que se cambia por producto: --accent y --accent-dark.
   ========================================================================== */

:root {
  /* Color -------------------------------------------------------------- */
  --ink:         #1d1d1f;
  --ink-soft:    #6e6e73;
  --bg:          #ffffff;
  --bg-alt:      #f5f5f7;
  --bg-alt-2:    #fafafc;
  --rule:        #d2d2d7;
  --rule-soft:   #e8e8ed;
  --ink-invert:  #f5f5f7;
  --bg-dark:     #000000;

  /* Marca — REEMPLAZAR con BRAND.primary del content.py del producto ---- */
  /* Azul de marca oficial, tomado de logos/README.md (#23386b).
     Contraste 11.28:1 sobre blanco: AAA para enlaces y para botones. */
  --accent:      #23386b;
  --accent-dark: #17264a;

  /* Tipografía --------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --fs-hero:    64px;  --lh-hero:    68px;
  --fs-section: 40px;  --lh-section: 44px;
  --fs-stat:    40px;
  --fs-card:    24px;  --lh-card:    28px;
  --fs-lead:    21px;  --lh-lead:    29px;
  --fs-body:    17px;  --lh-body:    21px;
  --fs-note:    12px;  --lh-note:    16px;

  /* Espaciado — escala cerrada ----------------------------------------- */
  --pad-section:    96px;
  --pad-section-lg: 120px;
  --pad-section-xl: 176px;
  --gap:            24px;
  --gutter:         22px;

  /* Layout ------------------------------------------------------------- */
  --maxw:        1260px;
  --maxw-copy:   700px;
  --radius:      28px;
  --radius-pill: 980px;
  --nav-h:       64px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Reset mínimo ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; border-radius: 4px; }

/* Tipografía -------------------------------------------------------------- */
.eyebrow {
  font-size: var(--fs-lead); line-height: var(--fs-lead);
  font-weight: 600; letter-spacing: 0.231px;
  color: var(--ink); margin: 0 0 var(--gap);
}
.headline-hero {
  font-size: var(--fs-hero); line-height: var(--lh-hero);
  font-weight: 600; letter-spacing: -0.576px;
  margin: 0; color: var(--ink);
}
.headline {
  font-size: var(--fs-section); line-height: var(--lh-section);
  font-weight: 600; margin: 0 0 var(--gap); color: var(--ink);
}
.lead {
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  font-weight: 400; letter-spacing: 0.231px;
  color: var(--ink-soft); max-width: var(--maxw-copy); margin: 0;
}
.note { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--ink-soft); }

/* El lead nunca va pegado al titular. */
.headline-hero + .lead,
.headline + .lead { margin-top: var(--gap); }

/* Layout ------------------------------------------------------------------ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section    { padding: var(--pad-section) 0; }
.section--lg { padding: var(--pad-section-lg) 0; }
.section--xl { padding-bottom: var(--pad-section-xl); }
.section--alt { background: var(--bg-alt); }

/* Botones ----------------------------------------------------------------- */
.btn {
  display: inline-block; font-size: var(--fs-body); font-weight: 400;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; text-decoration: none;
  transition: background 0.2s var(--ease);
}
.btn:hover { background: var(--accent-dark); text-decoration: none; }
.btn--ghost {
  background: transparent; color: var(--accent-dark);
  border: 1px solid var(--rule);
}
.btn--ghost:hover { background: var(--bg-alt); }
/* El ghost dentro del nav: menos aire para que entren los dos botones. */
.localnav-links .btn--ghost { border-color: var(--rule); }
/* Botón sin href todavía: mantiene el aspecto pero no se comporta como enlace. */
.btn:not([href]) { cursor: default; }
.footer-links a:not([href]) { cursor: default; text-decoration: none; }
.footer-links { margin-bottom: 8px; }
.footer-links a { color: var(--accent-dark); }

/* 1. Localnav ------------------------------------------------------------- */
.localnav {
  position: sticky; top: 0; z-index: 9998;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule-soft);
}
.localnav .wrap {
  height: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: var(--gap);
}
/* Logo compacto: 26px de alto = 121px de ancho, por encima del mínimo de 110px
   que fija logos/README.md. */
.localnav-brand { display: flex; align-items: center; gap: 14px; }
.localnav-empresa { height: 26px; width: auto; display: block; }
.localnav-sep {
  width: 1px; height: 22px; background: var(--rule); flex: none;
}
.localnav-logo { height: 26px; width: auto; display: block; }
.localnav-links { display: flex; align-items: center; gap: 28px; }
/* :not(.btn) es obligatorio: sin eso esta regla le gana en especificidad al
   color blanco de .btn y el CTA queda con texto negro sobre el azul de marca. */
.localnav-links a:not(.btn) { color: var(--ink); font-size: var(--fs-body); }

/* 2. Hero ----------------------------------------------------------------- */
.hero { text-align: center; padding-top: 56px; }
.hero-logo { height: 56px; width: auto; margin: 0 auto var(--gap); display: block; }
.footer-logo { height: 36px; width: auto; margin-bottom: 12px; }
.hero .lead { margin-inline: auto; }
.hero-meta { margin: var(--gap) 0 0; font-size: 14px; line-height: 18px; color: var(--ink); }
/* .hero-media hereda el marco de .story-media; solo ajusta el aire superior. */
.hero-media { margin-top: 48px; }

/* 3. Highlights ----------------------------------------------------------- */
.highlights-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px;
}
.highlights-list li {
  font-size: var(--fs-lead); font-weight: 600; color: var(--ink);
}

/* 4. Story ---------------------------------------------------------------- */
.story + .story { padding-top: 0; }

/* Marco de ventana: la captura de software es un producto dentro de una pantalla,
   no un recorte. La barra superior y la sombra le dan borde propio, así el corte
   inferior se lee como "la ventana sigue" y no como una imagen cortada. */
.story-media {
  margin-top: 48px;
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding-top: 42px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.story-media::before {
  content: ""; position: absolute; top: 17px; left: 22px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rule);
  box-shadow: 15px 0 0 var(--rule), 30px 0 0 var(--rule);
}
.story-media img { display: block; width: 100%; border-radius: 0; }
.story--dark .story-media {
  background: #1c1c1e; border-color: #38383a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.story--dark .story-media::before {
  background: #48484a; box-shadow: 15px 0 0 #48484a, 30px 0 0 #48484a;
}
.story--dark { background: var(--bg-dark); }
.story--dark .eyebrow,
.story--dark .headline-hero { color: var(--ink-invert); }
.story--dark .lead { color: #a1a1a6; }

/* 5. Stats ---------------------------------------------------------------- */
.stats {
  display: grid; gap: 40px var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--rule); padding-top: 40px;
}
.stat-value {
  font-size: var(--fs-stat); line-height: var(--fs-stat);
  font-weight: 600; color: var(--ink); margin: 0;
}
.stat-label {
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--ink-soft); margin: 8px 0 0;
}

/* 6. Galería -------------------------------------------------------------- */
.gallery {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  background: var(--bg-alt); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
/* Sobre fondo alterno la card se invierte, si no desaparece contra la sección. */
.section--alt .card { background: var(--bg); }
.card img { width: 100%; }
.card-body { padding: 32px; }
.card-title {
  font-size: var(--fs-card); line-height: var(--lh-card);
  font-weight: 600; letter-spacing: 0.216px; margin: 0 0 12px; color: var(--ink);
}
.card-body p { margin: 0; color: var(--ink-soft); }

/* 7. Cierre --------------------------------------------------------------- */
.closing { text-align: center; }
.closing .lead { margin: 0 auto var(--gap); }

/* 8. FAQ ------------------------------------------------------------------ */
.faq-list { max-width: 900px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 24px 40px 24px 0;
  font-size: var(--fs-lead); font-weight: 400; color: var(--ink);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%); font-size: 28px; font-weight: 400;
  color: var(--accent-dark); transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { content: "\00d7"; }
.faq-item .lead { font-size: var(--fs-body); line-height: 25px; padding: 0 40px 24px 0; }

/* 9. Notas al pie --------------------------------------------------------- */
.footnotes { background: var(--bg-alt-2); padding: var(--pad-section-lg) 0; }
.footnotes ol { margin: 0; padding-left: 1.2em; }
.footnotes li { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--ink-soft); margin-bottom: 8px; }
.site-footer { background: var(--bg-alt-2); padding: 0 0 48px; }
.site-footer .wrap { border-top: 1px solid var(--rule); padding-top: 24px; }

/* Contadores --------------------------------------------------------------
   tabular-nums evita que el ancho salte mientras corren los dígitos. */
.stat-value[data-count-to] { font-variant-numeric: tabular-nums; }

/* Organigrama que se arma -------------------------------------------------- */
.orgchart { position: relative; margin-top: 56px; }
.orgchart__links {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 0;
}
.orgchart__link {
  fill: none; stroke: var(--rule); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}
.orgchart.is-in .orgchart__link {
  animation: org-draw 0.55s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.11s);
}
@keyframes org-draw { to { stroke-dashoffset: 0; } }

.org-node {
  position: relative; z-index: 1;
  background: var(--bg); border: 1px solid var(--rule-soft);
  border-radius: 14px; padding: 14px 18px; text-align: center;
  opacity: 0; transform: translateY(14px) scale(0.96);
}
.orgchart.is-in .org-node {
  animation: org-pop 0.5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.11s + 0.3s);
}
@keyframes org-pop { to { opacity: 1; transform: none; } }

.org-node__code {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.4px; color: var(--accent);
}
.org-node__name { display: block; font-weight: 600; margin-top: 2px; }
.org-node__meta { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.org-root { max-width: 320px; margin: 0 auto; }
.org-root .org-node__name { font-size: var(--fs-card); }
/* Dos columnas con una calle central: el tronco baja por esa calle y las ramas
   salen en horizontal, así ningún conector cruza por encima de una tarjeta. */
.org-areas {
  display: grid; row-gap: 16px; column-gap: 96px;
  grid-template-columns: 1fr 1fr;
  margin-top: 72px;
}
.org-flags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
  margin-top: 40px; font-size: var(--fs-body); color: var(--ink-soft);
}
.org-flags b { color: var(--ink); font-weight: 600; }

@media (max-width: 734px) {
  /* Una columna: sin calle central no hay dónde trazar, el JS oculta los conectores. */
  .org-areas { grid-template-columns: 1fr; row-gap: 10px; column-gap: 0; margin-top: 40px; }
  .org-node { padding: 12px; }
  .org-node__meta { display: none; }
}

/* Reveal al scroll -------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(30px); }

/* Direcciones de reveal ---------------------------------------------------
   El stagger sale de --d (retardo por elemento), no de JS inline: así el
   escalonado se declara en el markup y se puede ajustar sin tocar el script. */
.reveal--up    { transform: translateY(40px); }
.reveal--left  { transform: translateX(-56px); }
.reveal--right { transform: translateX(56px); }
.reveal--zoom  { transform: scale(0.88); }

/* Entradas en 3D para las capturas. La perspectiva va en el propio transform:
   una sola capa, sin wrapper extra. */
.reveal--rise {
  transform: perspective(1400px) translateY(90px) rotateX(20deg) scale(0.94);
  transform-origin: center bottom;
}
.reveal--tilt {
  transform: perspective(1400px) rotateY(-14deg) translateY(30px);
  transform-origin: left center;
}
.reveal--tilt-r {
  transform: perspective(1400px) rotateY(14deg) translateY(30px);
  transform-origin: right center;
}
/* Las entradas 3D necesitan más recorrido que un fade para no verse bruscas. */
.reveal--rise.is-visible, .reveal--tilt.is-visible, .reveal--tilt-r.is-visible {
  transition-duration: 1.1s;
}

/* Hero guiado por scroll -------------------------------------------------
   --op va de 0 a 1 según el avance del scroll; el JS solo escribe esa
   variable y el CSS hace el resto. Sin JS, --op vale 1 = estado final. */
/* Nunca combinar .scroll-tilt con .reveal: .reveal.is-visible fija
   transform:none y le gana en especificidad. El hero no lleva reveal. */
.scroll-tilt {
  transform:
    perspective(1600px)
    rotateX(calc((1 - var(--op, 1)) * 16deg))
    scale(calc(0.9 + var(--op, 1) * 0.1));
  transform-origin: center bottom;
  will-change: transform;
}
.reveal[style*="--d"] { transition-delay: var(--d, 0ms); }

.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
/* Sin JS el contenido DEBE verse igual. */
.no-js .reveal { opacity: 1; transform: none; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1068px) {
  :root {
    --fs-hero: 48px;  --lh-hero: 52px;
    --fs-section: 32px; --lh-section: 36px;
    --fs-stat: 36px;
    --fs-lead: 19px;  --lh-lead: 27px;
  }
}
@media (max-width: 734px) {
  :root {
    --fs-hero: 40px;  --lh-hero: 44px;
    --fs-section: 28px; --lh-section: 32px;
    --fs-stat: 32px;
    --fs-lead: 17px;  --lh-lead: 25px;
    --fs-body: 16px;
    --pad-section: 64px; --pad-section-lg: 80px; --pad-section-xl: 96px;
    --radius: 20px;
  }
  /* El lockup doble no entra a 375px junto al CTA: queda la marca del producto. */
  .localnav-empresa, .localnav-sep { display: none; }
  .localnav-logo { height: 22px; }
  .hero-logo { height: 40px; }
  .localnav-links a:not(.btn) { display: none; }
  /* Dos botones no entran a 375px: el acceso queda en el pie de página. */
  .localnav-links .btn--ghost { display: none; }
  .localnav-links { gap: 12px; }
  .card-body { padding: 24px; }
}

/* Accesibilidad ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal--rise, .reveal--tilt, .reveal--tilt-r, .scroll-tilt { transform: none !important; }
  .reveal, .reveal.is-visible {
    opacity: 1; transform: none; transition: none;
  }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Impresión --------------------------------------------------------------- */
@media print {
  .localnav { display: none; }
  .reveal { opacity: 1; transform: none; }
  .section { padding: 24px 0; }
}