/* ───────────────────────────────────────────────────────────────────────────
   Ajustes responsive de la web pública.
   Se carga después de style.css, direction.css y experience.css. No cambia el
   diseño aprobado en escritorio: corrige tablet (761–1100px) y móvil (≤760px).
   ─────────────────────────────────────────────────────────────────────────── */

/* Enlace al portal dentro del menú desplegable: solo cuando el botón de la cabecera no cabe. */
.nav-portal-menu{display:none}

/* ───────── Tablet ───────── */
@media (min-width:761px) and (max-width:1100px){
  /* El menú de escritorio no cabe en una línea: se pasa al menú desplegable. */
  header{height:88px;padding:0 5vw}
  header nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:6px;padding:18px 5vw 26px;font-size:17px;background:#faf9f6;color:var(--navy);border-bottom:1px solid #17263815;box-shadow:0 18px 40px -30px #17263866}
  header nav a{padding:10px 0}
  header.menu-open{background:#faf9f6}
  header.menu-open nav{display:flex}
  .menu-toggle{display:flex;flex-direction:column;gap:5px}
  .menu-toggle i{display:block;width:22px;height:1px;background:var(--navy);transition:transform .3s}
  .menu-open .menu-toggle i:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-open .menu-toggle i:last-child{transform:translateY(-3px) rotate(-45deg)}
  .nav-actions{gap:22px}

  /* Método: la foto tenía un mínimo de 525px de ancho y tapaba el texto. Se apila. */
  .transform-layout{display:flex;flex-direction:column;gap:36px}
  .transformation .method-photo{width:100%;min-height:0;aspect-ratio:16/10}
  .transformation .method-story{width:100%;max-width:640px}
  .stage-top,.stage-live,.stage-bottom>span:nth-child(2){font-size:9px}
}

/* Tablet vertical: portada en una columna para que el mockup tenga presencia. */
@media (min-width:761px) and (max-width:900px){
  .fund-hero{height:auto;min-height:0;max-height:none}
  .fund-hero-inner{display:block;padding:150px 7vw 70px}
  .fund-copy h1{font-size:clamp(52px,8.4vw,72px);letter-spacing:-2px;line-height:1.06}
  .fund-desc{font-size:14px;max-width:520px}
  .fund-product.premium-portal-art{height:auto;width:100%;max-width:680px;aspect-ratio:4/3;margin:50px auto 0}
  .hero-tags{font-size:10px}
}

/* ───────── Botones y controles táctiles (tablet y móvil) ───────── */
@media (max-width:1100px){
  .menu-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:0}
  .lang{min-height:44px;padding:0 4px;font-size:12px}
}

/* ───────── Móvil ───────── */
@media (max-width:760px){
  header{padding-left:max(6vw,env(safe-area-inset-left));padding-right:max(6vw,env(safe-area-inset-right))}
  header nav{top:100%;gap:2px;padding:14px 6vw 28px;font-size:18px;border-bottom:1px solid #17263815;box-shadow:0 24px 40px -28px #17263880}
  header nav a{padding:12px 0;font-size:18px}
  .nav-portal-menu{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:14px 18px!important;background:var(--navy);color:#fff!important;font-size:14px;align-self:flex-start}

  /* Microetiquetas: el diseño usa 5–8px; en el teléfono no se leen. Mínimo 11px. */
  .eyebrow,.section-kicker span,.tiny-label,.cap-art-note,.spotlight-image>span,.capability-strip span,
  .tech-features span,.step-eyebrow,.stage-deliverable span,.phx-cinema-top span,.phx-image-note,
  .phx-stamp span,.market-metrics small,.market-context span,.market-context a,.panel-kicker span,
  .decision-tile small,.decision-disclaimer,.closing-footer span,.closing-footer a,.method-photo-note,
  .photo-caption,.hero-count,.hero-coords,.compare-labels span{font-size:11px!important;letter-spacing:.12em}
  .fund-copy .eyebrow,.capital-hero-copy .eyebrow{font-size:11px;letter-spacing:.16em}
  .hero-tags{font-size:11px;gap:14px;flex-wrap:wrap}
  .hero-tags span{font-size:11px}
  .fund-desc,.capital-hero-copy .hero-bottom p,.hero-bottom p{font-size:14px;line-height:1.75}
  .transform-heading p,.transformation .step-body{font-size:14px}
  .journey-tabs.step-pills button strong{font-size:13px}
  .journey-tabs.step-pills button small,.step-pills small,.decision-tabs small{font-size:11px}
  .market-metrics small{line-height:1.5}

  /* Ilustraciones del portal (mockups): se mantienen pequeñas, pero legibles. */
  .demo-badge,.dash-top span,.project-status,.project-top p,.structure-strip span,.timeline span,
  .mini-update p,.mini-update small,.bar-label span,.mini-note,.dash-card h4,.analysis-card span,
  .analysis-card b,.planning-card small,.planning-card span,.work-card span,.work-card b,
  .finish-card small,.finish-card span,.inspection-pin span,.stage-top span{font-size:9px!important}

  /* Objetivos táctiles de al menos 44px. */
  .fund-secondary{font-size:12px;padding:12px 0;min-height:44px}
  .fund-button{font-size:12px;padding:16px 22px;min-height:48px}
  .compare-toggle{font-size:11px;min-height:40px;padding:0 14px}
  .footer-links{gap:6px 20px;flex-wrap:wrap}
  .footer-links button,.footer-links a{font-size:12px;padding:12px 0;min-height:44px}
  footer p{font-size:11px;line-height:1.6}

  /* Formularios: 16px evita el zoom automático de iOS al enfocar un campo. */
  dialog input,dialog textarea,dialog select{font-size:16px}
  dialog{max-width:calc(100vw - 32px)}
}

@media (max-width:380px){
  .fund-copy h1{font-size:clamp(40px,12vw,48px)}
  .journey-tabs.step-pills{grid-template-columns:1fr}
}

/* ───────── Informe de Phoenix (phoenix.html) en móvil ───────── */
@media (max-width:700px){
  .report-header{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  #report-language{min-height:44px;padding:0 6px;font-size:12px}
  .header-right>a{font-size:11px;padding:12px 0}
  .report-sidebar nav a,.report-sidebar nav a:last-child{font-size:12px;padding:16px 12px}
  .report-sidebar nav a b{font-size:12px}
  .report-kicker,.image-note,.research-hero-copy small,.kpi>span,.kpi small,.panel-title>span,
  .reading-grid small,.research-footer span,.research-footer p,.research-footer a{font-size:11px!important;line-height:1.5}
  .report-subtitle,.kpi p,.research-note,.research-note strong{font-size:13px}
  .kpi a,.reading-grid a,.research-hero-copy a{font-size:12px;display:inline-block;padding:10px 0}
  .panel-title>span{max-width:120px}
  .research-hero{height:340px}
}