/* ==========================================================================
   landing.css — Estilos da landing page do Plantão10 (apex plantao10.com.br)
   Recriação fiel do protótipo. Os layouts ficam inline no landing.php (fonte
   da verdade visual); aqui ficam reset, keyframes, hovers (ex style-hover) e
   os overrides responsivos (breakpoints 900 / 760 / 460).
   ========================================================================== */

.p10-landing *, .p10-landing *::before, .p10-landing *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.p10-landing-body { margin: 0; padding: 0; background: #fff; }

@keyframes p10blink { 50% { opacity: 0; } }
@keyframes p10float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- hovers (substituem o style-hover do protótipo) ---- */
.p10-btn-outline { transition: border-color .18s; }
.p10-btn-outline:hover { border-color: #6B7891 !important; }
.p10-btn-primary { transition: background .18s; }
.p10-btn-primary:hover { background: #0046AC !important; }
.p10-cta-btn { transition: background .18s; }
.p10-cta-btn:hover { background: #F4F8FF !important; }
.p10-benefit-card { transition: transform .2s, box-shadow .2s; }
.p10-benefit-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(11,27,51,.25); }

/* ---- calculadora simulada no mockup do iPhone (seção Calculadora) ----
   Carrega calc-emergencia.css e renderiza o ce-tela-4 real dentro do phone.
   O .p10-calc-track é renderizado numa largura "de celular" (~100/--p10-cs%)
   com os tamanhos NATIVOS do app e então reduzido por scale(--p10-cs) para
   caber no mockup — assim a proporção fica idêntica à do app real. Forçamos o
   layout MOBILE (que no app vem de @media) e o scroll interno é dirigido por JS
   (translateY), acompanhando a rolagem da página. */
.p10-phone-screen { font-family: Inter, sans-serif; }
.p10-calc-screen { position: relative; pointer-events: none; }
.p10-calc-track {
  --p10-cs: .72;
  width: calc(100% / var(--p10-cs));
  transform-origin: top left;
  transform: scale(var(--p10-cs));
  padding: 14px 16px 30px;
  will-change: transform;
}
.p10-calc-track .ce-tela { animation: none; }
.p10-calc-track .ce-dados-paciente { gap: 12px; }
.p10-calc-track .ce-campo-peso,
.p10-calc-track .ce-campo-idade { flex: 1; }
.p10-calc-track .ce-campo-peso input[type="number"] { width: 100%; }
.p10-calc-track .ce-campo-idade .ce-idade-wrap { width: 100%; }
.p10-calc-track .ce-campo-idade input[type="number"] { width: 100%; min-width: 0; }
.p10-calc-track .ce-acoes { width: 100%; margin-left: 0; flex-direction: column; }
.p10-calc-track .ce-btn-calcular { width: 100%; }
.p10-calc-track .ce-btn-estimar { width: 100%; justify-content: center; }

/* ---- responsive overrides (mobile) ---- */
@media (max-width: 900px) {
  .p10-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  .p10-header-inner { height: 60px !important; padding: 0 18px !important; }
  .p10-hide-sm { display: none !important; }
  .p10-hero { padding: 100px 0 56px !important; }
  .p10-hero-h1 { font-size: 34px !important; }
  .p10-hero-p { font-size: 16px !important; }
  .p10-hero-panel { grid-template-columns: 1fr !important; padding: 14px !important; }
  .p10-hda-box { min-height: 120px !important; }
  .p10-grid-2 { grid-template-columns: 1fr !important; }
  .p10-grid-3 { grid-template-columns: 1fr !important; }
  .p10-split { grid-template-columns: 1fr !important; gap: 28px !important; height: 100% !important; align-content: start !important; }
  /* mobile: o STAGE vira fluxo (não pina como bloco). Quem "trava" é o próprio
     PHONE (sticky) dentro do track alto, com a coluna de texto rolando acima. */
  .p10-calc-stage { position: static !important; height: 100% !important; display: block !important; padding-top: 22px !important; }
  .p10-split-phone { justify-self: center !important; position: sticky !important; top: 76px !important; align-self: start !important; }
  .p10-phone { width: 280px !important; height: 560px !important; }
  .p10-sec { padding: 56px 0 !important; }
  .p10-pad { padding-left: 18px !important; padding-right: 18px !important; }
  .p10-cta { padding: 72px 0 !important; }
  .p10-cola-top { padding: 60px 18px 8px !important; }
}
@media (max-width: 460px) {
  .p10-hero-h1 { font-size: 29px !important; }
  .p10-h2 { font-size: 25px !important; }
  /* menor para o phone pinado caber em telas curtas (top:76 + altura) */
  .p10-phone { width: 268px !important; height: 536px !important; }
  .p10-split-phone { top: 68px !important; }
}