/* Hocico Phone — Design tokens */
:root {
  /* Brand */
  --hp-green:        #2A9F84;
  --hp-green-600:    #1F8A6F;
  --hp-green-700:    #166B57;
  --hp-green-300:    #7FC4B0;
  --hp-green-200:    #A9D8C7;
  --hp-green-100:    #D4ECE3;
  --hp-green-50:     #ECF7F2;

  /* Warm accents */
  --hp-cream:        #FFF7EB;
  --hp-paper:        #FAF6EE;
  --hp-coral:        #F2715A;     /* heart / impact */
  --hp-amber:        #F2B237;     /* paws */

  /* Neutrals */
  --hp-ink:          #14241F;
  --hp-graphite:     #3A4A44;
  --hp-slate:        #6B7D77;
  --hp-stone:        #A8B5B0;
  --hp-mist:         #E6ECEA;
  --hp-fog:          #F2F5F4;
  --hp-white:        #FFFFFF;

  /* Semantic */
  --hp-success:      #2A9F84;
  --hp-warn:         #F2B237;
  --hp-danger:       #E0573F;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(20,36,31,.06), 0 1px 3px rgba(20,36,31,.04);
  --sh-2: 0 4px 14px rgba(20,36,31,.08);
  --sh-3: 0 14px 38px rgba(20,36,31,.10);
  --sh-glow: 0 0 0 4px rgba(42,159,132,.18);

  /* Typography */
  --font-sans: "Plus Jakarta Sans", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Manrope", -apple-system, sans-serif;
}

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--hp-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* Utility: hover-glow form fields */
.hp-field {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--hp-mist);
  background: var(--hp-white);
  font-size: 15px;
  color: var(--hp-ink);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  outline: none;
}
.hp-field::placeholder { color: var(--hp-stone); }
.hp-field:hover {
  border-color: var(--hp-green-300);
  box-shadow: 0 0 0 3px rgba(42,159,132,.08);
}
.hp-field:focus {
  border-color: var(--hp-green);
  box-shadow: var(--sh-glow);
  background: var(--hp-white);
}
.hp-field.error {
  border-color: var(--hp-danger);
  box-shadow: 0 0 0 3px rgba(224,87,63,.12);
}

.hp-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--hp-graphite);
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.hp-label .req { color: var(--hp-coral); margin-left: 2px; }

/* Buttons */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 15px;
  transition: transform .15s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.hp-btn-primary {
  background: var(--hp-green);
  color: white;
  box-shadow: 0 6px 16px rgba(42,159,132,.28);
}
.hp-btn-primary:hover {
  background: var(--hp-green-600);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(42,159,132,.34);
}
.hp-btn-ghost {
  background: transparent;
  color: var(--hp-green-700);
  border: 1.5px solid var(--hp-green-300);
}
.hp-btn-ghost:hover {
  background: var(--hp-green-50);
  border-color: var(--hp-green);
}
.hp-btn-dark {
  background: var(--hp-ink);
  color: white;
}
.hp-btn-dark:hover { background: #0A1614; }

.hp-btn-sm { padding: 8px 14px; font-size: 13px; }
.hp-btn-lg { padding: 16px 28px; font-size: 16px; }

/* Pills / chips */
.hp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--hp-green-50);
  color: var(--hp-green-700);
}
.hp-pill.warm { background: #FFF1E6; color: #B85423; }
.hp-pill.amber { background: #FFF6DF; color: #876614; }
.hp-pill.ink { background: var(--hp-ink); color: white; }

/* Cards */
.hp-card {
  background: var(--hp-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--hp-mist);
  padding: 24px;
}
.hp-card-soft {
  background: var(--hp-fog);
  border-radius: var(--r-lg);
  padding: 20px;
}

/* Typography helpers */
.hp-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 700;
  color: var(--hp-green);
}
.hp-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 0;
  color: var(--hp-ink);
}
.hp-h2 {
  font-weight: 800;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
}
.hp-h3 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0;
}
.hp-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--hp-graphite);
}
.hp-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hp-graphite);
}
.hp-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Frames container — each "artboard" gets a max width */
.hp-frame {
  background: var(--hp-white);
  width: 100%;
  /* 'clip' recorta igual que 'hidden' PERO no crea un scroll-container, así que NO
     rompe el position:sticky de la barra de navegación (.hv-nav) como hacía 'hidden'. */
  overflow: clip;
}

/* Mobile frame chrome */
.hp-phone {
  width: 390px;
  background: #000;
  border-radius: 44px;
  padding: 12px;
  box-shadow: var(--sh-3);
}
.hp-phone-inner {
  background: white;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
}
.hp-status {
  height: 38px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  font-size: 13px; font-weight: 600;
  color: var(--hp-ink);
  background: white;
}
.hp-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; background: #000; border-radius: 14px;
  z-index: 2;
}

/* Hover-glow for cards (the "select to light up" effect) */
.hp-glow {
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  border: 1.5px solid var(--hp-mist);
}
.hp-glow:hover {
  transform: translateY(-3px);
  border-color: var(--hp-green-300);
  box-shadow: 0 18px 40px rgba(42,159,132,.18), 0 0 0 1px var(--hp-green-300);
}
.hp-glow.selected {
  border-color: var(--hp-green);
  box-shadow: 0 18px 40px rgba(42,159,132,.22), 0 0 0 2px var(--hp-green);
}

/* Subtle paw bg */
.hp-paws {
  background-color: var(--hp-cream);
  background-image:
    radial-gradient(circle at 12% 22%, rgba(42,159,132,.06) 0 8px, transparent 9px),
    radial-gradient(circle at 86% 38%, rgba(42,159,132,.05) 0 6px, transparent 7px),
    radial-gradient(circle at 30% 80%, rgba(42,159,132,.05) 0 7px, transparent 8px),
    radial-gradient(circle at 70% 92%, rgba(42,159,132,.06) 0 5px, transparent 6px);
}

/* Scrollbar tame */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 8px; }

/* iOS Safari hace ZOOM automático (y descoloca/desplaza el layout) al enfocar un
   input con font-size < 16px. En dispositivos táctiles forzamos 16px en TODOS los
   campos para evitarlo — así no salta el zoom ni se va la maqueta al teclear.
   Solo afecta a táctil (pointer: coarse); el desktop queda igual. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea { font-size: 16px !important; }
}

/* Botón flotante "subir arriba" — aparece al bajar; útil sobre todo en móvil.
   z-index por debajo del drawer/modales (120) para que no se monte sobre el menú. */
.scrolltop-fab {
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 90;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--hp-green);
  color: #fff;
  border: none;
  box-shadow: 0 10px 26px -8px rgba(42, 159, 132, .6);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(12px) scale(.92);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.scrolltop-fab.show { opacity: 1; visibility: visible; transform: none; }
.scrolltop-fab:hover { background: var(--hp-green-600); }
.scrolltop-fab:active { transform: scale(.9); }
@media (min-width: 901px) {
  .scrolltop-fab { right: 24px; bottom: 24px; width: 50px; height: 50px; }
}

/* ── Rendimiento en MÓVIL (≤768px): sin blur en los fondos de modales ───────────
   El backdrop-filter de los overlays de modal es caro al abrir en GPUs de móvil
   (mismo motivo que el menú). Lo quitamos SOLO en móvil; la capa oscura se mantiene,
   así que el modal sigue destacando. El desktop conserva el blur tal cual. */
@media (max-width: 768px) {
  .sp-modal-back, .tl-modal-back, .mh-modal-back, .mhf-modal-back, .mst-back, .cs-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}